@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/components/lists/VcsList.vue

@@ -1,117 +1,73 @@
 <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
+        <VcsListItem
+          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)"
+          @item-renamed="$emit('item-renamed', $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 #prepend-title>
+            <slot name="item.prepend-title" :item="item" :index="index" />
+          </template>
+          <template #title>
+            <slot name="item.title" :item="item" :index="index"></slot>
+          </template>
+          <template #append-title>
+            <slot name="item.append-title" :item="item" :index="index" />
+          </template>
+        </VcsListItem>
         <slot name="item.intermediate" :item="item" :index="index" />
         <div
           v-if="hasIntermediateSlot"
@@ -123,24 +79,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 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 VcsListItem from './VcsListItem.vue';
+  import { createEllipseTooltip } from '../composables.js';
 
   /**
    * @param {import("vue").Ref<VcsListItem[]>} items
-   * @param {import("vue").Ref<VcsListItem[]>} selected
+   * @param {import("vue").ShallowRef<VcsListItem[]>} selected
    * @param {function(string, ...any[]):void} emit
    * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
    */
@@ -152,12 +114,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,7 +133,7 @@
             }
           });
           selected.value = [];
-          emit('input', selected.value);
+          emit('update:modelValue', selected.value);
         },
       },
     ];
@@ -181,7 +144,7 @@
    * @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 {boolean} [rename] - Whether the title of can be edited. will add a rename action to the end of the action list
    * @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.
