frappe-ui 1.0.0-beta.7 → 1.0.0-beta.70

package/experimental/Accordion/Accordion.api.md

@@ -0,0 +1,95 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const propsData = [
+  {
+    name: 'as',
+    description: 'Element/component used to render the accordion container.',
+    required: false,
+    type: 'string'
+  },
+  {
+    name: 'headingTag',
+    description: 'Heading tag each trigger is wrapped in. The WAI-ARIA accordion pattern\nrequires triggers to sit inside a heading so assistive tech can navigate\nby heading; pick the level that fits the surrounding outline.',
+    required: false,
+    type: '"h1" | "h2" | "h3" | "h4" | "h5" | "h6"',
+    default: '"h3"'
+  },
+  {
+    name: 'items',
+    description: 'List of items to render.',
+    required: true,
+    type: 'AccordionItem[]'
+  },
+  {
+    name: 'type',
+    description: 'Whether one (`single`) or several (`multiple`) items can be open at the\nsame time. Determines the shape of `modelValue` / `defaultValue`:\na `string` for `single`, a `string[]` for `multiple`.',
+    required: false,
+    type: '"single" | "multiple"',
+    default: '"single"'
+  },
+  {
+    name: 'collapsible',
+    description: 'When `type` is `single`, allows the open item to be collapsed again by\nclicking its trigger. Ignored for `multiple`.',
+    required: false,
+    type: 'boolean',
+    default: 'true'
+  },
+  {
+    name: 'modelValue',
+    description: 'Currently open item value(s). Use with `v-model`.',
+    required: false,
+    type: 'string | string[]'
+  },
+  {
+    name: 'defaultValue',
+    description: 'Open item value(s) for uncontrolled usage.',
+    required: false,
+    type: 'string | string[]'
+  },
+  {
+    name: 'disabled',
+    description: 'Disables the whole accordion.',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'item-label',
+    description: 'Custom renderer for an item\'s trigger label. Receives `{ item, index }`.',
+    type: '{ item: AccordionItem; index: number; }'
+  },
+  {
+    name: 'item-suffix',
+    description: 'Trailing, non-interactive header content (e.g. a `Badge` or count) shown\nbefore the chevron. Receives `{ item, index }`.',
+    type: '{ item: AccordionItem; index: number; }'
+  },
+  {
+    name: 'item-content',
+    description: 'Custom renderer for an item\'s panel. Receives `{ item, index }`.',
+    type: '{ item: AccordionItem; index: number; }'
+  }
+]
+
+  const emitsData = [
+  {
+    name: 'update:modelValue',
+    description: 'Fired when the model value changes.',
+    type: '[value: string | string[] | undefined]'
+  }
+]
+</script>
+
+## API Reference
+
+<PropsTable name="Accordion" :data="propsData"/>
+
+<SlotsTable :data="slotsData"/>
+
+<EmitsTable :data="emitsData"/>

package/experimental/Accordion/Accordion.cy.ts

