yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: fixed regression of modal for element plus (#7999)

pull/355/head^2
HaroldZhangCode91 2026-06-03 13:27:12 +08:00 committed by GitHub
parent 0eb72ca4fd
commit 79707a2ebd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 15 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/@core/ui-kit/popup-ui/src/alert/alert.vue
View File

@ -156,7 +156,7 @@ async function handleOpenChange(val: boolean) {
:class="
cn(
containerClass,
'inset-x-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-130 sm:max-w-[80%] sm:rounded-(--radius)',
'flex max-h-[80%] flex-col p-0 duration-300 sm:w-130 sm:max-w-[80%] sm:rounded-(--radius)',
{
'border border-border': bordered,
'shadow-3xl': !bordered,
@ -197,7 +197,7 @@ async function handleOpenChange(val: boolean) {
<component
:is="components.DefaultButton || VbenButton"
:disabled="loading"
variant="ghost"
variant="outline"
@click="handleCancel"
>
{{ cancelText || $t('cancel') }}

2
packages/@core/ui-kit/popup-ui/src/modal/modal.vue
View File

@ -344,7 +344,7 @@ function handleClosed() {
<component
:is="components.DefaultButton || VbenButton"
v-if="showCancelButton"
variant="ghost"
variant="outline"
:disabled="submitting"
@click="() => modalApi?.onCancel()"
>

18
packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue
View File

@ -1,27 +1,13 @@
<script setup lang="ts">
import type { AlertDialogActionProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { cn } from '@vben-core/shared/utils';
import { reactiveOmit } from '@vueuse/core';
import { AlertDialogAction } from 'reka-ui';
import { buttonVariants } from '../button';
const props = defineProps<
AlertDialogActionProps & { class?: HTMLAttributes['class'] }
>();
const delegatedProps = reactiveOmit(props, 'class');
const props = defineProps<AlertDialogActionProps>();
</script>
<template>
<AlertDialogAction
v-bind="delegatedProps"
:class="cn(buttonVariants(), props.class)"
>
<AlertDialogAction v-bind="props">
<slot></slot>
</AlertDialogAction>
</template>

20
packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue
View File

@ -1,29 +1,13 @@
<script setup lang="ts">
import type { AlertDialogCancelProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { cn } from '@vben-core/shared/utils';
import { reactiveOmit } from '@vueuse/core';
import { AlertDialogCancel } from 'reka-ui';
import { buttonVariants } from '../button';
const props = defineProps<
AlertDialogCancelProps & { class?: HTMLAttributes['class'] }
>();
const delegatedProps = reactiveOmit(props, 'class');
const props = defineProps<AlertDialogCancelProps>();
</script>
<template>
<AlertDialogCancel
v-bind="delegatedProps"
:class="
cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)
"
>
<AlertDialogCancel v-bind="props">
<slot></slot>
</AlertDialogCancel>
</template>

7
packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
View File

@ -5,6 +5,7 @@ import type { ClassType } from '@vben-core/typings';
import { ref } from 'vue';
import { useScrollLock } from '@vben-core/composables';
import { cn } from '@vben-core/shared/utils';
import { reactiveOmit } from '@vueuse/core';
@ -36,6 +37,8 @@ const emits = defineEmits<
AlertDialogContentEmits & { close: []; closed: []; opened: [] }
>();
useScrollLock();
const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
@ -61,7 +64,7 @@ defineExpose({
<Transition name="fade" appear>
<AlertDialogOverlay
data-slot="alert-dialog-overlay"
class="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"
class="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-popup bg-overlay"
v-if="open && modal"
:style="{
...(zIndex ? { zIndex } : {}),
@ -80,7 +83,7 @@ defineExpose({
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
{
'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
!centered,

3
packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
View File

@ -5,6 +5,7 @@ import type { ClassType } from '@vben-core/typings';
import { computed, ref } from 'vue';
import { useScrollLock } from '@vben-core/composables';
import { cn } from '@vben-core/shared/utils';
import { X } from '@lucide/vue';
@ -63,6 +64,8 @@ const position = computed(() => {
return isAppendToBody() ? 'fixed' : 'absolute';
});
useScrollLock();
const forwarded = useForwardPropsEmits(delegatedProps, emits);
const contentRef = ref<InstanceType<typeof DialogContent> | null>(null);