@vcmap/ui 6.3.10 → 7.0.0-rc.1

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

@@ -0,0 +1,209 @@
+import type { PropType } from 'vue';
+import type { VcsAction } from '../../actions/actionHelper.js';
+import type { VcsListItem } from './VcsListItemComponent.ts.vue';
+import type { DropTargetZonesFunction } from './dragHelper.js';
+declare var __VLS_59: {
+    index: number;
+    item: VcsListItem;
+    actions: VcsAction[];
+    actionButtonListOverflowCount: number | undefined;
+    isActive: boolean;
+    isOpen: boolean;
+    isSelected: boolean;
+    isIndeterminate: boolean;
+    select: (value: boolean) => void;
+}, __VLS_62: {
+    index: number;
+    item: VcsListItem;
+    tooltip: string;
+    title?: string | number;
+}, __VLS_65: {
+    index: number;
+    item: VcsListItem;
+    subtitle?: string | number;
+}, __VLS_68: {
+    index: number;
+    item: VcsListItem;
+    isActive: boolean;
+    isOpen: boolean;
+    isSelected: boolean;
+    isIndeterminate: boolean;
+    select: (value: boolean) => void;
+}, __VLS_70: {
+    item: VcsListItem;
+    index: number;
+};
+type __VLS_Slots = {} & {
+    'item.append'?: (props: typeof __VLS_59) => any;
+} & {
+    'item.title'?: (props: typeof __VLS_62) => any;
+} & {
+    'item.subtitle'?: (props: typeof __VLS_65) => any;
+} & {
+    'item.prepend'?: (props: typeof __VLS_68) => any;
+} & {
+    'item.intermediate'?: (props: typeof __VLS_70) => any;
+};
+declare const __VLS_base: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    items: {
+        type: PropType<VcsListItem[]>;
+        required: true;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dropTargetZones: {
+        type: PropType<DropTargetZonesFunction | undefined>;
+        default: undefined;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectFunction: {
+        type: PropType<(item: VcsListItem, event: PointerEvent) => void>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<Array<VcsListItem>>;
+        default: () => never[];
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    customFilter: {
+        type: PropType<(item: VcsListItem, query: string) => boolean>;
+        default: undefined;
+    };
+    searchbarPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: string;
+    };
+    actions: {
+        type: PropType<VcsAction[]>;
+        required: false;
+        default: () => never[];
+    };
+}, unknown, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    itemMoved: (...args: any[]) => void;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    items: {
+        type: PropType<VcsListItem[]>;
+        required: true;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dropTargetZones: {
+        type: PropType<DropTargetZonesFunction | undefined>;
+        default: undefined;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectFunction: {
+        type: PropType<(item: VcsListItem, event: PointerEvent) => void>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<Array<VcsListItem>>;
+        default: () => never[];
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    customFilter: {
+        type: PropType<(item: VcsListItem, query: string) => boolean>;
+        default: undefined;
+    };
+    searchbarPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: string;
+    };
+    actions: {
+        type: PropType<VcsAction[]>;
+        required: false;
+        default: () => never[];
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onItemMoved?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    modelValue: VcsListItem[];
+    draggable: boolean;
+    tooltip: string;
+    icon: string;
+    selectable: boolean;
+    actions: VcsAction[];
+    customFilter: (item: VcsListItem, query: string) => boolean;
+    searchbarPlaceholder: string;
+    dropTargetZones: DropTargetZonesFunction | undefined;
+    actionButtonListOverflowCount: number;
+    singleSelect: boolean;
+    selectFunction: (item: VcsListItem, event: PointerEvent) => void;
+    searchable: boolean;
+    showTitle: boolean;
+}, {}>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,37 +1,48 @@
-<script setup>
+<script setup lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, ref } from 'vue';
   import {
     VListItem,
     VIcon,
     VListItemTitle,
     VTooltip,
   } from 'vuetify/components';
-  import { computed, ref } from 'vue';
   import { is } from '@vcsuite/check';
-  import VcsBadge from '../notification/VcsBadge.vue';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsBadge from '../notification/VcsBadge.ts.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.ts.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.ts.vue';
   import { createEllipseTooltip } from '../composables.js';
+  import type { ActionOptions, VcsAction } from '../../actions/actionHelper.js';
 
-  /**
-   * @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|import("../../actions/actionHelper.js").ActionOptions} [renamable] - Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted.
-   * @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<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. only usable with renamble true.
-   */
+  export type VcsListItem = {
+    name: string;
+    /** Whether to display this item or not. */
+    visible?: boolean;
+    /** Whether this item should be displayed as disabled. */
+    disabled?: boolean;
+    /** Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted. */
+    renamable?: boolean | ActionOptions;
+    /** The title to be displayed */
+    title: string;
+    /** An optional tooltip for the item. */
+    tooltip?: string;
+    /** An optional icon for the item. Can be a string, HTMLCanvasElement, or HTMLImageElement. */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /** Whether the item has an update. */
+    hasUpdate?: boolean;
+    /** An array of actions associated with this item. */
+    actions?: Array<VcsAction>;
+    /** An array of callbacks called on item click. called before selection update */
+    clickedCallbacks?: Array<(event: PointerEvent) => void> | undefined;
+    /** A callback called if the selection changes with the current selection status. called before value update */
+    selectionChanged?: (selected: boolean) => void;
+    /** A callback called if the title changes via rename action. only usable with renamble true. */
+    titleChanged?: (newTitle: string) => void;
+  };
 
   const props = defineProps({
-    /** @type {VcsListItem} */
     item: {
-      type: Object,
+      type: Object as PropType<VcsListItem>,
       required: true,
     },
     actionButtonListOverflowCount: {
@@ -50,7 +61,7 @@
       return {
         name: 'list.renameItem',
         ...(is(props.item.renamable, Object) ? props.item.renamable : {}),
-        callback() {
+        callback(): void {
           rename.value = true;
         },
       };
@@ -58,7 +69,7 @@
     return undefined;
   });
 
-  function renameOff() {
+  function renameOff(): void {
     rename.value = false;
   }
 
@@ -81,7 +92,7 @@
     computed(() => props.item?.title),
   );
 
-  function renameItem(item, newTitle) {
+  function renameItem(item: VcsListItem, newTitle: string): void {
     if (newTitle) {
       item.titleChanged?.(newTitle);
     }
@@ -112,11 +123,11 @@
             v-if="rename"
             :model-value="item.title"
             autofocus
-            @update:model-value="(value) => renameItem(item, value)"
+            @update:model-value="(value: string) => renameItem(item, value)"
             @click.stop
             @keydown.enter="renameOff"
             @blur="renameOff"
-            :rules="[(v) => !!v || 'components.validation.required']"
+            :rules="[(v: string) => !!v || 'components.validation.required']"
             class="pa-0"
           />
           <template v-else>

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

@@ -0,0 +1,104 @@
+import type { PropType } from 'vue';
+import type { ActionOptions, VcsAction } from '../../actions/actionHelper.js';
+export type VcsListItem = {
+    name: string;
+    /** Whether to display this item or not. */
+    visible?: boolean;
+    /** Whether this item should be displayed as disabled. */
+    disabled?: boolean;
+    /** Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted. */
+    renamable?: boolean | ActionOptions;
+    /** The title to be displayed */
+    title: string;
+    /** An optional tooltip for the item. */
+    tooltip?: string;
+    /** An optional icon for the item. Can be a string, HTMLCanvasElement, or HTMLImageElement. */
+    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
+    /** Whether the item has an update. */
+    hasUpdate?: boolean;
+    /** An array of actions associated with this item. */
+    actions?: Array<VcsAction>;
+    /** An array of callbacks called on item click. called before selection update */
+    clickedCallbacks?: Array<(event: PointerEvent) => void> | undefined;
+    /** A callback called if the selection changes with the current selection status. called before value update */
+    selectionChanged?: (selected: boolean) => void;
+    /** A callback called if the title changes via rename action. only usable with renamble true. */
+    titleChanged?: (newTitle: string) => void;
+};
+declare var __VLS_9: {
+    isActive: boolean;
+    isOpen: boolean;
+    isSelected: boolean;
+    isIndeterminate: boolean;
+    select: (value: boolean) => void;
+}, __VLS_18: {
+    tooltip: string;
+    title?: string | number;
+}, __VLS_45: {
+    subtitle?: string | number;
+}, __VLS_48: {
+    tooltip: string;
+    isActive: boolean;
+    isOpen: boolean;
+    isSelected: boolean;
+    isIndeterminate: boolean;
+    select: (value: boolean) => void;
+}, __VLS_51: {
+    item: VcsListItem;
+    actions: VcsAction[];
+    actionButtonListOverflowCount: number | undefined;
+    isActive: boolean;
+    isOpen: boolean;
+    isSelected: boolean;
+    isIndeterminate: boolean;
+    select: (value: boolean) => void;
+};
+type __VLS_Slots = {} & {
+    prepend?: (props: typeof __VLS_9) => any;
+} & {
+    title?: (props: typeof __VLS_18) => any;
+} & {
+    subtitle?: (props: typeof __VLS_45) => any;
+} & {
+    default?: (props: typeof __VLS_48) => any;
+} & {
+    append?: (props: typeof __VLS_51) => any;
+};
+declare const __VLS_base: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    item: {
+        type: PropType<VcsListItem>;
+        required: true;
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    dragging: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    item: {
+        type: PropType<VcsListItem>;
+        required: true;
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    dragging: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    dragging: boolean;
+    actionButtonListOverflowCount: number;
+}, {}>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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="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="(event) => $emit('click', item, event)"
+          @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,12 +55,12 @@
       </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"
             :level="level + 1"
@@ -81,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>
@@ -95,7 +90,7 @@
               'dragover',
               $event,
               item,
-              treenodeRef.$el,
+              treenodeRef?.$el,
               { before: false, into: false, after: true },
               false, // mock closed group to allow insert after
             )
@@ -114,29 +109,39 @@
   </div>
 </template>
 
-<script>
-  import { computed, ref, getCurrentInstance } 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
@@ -155,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,
@@ -167,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: {
@@ -185,7 +189,7 @@
         default: 0,
       },
       opened: {
-        type: Array,
+        type: Array as PropType<string[]>,
         required: true,
       },
       openOnClick: {
@@ -201,7 +205,9 @@
        * @param {string} search The search value.
        */
       customFilter: {
-        type: Function,
+        type: Function as PropType<
+          (item: VcsTreeNodeItem, search: string) => boolean
+        >,
         default: undefined,
       },
     },
@@ -215,15 +221,15 @@
       '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 treenodeRef = ref<InstanceType<typeof VRow> | null>(null);
 
       const isOpen = computed(
         () =>
           props.opened.includes(props.item.name) &&
-          props.item[props.itemChildren]?.length,
+          (props.item[props.itemChildren] as VcsTreeNodeItem[])?.length,
       );
       const children = computed(() => props.item[props.itemChildren] ?? []);
 
@@ -234,20 +240,29 @@
         if (props.customFilter) {
           return props.customFilter(props.item, props.search);
         }
-        const translatedTitle = (item) =>
-          item.title ? vm.$t(item.title) : item.name;
+        const translatedTitle = (item: VcsTreeNodeItem): string =>
+          item.title ? vm!.$st(item.title) : item.name;
 
-        const hasText = (item) =>
+        const hasText = (item: VcsTreeNodeItem): boolean =>
           translatedTitle(item)
             .toLocaleLowerCase()
-            .indexOf(props.search.toLocaleLowerCase()) > -1 ||
-          item[props.itemChildren]?.some(hasText);
+            .indexOf(props.search!.toLocaleLowerCase()) > -1 ||
+          (item[props.itemChildren] as VcsTreeNodeItem[])?.some(hasText);
 
         return hasText(props.item);
       });
 
-      function bubbleEvent(eventName) {
-        return (...args) => {
+      function bubbleEvent(
+        eventName:
+          | 'itemToggled'
+          | 'click'
+          | 'dragstart'
+          | 'dragover'
+          | 'dragend'
+          | 'drop'
+          | 'dragleave',
+      ) {
+        return (...args: unknown[]): void => {
           emit(eventName, ...args);
         };
       }
@@ -257,7 +272,9 @@
         treenodeRef,
         isOpen,
         isGroup: computed(
-          () => children.value.length > 0 || props.item.forceNodeDisplay,
+          () =>
+            (children.value as VcsTreeNodeItem[]).length > 0 ||
+            props.item.forceNodeDisplay,
         ),
         matchFilter,
         iconSize,
@@ -272,7 +289,7 @@
         bubbleDragLeave: bubbleEvent('dragleave'),
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>