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

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

@@ -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') }}

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

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

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

@@ -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>();
-
-const props = defineProps<
-  AlertDialogActionProps & { class?: HTMLAttributes['class'] }
->();
-
-const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogAction
+  <AlertDialogAction v-bind="props">
-    v-bind="delegatedProps"
-    :class="cn(buttonVariants(), props.class)"
-  >
     <slot></slot>
   </AlertDialogAction>
 </template>

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

@@ -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>();
-
-const props = defineProps<
-  AlertDialogCancelProps & { class?: HTMLAttributes['class'] }
->();
-
-const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogCancel
+  <AlertDialogCancel v-bind="props">
-    v-bind="delegatedProps"
-    :class="
-      cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)
-    "
-  >
     <slot></slot>
   </AlertDialogCancel>
 </template>

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

@@ -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,

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

@@ -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);