@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.24

package/src/components/lists/VcsList.vue

@@ -1,58 +1,47 @@
 <template>
-  <div
-    class="d-contents"
-  >
+  <div class="d-contents">
     <vcs-treeview-searchbar
       v-if="searchable"
       :placeholder="searchbarPlaceholder"
       v-model="query"
     />
-    <v-list
-      dense
-    >
-      <v-list-item
-        v-if="showTitle"
-        class="font-weight-bold"
-      >
-        <v-list-item-action
-          v-if="selectable"
-        >
+    <v-list dense>
+      <v-list-item v-if="showTitle" class="font-weight-bold">
+        <v-list-item-action v-if="selectable">
+          <v-spacer v-if="singleSelect" />
           <v-icon
-            v-if="selected.length === renderingItems.length"
+            v-else-if="selected.length === renderingItems.length"
             @click="clear"
           >
-            mdi-check-circle-outline
+            mdi-check-circle
           </v-icon>
           <v-icon
-            v-else
+            v-else-if="
+              selected.length > 0 && selected.length < renderingItems.length
+            "
             @click="selectAll()"
           >
-            mdi-circle-outline
+            mdi-minus-circle
           </v-icon>
+          <v-icon v-else @click="selectAll()"> mdi-circle-outline </v-icon>
         </v-list-item-action>
-
         <v-list-item-content>
           <v-icon v-if="icon">
             {{ icon }}
           </v-icon>
-
-          <VcsTooltip
-            :tooltip="tooltip || title"
-          >
+          <VcsTooltip :tooltip="$t(listHeaderTooltip)">
             <template #activator="{ on, attrs }">
-              <v-list-item-title v-bind="attrs" v-on="on">
+              <v-list-item-title v-bind="attrs" v-on="on" ref="listHeader">
                 {{ $t(title) }}
               </v-list-item-title>
             </template>
           </VcsTooltip>
-
           <vcs-action-button-list
             v-if="actions?.length > 0"
             :actions="actions"
             :block-overflow="true"
             :overflow-count="actionButtonListOverflowCount"
             small
-            right
           />
         </v-list-item-content>
       </v-list-item>
@@ -63,58 +52,66 @@
         :disabled="item.disabled"
         @mousedown.shift="$event.preventDefault()"
         @mouseover="hovering = index"
-        @mouseout="hovering = null"
+        @mouseout="hovering = undefined"
+        :draggable="isDraggable"
+        @dragstart="drag($event, item, index)"
+        @mouseup="drop($event, index)"
+        :class="{
+          'v-list-item__lighten_even': lightenEven,
+          'v-list-item__lighten_odd': !lightenEven,
+          'vcs-draggable-item': isDraggable,
+          'v-list-item__dragged': dragging === index,
+          'border-bottom': borderBottom(index),
+          'border-top': borderTop(index),
+        }"
       >
-        <v-list-item-action
-          v-if="selectable"
-        >
-          <v-icon
-            v-if="selected.includes(item)"
-            @click="remove(item)"
-          >
-            mdi-check-circle-outline
+        <v-list-item-action v-if="selectable">
+          <v-icon v-if="selected.includes(item)" @click="remove(item)">
+            mdi-check-circle
           </v-icon>
           <v-icon
-            v-else-if="hovering === index || (!singleSelect && selected.length > 0)"
+            v-else-if="
+              hovering === index || (!singleSelect && selected.length > 0)
+            "
             @click="singleSelect ? select(item, $event) : add(item)"
           >
             mdi-circle-outline
           </v-icon>
-          <v-icon
-            v-else
-            @click="select(item, $event)"
-          >
+          <v-icon v-else @click="select(item, $event)">
             mdi-circle-small
           </v-icon>
         </v-list-item-action>
-
         <v-list-item-content
-          :class="[selectable ? 'cursor-pointer' : '']"
+          :class="[selectable && !isDraggable ? 'cursor-pointer' : '']"
           @click="select(item, $event)"
         >
           <v-icon v-if="item.icon">
             {{ item.icon }}
           </v-icon>