@@ -0,0 +1,199 @@
+import Accordion from './Accordion.vue'
+import { defineComponent, h, ref } from 'vue'
+
+const items = [
+  { value: 'one', title: 'First', content: 'First content' },
+  { value: 'two', title: 'Second', content: 'Second content' },
+  { value: 'three', title: 'Third', content: 'Third content', disabled: true },
+]
+
+describe('Accordion', () => {
+  it('renders a trigger per item', () => {
+    cy.mount(Accordion, { props: { items } })
+
+    cy.get('[data-slot=trigger]').should('have.length', items.length)
+    cy.get('[data-slot=trigger]').first().should('contain.text', 'First')
+  })
+
+  it('opens the item named by default-value', () => {
+    cy.mount(Accordion, { props: { items, defaultValue: 'two' } })
+
+    cy.get('[data-slot=trigger]')
+      .eq(1)
+      .should('have.attr', 'aria-expanded', 'true')
+    cy.contains('Second content').should('be.visible')
+    // reka unmounts collapsed panel content by default.
+    cy.contains('First content').should('not.exist')
+  })
+
+  it('exposes only the open panel to assistive tech', () => {
+    cy.mount(Accordion, { props: { items, defaultValue: 'one' } })
+
+    // reka drives the region semantics: open panel is exposed, collapsed
+    // panels carry the `hidden` attribute (skipped by AT and tabbing).
+    cy.get('[data-slot=content]').eq(0).should('not.have.attr', 'hidden')
+    cy.get('[data-slot=content]').eq(1).should('have.attr', 'hidden')
+
+    cy.get('[data-slot=trigger]').eq(0).should('have.attr', 'aria-controls')
+    cy.get('[data-slot=content]').eq(0).should('have.attr', 'role', 'region')
+  })
+
+  it('renders the item-suffix slot before the chevron', () => {
+    cy.mount(Accordion, {
+      props: { items },
+      slots: {
+        'item-suffix': ({ item }) =>
+          h('span', { 'data-cy': `suffix-${item.value}` }, 'badge'),
+      },
+    })
+
+    cy.get('[data-cy=suffix-one]').should('exist')
+    // Lives inside the trigger, ahead of the chevron.
+    cy.get('[data-slot=trigger]').first().find('[data-cy=suffix-one]')
+  })
+
+  it('wraps each trigger in the configured heading tag', () => {
+    cy.mount(Accordion, { props: { items, headingTag: 'h2' } })
+
+    cy.get('h2').should('have.length', items.length)
+    cy.get('h2').first().find('[data-slot=trigger]').should('exist')
+  })
+
+  it('keeps only one item open in single mode', () => {
+    cy.mount(Accordion, { props: { items, defaultValue: 'one' } })
+
+    cy.get('[data-slot=trigger]').eq(1).click()
+
+    cy.get('[data-slot=trigger]')
+      .eq(0)
+      .should('have.attr', 'aria-expanded', 'false')
+    cy.get('[data-slot=trigger]')
+      .eq(1)
+      .should('have.attr', 'aria-expanded', 'true')
+  })
+
+  it('collapses the open item when collapsible (default)', () => {
+    cy.mount(Accordion, { props: { items, defaultValue: 'one' } })
+
+    cy.get('[data-slot=trigger]')
+      .eq(0)
+      .should('have.attr', 'aria-expanded', 'true')
+    cy.get('[data-slot=trigger]').eq(0).click()
+    cy.get('[data-slot=trigger]')
+      .eq(0)
+      .should('have.attr', 'aria-expanded', 'false')
+  })
+
+  it('allows several open items in multiple mode', () => {
+    cy.mount(Accordion, {
+      props: { items, type: 'multiple', defaultValue: ['one'] },
+    })
+
+    cy.get('[data-slot=trigger]').eq(1).click()
+
+    cy.get('[data-slot=trigger]')
+      .eq(0)
+      .should('have.attr', 'aria-expanded', 'true')
+    cy.get('[data-slot=trigger]')
+      .eq(1)
+      .should('have.attr', 'aria-expanded', 'true')
+  })
+
+  it('does not open a disabled item', () => {
+    cy.mount(Accordion, { props: { items } })
+
+    cy.get('[data-slot=trigger]').eq(2).should('be.disabled')
+    cy.get('[data-slot=trigger]').eq(2).click({ force: true })
+    cy.get('[data-slot=trigger]')
+      .eq(2)
+      .should('have.attr', 'aria-expanded', 'false')
+  })
+
+  it('renders the item-content slot', () => {
+    cy.mount(Accordion, {
+      props: { items, defaultValue: 'one' },
+      slots: {
+        'item-content': ({ item }) =>
+          h('div', { 'data-cy': 'slot' }, `slot:${item.value}`),
+      },
+    })
+
+    cy.contains('[data-cy=slot]', 'slot:one').should('be.visible')
+  })
+
+  it('keeps the open panel with its item when items are reordered', () => {
+    // Item identity is `value`, never position — so prepending an item must
+    // leave the same panel open rather than shifting it to a neighbour.
+    const Harness = defineComponent({
+      setup() {
+        const list = ref([...items])
+        return () =>
+          h('div', [
+            h(
+              'button',
+              {
+                'data-cy': 'prepend',
+                onClick: () => {
+                  list.value = [
+                    {
+                      value: 'zero',
+                      title: 'Zeroth',
+                      content: 'Zeroth content',
+                    },
+                    ...list.value,
+                  ]
+                },
+              },
+              'prepend',
+            ),
+            h(Accordion, { items: list.value, defaultValue: 'two' }),
+          ])
+      },
+    })
+
+    cy.mount(Harness)
+
+    cy.contains('Second content').should('be.visible')
+    cy.get('[data-cy=prepend]').click()
+
+    // 'two' is now at index 2; it stays open, and the item that took its old
+    // index stays closed.
+    cy.get('[data-slot=trigger]').should('have.length', 4)
+    cy.get('[data-slot=trigger]')
+      .eq(2)
+      .should('have.attr', 'aria-expanded', 'true')
+    cy.get('[data-slot=trigger]')
+      .eq(1)
+      .should('have.attr', 'aria-expanded', 'false')
+    cy.contains('Second content').should('be.visible')
+  })
+
+  it('supports a controlled v-model round-trip', () => {
+    const Harness = defineComponent({
+      setup() {
+        const value = ref<string>('one')
+        return () =>
+          h(Accordion, {
+            items,
+            modelValue: value.value,
+            'onUpdate:modelValue': (next: string | string[]) => {
+              value.value = next as string
+            },
+          })
+      },
+    })
+
+    cy.mount(Harness)
+
+    cy.get('[data-slot=trigger]')
+      .eq(0)
+      .should('have.attr', 'aria-expanded', 'true')
+    cy.get('[data-slot=trigger]').eq(1).click()
+    cy.get('[data-slot=trigger]')
+      .eq(0)
+      .should('have.attr', 'aria-expanded', 'false')
+    cy.get('[data-slot=trigger]')
+      .eq(1)
+      .should('have.attr', 'aria-expanded', 'true')
+  })
+})

