fix(types): improve dynamic slots (#3857)

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' },

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>

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,
+  Suffix extends string | undefined = undefined,
-  D extends object = {}
+  ExtraProps extends object = {}
 > = {
-  [
+  [K in DynamicSlotsKeys<T['slot'], Suffix>]: (
-  K in T['slot'] as K extends string
+    props: { item: Extract<T, { slot: K extends `${infer Base}-${Suffix}` ? Base : K }> } & ExtraProps
-    ? S extends string
+  ) => any
-      ? (K | `${K}-${S}`)
-      : K
-    : never
-  ]?: (props: { item: Extract<T, { slot: K extends `${infer Base}-${S}` ? Base : K }> } & D) => any
 }
 
 export type GetObjectField<MaybeObject, Key extends string> = MaybeObject extends Record<string, any>