From 8dd9d08209e47a7d9a5654db4fb936b4cbcfc021 Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Mon, 14 Apr 2025 16:09:20 +0200
Subject: [PATCH] fix(types): improve dynamic slots (#3857)

---
 playground/app/pages/components/tree.vue |  6 +++---
 src/runtime/components/Accordion.vue     |  4 ++--
 src/runtime/types/utils.ts               | 21 ++++++++++++---------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/playground/app/pages/components/tree.vue b/playground/app/pages/components/tree.vue
index dcd9570c..356b76f3 100644
--- a/playground/app/pages/components/tree.vue
+++ b/playground/app/pages/components/tree.vue
@@ -8,11 +8,11 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
 const color = ref(theme.defaultVariants.color)
 const size = ref(theme.defaultVariants.size)
 
-const items: TreeItem[] = [
+const items = [
   {
     label: 'app',
     defaultExpanded: true,
-    slot: 'app',
+    slot: 'app' as const,
     children: [{
       label: 'composables',
       defaultExpanded: true,
@@ -33,7 +33,7 @@ const items: TreeItem[] = [
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
-]
+] satisfies TreeItem[]
 
 const itemsWithMappedId = [
   { id: 'id', title: 'hello' },
diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 53062033..65e14d30 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -115,9 +115,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
       </AccordionHeader>
 
       <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot as keyof AccordionSlots<T>]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body` as keyof AccordionSlots<T>])" :class="ui.content({ class: props.ui?.content })">
-        <slot :name="((item.slot || 'content') as keyof AccordionSlots<T>)" :item="item" :index="index" :open="open">
+        <slot :name="((item.slot || 'content') as keyof AccordionSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :open="open">
           <div :class="ui.body({ class: props.ui?.body })">
-            <slot :name="((item.slot ? `${item.slot}-body`: 'body') as keyof AccordionSlots<T>)" :item="item" :index="index" :open="open">
+            <slot :name="((item.slot ? `${item.slot}-body`: 'body') as keyof AccordionSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :open="open">
               {{ item.content }}
             </slot>
           </div>
diff --git a/src/runtime/types/utils.ts b/src/runtime/types/utils.ts
index c436646a..23d2ab44 100644
--- a/src/runtime/types/utils.ts
+++ b/src/runtime/types/utils.ts
@@ -16,18 +16,21 @@ export type DeepPartial<T, O = any> = {
   [key: string]: O | TightMap<O>
 }
 
+export type DynamicSlotsKeys<Name extends string | undefined, Suffix extends string | undefined = undefined> = (
+  Name extends string
+    ? Suffix extends string
+      ? Name | `${Name}-${Suffix}`
+      : Name
+    : never
+)
 export type DynamicSlots<
   T extends { slot?: string },
-  S extends string | undefined = undefined,
-  D extends object = {}
+  Suffix extends string | undefined = undefined,
+  ExtraProps extends object = {}
 > = {
-  [
-  K in T['slot'] as K extends string
-    ? S extends string
-      ? (K | `${K}-${S}`)
-      : K
-    : never
-  ]?: (props: { item: Extract<T, { slot: K extends `${infer Base}-${S}` ? Base : K }> } & D) => any
+  [K in DynamicSlotsKeys<T['slot'], Suffix>]: (
+    props: { item: Extract<T, { slot: K extends `${infer Base}-${Suffix}` ? Base : K }> } & ExtraProps
+  ) => any
 }
 
 export type GetObjectField<MaybeObject, Key extends string> = MaybeObject extends Record<string, any>