DropdownMenuSubTrigger.vue 1.0 KB

12345678910111213141516171819202122232425262728293031
  1. <script setup lang="ts">
  2. import type { DropdownMenuSubTriggerProps } from "reka-ui"
  3. import type { HTMLAttributes } from "vue"
  4. import { reactiveOmit } from "@vueuse/core"
  5. import { ChevronRight } from "lucide-vue-next"
  6. import {
  7. DropdownMenuSubTrigger,
  8. useForwardProps,
  9. } from "reka-ui"
  10. import { cn } from '@/Packages/Shadcn/Lib/utils'
  11. const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
  12. const delegatedProps = reactiveOmit(props, "class", "inset")
  13. const forwardedProps = useForwardProps(delegatedProps)
  14. </script>
  15. <template>
  16. <DropdownMenuSubTrigger
  17. data-slot="dropdown-menu-sub-trigger"
  18. v-bind="forwardedProps"
  19. :class="cn(
  20. 'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
  21. props.class,
  22. )"
  23. >
  24. <slot />
  25. <ChevronRight class="ml-auto size-4" />
  26. </DropdownMenuSubTrigger>
  27. </template>