@vcmap/ui 6.3.11 → 7.0.0-rc.1

package/src/components/lists/{VcsTreeNode.vue → VcsTreeNode.ts.vue}

@@ -5,7 +5,7 @@
     :data-tree-item-name="item.name"
     :draggable="draggable"
     @dragstart="$emit('dragstart', $event, item)"
-    @dragover="$emit('dragover', $event, item, treenodeRef.$el, true, isOpen)"
+    @dragover="$emit('dragover', $event, item, treenodeRef?.$el, true, isOpen)"
     @dragend="$emit('dragend', $event)"
     @drop="$emit('drop', $event, item)"
     @dragleave="$emit('dragleave', $event)"
@@ -20,17 +20,12 @@
         v-if="isGroup"
         class="chevron-btn"
         variant="text"
-        :disabled="item.children.length === 0"
+        :disabled="(item.children as VcsTreeNodeItem[]).length === 0"
         :icon="isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'"
-        @click="toggleCurrentItem"
+        @click="bubbleItemToggled(item.name)"
       />
       <slot name="prepend" v-bind="{ item }">
-        <span
-          class="prepend"
-          :class="{
-            'text-disabled': item.disabled,
-          }"
-        >
+        <span class="prepend" :class="{ 'text-disabled': item.disabled }">
           <div v-if="item.icon">
             <v-icon v-if="typeof item?.icon === 'string'" :size="iconSize">
               {{ item.icon }}
@@ -43,12 +38,12 @@
         <VcsTreeviewTitle
           :item="item"
           :cursor-pointer="item.clickable || (openOnClick && isGroup)"
-          @click="handleTitleClick"
+          @click="(event: MouseEvent) => $emit('click', item, event)"
         />
       </slot>
       <slot name="append" v-bind="{ item }">
         <VcsActionButtonList
-          v-if="item.actions?.length > 0"
+          v-if="item.actions?.length && item.actions?.length > 0"
           :actions="item.actions"
           :overflow-count="3"
           :disabled="item.disabled"
@@ -60,17 +55,14 @@
       </slot>
     </v-row>
     <v-expand-transition>
-      <div v-if="isOpen && children.length">
+      <div v-if="isOpen && (children as VcsTreeNodeItem[]).length">
         <div class="children">
           <VcsTreeNode
             v-for="child in children"
-            :key="child.name"
-            :item="child"
+            :item="child as VcsTreeNodeItem"
+            :key="(child as VcsTreeNodeItem).name"
             :search="search"
             :custom-filter="customFilter"
-            :show-all-children="
-              showAllChildren || (isGroup && matchesSelf && !hasDescendantMatch)
-            "
             :level="level + 1"
             :open-on-click="openOnClick"
             :item-children="itemChildren"
@@ -84,7 +76,7 @@
             @drop="bubbleDrop"
             @dragleave="bubbleDragLeave"
           >
-            <template v-for="slot of forwardSlots" #[slot]="scope">
+            <template v-for="slot of forwardSlots" #[slot]="scope: any">
               <slot :name="slot" v-bind="scope ?? {}" />
             </template>
           </VcsTreeNode>
@@ -98,7 +90,7 @@
               'dragover',
               $event,
               item,
-              treenodeRef.$el,
+              treenodeRef?.$el,
               { before: false, into: false, after: true },
               false, // mock closed group to allow insert after
             )
@@ -117,29 +109,39 @@
   </div>
 </template>
 
-<script>
-  import { computed, ref, getCurrentInstance, watch } from 'vue';
+<script lang="ts">
+  import { defineComponent, computed, getCurrentInstance, ref } from 'vue';
+  import type { PropType } from 'vue';
   import { VBtn, VExpandTransition, VIcon, VRow } from 'vuetify/components';
   import { useIconSize } from '../../vuePlugins/vuetify.js';
   import { getForwardSlots } from '../composables.js';
