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

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.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/types.ts

@@ -0,0 +1,63 @@
+import type { Component } from 'vue'
+
+export interface AccordionItem {
+  /**
+   * Unique value identifying the item, and the open/closed key for
+   * `modelValue` / `defaultValue`. Must be stable across renders: it is the
+   * item's identity, so deriving it from position would move the open state
+   * to a different panel whenever `items` is reordered or filtered.
+   */
+  value: string
+
+  /** Text shown in the trigger header. */
+  title: string
+
+  /** Content shown when the item is expanded. */
+  content?: string
+
+  /**
+   * Optional icon shown before the title. Pass a `lucide-*` class string for
+   * the recommended class-based form, or a Vue component for custom icons.
+   */
+  icon?: string | Component
+
+  /** Disables this item, preventing it from being toggled. */
+  disabled?: boolean
+}
+
+export interface AccordionProps {
+  /** Element/component used to render the accordion container. */
+  as?: string
+
+  /**
+   * Heading tag each trigger is wrapped in. The WAI-ARIA accordion pattern
+   * requires triggers to sit inside a heading so assistive tech can navigate
+   * by heading; pick the level that fits the surrounding outline.
+   */
+  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+  /** List of items to render. */
+  items: AccordionItem[]
+
+  /**
+   * Whether one (`single`) or several (`multiple`) items can be open at the
+   * same time. Determines the shape of `modelValue` / `defaultValue`:
+   * a `string` for `single`, a `string[]` for `multiple`.
+   */
+  type?: 'single' | 'multiple'
+
+  /**
+   * When `type` is `single`, allows the open item to be collapsed again by
+   * clicking its trigger. Ignored for `multiple`.
+   */
+  collapsible?: boolean
+
+  /** Currently open item value(s). Use with `v-model`. */
+  modelValue?: string | string[]
+
+  /** Open item value(s) for uncontrolled usage. */
+  defaultValue?: string | string[]
+
+  /** Disables the whole accordion. */
+  disabled?: boolean
+}

package/experimental/Calendar/Calendar.api.md

@@ -0,0 +1,90 @@
+<!-- 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: 'events',
+    description: 'Events to render. Each needs an `id`, a title, and date/time fields.',
+    required: true,
+    type: 'CalendarEvent[]',
+    default: '[]'
+  },
+  {
+    name: 'config',
+    description: 'Behavior overrides, merged over the defaults.',
+    required: false,
+    type: 'Partial<CalendarConfig>',
+    default: '{}'
+  },
+  {
+    name: 'onClick',
+    description: 'Replaces the default single-click behavior (opening the event\npopover) with your own handler.',
+    required: false,
+    type: '((data: { e: MouseEvent; calendarEvent: CalendarEvent; }) => void)'
+  },
+  {
+    name: 'onDblClick',
+    description: 'Replaces the default double-click behavior (opening the edit\nmodal) with your own handler.',
+    required: false,
+    type: '((data: { e: MouseEvent | null; calendarEvent: CalendarEvent; }) => void)'
+  },
+  {
+    name: 'onCellClick',
+    description: 'Replaces the default cell-click behavior (opening the new-event\nmodal in edit mode) with your own handler.',
+    required: false,
+    type: '((data: CalendarCellClickData) => void)'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'header',
+    description: '',
+    type: '{ currentMonthYear: string; currentYear: number; currentMonth: number; enabledModes: CalendarActionO'
+  },
+  {
+    name: 'event-popover-content',
+    description: '',
+    type: '{ calendarEvent: { [x: string]: unknown; id?: string | number | undefined; name?: string | number | '
+  },
+  {
+    name: 'daily-header',
+    description: '',
+    type: '{ parseDateWithDay: any; currentDate: any; fullDay: any; }'
+  }
+]
+
+  const emitsData = [
+  {
+    name: 'delete',
+    description: '',
+    type: '[eventID: string | number | undefined]'
+  },
+  {
+    name: 'create',
+    description: '',
+    type: '[event: CalendarEvent]'
+  },
+  {
+    name: 'update',
+    description: '',
+    type: '[event: CalendarEvent]'
+  },
+  {
+    name: 'rangeChange',
+    description: '',
+    type: '[payload: { view: CalendarMode; startDate: string; endDate: string; }]'
+  }
+]
+</script>
+
+## API Reference
+
+<PropsTable name="Calendar" :data="propsData"/>
+
+<SlotsTable :data="slotsData"/>
+
+<EmitsTable :data="emitsData"/>

package/experimental/Calendar/Calendar.md