package/experimental/Accordion/Accordion.md

@@ -0,0 +1,46 @@
+# Accordion
+
+Stacks sections of content behind labelled headers that expand and collapse.
+Useful for FAQs, settings groups, and anywhere vertical space is at a premium.
+
+> **Experimental** — `Accordion` ships from
+> [`frappe-ui/experimental`](/docs/experimental) while its API settles, so it is
+> exempt from the usual deprecation policy and can change shape or disappear in
+> any release.
+
+```ts
+import { Accordion } from 'frappe-ui/experimental'
+import type { AccordionItem, AccordionProps } from 'frappe-ui/experimental'
+```
+
+Each item needs a `value` — it is the item's identity and the key `modelValue` /
+`defaultValue` refer to, so it must stay stable as `items` is reordered or
+filtered.
+
+## Default
+
+<ComponentPreview name="Accordion-Default" />
+
+## Multiple
+
+<ComponentPreview name="Accordion-Multiple" />
+
+## Controlled
+
+Bind `v-model` to own the open state in the parent — external controls can drive
+it, and you can react to every change.
+
+<ComponentPreview name="Accordion-Controlled" />
+
+## Icons
+
+<ComponentPreview name="Accordion-Icons" />
+
+## Header suffix
+
+Use the `#item-suffix` slot for trailing, non-interactive header content such as
+a count or `Badge`.
+
+<ComponentPreview name="Accordion-Suffix" />
+
+<!-- @include: ./Accordion.api.md -->

