feat: add placement for Drawer (#4958)

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

@@ -41,6 +41,7 @@ export class DrawerApi {
       loading: false,
       modal: true,
       openAutoFocus: false,
+      placement: 'right',
       showCancelButton: true,
       showConfirmButton: true,
       title: '',

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

@@ -4,6 +4,8 @@ import type { DrawerApi } from './drawer-api';
 
 import type { Component, Ref } from 'vue';
 
+export type DrawerPlacement = 'bottom' | 'left' | 'right' | 'top';
+
 export interface DrawerProps {
   /**
    * 取消按钮文字
@@ -72,6 +74,12 @@ export interface DrawerProps {
    * 是否自动聚焦
    */
   openAutoFocus?: boolean;
+
+  /**
+   * 抽屉位置
+   * @default right
+   */
+  placement?: DrawerPlacement;
   /**
    * 是否显示取消按钮
    * @default true

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

@@ -62,6 +62,7 @@ const {
   loading: showLoading,
   modal,
   openAutoFocus,
+  placement,
   showCancelButton,
   showConfirmButton,
   title,
@@ -119,11 +120,13 @@ function handleFocusOutside(e: Event) {
     <SheetContent
       :class="
         cn('flex w-[520px] flex-col', drawerClass, {
-          '!w-full': isMobile,
+          '!w-full': isMobile || placement === 'bottom' || placement === 'top',
+          'max-h-[100vh]': placement === 'bottom' || placement === 'top',
         })
       "
       :modal="modal"
       :open="state?.isOpen"
+      :side="placement"
       @close-auto-focus="handleFocusOutside"
       @escape-key-down="escapeKeyDown"
       @focus-outside="handleFocusOutside"