@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/src/components/lists/VcsList.vue

@@ -5,36 +5,36 @@
       :placeholder="searchbarPlaceholder"
       v-model="query"
     />
-    <v-list dense>
+    <v-list density="compact">
       <v-list-item v-if="showTitle" class="font-weight-bold">
-        <v-list-item-content>
+        <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>
+          <VcsTooltip :tooltip="$st(listHeaderTooltip)">
+            <template #activator="{ props }">
+              <span v-bind="props" ref="listHeader">
+                {{ $st(title) }}
+              </span>
+            </template>
+          </VcsTooltip>
+          <span v-if="selectable && selected.length > 0">
+            {{ `(${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">
+      <div v-for="(item, index) in renderingItems" :key="`item-${index}`">
         <v-list-item
-          :key="`item-${index}`"
-          :input-value="selected.includes(item)"
+          :active="selected.includes(item)"
           :disabled="item.disabled"
           @mousedown.shift="$event.preventDefault()"
           @mouseover="hovering = index"
@@ -51,58 +51,56 @@
             'v-list-item__dragged': dragging === index,
             '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)"
-          >
+          <template #prepend>
             <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"
+          </template>
+          <VcsTooltip
+            :tooltip="
+              dragging !== undefined
+                ? undefined
+                : $st(item.tooltip || overflowTitle(index, item.title))
+            "
+          >
+            <template #activator="{ props }">
+              <v-list-item-title
+                v-bind="props"
+                ref="titles"
+                class="d-flex gc-2"
+              >
+                <slot name="item.prepend-title" :item="item" :index="index" />
+                <slot name="item.title" :item="item" :index="index">
+                  <VcsTextField
+                    v-if="item.rename"
+                    :model-value="item.title"
+                    autofocus
+                    :no-padding="true"
+                    @update:model-value="(value) => rename(item, value)"
+                    @click.stop
+                    @keydown.enter="item.rename = false"
+                    @blur="item.rename = false"
+                    :rules="[(v) => !!v || 'components.validation.required']"
                   />
-                </v-list-item-title>
-              </template>
-            </VcsTooltip>
-          </v-list-item-content>
-          <VcsBadge v-if="item.hasUpdate" :color="'warning'" />
-          <v-list-item-action>
+                  <span v-else>
+                    {{ $st(item.title) }}
+                  </span>
+                </slot>
+                <slot
+                  name="item.append-title"
+                  :item="item"
+                  :index="index"
+                  class="ml-auto"
+                />
+              </v-list-item-title>
+            </template>
+          </VcsTooltip>
+          <template #append>
+            <VcsBadge v-if="item.hasUpdate" :color="'warning'" />
             <vcs-action-button-list
               v-if="item.actions?.length > 0"
               :actions="item.actions"
@@ -110,28 +108,29 @@
               :block-overflow="true"
               :overflow-count="actionButtonListOverflowCount"
             />
-          </v-list-item-action>
+          </template>
         </v-list-item>
         <slot name="item.intermediate" :item="item" :index="index" />
         <div
           v-if="hasIntermediateSlot"
           :key="`item-intermediate-child-balance-${index}`"
         />
-      </template>
+      </div>
     </v-list>
   </div>
 </template>
 
 <script>
-  import { computed, getCurrentInstance, inject, ref, watch } from 'vue';
   import {
-    VList,
-    VListItem,
-    VListItemContent,
-    VListItemAction,
-    VIcon,
-    VListItemTitle,
-  } from 'vuetify/lib';
+    computed,
+    getCurrentInstance,
+    inject,
+    isReactive,
+    ref,
+    shallowRef,
+    watch,
+  } from 'vue';
+  import { VList, VListItem, VIcon, VListItemTitle } from 'vuetify/components';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
@@ -140,7 +139,7 @@
 
   /**
    * @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 +151,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 +170,7 @@
             }
           });
           selected.value = [];
-          emit('input', selected.value);
+          emit('update:modelValue', selected.value);
         },
       },
     ];
@@ -245,8 +245,6 @@
       VcsTooltip,
       VList,
       VListItem,
-      VListItemContent,
-      VListItemAction,
       VIcon,
       VListItemTitle,
       VcsTextField,
@@ -268,7 +266,7 @@
         type: Boolean,
         default: false,
       },
-      value: {
+      modelValue: {
         type: Array,
         default: () => [],
       },
@@ -311,8 +309,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>} */
@@ -343,22 +341,22 @@
       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 +370,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());
@@ -460,13 +458,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 +527,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 +552,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,7 +583,7 @@
             .forEach((i) => i.selectionChanged(false));
           selected.value = [];
           firstSelected = null;
-          emit('input', selected.value);
+          emit('update:modelValue', selected.value);
         },
         drag,
         drop,
@@ -613,72 +619,73 @@
 </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: var(--v-base-lighten4);
       }
-      .v-list-item__lighten_odd {
-        &:nth-child(odd) {
-          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__selected {
+      border-left: solid 4px;
+      border-left-color: var(--v-primary-base);
+      padding-left: 12px !important;
+    }
+    .v-list-item {
+      padding: 4px 8px 4px 16px;
+      &.vcs-draggable-item:hover {
+        cursor: grab;
+        user-select: none;
       }
-      .v-list-item__dragged {
-        background-color: var(--v-base-lighten2) !important;
+      &.border-bottom {
+        border-bottom: solid;
+        border-bottom-color: var(--v-base-lighten2);
       }
-      .v-list-item__selected {
-        border-left: solid 4px;
-        border-left-color: var(--v-primary-base);
-        padding-left: 12px !important;
+      &.border-top {
+        border-top: solid;
+        border-top-color: var(--v-base-lighten2);
       }
-      .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;
         }
-        &:after {
-          display: none;
+      }
+      .v-list-item__action {
+        .v-icon {
+          font-size: 16px;
         }
-        &.font-weight-bold {
-          .v-list-item__title {
-            font-weight: 700;
-          }
+        &:last-child {
+          min-width: auto;
         }
-        .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-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;
-            }
+        .v-icon {
+          font-size: 16px;
+          .v-icon__component {
+            width: 16px;
+            height: 16px;
           }
         }
       }
     }
   }
+  .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,31 @@ 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>;
+    listHeaderTooltip: import("vue").ComputedRef<string>;
     rename(item: any, newTitle: any): void;
     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 +120,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    value: {
+    modelValue: {
         type: ArrayConstructor;
         default: () => never[];
     };
@@ -162,19 +162,19 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
 }>>, {
-    value: unknown[];
     title: string;
+    modelValue: unknown[];
     tooltip: string;
     icon: string;
-    actions: unknown[];
-    searchbarPlaceholder: string;
     draggable: boolean;
     selectable: boolean;
+    actions: unknown[];
+    searchbarPlaceholder: string;
     singleSelect: boolean;
     searchable: boolean;
     showTitle: boolean;
     actionButtonListOverflowCount: number;
-}>;
+}, {}>;
 export default _default;
 export type VcsListItem = {
     name: string;
@@ -203,7 +203,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
      */