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

package/src/components/Combobox/types.ts

@@ -159,7 +159,7 @@ export interface ComboboxProps extends InputLabelingProps {
   placement?: ComboboxPlacement
 }
 
-export interface ComboboxTriggerSlotProps {
+export interface ComboboxControlSlotProps {
   /** Whether the popover is open. */
   open: boolean
 
@@ -178,20 +178,10 @@ export interface ComboboxTriggerSlotProps {
   /** Clears the current selection (sets the model to `null`). */
   clearSelection: () => void
 
-  /** Toggles the popover open state (no-op while disabled). */
-  toggleOpen: () => void
+  /** Sets the popover open state (no-op while disabled). */
+  setOpen: (value: boolean) => void
 }
 
-/**
- * Shared shape for `#trigger`, `#prefix`, and `#suffix`. `selectedOption`
- * is always `null` in `#prefix` because the prefix only renders before a
- * selection — the field is still exposed for slot-prop symmetry across
- * the trio.
- */
-export type ComboboxSlotProps = ComboboxTriggerSlotProps
-export type ComboboxPrefixSlotProps = ComboboxSlotProps
-export type ComboboxSuffixSlotProps = ComboboxSlotProps
-
 export interface ComboboxItemSlotProps {
   /** Item currently being rendered. */
   item: ComboboxSelectableOption | ComboboxCustomOption
@@ -213,20 +203,9 @@ export interface ComboboxEmptySlotProps {
   query: string
 }
 
-export interface ComboboxFooterSlotProps {
-  /** Current search query — empty when the user hasn't typed since opening. */
-  query: string
-
-  /** Resolved selected option, if any. */
-  selectedOption: ComboboxSelectableOption | null
-
-  /** Clears the current selection (sets the model to `null`). */
-  clearSelection: () => void
-}
-
 export interface ComboboxSlots {
   /** Fully custom trigger renderer. */
-  trigger?: (props: ComboboxTriggerSlotProps) => any
+  trigger?: (props: ComboboxControlSlotProps) => any
 
   /** Overrides the rendered label content. Receives `{ required }`. */
   label?: (props: { required: boolean }) => any
@@ -235,8 +214,8 @@ export interface ComboboxSlots {
   description?: () => any
 
   /** Content rendered before the default input. Receives the same shape
-   * as `#trigger` and `#suffix` (`ComboboxSlotProps`). */
-  prefix?: (props: ComboboxPrefixSlotProps) => any
+   * as the other control slots. */
+  prefix?: (props: ComboboxControlSlotProps) => any
 
   /**
    * Content rendered after the input (input mode) or label (button mode).
@@ -245,7 +224,7 @@ export interface ComboboxSlots {
    * Common use: an inline clear button. Use `@click.stop` and
    * `@pointerdown.stop` so the press doesn't toggle the popover.
    */
-  suffix?: (props: ComboboxSuffixSlotProps) => any
+  suffix?: (props: ComboboxControlSlotProps) => any
 
   /** Shared content rendered before the standard row label. */
   'item-prefix'?: (props: ComboboxItemSlotProps) => any
@@ -267,7 +246,7 @@ export interface ComboboxSlots {
 
   /** Content rendered after the list. Stays pinned below the scrollable
    * options. */
-  footer?: (props: ComboboxFooterSlotProps) => any
+  footer?: (props: ComboboxControlSlotProps) => any
 
   [slotName: string]: ((props: any) => any) | undefined
 }

package/src/components/CommandPalette/CommandPaletteItem.vue

@@ -7,7 +7,7 @@ defineProps({
 
 <template>
   <div
-    class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-8"
+    class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base-medium text-ink-gray-8"
     :class="{ 'bg-surface-gray-2': active }"
   >
     <component

package/src/components/ContextMenu/ContextMenu.api.md

@@ -0,0 +1,52 @@
+<!-- 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: 'options',
+    description: 'Array of context menu options or grouped options.',
+    required: false,
+    type: 'MenuOptions',
+    default: '[]'
+  },
+  {
+    name: 'open',
+    description: 'Controls the visibility of the context menu.',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'default',
+    description: 'The right-clickable region that opens the menu.',
+    type: 'ContextMenuTriggerSlotProps'
+  },
+  {
+    name: 'trigger',
+    description: 'Explicit trigger slot; same as default.',
+    type: 'ContextMenuTriggerSlotProps'
+  }
+]
+
+  const emitsData = [
+  {
+    name: 'update:open',
+    description: 'Fired when the open state changes.',
+    type: '[value: boolean]'
+  }
+]
+</script>
+## API Reference
+
+<PropsTable name="ContextMenu" :data="propsData"/> 
+
+<SlotsTable :data="slotsData"/> 
+
+<EmitsTable :data="emitsData"/> 
+

package/src/components/ContextMenu/ContextMenu.cy.ts

@@ -0,0 +1,191 @@
+import ContextMenu from './ContextMenu.vue'
+import { defineComponent, h, ref } from 'vue'
+
+const trigger = () =>
+  h('div', { 'data-cy': 'trigger', style: 'padding: 20px; display: inline-block' }, 'Right-click me')
+
+const simpleOptions = [
+  { label: 'Open', icon: 'lucide-external-link' },
+  { label: 'Rename', icon: 'lucide-pen' },
+  { label: 'Delete', icon: 'lucide-trash-2', theme: 'red' },
+]
+
+describe('ContextMenu', () => {
+  it('calls onClick and closes the menu when an item is selected', () => {
+    const onClick = cy.stub().as('onClick')
+
+    cy.mount(ContextMenu, {
+      props: { options: [{ label: 'Open', onClick }] },
+      slots: { default: trigger },
+    })
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[role=menuitem]').click()
+    cy.get('@onClick').should('have.been.calledOnce')
+    cy.get('[role=menu]').should('not.exist')
+  })
+
+  it('renders group labels for grouped options', () => {
+    cy.mount(ContextMenu, {
+      props: {
+        options: [
+          {
+            group: 'Actions',
+            options: [{ label: 'Edit' }, { label: 'Duplicate' }],
+          },
+          {
+            group: 'Danger',
+            options: [{ label: 'Delete', theme: 'red' }],
+          },
+        ],
+      },
+      slots: { default: trigger },
+    })
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.contains('[data-slot=group-label]', 'Actions').should('exist')
+    cy.contains('[data-slot=group-label]', 'Danger').should('exist')
+    cy.get('[role=menuitem]').should('have.length', 3)
+  })
+
+  it('hides items when condition returns false', () => {
+    cy.mount(ContextMenu, {
+      props: {
+        options: [
+          { label: 'Visible', condition: () => true },
+          { label: 'Hidden', condition: () => false },
+        ],
+      },
+      slots: { default: trigger },
+    })
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[role=menuitem]').should('have.length', 1)
+    cy.contains('[role=menuitem]', 'Hidden').should('not.exist')
+  })
+
+  it('opens submenus', () => {
+    cy.mount(ContextMenu, {
+      props: {
+        options: [
+          {
+            label: 'Share',
+            submenu: [
+              { label: 'Copy link' },
+              { label: 'Invite people' },
+            ],
+          },
+        ],
+      },
+      slots: { default: trigger },
+    })
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[role="menuitem"][aria-haspopup="menu"]').click()
+    cy.get('[role=menu]').should('have.length', 2)
+    cy.contains('[role=menuitem]', 'Copy link').should('exist')
+  })
+
+  it('switch items render a toggle and fire onClick with the new boolean', () => {
+    const onToggle = cy.stub().as('onToggle')
+
+    cy.mount(ContextMenu, {
+      props: { options: [{ label: 'Dark mode', switch: true, switchValue: false, onClick: onToggle }] },
+      slots: { default: trigger },
+    })
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[role=switch]').should('have.attr', 'aria-checked', 'false')
+    cy.get('[role=switch]').click()
+    cy.get('@onToggle').should('have.been.calledOnceWith', true)
+  })
+
+  it('accepts an explicit #trigger slot as the right-clickable area', () => {
+    cy.mount(ContextMenu, {
+      props: { options: simpleOptions },
+      slots: {
+        trigger: () =>
+          h('div', { 'data-cy': 'named-trigger', style: 'padding: 20px' }, 'Named trigger'),
+      },
+    })
+
+    cy.get('[data-cy=named-trigger]').rightclick()
+    cy.get('[role=menu]').should('exist')
+  })
+
+  it('closes when clicking outside the menu', () => {
+    cy.mount(ContextMenu, {
+      props: { options: simpleOptions },
+      slots: { default: trigger },
+    })
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[role=menu]').should('exist')
+    cy.get('body').click(0, 0, { force: true })
+    cy.get('[role=menu]').should('not.exist')
+  })
+
+  it('updates v-model:open when the menu opens and closes', () => {
+    const open = ref(false)
+
+    cy.mount(defineComponent({
+      setup() {
+        return () =>
+          h('div', [
+            h('span', { 'data-cy': 'state' }, open.value ? 'open' : 'closed'),
+            h(
+              ContextMenu,
+              {
+                open: open.value,
+                'onUpdate:open': (val: boolean) => { open.value = val },
+                options: [{ label: 'Edit' }],
+              },
+              {
+                default: () =>
+                  h('div', { 'data-cy': 'trigger', style: 'padding: 20px' }, 'Right-click me'),
+              },
+            ),
+          ])
+      },
+    }))
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[data-cy=state]').should('have.text', 'open')
+    cy.get('[role=menuitem]').click()
+    cy.get('[data-cy=state]').should('have.text', 'closed')
+  })
+
+  it('prevents scroll while the menu is open', () => {
+    cy.mount(ContextMenu, {
+      props: { options: simpleOptions },
+      slots: { default: trigger },
+    })
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[role=menu]').should('exist')
+
+    cy.window().then((win) => {
+      const event = new WheelEvent('wheel', { deltaY: 100, cancelable: true, bubbles: true })
+      win.dispatchEvent(event)
+      expect(event.defaultPrevented).to.be.true
+    })
+  })
+
+  it('releases scroll lock when the menu closes', () => {
+    cy.mount(ContextMenu, {
+      props: { options: simpleOptions },
+      slots: { default: trigger },
+    })
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[role=menu]').should('exist')
+    cy.get('body').click(0, 0, { force: true })
+    cy.get('[role=menu]').should('not.exist')
+
+    cy.window().then((win) => {
+      const event = new WheelEvent('wheel', { deltaY: 100, cancelable: true, bubbles: true })
+      win.dispatchEvent(event)
+      expect(event.defaultPrevented).to.be.false
+    })
+  })
+})

package/src/components/ContextMenu/ContextMenu.md

@@ -0,0 +1,25 @@
+# ContextMenu
+
+A right-click context menu for surfaces, rows, and canvas elements. Opens at the cursor position wherever the user right-clicks within the trigger area.
+
+## Simple
+
+Right-click a chat message to open a quick-actions menu.
+
+<ComponentPreview name="ContextMenu-Simple" />
+
+## Groups and Submenus
+
+A task card with grouped actions and nested submenus for Move and Share operations.
+
+<ComponentPreview name="ContextMenu-Groups" />
+
+## Tailored options per row
+
+One `<ContextMenu>` wraps the entire list, with no separate instance per row. The trick is a single reactive `activeOptions` ref: each row's `@contextmenu` handler calls `getActions(file)` and writes the result into that ref before the menu opens, so the menu always reflects the item that was right-clicked.
+
+This also lets you tailor options per item type. In this example, **Open**, **Rename**, **Copy link**, and **Delete** appear for every item, but folders get a **New file** action to create inside them, files get **Download**, and images get an extra **Set as cover** option on top of that.
+
+<ComponentPreview name="ContextMenu-FileList" />
+
+<!-- @include: ./ContextMenu.api.md -->

package/src/components/ContextMenu/ContextMenu.vue

@@ -0,0 +1,106 @@
+<template>
+  <ContextMenuRoot v-model:open="openModel">
+    <ContextMenuTrigger as-child>
+      <slot v-if="$slots.trigger" name="trigger" :open="openModel" />
+      <slot v-else :open="openModel" />
+    </ContextMenuTrigger>
+
+    <ContextMenuPortal>
+      <ContextMenuContent
+        data-slot="content"
+        data-motion="animated"
+        :class="menuClasses.content"
+      >
+        <Menu
+          :groups="groups"
+          :close="close"
+          :slot-fns="slots"
+          :primitives="primitives"
+        />
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+</template>
+
+<script setup lang="ts">
+import { computed, onUnmounted, useSlots, watch } from 'vue'
+import {
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from 'reka-ui'
+import Menu from '../Menu/Menu.vue'
+import { menuClasses, normalizeMenuOptions } from '../Menu/utils'
+import type { ContextMenuProps, ContextMenuSlots } from './types'
+
+const openModel = defineModel<boolean>('open', { default: false })
+
+const props = withDefaults(defineProps<ContextMenuProps>(), {
+  options: () => [],
+})
+
+defineSlots<ContextMenuSlots>()
+
+const slots = useSlots()
+
+const groups = computed(() => normalizeMenuOptions(props.options))
+
+const primitives = {
+  Item: ContextMenuItem,
+  Label: ContextMenuLabel,
+  Portal: ContextMenuPortal,
+  Sub: ContextMenuSub,
+  SubContent: ContextMenuSubContent,
+  SubTrigger: ContextMenuSubTrigger,
+}
+
+function close() {
+  openModel.value = false
+}
+
+// Standard context menu behaviour: lock scroll while open so an accidental
+// trackpad flick doesn't destroy the interaction. `scroll` events aren't
+// cancelable, so we intercept `wheel` + `touchmove` instead.
+function preventScroll(e: Event) {
+  if (e.target instanceof Element && e.target.closest('[role="menu"]')) return
+  e.preventDefault()
+}
+
+let removeScrollLock: (() => void) | null = null
+
+watch(
+  openModel,
+  (isOpen) => {
+    removeScrollLock?.()
+    removeScrollLock = null
+
+    if (isOpen) {
+      // Lock scroll
+      window.addEventListener('wheel', preventScroll, {
+        passive: false,
+        capture: true,
+      })
+      window.addEventListener('touchmove', preventScroll, {
+        passive: false,
+        capture: true,
+      })
+      // Re-enable scroll when the menu closes
+      removeScrollLock = () => {
+        window.removeEventListener('wheel', preventScroll, { capture: true })
+        window.removeEventListener('touchmove', preventScroll, {
+          capture: true,
+        })
+      }
+    }
+  },
+  { immediate: true },
+)
+
+onUnmounted(() => removeScrollLock?.())
+</script>

package/src/components/ContextMenu/index.ts

@@ -0,0 +1,2 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export * from './types'

package/src/components/ContextMenu/stories/FileList.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ContextMenu, type ContextMenuOptions } from 'frappe-ui'
+
+type FileItem = {
+  name: string
+  type: 'folder' | 'doc' | 'image' | 'sheet'
+  meta: string
+}
+
+const files: FileItem[] = [
+  { name: 'Design Assets', type: 'folder', meta: '14 items' },
+  { name: 'Q3 Report.docx', type: 'doc', meta: 'Edited 2h ago' },
+  { name: 'Campaign Banner.png', type: 'image', meta: '2.4 MB' },
+  { name: 'Budget 2025.xlsx', type: 'sheet', meta: 'Edited yesterday' },
+  { name: 'Archive', type: 'folder', meta: '3 items' },
+]
+
+const iconMap: Record<FileItem['type'], string> = {
+  folder: 'lucide-folder',
+  doc: 'lucide-file-text',
+  image: 'lucide-image',
+  sheet: 'lucide-table',
+}
+
+function getActions(file: FileItem): ContextMenuOptions {
+  const base: ContextMenuOptions = [
+    {
+      label: 'Open',
+      icon: 'lucide-external-link',
+      onClick: () => console.log('open', file.name),
+    },
+    {
+      label: 'Rename',
+      icon: 'lucide-pen',
+      onClick: () => console.log('rename', file.name),
+    },
+    {
+      label: 'Copy link',
+      icon: 'lucide-link',
+      onClick: () => console.log('copy link', file.name),
+    },
+  ]
+  if (file.type === 'folder') {
+    base.push({
+      label: 'New file',
+      icon: 'lucide-file-plus',
+      onClick: () => console.log('new file in', file.name),
+    })
+  } else {
+    base.push({
+      label: 'Download',
+      icon: 'lucide-download',
+      onClick: () => console.log('download', file.name),
+    })
+  }
+  if (file.type === 'image') {
+    base.push({
+      label: 'Set as cover',
+      icon: 'lucide-image',
+      onClick: () => console.log('set as cover', file.name),
+    })
+  }
+  base.push({
+    label: 'Delete',
+    icon: 'lucide-trash-2',
+    theme: 'red',
+    onClick: () => console.log('delete', file.name),
+  })
+  return base
+}
+
+const activeOptions = ref<ContextMenuOptions>([])
+</script>
+
+<template>
+  <div
+    class="w-80 overflow-hidden rounded-xl border border-outline-gray-2 bg-surface-base shadow-sm"
+  >
+    <div class="border-b border-outline-gray-1 px-3 py-2">
+      <p class="text-p-sm-medium text-ink-gray-5">Recents</p>
+    </div>
+    <ContextMenu :options="activeOptions">
+      <ul class="divide-y divide-outline-gray-1">
+        <li
+          v-for="file in files"
+          :key="file.name"
+          class="flex cursor-default select-none items-center gap-2.5 px-3 py-2 hover:bg-surface-gray-1"
+          @contextmenu="activeOptions = getActions(file)"
+        >
+          <span
+            class="size-4 shrink-0 text-ink-gray-4"
+            :class="iconMap[file.type]"
+          />
+          <div class="min-w-0 flex-1">
+            <p class="truncate text-sm text-ink-gray-8">{{ file.name }}</p>
+          </div>
+          <span class="shrink-0 text-p-sm text-ink-gray-4">{{
+            file.meta
+          }}</span>
+        </li>
+      </ul>
+    </ContextMenu>
+  </div>
+</template>

package/src/components/ContextMenu/stories/Groups.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ContextMenu, Avatar, Badge, type ContextMenuOptions } from 'frappe-ui'
+
+const actions: ContextMenuOptions = [
+  {
+    group: 'Actions',
+    options: [
+      {
+        label: 'Edit',
+        icon: 'lucide-pen',
+        onClick: () => console.log('edit'),
+      },
+      {
+        label: 'Duplicate',
+        icon: 'lucide-copy',
+        onClick: () => console.log('duplicate'),
+      },
+      {
+        label: 'Share',
+        icon: 'lucide-share-2',
+        submenu: [
+          {
+            label: 'Copy link',
+            icon: 'lucide-link',
+            onClick: () => console.log('copy link'),
+          },
+          {
+            label: 'Invite people',
+            icon: 'lucide-user-plus',
+            onClick: () => console.log('invite'),
+          },
+        ],
+      },
+      {
+        label: 'Move to',
+        icon: 'lucide-folder-input',
+        submenu: [
+          {
+            label: 'In Progress',
+            icon: 'lucide-loader-circle',
+            onClick: () => console.log('in progress'),
+          },
+          {
+            label: 'Done',
+            icon: 'lucide-circle-check',
+            onClick: () => console.log('done'),
+          },
+          {
+            label: 'Backlog',
+            icon: 'lucide-inbox',
+            onClick: () => console.log('backlog'),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    group: 'Danger',
+    options: [
+      {
+        label: 'Delete',
+        icon: 'lucide-trash-2',
+        theme: 'red',
+        onClick: () => console.log('delete'),
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <ContextMenu :options="actions">
+    <div
+      class="w-72 cursor-default select-none rounded-xl border border-outline-gray-2 bg-surface-base p-4 shadow-sm"
+    >
+      <div class="mb-3 flex items-start justify-between gap-2">
+        <Badge theme="orange" label="In Progress" />
+        <span class="text-p-sm text-ink-gray-4">Due Friday</span>
+      </div>
+      <p class="mb-2 text-sm-medium text-ink-gray-8">
+        Redesign onboarding flow
+      </p>
+      <p class="text-p-sm text-ink-gray-5">
+        Update the sign-up steps and add the new welcome screen from Figma.
+      </p>
+      <div class="mt-3 flex">
+        <Avatar
+          label="John Doe"
+          image="https://avatars.githubusercontent.com/u/499550?s=60&v=4"
+          size="sm"
+        />
+      </div>
+    </div>
+  </ContextMenu>
+</template>