From 3deed4c271cad4adc2a4c47d5dd02e95a14ce11a Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Wed, 9 Apr 2025 14:05:59 +0200
Subject: [PATCH] fix(Tree): simplify reusable template types (#3836)

---
 src/runtime/components/Tree.vue | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index 0f2547b4..cffc3ab1 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -112,7 +112,6 @@ export type TreeSlots<
 
 <script setup lang="ts" generic="T extends TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false">
 import { computed } from 'vue'
-import type { PropType } from 'vue'
 import { TreeRoot, TreeItem, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { get } from '../utils'
@@ -127,22 +126,14 @@ const slots = defineSlots<TreeSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'items', 'multiple', 'expanded', 'disabled', 'propagateSelect'), emits)
 
-const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate<
-  { items?: NestedItem<T>[], level: number },
-  TreeSlots<T>
->({
-  props: {
-    items: Array as PropType<NestedItem<T>[]>,
-    level: Number
-  }
-})
+const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate<{ items?: TreeItem[], level: number }, TreeSlots<T>>()
 
 const ui = computed(() => tree({
   color: props.color,
   size: props.size
 }))
 
-function getItemLabel(item: NestedItem<T>): string {
+function getItemLabel<Item extends TreeItem = NestedItem<T>>(item: Item): string {
   return get(item, props.labelKey as string)
 }
 
@@ -209,7 +200,7 @@ const defaultExpanded = computed(() =>
         </button>
 
         <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: props.ui?.listWithChildren })">
-          <ReuseTreeTemplate :items="(item.children as NestedItem<T>[])" :level="level + 1" />
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
         </ul>
       </TreeItem>
     </li>
@@ -222,6 +213,6 @@ const defaultExpanded = computed(() =>
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"
   >
-    <ReuseTreeTemplate :items="(items as NestedItem<T>[] | undefined)" :level="0" />
+    <ReuseTreeTemplate :items="items" :level="0" />
   </TreeRoot>
 </template>