Accordion ​

<script setup lang="ts">
import { Accordion } from '..'

const items = [
  {
    value: 'shipping',
    title: 'How long does shipping take?',
    content:
      'Orders are processed within 1–2 business days and typically arrive within 5–7 business days.',
  },
  {
    value: 'returns',
    title: 'What is your return policy?',
    content:
      'You can return any unused item within 30 days of delivery for a full refund.',
  },
  {
    value: 'support',
    title: 'How do I contact support?',
    content:
      'Reach out to our team any time at [email protected] and we will get back to you within a day.',
  },
]
</script>

<template>
  <div class="w-full max-w-lg">
    <Accordion :items="items" default-value="shipping" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '..'

const open = ref<string[]>(['general', 'billing'])

const items = [
  {
    value: 'general',
    title: 'General',
    content: 'Account-wide preferences such as language, timezone, and theme.',
  },
  {
    value: 'billing',
    title: 'Billing',
    content: 'Manage your plan, payment methods, and download past invoices.',
  },
  {
    value: 'notifications',
    title: 'Notifications',
    content: 'Choose which email and in-app notifications you want to receive.',
  },
]
</script>

<template>
  <div class="w-full max-w-lg">
    <Accordion type="multiple" v-model="open" :items="items" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Button } from 'frappe-ui'
import { Accordion } from '..'

// "Controlled" means the parent owns the open state via v-model — the
// Accordion reflects `open`, and external controls can drive it too.
const items = [
  {
    value: 'overview',
    title: 'Overview',
    content: 'A short summary of the project.',
  },
  {
    value: 'specs',
    title: 'Specs',
    content: 'Detailed technical specifications.',
  },
  {
    value: 'pricing',
    title: 'Pricing',
    content: 'Plans, limits, and billing details.',
  },
]

const open = ref<string[]>(['overview'])

function expandAll() {
  open.value = items.map((item) => item.value)
}

function collapseAll() {
  open.value = []
}
</script>

<template>
  <div class="w-full max-w-lg space-y-3">
    <div class="flex items-center gap-2">
      <Button label="Expand all" @click="expandAll" />
      <Button label="Collapse all" @click="collapseAll" />
      <span class="ml-auto text-p-sm text-ink-gray-5">
        Open: {{ open.length ? open.join(', ') : 'none' }}
      </span>
    </div>
    <Accordion type="multiple" v-model="open" :items="items" />
  </div>
</template>

<script setup lang="ts">
import { Accordion } from '..'

const items = [
  {
    value: 'profile',
    title: 'Profile',
    icon: 'lucide-user',
    content: 'Update your name, avatar, and public profile details.',
  },
  {
    value: 'security',
    title: 'Security',
    icon: 'lucide-shield',
    content: 'Change your password and manage two-factor authentication.',
  },
  {
    value: 'archived',
    title: 'Archived (disabled)',
    icon: 'lucide-archive',
    content: 'This section is read-only.',
    disabled: true,
  },
]
</script>

<template>
  <div class="w-full max-w-lg">
    <Accordion :items="items">
      <template #item-content="{ item }">
        <p class="text-p-base text-ink-gray-6">{{ item.content }}</p>
      </template>
    </Accordion>
  </div>
</template>

<script setup lang="ts">
import { Badge } from 'frappe-ui'
import { Accordion } from '..'

const items = [
  { value: 'inbox', title: 'Inbox', content: 'Messages waiting for a reply.' },
  {
    value: 'drafts',
    title: 'Drafts',
    content: 'Unsent messages saved for later.',
  },
  {
    value: 'spam',
    title: 'Spam',
    content: 'Filtered messages we think are junk.',
  },
]

// Aligned to `items` by index — the slot exposes `{ item, index }`.
const badges = [
  { label: '12', theme: 'blue' },
  { label: '3', theme: 'gray' },
  { label: 'New', theme: 'red' },
] as const
</script>

<template>
  <div class="w-full max-w-lg">
    <Accordion :items="items" default-value="inbox">
      <template #item-suffix="{ index }">
        <Badge
          :label="badges[index].label"
          :theme="badges[index].theme"
          variant="subtle"
        />
      </template>
    </Accordion>
  </div>
</template>