diff --git a/apps/www/src/App.vue b/apps/www/src/App.vue index 7b0960d1..088d0c05 100644 --- a/apps/www/src/App.vue +++ b/apps/www/src/App.vue @@ -4,6 +4,7 @@ import PopoverDemo from '@/registry/default/examples/PopoverDemo.vue' import DialogDemo from '@/registry/default/examples/DialogDemo.vue' import AlertDialogDemo from '@/registry/default/examples/AlertDialogDemo.vue' import SelectDemo from '@/registry/default/examples/SelectDemo.vue' +import DropdownMenuDemo from '@/registry/default/examples/DropdownMenuDemo.vue' diff --git a/apps/www/src/lib/registry/default/examples/DropdownMenuDemo.vue b/apps/www/src/lib/registry/default/examples/DropdownMenuDemo.vue new file mode 100644 index 00000000..12d9d5c3 --- /dev/null +++ b/apps/www/src/lib/registry/default/examples/DropdownMenuDemo.vue @@ -0,0 +1,110 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu.tsx b/apps/www/src/lib/registry/default/ui/dropdown-menu.tsx new file mode 100644 index 00000000..b70e8a37 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/dropdown-menu.tsx @@ -0,0 +1,256 @@ +import { + DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, + DropdownMenuContent as DropdownMenuContentPrimitive, type DropdownMenuContentProps, + DropdownMenuGroup as DropdownMenuGroupPrimitive, + DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive, + DropdownMenuItem as DropdownMenuItemPrimitive, type DropdownMenuItemProps, + DropdownMenuLabel as DropdownMenuLabelPrimitive, type DropdownMenuLabelProps, + DropdownMenuPortal as DropdownMenuPortalPrimitive, + DropdownMenuRadioGroup as DropdownMenuRadioGroupPrimitive, + DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive, type DropdownMenuRadioItemProps, + DropdownMenuRoot as DropdownMenuRootPrimitive, + DropdownMenuSeparator as DropdownMenuSeparatorPrimitive, type DropdownMenuSeparatorProps, + DropdownMenuSubContent as DropdownMenuSubContentPrimitive, type DropdownMenuSubContentProps, + DropdownMenuSub as DropdownMenuSubPrimitive, + DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive, type DropdownMenuSubTriggerProps, + DropdownMenuTrigger as DropdownMenuTriggerPrimitive, +} from 'radix-vue' +import { defineComponent } from 'vue' +import { Check, ChevronRight, Circle } from 'lucide-vue-next' +import { cn, convertToComponent, useEmitAsProps } from '@/utils' + +const ChevronRightIcon = convertToComponent(ChevronRight) +const CheckIcon = convertToComponent(Check) +const CircleIcon = convertToComponent(Circle) + +const DropdownMenu = DropdownMenuRootPrimitive +const DropdownMenuTrigger = DropdownMenuTriggerPrimitive +const DropdownMenuGroup = DropdownMenuGroupPrimitive +const DropdownMenuPortal = DropdownMenuPortalPrimitive +const DropdownMenuSub = DropdownMenuSubPrimitive +const DropdownMenuRadioGroup = DropdownMenuRadioGroupPrimitive + +const DropdownMenuSubTrigger = defineComponent< + DropdownMenuSubTriggerProps & { + inset?: boolean + } +>( + (props, { attrs, slots }) => { + return () => ( + + {slots.default?.()} + + + ) + }, + { + name: 'DropdownMenuSubTrigger', + }, +) + +const DropdownMenuSubContent = defineComponent( + (props, { attrs, emit, slots }) => { + const emitsAsProps = useEmitAsProps(emit) + return () => ( + + {slots.default?.()} + + ) + }, + { + name: 'DropdownMenuSubContent', + emits: DropdownMenuSubContentPrimitive.emits, + }, +) + +const DropdownMenuContent = defineComponent( + (props, { attrs, emit, slots }) => { + const emitsAsProps = useEmitAsProps(emit) + return () => ( + + + {slots.default?.()} + + + ) + }, + { + name: 'DropdownMenuContent', + emits: DropdownMenuContentPrimitive.emits, + }, +) + +const DropdownMenuItem = defineComponent< + DropdownMenuItemProps & { + inset?: boolean + } +>( + (props, { attrs, emit, slots }) => { + const emitsAsProps = useEmitAsProps(emit) + return () => ( + + {slots.default?.()} + + ) + }, + { + name: 'DropdownMenuItem', + emits: DropdownMenuItemPrimitive.emits, + }, +) + +const DropdownMenuCheckboxItem = defineComponent( + (props, { attrs, slots, emit }) => { + const emitsAsProps = useEmitAsProps(emit) + return () => ( + + + + + + + {slots.default?.()} + + ) + }, + { name: 'DropdownMenuCheckboxItem', emits: DropdownMenuItemPrimitive.emits }, +) + +const DropdownMenuRadioItem = defineComponent( + (props, { attrs, slots, emit }) => { + const emitsAsProps = useEmitAsProps(emit) + return () => ( + + + + + + + {slots.default?.()} + + ) + }, + { + name: 'DropdownMenuRadioItem', + emits: DropdownMenuRadioItemPrimitive.emits, + }, +) + +const DropdownMenuLabel = defineComponent< + DropdownMenuLabelProps & { + inset?: boolean + } +>( + (props, { attrs, slots }) => { + return () => ( + + {slots.default?.()} + + ) + }, + { + name: 'DropdownMenuLabel', + }, +) + +const DropdownMenuSeparator = defineComponent( + (props, { attrs }) => { + return () => ( + + ) + }, + { + name: 'DropdownMenuSeparator', + }, +) + +const DropdownMenuShortcut = defineComponent( + (props, { attrs }) => { + return () => ( + + ) + }, + { + name: 'DropdownMenuShortcut', + }, +) + +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuGroup, + DropdownMenuPortal, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuRadioGroup, +}