Separator.vue 789 B

1234567891011121314151617181920212223242526272829
  1. <script setup lang="ts">
  2. import type { SeparatorProps } from "reka-ui"
  3. import type { HTMLAttributes } from "vue"
  4. import { reactiveOmit } from "@vueuse/core"
  5. import { Separator } from "reka-ui"
  6. import { cn } from '@/Packages/Shadcn/Lib/utils'
  7. const props = withDefaults(defineProps<
  8. SeparatorProps & { class?: HTMLAttributes["class"] }
  9. >(), {
  10. orientation: "horizontal",
  11. decorative: true,
  12. })
  13. const delegatedProps = reactiveOmit(props, "class")
  14. </script>
  15. <template>
  16. <Separator
  17. data-slot="separator-root"
  18. v-bind="delegatedProps"
  19. :class="
  20. cn(
  21. 'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
  22. props.class,
  23. )
  24. "
  25. />
  26. </template>