feat(ContextMenu): handle size prop (#130)

playground/app/pages/context-menu.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
+import theme from '#build/ui/context-menu'
+
 const items = [
+  [{
+    label: 'My account',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }],
   [{
     label: 'Appearance',
     children: [{
@@ -66,13 +74,20 @@ const items = [
   }]
 ]
 
+const sizes = Object.keys(theme.variants.size)
+
+const size = ref('md' as const)
+
 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>
+  <div class="flex items-center gap-2">
+    <USelectMenu v-model="size" :items="sizes" placeholder="Size" />
+    <UContextMenu :items="items" class="min-w-48" :size="size">
+      <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>
+  </div>
 </template>

src/runtime/components/ContextMenu.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
+import { tv, type VariantProps } from 'tailwind-variants'
 import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuTriggerProps, ContextMenuItemProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
@@ -29,7 +29,10 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'custom'>, Pic
   select?(e: Event): void
 }
 
+type ContextMenuVariants = VariantProps<typeof contextMenu>
+
 export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'>, Pick<ContextMenuTriggerProps, 'disabled'> {
+  size?: ContextMenuVariants['size']
   items?: T[] | T[][]
   /** The content of the menu. */
   content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
@@ -73,7 +76,9 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'modal'), emits)
 const contentProps = toRef(() => props.content as ContextMenuContentProps)
 const proxySlots = omit(slots, ['default']) as Record<string, ContextMenuSlots<T>[string]>
 
-const ui = computed(() => tv({ extend: contextMenu, slots: props.ui })())
+const ui = computed(() => tv({ extend: contextMenu, slots: props.ui })({
+  size: props.size
+}))
 </script>
 
 <template>

src/runtime/components/ContextMenuContent.vue

@@ -2,7 +2,7 @@
 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 '../types'
+import type { KbdProps, AvatarProps, ContextMenuItem, ContextMenuSlots } from '../types'
 
 const contextMenu = tv(theme)()
 
@@ -44,7 +44,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
   <DefineItemTemplate v-slot="{ item, active, index }">
     <slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
       <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="(item as T)" :active="active" :index="index">
-        <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ active })" />
+        <UAvatar v-if="item.avatar" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ active })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ active })" />
       </slot>
 
@@ -60,7 +60,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
         <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="(item as T)" :active="active" :index="index">
           <UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ active })" />
           <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds()">
-            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" size="md" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="(ui.itemTrailingKbdsSize() as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
       </span>

src/theme/context-menu.ts

@@ -4,14 +4,16 @@ export default (options: Required<ModuleOptions>) => ({
   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]',
     group: 'p-1 isolate',
-    label: 'w-full flex items-center gap-1.5 p-1.5 text-sm font-semibold text-gray-900 dark:text-white',
+    label: 'w-full flex items-center font-semibold text-gray-900 dark:text-white',
     separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
-    item: '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',
-    itemLeadingIcon: 'shrink-0 size-5',
+    item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75',
+    itemLeadingIcon: 'shrink-0',
     itemLeadingAvatar: 'shrink-0',
+    itemLeadingAvatarSize: '',
     itemTrailing: 'ms-auto inline-flex',
-    itemTrailingIcon: 'shrink-0 size-5',
-    itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
+    itemTrailingIcon: 'shrink-0',
+    itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0',
+    itemTrailingKbdsSize: '',
     itemLabel: 'truncate',
     itemLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500'
   },
@@ -25,6 +27,56 @@ export default (options: Required<ModuleOptions>) => ({
         item: ['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', options.transitions && 'transition-colors before:transition-colors'],
         itemLeadingIcon: ['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', options.transitions && 'transition-colors']
       }
+    },
+    size: {
+      xs: {
+        label: 'gap-1 p-1 text-xs',
+        item: 'gap-1 p-1 text-xs',
+        itemLeadingIcon: 'size-4',
+        itemLeadingAvatarSize: '3xs',
+        itemTrailingIcon: 'size-4',
+        itemTrailingKbds: 'gap-0.5',
+        itemTrailingKbdsSize: 'sm'
+      },
+      sm: {
+        label: 'gap-1.5 p-1.5 text-xs',
+        item: 'gap-1.5 p-1.5 text-xs',
+        itemLeadingIcon: 'size-4',
+        itemLeadingAvatarSize: '3xs',
+        itemTrailingIcon: 'size-4',
+        itemTrailingKbds: 'gap-0.5',
+        itemTrailingKbdsSize: 'sm'
+      },
+      md: {
+        label: 'gap-1.5 p-1.5 text-sm',
+        item: 'gap-1.5 p-1.5 text-sm',
+        itemLeadingIcon: 'size-5',
+        itemLeadingAvatarSize: '2xs',
+        itemTrailingIcon: 'size-5',
+        itemTrailingKbds: 'gap-0.5',
+        itemTrailingKbdsSize: 'md'
+      },
+      lg: {
+        label: 'gap-2 p-2 text-sm',
+        item: 'gap-2 p-2 text-sm',
+        itemLeadingIcon: 'size-5',
+        itemLeadingAvatarSize: '2xs',
+        itemTrailingIcon: 'size-5',
+        itemTrailingKbds: 'gap-1',
+        itemTrailingKbdsSize: 'md'
+      },
+      xl: {
+        label: 'gap-2 p-2 text-base',
+        item: 'gap-2 p-2 text-base',
+        itemLeadingIcon: 'size-6',
+        itemLeadingAvatarSize: 'xs',
+        itemTrailingIcon: 'size-6',
+        itemTrailingKbds: 'gap-1',
+        itemTrailingKbdsSize: 'lg'
+      }
     }
+  },
+  defaultVariants: {
+    size: 'md'
   }
 })

test/components/ContextMenu.spec.ts

@@ -1,9 +1,12 @@
 import { describe, it, expect } from 'vitest'
 import ContextMenu, { type ContextMenuProps, type ContextMenuSlots } from '../../src/runtime/components/ContextMenu.vue'
 import ComponentRender from '../component-render'
+import theme from '#build/ui/context-menu'
 
 // FIXME: Can't force open state
 describe('ContextMenu', () => {
+  const sizes = Object.keys(theme.variants.size as any)
+
   const items = [
     [{
       label: 'Appearance',
@@ -78,6 +81,7 @@ describe('ContextMenu', () => {
     // Props
     ['with items', { props }],
     ['with disabled', { props: { ...props, disabled: true } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
     ['with class', { props: { ...props, class: 'min-w-96' } }],
     ['with ui', { props: { ...props, ui: { itemLeadingIcon: 'size-4' } } }],
     // Slots

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

@@ -114,6 +114,71 @@ exports[`ContextMenu > renders with items correctly 1`] = `
 
 
 
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with size lg correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with size md correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with size sm correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with size xl correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
+<!--teleport end-->"
+`;
+
+exports[`ContextMenu > renders with size xs correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<!---->
+
+
+
 <!--teleport end-->"
 `;