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

package/src/components/{Dropdown/DropdownMenuList.vue → Menu/Menu.vue}

@@ -1,45 +1,28 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
+import MenuItemContent from './MenuItemContent.vue'
+import MenuRenderContent from './MenuRenderContent.vue'
+import MenuRenderContentAsChild from './MenuRenderContentAsChild.vue'
+import type { MenuOption, MenuProps } from './types'
 import {
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-} from 'reka-ui'
-import DropdownMenuItemContent from './DropdownMenuItemContent.vue'
-import DropdownRenderContent from './DropdownRenderContent.vue'
-import DropdownRenderContentAsChild from './DropdownRenderContentAsChild.vue'
-import type { DropdownOption } from './types'
-import {
-  dropdownClasses,
-  getDropdownBackgroundColor,
+  menuClasses,
+  getMenuBackgroundColor,
   groupHasIcons,
-  isDropdownComponentOption,
-  isDropdownSubmenuOption,
-  isDropdownSwitchOption,
-  normalizeDropdownOptions,
-  type NormalizedDropdownGroup,
+  isMenuComponentOption,
+  isMenuSubmenuOption,
+  isMenuSwitchOption,
+  normalizeMenuOptions,
 } from './utils'
 
 defineOptions({
-  name: 'DropdownMenuList',
+  name: 'Menu',
 })
 
-const props = withDefaults(
-  defineProps<{
-    groups?: NormalizedDropdownGroup[]
-    portalTo?: string | HTMLElement
-    close: () => void
-    slotFns?: Record<string, ((props?: any) => any) | undefined>
-  }>(),
-  {
-    groups: () => [],
-    portalTo: 'body',
-  },
-)
+const props = withDefaults(defineProps<MenuProps>(), {
+  groups: () => [],
+  portalTo: 'body',
+})
 
 const router = useRouter()
 
@@ -47,12 +30,11 @@ const hasVisibleItems = computed(() => {
   return props.groups.some((group) => group.options.length)
 })
 
