feat(ContextMenu): new component

Resolves #18

playground/app.vue

@@ -20,6 +20,7 @@ const components = [
   'checkbox',
   'chip',
   'collapsible',
+  'context-menu',
   'drawer',
   'dropdown-menu',
   'form',

playground/pages/context-menu.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+const items = [
+  [{
+    label: 'Appearance',
+    children: [{
+      label: 'System',
+      icon: 'i-heroicons-computer-desktop'
+    }, {
+      label: 'Light',
+      icon: 'i-heroicons-sun'
+    }, {
+      label: 'Dark',
+      icon: 'i-heroicons-moon'
+    }]
+  }],
+  [{
+    label: 'Show Sidebar',
+    kbds: ['meta', 'S'],
+    select() {
+      console.log('Show Sidebar clicked')
+    }
+  }, {
+    label: 'Show Toolbar',
+    kbds: ['shift', 'meta', 'D'],
+    select() {
+      console.log('Show Toolbar clicked')
+    }
+  }, {
+    label: 'Collapse Pinned Tabs',
+    disabled: true
+  }], [{
+    label: 'Refresh the Page'
+  }, {
+    label: 'Clear Cookies and Refresh'
+  }, {
+    label: 'Clear Cache and Refresh'
+  }, {
+    type: 'separator' as const
+  }, {
+    label: 'Developer',
+    children: [[{
+      label: 'View Source',
+      kbds: ['option', 'meta', 'U'],
+      select() {
+        console.log('View Source clicked')
+      }
+    }, {
+      label: 'Developer Tools',
+      kbds: ['option', 'meta', 'I'],
+      select() {
+        console.log('Developer Tools clicked')
+      }
+    }], [{
+      label: 'Inspect Elements',
+      kbds: ['option', 'meta', 'C'],
+      select() {
+        console.log('Inspect Elements clicked')
+      }
+    }], [{
+      label: 'JavaScript Console',
+      kbds: ['option', 'meta', 'J'],
+      select() {
+        console.log('JavaScript Console clicked')
+      }
+    }]]
+  }]
+]
+
+defineShortcuts(extractShortcuts(items))
+</script>
+
+<template>
+  <UContextMenu :items="items" class="min-w-48">
+    <div class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72">
+      Right click here
+    </div>
+  </UContextMenu>
+</template>

src/runtime/components/ContextMenu.vue

@@ -0,0 +1,91 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuArrowProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/context-menu'
+import type { AvatarProps, KbdProps, LinkProps } from '#ui/types'
+import type { DynamicSlots } from '#ui/types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { contextMenu: Partial<typeof theme> } }
+
+const contextMenu = tv({ extend: tv(theme), ...(appConfig.ui?.contextMenu || {}) })
+
+export interface ContextMenuItem extends Omit<LinkProps, 'type'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  content?: Omit<ContextMenuContentProps, 'asChild' | 'forceMount'>
+  kbds?: string[] | KbdProps[]
+  /**
+   * The item type.
+   * @defaultValue "link"
+   */
+  type?: 'label' | 'separator' | 'link'
+  slot?: string
+  open?: boolean
+  defaultOpen?: boolean
+  select? (e: Event): void
+  children?: ContextMenuItem[] | ContextMenuItem[][]
+}
+
+export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'> {
+  items?: T[] | T[][]
+  disabled?: boolean
+  content?: Omit<ContextMenuContentProps, 'asChild' | 'forceMount'>
+  arrow?: boolean | Omit<ContextMenuArrowProps, 'asChild'>
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof contextMenu.slots>
+}
+
+export interface ContextMenuEmits extends ContextMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type ContextMenuSlots<T extends { slot?: string }> = {
+  default(): any
+  leading: SlotProps<T>
+  label: SlotProps<T>
+  trailing: SlotProps<T>
+  item: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends ContextMenuItem">
+import { computed, toRef } from 'vue'
+import { ContextMenuRoot, ContextMenuTrigger, ContextMenuArrow, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { UContextMenuContent } from '#components'
+import { omit } from '#ui/utils'
+
+const props = withDefaults(defineProps<ContextMenuProps<T>>(), {
+  portal: true,
+  modal: false
+})
+const emits = defineEmits<ContextMenuEmits>()
+const slots = defineSlots<ContextMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'modal'), emits)
+const contentProps = toRef(() => props.content as ContextMenuContentProps)
+const arrowProps = toRef(() => props.arrow as ContextMenuArrowProps)
+const proxySlots = omit(slots, ['default']) as Record<string, ContextMenuSlots<T>[string]>
+
+const ui = computed(() => tv({ extend: contextMenu, slots: props.ui })())
+</script>
+
+<template>
+  <ContextMenuRoot v-bind="rootProps">
+    <ContextMenuTrigger v-if="$slots.default" as-child :disabled="disabled">
+      <slot />
+    </ContextMenuTrigger>
+
+    <UContextMenuContent :class="ui.content({ class: props.class })" :ui="ui" v-bind="contentProps" :items="items" :portal="portal">
+      <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+
+      <ContextMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow()" />
+    </UContextMenuContent>
+  </ContextMenuRoot>
+</template>

src/runtime/components/ContextMenuContent.vue

@@ -0,0 +1,117 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { ContextMenuContentProps as RadixContextMenuContentProps, ContextMenuContentEmits as RadixContextMenuContentEmits } from 'radix-vue'
+import theme from '#build/ui/context-menu'
+import type { ContextMenuItem, ContextMenuSlots } from '#ui/types'
+
+const contextMenu = tv(theme)()
+
+interface ContextMenuContentProps<T> extends Omit<RadixContextMenuContentProps, 'asChild' | 'forceMount'> {
+  items?: T[] | T[][]
+  portal?: boolean
+  sub?: boolean
+  class?: any
+  ui: typeof contextMenu
+}
+
+interface ContextMenuContentEmits extends RadixContextMenuContentEmits {}
+
+type ContextMenuContentSlots<T extends { slot?: string }> = ContextMenuSlots<T>
+</script>
+
+<script setup lang="ts" generic="T extends ContextMenuItem">
+import { computed } from 'vue'
+import { ContextMenu } from 'radix-vue/namespaced'
+import { useForwardPropsEmits } from 'radix-vue'
+import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { ULink } from '#components'
+import { omit } from '#ui/utils'
+
+const props = defineProps<ContextMenuContentProps<T>>()
+const emits = defineEmits<ContextMenuContentEmits>()
+const slots = defineSlots<ContextMenuContentSlots<T>>()
+
+const appConfig = useAppConfig()
+const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'class', 'ui'), emits)
+const proxySlots = omit(slots, ['default']) as Record<string, ContextMenuContentSlots<T>[string]>
+
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate()
+
+const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as T[][] : [])
+</script>
+
+<template>
+  <DefineItemTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="item" :index="index">
+      <slot name="leading" :item="item" :active="active" :index="index">
+        <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ active })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ active })" />
+      </slot>
+
+      <span v-if="item.label || $slots.label" :class="ui.linkLabel()">
+        <slot name="label" :item="item" :active="active" :index="index">
+          {{ item.label }}
+        </slot>
+      </span>
+
+      <span v-if="$slots.trailing || item.children?.length || item.kbds?.length" :class="ui.linkTrailing()">
+        <slot name="trailing" :item="item" :active="active" :index="index">
+          <UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.linkTrailingIcon()" />
+          <span v-else-if="item.kbds?.length" :class="ui.linkTrailingKbds()">
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" size="md" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          </span>
+        </slot>
+      </span>
+    </slot>
+  </DefineItemTemplate>
+
+  <ContextMenu.Portal :disabled="!portal">
+    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
+      <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group()">
+        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+          <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label()">
+            <ReuseItemTemplate :item="item" :index="index" />
+          </ContextMenu.Label>
+          <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator()" />
+          <ContextMenu.Sub v-else-if="item?.children?.length">
+            <ContextMenu.SubTrigger
+              as="button"
+              type="button"
+              :disabled="item.disabled"
+              :open="item.open"
+              :default-open="item.defaultOpen"
+              :text-value="item.label"
+              :class="ui.link()"
+            >
+              <ReuseItemTemplate :item="item" :index="index" />
+            </ContextMenu.SubTrigger>
+
+            <UContextMenuContent
+              sub
+              :class="props.class"
+              :ui="ui"
+              :portal="portal"
+              :items="item.children"
+              :align-offset="-4"
+              v-bind="item.content"
+            >
+              <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+                <slot :name="name" v-bind="slotData" />
+              </template>
+            </UContextMenuContent>
+          </ContextMenu.Sub>
+          <ContextMenu.Item v-else as-child :disabled="item.disabled" :text-value="item.label" @select="item.select">
+            <ULink v-slot="{ active, ...slotProps }" v-bind="omit((item as ContextMenuItem), ['label', 'icon', 'avatar', 'content', 'kbds', 'slot', 'open', 'defaultOpen', 'select', 'children', 'type'])" custom>
+              <ULinkBase v-bind="slotProps" :class="ui.link({ active })">
+                <ReuseItemTemplate :item="item" :active="active" :index="index" />
+              </ULinkBase>
+            </ULink>
+          </ContextMenu.Item>
+        </template>
+      </ContextMenu.Group>
+
+      <slot />
+    </component>
+  </ContextMenu.Portal>
+</template>

src/runtime/types/index.d.ts

@@ -1,6 +1,6 @@
-export * from '../components/App.vue'
 export * from '../components/Accordion.vue'
 export * from '../components/Alert.vue'
+export * from '../components/App.vue'
 export * from '../components/Avatar.vue'
 export * from '../components/Badge.vue'
 export * from '../components/Breadcrumb.vue'
@@ -10,6 +10,7 @@ export * from '../components/Checkbox.vue'
 export * from '../components/Chip.vue'
 export * from '../components/Collapsible.vue'
 export * from '../components/Container.vue'
+export * from '../components/ContextMenu.vue'
 export * from '../components/Drawer.vue'
 export * from '../components/DropdownMenu.vue'
 export * from '../components/Form.vue'

src/theme/context-menu.ts

@@ -0,0 +1,28 @@
+export default {
+  slots: {
+    content: 'min-w-32 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
+    arrow: 'fill-gray-200 dark:fill-gray-800',
+    group: 'p-1 isolate',
+    label: 'w-full flex items-center gap-1.5 p-1.5 text-sm font-medium select-none',
+    separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
+    link: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75',
+    linkLeadingIcon: 'shrink-0 size-5',
+    linkLeadingAvatar: 'shrink-0',
+    linkTrailing: 'ms-auto inline-flex',
+    linkTrailingIcon: 'shrink-0 size-5',
+    linkTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
+    linkLabel: 'truncate'
+  },
+  variants: {
+    active: {
+      true: {
+        link: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
+        linkLeadingIcon: 'text-gray-700 dark:text-gray-200'
+      },
+      false: {
+        link: 'text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50',
+        linkLeadingIcon: 'text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200'
+      }
+    }
+  }
+}

src/theme/index.ts

@@ -9,6 +9,7 @@ export { default as checkbox } from './checkbox'
 export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
 export { default as container } from './container'
+export { default as contextMenu } from './context-menu'
 export { default as drawer } from './drawer'
 export { default as dropdownMenu } from './dropdown-menu'
 export { default as form } from './form'

test/components/ContextMenu.spec.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect } from 'vitest'
+import ContextMenu, { type ContextMenuProps, type ContextMenuSlots } from '../../src/runtime/components/ContextMenu.vue'
+import ComponentRender from '../component-render'
+
+// FIXME: Can't force open state
+describe('ContextMenu', () => {
+  const items = [
+    [{
+      label: 'Appearance',
+      children: [{
+        label: 'System',
+        icon: 'i-heroicons-computer-desktop'
+      }, {
+        label: 'Light',
+        icon: 'i-heroicons-sun'
+      }, {
+        label: 'Dark',
+        icon: 'i-heroicons-moon'
+      }]
+    }],
+    [{
+      label: 'Show Sidebar',
+      kbds: ['meta', 'S'],
+      select() {
+        console.log('Show Sidebar clicked')
+      }
+    }, {
+      label: 'Show Toolbar',
+      kbds: ['shift', 'meta', 'D'],
+      select() {
+        console.log('Show Toolbar clicked')
+      }
+    }, {
+      label: 'Collapse Pinned Tabs',
+      disabled: true
+    }], [{
+      label: 'Refresh the Page'
+    }, {
+      label: 'Clear Cookies and Refresh'
+    }, {
+      label: 'Clear Cache and Refresh'
+    }, {
+      type: 'separator' as const
+    }, {
+      label: 'Developer',
+      children: [[{
+        label: 'View Source',
+        kbds: ['option', 'meta', 'U'],
+        select() {
+          console.log('View Source clicked')
+        }
+      }, {
+        label: 'Developer Tools',
+        kbds: ['option', 'meta', 'I'],
+        select() {
+          console.log('Developer Tools clicked')
+        }
+      }], [{
+        label: 'Inspect Elements',
+        kbds: ['option', 'meta', 'C'],
+        select() {
+          console.log('Inspect Elements clicked')
+        }
+      }], [{
+        label: 'JavaScript Console',
+        kbds: ['option', 'meta', 'J'],
+        slot: 'custom',
+        select() {
+          console.log('JavaScript Console clicked')
+        }
+      }]]
+    }]
+  ]
+
+  const props = { portal: false, items }
+
+  it.each([
+    // Props
+    ['with items', { props }],
+    ['with disabled', { props: { ...props, disabled: true } }],
+    ['with class', { props: { ...props, class: 'min-w-96' } }],
+    ['with ui', { props: { ...props, ui: { linkLeadingIcon: 'size-4' } } }],
+    // Slots
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }],
+    ['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
+    ['with label slot', { props, slots: { label: () => 'Label slot' } }],
+    ['with trailing slot', { props, slots: { trailing: () => 'Trailing slot' } }],
+    ['with item slot', { props, slots: { item: () => 'Item slot' } }],
+    ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ContextMenuProps<typeof items[number][number]>, slots?: Partial<ContextMenuSlots<any>> }) => {
+    const html = await ComponentRender(nameOrHtml, options, ContextMenu)
+    expect(html).toMatchSnapshot()
+  })
+})

test/components/__snapshots__/ContextMenu.spec.ts.snap

@@ -0,0 +1,131 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ContextMenu > renders with class correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with custom slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with default slot correctly 1`] = `
+"Default slot
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with disabled correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with item slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with items correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with label slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with leading slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with trailing slot correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with ui correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;