docs(content): improve examples

docs/app/components/content/examples/accordion/AccordionDragAndDropExample.vue

@@ -11,7 +11,6 @@ const items = shallowRef<AccordionItem[]>([
   {
     label: 'Colors',
     icon: 'i-lucide-swatch-book',
-    slot: 'colors' as const,
     content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
   },
   {

docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue

@@ -1,26 +1,35 @@
 <script setup lang="ts">
 import type { BreadcrumbItem } from '@nuxt/ui'
 
-const items = [{
+const items = [
+  {
     label: 'Home',
     to: '/'
-}, {
+  },
+  {
     slot: 'dropdown' as const,
     icon: 'i-lucide-ellipsis',
-  children: [{
+    children: [
+      {
         label: 'Documentation'
-  }, {
+      },
+      {
         label: 'Themes'
-  }, {
+      },
+      {
         label: 'GitHub'
-  }]
+      }
-}, {
+    ]
+  },
+  {
     label: 'Components',
     to: '/components'
-}, {
+  },
+  {
     label: 'Breadcrumb',
     to: '/components/breadcrumb'
-}] satisfies BreadcrumbItem[]
+  }
+] satisfies BreadcrumbItem[]
 </script>
 
 <template>

docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import type { BreadcrumbItem } from '@nuxt/ui'
 
-const items: BreadcrumbItem[] = [{
+const items: BreadcrumbItem[] = [
+  {
     label: 'Home',
     to: '/'
-}, {
+  },
+  {
     label: 'Components',
     to: '/components'
-}, {
+  },
+  {
     label: 'Breadcrumb',
     to: '/components/breadcrumb'
-}]
+  }
+]
 </script>
 
 <template>

docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue

@@ -1,23 +1,30 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
 
-const items: DropdownMenuItem[] = [{
+const items: DropdownMenuItem[] = [
+  {
     label: 'Team',
     icon: 'i-lucide-users'
-}, {
+  },
+  {
     label: 'Invite users',
     icon: 'i-lucide-user-plus',
-  children: [{
+    children: [
+      {
         label: 'Invite by email',
         icon: 'i-lucide-send-horizontal'
-  }, {
+      },
+      {
         label: 'Invite by link',
         icon: 'i-lucide-link'
-  }]
+      }
-}, {
+    ]
+  },
+  {
     label: 'New team',
     icon: 'i-lucide-plus'
-}]
+  }
+]
 </script>
 
 <template>

docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-const groups = [{
+const groups = [
+  {
     id: 'settings',
     items: [
       {
@@ -22,7 +23,8 @@ const groups = [{
         icon: 'i-lucide-lock'
       }
     ]
-}, {
+  },
+  {
     id: 'users',
     label: 'Users',
     slot: 'users' as const,
@@ -70,7 +72,8 @@ const groups = [{
         target: '_blank'
       }
     ]
-}]
+  }
+]
 </script>
 
 <template>

docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue

@@ -3,14 +3,18 @@ import type { ContextMenuItem } from '@nuxt/ui'
 
 const loading = ref(true)
 
-const items: ContextMenuItem[] = [{
+const items = [
+  {
     label: 'Refresh the Page',
-  slot: 'refresh'
+    slot: 'refresh' as const
-}, {
+  },
+  {
     label: 'Clear Cookies and Refresh'
-}, {
+  },
+  {
     label: 'Clear Cache and Refresh'
-}]
+  }
+] satisfies ContextMenuItem[]
 </script>
 
 <template>

docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue

@@ -1,23 +1,21 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 
-const items: NavigationMenuItem[] = [
+const items = [
   {
     label: 'Guide',
     icon: 'i-lucide-book-open'
-
   },
   {
     label: 'Composables',
     icon: 'i-lucide-database'
-
   },
   {
     label: 'Components',
     icon: 'i-lucide-box',
-    slot: 'components'
+    slot: 'components' as const
   }
-]
+] satisfies NavigationMenuItem[]
 </script>
 
 <template>

docs/app/components/content/examples/stepper/StepperCustomSlotExample.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import type { StepperItem } from '@nuxt/ui'
 
-const items: StepperItem[] = [
+const items = [
   {
-    slot: 'address',
+    slot: 'address' as const,
     title: 'Address',
     description: 'Add your address here',
     icon: 'i-lucide-house'
   }, {
-    slot: 'shipping',
+    slot: 'shipping' as const,
     title: 'Shipping',
     description: 'Set your preferred shipping method',
     icon: 'i-lucide-truck'
   }, {
-    slot: 'checkout',
+    slot: 'checkout' as const,
     title: 'Checkout',
     description: 'Confirm your order'
   }
-]
+] satisfies StepperItem[]
 </script>
 
 <template>

docs/app/components/content/examples/stepper/StepperWithControlsExample.vue

@@ -3,17 +3,14 @@ import type { StepperItem } from '@nuxt/ui'
 
 const items: StepperItem[] = [
   {
-    slot: 'address',
     title: 'Address',
     description: 'Add your address here',
     icon: 'i-lucide-house'
   }, {
-    slot: 'shipping',
     title: 'Shipping',
     description: 'Set your preferred shipping method',
     icon: 'i-lucide-truck'
   }, {
-    slot: 'checkout',
     title: 'Checkout',
     description: 'Confirm your order'
   }

docs/app/components/content/examples/tree/TreeCustomSlotExample.vue

@@ -6,7 +6,8 @@ const items = [
     label: 'app/',
     slot: 'app' as const,
     defaultExpanded: true,
-    children: [{
+    children: [
+      {
         label: 'composables/',
         children: [
           { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
@@ -20,7 +21,8 @@ const items = [
           { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
           { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
         ]
-    }]
+      }
+    ]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeExpandedExample.vue

@@ -5,7 +5,8 @@ const items: TreeItem[] = [
   {
     label: 'app/',
     value: 'app',
-    children: [{
+    children: [
+      {
         label: 'composables/',
         value: 'composables',
         children: [
@@ -20,7 +21,8 @@ const items: TreeItem[] = [
           { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
           { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
         ]
-    }]
+      }
+    ]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeModelValueExample.vue

@@ -5,7 +5,8 @@ const items: TreeItem[] = [
   {
     label: 'app/',
     defaultExpanded: true,
-    children: [{
+    children: [
+      {
         label: 'composables/',
         children: [
           { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
@@ -19,7 +20,8 @@ const items: TreeItem[] = [
           { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
           { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
         ]
-    }]
+      }
+    ]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeOnSelectExample.vue

@@ -8,7 +8,8 @@ const items: TreeItem[] = [
     onSelect: (e: Event) => {
       e.preventDefault()
     },
-    children: [{
+    children: [
+      {
         label: 'composables/',
         children: [
           { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
@@ -22,7 +23,8 @@ const items: TreeItem[] = [
           { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
           { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
         ]
-    }]
+      }
+    ]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeOnToggleExample.vue

@@ -8,7 +8,8 @@ const items: TreeItem[] = [
     onToggle: (e: Event) => {
       e.preventDefault()
     },
-    children: [{
+    children: [
+      {
         label: 'composables/',
         children: [
           { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
@@ -22,7 +23,8 @@ const items: TreeItem[] = [
           { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
           { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
         ]
-    }]
+      }
+    ]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }