@vcmap/ui 6.1.0-rc.1 → 6.1.0-rc.3

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

@@ -1,173 +1,52 @@
-/**
- * @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>}
- */
-export function createSelectionActions(items: import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>, selected: import("vue").ShallowRef<import("./VcsListItemComponent.vue").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;
-    };
-    modelValue: {
-        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<boolean>;
-    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<import("./VcsListItemComponent.vue").VcsListItem>>}
-     */
-    renderingItems: import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
-    /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
-    selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
-    /**
-     * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
-     * @param {PointerEvent} event
-     */
-    select(item: any, event: PointerEvent): void;
-    drag: (e: MouseEvent, item: import("./VcsListItemComponent.vue").VcsListItem, index: number) => void;
-    drop: (e: MouseEvent, targetIndex: number) => void;
-    dragOver: (e: any, index: any) => void;
-    dragLeave: (e: any) => void;
-    dragEnd: (e: any) => void;
-    listHeader: import("vue").Ref<any>;
-    listHeaderTooltip: import("vue").ComputedRef<string>;
-    hasIntermediateSlot: import("vue").ComputedRef<boolean>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    items: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    draggable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selectable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    singleSelect: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    modelValue: {
-        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[];
-    };
-}>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
+    $emit: (event: "update:modelValue" | "itemMoved", ...args: any[]) => void;
     title: string;
-    icon: string;
     modelValue: unknown[];
     draggable: boolean;
     tooltip: string;
+    items: unknown[];
     selectable: boolean;
     actions: unknown[];
-    searchbarPlaceholder: string;
-    actionButtonListOverflowCount: number;
     singleSelect: boolean;
     searchable: boolean;
     showTitle: boolean;
-}, {}>;
+    icon?: string | undefined;
+    customFilter?: Function | undefined;
+    searchbarPlaceholder?: string | undefined;
+    actionButtonListOverflowCount?: number | undefined;
+    selectFunction?: Function | undefined;
+    $props: {
+        readonly title?: string | undefined;
+        readonly modelValue?: unknown[] | undefined;
+        readonly draggable?: boolean | undefined;
+        readonly tooltip?: string | undefined;
+        readonly items?: unknown[] | undefined;
+        readonly selectable?: boolean | undefined;
+        readonly actions?: unknown[] | undefined;
+        readonly singleSelect?: boolean | undefined;
+        readonly searchable?: boolean | undefined;
+        readonly showTitle?: boolean | undefined;
+        readonly icon?: string | undefined;
+        readonly customFilter?: Function | undefined;
+        readonly searchbarPlaceholder?: string | undefined;
+        readonly actionButtonListOverflowCount?: number | undefined;
+        readonly selectFunction?: Function | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    "item.append"?(_: any): any;
+    "item.title"?(_: any): any;
+    "item.subtitle"?(_: any): any;
+    "item.prepend"?(_: any): any;
+    "item.intermediate"?(_: {
+        item: import("./VcsListItemComponent.vue").VcsListItem;
+        index: number;
+    }): any;
+}>;
 export default _default;
 export type ItemMovedEvent = {
     item: import("./VcsListItemComponent.vue").VcsListItem;
     targetIndex: number;
 };
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/src/components/lists/VcsTreeNode.vue

@@ -10,7 +10,7 @@
         class="chevron-btn"
         variant="text"
         :icon="isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'"
-        @click="isOpen = !isOpen"
+        @click="bubbleItemToggled(item.name)"
       />
       <slot name="prepend" v-bind="{ item }">
         <span class="prepend">
@@ -49,11 +49,12 @@
           :key="child.name"
           :item="child"
           :search="search"
+          :custom-filter="customFilter"
           :level="level + 1"
           :open-on-click="openOnClick"
           :item-children="itemChildren"
           :opened="opened"
-          @item-toggled="bubbleItemToggled(child, e)"
+          @item-toggled="bubbleItemToggled"
           @click="bubbleItemClicked"
         >
           <template v-for="slot of forwardSlots" #[slot]="scope">
@@ -98,6 +99,7 @@
    * @vue-prop {string} [itemChildren='children'] - The property key of the children.
    * @vue-prop {boolean} [openOnClick=false] - Whether to open items on title click..
    * @vue-prop {string} [search] - The search string to filter the tree.
