fix: dynamic slots autocomplete (#77)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

playground/pages/accordion.vue

@@ -22,7 +22,7 @@ const items = [{
   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }, {
   label: 'Utilities',
-  slot: 'toto',
+  slot: 'custom' as const,
   icon: 'i-heroicons-wrench-screwdriver',
   content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
 }]
@@ -30,6 +30,10 @@ const items = [{
 
 <template>
   <UCard :ui="{ body: 'p-0 sm:p-0' }">
-    <UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', content: 'px-3.5' }" />
+    <UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', content: 'px-3.5' }">
+      <template #custom="{ item }">
+        <span class="text-gray-500 dark:text-gray-400">Custom: {{ item.content }}</span>
+      </template>
+    </UAccordion>
   </UCard>
 </template>

playground/pages/breadcrumb.vue

@@ -3,7 +3,7 @@ const items = [{
   label: 'Home',
   to: '/'
 }, {
-  slot: 'dropdown',
+  slot: 'dropdown' as const,
   icon: 'i-heroicons-ellipsis-horizontal',
   children: [{
     label: 'Documentation'

playground/pages/dropdown-menu.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const appConfig = useAppConfig()
+
 const items = [
   [{
     label: 'My account',
@@ -10,6 +12,7 @@ const items = [
   [{
     label: 'Profile',
     icon: 'i-heroicons-user',
+    slot: 'custom' as const,
     select(e: Event) {
       e.preventDefault()
       console.log('Profile clicked')
@@ -116,6 +119,14 @@ defineShortcuts(extractShortcuts(items))
   <div class="flex-1">
     <UDropdownMenu :items="items" arrow :content="{ side: 'bottom' }" class="min-w-48">
       <UButton label="Open" color="white" />
+
+      <template #custom="{ item }">
+        <UIcon :name="item.icon" class="shrink-0 size-5" />
+
+        <span class="truncate">{{ item.label }}</span>
+
+        <UIcon :name="appConfig.ui.icons.check" class="shrink-0 size-5 text-primary-500 dark:text-primary-400 ms-auto" />
+      </template>
     </UDropdownMenu>
   </div>
 </template>

playground/pages/navigation-menu.vue

@@ -26,7 +26,8 @@ const items = [
     label: 'Examples',
     icon: 'i-heroicons-light-bulb',
     to: 'https://ui.nuxt.com',
-    target: '_blank'
+    target: '_blank',
+    slot: 'custom' as const
   }, {
     label: 'Help',
     icon: 'i-heroicons-question-mark-circle',
@@ -37,7 +38,13 @@ const items = [
 
 <template>
   <div class="flex flex-col gap-12 w-full max-w-4xl">
-    <UNavigationMenu :items="items" class="border-b border-gray-200 dark:border-gray-800" />
+    <UNavigationMenu :items="items" class="border-b border-gray-200 dark:border-gray-800">
+      <template #custom="{ item }">
+        <UIcon :name="item.icon" class="size-5" />
+
+        <span class="truncate text-primary-500 dark:text-primary-400">{{ item.label }}</span>
+      </template>
+    </UNavigationMenu>
 
     <UNavigationMenu :items="items" orientation="vertical" class="w-48" />
   </div>

playground/pages/tabs.vue

@@ -12,13 +12,19 @@ const items = [{
 }, {
   label: 'Tab3',
   icon: 'i-heroicons-bell',
-  content: 'Finally, this is the content for Tab3'
+  content: 'Finally, this is the content for Tab3',
+  slot: 'custom' as const
 }]
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
-    <UTabs :items="items" class="w-96" />
+    <UTabs :items="items" class="w-96">
+      <template #custom="{ item }">
+        <span class="text-gray-500 dark:text-gray-400">Custom: {{ item.content }}</span>
+      </template>
+    </UTabs>
+
     <UTabs :items="items" orientation="vertical" />
   </div>
 </template>