🚧 Started working on sub-items

src/components/LinkItems/Item.vue

@@ -63,17 +63,18 @@ import EditItem from '@/components/InteractiveEditor/EditItem';
 import MoveItemTo from '@/components/InteractiveEditor/MoveItemTo';
 import ContextMenu from '@/components/LinkItems/ItemContextMenu';
 import StoreKeys from '@/utils/StoreMutations';
+import ItemMixin from '@/mixins/ItemMixin';
 import { targetValidator } from '@/utils/ConfigHelpers';
 import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
 import {
   localStorageKeys,
   serviceEndpoints,
   modalNames,
-  openingMethod as defaultOpeningMethod,
 } from '@/utils/defaults';
 
 export default {
   name: 'Item',
+  mixins: [ItemMixin],
   props: {
     id: String, // The unique ID of a tile (e.g. 001)
     title: String, // The main text of tile, required
@@ -109,15 +110,6 @@ export default {
     EditModeIcon,
   },
   computed: {
-    appConfig() {
-      return this.$store.getters.appConfig;
-    },
-    isEditMode() {
-      return this.$store.state.editMode;
-    },
-    accumulatedTarget() {
-      return this.target || this.appConfig.defaultOpeningMethod || defaultOpeningMethod;
-    },
     /* Based on item props, adjust class names */
     makeClassList() {
       const {
@@ -126,25 +118,6 @@ export default {
       return `size-${itemSize} ${!icon ? 'short' : ''} `
        + `${isAddNew ? 'add-new' : ''} ${isEditMode ? 'is-edit-mode' : ''}`;
     },
-    /* Convert config target value, into HTML anchor target attribute */
-    anchorTarget() {
-      if (this.isEditMode) return '_self';
-      const target = this.accumulatedTarget;
-      switch (target) {
-        case 'sametab': return '_self';
-        case 'newtab': return '_blank';
-        case 'parent': return '_parent';
-        case 'top': return '_top';
-        default: return undefined;
-      }
-    },
-    /* Get href for anchor, if not in edit mode, or opening in modal/ workspace */
-    hyperLinkHref() {
-      const nothing = '#';
-      if (this.isEditMode) return nothing;
-      const noAnchorNeeded = ['modal', 'workspace', 'clipboard'];
-      return noAnchorNeeded.includes(this.accumulatedTarget) ? nothing : this.url;
-    },
   },
   data() {
     return {