docs(accordion): update

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Colors',
+    icon: 'i-heroicons-swatch'
+  },
+  {
+    label: 'Icons',
+    icon: 'i-heroicons-face-smile'
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent'
+  }
+]
+</script>
+
+<template>
+  <UAccordion :items="items">
+    <template #content="{ item }">
+      <p>This is the {{ item.label }} panel.</p>
+    </template>
+  </UAccordion>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Colors',
+    icon: 'i-heroicons-swatch',
+    slot: 'colors',
+    content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+  },
+  {
+    label: 'Icons',
+    icon: 'i-heroicons-face-smile',
+    content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+  }
+]
+</script>
+
+<template>
+  <UAccordion :items="items">
+    <template #colors="{ item }">
+      <p class="text-primary-500 dark:text-primary-400">
+        {{ item.content }}
+      </p>
+    </template>
+  </UAccordion>
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Colors',
+    icon: 'i-heroicons-swatch',
+    content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+  },
+  {
+    label: 'Icons',
+    icon: 'i-heroicons-face-smile',
+    content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+  }
+]
+
+const active = ref('0')
+
+// Note: This is for demonstration purposes only.
+onMounted(() => {
+  setInterval(() => {
+    active.value = String((Number(active.value) + 1) % items.length)
+  }, 2000)
+})
+</script>
+
+<template>
+  <UAccordion v-model="active" :items="items" />
+</template>

docs/app/components/content/examples/tabs/TabsModelValueExample.vue

@@ -8,12 +8,12 @@ const items = [
   }
 ]
 
-const active = ref('1')
+const active = ref('0')
 
 // Note: This is for demonstration purposes only.
 onMounted(() => {
   setInterval(() => {
-    active.value = active.value === '0' ? '1' : '0'
+    active.value = String((Number(active.value) + 1) % items.length)
   }, 2000)
 })
 </script>