♻️ Refactors item so props is single object

src/components/LinkItems/Item.vue

@@ -1,30 +1,32 @@
 <template ref="container">
-  <div :class="`item-wrapper wrap-size-${itemSize}`" >
+  <div :class="`item-wrapper wrap-size-${size}`" >
     <a @click="itemClicked"
       @long-press="openContextMenu"
-      v-longPress="500"
-      @mouseup.right="openContextMenu"
       @contextmenu.prevent
-      :href="url"
+      @mouseup.right="openContextMenu"
+      v-longPress="true"
+      :href="item.url"
       :target="anchorTarget"
       :class="`item ${makeClassList}`"
       v-tooltip="getTooltipOptions()"
       rel="noopener noreferrer" tabindex="0"
-      :id="`link-${id}`"
+      :id="`link-${item.id}`"
-      :style="`--open-icon:${unicodeOpeningIcon};color:${color};background:${backgroundColor}`"
+      :style=
+      "`--open-icon:${unicodeOpeningIcon};color:${item.color};background:${item.backgroundColor}`"
     >
       <!-- Item Text -->
-      <div :class="`tile-title  ${!icon? 'bounce no-icon': ''}`" :id="`tile-${id}`" >
+      <div :class="`tile-title  ${!item.icon? 'bounce no-icon': ''}`" :id="`tile-${item.id}`" >
-        <span class="text">{{ title }}</span>
+        <span class="text">{{ item.title }}</span>
-        <p class="description">{{ description }}</p>
+        <p class="description">{{ item.description }}</p>
       </div>
       <!-- Item Icon -->
-      <Icon :icon="icon" :url="url" :size="itemSize" :color="color"
+      <Icon :icon="item.icon" :url="item.url" :size="size" :color="item.color"
         v-bind:style="customStyles" class="bounce" />
       <!-- Small icon, showing opening method on hover -->
-      <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon || itemSize === 'small'"
+      <ItemOpenMethodIcon class="opening-method-icon"
+        :isSmall="!item.icon || size === 'small'"
         :openingMethod="accumulatedTarget"  position="bottom right"
-        :hotkey="hotkey" />
+        :hotkey="item.hotkey" />
       <!-- Status indicator dot (if enabled) showing weather service is available -->
       <StatusIndicator
         class="status-indicator"
@@ -41,15 +43,15 @@
       v-click-outside="closeContextMenu"
       :posX="contextPos.posX"
       :posY="contextPos.posY"
-      :id="`context-menu-${id}`"
+      :id="`context-menu-${item.id}`"
       @launchItem="launchItem"
       @openItemSettings="openItemSettings"
       @openMoveItemMenu="openMoveItemMenu"
       @openDeleteItem="openDeleteItem"
     />
     <!-- Edit and move item menu modals -->
-    <MoveItemTo v-if="isEditMode" :itemId="id" />
+    <MoveItemTo v-if="isEditMode" :itemId="item.id" />
-    <EditItem v-if="editMenuOpen" :itemId="id"
+    <EditItem v-if="editMenuOpen" :itemId="item.id"
       @closeEditMenu="closeEditMenu"
       :isNew="isAddNew" :parentSectionTitle="parentSectionTitle" />
   </div>
@@ -64,7 +66,7 @@ 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 { targetValidator } from '@/utils/ConfigHelpers';
 import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
 import { modalNames } from '@/utils/defaults';
 
