Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

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

@@ -1,3 +1,5 @@
+import type { ClassType } from '@vben-core/typings';
+
 import type { DrawerApi } from './drawer-api';
 
 import type { Component, Ref } from 'vue';
@@ -7,7 +9,7 @@ export interface DrawerProps {
    * 取消按钮文字
    */
   cancelText?: string;
-  class?: string;
+  class?: ClassType;
   /**
    * 是否显示右上角的关闭按钮
    * @default true
@@ -42,6 +44,20 @@ export interface DrawerProps {
    * @default true
    */
   footer?: boolean;
+  /**
+   * 弹窗底部样式
+   */
+  footerClass?: ClassType;
+  /**
+   * 是否显示顶栏
+   * @default true
+   */
+  header?: boolean;
+  /**
+   * 弹窗头部样式
+   */
+  headerClass?: ClassType;
+
   /**
    * 弹窗是否显示
    * @default false

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

@@ -56,6 +56,9 @@ const {
   contentClass,
   description,
   footer: showFooter,
+  footerClass,
+  header: showHeader,
+  headerClass,
   loading: showLoading,
   modal,
   openAutoFocus,
@@ -129,10 +132,15 @@ function handleFocusOutside(e: Event) {
       @pointer-down-outside="pointerDownOutside"
     >
       <SheetHeader
+        v-if="showHeader"
         :class="
-          cn('!flex flex-row items-center justify-between border-b px-6 py-5', {
-            'px-4 py-3': closable,
-          })
+          cn(
+            '!flex flex-row items-center justify-between border-b px-6 py-5',
+            headerClass,
+            {
+              'px-4 py-3': closable,
+            },
+          )
         "
       >
         <div>
@@ -171,6 +179,12 @@ function handleFocusOutside(e: Event) {
         </div>
       </SheetHeader>
 
+      <template v-else>
+        <VisuallyHidden>
+          <SheetTitle />
+          <SheetDescription />
+        </VisuallyHidden>
+      </template>
       <div
         ref="wrapperRef"
         :class="
@@ -186,7 +200,12 @@ function handleFocusOutside(e: Event) {
 
       <SheetFooter
         v-if="showFooter"
-        class="w-full flex-row items-center justify-end border-t p-2 px-3"
+        :class="
+          cn(
+            'w-full flex-row items-center justify-end border-t p-2 px-3',
+            footerClass,
+          )
+        "
       >
         <slot name="prepend-footer"></slot>
         <slot name="footer">