package/experimental/Accordion/Accordion.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+} from 'reka-ui'
+import type {
+  AccordionItem as AccordionItemType,
+  AccordionProps,
+} from './types'
+
+const props = withDefaults(defineProps<AccordionProps>(), {
+  type: 'single',
+  collapsible: true,
+  disabled: false,
+  headingTag: 'h3',
+})
+
+// Bound when the consumer uses `v-model`; otherwise reka falls back to
+// `defaultValue` and manages the open state itself.
+const model = defineModel<string | string[]>()
+
+const dir = computed<'rtl' | 'ltr'>(() =>
+  typeof document !== 'undefined' && document.documentElement.dir === 'rtl'
+    ? 'rtl'
+    : 'ltr',
+)
+
+// reka treats `collapsible` as meaningful only for single-select accordions.
+const collapsible = computed(() =>
+  props.type === 'single' ? props.collapsible : undefined,
+)
+
+defineSlots<{
+  /** Custom renderer for an item's trigger label. Receives `{ item, index }`. */
+  'item-label'?: (props: { item: AccordionItemType; index: number }) => any
+
+  /**
+   * Trailing, non-interactive header content (e.g. a `Badge` or count) shown
+   * before the chevron. Receives `{ item, index }`.
+   */
+  'item-suffix'?: (props: { item: AccordionItemType; index: number }) => any
+
+  /** Custom renderer for an item's panel. Receives `{ item, index }`. */
+  'item-content'?: (props: { item: AccordionItemType; index: number }) => any
+}>()
+</script>
+
+<template>
+  <AccordionRoot
+    :as="props.as"
+    :type="props.type"
+    :collapsible="collapsible"
+    :disabled="props.disabled"
+    :dir="dir"
+    :default-value="props.defaultValue"
+    v-model="model"
+    class="w-full divide-y divide-outline-gray-1"
+    data-slot="root"
+  >
+    <AccordionItem
+      v-for="(item, index) in props.items"
+      :key="item.value"
+      :value="item.value"
+      :disabled="item.disabled"
+      data-slot="item"
+    >
+      <AccordionHeader :as="props.headingTag" class="m-0 flex">
+        <AccordionTrigger
+          class="group flex flex-1 select-none items-center gap-2 rounded-4 px-2 py-3 text-left text-base font-medium text-ink-gray-8 outline-none transition-colors duration-150 hover:text-ink-gray-9 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-outline-gray-3 disabled:cursor-not-allowed disabled:text-ink-gray-4 disabled:hover:text-ink-gray-4"
+          data-slot="trigger"
+        >
+          <span class="flex min-w-0 flex-1 items-center gap-2">
+            <span
+              v-if="
+                item.icon &&
+                typeof item.icon === 'string' &&
+                item.icon.startsWith('lucide-')
+              "
+              class="size-4 shrink-0 text-ink-gray-6"
+              :class="item.icon"
+              aria-hidden="true"
+            />
+            <component
+              v-else-if="item.icon"
+              :is="item.icon"
+              class="size-4 shrink-0 text-ink-gray-6"
+            />
+            <span class="truncate">
+              <slot name="item-label" v-bind="{ item, index }">
+                {{ item.title }}
+              </slot>
+            </span>
+          </span>
+
+          <slot name="item-suffix" v-bind="{ item, index }" />
+
+          <span
+            class="lucide-chevron-down size-4 shrink-0 text-ink-gray-5 transition-[transform,color] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:text-ink-gray-8 group-data-[state=open]:rotate-180 group-disabled:text-ink-gray-4 motion-reduce:transition-none"
+            aria-hidden="true"
+          />
+        </AccordionTrigger>
+      </AccordionHeader>
+
+      <AccordionContent class="accordion-content" data-slot="content">
+        <div class="px-2 pb-3 text-p-base text-ink-gray-6">
+          <slot name="item-content" v-bind="{ item, index }">
+            {{ item.content }}
+          </slot>
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
+</template>
+
+<style scoped>
+/*
+ * reka measures the panel's natural height into `--reka-accordion-content-height`,
+ * so we animate height to an exact pixel target — no JS, no magic numbers. A
+ * strong custom ease-out (Emil Kowalski) kept at 200ms makes it feel fast and
+ * settled; a paired opacity fade keeps the reveal from popping.
+ */
+.accordion-content {
+  overflow: hidden;
+}
+
+.accordion-content[data-state='open'] {
+  animation: accordion-down 200ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.accordion-content[data-state='closed'] {
+  animation: accordion-up 200ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--reka-accordion-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--reka-accordion-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .accordion-content[data-state='open'],
+  .accordion-content[data-state='closed'] {
+    animation-duration: 1ms;
+  }
+}
+</style>

package/experimental/Accordion/index.ts

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion.vue'
+export type { AccordionItem, AccordionProps } from './types'

package/experimental/Accordion/stories/Controlled.vue

@@ -0,0 +1,48 @@
+<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>

package/experimental/Accordion/stories/Default.vue

@@ -0,0 +1,30 @@
+<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 support@example.com 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>

package/experimental/Accordion/stories/Icons.vue

@@ -0,0 +1,35 @@
+<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>

package/experimental/Accordion/stories/Multiple.vue

@@ -0,0 +1,30 @@
+<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>

package/experimental/Accordion/stories/Suffix.vue

@@ -0,0 +1,39 @@
+<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>