+
+
+
diff --git a/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue b/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue
new file mode 100644
index 00000000..69a02c4d
--- /dev/null
+++ b/docs/app/components/content/examples/accordion/AccordionModelValueExample.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
diff --git a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
index ea1ff251..3a623322 100644
--- a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
+++ b/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)
})
diff --git a/docs/content/3.components/accordion.md b/docs/content/3.components/accordion.md
index a76cd5f8..dbb6e3a6 100644
--- a/docs/content/3.components/accordion.md
+++ b/docs/content/3.components/accordion.md
@@ -1,5 +1,5 @@
---
-description: Display togglable accordion panels.
+description: A stacked set of collapsible panels.
links:
- label: Accordion
icon: i-custom-radix-vue
@@ -11,8 +11,199 @@ links:
## Usage
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `trailingIcon?: string`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `content?: string`{lang="ts-type"}
+- `value?: string`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+
+::component-code
+---
+external:
+ - items
+hide:
+ - class
+props:
+ class: 'w-full 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: 'Components'
+ icon: 'i-heroicons-cube-transparent'
+ content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+---
+::
+
+### Multiple
+
+Set the `type` prop to `multiple` to allow multiple items to be active at the same time. Defaults to `single`.
+
+::component-code
+---
+ignore:
+ - type
+external:
+ - items
+hide:
+ - class
+props:
+ class: 'w-full 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: 'Components'
+ icon: 'i-heroicons-cube-transparent'
+ content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+---
+::
+
+### Collapsible
+
+When `type` is `single`, you can set the `collapsible` prop to `false` to prevent the active item from collapsing.
+
+::component-code
+---
+ignore:
+ - collapsible
+external:
+ - items
+hide:
+ - class
+props:
+ class: 'w-full 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: 'Components'
+ icon: 'i-heroicons-cube-transparent'
+ content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+---
+::
+
+### Disabled
+
+Use the `disabled` property to disable the Accordion.
+
+You can also disable a specific item by using the `disabled` property in the item object.
+
+::component-code
+---
+external:
+ - items
+hide:
+ - class
+props:
+ class: 'w-full 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.'
+ disabled: true
+ - label: 'Components'
+ icon: 'i-heroicons-cube-transparent'
+ content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+---
+::
+
+### Icon
+
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`.
+
+You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
+
+::component-code
+---
+external:
+ - items
+hide:
+ - class
+props:
+ class: 'w-full 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: 'Components'
+ icon: 'i-heroicons-cube-transparent'
+ content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+---
+::
+
+::tip
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
+::
+
## Examples
+### Control active item(s)
+
+You can control the active item(s) by using the `default-value` prop or the `v-model` directive with the index of the item.
+
+::component-example
+---
+name: 'accordion-model-value-example'
+props:
+ class: 'w-full px-4'
+---
+::
+
+::tip
+You can also pass the `value` of one of the items if provided.
+::
+
+### With content slot
+
+Use the `#content` slot to customize the content of each item.
+
+::component-example
+---
+name: 'accordion-content-slot-example'
+props:
+ class: 'w-full px-4'
+---
+::
+
+### With custom slot
+
+Use the `slot` property to customize a specific item.
+
+::component-example
+---
+name: 'accordion-custom-slot-example'
+props:
+ class: 'w-full px-4'
+---
+::
+
## API
### Props
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 51256396..54305d27 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -117,6 +117,7 @@ export default defineNuxtConfig({
hooks: {
'components:extend': (components) => {
const globals = components.filter(c => [
+ 'UAccordion',
'UAlert',
'UAvatar',
'UAvatarGroup',
diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index 9d68d9c7..590503e6 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -10,12 +10,14 @@ const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial> {
+export interface AccordionItem extends Pick {
label?: string
icon?: string
trailingIcon?: string
slot?: string
content?: string
+ /** A unique value for the accordion item. Defaults to the index. */
+ value?: string
}
export interface AccordionProps extends Pick {