@@ -239,17 +202,14 @@
   export default {
     name: 'VcsList',
     components: {
-      VcsBadge,
+      VcsListItem,
       VcsTreeviewSearchbar,
       VcsActionButtonList,
-      VcsTooltip,
+      VTooltip,
       VList,
       VListItem,
-      VListItemContent,
-      VListItemAction,
       VIcon,
       VListItemTitle,
-      VcsTextField,
     },
     props: {
       items: {
@@ -268,7 +228,7 @@
         type: Boolean,
         default: false,
       },
-      value: {
+      modelValue: {
         type: Array,
         default: () => [],
       },
@@ -311,8 +271,8 @@
       },
     },
     setup(props, { emit, slots }) {
-      /** @type {import("vue").Ref<Array<VcsListItem>>} */
-      const selected = ref(props.value);
+      /** @type {import("vue").ShallowRef<Array<VcsListItem>>} */
+      const selected = shallowRef([]);
       /** @type {import("vue").Ref<string>} */
       const query = ref('');
       /** @type {import("vue").Ref<number|undefined>} */
@@ -337,28 +297,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 = '';
@@ -372,7 +331,7 @@
       const filterPredicate = inject(
         'filterPredicate',
         (item, queryString = '') => {
-          const translatedTitle = vm.$t(item.title);
+          const translatedTitle = vm.$st(item.title);
           return translatedTitle
             .toLocaleLowerCase()
             .includes(queryString.toLocaleLowerCase());
@@ -385,7 +344,7 @@
       let draggedItem = null;
 
       const isDraggable = computed(() => {
-        return query.value === '' && props.draggable;
+        return !query.value && props.draggable;
       });
 
       /**
@@ -460,13 +419,16 @@
          * @type {import("vue").ComputedRef<Array<VcsListItem>>}
          */
         renderingItems,
-        /** @type {import("vue").Ref<Array<VcsListItem>>} */
+        /** @type {import("vue").ShallowRef<Array<VcsListItem>>} */
         selected,
         /**
-         * @param {VcsListItem} item
+         * @param {import("vue").UnwrapNestedRef<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 +488,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 +513,29 @@
             firstSelected = item;
           }
 
-          emit('input', selected.value);
+          emit('update:modelValue', selected.value);
         },
         /**
-         * @param {VcsListItem} item
+         * @param {import("vue").UnwrapNestedRefs<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<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 +544,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 +561,62 @@
 </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));
+      padding-left: 13px !important;
+    }
+    .v-list-item--active {
+      .v-list-item__append {
+        color: rgb(var(--v-theme-on-surface));
       }
-      .v-list-item__lighten_odd {
-        &:nth-child(odd) {
-          background-color: var(--v-base-lighten4);
+    }
+    .v-list-item {
+      &.vcs-draggable-item:hover {
+        cursor: grab;
+        user-select: none;
+      }
+      &: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) {
+      .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;
-            }
-          }
+      cursor: auto;
+
+      &:hover {
+        .v-list-item__overlay {
+          background-color: transparent;
         }
       }
     }
   }
+  .d-contents {
+    display: contents;
+  }
 </style>

package/src/components/lists/VcsList.vue.d.ts

@@ -1,10 +1,10 @@
 /**
  * @param {import("vue").Ref<VcsListItem[]>} items
- * @param {import("vue").Ref<VcsListItem[]>} selected
+ * @param {import("vue").ShallowRef<VcsListItem[]>} selected
  * @param {function(string, ...any[]):void} emit
  * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
  */
-export function createSelectionActions(items: import("vue").Ref<VcsListItem[]>, selected: import("vue").Ref<VcsListItem[]>, emit: (arg0: string, ...args: any[][]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
+export function createSelectionActions(items: import("vue").Ref<VcsListItem[]>, selected: import("vue").ShallowRef<VcsListItem[]>, emit: (arg0: string, ...args: any[][]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
 declare const _default: import("vue").DefineComponent<{
     items: {
         type: ArrayConstructor;
@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    value: {
+    modelValue: {
         type: ArrayConstructor;
         default: () => never[];
     };
@@ -67,7 +67,7 @@ declare const _default: import("vue").DefineComponent<{
     query: import("vue").Ref<string>;
     hovering: import("vue").Ref<number | undefined>;
     dragging: import("vue").Ref<number | undefined>;
-    isDraggable: import("vue").ComputedRef<any>;
+    isDraggable: import("vue").ComputedRef<boolean>;
     borderBottom: (index: any) => boolean;
     borderTop: (index: any) => boolean;
     lightenEven: import("vue").ComputedRef<boolean>;
@@ -79,31 +79,28 @@ declare const _default: import("vue").DefineComponent<{
      * @type {import("vue").ComputedRef<Array<VcsListItem>>}
      */
     renderingItems: import("vue").ComputedRef<Array<VcsListItem>>;
-    /** @type {import("vue").Ref<Array<VcsListItem>>} */
-    selected: import("vue").Ref<Array<VcsListItem>>;
+    /** @type {import("vue").ShallowRef<Array<VcsListItem>>} */
+    selected: import("vue").ShallowRef<Array<VcsListItem>>;
     /**
-     * @param {VcsListItem} item
+     * @param {import("vue").UnwrapNestedRef<VcsListItem>} item
      * @param {PointerEvent} event
      */
-    select(item: VcsListItem, event: PointerEvent): void;
+    select(item: any, event: PointerEvent): void;
     /**
-     * @param {VcsListItem} item
+     * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
      */
-    add(item: VcsListItem): void;
+    add(item: import("vue").UnwrapNestedRefs<VcsListItem>): void;
     /**
-     * @param {VcsListItem} item
+     * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
      */
-    remove(item: VcsListItem): void;
+    remove(item: import("vue").UnwrapNestedRefs<VcsListItem>): void;
     clear(): void;
     drag: (e: MouseEvent, item: VcsListItem, index: number) => void;
     drop: (e: MouseEvent, targetIndex: number) => void;
-    titles: import("vue").Ref<never[]>;
-    overflowTitle(index: any, alternative: any): any;
-    listHeader: import("vue").Ref<null>;
-    listHeaderTooltip: import("vue").ComputedRef<any>;
-    rename(item: any, newTitle: any): void;
+    listHeader: import("vue").Ref<any>;
+    listHeaderTooltip: import("vue").ComputedRef<string>;
     hasIntermediateSlot: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: ArrayConstructor;
         required: true;
@@ -120,7 +117,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    value: {
+    modelValue: {
         type: ArrayConstructor;
         default: () => never[];
     };
@@ -162,19 +159,19 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
 }>>, {
-    value: unknown[];
     title: string;
-    tooltip: string;
     icon: string;
-    actions: unknown[];
-    searchbarPlaceholder: string;
+    modelValue: unknown[];
     draggable: boolean;
+    tooltip: string;
     selectable: boolean;
+    actions: unknown[];
+    searchbarPlaceholder: string;
+    actionButtonListOverflowCount: number;
     singleSelect: boolean;
     searchable: boolean;
     showTitle: boolean;
-    actionButtonListOverflowCount: number;
-}>;
+}, {}>;
 export default _default;
 export type VcsListItem = {
     name: string;
@@ -187,7 +184,7 @@ export type VcsListItem = {
      */
     disabled?: boolean | undefined;
     /**
-     * - Whether the title of this item is currently in edit mode.
+     * - Whether the title of can be edited. will add a rename action to the end of the action list
      */
     rename?: boolean | undefined;
     /**
@@ -203,7 +200,7 @@ export type VcsListItem = {
      * - Shows badge, if item has an update.
      */
     hasUpdate?: boolean | undefined;
-    actions?: import("../../actions/actionHelper.js").VcsAction[] | undefined;
+    actions?: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[] | undefined;
     /**
      * - An array of callbacks called on item click. called before selection update
      */