-
           <VcsTooltip
-            :tooltip="item.tooltip || item.title"
+            :tooltip="
+              dragging !== undefined
+                ? undefined
+                : $t(item.tooltip || overflowTitle(index, item.title))
+            "
           >
             <template #activator="{ on, attrs }">
-              <v-list-item-title v-bind="attrs" v-on="on">
+              <v-list-item-title v-bind="attrs" v-on="on" ref="titles">
                 {{ $t(item.title) }}
               </v-list-item-title>
             </template>
           </VcsTooltip>
-
+        </v-list-item-content>
+        <VcsBadge v-if="item.hasUpdate" :color="'warning'" />
+        <v-list-item-action>
           <vcs-action-button-list
             v-if="item.actions?.length > 0"
             :actions="item.actions"
             :block-overflow="true"
             :overflow-count="actionButtonListOverflowCount"
             small
-            right
           />
-        </v-list-item-content>
+        </v-list-item-action>
       </v-list-item>
     </v-list>
   </div>
@@ -129,10 +126,12 @@
     VListItemAction,
     VIcon,
     VListItemTitle,
+    VSpacer,
   } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
+  import VcsBadge from '../notification/VcsBadge.vue';
 
   /**
    * @typedef {Object} VcsListItem
@@ -141,14 +140,21 @@
    * @property {boolean} [disabled] - Whether this item should be displayed as disabled.
    * @property {string} title - The title to be displayed
    * @property {string} [tooltip]
-   * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be an URL or HTMLElement.
+   * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be a URL or HTMLElement.
+   * @property {boolean} [hasUpdate] - Shows badge, if item has an update.
    * @property {Array<VcsAction>} [actions]
    * @property {function(boolean):void} [selectionChanged] - A callback called if the selection changes with the current selection status. called before value update
    */
 
   /**
-   * The VCS list is intended to render items. Items can be selectable (by default, more then one) or only a single item can
-   * be selected. If items are disabled they cannot selected. Items which are not visible are not rendered. This items can
+   * @typedef {Object} ItemMovedEvent
+   * @property {VcsListItem} item
+   * @property {number} targetIndex
+   */
+
+  /**
+   * The VCS list is intended to render items. Items can be selectable (by default, more than one) or only a single item can
+   * be selected. If items are disabled they cannot be selected. Items which are not visible are not rendered. These items can
    * no longer be selected or deselected either. Making a selected item invisible can lead to undefined behavior
    * in the selection state.
    * Clicking an unselected item selects it.
@@ -158,6 +164,7 @@
    * Clicking with SHIFT will create a selection range, starting or ending with the first item in the list
    * or the last normally selected item (not the last item clicked with CTRL for instance).
    * @vue-prop {Array<VcsListItem>} items
+   * @vue-prop {boolean} [draggable=false]
    * @vue-prop {boolean} [selectable=false]
    * @vue-prop {boolean} [singleSelect=false]
    * @vue-prop {Array<VcsListItem>} [value=[]] - the initial items to be selected.
@@ -169,10 +176,12 @@
    * @vue-prop {string} [icon] - icon to prepend to the list title
    * @vue-prop {string} [tooltip] - tooltip to render on the list title
    * @vue-prop {Array<VcsAction>} [actions] - actions to render in the list title
+   * @vue-event {ItemMovedEvent} item-moved - event triggered after item was dragged and is dropped
    */
   export default {
     name: 'VcsList',
     components: {
+      VcsBadge,
       VcsTreeviewSearchbar,
       VcsActionButtonList,
       VcsTooltip,
@@ -182,13 +191,17 @@
       VListItemAction,
       VIcon,
       VListItemTitle,
+      VSpacer,
     },
     props: {
-      /** @type {Array<VcsListItem>} */
       items: {
         type: Array,
         required: true,
       },
+      draggable: {
+        type: Boolean,
+        default: false,
+      },
       selectable: {
         type: Boolean,
         default: false,
@@ -197,7 +210,6 @@
         type: Boolean,
         default: false,
       },
-      /** @type {Array<VcsListItem>} */
       value: {
         type: Array,
         default: () => [],
@@ -245,49 +257,117 @@
       const selected = ref(props.value);
       /** @type {import("vue").Ref<string>} */
       const query = ref('');
-      const hovering = ref(null);
+      /** @type {import("vue").Ref<number|undefined>} */
+      const hovering = ref(undefined);
+      /** @type {import("vue").Ref<number|undefined>} */
+      const dragging = ref(undefined);
+      const borderBottom = (index) => {
+        return (
+          dragging.value !== undefined &&
+          dragging.value < index &&
+          index === hovering.value
+        );
+      };
+      const borderTop = (index) => {
+        return (
+          dragging.value !== undefined &&
+          dragging.value > index &&
+          index === hovering.value
+        );
+      };
+      const lightenEven = computed(() => {
+        return !(!props.searchable && !props.showTitle);
+      });
       let firstSelected = null;
+      const titles = ref([]);
+      const listHeader = ref(null);
 
-      watch(props, () => {
-        if (selected.value !== props.value) {
-          selected.value = props.value;
-        }
-        if (props.singleSelect && selected.value.length > 1) {
-          selected.value
-            .filter((i, index) => index && i.selectionChanged)
-            .forEach(i => i.selectionChanged(false));
-          selected.value = [selected.value[0]];
-          emit('input', selected);
-        }
-        if (!props.selectable && selected.value.length > 0) {
-          selected.value
-            .filter(i => i.selectionChanged)
-            .forEach(i => i.selectionChanged(false));
-          selected.value = [];
-          emit('input', selected);
-        }
-        if (!props.searchable) {
-          query.value = '';
-        }
-      }, { immediate: true, deep: false });
+      watch(
+        props,
+        () => {
+          if (selected.value !== props.value) {
+            selected.value = props.value;
+          }
+          if (props.singleSelect && selected.value.length > 1) {
+            selected.value
+              .filter((i, index) => index && i.selectionChanged)
+              .forEach((i) => i.selectionChanged(false));
+            selected.value = [selected.value[0]];
+            emit('input', selected);
+          }
+          if (!props.selectable && selected.value.length > 0) {
+            selected.value
+              .filter((i) => i.selectionChanged)
+              .forEach((i) => i.selectionChanged(false));
+            selected.value = [];
+            emit('input', selected);
+          }
+          if (!props.searchable) {
+            query.value = '';
+          }
+        },
+        { immediate: true, deep: false },
+      );
 
       const vm = getCurrentInstance().proxy;
       /** @type {function(VcsListItem, string):boolean} */
-      const filterPredicate = inject('filterPredicate', (item, queryString = '') => {
-        const translatedTitle = vm.$t(item.title);
-        return translatedTitle.toLocaleLowerCase().includes(queryString.toLocaleLowerCase());
-      });
+      const filterPredicate = inject(
+        'filterPredicate',
+        (item, queryString = '') => {
+          const translatedTitle = vm.$t(item.title);
+          return translatedTitle
+            .toLocaleLowerCase()
+            .includes(queryString.toLocaleLowerCase());
+        },
+      );
+
+      /**
+       * @type {VcsListItem|null}
+       */
+      let draggedItem = null;
+
+      /**
+       * @param {MouseEvent} e
+       * @param {number} targetIndex
+       */
+      function drop(e, targetIndex) {
+        if (draggedItem !== null && targetIndex !== undefined) {
+          emit('item-moved', { item: draggedItem, targetIndex });
+        }
+        draggedItem = null;
+        dragging.value = undefined;
+        document.removeEventListener('mouseup', drop);
+      }
+
+      /**
+       * @param {MouseEvent} e
+       * @param {VcsListItem} item
+       * @param {number} index
+       */
+      function drag(e, item, index) {
+        dragging.value = index;
+        draggedItem = item;
+        e.dataTransfer.effectAllowed = 'move';
+        document.addEventListener('mouseup', drop);
+      }
 
       return {
         query,
         hovering,
+        dragging,
+        isDraggable: computed(() => {
+          return query.value === '' && props.draggable;
+        }),
+        borderBottom,
+        borderTop,
+        lightenEven,
         /**
          * @type {import("vue").ComputedRef<Array<VcsListItem>>}
          */
         renderingItems: computed(() => {
-          let items = props.items.filter(i => i.visible !== false);
+          let items = props.items.filter((i) => i.visible !== false);
           if (query.value) {
-            items = items.filter(i => filterPredicate(i, query.value));
+            items = items.filter((i) => filterPredicate(i, query.value));
           }
           return items;
         }),
@@ -325,30 +405,36 @@
                 Math.max(firstIndex, currentIndex) + 1,
               );
               currentSelection.forEach((oldItem) => {
-                if (oldItem.selectionChanged && !selected.value.includes(oldItem)) {
+                if (
+                  oldItem.selectionChanged &&
+                  !selected.value.includes(oldItem)
+                ) {
                   oldItem.selectionChanged(false);
                 }
               });
               selected.value.forEach((newItem) => {
-                if (newItem.selectionChanged && !currentSelection.includes(newItem)) {
+                if (
+                  newItem.selectionChanged &&
+                  !currentSelection.includes(newItem)
+                ) {
                   newItem.selectionChanged(true);
                 }
               });
             } else {
               selected.value
-                .filter(i => i !== item && i.selectionChanged)
-                .forEach(i => i.selectionChanged(false));
+                .filter((i) => i !== item && i.selectionChanged)
+                .forEach((i) => i.selectionChanged(false));
               selected.value = [];
               firstSelected = null;
             }
           } else if (selected.value.includes(item)) {
             if (event.ctrlKey) {
               item.selectionChanged?.(false);
-              selected.value = selected.value.filter(i => i !== item);
+              selected.value = selected.value.filter((i) => i !== item);
             } else if (selected.value.length > 1) {
               selected.value
-                .filter(i => i !== item && i.selectionChanged)
-                .forEach(i => i.selectionChanged(false));
+                .filter((i) => i !== item && i.selectionChanged)
+                .forEach((i) => i.selectionChanged(false));
               selected.value = [item];
               firstSelected = item;
             } else {
@@ -364,8 +450,8 @@
             }
           } else {
             selected.value
-              .filter(i => i !== item && i.selectionChanged)
-              .forEach(i => i.selectionChanged(false));
+              .filter((i) => i !== item && i.selectionChanged)
+              .forEach((i) => i.selectionChanged(false));
             item.selectionChanged?.(true);
             selected.value = [item];
             firstSelected = item;
@@ -389,14 +475,14 @@
         remove(item) {
           if (selected.value.includes(item) && !item.disabled) {
             item.selectionChanged?.(false);
-            selected.value = selected.value.filter(i => i !== item);
+            selected.value = selected.value.filter((i) => i !== item);
             emit('input', selected.value);
           }
         },
         clear() {
           selected.value
-            .filter(i => i.selectionChanged)
-            .forEach(i => i.selectionChanged(false));
+            .filter((i) => i.selectionChanged)
+            .forEach((i) => i.selectionChanged(false));
           selected.value = [];
           firstSelected = null;
           emit('input', selected.value);
@@ -411,6 +497,27 @@
           });
           emit('input', selected.value);
         },
+        drag,
+        drop,
+        titles,
+        overflowTitle(index, alternative) {
+          const elem = titles.value[index];
+          if (elem && elem.offsetWidth < elem.scrollWidth) {
+            return alternative;
+          }
+          return '';
+        },
+        listHeader,
+        listHeaderTooltip: computed(() => {
+          if (props.tooltip) {
+            return props.tooltip;
+          }
+          const elem = listHeader.value;
+          if (elem && elem.offsetWidth < elem.scrollWidth) {
+            return props.title;
+          }
+          return '';
+        }),
       };
     },
   };
