@vcmap/ui 5.0.2 → 5.1.0-rc.1

package/src/components/lists/VcsList.vue

@@ -7,108 +7,117 @@
     />
     <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.filter((item) => !item.disabled).length
-            "
-            @click="clear"
-          >
-            mdi-check-circle
-          </v-icon>
-          <v-icon
-            v-else-if="
-              selected.length > 0 && selected.length < renderingItems.length
-            "
-            @click="selectAll()"
-          >
-            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="$t(listHeaderTooltip)">
-            <template #activator="{ on, attrs }">
-              <v-list-item-title v-bind="attrs" v-on="on" ref="listHeader">
-                {{ $t(title) }}
-              </v-list-item-title>
-            </template>
-          </VcsTooltip>
+          <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>
           <vcs-action-button-list
-            v-if="actions?.length > 0"
-            :actions="actions"
+            v-if="renderingActions?.length > 0"
+            :actions="renderingActions"
             :block-overflow="true"
             :overflow-count="actionButtonListOverflowCount"
           />
         </v-list-item-content>
       </v-list-item>
-      <v-list-item
-        v-for="(item, index) in renderingItems"
-        :key="`item-${index}`"
-        :input-value="selected.includes(item)"
-        :disabled="item.disabled"
-        @mousedown.shift="$event.preventDefault()"
-        @mouseover="hovering = index"
-        @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
-          </v-icon>
-          <v-icon
-            v-else
-            @click="singleSelect ? select(item, $event) : add(item)"
-          >
-            mdi-circle-outline
-          </v-icon>
-        </v-list-item-action>
-        <v-list-item-content
-          :class="[selectable && !isDraggable ? 'cursor-pointer' : '']"
-          @click="select(item, $event)"
+      <template v-for="(item, index) in renderingItems">
+        <v-list-item
+          :key="`item-${index}`"
+          :input-value="selected.includes(item)"
+          :disabled="item.disabled"
+          @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,
+            'border-bottom': borderBottom(index),
+            'border-top': borderTop(index),
+          }"
         >
-          <v-icon v-if="item.icon">
-            {{ item.icon }}
-          </v-icon>
-          <VcsTooltip
-            :tooltip="
-              dragging !== undefined
-                ? undefined
-                : $t(item.tooltip || overflowTitle(index, item.title))
-            "
+          <v-list-item-content
+            :class="[selectable && !isDraggable ? 'cursor-pointer' : '']"
+            @click="select(item, $event)"
           >
-            <template #activator="{ on, attrs }">
-              <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"
-          />
-        </v-list-item-action>
-      </v-list-item>
+            <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>
+        <slot name="item.intermediate" :item="item" :index="index" />
+        <div
+          v-if="hasIntermediateSlot"
+          :key="`item-intermediate-child-balance-${index}`"
+        />
+      </template>
     </v-list>
   </div>
 </template>
@@ -122,24 +131,65 @@
     VListItemAction,
     VIcon,
     VListItemTitle,
-    VSpacer,
   } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsTooltip from '../notification/VcsTooltip.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
   import VcsBadge from '../notification/VcsBadge.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+
+  /**
+   * @param {import("vue").Ref<VcsListItem[]>} items
+   * @param {import("vue").Ref<VcsListItem[]>} selected
+   * @param {function(string, ...any[]):void} emit
+   * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
+   */
+  export function createSelectionActions(items, selected, emit) {
+    return [
+      {
+        name: 'list.selectAll',
+        tooltip: 'list.selectAll',
+        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);
+        },
+      },
+      {
+        name: 'list.clearSelection',
+        tooltip: 'list.clearSelection',
+        callback() {
+          [...selected.value].forEach((item) => {
+            if (item.selectionChanged) {
+              item.selectionChanged(false);
+            }
+          });
+          selected.value = [];
+          emit('input', 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<VcsAction>} [actions]
+   * @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
    */
 
   /**
@@ -148,6 +198,12 @@
    * @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
@@ -172,8 +228,13 @@
    * @vue-prop {string} [title] - the lists title
    * @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-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.
    */
   export default {
     name: 'VcsList',
@@ -188,7 +249,7 @@
       VListItemAction,
       VIcon,
       VListItemTitle,
-      VSpacer,
+      VcsTextField,
     },
     props: {
       items: {
@@ -246,10 +307,10 @@
       actions: {
         type: Array,
         required: false,
-        default: undefined,
+        default: () => [],
       },
     },
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
       /** @type {import("vue").Ref<Array<VcsListItem>>} */
       const selected = ref(props.value);
       /** @type {import("vue").Ref<string>} */
@@ -356,6 +417,33 @@
         }
       }
 
+      /**
+       * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+       */
+      const renderingItems = computed(() => {
+        let items = props.items.filter((i) => i.visible !== false);
+        if (query.value) {
+          items = items.filter((i) => filterPredicate(i, query.value));
+        }
+        return items;
+      });
+
+      const selectionActions = createSelectionActions(
+        renderingItems,
+        selected,
+        emit,
+      );
+
+      /**
+       * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
+       */
+      const renderingActions = computed(() => {
+        if (props.selectable && !props.singleSelect) {
+          return [...selectionActions, ...props.actions];
+        }
+        return props.actions;
+      });
+
       return {
         query,
         hovering,
@@ -364,16 +452,14 @@
         borderBottom,
         borderTop,
         lightenEven,
+        /**
+         * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
+         */
+        renderingActions,
         /**
          * @type {import("vue").ComputedRef<Array<VcsListItem>>}
          */
-        renderingItems: computed(() => {
-          let items = props.items.filter((i) => i.visible !== false);
-          if (query.value) {
-            items = items.filter((i) => filterPredicate(i, query.value));
-          }
-          return items;
-        }),
+        renderingItems,
         /** @type {import("vue").Ref<Array<VcsListItem>>} */
         selected,
         /**
@@ -381,6 +467,9 @@
          * @param {PointerEvent} event
          */
         select(item, event) {
+          if (Array.isArray(item.clickedCallbacks)) {
+            item.clickedCallbacks.forEach((cb) => cb(event));
+          }
           if (!props.selectable || item.disabled) {
             return;
           }
@@ -398,12 +487,12 @@
           } else if (event.shiftKey) {
             let firstIndex = 0;
             if (firstSelected) {
-              firstIndex = this.renderingItems.indexOf(firstSelected);
+              firstIndex = renderingItems.value.indexOf(firstSelected);
             }
-            const currentIndex = this.renderingItems.indexOf(item);
+            const currentIndex = renderingItems.value.indexOf(item);
             if (firstIndex > -1 && currentIndex > -1) {
               const currentSelection = [...selected.value];
-              selected.value = this.renderingItems.slice(
+              selected.value = renderingItems.value.slice(
                 Math.min(firstIndex, currentIndex),
                 Math.max(firstIndex, currentIndex) + 1,
               );
@@ -490,16 +579,6 @@
           firstSelected = null;
           emit('input', selected.value);
         },
-        selectAll() {
-          const currentSelection = [...selected.value];
-          selected.value = this.renderingItems.filter((item) => !item.disabled);
-          selected.value.forEach((item) => {
-            if (item.selectionChanged && !currentSelection.includes(item)) {
-              item.selectionChanged(true);
-            }
-          });
-          emit('input', selected.value);
-        },
         drag,
         drop,
         titles,
@@ -521,6 +600,13 @@
           }
           return '';
         }),
+        rename(item, newTitle) {
+          if (newTitle) {
+            emit('item-renamed', { item, newTitle });
+            item.titleChanged?.(newTitle);
+          }
+        },
+        hasIntermediateSlot: computed(() => !!slots['item.intermediate']),
       };
     },
   };
