feat(Accordion): add body slot to solve animation flick

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

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

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 const items = [
-  {
-    label: 'Colors',
-    icon: 'i-heroicons-swatch'
-  },
   {
     label: 'Icons',
     icon: 'i-heroicons-face-smile'
   },
+  {
+    label: 'Colors',
+    icon: 'i-heroicons-swatch'
+  },
   {
     label: 'Components',
     icon: 'i-heroicons-cube-transparent'
@@ -18,7 +18,9 @@ const items = [
 <template>
   <UAccordion :items="items">
     <template #content="{ item }">
-      <p>This is the {{ item.label }} panel.</p>
+      <p class="pb-3.5 text-sm text-gray-500 dark:text-gray-400">
+        This is the {{ item.label }} panel.
+      </p>
     </template>
   </UAccordion>
 </template>

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

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 const items = [
+  {
+    label: 'Icons',
+    icon: 'i-heroicons-face-smile',
+    content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+  },
   {
     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',
@@ -22,7 +22,7 @@ const items = [
 <template>
   <UAccordion :items="items">
     <template #colors="{ item }">
-      <p class="text-primary-500 dark:text-primary-400">
+      <p class="text-sm pb-3.5 text-primary-500 dark:text-primary-400">
         {{ item.content }}
       </p>
     </template>

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

@@ -1,15 +1,15 @@
 <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: 'Colors',
+    icon: 'i-heroicons-swatch',
+    content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+  },
   {
     label: 'Components',
     icon: 'i-heroicons-cube-transparent',

docs/content/3.components/accordion.md

@@ -34,12 +34,12 @@ hide:
 props:
   class: 'px-4'
   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: 'Colors'
+      icon: 'i-heroicons-swatch'
+      content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
     - label: 'Components'
       icon: 'i-heroicons-cube-transparent'
       content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
@@ -63,12 +63,12 @@ props:
   class: 'px-4'
   type: 'multiple'
   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: 'Colors'
+      icon: 'i-heroicons-swatch'
+      content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
     - label: 'Components'
       icon: 'i-heroicons-cube-transparent'
       content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
@@ -92,12 +92,12 @@ props:
   class: 'px-4'
   collapsible: false
   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: 'Colors'
+      icon: 'i-heroicons-swatch'
+      content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
     - label: 'Components'
       icon: 'i-heroicons-cube-transparent'
       content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
@@ -122,12 +122,12 @@ props:
   class: 'px-4'
   disabled: true
   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: 'Colors'
+      icon: 'i-heroicons-swatch'
+      content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
       disabled: true
     - label: 'Components'
       icon: 'i-heroicons-cube-transparent'
@@ -153,13 +153,13 @@ props:
   class: 'px-4'
   trailingIcon: 'i-heroicons-plus'
   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.'
       trailingIcon: 'i-heroicons-arrow-down'
+    - label: 'Colors'
+      icon: 'i-heroicons-swatch'
+      content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
     - label: 'Components'
       icon: 'i-heroicons-cube-transparent'
       content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
@@ -188,6 +188,22 @@ props:
 You can also pass the `value` of one of the items if provided.
 ::
 
+### With body slot
+
+Use the `#body` slot to customize the body of each item.
+
+::component-example
+---
+name: 'accordion-body-slot-example'
+props:
+  class: 'px-4'
+---
+::
+
+::note
+The `#body` slot includes some pre-defined styles, use the [`#content` slot](#with-content-slot) if you want to start from scratch.
+::
+
 ### With content slot
 
 Use the `#content` slot to customize the content of each item.
@@ -202,7 +218,12 @@ props:
 
 ### With custom slot
 
-Use the `slot` property instead of the `#content` slot to customize a specific item.
+Use the `slot` property to customize a specific item.
+
+You will have access to the following slots:
+
+- `#{{ item.slot }}`{lang="ts-type"}
+- `#{{ item.slot }}-body`{lang="ts-type"}
 
 ::component-example
 ---

docs/content/3.components/tabs.md

@@ -209,7 +209,7 @@ Use the `#content` slot to customize the content of each item.
 
 ### With custom slot
 
-Use the `slot` property instead of the `#content` slot to customize a specific item.
+Use the `slot` property to customize a specific item.
 
 :component-example{name="tabs-custom-slot-example"}