@@ -419,9 +526,34 @@
 <style lang="scss" scoped>
   ::v-deep {
     .v-list {
+      .v-list-item__lighten_even {
+        &:nth-child(even) {
+          background-color: var(--v-base-lighten4);
+        }
+      }
+      .v-list-item__lighten_odd {
+        &:nth-child(odd) {
+          background-color: var(--v-base-lighten4);
+        }
+      }
+      .v-list-item__dragged {
+        background-color: var(--v-base-lighten2) !important;
+      }
       .v-list-item {
         padding: 4px 8px 4px 16px;
-        &:after{
+        &.vcs-draggable-item:hover {
+          cursor: grab;
+          user-select: none;
+        }
+        &.border-bottom {
+          border-bottom: solid;
+          border-bottom-color: var(--v-base-lighten2);
+        }
+        &.border-top {
+          border-top: solid;
+          border-top-color: var(--v-base-lighten2);
+        }
+        &:after {
           display: none;
         }
         &.font-weight-bold {
@@ -429,9 +561,6 @@
             font-weight: 700;
           }
         }
-        &:nth-child(even) {
-          background-color: var(--v-base-lighten4);
-        }
         .v-list-item__action {
           .v-icon {
             font-size: 16px;

package/src/components/lists/VcsTreeview.vue

@@ -7,7 +7,7 @@
     />
     <v-treeview
       class="vcs-treeview"
-      v-bind="{...$props, ...$attrs}"
+      v-bind="{ ...$props, ...$attrs }"
       v-on="$listeners"
       expand-icon="mdi-chevron-down"
       item-key="name"
@@ -25,32 +25,35 @@
   </div>
 </template>
 <style lang="scss" scoped>
-.vcs-treeview {
-  ::v-deep {
-    // Root Level Entries should be 40px high
-    > .v-treeview-node > .v-treeview-node__root {
-      min-height: 40px;
-    }
-    // Border around root nodes with children included
-    > .v-treeview-node:not(:last-child) {
-      border-bottom: 1px solid var(--v-base-lighten2);
-    }
-    // Only Root Entries have a bold font
-    > .v-treeview-node > .v-treeview-node__root > .v-treeview-node__content > .v-treeview-node__label {
-      font-weight: 700;
-    }
-    // remove ripple effect from expand icon
-    .v-icon.v-icon {
-      &::after{
-        background-color: transparent;
+  .vcs-treeview {
+    ::v-deep {
+      // Root Level Entries should be 40px high
+      > .v-treeview-node > .v-treeview-node__root {
+        min-height: 40px;
+      }
+      // Border around root nodes with children included
+      > .v-treeview-node:not(:last-child) {
+        border-bottom: 1px solid var(--v-base-lighten2);
+      }
+      // Only Root Entries have a bold font
+      > .v-treeview-node
+        > .v-treeview-node__root
+        > .v-treeview-node__content
+        > .v-treeview-node__label {
+        font-weight: 700;
+      }
+      // remove ripple effect from expand icon
+      .v-icon.v-icon {
+        &::after {
+          background-color: transparent;
+        }
+      }
+      // Toggle Item Chevron with should be 16px
+      .v-treeview-node__toggle {
+        width: 16px;
       }
-    }
-    // Toggle Item Chevron with should be 16px
-    .v-treeview-node__toggle {
-      width: 16px;
     }
   }
-}
 </style>
 
 <script>
@@ -95,7 +98,9 @@
        */
       const handleFilter = (treeNode, q = '') => {
         const translatedTitle = vm.$t(treeNode.title);
-        return translatedTitle.toLocaleLowerCase().includes(q.toLocaleLowerCase());
+        return translatedTitle
+          .toLocaleLowerCase()
+          .includes(q.toLocaleLowerCase());
       };
 
       return {
@@ -105,4 +110,3 @@
     },
   };
 </script>
-