-async function handleItemSelect(item: DropdownOption, event: Event) {
-  if (item.route) {
+async function handleItemSelect(item: MenuOption, event: Event) {
+  if (item.route && router) {
     await router.push(item.route)
     return
   }
-
   ;(item.onClick as ((event: PointerEvent) => void) | undefined)?.(
     event as PointerEvent,
   )
@@ -65,69 +47,73 @@ async function handleItemSelect(item: DropdownOption, event: Event) {
       v-for="(group, groupIndex) in groups"
       :key="group.key ?? group.group ?? groupIndex"
       data-slot="group"
-      :class="dropdownClasses.group"
+      :class="menuClasses.group"
     >
-      <DropdownMenuLabel
+      <component
+        :is="primitives.Label"
         v-if="group.group && !group.hideLabel"
         data-slot="group-label"
-        :class="dropdownClasses.groupLabel"
+        :class="menuClasses.groupLabel"
       >
-        <DropdownRenderContent
+        <MenuRenderContent
           v-if="slotFns?.['group-label']"
           :content="slotFns['group-label']?.({ group })"
         />
         <template v-else>
           {{ group.group }}
         </template>
-      </DropdownMenuLabel>
+      </component>
 
       <template
         v-for="(item, itemIndex) in group.options"
         :key="item.value ?? item.label ?? itemIndex"
       >
-        <DropdownMenuSub v-if="isDropdownSubmenuOption(item)">
-          <DropdownMenuSubTrigger
+        <component :is="primitives.Sub" v-if="isMenuSubmenuOption(item)">
+          <component
+            :is="primitives.SubTrigger"
             data-slot="item"
             :data-disabled="item.disabled ? '' : undefined"
             :disabled="item.disabled"
             :class="[
-              dropdownClasses.menuItem,
-              getDropdownBackgroundColor(item),
+              menuClasses.menuItem,
+              getMenuBackgroundColor(item),
               'data-[disabled]:cursor-not-allowed',
             ]"
           >
-            <DropdownMenuItemContent
+            <MenuItemContent
               :item="item"
               :close="close"
               :reserve-icon-space="groupHasIcons(group)"
               :slot-fns="slotFns"
               trailing="submenu"
             />
-          </DropdownMenuSubTrigger>
+          </component>
 
-          <DropdownMenuPortal :to="portalTo">
-            <DropdownMenuSubContent
+          <component :is="primitives.Portal" :to="portalTo">
+            <component
+              :is="primitives.SubContent"
               data-slot="content"
-              :class="dropdownClasses.content"
+              :class="menuClasses.content"
               :side-offset="4"
             >
-              <DropdownMenuList
-                :groups="normalizeDropdownOptions(item.submenu)"
-                :portal-to="portalTo"
+              <Menu
+                :groups="normalizeMenuOptions(item.submenu)"
                 :close="close"
                 :slot-fns="slotFns"
+                :portal-to="portalTo"
+                :primitives="primitives"
               />
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
+            </component>
+          </component>
+        </component>
 
         <div
-          v-else-if="isDropdownSwitchOption(item)"
+          v-else-if="isMenuSwitchOption(item)"
           data-slot="item"
           :data-disabled="item.disabled ? '' : undefined"
           class="rounded"
         >
-          <DropdownMenuItemContent
+          <MenuItemContent
             :item="item"
             :close="close"
             :reserve-icon-space="groupHasIcons(group)"
@@ -136,73 +122,122 @@ async function handleItemSelect(item: DropdownOption, event: Event) {
           />
         </div>
 
-        <DropdownMenuItem
+        <component
+          :is="primitives.Item"
           v-else-if="slotFns?.item"
           as-child
           data-slot="item"
           :data-disabled="item.disabled ? '' : undefined"
           :disabled="item.disabled"
           class="data-[disabled]:cursor-not-allowed"
-          @select="(event) => handleItemSelect(item, event)"
+          @select="handleItemSelect(item, $event)"
         >
-          <DropdownRenderContentAsChild
+          <MenuRenderContentAsChild
             :content="
               slotFns.item?.({ item, close, selected: !!item.selected })
             "
           />
-        </DropdownMenuItem>
+        </component>
 
-        <DropdownMenuItem
+        <component
+          :is="primitives.Item"
           v-else-if="item.slots?.item"
           as-child
           data-slot="item"
           :data-disabled="item.disabled ? '' : undefined"
           :disabled="item.disabled"
           class="data-[disabled]:cursor-not-allowed"
-          @select="(event) => handleItemSelect(item, event)"
+          @select="handleItemSelect(item, $event)"
         >
-          <DropdownRenderContentAsChild
+          <MenuRenderContentAsChild
             :content="
               item.slots.item({ item, close, selected: !!item.selected })
             "
           />
-        </DropdownMenuItem>
+        </component>
 
-        <DropdownMenuItem
-          v-else-if="isDropdownComponentOption(item)"
+        <component
+          :is="primitives.Item"
+          v-else-if="isMenuComponentOption(item)"
           as-child
           data-slot="item"
           :data-disabled="item.disabled ? '' : undefined"
           :disabled="item.disabled"
           class="data-[disabled]:cursor-not-allowed"
-          @select="(event) => handleItemSelect(item, event)"
+          @select="handleItemSelect(item, $event)"
         >
           <component :is="item.component" :active="false" />
-        </DropdownMenuItem>
+        </component>
 
-        <DropdownMenuItem
+        <component
+          :is="primitives.Item"
           v-else
           data-slot="item"
           :data-disabled="item.disabled ? '' : undefined"
           :data-state="item.selected ? 'checked' : undefined"
           :disabled="item.disabled"
           class="data-[disabled]:cursor-not-allowed"
-          :class="[dropdownClasses.menuItem, getDropdownBackgroundColor(item)]"
-          @select="(event) => handleItemSelect(item, event)"
+          :class="[menuClasses.menuItem, getMenuBackgroundColor(item)]"
+          @select="handleItemSelect(item, $event)"
         >
-          <DropdownMenuItemContent
+          <MenuItemContent
             :item="item"
             :close="close"
             :reserve-icon-space="groupHasIcons(group)"
             :slot-fns="slotFns"
           />
-        </DropdownMenuItem>
+        </component>
       </template>
     </div>
   </template>
 
   <div v-else data-slot="empty" class="p-1.5 text-base text-ink-gray-5">
-    <DropdownRenderContent v-if="slotFns?.empty" :content="slotFns.empty?.()" />
+    <MenuRenderContent v-if="slotFns?.empty" :content="slotFns.empty?.()" />
     <template v-else>No options</template>
   </div>
 </template>
+
+<style scoped>
+/*
+ * Shared menu entrance/exit. Both Dropdown and ContextMenu render this
+ * component inside their `.menu-content` wrapper, so keeping the animated
+ * keyframes + reduced-motion reset here guarantees they ship whenever either
+ * menu is used (the package ships source and is tree-shaken per component).
+ * Dropdown's keyboard-only `instant` motion stays in Dropdown.vue.
+ */
+@keyframes menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes menu-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+:global(.menu-content[data-motion='animated'][data-state='open']) {
+  animation: menu-in 100ms ease-out;
+}
+
+:global(.menu-content[data-motion='animated'][data-state='closed']) {
+  animation: menu-out 75ms ease-in;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :global(.menu-content) {
+    animation-duration: 0ms !important;
+  }
+}
+</style>

package/src/components/{Dropdown/DropdownMenuItemContent.vue → Menu/MenuItemContent.vue}

@@ -9,17 +9,13 @@ import {
 import FeatherIcon from '../FeatherIcon.vue'
 import ItemListRow from '../ItemListRow/ItemListRow.vue'
 import Switch from '../Switch/Switch.vue'
-import DropdownRenderContent from './DropdownRenderContent.vue'
-import type { DropdownOption } from './types'
-import {
-  dropdownClasses,
-  getDropdownIconColor,
-  getDropdownTextColor,
-} from './utils'
+import MenuRenderContent from './MenuRenderContent.vue'
+import type { MenuOption } from './types'
+import { menuClasses, getMenuIconColor, getMenuTextColor } from './utils'
 
 const props = withDefaults(
   defineProps<{
-    item: DropdownOption
+    item: MenuOption
     close: () => void
     reserveIconSpace?: boolean
     trailing?: 'none' | 'submenu' | 'switch'
@@ -126,29 +122,25 @@ const hasItemSlotsSuffix = computed(() => {
 function handleSwitchChange(value: boolean) {
   ;(props.item.onClick as ((value: boolean) => void) | undefined)?.(value)
 }
-
 </script>
 
 <template>
   <ItemListRow :selected="isSelected" :disabled="item.disabled">
     <template #prefix>
-      <DropdownRenderContent
-        v-if="hasUserPrefix"
-        :content="userPrefixContent"
-      />
-      <DropdownRenderContent
+      <MenuRenderContent v-if="hasUserPrefix" :content="userPrefixContent" />
+      <MenuRenderContent
         v-else-if="hasItemSlotsPrefix"
         :content="itemSlotsPrefixContent"
       />
       <span
         v-else-if="isLucideIconString(item.icon)"
-        :class="[item.icon, dropdownClasses.itemIcon, getDropdownIconColor(item)]"
+        :class="[item.icon, menuClasses.itemIcon, getMenuIconColor(item)]"
         aria-hidden="true"
       />
       <span
         v-else-if="isEmojiIconString(item.icon)"
         :class="[
-          dropdownClasses.itemIcon,
+          menuClasses.itemIcon,
           'inline-flex items-center justify-center text-base leading-none',
         ]"
         aria-hidden="true"
@@ -157,35 +149,32 @@ function handleSwitchChange(value: boolean) {
       <FeatherIcon
         v-else-if="item.icon && typeof item.icon === 'string'"
         :name="item.icon"
-        :class="[dropdownClasses.itemIcon, getDropdownIconColor(item)]"
+        :class="[menuClasses.itemIcon, getMenuIconColor(item)]"
         aria-hidden="true"
       />
       <component
         :is="item.icon"
         v-else-if="item.icon"
-        :class="[dropdownClasses.itemIcon, getDropdownIconColor(item)]"
+        :class="[menuClasses.itemIcon, getMenuIconColor(item)]"
       />
       <div
         v-else-if="reserveIconSpace"
-        :class="dropdownClasses.itemIconPlaceholder"
+        :class="menuClasses.itemIconPlaceholder"
       />
     </template>
 
     <template #label>
-      <DropdownRenderContent
+      <MenuRenderContent
         v-if="hasDynamicLabel"
         :content="dynamicLabelContent"
       />
-      <DropdownRenderContent
-        v-else-if="hasUserLabel"
-        :content="userLabelContent"
-      />
-      <DropdownRenderContent
+      <MenuRenderContent v-else-if="hasUserLabel" :content="userLabelContent" />
+      <MenuRenderContent
         v-else-if="hasItemSlotsLabel"
         :content="itemSlotsLabelContent"
       />
       <div v-else class="min-w-0">
-        <div :class="['truncate', getDropdownTextColor(item)]">
+        <div :class="['truncate', getMenuTextColor(item)]">
           {{ item.label }}
         </div>
         <div v-if="item.description" class="truncate text-p-sm text-ink-gray-5">
@@ -195,11 +184,8 @@ function handleSwitchChange(value: boolean) {
     </template>
 
     <template #suffix>
-      <DropdownRenderContent
-        v-if="hasUserSuffix"
-        :content="userSuffixContent"
-      />
-      <DropdownRenderContent
+      <MenuRenderContent v-if="hasUserSuffix" :content="userSuffixContent" />
+      <MenuRenderContent
         v-else-if="hasItemSlotsSuffix"
         :content="itemSlotsSuffixContent"
       />
@@ -213,7 +199,11 @@ function handleSwitchChange(value: boolean) {
       />
       <span
         v-else-if="trailing === 'submenu'"
-        :class="['lucide-chevron-right', dropdownClasses.chevronIcon, getDropdownIconColor(item)]"
+        :class="[
+          'lucide-chevron-right',
+          menuClasses.chevronIcon,
+          getMenuIconColor(item),
+        ]"
         aria-hidden="true"
       />
     </template>
@@ -222,7 +212,7 @@ function handleSwitchChange(value: boolean) {
 
 <style scoped>
 /*
- * The outer DropdownMenuItem paints the row background via
+ * The outer MenuItem paints the row background via
  * data-[highlighted] / data-[state=checked] utilities — including the
  * combined hover+selected state. Clear ItemListRow's own bg so the outer
  * color always shows through; text emphasis on selected stays.

package/src/components/{Dropdown/DropdownRenderContent.vue → Menu/MenuRenderContent.vue}

@@ -2,7 +2,7 @@
 import { defineComponent, type PropType, type VNode } from 'vue'
 
 const RenderContent = defineComponent({
-  name: 'DropdownRenderContentRenderer',
+  name: 'MenuRenderContentRenderer',
   props: {
     content: {
       type: [Object, Array] as PropType<VNode | VNode[]>,

package/src/components/Menu/types.ts

@@ -0,0 +1,225 @@
+import type { Component, VNodeChild } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { NormalizedMenuGroup } from './utils'
+
+export type MenuTheme = 'gray' | 'red'
+
+export type MenuSlotFn<TProps> = (props: TProps) => VNodeChild
+
+export interface MenuItemSlots<TProps> {
+  /** Replaces the prefix region of the standard row shell. */
+  prefix?: MenuSlotFn<TProps>
+
+  /** Replaces the label region of the standard row shell. */
+  label?: MenuSlotFn<TProps>
+
+  /** Replaces the suffix region of the standard row shell. */
+  suffix?: MenuSlotFn<TProps>
+
+  /** Replaces the entire row; mutually exclusive with `prefix` / `label` / `suffix`. */
+  item?: MenuSlotFn<TProps>
+}
+
+export interface MenuBaseOption {
+  /** 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?: MenuTheme
+
+  /** Named slot suffix used to resolve `item-*` slots dynamically. */
+  slot?: string
+
+  /** Per-item inline slot implementations for the row shell. */
+  slots?: MenuItemSlots<MenuItemSlotProps>
+
+  /** Condition used to omit an item from the final menu. */
+  condition?: () => boolean
+
+  [key: string]: any
+}
+
+export interface MenuActionOption extends MenuBaseOption {
+  /** 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 MenuSwitchOption extends MenuBaseOption {
+  /** 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 MenuSubmenuOption extends MenuBaseOption {
+  /** Primary label shown for the submenu trigger. */
+  label: string
+
+  /** Nested menu items rendered in the submenu. */
+  submenu: MenuOptions
+
+  route?: never
+  onClick?: never
+  switch?: never
+  switchValue?: never
+  component?: never
+}
+
+export interface MenuComponentOption extends MenuBaseOption {
+  /**
+   * 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 MenuGroupOption {
+  /** 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?: MenuOption[]
+
+  /**
+   * @deprecated use `options`. Accepted only as a back-compat alias for
+   * Dropdown's previous `{ group, items }` shape.
+   */
+  items?: MenuOption[]
+
+  /** Hides the group heading while preserving grouping. */
+  hideLabel?: boolean
+
+  /** Theme inherited by items in the group. */
+  theme?: MenuTheme
+}
+
+export type MenuOption =
+  | MenuActionOption
+  | MenuSwitchOption
+  | MenuSubmenuOption
+  | MenuComponentOption
+
+export type MenuItem = MenuOption | MenuGroupOption
+export type MenuOptions = Array<MenuItem>
+
+/**
+ * Reka-ui menu primitives injected by the wrapping menu component
+ * (Dropdown / ContextMenu) so the shared renderer stays variant-agnostic.
+ */
+export interface MenuPrimitives {
+  Item: any
+  Label: any
+  Portal: any
+  Sub: any
+  SubContent: any
+  SubTrigger: any
+}
+
+export interface MenuProps {
+  /** Normalized groups of menu options to render. */
+  groups?: NormalizedMenuGroup[]
+
+  /** Closes the menu. */
+  close: () => void
+
+  /** Dynamic `item-*` slot implementations resolved by name. */
+  slotFns?: Record<string, ((props?: any) => any) | undefined>
+
+  /** Portal target for submenu content. */
+  portalTo?: string | HTMLElement
+
+  /** Reka-ui primitives supplied by the wrapping menu component. */
+  primitives: MenuPrimitives
+}
+
+export interface MenuSlotProps {
+  /** Closes the menu. */
+  close: () => void
+}
+
+export interface MenuItemSlotProps extends MenuSlotProps {
+  /** Item currently being rendered. */
+  item: MenuOption
+
+  /** Whether the item is currently selected. */
+  selected: boolean
+}
+
+export interface MenuGroupSlotProps {
+  /** Group currently being rendered. */
+  group: MenuGroupOption
+}
+
+export interface MenuSlots {
+  /** Alternate trigger renderer. */
+  default?: (props: any) => any
+
+  /** Explicit trigger slot renderer. */
+  trigger?: (props: any) => any
+
+  /** Replaces the entire item row. */
+  item?: (props: MenuItemSlotProps) => any
+
+  /** Content rendered before the standard item label. */
+  'item-prefix'?: (props: MenuItemSlotProps) => any
+
+  /** Content rendered for the standard item label area. */
+  'item-label'?: (props: MenuItemSlotProps) => any
+
+  /** Content rendered after the standard item label. */
+  'item-suffix'?: (props: MenuItemSlotProps) => any
+
+  /** Custom renderer for group labels. */
+  'group-label'?: (props: MenuGroupSlotProps) => any
+
+  /** Fallback content rendered when no items are available. */
+  empty?: () => any
+
+  [slotName: string]: ((props: any) => any) | undefined
+}