feat(Accordion): new component

src/runtime/components/Accordion.vue

@@ -0,0 +1,106 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AccordionRootProps, AccordionRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/accordion'
+
+const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
+
+const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
+
+export interface AccordionItem {
+  slot?: string
+  icon?: string
+  label?: string
+  value?: string
+  content?: string
+  disabled?: boolean
+}
+
+export interface AccordionProps<T extends AccordionItem> extends Omit<AccordionRootProps, 'asChild' | 'dir'> {
+  items?: T[]
+  class?: any
+  ui?: Partial<typeof accordion.slots>
+}
+
+export interface AccordionEmits extends AccordionRootEmits {}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type AccordionSlots<T extends AccordionItem> = {
+  leading: SlotProps<T>
+  default: SlotProps<T>
+  trailing: SlotProps<T>
+  content: SlotProps<T>
+} & {
+  [key in T['slot'] as string]?: SlotProps<T>
+}
+</script>
+
+<script setup lang="ts" generic="T extends AccordionItem">
+import { computed } from 'vue'
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#app'
+
+const props = withDefaults(defineProps<AccordionProps<T>>(), {
+  type: 'single',
+  collapsible: true
+})
+const emits = defineEmits<AccordionEmits>()
+defineSlots<AccordionSlots<T>>()
+
+const appConfig = useAppConfig()
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'orientation', 'type'), emits)
+
+const ui = computed(() => tv({ extend: accordion, slots: props.ui })())
+</script>
+
+<template>
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
+    <AccordionItem v-for="(item, index) in items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.item()">
+      <AccordionHeader :class="ui.header()">
+        <AccordionTrigger :class="ui.trigger()">
+          <slot name="leading" :item="item" :index="index">
+            <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
+          </slot>
+
+          <span v-if="item.label || $slots.default" :class="ui.label()">
+            <slot :item="item" :index="index">{{ item.label }}</slot>
+          </span>
+
+          <slot name="trailing" :item="item" :index="index">
+            <UIcon :name="appConfig.ui.icons.chevronDown" :class="ui.trailingIcon()" />
+          </slot>
+        </AccordionTrigger>
+      </AccordionHeader>
+
+      <AccordionContent v-if="item.content || $slots.content || (item.slot && $slots[item.slot])" :class="ui.content()" :value="item.value || String(index)">
+        <slot :name="item.slot || 'content'" :item="item" :index="index">
+          {{ item.content }}
+        </slot>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
+</template>
+
+<style>
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+</style>

src/theme/accordion.ts

@@ -0,0 +1,12 @@
+export default {
+  slots: {
+    root: 'w-full',
+    item: 'border-b border-gray-200 dark:border-gray-800',
+    header: 'flex',
+    trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm hover:underline py-3.5 disabled:cursor-not-allowed disabled:opacity-75 disabled:hover:no-underline',
+    content: 'text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
+    leadingIcon: 'shrink-0 w-5 h-5',
+    trailingIcon: 'ms-auto w-5 h-5 group-data-[state=open]:rotate-180 transition-transform duration-200',
+    label: 'truncate'
+  }
+}

src/theme/index.ts

@@ -1,3 +1,4 @@
+export { default as accordion } from './accordion'
 export { default as avatar } from './avatar'
 export { default as badge } from './badge'
 export { default as button } from './button'