@@ -0,0 +1,160 @@
+# Calendar
+
+A date and event view for schedules, with Month, Week, and Day modes.
+
+> **Parked** — `Calendar` left the root export in `1.0.0` and now ships from
+> [`frappe-ui/experimental`](/docs/experimental) with its public API unchanged.
+> It stays there, exempt from the deprecation policy, until a redesigned
+> calendar family replaces it.
+
+```ts
+import { Calendar } from 'frappe-ui/experimental'
+import type { CalendarEvent, CalendarConfig } from 'frappe-ui/experimental'
+```
+
+## Default
+
+<ComponentPreview name="Calendar-Examples" csr="true" />
+
+## Custom Header
+
+Pass a `#header` slot to replace the default toolbar. The slot receives the
+current title (`currentMonthYear`), the active view (`activeView`), the
+enabled view options (`enabledModes`), and navigation functions
+(`increment`, `decrement`, `updateActiveView`, `setCalendarDate`,
+`onMonthYearChange`).
+
+<ComponentPreview name="Calendar-CustomHeader" csr="true" />
+
+## Events
+
+Each entry in `events` is a `CalendarEvent`:
+
+```ts
+{
+  id: 'EV-001',
+  title: 'Design review',
+  participant: 'Jane Doe',
+  venue: 'Room 1',
+  fromDate: '2026-08-10',
+  toDate: '2026-08-10',
+  fromTime: '10:00',
+  toTime: '11:00',
+  color: 'blue',       // amber | violet | pink | cyan | blue | orange | green
+  isFullDay: false,
+}
+```
+
+An event runs from `fromDate fromTime` to `toDate toTime`, dates inclusive.
+One whose `toDate` is later than its `fromDate` spans those days: the Month
+view draws it as a single bar across them, and the Week view puts it in the
+all-day row. A timed event that crosses midnight but is shorter than a day
+(an evening running late) stays in the time grid, cut at midnight into a
+piece per day. A timed event ending at `00:00` stops as that day begins, so
+it does not occupy it. Dragging a spanning event moves both ends together.
+
+`isFullDay` events ignore their times and cover `fromDate`..`toDate` whole.
+
+The calendar keeps an internal copy of `events` and refreshes it when the
+prop changes. Edits made inside the calendar (create, drag, resize, delete)
+mutate the copy and come back through the `create`, `update`, and `delete`
+emits — persist them and refresh your source of truth from there.
+
+`CalendarColorMap` exports the color palette (`amber`, `violet`, `pink`,
+`cyan`, `blue`, `orange`, `green`) with the CSS variables used per state, for
+building matching UI such as a color picker.
+
+## Month view
+
+The Month view is a strip of week rows covering the month in view, and it
+scrolls when the rows outgrow the calendar's height. The arrows, Today, and
+the month picker move the month and scroll the strip to their date.
+
+Each row is as tall as its busiest day needs. Multi-day events run as bars
+across the top of the row; single-day events sit beneath them in their
+cells with the title wrapping to a second line, so every event is shown —
+there is no "n more".
+
+Below the `sm` breakpoint the days stack instead: a row per day, a heading
+where each month begins, and a week strip above to keep your place. Clicking a date number in either layout
+opens that day in the Day view.
+
+`rangeChange` reports the strip's full extent for the Month view — the
+padding days of the first and last weeks included — so a data source that
+fetches by range has events for every cell.
+
+## Config
+
+The `config` prop takes a partial `CalendarConfig`; unset keys use these
+defaults:
+
+```ts
+{
+  defaultMode: 'Month',   // 'Day' | 'Week' | 'Month'
+  disableModes: [],       // views removed from the view switcher
+  isEditMode: false,      // create / drag / resize / delete
+  enableShortcuts: true,  // keyboard shortcuts (below)
+  scrollToHour: 15,       // hour Week and Day views scroll to
+  hourHeight: 50,         // pixel height of one hour row
+  timeFormat: '12h',      // '12h' | '24h'
+  weekends: ['sunday'],   // days shaded as weekend
+  eventIcons: {},         // icons keyed by an event's `type`
+  showIcon: true,         // show the eventIcons icon on cards
+  noBorder: false,        // remove the outer grid border
+}
+```
+
+`eventIcons` values are Vue components.
+
+## Keyboard shortcuts
+
+With `enableShortcuts` on: `m` / `w` / `d` switch views, `t` jumps to today,
+`←` / `→` navigate, and `Delete` removes the event whose popover is open
+(edit mode only).
+
+They stay out of the way of whatever is on top: nothing fires while a field has
+focus, or while a dialog, popover, menu or select is open anywhere on the page.
+
+## Click handling
+
+By default, a single click on an event opens its detail popover and a double
+click opens the edit modal (edit mode only). Clicking an empty cell opens the
+new-event modal in edit mode. Each behavior is replaceable with the
+`onClick`, `onDblClick`, and `onCellClick` callback props — passing one turns
+the default off for that interaction.
+
+The popover's content is replaceable with the `#event-popover-content` slot,
+which receives `{ calendarEvent, date, isEditMode, close }`.
+
+`CalendarActiveEvent` exports the ref holding the id of the event whose
+popover is open. Set it from outside to highlight an event, or clear it with
+an empty string. The ref is module-level: every `<Calendar>` on the page
+shares it.
+
+## Template ref
+
+A template ref on `<Calendar>` exposes the calendar's state and navigation:
+
+```vue
+<Calendar ref="calendar" :events="events" />
+```
+
+```ts
+const calendar = useTemplateRef('calendar')
+
+calendar.value.setCalendarDate('2026-08-10') // jump to a date (today if omitted)
+calendar.value.updateActiveView('Week') // switch the view
+calendar.value.activeView // the visible view
+calendar.value.increment() // move forward one day / week / month
+calendar.value.decrement() // move back one day / week / month
+calendar.value.reloadEvents() // re-sync the internal copy of `events`
+calendar.value.currentMonthYear // formatted title, e.g. "August 2026"
+calendar.value.currentYear // 2026
+calendar.value.currentMonth // 7 (0 = January)
+calendar.value.currentDay // day of month anchoring the view
+calendar.value.enabledModes // view options not disabled via config (fixed at mount)
+calendar.value.selectedMonthDate // the month picker's date, `YYYY-MM-DD`
+calendar.value.onMonthYearChange // jump to a date and sync the month picker
+```
+
+<!-- @include: ./Calendar.api.md -->