frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/Dropdown/Dropdown.vue

@@ -20,7 +20,7 @@
         data-slot="content"
         :data-motion="contentMotion"
         :class="[
-          dropdownClasses.content,
+          menuClasses.content,
           {
             'origin-top-left': align === 'start',
             'origin-top-right': align === 'end',
@@ -30,12 +30,16 @@
         :side="side"
         :align="align"
         :side-offset="offset"
+        :style="{
+          width: matchTriggerWidth ? 'var(--reka-dropdown-menu-trigger-width)' : undefined,
+        }"
       >
-        <DropdownMenuList
+        <Menu
           :groups="groups"
           :portal-to="portalTo"
           :close="close"
           :slot-fns="slots"
+          :primitives="primitives"
         />
       </DropdownMenuContent>
     </DropdownMenuPortal>
@@ -46,14 +50,19 @@
 import { computed, useAttrs, useSlots } from 'vue'
 import {
   DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuPortal,
   DropdownMenuRoot,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from 'reka-ui'
 import { Button } from '../Button'
-import DropdownMenuList from './DropdownMenuList.vue'
+import Menu from '../Menu/Menu.vue'
 import type { DropdownProps, DropdownSlots } from './types'
-import { dropdownClasses, normalizeDropdownOptions } from './utils'
+import { menuClasses, normalizeMenuOptions } from '../Menu/utils'
 import { usePopoverMotion } from '../../composables/usePopoverMotion'
 
 defineOptions({
@@ -78,8 +87,17 @@ function close() {
   openModel.value = false
 }
 
+const primitives = {
+  Item: DropdownMenuItem,
+  Label: DropdownMenuLabel,
+  Portal: DropdownMenuPortal,
+  Sub: DropdownMenuSub,
+  SubContent: DropdownMenuSubContent,
+  SubTrigger: DropdownMenuSubTrigger,
+}
+
 const groups = computed(() => {
-  return normalizeDropdownOptions(props.options)
+  return normalizeMenuOptions(props.options)
 })
 
 const align = computed(() => {
@@ -100,47 +118,21 @@ defineSlots<DropdownSlots>()
 </script>
 
 <style scoped>
-@keyframes dropdown-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes dropdown-out {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-:global(.dropdown-content[data-motion='animated'][data-state='open']) {
-  animation: dropdown-in 100ms ease-out;
-}
-
-:global(.dropdown-content[data-motion='animated'][data-state='closed']) {
-  animation: dropdown-out 75ms ease-in;
-}
-
 /*
- * Keyboard opens skip the scale entrance, but a tiny opacity fade still
- * runs — it masks the 1-frame position-settle reka performs after mount.
- * ~80ms is below the perception threshold for motion but long enough to
- * hide the jump.
+ * Dropdown is the only menu with a keyboard-open path, so the `instant`
+ * motion lives here. Keyboard opens skip the scale entrance, but a tiny
+ * opacity fade still runs — it masks the 1-frame position-settle reka
+ * performs after mount. ~80ms is below the perception threshold for motion
+ * but long enough to hide the jump.
+ *
+ * The shared `animated` keyframes + `prefers-reduced-motion` reset live in
+ * Menu.vue (rendered by both Dropdown and ContextMenu).
  */
-:global(.dropdown-content[data-motion='instant'][data-state='open']) {
+:global(.menu-content[data-motion='instant'][data-state='open']) {
   animation: dropdown-instant-fade 80ms linear;
 }
 
-:global(.dropdown-content[data-motion='instant'][data-state='closed']) {
+:global(.menu-content[data-motion='instant'][data-state='closed']) {
   animation: none;
 }
 
@@ -152,10 +144,4 @@ defineSlots<DropdownSlots>()
     opacity: 1;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  :global(.dropdown-content) {
-    animation-duration: 0ms !important;
-  }
-}
 </style>

package/src/components/Dropdown/stories/{05_KebabMenu.vue → KebabMenu.vue}

@@ -52,7 +52,9 @@ function rowActions(task: Task): DropdownOptions {
 </script>
 
 <template>
-  <div class="w-80 divide-y divide-outline-gray-1 rounded-lg border border-outline-gray-1 bg-surface-white">
+  <div
+    class="w-80 divide-y divide-outline-gray-1 rounded-lg border border-outline-gray-1 bg-surface-base"
+  >
     <div
       v-for="task in tasks"
       :key="task.title"

package/src/components/Dropdown/stories/{06_UserMenu.vue → UserMenu.vue}

@@ -114,7 +114,7 @@ const userMenuItems = computed(() => [
           </svg>
           <div class="ml-2 min-w-0">
             <div
-              class="truncate text-base font-medium text-ink-gray-8 leading-none"
+              class="truncate text-base-medium text-ink-gray-8 leading-none"
             >
               Gameplan
             </div>

package/src/components/Dropdown/types.ts

@@ -1,162 +1,34 @@
-import type { Component, VNodeChild } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
 import type { ButtonProps } from '../Button'
+import type { MenuOptions, MenuSlotProps, MenuSlots } from '../Menu/types'
+
+export type {
+  MenuTheme as DropdownTheme,
+  MenuSlotFn as DropdownSlotFn,
+  MenuItemSlots as DropdownItemSlots,
+  MenuBaseOption as DropdownBaseOption,
+  MenuActionOption as DropdownActionOption,
+  MenuSwitchOption as DropdownSwitchOption,
+  MenuSubmenuOption as DropdownSubmenuOption,
+  MenuComponentOption as DropdownComponentOption,
+  MenuGroupOption as DropdownGroupOption,
+  MenuOption as DropdownOption,
+  MenuItem as DropdownItem,
+  MenuOptions as DropdownOptions,
+  MenuSlotProps as DropdownSlotProps,
+  MenuItemSlotProps as DropdownItemSlotProps,
+  MenuGroupSlotProps as DropdownGroupSlotProps,
+} from '../Menu/types'
 
-export type DropdownTheme = 'gray' | 'red'
 export type DropdownPlacement = 'left' | 'right' | 'center'
 export type DropdownSide = 'top' | 'right' | 'bottom' | 'left'
 export type DropdownAlign = 'start' | 'center' | 'end'
 
-export type DropdownSlotFn<TProps> = (props: TProps) => VNodeChild
-
-export interface DropdownItemSlots<TProps> {
-  /** Replaces the prefix region of the standard row shell. */
-  prefix?: DropdownSlotFn<TProps>
-
-  /** Replaces the label region of the standard row shell. */
-  label?: DropdownSlotFn<TProps>
-
-  /** Replaces the suffix region of the standard row shell. */
-  suffix?: DropdownSlotFn<TProps>
-
-  /** Replaces the entire row; mutually exclusive with `prefix` / `label` / `suffix`. */
-  item?: DropdownSlotFn<TProps>
-}
-
-export interface DropdownBaseOption {
-  /** Leading icon shown for the item row. */
-  icon?: string | Component | null
-
-  /** Secondary text shown below the label. */
-  description?: string
-
-  /** Marks the item as currently selected. */
-  selected?: boolean
-
-  /** Disables interaction for the item. */
-  disabled?: boolean
-
-  /** Visual theme applied to the item row. */
-  theme?: DropdownTheme
-
-  /** Named slot suffix used to resolve `item-*` slots dynamically. */
-  slot?: string
-
-  /** Per-item inline slot implementations for the row shell. */
-  slots?: DropdownItemSlots<DropdownItemSlotProps>
-
-  /** Condition used to omit an item from the final menu. */
-  condition?: () => boolean
-
-  [key: string]: any
-}
-
-export interface DropdownActionOption extends DropdownBaseOption {
-  /** Primary label shown for the action item. */
-  label: string
-
-  /** Router destination to navigate to when the item is clicked. */
-  route?: RouteLocationRaw
-
-  /** Click handler invoked when the action item is selected. */
-  onClick?: (event: PointerEvent) => void
-
-  submenu?: never
-  switch?: never
-  switchValue?: never
-  component?: never
-}
-
-export interface DropdownSwitchOption extends DropdownBaseOption {
-  /** Primary label shown for the switch item. */
-  label: string
-
-  /** Renders the item with a switch control. */
-  switch: true
-
-  /** Current boolean value for the switch item. */
-  switchValue?: boolean
-
-  /** Change handler invoked with the next switch value. */
-  onClick?: (value: boolean) => void
-
-  route?: never
-  submenu?: never
-  component?: never
-}
-
-export interface DropdownSubmenuOption extends DropdownBaseOption {
-  /** Primary label shown for the submenu trigger. */
-  label: string
-
-  /** Nested menu items rendered in the submenu. */
-  submenu: DropdownOptions
-
-  route?: never
-  onClick?: never
-  switch?: never
-  switchValue?: never
-  component?: never
-}
-
-export interface DropdownComponentOption extends DropdownBaseOption {
-  /**
-   * Custom component rendered in place of the standard menu row.
-   * @deprecated use `slots.item` for the full-row escape hatch instead
-   */
-  component: any
-
-  /** Optional label used by custom renderers. */
-  label?: string
-
-  route?: never
-  submenu?: never
-  switch?: never
-  switchValue?: never
-}
-
-export interface DropdownGroupOption {
-  /** Stable key for the group wrapper. */
-  key?: string | number
-
-  /** Label rendered above the grouped items. */
-  group: string
-
-  /**
-   * Items rendered inside the group. Optional in the type so the
-   * deprecated `items` alias still typechecks; provide one of
-   * `options` or `items`.
-   */
-  options?: DropdownOption[]
-
-  /**
-   * @deprecated use `options`. Accepted only as a back-compat alias for
-   * Dropdown's previous `{ group, items }` shape.
-   */
-  items?: DropdownOption[]
-
-  /** Hides the group heading while preserving grouping. */
-  hideLabel?: boolean
-
-  /** Theme inherited by items in the group. */
-  theme?: DropdownTheme
-}
-
-export type DropdownOption =
-  | DropdownActionOption
-  | DropdownSwitchOption
-  | DropdownSubmenuOption
-  | DropdownComponentOption
-
-export type DropdownItem = DropdownOption | DropdownGroupOption
-export type DropdownOptions = Array<DropdownItem>
-
 export interface DropdownProps {
   /** Button configuration (label, icon, size, variant, etc.) */
   button?: ButtonProps
 
   /** Array of dropdown options or grouped options. */
-  options?: DropdownOptions
+  options?: MenuOptions
 
   /** Controls the visibility of the dropdown. */
   open?: boolean
@@ -176,16 +48,14 @@ export interface DropdownProps {
   /** Offset in pixels between trigger and dropdown. */
   offset?: number
 
+  /** Whether the dropdown width should match the trigger element. */
+  matchTriggerWidth?: boolean
+
   /** Teleport target for dropdown portal content. */
   portalTo?: string | HTMLElement
 }
 
-export interface DropdownSlotProps {
-  /** Closes the dropdown menu. */
-  close: () => void
-}
-
-export interface DropdownTriggerSlotProps extends DropdownSlotProps {
+export interface DropdownTriggerSlotProps extends MenuSlotProps {
   /** Whether the dropdown menu is currently open. */
   open: boolean
 
@@ -195,45 +65,11 @@ export interface DropdownTriggerSlotProps extends DropdownSlotProps {
   [key: string]: any
 }
 
-export interface DropdownItemSlotProps extends DropdownSlotProps {
-  /** Item currently being rendered. */
-  item: DropdownOption
-
-  /** Whether the item is currently selected. */
-  selected: boolean
-}
-
-export interface DropdownGroupSlotProps {
-  /** Group currently being rendered. */
-  group: DropdownGroupOption
-}
-
-export interface DropdownSlots {
+export type DropdownSlots = Omit<MenuSlots, 'default' | 'trigger'> & {
   /** Alternate trigger renderer. */
   default?: (props: DropdownTriggerSlotProps) => any
-
   /** Explicit trigger slot renderer. */
   trigger?: (props: DropdownTriggerSlotProps) => any
-
-  /** Replaces the entire item row. */
-  item?: (props: DropdownItemSlotProps) => any
-
-  /** Content rendered before the standard item label. */
-  'item-prefix'?: (props: DropdownItemSlotProps) => any
-
-  /** Content rendered for the standard item label area. */
-  'item-label'?: (props: DropdownItemSlotProps) => any
-
-  /** Content rendered after the standard item label. */
-  'item-suffix'?: (props: DropdownItemSlotProps) => any
-
-  /** Custom renderer for group labels. */
-  'group-label'?: (props: DropdownGroupSlotProps) => any
-
-  /** Fallback content rendered when no items are available. */
-  empty?: () => any
-
-  [slotName: string]: ((props: any) => any) | undefined
 }
 
 export interface DropdownEmits {

package/src/components/Duration/Duration.api.md

@@ -0,0 +1,92 @@
+<!-- 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: 'modelValue',
+    description: 'The duration value in seconds (two-way via `v-model`).',
+    required: false,
+    type: 'number | null',
+    default: 'null'
+  },
+  {
+    name: 'placeholder',
+    description: 'Placeholder shown when the input is empty. Defaults to `1h 30m 45s`.',
+    required: false,
+    type: 'string',
+    default: '"1h 30m 45s"'
+  },
+  {
+    name: 'format',
+    description: 'How the saved value is rendered when not focused: a named preset\n(`short` | `long` | `colon`) or a token template (e.g. `h\'h\' m\'m\' s\'s\'`,\n`hh:mm:ss`). Defaults to `short`.',
+    required: false,
+    type: 'DurationFormat',
+    default: '"short"'
+  },
+  {
+    name: 'size',
+    description: 'Visual size of the input. Forwarded to the underlying `TextInput`.',
+    required: false,
+    type: 'InputSize'
+  },
+  {
+    name: 'variant',
+    description: 'Style variant of the input. Forwarded to the underlying `TextInput`.',
+    required: false,
+    type: 'InputVariant'
+  },
+  {
+    name: 'disabled',
+    description: 'Disables the input when true.',
+    required: false,
+    type: 'boolean'
+  },
+  {
+    name: 'label',
+    description: 'Label rendered above (or beside, for binary controls) the input.',
+    required: false,
+    type: 'string'
+  },
+  {
+    name: 'description',
+    description: 'Helper text rendered below the input.\nHidden when `error` is set.',
+    required: false,
+    type: 'string'
+  },
+  {
+    name: 'error',
+    description: 'Error message rendered below the input. When set, the control receives\n`aria-invalid="true"` and `data-state="invalid"`. May be either a string\nor an `Error` object whose `messages?: string[]` is rendered as stacked\nlines (with `Error.message` as the fallback).',
+    required: false,
+    type: 'string | FrappeUIError'
+  },
+  {
+    name: 'required',
+    description: 'Marks the field as required. Renders an asterisk next to the label and\nforwards `required` / `aria-required` to the underlying control.',
+    required: false,
+    type: 'boolean'
+  },
+  {
+    name: 'id',
+    description: 'HTML id of the underlying control. Auto-generated via `useId()` if omitted.',
+    required: false,
+    type: 'string'
+  }
+]
+
+  const emitsData = [
+  {
+    name: 'update:modelValue',
+    description: 'Fired when the model value changes.',
+    type: '[value: number | null]'
+  }
+]
+</script>
+## API Reference
+
+<PropsTable name="Duration" :data="propsData"/> 
+
+<EmitsTable :data="emitsData"/> 
+

package/src/components/Duration/Duration.cy.ts

@@ -0,0 +1,183 @@
+import Duration from './Duration.vue'
+import { formatDuration, parseDuration } from './duration'
+
+describe('Duration', () => {
+  it('renders a text input', () => {
+    cy.mount(Duration)
+    cy.get('input').should('exist')
+  })
+
+  it('displays the model value formatted (short by default)', () => {
+    cy.mount(Duration, { props: { modelValue: 5445 } })
+    cy.get('input').should('have.value', '1h 30m 45s')
+  })
+
+  it('renders the long and colon presets', () => {
+    cy.mount(Duration, { props: { modelValue: 5445, format: 'long' } })
+    cy.get('input').should('have.value', '1 hour 30 minutes 45 seconds')
+
+    cy.mount(Duration, { props: { modelValue: 5445, format: 'colon' } })
+    cy.get('input').should('have.value', '1:30:45')
+  })
+
+  it('renders a custom token template format', () => {
+    cy.mount(Duration, { props: { modelValue: 7323, format: 'hh:mm:ss' } })
+    cy.get('input').should('have.value', '02:02:03')
+  })
+
+  it('edits in canonical short notation regardless of display format', () => {
+    cy.mount(Duration, { props: { modelValue: 7323, format: 'hh:mm:ss' } })
+    cy.get('input').should('have.value', '02:02:03')
+    cy.get('input').focus().should('have.value', '2h 2m 3s')
+  })
+
+  it('commits a parsed value on blur', () => {
+    cy.mount(Duration, {
+      props: { 'onUpdate:modelValue': cy.spy().as('onUpdate') },
+    })
+    cy.get('input').type('1h 30m').blur()
+    cy.get('@onUpdate').should('be.calledWith', 5400)
+    cy.get('input').should('have.value', '1h 30m')
+  })
+
+  it('commits on Enter', () => {
+    cy.mount(Duration, {
+      props: { 'onUpdate:modelValue': cy.spy().as('onUpdate') },
+    })
+    cy.get('input').type('90s{enter}')
+    cy.get('@onUpdate').should('be.calledWith', 90)
+  })
+
+  it('reverts to the saved value on Escape without committing', () => {
+    cy.mount(Duration, {
+      props: {
+        modelValue: 60,
+        'onUpdate:modelValue': cy.spy().as('onUpdate'),
+      },
+    })
+    cy.get('input').focus().clear().type('5h{esc}')
+    cy.get('@onUpdate').should('not.be.called')
+    cy.get('input').should('have.value', '1m')
+  })
+
+  it('shows an internal error for invalid input and does not commit', () => {
+    cy.mount(Duration, {
+      props: { 'onUpdate:modelValue': cy.spy().as('onUpdate') },
+    })
+    cy.get('input').type('not a duration').blur()
+    cy.get('@onUpdate').should('not.be.called')
+    cy.get('input').should('have.attr', 'aria-invalid', 'true')
+    cy.contains('Invalid format').should('exist')
+  })
+
+  it('releases focus after an invalid commit but keeps the rejected text visible', () => {
+    cy.mount(Duration, {
+      props: { 'onUpdate:modelValue': cy.spy().as('onUpdate') },
+    })
+    cy.get('input').as('field').type('not a duration')
+    cy.get('@field').blur()
+    // Focus is not trapped — the user can click away.
+    cy.get('@field').should('have.value', 'not a duration').and('not.have.focus')
+    // Re-focusing and correcting still commits.
+    cy.get('@field').focus().clear().type('1h 30m').blur()
+    cy.get('@onUpdate').should('be.calledWith', 5400)
+  })
+
+  it('a caller-provided error takes precedence over the internal one', () => {
+    cy.mount(Duration, { props: { error: 'Field is required.' } })
+    cy.contains('Field is required.').should('exist')
+  })
+
+  it('clearing the field commits null', () => {
+    cy.mount(Duration, {
+      props: {
+        modelValue: 60,
+        'onUpdate:modelValue': cy.spy().as('onUpdate'),
+      },
+    })
+    cy.get('input').focus().clear().blur()
+    cy.get('@onUpdate').should('be.calledWith', null)
+  })
+
+  it('exposes the shared labeling contract', () => {
+    cy.mount(Duration, {
+      props: { label: 'Time spent', description: 'Logged hours', required: true },
+    })
+    cy.get('label').should('contain.text', 'Time spent')
+    cy.contains('Logged hours').should('exist')
+    cy.get('input').should('have.attr', 'aria-required', 'true')
+  })
+
+  it('forwards size and variant to the underlying input', () => {
+    cy.mount(Duration, { props: { size: 'lg', variant: 'outline' } })
+    cy.get('input').should('have.attr', 'data-size', 'lg')
+  })
+
+  it('disables the input', () => {
+    cy.mount(Duration, { props: { disabled: true } })
+    cy.get('input').should('be.disabled')
+  })
+})
+
+describe('parseDuration', () => {
+  it('parses unit syntax in any order', () => {
+    expect(parseDuration('1h 30m 45s')).to.equal(5445)
+    expect(parseDuration('45s 1h 30m')).to.equal(5445)
+    expect(parseDuration('1h30m45s')).to.equal(5445)
+  })
+
+  it('parses long-form units', () => {
+    expect(parseDuration('1 hour 30 minutes')).to.equal(5400)
+    expect(parseDuration('2hrs 15min')).to.equal(8100)
+  })
+
+  it('parses colon syntax', () => {
+    expect(parseDuration('1:30:45')).to.equal(5445)
+    expect(parseDuration('1:30')).to.equal(90)
+    expect(parseDuration(':45')).to.equal(45)
+    // Out-of-range groups overflow by design (stopwatch-style), not rejected.
+    expect(parseDuration('1:75')).to.equal(135)
+    expect(parseDuration('5:99')).to.equal(399)
+  })
+
+  it('treats a bare integer as seconds', () => {
+    expect(parseDuration('90')).to.equal(90)
+  })
+
+  it('rejects invalid input', () => {
+    expect(parseDuration('')).to.equal(null)
+    expect(parseDuration('abc')).to.equal(null)
+    expect(parseDuration('1h foo 2m')).to.equal(null)
+    expect(parseDuration('1h 2h')).to.equal(null) // duplicate unit
+  })
+})
+
+describe('formatDuration', () => {
+  it('formats each preset', () => {
+    expect(formatDuration(5445)).to.equal('1h 30m 45s')
+    expect(formatDuration(5445, 'long')).to.equal('1 hour 30 minutes 45 seconds')
+    expect(formatDuration(5445, 'colon')).to.equal('1:30:45')
+  })
+
+  it('the short preset omits zero parts', () => {
+    expect(formatDuration(90)).to.equal('1m 30s')
+    expect(formatDuration(3600)).to.equal('1h')
+  })
+
+  it('singularizes long-form units', () => {
+    expect(formatDuration(3661, 'long')).to.equal('1 hour 1 minute 1 second')
+  })
+
+  it('renders custom token templates literally', () => {
+    expect(formatDuration(5445, "h'h' m'm' s's'")).to.equal('1h 30m 45s')
+    expect(formatDuration(90, "h'h' m'm' s's'")).to.equal('0h 1m 30s')
+    expect(formatDuration(7323, 'hh:mm:ss')).to.equal('02:02:03')
+    expect(formatDuration(5445, "h 'hours'")).to.equal('1 hours')
+  })
+
+  it('renders zero and nullish values', () => {
+    expect(formatDuration(0)).to.equal('0s')
+    expect(formatDuration(null)).to.equal('')
+    expect(formatDuration(undefined)).to.equal('')
+  })
+})