@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/components/lists/VcsList.vue

@@ -1,117 +1,75 @@
 <template>
-  <div class="d-contents">
+  <div class="d-contents vcs-list">
     <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-content>
+    <v-list :class="{ 'vcs-list__selectable': selectable }">
+      <v-list-item v-if="showTitle && title">
+        <template #prepend>
           <v-icon v-if="icon">
             {{ icon }}
           </v-icon>
-          <v-list-item-title>
-            <VcsTooltip :tooltip="$t(listHeaderTooltip)">
-              <template #activator="{ on, attrs }">
-                <span v-bind="attrs" v-on="on" ref="listHeader">
-                  {{ $t(title) }}
-                </span>
-              </template>
-            </VcsTooltip>
-            <span v-if="selectable && selected.length > 0">
-              {{ `(${selected.length})` }}
-            </span>
-          </v-list-item-title>
+        </template>
+        <v-list-item-title class="font-weight-bold" ref="listHeader">
+          <span :class="{ 'vcs-list-title__selected': selected.length > 0 }">
+            {{ $st(title) }}
+          </span>
+          <v-tooltip v-if="listHeaderTooltip" activator="parent">
+            {{ $st(listHeaderTooltip) }}
+          </v-tooltip>
+          <span v-if="selectable && selected.length > 0" class="ml-1">
+            {{ `(${selected.length})` }}
+          </span>
+        </v-list-item-title>
+        <template #append>
           <vcs-action-button-list
             v-if="renderingActions?.length > 0"
             :actions="renderingActions"
-            :block-overflow="true"
             :overflow-count="actionButtonListOverflowCount"
           />
-        </v-list-item-content>
+        </template>
       </v-list-item>
       <template v-for="(item, index) in renderingItems">
-        <v-list-item
+        <VcsListItemComponent
+          v-if="item"
+          :dragging="dragging === index"
+          :item="item"
           :key="`item-${index}`"
-          :input-value="selected.includes(item)"
-          :disabled="item.disabled"
+          :active="selected.includes(item)"
           @mousedown.shift="$event.preventDefault()"
           @mouseover="hovering = index"
           @mouseout="hovering = undefined"
           :draggable="isDraggable"
           @dragstart="drag($event, item, index)"
           @mouseup="drop($event, index)"
-          color="primary"
           :class="{
             'v-list-item__selected': selected.includes(item),
             'v-list-item__lighten_even': lightenEven,
             'v-list-item__lighten_odd': !lightenEven,
             'vcs-draggable-item': isDraggable,
             'v-list-item__dragged': dragging === index,
+            'v-list-item__dragged_over': dragging !== undefined,
             'border-bottom': borderBottom(index),
             'border-top': borderTop(index),
+            'cursor-pointer': selectable && !isDraggable,
           }"
+          @click="select(item, $event)"
         >
-          <v-list-item-content
-            :class="[selectable && !isDraggable ? 'cursor-pointer' : '']"
-            @click="select(item, $event)"
-          >
-            <v-icon v-if="item.icon">
-              {{ item.icon }}
-            </v-icon>
-            <VcsTooltip
-              :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"
-                  ref="titles"
-                  class="d-flex gap-2"
-                >
-                  <slot name="item.prepend-title" :item="item" :index="index" />
-                  <slot name="item.title" :item="item" :index="index">
-                    <VcsTextField
-                      v-if="item.rename"
-                      :value="item.title"
-                      autofocus
-                      :no-padding="true"
-                      @input="(value) => rename(item, value)"
-                      @click.stop
-                      @keydown.enter="item.rename = false"
-                      @blur="item.rename = false"
-                      :rules="[(v) => !!v || 'components.validation.required']"
-                    />
-                    <span v-else>
-                      {{ $t(item.title) }}
-                    </span>
-                  </slot>
-                  <slot
-                    name="item.append-title"
-                    :item="item"
-                    :index="index"
-                    class="ml-auto"
-                  />
-                </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"
-              :disabled="item.disabled"
-              :block-overflow="true"
-              :overflow-count="actionButtonListOverflowCount"
-            />
-          </v-list-item-action>
-        </v-list-item>
+          <template #append="scope">
+            <slot name="item.append" v-bind="{ ...scope, index, item }" />
+          </template>
+          <template #title="scope">
+            <slot name="item.title" v-bind="{ ...scope, index, item }" />
+          </template>
+          <template #subtitle="scope">
+            <slot name="item.subtitle" v-bind="{ ...scope, index, item }" />
+          </template>
+          <template #prepend="scope">
+            <slot name="item.prepend" v-bind="{ ...scope, index, item }" />
+          </template>
+        </VcsListItemComponent>
         <slot name="item.intermediate" :item="item" :index="index" />
         <div
           v-if="hasIntermediateSlot"
