feat: fixed the overlay layer can not work with reka-ui
parent
cc60ca9592
commit
0328594747
|
|
@ -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