+   * @vue-prop {function(VcsTreeNodeItem, string|undefined):boolean}} [customFilter] - a function to customize filtering when searching.
    * @vue-data {slot} [#prepend] - A slot prepended to the item, binding the item. Default fallback renders an image.
    * @vue-data {slot} [#title] - A slot to render the item title, binding the item. Default fallback renders a translatable title using the VcsTreeviewTitle component.
    * @vue-data {slot} [#append] - A slot appended to the item, binding the item. Default fallback renders the VcsActionButtonList if the item has an array of Actions.
@@ -139,6 +141,14 @@
         type: String,
         default: undefined,
       },
+      /**
+       * @param {VcsTreeNodeItem} item The item to check the match for.
+       * @param {string} search The search value.
+       */
+      customFilter: {
+        type: Function,
+        default: undefined,
+      },
     },
     emits: ['itemToggled', 'click'],
     setup(props, { emit, slots }) {
@@ -146,19 +156,16 @@
       const iconSize = useIconSize();
       const forwardSlots = getForwardSlots(slots);
 
-      const isOpen = computed({
-        get: () => props.opened?.includes(props.item.name),
-        set: (value) => {
-          emit('itemToggled', props.item.name, value);
-        },
-      });
-
+      const isOpen = computed(() => props.opened.includes(props.item.name));
       const children = computed(() => props.item[props.itemChildren] ?? []);
 
       const matchFilter = computed(() => {
         if (!props.search) {
           return true;
         }
+        if (props.customFilter) {
+          return props.customFilter(props.item, props.search);
+        }
         const translatedTitle = (item) =>
           item.title ? vm.$t(item.title) : item.name;
 
@@ -179,8 +186,8 @@
         children,
 
         // Bubble up events for the nested tree-items
-        bubbleItemToggled: (itemName, openState) => {
-          emit('itemToggled', itemName, openState);
+        bubbleItemToggled: (itemName) => {
+          emit('itemToggled', itemName);
         },
         bubbleItemClicked: (item, event) => {
           emit('click', item, event);

package/src/components/lists/VcsTreeview.vue

@@ -11,6 +11,7 @@
         :item="item"
         :search="localSearchValue"
         v-model:opened="localOpenedItems"
+        :custom-filter="customFilter"
         :open-on-click="openOnClick"
         :item-children="itemChildren"
         @item-toggled="itemToggled"
@@ -46,6 +47,7 @@
    * @vue-prop {boolean} [openOnClick=false] - Whether to open items on title click.
    * @vue-prop {string} [search=''] - The value used to filter the items.
    * @vue-prop {boolean} [showSearchbar=false] - Whether there is a searchbar for this treeview.
+   * @vue-prop {function(import("./VcsTreeNode.vue").VcsTreeNodeItem, string|undefined):boolean}} [customFilter] - a function to customize filtering when searching.
    * @vue-prop {string}  [searchbarPlaceholder] - Placeholder text for the searchbar, will be translated.
    */
   export default {
@@ -87,6 +89,14 @@
         type: String,
         default: undefined,
       },
+      /**
+       * @param {import("./VcsTreeNode.vue").VcsTreeNodeItem} item The item to filter.
+       * @param {string} search The query value.
+       */
+      customFilter: {
+        type: Function,
+        default: undefined,
+      },
     },
     emits: ['update:search', 'update:opened'],
     setup(props, { emit, slots }) {
@@ -94,27 +104,24 @@
       const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
       const localOpenedItems = useProxiedComplexModel(props, 'opened', emit);
 
-      if ((props.openAll ?? false) !== false) {
-        localOpenedItems.value = props.items.map((item) => item.name);
-        watch(
-          () => props.items,
-          (items) => {
-            const newItems = items.filter(
-              (item) => !localOpenedItems.value.includes(item.name),
-            );
-            localOpenedItems.value.push(...newItems.map((item) => item.name));
-          },
-        );
-      }
+      watch(
+        [() => props.items, () => props.openAll],
+        () => {
+          if (props.openAll) {
+            localOpenedItems.value = [...props.items.map((item) => item.name)];
+          }
+        },
+        {
+          immediate: true,
+        },
+      );
 
-      function itemToggled(name, state) {
-        if (state) {
-          localOpenedItems.value.push(name);
+      function itemToggled(itemName) {
+        const idx = localOpenedItems.value.indexOf(itemName);
+        if (idx >= 0) {
+          localOpenedItems.value.splice(idx, 1);
         } else {
-          const idx = localOpenedItems.value.indexOf(name);
-          if (idx >= 0) {
-            localOpenedItems.value.splice(idx, 1);
-          }
+          localOpenedItems.value.push(itemName);
         }
       }
 
@@ -129,7 +136,7 @@
               item.clicked(event);
             }
           } else if ((props.openOnClick ?? false) !== false) {
-            itemToggled(item.name, !localOpenedItems.value.includes(item.name));
+            itemToggled(item.name);
           }
         },
       };

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

@@ -31,11 +31,19 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * @param {import("./VcsTreeNode.vue").VcsTreeNodeItem} item The item to filter.
+     * @param {string} search The query value.
+     */
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
 }, {
     localSearchValue: import("vue").Ref<any>;
     localOpenedItems: import("vue").Ref<any>;
     forwardSlots: string[];
-    itemToggled: (name: any, state: any) => void;
+    itemToggled: (itemName: any) => void;
     itemClicked(item: any, event: any): void;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:opened" | "update:search")[], "update:opened" | "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
@@ -70,6 +78,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * @param {import("./VcsTreeNode.vue").VcsTreeNodeItem} item The item to filter.
+     * @param {string} search The query value.
+     */
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
 }>> & {
     "onUpdate:opened"?: ((...args: any[]) => any) | undefined;
     "onUpdate:search"?: ((...args: any[]) => any) | undefined;
@@ -79,6 +95,7 @@ declare const _default: import("vue").DefineComponent<{
     items: unknown[];
     opened: unknown[];
     itemChildren: string;
+    customFilter: Function;
     openAll: boolean;
     showSearchbar: boolean;
     searchbarPlaceholder: string;

package/src/components/lists/listHelper.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
+ * @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
+ * @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
+ * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
+ */
+export function createSelectionActions(items: import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>, selected: import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>, emit: (event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
+/**
+ * @typedef {Object & {
+ * selectable?: boolean,
+ * singleSelect?: boolean,
+ * selectFunction?: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
+ * modelValue?: Array<import("./VcsListItemComponent.vue").VcsListItem> }
+ * } SelectableListProps
+ * @property {boolean?} selectable
+ * @property {boolean?} singleSelect
+ * @property {(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void} selectFunction
+ * @property {Array<import("./VcsListItemComponent.vue").VcsListItem>?} modelValue
+ */
+/**
+ * @typedef {{
+ *   selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>,
+ *   select: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
+ *   selectionActions:Array<import("../../actions/actionHelper.js").VcsAction>
+ * }} SelectableListSetup
+ */
+/**
+ * Function setting up selection logic for lists. Use only in setup function of components!
+ * This requires VcsListItems with unique keys (name property).
+ * @param {Object & SelectableListProps} props
+ * @param {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} renderingItems
+ * @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
+ * @returns {SelectableListSetup}
+ */
+export function setupSelectableList(props: Object & SelectableListProps, renderingItems: import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>, emit: (event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void): SelectableListSetup;
+/**
+ * @typedef {{
+ *   hovering: import("vue").Ref<number|undefined>,
+ *   dragging: import("vue").Ref<number|undefined>,
+ *   isDraggable: import("vue").ComputedRef<boolean>,
+ *   borderBottom: (index: number) => boolean,
+ *   borderTop: (index: number) => boolean,
+ *   dragStart: (
+ *     e: MouseEvent,
+ *     item: import('./VcsListItemComponent.vue').VcsListItem,
+ *     index: number,
+ *   ) => void;
+ *   dragOver: (e: MouseEvent, index: number) => void;
+ *   dragLeave: (e: MouseEvent) => void;
+ *   dragEnd: (e: MouseEvent) => void;
+ *   drop: (e: MouseEvent, targetIndex: number) => void;
+ * }} DraggableListSetup
+ */
+/**
+ * Function setting up drag logic for lists. Use only in setup function of components!
+ * This requires VcsListItems with unique keys (name property).
+ * @param {Object & { draggable: boolean }} props
+ * @param {import("vue").Ref<string>} query
+ * @param {(event: 'itemMoved', value: import("./VcsList.vue").ItemMovedEvent) => void} emit
+ * @returns {DraggableListSetup}
+ */
+export function setupDraggableList(props: Object & {
+    draggable: boolean;
+}, query: import("vue").Ref<string>, emit: (event: 'itemMoved', value: import("./VcsList.vue").ItemMovedEvent) => void): DraggableListSetup;
+export type SelectableListProps = Object & {
+    selectable?: boolean;
+    singleSelect?: boolean;
+    selectFunction?: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void;
+    modelValue?: Array<import("./VcsListItemComponent.vue").VcsListItem>;
+};
+export type SelectableListSetup = {
+    selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
+    select: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void;
+    selectionActions: Array<import("../../actions/actionHelper.js").VcsAction>;
+};
+export type DraggableListSetup = {
+    hovering: import("vue").Ref<number | undefined>;
+    dragging: import("vue").Ref<number | undefined>;
+    isDraggable: import("vue").ComputedRef<boolean>;
+    borderBottom: (index: number) => boolean;
+    borderTop: (index: number) => boolean;
+    dragStart: (e: MouseEvent, item: import('./VcsListItemComponent.vue').VcsListItem, index: number) => void;
+    dragOver: (e: MouseEvent, index: number) => void;
+    dragLeave: (e: MouseEvent) => void;
+    dragEnd: (e: MouseEvent) => void;
+    drop: (e: MouseEvent, targetIndex: number) => void;
+};