@@ -123,24 +81,30 @@
 </template>
 
 <script>
-  import { computed, getCurrentInstance, inject, ref, watch } from 'vue';
+  import {
+    computed,
+    getCurrentInstance,
+    inject,
+    isReactive,
+    ref,
+    shallowRef,
+    watch,
+  } from 'vue';
   import {
     VList,
     VListItem,
-    VListItemContent,
-    VListItemAction,
     VIcon,
     VListItemTitle,
-  } from 'vuetify/lib';
+    VTooltip,
+  } from 'vuetify/components';
+  import VcsListItemComponent from './VcsListItemComponent.vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
-  import VcsBadge from '../notification/VcsBadge.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import { createEllipseTooltip } from '../composables.js';
 
   /**
-   * @param {import("vue").Ref<VcsListItem[]>} items
-   * @param {import("vue").Ref<VcsListItem[]>} selected
+   * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
+   * @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
    * @param {function(string, ...any[]):void} emit
    * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
    */
@@ -152,12 +116,13 @@
         callback() {
           const currentSelection = [...selected.value];
           selected.value = items.value.filter((item) => !item.disabled);
+
           selected.value.forEach((item) => {
             if (item.selectionChanged && !currentSelection.includes(item)) {
               item.selectionChanged(true);
             }
           });
-          emit('input', selected.value);
+          emit('update:modelValue', selected.value);
         },
       },
       {
@@ -170,40 +135,18 @@
             }
           });
           selected.value = [];
-          emit('input', selected.value);
+          emit('update:modelValue', selected.value);
         },
       },
     ];
   }
 
-  /**
-   * @typedef {Object} VcsListItem
-   * @property {string} name
-   * @property {boolean} [visible] - Whether to display this item or not.
-   * @property {boolean} [disabled] - Whether this item should be displayed as disabled.
-   * @property {boolean} [rename] - Whether the title of this item is currently in edit mode.
-   * @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 a URL or HTMLElement.
-   * @property {boolean} [hasUpdate] - Shows badge, if item has an update.
-   * @property {Array<import("../../actions/actionHelper.js").VcsAction>} [actions]
-   * @property {Array<function(PointerEvent):void>|undefined} [clickedCallbacks] - An array of callbacks called on item click. called before selection update
-   * @property {function(boolean):void} [selectionChanged] - A callback called if the selection changes with the current selection status. called before value update
-   * @property {function(string):void} [titleChanged] - A callback called if the title changes via rename action. called before value update
-   */
-
   /**
    * @typedef {Object} ItemMovedEvent
-   * @property {VcsListItem} item
+   * @property {import("./VcsListItemComponent.vue").VcsListItem} item
    * @property {number} targetIndex
    */
 
