DropdownMenuRadioItem.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <script setup lang="ts">
  2. import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
  3. import type { HTMLAttributes } from "vue"
  4. import { reactiveOmit } from "@vueuse/core"
  5. import { Circle } from "lucide-vue-next"
  6. import {
  7. DropdownMenuItemIndicator,
  8. DropdownMenuRadioItem,
  9. useForwardPropsEmits,
  10. } from "reka-ui"
  11. import { cn } from '@/Packages/Shadcn/Lib/utils'
  12. const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
  13. const emits = defineEmits<DropdownMenuRadioItemEmits>()
  14. const delegatedProps = reactiveOmit(props, "class")
  15. const forwarded = useForwardPropsEmits(delegatedProps, emits)
  16. </script>
  17. <template>
  18. <DropdownMenuRadioItem
  19. data-slot="dropdown-menu-radio-item"
  20. v-bind="forwarded"
  21. :class="cn(
  22. 'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
  23. props.class,
  24. )"
  25. >
  26. <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
  27. <DropdownMenuItemIndicator>
  28. <Circle class="size-2 fill-current" />
  29. </DropdownMenuItemIndicator>
  30. </span>
  31. <slot />
  32. </DropdownMenuRadioItem>
  33. </template>