@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.25

package/src/components/lists/VcsList.vue

@@ -1,64 +1,46 @@
 <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-else-if="selected.length === renderingItems.length"
             @click="clear"
           >
-            mdi-check-circle-outline
+            mdi-check-circle
           </v-icon>
           <v-icon
-            v-else-if="selected.length > 0 && selected.length < renderingItems.length"
+            v-else-if="
+              selected.length > 0 && selected.length < renderingItems.length
+            "
             @click="selectAll()"
           >
-            mdi-minus-circle-outline
-          </v-icon>
-          <v-icon
-            v-else
-            @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
           />
         </v-list-item-content>
       </v-list-item>
@@ -69,58 +51,65 @@
         :disabled="item.disabled"
         @mousedown.shift="$event.preventDefault()"
         @mouseover="hovering = index"
-        @mouseout="hovering = null"
-        :class="{ 'v-list-item__lighten_even': lightenEven, 'v-list-item__lighten_odd': !lightenEven }"
+        @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
           />
-        </v-list-item-content>
+        </v-list-item-action>
       </v-list-item>
     </v-list>
   </div>
@@ -140,6 +129,7 @@
   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
@@ -148,14 +138,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.
@@ -165,6 +162,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.
@@ -176,10 +174,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,
@@ -192,11 +192,14 @@
       VSpacer,
     },
     props: {
-      /** @type {Array<VcsListItem>} */
       items: {
         type: Array,
         required: true,
       },
+      draggable: {
+        type: Boolean,
+        default: false,
+      },
       selectable: {
         type: Boolean,
         default: false,
@@ -205,7 +208,6 @@
         type: Boolean,
         default: false,
       },
-      /** @type {Array<VcsListItem>} */
       value: {
         type: Array,
         default: () => [],
@@ -253,53 +255,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;
         }),
@@ -337,30 +403,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 {
@@ -376,8 +448,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;
@@ -401,14 +473,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);
@@ -423,6 +495,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 '';
+        }),
       };
     },
   };
@@ -441,9 +534,24 @@
           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 {
@@ -455,6 +563,9 @@
           .v-icon {
             font-size: 16px;
           }
+          &:last-child {
+            min-width: auto;
+          }
         }
         .v-list-item__content {
           flex-wrap: nowrap;

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>
-

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -1,32 +1,21 @@
 <template>
-  <div
-    class="d-flex flex-row align-center"
-    v-if="item"
-  >
-    <div
-      class="position-relative col-8 pa-0 d-flex align-center"
-    >
-      <span
-        v-if="item.icon"
-        class="d-inline-flex"
-      >
-        <v-icon
-          v-if="isStringIcon"
-          v-text="item.icon"
-          :size="16"
-          class="mr-1"
-        />
+  <div class="d-flex flex-row align-center" v-if="item">
+    <div class="position-relative col-8 pa-0 d-flex align-center">
+      <span v-if="item.icon" class="d-inline-flex">
+        <v-icon v-if="isStringIcon" :size="16" class="mr-1">
+          {{ item.icon }}
+        </v-icon>
         <ImageElementInjector :element="item.icon" v-else />
       </span>
-      <VcsTooltip
-        :tooltip="item.tooltip || item.title"
-      >
+      <VcsTooltip :tooltip="tooltip">
         <template #activator="{ on, attrs }">
           <span
             v-bind="attrs"
             v-on="on"
             class="d-inline-block text-truncate"
-          >{{ $t(item.title) }}</span>
+            ref="titleElem"
+            >{{ $t(item.title) }}</span
+          >
         </template>
       </VcsTooltip>
     </div>
@@ -36,7 +25,6 @@
       :actions="item.actions"
       :block-overflow="true"
       :overflow-count="3"
-      small
       right
       class="col-4 pa-0 d-flex align-center"
     />
@@ -44,7 +32,7 @@
 </template>
 
 <script>
-  import { computed } from 'vue';
+  import { computed, ref } from 'vue';
   import { VIcon } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import ImageElementInjector from '../imageElementInjector.vue';
@@ -71,10 +59,22 @@
     },
     setup(props) {
       const leaf = computed(() => props.item?.children?.length === 0);
+      const titleElem = ref(null);
 
       return {
         isStringIcon: computed(() => typeof props.item.icon === 'string'),
         leaf,
+        titleElem,
+        tooltip: computed(() => {
+          if (props.item.tooltip) {
+            return props.item.tooltip;
+          }
+          const elem = titleElem.value;
+          if (elem && elem.offsetWidth < elem.scrollWidth) {
+            return props.item.title;
+          }
+          return '';
+        }),
       };
     },
   };