-  /**
-   * @typedef {Object} ItemRenamedEvent
-   * @property {VcsListItem} item
-   * @property {string} newTitle
-   */
-
   /**
    * @description
    * The VCS list is intended to render items. Items can be selectable (by default, more than one) or only a single item can
@@ -216,12 +159,12 @@
    * Clicking with CTRL adds or removes to a selection set.
    * 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 {Array<import("./VcsListItemComponent.vue").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.
-   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched. you can provide your own predicate function by providing "filterPredicate" which is of type function(VcsListItem, string):boolean
+   * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [value=[]] - the initial items to be selected.
+   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched. you can provide your own predicate function by providing "filterPredicate" which is of type function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean
    * @vue-prop {string} [searchbarPlaceholder] - placeholder to render inside the search field
    * @vue-prop {boolean} [showTitle=true] - show the title component
    * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
@@ -230,26 +173,23 @@
    * @vue-prop {string} [tooltip] - tooltip to render on the list title
    * @vue-prop {Array<import("../../actions/actionHelper.js").VcsAction>} [actions] - actions to render in the list title
    * @vue-event {ItemMovedEvent} item-moved - event triggered after item was dragged and is dropped
-   * @vue-event {ItemRenamedEvent} item-renamed - event triggered after item was renamed
-   * @vue-data {slot} [#item.prepend-title] - A slot to adapt the list item titel, adding content before the title. Binds item and index.
-   * @vue-data {slot} [#item.title] - A slot to adapt the list item titel. Default content is a span or VcsTextField for active rename action. Binds item and index.
-   * @vue-data {slot} [#item.append-title] - A slot to adapt the list item titel, adding content after the title. Binds item and index.
-   * @vue-data {slot} [#item.intermediate] - A slot to introduce content, e.g. buttons between two list items. Binds item and index.
+   * @vue-data {slot} [#item.prepend] - A slot that forwads to v-list-item prepend slot. Binds v-list-item append slot props, item and item index.
+   * @vue-data {slot} [#item.title] - A slot that forwards to v-list-item title slot. Binds v-list-item title slot props, item and item index.
+   * @vue-data {slot} [#item.subtitle] - A slot that forwards to v-list-item subtitle slot. Binds v-list-item subtitle slot props, item and item index.
+   * @vue-data {slot} [#item.append] - A slot that forwards to v-list-item append slot. Binds v-list-item append slot props, item and item index.
+   * @vue-data {slot} [#item.intermediate] - A slot to introduce content, e.g. buttons between two list items. Binds item and item index.
    */
   export default {
     name: 'VcsList',
     components: {
-      VcsBadge,
+      VcsListItemComponent,
       VcsTreeviewSearchbar,
       VcsActionButtonList,
-      VcsTooltip,
+      VTooltip,
       VList,
       VListItem,
-      VListItemContent,
-      VListItemAction,
       VIcon,
       VListItemTitle,
-      VcsTextField,
     },
     props: {
       items: {
@@ -268,7 +208,7 @@
         type: Boolean,
         default: false,
       },
-      value: {
+      modelValue: {
         type: Array,
         default: () => [],
       },
@@ -311,8 +251,8 @@
       },
     },
     setup(props, { emit, slots }) {
-      /** @type {import("vue").Ref<Array<VcsListItem>>} */
-      const selected = ref(props.value);
+      /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
+      const selected = shallowRef([]);
       /** @type {import("vue").Ref<string>} */
       const query = ref('');
       /** @type {import("vue").Ref<number|undefined>} */
@@ -337,28 +277,27 @@
         return !(!props.searchable && !props.showTitle);
       });
       let firstSelected = null;
