1 changed files with 3 additions and 26 deletions
@ -1,34 +1,11 @@ |
|||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import type { DialogOverlayProps } from 'reka-ui'; |
import { inject } from 'vue'; |
||||
|
|
||||
import type { HTMLAttributes } from 'vue'; |
|
||||
|
|
||||
import { useScrollLock } from '@vben-core/composables'; |
import { useScrollLock } from '@vben-core/composables'; |
||||
import { cn } from '@vben-core/shared/utils'; |
|
||||
|
|
||||
import { reactiveOmit } from '@vueuse/core'; |
|
||||
import { DialogOverlay } from 'reka-ui'; |
|
||||
|
|
||||
const props = defineProps< |
|
||||
DialogOverlayProps & { class?: HTMLAttributes['class'] } |
|
||||
>(); |
|
||||
|
|
||||
const delegatedProps = reactiveOmit(props, 'class'); |
|
||||
|
|
||||
useScrollLock(); |
useScrollLock(); |
||||
|
const id = inject('DISMISSABLE_MODAL_ID'); |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<DialogOverlay |
<div :data-dismissable-modal="id" class="z-popup bg-overlay inset-0 fixed"></div> |
||||
data-slot="dialog-overlay" |
|
||||
v-bind="delegatedProps" |
|
||||
:class=" |
|
||||
cn( |
|
||||
'z-popup bg-overlay inset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed', |
|
||||
props.class, |
|
||||
) |
|
||||
" |
|
||||
> |
|
||||
<slot></slot> |
|
||||
</DialogOverlay> |
|
||||
</template> |
</template> |
||||
|
|||||
Loading…
Reference in new issue