DropdownMenuCheckboxItem.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <script setup lang="ts">
  2. import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
  3. import type { HTMLAttributes } from "vue"
  4. import { reactiveOmit } from "@vueuse/core"
  5. import { Check } from "lucide-vue-next"
  6. import {
  7. DropdownMenuCheckboxItem,
  8. DropdownMenuItemIndicator,
  9. useForwardPropsEmits,
  10. } from "reka-ui"
  11. import { cn } from '@/Packages/Shadcn/Lib/utils'
  12. const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
  13. const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
  14. const delegatedProps = reactiveOmit(props, "class")
  15. const forwarded = useForwardPropsEmits(delegatedProps, emits)
  16. </script>
  17. <template>
  18. <DropdownMenuCheckboxItem
  19. data-slot="dropdown-menu-checkbox-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. <Check class="size-4" />
  29. </DropdownMenuItemIndicator>
  30. </span>
  31. <slot />
  32. </DropdownMenuCheckboxItem>
  33. </template>