-      const titles = ref([]);
-      const listHeader = ref(null);
+      const listHeader = ref();
 
       watch(
         props,
         () => {
-          if (selected.value !== props.value) {
-            selected.value = props.value;
+          if (selected.value !== props.modelValue) {
+            selected.value = props.modelValue;
           }
           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);
+            emit('update:modelValue', selected);
           }
           if (!props.selectable && selected.value.length > 0) {
             selected.value
               .filter((i) => i.selectionChanged)
               .forEach((i) => i.selectionChanged(false));
             selected.value = [];
-            emit('input', selected);
+            emit('update:modelValue', selected);
           }
           if (!props.searchable) {
             query.value = '';
@@ -368,11 +307,11 @@
       );
 
       const vm = getCurrentInstance().proxy;
-      /** @type {function(VcsListItem, string):boolean} */
+      /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
       const filterPredicate = inject(
         'filterPredicate',
         (item, queryString = '') => {
-          const translatedTitle = vm.$t(item.title);
+          const translatedTitle = vm.$st(item.title);
           return translatedTitle
             .toLocaleLowerCase()
             .includes(queryString.toLocaleLowerCase());
@@ -380,12 +319,12 @@
       );
 
       /**
-       * @type {VcsListItem|null}
+       * @type {import("./VcsListItemComponent.vue").VcsListItem|null}
        */
       let draggedItem = null;
 
       const isDraggable = computed(() => {
-        return query.value === '' && props.draggable;
+        return !query.value && props.draggable;
       });
 
       /**
@@ -405,7 +344,7 @@
 
       /**
        * @param {MouseEvent} e
-       * @param {VcsListItem} item
+       * @param {import("./VcsListItemComponent.vue").VcsListItem} item
        * @param {number} index
        */
       function drag(e, item, index) {
@@ -418,7 +357,7 @@
       }
 
       /**
-       * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+       * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
        */
       const renderingItems = computed(() => {
         let items = props.items.filter((i) => i.visible !== false);
@@ -457,16 +396,19 @@
          */
         renderingActions,
         /**
-         * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+         * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
          */
         renderingItems,
-        /** @type {import("vue").Ref<Array<VcsListItem>>} */
+        /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
         selected,
         /**
-         * @param {VcsListItem} item
+         * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
          * @param {PointerEvent} event
          */
         select(item, event) {
+          if (!isReactive(item)) {
+            throw new Error('Trying to select an unreactive item');
+          }
           if (Array.isArray(item.clickedCallbacks)) {
             item.clickedCallbacks.forEach((cb) => cb(event));
           }
@@ -526,7 +468,9 @@
             } else if (selected.value.length > 1) {
               selected.value
                 .filter((i) => i !== item && i.selectionChanged)
-                .forEach((i) => i.selectionChanged(false));
+                .forEach((i) => {
+                  i.selectionChanged(false);
+                });
               selected.value = [item];
               firstSelected = item;
             } else {
@@ -549,26 +493,29 @@
             firstSelected = item;
           }
 
-          emit('input', selected.value);
+          emit('update:modelValue', selected.value);
         },
         /**
-         * @param {VcsListItem} item
+         * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
          */
         add(item) {
+          if (!isReactive(item)) {
+            throw new Error('Trying to select an unreactive item');
+          }
           if (!selected.value.includes(item) && !item.disabled) {
             item.selectionChanged?.(true);
             selected.value = [...selected.value, item];
-            emit('input', selected.value);
+            emit('update:modelValue', selected.value);
           }
         },
         /**
-         * @param {VcsListItem} item
+         * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
          */
         remove(item) {
           if (selected.value.includes(item) && !item.disabled) {
             item.selectionChanged?.(false);
             selected.value = selected.value.filter((i) => i !== item);
-            emit('input', selected.value);
+            emit('update:modelValue', selected.value);
           }
         },
         clear() {
@@ -577,35 +524,16 @@
             .forEach((i) => i.selectionChanged(false));
           selected.value = [];
           firstSelected = null;
-          emit('input', selected.value);
+          emit('update:modelValue', 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 '';
-        }),
-        rename(item, newTitle) {
-          if (newTitle) {
-            emit('item-renamed', { item, newTitle });
-            item.titleChanged?.(newTitle);
-          }
-        },
+        listHeaderTooltip: createEllipseTooltip(
+          computed(() => listHeader.value?.$el),
+          computed(() => props.tooltip),
+          computed(() => props.title),
+        ),
         hasIntermediateSlot: computed(() => !!slots['item.intermediate']),
       };
     },
@@ -613,72 +541,64 @@
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep {
-    .v-list {
-      .v-list-item__lighten_even {
-        &:nth-child(even) {
-          background-color: var(--v-base-lighten4);
-        }
+  :deep(.v-list) {
+    .v-list-item__lighten_even:nth-child(even) {
+      background-color: rgb(var(--v-theme-base-lighten-4));
+    }
+    .v-list-item__lighten_odd:nth-child(odd) {
+      background-color: rgb(var(--v-theme-base-lighten-4));
+    }
+    .v-list-item__dragged {
+      background-color: rgb(var(--v-theme-base-lighten-2)) !important;
+    }
+    .v-list-item__dragged_over:hover {
+      background-color: rgb(var(--v-theme-base-lighten-1)) !important;
+    }
+    .v-list-item__selected {
+      border-left: solid 4px;
+      border-left-color: rgb(var(--v-theme-primary));
+      color: rgb(var(--v-theme-primary));
+      padding-left: 12px !important;
+    }
+    .v-list-item--active {
+      .v-list-item__append {
+        color: rgb(var(--v-theme-on-surface));
+      }
+    }
+    .v-list-item {
+      &.vcs-draggable-item:hover {
+        cursor: grab;
+        user-select: none;
       }
-      .v-list-item__lighten_odd {
-        &:nth-child(odd) {
-          background-color: var(--v-base-lighten4);
+      &:hover {
+        .v-list-item__overlay {
+          background-color: rgb(var(--v-theme-base));
         }
       }
-      .v-list-item__dragged {
-        background-color: var(--v-base-lighten2) !important;
+      .vcs-list-title__selected {
+        width: 90%;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: bottom;
       }
-      .v-list-item__selected {
-        border-left: solid 4px;
-        border-left-color: var(--v-primary-base);
-        padding-left: 12px !important;
+    }
+
+    &:not(.vcs-list__selectable) {
+      cursor: auto;
+
+      .v-list-item--link {
+        cursor: auto;
       }
-      .v-list-item {
-        padding: 4px 8px 4px 16px;
-        &.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 {
-          .v-list-item__title {
-            font-weight: 700;
-          }
-        }
-        .v-list-item__action {
-          .v-icon {
-            font-size: 16px;
-          }
-          &:last-child {
-            min-width: auto;
-          }
-        }
-        .v-list-item__content {
-          flex-wrap: nowrap;
-          column-gap: 4px;
-          .v-icon,
-          .action-btn-wrap {
-            flex: 1 1 auto;
-          }
-          .v-icon {
-            font-size: 16px;
-            .v-icon__component {
-              width: 16px;
-              height: 16px;
-            }
-          }
+
+      &:hover {
+        .v-list-item__overlay {
+          background-color: transparent;
         }
       }
     }
   }
+  .d-contents {
+    display: contents;
+  }
 </style>