Accordion

<template>
  <UAccordion
    :items="[
      { label: 'What is Nuxt UI?', content: 'Nuxt UI is a component library built on Reka UI and Tailwind CSS.' },
      { label: 'How do I install it?', content: 'Install it using npm install @nuxt/ui' },
      { label: 'Is it accessible?', content: 'Yes, it is built with accessibility in mind.' }
    ]"
  />
</template>

interface AccordionItem {
  label?: string
  icon?: string // Iconify icon name
  trailingIcon?: string // Iconify icon name
  slot?: string
  content?: string
  value?: string // Unique value, defaults to index
  disabled?: boolean
  class?: any
  ui?: object
  [key: string]: any
}

<UAccordion
  type="multiple"
  :items="items"
/>

<UAccordion
  :items="items"
  default-value="0"
/>

<script setup>
const openItems = ref(['0', '1'])
</script>

<template>
  <UAccordion
    v-model="openItems"
    type="multiple"
    :items="items"
  />
</template>

<UAccordion
  :items="items"
  trailing-icon="i-heroicons-plus"
/>

<UAccordion :items="items">
  <template #leading="{ item, open }">
    <div :class="open ? 'rotate-90' : ''" class="transition-transform">
      →
    </div>
  </template>
</UAccordion>

<UAccordion :items="items">
  <template #default="{ item, open }">
    <span :class="{ 'font-bold': open }">{{ item.label }}</span>
  </template>
</UAccordion>

<UAccordion :items="items">
  <template #body="{ item }">
    <div class="text-muted">
      {{ item.content }}
    </div>
  </template>
</UAccordion>

<script setup>
const items = [
  { label: 'Custom Content', slot: 'custom' }
]
</script>

<template>
  <UAccordion :items="items">
    <template #custom="{ item }">
      <div>Custom content for {{ item.label }}</div>
    </template>
  </UAccordion>
</template>

<template>
  <UAccordion
    :items="[
      { label: 'Section 1', content: 'Content for section 1' },
      { label: 'Section 2', content: 'Content for section 2' },
      { label: 'Section 3', content: 'Content for section 3' }
    ]"
  />
</template>

<template>
  <UAccordion
    :items="[
      {
        label: 'Getting Started',
        icon: 'i-heroicons-rocket-launch',
        content: 'Learn how to get started'
      },
      {
        label: 'Documentation',
        icon: 'i-heroicons-book-open',
        content: 'Read the full documentation'
      }
    ]"
  />
</template>

<template>
  <UAccordion
    type="multiple"
    :items="items"
  />
</template>

<template>
  <UAccordion
    :items="[
      { label: 'Available', content: 'This is available' },
      { label: 'Disabled', content: 'This is disabled', disabled: true },
      { label: 'Also Available', content: 'This is available' }
    ]"
  />
</template>

<script setup>
const openValue = ref('1')

const items = [
  { value: '0', label: 'First', content: 'First content' },
  { value: '1', label: 'Second', content: 'Second content' },
  { value: '2', label: 'Third', content: 'Third content' }
]
</script>

<template>
  <div>
    <button @click="openValue = '0'">Open First</button>
    <button @click="openValue = '1'">Open Second</button>
    <button @click="openValue = '2'">Open Third</button>
    
    <UAccordion
      v-model="openValue"
      :items="items"
    />
  </div>
</template>

<template>
  <UAccordion
    :items="items"
    :ui="{
      item: 'border-l-2 border-primary pl-4',
      label: 'text-lg font-semibold',
      body: 'text-muted p-4'
    }"
  />
</template>

<script setup>
const faqs = [
  {
    label: 'What payment methods do you accept?',
    content: 'We accept all major credit cards, PayPal, and bank transfers.'
  },
  {
    label: 'How long does shipping take?',
    content: 'Standard shipping takes 5-7 business days. Express shipping is available.'
  },
  {
    label: 'What is your return policy?',
    content: 'We offer a 30-day money-back guarantee on all products.'
  },
  {
    label: 'Do you ship internationally?',
    content: 'Yes, we ship to over 100 countries worldwide.'
  }
]
</script>

<template>
  <div>
    <h2 class="text-2xl font-bold mb-4">Frequently Asked Questions</h2>
    <UAccordion :items="faqs" />
  </div>
</template>