@@ -72,28 +74,7 @@ export default {
   name: 'Item',
   mixins: [ItemMixin],
   props: {
-    id: String, // The unique ID of a tile (e.g. 001)
+    itemSize: String,
-    title: String, // The main text of tile, required
-    subtitle: String, // Optional sub-text
-    description: String, // Optional tooltip hover text
-    icon: String, // Optional path to icon, within public/img/tile-icons
-    color: String, // Optional text and icon color, specified in hex code
-    backgroundColor: String, // Optional item background color
-    url: String, // URL to the resource, optional but recommended
-    provider: String, // Optional provider name, for external apps
-    hotkey: Number, // Shortcut for quickly launching app
-    target: { // Where resource will open, either 'newtab', 'sametab' or 'modal'
-      type: String,
-      validator: targetValidator,
-    },
-    itemSize: String, // Item size: small | medium | large
-    enableStatusCheck: Boolean, // Should run status checks
-    statusCheckHeaders: Object, // Custom status check headers
-    statusCheckUrl: String, // Custom URL for status check endpoint
-    statusCheckInterval: Number, // Num seconds beteween repeating checks
-    statusCheckAllowInsecure: Boolean, // Status check ignore SSL certs
-    statusCheckAcceptCodes: String, // Allow status checks to pass with a code other than 200
-    statusCheckMaxRedirects: Number, // Specify max number of redirects
     parentSectionTitle: String, // Title of parent section (for add new)
     isAddNew: Boolean, // Only set if 'fake' item used as Add New button
   },
@@ -109,11 +90,10 @@ export default {
   computed: {
     /* Based on item props, adjust class names */
     makeClassList() {
-      const {
+      const { isAddNew, isEditMode, size } = this;
-        icon, itemSize, isAddNew, isEditMode,
+      const { icon } = this.item;
-      } = this;
+      return `size-${size} ${!icon ? 'short' : ''} `
-      return `size-${itemSize} ${!icon ? 'short' : ''} `
+        + `${isAddNew ? 'add-new' : ''} ${isEditMode ? 'is-edit-mode' : ''}`;
-       + `${isAddNew ? 'add-new' : ''} ${isEditMode ? 'is-edit-mode' : ''}`;
     },
     /* Used by certain themes (material), to show animated CSS icon */
     unicodeOpeningIcon() {
@@ -133,19 +113,19 @@ export default {
     return {
       editMenuOpen: false,
       customStyles: {
-        color: this.color,
+        color: this.item.color,
-        background: this.backgroundColor,
+        background: this.item.backgroundColor,
       },
     };
   },
   methods: {
     /* Returns configuration object for the tooltip */
     getTooltipOptions() {
-      if (!this.description && !this.provider) return {}; // If no description, then skip
+      if (!this.item.description && !this.item.provider) return {}; // If no description, then skip
-      const description = this.description ? this.description : '';
+      const description = this.item.description || '';
-      const providerText = this.provider ? `<b>Provider</b>: ${this.provider}` : '';
+      const providerText = this.item.provider ? `<b>Provider</b>: ${this.item.provider}` : '';
       const lb1 = description && providerText ? '<br>' : '';
-      const hotkeyText = this.hotkey ? `<br>Press '${this.hotkey}' to launch` : '';
+      const hotkeyText = this.item.hotkey ? `<br>Press '${this.item.hotkey}' to launch` : '';
       const tooltipText = providerText + lb1 + description + hotkeyText;
       const editText = this.$t('interactive-editor.edit-section.edit-tooltip');
       return {
@@ -155,7 +135,7 @@ export default {
         html: true,
         placement: this.statusResponse ? 'left' : 'auto',
         delay: { show: 600, hide: 200 },
-        classes: `item-description-tooltip tooltip-is-${this.itemSize}`,
+        classes: `item-description-tooltip tooltip-is-${this.size}`,
       };
     },
     openItemSettings() {
@@ -172,14 +152,14 @@ export default {
     },
     /* Open the modal for moving/ copying item to other section */
     openMoveItemMenu() {
-      this.$modal.show(`${modalNames.MOVE_ITEM_TO}-${this.id}`);
+      this.$modal.show(`${modalNames.MOVE_ITEM_TO}-${this.item.id}`);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
       this.closeContextMenu();
     },
     /* Deletes the current item from the state */
     openDeleteItem() {
-      const parentSection = this.$store.getters.getParentSectionOfItem(this.id);
+      const parentSection = this.$store.getters.getParentSectionOfItem(this.item.id);
-      const payload = { itemId: this.id, sectionName: parentSection.name };
+      const payload = { itemId: this.item.id, sectionName: parentSection.name };
       this.$store.commit(StoreKeys.REMOVE_ITEM, payload);
       this.closeContextMenu();
     },

src/components/LinkItems/Section.vue

@@ -36,26 +36,10 @@
         </div>
         <Item
           v-else
-          :id="item.id"
+          :item="item"
           :key="item.id"
-          :url="item.url"
-          :title="item.title"
-          :description="item.description"
-          :icon="item.icon"
-          :target="item.target"
-          :color="item.color"
-          :backgroundColor="item.backgroundColor"
-          :statusCheckUrl="item.statusCheckUrl"
-          :statusCheckHeaders="item.statusCheckHeaders"
           :itemSize="itemSize"
-          :hotkey="item.hotkey"
-          :provider="item.provider"
           :parentSectionTitle="title"
-          :enableStatusCheck="item.statusCheck !== undefined ? item.statusCheck : enableStatusCheck"
-          :statusCheckInterval="statusCheckInterval"
-          :statusCheckAllowInsecure="item.statusCheckAllowInsecure"
-          :statusCheckAcceptCodes="item.statusCheckAcceptCodes"
-          :statusCheckMaxRedirects="item.statusCheckMaxRedirects"
           @itemClicked="$emit('itemClicked')"
           @triggerModal="triggerModal"
           :isAddNew="false"
@@ -63,12 +47,14 @@
       </template>
       <!-- When in edit mode, show additional item, for Add New item -->
       <Item v-if="isEditMode"
+        :item="{
+          icon: ':heavy_plus_sign:',
+          title: 'Add New Item',
+          description: 'Click to add new item',
+          id: 'add-new',
+        }"
         :isAddNew="true"
         :parentSectionTitle="title"
-        icon=":heavy_plus_sign:"
-        id="add-new"
-        title="Add New Item"
-        description="Click to add new item"
         key="add-new"
         class="add-new-item"
         :itemSize="itemSize"
@@ -216,18 +202,18 @@ export default {
       }
       return styles;
     },
-    /* Determines if user has enabled online status checks */
+    // /* Determines if user has enabled online status checks */
-    enableStatusCheck() {
+    // enableStatusCheck() {
-      return this.appConfig.statusCheck || false;
+    //   return this.appConfig.statusCheck || false;
-    },
+    // },
-    /* Determine how often to re-fire status checks */
+    // /* Determine how often to re-fire status checks */
-    statusCheckInterval() {
+    // statusCheckInterval() {
-      let interval = this.appConfig.statusCheckInterval;
+    //   let interval = this.appConfig.statusCheckInterval;
-      if (!interval) return 0;
+    //   if (!interval) return 0;
-      if (interval > 60) interval = 60;
+    //   if (interval > 60) interval = 60;
-      if (interval < 1) interval = 0;
+    //   if (interval < 1) interval = 0;
-      return interval;
+    //   return interval;
-    },
+    // },
   },
   methods: {
     /* Opens the iframe modal */

src/components/MinimalView/MinimalSection.vue

@@ -1,8 +1,9 @@
 <template>
-   <div :class="`minimal-section-inner ${selected ? 'selected' : ''} ${showAll ? 'show-all': ''}`">
+  <div :class="`minimal-section-inner ${selected ? 'selected' : ''} ${showAll ? 'show-all': ''}`">
     <div class="section-items" v-if="items && (selected || showAll)">
       <Item
         v-for="(item, index) in items"
+        :item="item"
         :id="`${index}_${makeId(item.title)}`"
         :key="`${index}_${makeId(item.title)}`"
         :url="item.url"
@@ -34,6 +35,9 @@
         @navigateToSection="navigateToSection"
       />
     </div>
+    <div v-if="selected && !showAll && !widgets && items.length < 1" class="empty-section">
+      <p>{{ $t('home.no-items-section') }}</p>
+    </div>
     <IframeModal
       :ref="`iframeModal-${groupId}`"
       :name="`iframeModal-${groupId}`"
@@ -131,9 +135,18 @@ export default {
   .minimal-widget-wrap {
     padding: 1rem;
   }
+  .empty-section {
+    padding: 1rem;
+    margin: 0.5rem auto;
+    color: var(--minimal-view-group-color);
+    font-size: 1rem;
+    font-style: italic;
+    opacity: var(--dimming-factor);
+  }
   &.selected {
     border: 1px solid var(--minimal-view-group-color);
     grid-column-start: span var(--col-count, 3);
+    &:not(.show-all) { min-height: 300px; }
   }
   &.show-all {
     border: none;

src/mixins/ItemMixin.js

@@ -6,12 +6,17 @@ import {
   openingMethod as defaultOpeningMethod,
   serviceEndpoints,
   localStorageKeys,
+  iconSize as defaultSize,
 } from '@/utils/defaults';
 
 export default {
   directives: {
     longPress,
   },
+  props: {
+    item: Object,
+    isAddNew: Boolean,
+  },
   data() {
     return {
       statusResponse: undefined,
@@ -29,6 +34,25 @@ export default {
     isEditMode() {
       return this.$store.state.editMode;
     },
+    size() {
+      const validSizes = ['small', 'medium', 'large'];
+      if (this.itemSize && validSizes.includes(this.itemSize)) return this.itemSize;
+      return this.appConfig.iconSize || defaultSize;
+    },
+    /* Determines if user has enabled online status checks */
+    enableStatusCheck() {
+      const globalPref = this.appConfig.statusCheck || false;
+      const itemPref = this.item.statusCheck || false;
+      return itemPref || globalPref;
+    },
+    /* Determine how often to re-fire status checks */
+    statusCheckInterval() {
+      let interval = this.item.statusCheckInterval || this.appConfig.statusCheckInterval;
+      if (!interval) return 0;
+      if (interval > 60) interval = 60;
+      if (interval < 1) interval = 0;
+      return interval;
+    },
     accumulatedTarget() {
       return this.target || this.appConfig.defaultOpeningMethod || defaultOpeningMethod;
     },
@@ -53,7 +77,7 @@ export default {
       return noAnchorNeeded.includes(this.accumulatedTarget) ? nothing : url;
     },
     /* Pulls together all user options, returns URL + Get params for ping endpoint */
-    makeApiUrl() {
+    statusCheckApiUrl() {
       const {
         url,
         statusCheckUrl,
@@ -61,7 +85,7 @@ export default {
         statusCheckAllowInsecure,
         statusCheckAcceptCodes,
         statusCheckMaxRedirects,
-      } = this;
+      } = this.item;
       const encode = (str) => encodeURIComponent(str);
       this.statusResponse = undefined;
       // Find base URL, where the API is hosted
@@ -79,9 +103,16 @@ export default {
       return `${baseUrl}${serviceEndpoints.statusCheck}/${urlToCheck}`
         + `${headers}${enableInsecure}${acceptCodes}${maxRedirects}`;
     },
+    customStyle() {
+      return `--open-icon:${this.unicodeOpeningIcon};`
+        + `color:${this.item.color};`
+        + `background:${this.item.backgroundColor}`;
+    },
+  },
+  methods: {
     /* Checks if a given service is currently online */
     checkWebsiteStatus() {
-      const endpoint = this.makeApiUrl();
+      const endpoint = this.statusCheckApiUrl;
       axios.get(endpoint)
         .then((response) => {
           if (response.data) this.statusResponse = response.data;
@@ -93,8 +124,6 @@ export default {
           };
         });
     },
-  },
-  methods: {
     /* Called when an item is clicked, manages the opening of modal & resets the search field */
     itemClicked(e) {
       if (this.isEditMode) {