@@ -542,6 +628,11 @@
       .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 {

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

@@ -0,0 +1,227 @@
+/**
+ * @param {import("vue").Ref<VcsListItem[]>} items
+ * @param {import("vue").Ref<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>;
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchbarPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        required: false;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    actions: {
+        type: ArrayConstructor;
+        required: false;
+        default: () => never[];
+    };
+}, {
+    query: import("vue").Ref<string>;
+    hovering: import("vue").Ref<number | undefined>;
+    dragging: import("vue").Ref<number | undefined>;
+    isDraggable: import("vue").ComputedRef<any>;
+    borderBottom: (index: any) => boolean;
+    borderTop: (index: any) => boolean;
+    lightenEven: import("vue").ComputedRef<boolean>;
+    /**
+     * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
+     */
+    renderingActions: import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>;
+    /**
+     * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+     */
+    renderingItems: import("vue").ComputedRef<Array<VcsListItem>>;
+    /** @type {import("vue").Ref<Array<VcsListItem>>} */
+    selected: import("vue").Ref<Array<VcsListItem>>;
+    /**
+     * @param {VcsListItem} item
+     * @param {PointerEvent} event
+     */
+    select(item: VcsListItem, event: PointerEvent): void;
+    /**
+     * @param {VcsListItem} item
+     */
+    add(item: VcsListItem): void;
+    /**
+     * @param {VcsListItem} item
+     */
+    remove(item: 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;
+    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<{
+    items: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchbarPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        required: false;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    actions: {
+        type: ArrayConstructor;
+        required: false;
+        default: () => never[];
+    };
+}>>, {
+    value: unknown[];
+    title: string;
+    tooltip: string;
+    icon: string;
+    actions: unknown[];
+    searchbarPlaceholder: string;
+    draggable: boolean;
+    selectable: boolean;
+    singleSelect: boolean;
+    searchable: boolean;
+    showTitle: boolean;
+    actionButtonListOverflowCount: number;
+}>;
+export default _default;
+export type VcsListItem = {
+    name: string;
+    /**
+     * - Whether to display this item or not.
+     */
+    visible?: boolean | undefined;
+    /**
+     * - Whether this item should be displayed as disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether the title of this item is currently in edit mode.
+     */
+    rename?: boolean | undefined;
+    /**
+     * - The title to be displayed
+     */
+    title: string;
+    tooltip?: string | undefined;
+    /**
+     * - An optional icon to display with this item. Can be a URL or HTMLElement.
+     */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /**
+     * - Shows badge, if item has an update.
+     */
+    hasUpdate?: boolean | undefined;
+    actions?: import("../../actions/actionHelper.js").VcsAction[] | undefined;
+    /**
+     * - An array of callbacks called on item click. called before selection update
+     */
+    clickedCallbacks?: Array<(arg0: PointerEvent) => void> | undefined;
+    /**
+     * - A callback called if the selection changes with the current selection status. called before value update
+     */
+    selectionChanged?: ((arg0: boolean) => void) | undefined;
+    /**
+     * - A callback called if the title changes via rename action. called before value update
+     */
+    titleChanged?: ((arg0: string) => void) | undefined;
+};
+export type ItemMovedEvent = {
+    item: VcsListItem;
+    targetIndex: number;
+};
+export type ItemRenamedEvent = {
+    item: VcsListItem;
+    newTitle: string;
+};

package/src/components/lists/VcsTreeview.vue

@@ -18,7 +18,9 @@
         <VcsTreeviewLeaf
           :item="item"
           :class="[item.clickable ? 'cursor-pointer' : '']"
-          @click.native="item.clickable && item.clicked($event)"
+          @click.native="
+            item.clickable && !item.disabled && item.clicked($event)
+          "
         />
       </template>
     </v-treeview>