fix: fixed some style issues (#4379)

packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts

@@ -29,10 +29,12 @@ export class DrawerApi {
     } = options;
 
     const defaultState: DrawerState = {
+      class: '',
       closable: true,
       closeOnClickModal: true,
       closeOnPressEscape: true,
       confirmLoading: false,
+      contentClass: '',
       footer: true,
       isOpen: false,
       loading: false,

packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts

@@ -7,6 +7,7 @@ export interface DrawerProps {
    * 取消按钮文字
    */
   cancelText?: string;
+  class?: string;
   /**
    * 是否显示右上角的关闭按钮
    * @default true
@@ -31,6 +32,7 @@ export interface DrawerProps {
    * 确定按钮文字
    */
   confirmText?: string;
+  contentClass?: string;
   /**
    * 弹窗描述
    */

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

@@ -26,14 +26,10 @@ import {
 import { cn } from '@vben-core/shared/utils';
 
 interface Props extends DrawerProps {
-  class?: string;
-  contentClass?: string;
   drawerApi?: ExtendedDrawerApi;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  contentClass: '',
   drawerApi: undefined,
 });
 
@@ -44,11 +40,13 @@ const state = props.drawerApi?.useStore?.();
 
 const {
   cancelText,
+  class: drawerClass,
   closable,
   closeOnClickModal,
   closeOnPressEscape,
   confirmLoading,
   confirmText,
+  contentClass,
   description,
   footer: showFooter,
   loading: showLoading,
@@ -98,7 +96,7 @@ function pointerDownOutside(e: Event) {
   >
     <SheetContent
       :class="
-        cn('flex w-[520px] flex-col', props.class, {
+        cn('flex w-[520px] flex-col', drawerClass, {
           '!w-full': isMobile,
         })
       "

packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts

@@ -30,14 +30,18 @@ export class ModalApi {
 
     const defaultState: ModalState = {
       centered: false,
+      class: '',
       closeOnClickModal: true,
       closeOnPressEscape: true,
       confirmLoading: false,
+      contentClass: '',
       draggable: false,
       footer: true,
+      footerClass: '',
       fullscreen: false,
       fullscreenButton: true,
       header: true,
+      headerClass: '',
       isOpen: false,
       loading: false,
       modal: true,

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

@@ -12,6 +12,7 @@ export interface ModalProps {
    * @default false
    */
   centered?: boolean;
+  class?: string;
   /**
    * 是否显示右上角的关闭按钮
    * @default true
@@ -36,6 +37,7 @@ export interface ModalProps {
    * 确定按钮文字
    */
   confirmText?: string;
+  contentClass?: string;
   /**
    * 弹窗描述
    */
@@ -50,6 +52,7 @@ export interface ModalProps {
    * @default true
    */
   footer?: boolean;
+  footerClass?: string;
   /**
    * 是否全屏
    * @default false
@@ -65,6 +68,7 @@ export interface ModalProps {
    * @default true
    */
   header?: boolean;
+  headerClass?: string;
   /**
    * 弹窗是否显示
    * @default false

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

@@ -27,18 +27,10 @@ import { cn } from '@vben-core/shared/utils';
 import { useModalDraggable } from './use-modal-draggable';
 
 interface Props extends ModalProps {
-  class?: string;
-  contentClass?: string;
-  footerClass?: string;
-  headerClass?: string;
   modalApi?: ExtendedModalApi;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  contentClass: '',
-  footerClass: '',
-  headerClass: '',
   modalApi: undefined,
 });
 
@@ -55,17 +47,21 @@ const state = props.modalApi?.useStore?.();
 const {
   cancelText,
   centered,
+  class: modalClass,
   closable,
   closeOnClickModal,
   closeOnPressEscape,
   confirmLoading,
   confirmText,
+  contentClass,
   description,
   draggable,
   footer: showFooter,
+  footerClass,
   fullscreen,
   fullscreenButton,
   header,
+  headerClass,
   loading: showLoading,
   modal,
   openAutoFocus,
@@ -161,7 +157,7 @@ function pointerDownOutside(e: Event) {
       :class="
         cn(
           'border-border left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col border p-0',
-          props.class,
+          modalClass,
           {
             'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
               shouldFullscreen,
@@ -186,7 +182,7 @@ function pointerDownOutside(e: Event) {
               hidden: !header,
               'cursor-move select-none': shouldDraggable,
             },
-            props.headerClass,
+            headerClass,
           )
         "
       >
@@ -240,10 +236,7 @@ function pointerDownOutside(e: Event) {
         v-if="showFooter"
         ref="footerRef"
         :class="
-          cn(
-            'flex-row items-center justify-end border-t p-2',
-            props.footerClass,
-          )
+          cn('flex-row items-center justify-end border-t p-2', footerClass)
         "
       >
         <slot name="prepend-footer"></slot>