SheetOverlay.vue 718 B

123456789101112131415161718192021
  1. <script setup lang="ts">
  2. import type { DialogOverlayProps } from "reka-ui"
  3. import type { HTMLAttributes } from "vue"
  4. import { reactiveOmit } from "@vueuse/core"
  5. import { DialogOverlay } from "reka-ui"
  6. import { cn } from '@/Packages/Shadcn/Lib/utils'
  7. const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
  8. const delegatedProps = reactiveOmit(props, "class")
  9. </script>
  10. <template>
  11. <DialogOverlay
  12. data-slot="sheet-overlay"
  13. :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
  14. v-bind="delegatedProps"
  15. >
  16. <slot />
  17. </DialogOverlay>
  18. </template>