-  import ImageElementInjector from '../ImageElementInjector.vue';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-  import VcsTreeviewTitle from './VcsTreeviewTitle.vue';
+  import ImageElementInjector from '../ImageElementInjector.ts.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.ts.vue';
+  import VcsTreeviewTitle from './VcsTreeviewTitle.ts.vue';
+  import type { VcsAction } from '../../actions/actionHelper.js';
 
-  /**
-   * @typedef {Object} VcsTreeNodeItem
-   * @property {string} name
-   * @property {string} [title] - An optional translatable title.
-   * @property {string} [tooltip]
-   * @property {boolean} [clickable] - Whether this item reacts to click events.
-   * @property {boolean} [disabled] - Whether this item should be displayed as disabled.
-   * @property {Array<import("../../actions/actionHelper.js").VcsAction>} [actions]
-   * @property {Array<VcsTreeNodeItem>} [children] - An optional array of children. Can be binded to another key, using the `item-children` attributes of the VcsTreeview component.
-   * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be a URL or HTMLElement.
-   * @property {function(string):void} [clicked] - A callback called when the item is clicked.
-   * @property {boolean} [blockOverflow=true] - Forwards the blockOverflow setting to the ActionButtonList, if true will reserve some space for an overflow.
-   * @property {boolean} [forceNodeDisplay] - Forces the item to display as a node (with chevron) even when it has no children.
-   */
+  export type VcsTreeNodeItem = {
+    name: string;
+    /** An optional translatable title. */
+    title?: string;
+    tooltip?: string;
+    /** Whether this item reacts to click events. */
+    clickable?: boolean;
+    /** Whether this item should be displayed as disabled. */
+    disabled?: boolean;
+    /** An array of actions associated with this item. */
+    actions?: VcsAction[];
+    /** An array of child items. */
+    children?: VcsTreeNodeItem[];
+    /** An optional icon for the item. Can be a string, HTMLCanvasElement, or HTMLImageElement. */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /** A callback called when the item is clicked. */
+    clicked?: (event: Event) => void | Promise<void>;
+    /** Forwards the blockOverflow setting to the ActionButtonList, if true will reserve some space for an overflow. */
+    blockOverflow?: boolean;
+    /** Forces the item to display as a node (with chevron) even when it has no children. */
+    forceNodeDisplay?: boolean;
+  };
 
   /**
    * @description
@@ -158,7 +160,7 @@
    * @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.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsTreeNode',
     components: {
       ImageElementInjector,
@@ -170,13 +172,12 @@
       VcsTreeviewTitle,
     },
     props: {
-      /** @type {VcsTreeNodeItem} */
       item: {
-        type: Object,
+        type: Object as PropType<VcsTreeNodeItem>,
         required: true,
       },
       itemChildren: {
-        type: String,
+        type: String as PropType<keyof VcsTreeNodeItem>,
         default: 'children',
       },
       draggable: {
@@ -188,7 +189,7 @@
         default: 0,
       },
       opened: {
-        type: Array,
+        type: Array as PropType<string[]>,
         required: true,
       },
       openOnClick: {
@@ -204,13 +205,11 @@
        * @param {string} search The search value.
        */
       customFilter: {
-        type: Function,
+        type: Function as PropType<
+          (item: VcsTreeNodeItem, search: string) => boolean
+        >,
         default: undefined,
       },
-      showAllChildren: {
-        type: Boolean,
-        default: false,
-      },
     },
     emits: [
       'itemToggled',
@@ -222,91 +221,48 @@
       'dragleave',
     ],
     setup(props, { emit, slots }) {
-      const vm = getCurrentInstance().proxy;
+      const vm = getCurrentInstance()!.proxy;
       const iconSize = useIconSize();
       const forwardSlots = getForwardSlots(slots);
-      const treenodeRef = ref(null);
-      const searchOpenOverride = ref(undefined);
-      const children = computed(() => props.item[props.itemChildren] ?? []);
+      const treenodeRef = ref<InstanceType<typeof VRow> | null>(null);
 
-      const translatedTitle = (item) =>
-        item.title ? vm.$t(item.title) : item.name;
+      const isOpen = computed(
+        () =>
+          props.opened.includes(props.item.name) &&
+          (props.item[props.itemChildren] as VcsTreeNodeItem[])?.length,
+      );
+      const children = computed(() => props.item[props.itemChildren] ?? []);
 
-      const doesItemMatch = (item) => {
+      const matchFilter = computed(() => {
         if (!props.search) {
           return true;
         }
         if (props.customFilter) {
-          return props.customFilter(item, props.search);
+          return props.customFilter(props.item, props.search);
         }
+        const translatedTitle = (item: VcsTreeNodeItem): string =>
+          item.title ? vm!.$st(item.title) : item.name;
 
-        return (
+        const hasText = (item: VcsTreeNodeItem): boolean =>
           translatedTitle(item)
             .toLocaleLowerCase()
-            .indexOf(props.search.toLocaleLowerCase()) > -1
-        );
-      };
+            .indexOf(props.search!.toLocaleLowerCase()) > -1 ||
+          (item[props.itemChildren] as VcsTreeNodeItem[])?.some(hasText);
 
-      const doesDescendantMatch = (item) =>
-        item[props.itemChildren]?.some(
-          (child) => doesItemMatch(child) || doesDescendantMatch(child),
-        );
-
-      const matchesSelf = computed(() => doesItemMatch(props.item));
-      const hasDescendantMatch = computed(() =>
-        doesDescendantMatch(props.item),
-      );
-
-      const matchFilter = computed(() => {
-        if (!props.search || props.showAllChildren) {
-          return true;
-        }
-        return matchesSelf.value || hasDescendantMatch.value;
+        return hasText(props.item);
       });
 
-      const searchOpen = computed(
-        () => searchOpenOverride.value ?? hasDescendantMatch.value,
-      );
-
-      const isOpen = computed(
-        () =>
-          children.value.length > 0 &&
-          (props.search
-            ? searchOpen.value
-            : props.opened.includes(props.item.name)),
-      );
-
-      watch(
-        () => props.search,
-        () => {
-          searchOpenOverride.value = undefined;
-        },
-      );
-
-      function toggleCurrentItem() {
-        if (props.search) {
-          searchOpenOverride.value = !isOpen.value;
-          return;
-        }
-        emit('itemToggled', props.item.name);
-      }
-
-      function handleTitleClick(event) {
-        emit('click', props.item, event);
-
-        if (
-          props.search &&
-          !props.item?.clickable &&
-          props.openOnClick &&
-          !props.item?.disabled &&
-          (children.value.length > 0 || props.item.forceNodeDisplay)
-        ) {
-          toggleCurrentItem();
-        }
-      }
-
-      function bubbleEvent(eventName) {
-        return (...args) => {
+      function bubbleEvent(
+        eventName:
+          | 'itemToggled'
+          | 'click'
+          | 'dragstart'
+          | 'dragover'
+          | 'dragend'
+          | 'drop'
+          | 'dragleave',
+      ) {
+        return (...args: unknown[]): void => {
           emit(eventName, ...args);
         };
       }
@@ -316,13 +272,11 @@
         treenodeRef,
         isOpen,
         isGroup: computed(
-          () => children.value.length > 0 || props.item.forceNodeDisplay,
+          () =>
+            (children.value as VcsTreeNodeItem[]).length > 0 ||
+            props.item.forceNodeDisplay,
         ),
-        matchesSelf,
-        hasDescendantMatch,
         matchFilter,
-        toggleCurrentItem,
-        handleTitleClick,
         iconSize,
         children,
         // Bubble up events for the nested tree-items
@@ -335,7 +289,7 @@
         bubbleDragLeave: bubbleEvent('dragleave'),
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,279 @@
+import type { PropType } from 'vue';
+import type { VcsAction } from '../../actions/actionHelper.js';
+export type VcsTreeNodeItem = {
+    name: string;
+    /** An optional translatable title. */
+    title?: string;
+    tooltip?: string;
+    /** Whether this item reacts to click events. */
+    clickable?: boolean;
+    /** Whether this item should be displayed as disabled. */
+    disabled?: boolean;
+    /** An array of actions associated with this item. */
+    actions?: VcsAction[];
+    /** An array of child items. */
+    children?: VcsTreeNodeItem[];
+    /** An optional icon for the item. Can be a string, HTMLCanvasElement, or HTMLImageElement. */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /** A callback called when the item is clicked. */
+    clicked?: (event: Event) => void | Promise<void>;
+    /** Forwards the blockOverflow setting to the ActionButtonList, if true will reserve some space for an overflow. */
+    blockOverflow?: boolean;
+    /** Forces the item to display as a node (with chevron) even when it has no children. */
+    forceNodeDisplay?: boolean;
+};
+/**
+ * @description
+ *  A recursive component to render a treenode and its children.
+ * Exposes the `prepend`, `title` and `append` slots for customization.
+ * Emits `itemToggled` and `click` events.
+ * @vue-prop {VcsTreeNodeItem} item - The item to render.
+ * @vue-prop {string} [itemChildren='children'] - The property key of the children.
+ * @vue-prop {boolean} [draggable=false] - Whether the tree node is draggable.
+ * @vue-prop {number} [level=0] - The level of the item
+ * @vue-prop {Array<string>} opened - Names of the opened items.
+ * @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.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    item: {
+        type: PropType<VcsTreeNodeItem>;
+        required: true;
+    };
+    itemChildren: {
+        type: PropType<keyof VcsTreeNodeItem>;
+        default: string;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        default: number;
+    };
+    opened: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    openOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    search: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * @param {VcsTreeNodeItem} item The item to check the match for.
+     * @param {string} search The search value.
+     */
+    customFilter: {
+        type: PropType<(item: VcsTreeNodeItem, search: string) => boolean>;
+        default: undefined;
+    };
+}, {
+    forwardSlots: string[];
+    treenodeRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<import("vue", { with: { "resolution-mode": "import" } }).CreateComponentPublicInstance<{
+        alignContent: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+        style: import("vue", { with: { "resolution-mode": "import" } }).StyleValue;
+        tag: string;
+        dense: boolean;
+        justify: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+        align: "center" | "end" | "start" | "stretch" | "baseline";
+        noGutters: boolean;
+    } & {
+        class?: any;
+        alignSm?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignMd?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignLg?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignXl?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignXxl?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        justifySm?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyMd?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyLg?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyXl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyXxl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        alignContentSm?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentMd?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentLg?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentXl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentXxl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+    } & {
+        $children?: import("vue", { with: { "resolution-mode": "import" } }).VNodeChild | {
+            default?: (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild) | undefined;
+        } | (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild);
+        'v-slots'?: {
+            default?: false | (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild) | undefined;
+    }, () => import("vue", { with: { "resolution-mode": "import" } }).VNode<import("vue", { with: { "resolution-mode": "import" } }).RendererNode, import("vue", { with: { "resolution-mode": "import" } }).RendererElement, {
+        [key: string]: any;
+    }>, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, Record<string, any>, import("vue", { with: { "resolution-mode": "import" } }).VNodeProps & import("vue", { with: { "resolution-mode": "import" } }).AllowedComponentProps & import("vue", { with: { "resolution-mode": "import" } }).ComponentCustomProps & {
+        alignContent: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+        style: import("vue", { with: { "resolution-mode": "import" } }).StyleValue;
+        tag: string;
+        dense: boolean;
+        justify: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+        align: "center" | "end" | "start" | "stretch" | "baseline";
+        noGutters: boolean;
+    } & {
+        class?: any;
+        alignSm?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignMd?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignLg?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignXl?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignXxl?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        justifySm?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyMd?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyLg?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyXl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyXxl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        alignContentSm?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentMd?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentLg?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentXl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentXxl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+    } & {
+        $children?: import("vue", { with: { "resolution-mode": "import" } }).VNodeChild | {
+            default?: (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild) | undefined;
+        } | (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild);
+        'v-slots'?: {
+            default?: false | (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild) | undefined;
+    }, {
+        alignContent: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+        style: import("vue", { with: { "resolution-mode": "import" } }).StyleValue;
+        tag: string;
+        dense: boolean;
+        justify: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+        align: "center" | "end" | "start" | "stretch" | "baseline";
+        noGutters: boolean;
+    }, true, {}, import("vue", { with: { "resolution-mode": "import" } }).SlotsType<Partial<{
+        default: () => import("vue", { with: { "resolution-mode": "import" } }).VNode[];
+    }>>, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, {
+        alignContent: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+        style: import("vue", { with: { "resolution-mode": "import" } }).StyleValue;
+        tag: string;
+        dense: boolean;
+        justify: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+        align: "center" | "end" | "start" | "stretch" | "baseline";
+        noGutters: boolean;
+    } & {
+        class?: any;
+        alignSm?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignMd?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignLg?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignXl?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        alignXxl?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+        justifySm?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyMd?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyLg?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyXl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        justifyXxl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined;
+        alignContentSm?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentMd?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentLg?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentXl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+        alignContentXxl?: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch" | undefined;
+    } & {
+        $children?: import("vue", { with: { "resolution-mode": "import" } }).VNodeChild | {
+            default?: (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild) | undefined;
+        } | (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild);
+        'v-slots'?: {
+            default?: false | (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => import("vue", { with: { "resolution-mode": "import" } }).VNodeChild) | undefined;
+    }, () => import("vue", { with: { "resolution-mode": "import" } }).VNode<import("vue", { with: { "resolution-mode": "import" } }).RendererNode, import("vue", { with: { "resolution-mode": "import" } }).RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, {
+        alignContent: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+        style: import("vue", { with: { "resolution-mode": "import" } }).StyleValue;
+        tag: string;
+        dense: boolean;
+        justify: "center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "stretch";
+        align: "center" | "end" | "start" | "stretch" | "baseline";
+        noGutters: boolean;
+    }> | null>;
+    isOpen: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number | false>;
+    isGroup: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean | undefined>;
+    matchFilter: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    iconSize: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    children: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<string | boolean | VcsAction[] | HTMLImageElement | HTMLCanvasElement | VcsTreeNodeItem[] | ((event: Event) => void | Promise<void>)>;
+    bubbleItemToggled: (...args: unknown[]) => void;
+    bubbleItemClicked: (...args: unknown[]) => void;
+    bubbleDragStart: (...args: unknown[]) => void;
+    bubbleDragOver: (...args: unknown[]) => void;
+    bubbleDragEnd: (...args: unknown[]) => void;
+    bubbleDrop: (...args: unknown[]) => void;
+    bubbleDragLeave: (...args: unknown[]) => void;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, ("click" | "itemToggled" | "dragstart" | "dragover" | "dragend" | "drop" | "dragleave")[], "click" | "itemToggled" | "dragstart" | "dragover" | "dragend" | "drop" | "dragleave", import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    item: {
+        type: PropType<VcsTreeNodeItem>;
+        required: true;
+    };
+    itemChildren: {
+        type: PropType<keyof VcsTreeNodeItem>;
+        default: string;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        default: number;
+    };
+    opened: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    openOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    search: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * @param {VcsTreeNodeItem} item The item to check the match for.
+     * @param {string} search The search value.
+     */
+    customFilter: {
+        type: PropType<(item: VcsTreeNodeItem, search: string) => boolean>;
+        default: undefined;
+    };
+}>> & {
+    onDragend?: ((...args: any[]) => any) | undefined;
+    onDragleave?: ((...args: any[]) => any) | undefined;
+    onDragover?: ((...args: any[]) => any) | undefined;
+    onDragstart?: ((...args: any[]) => any) | undefined;
+    onDrop?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+    onItemToggled?: ((...args: any[]) => any) | undefined;
+}, {
+    search: string;
+    openOnClick: boolean;
+    draggable: boolean;
+    itemChildren: keyof VcsTreeNodeItem;
+    level: number;
+    customFilter: (item: VcsTreeNodeItem, search: string) => boolean;
+}, {}>;