Chore: 处理了Vben封装的Drawer,Modal组件的一些类型错误 (vbenjs#3064)

* chore: rm unuse params

* chore(Modal): getCurrentInstance的uid类型为number

* chore(Drawer): 调整drawer组件的一些类型问题

* chore(Drawer): 移除多余的classname配置

* chore(Drawer): 修复getContainer和antd4 drawer组件类型不一致

* fix(AppSearchModal): 调整setRefs函数的类型

packages/hooks/src/useRefs.ts

@@ -1,18 +1,18 @@
-import type { Ref } from 'vue';
+import type { ComponentPublicInstance, Ref } from 'vue';
 import { onBeforeUpdate, shallowRef } from 'vue';
 
 function useRefs<T = HTMLElement>(): {
   refs: Ref<T[]>;
-  setRefs: (index: number) => (el: T) => void;
+  setRefs: (index: number) => (el: Element | ComponentPublicInstance | null) => void;
 } {
   const refs = shallowRef([]) as Ref<T[]>;
 
   onBeforeUpdate(() => {
     refs.value = [];
   });
 
-  const setRefs = (index: number) => (el: T) => {
-    refs.value[index] = el;
+  const setRefs = (index: number) => (el: Element | ComponentPublicInstance | null) => {
+    refs.value[index] = el as T;
   };
 
   return {

src/components/Drawer/src/BasicDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <Drawer :rootClassName="prefixCls" @close="onClose" v-bind="getBindValues">
+  <Drawer @close="onClose" v-bind="getBindValues">
     <template #title v-if="!$slots.title">
       <DrawerHeader
         :title="getMergeProps.title"

src/components/Drawer/src/typing.ts

@@ -3,7 +3,7 @@ import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
 import type { ScrollContainerOptions } from '/@/components/Container/index';
 
 export interface DrawerInstance {
-  setDrawerProps: (props: Partial<DrawerProps> | boolean) => void;
+  setDrawerProps: (props: Partial<DrawerProps>) => void;
   emitOpen?: (open: boolean, uid: number) => void;
 }
 
@@ -13,7 +13,7 @@ export interface ReturnMethods extends DrawerInstance {
   getOpen?: ComputedRef<boolean>;
 }
 
-export type RegisterFn = (drawerInstance: DrawerInstance, uuid?: string) => void;
+export type RegisterFn = (drawerInstance: DrawerInstance, uuid: number) => void;
 
 export interface ReturnInnerMethods extends DrawerInstance {
   closeDrawer: () => void;
@@ -100,7 +100,7 @@ export interface DrawerProps extends DrawerFooterProps {
    * @default 'body'
    * @type any ( HTMLElement| () => HTMLElement | string)
    */
-  getContainer?: () => HTMLElement | string;
+  getContainer?: string | false | HTMLElement | (() => HTMLElement);
 
   /**
    * Whether to show mask or not.

src/components/Drawer/src/useDrawer.ts

@@ -34,9 +34,9 @@ export function useDrawer(): UseDrawerReturnType {
   }
   const drawer = ref<DrawerInstance | null>(null);
   const loaded = ref<Nullable<boolean>>(false);
-  const uid = ref<string>('');
+  const uid = ref<number>(0);
 
-  function register(drawerInstance: DrawerInstance, uuid: string) {
+  function register(drawerInstance: DrawerInstance, uuid: number) {
     isProdMode() &&
       tryOnUnmounted(() => {
         drawer.value = null;
@@ -100,7 +100,7 @@ export function useDrawer(): UseDrawerReturnType {
 export const useDrawerInner = (callbackFn?: Fn): UseDrawerInnerReturnType => {
   const drawerInstanceRef = ref<Nullable<DrawerInstance>>(null);
   const currentInstance = getCurrentInstance();
-  const uidRef = ref<string>('');
+  const uidRef = ref<number>(0);
 
   if (!getCurrentInstance()) {
     throw new Error('useDrawerInner() can only be used inside setup() or functional components!');
@@ -115,7 +115,7 @@ export const useDrawerInner = (callbackFn?: Fn): UseDrawerInnerReturnType => {
     return instance;
   };
 
-  const register = (modalInstance: DrawerInstance, uuid: string) => {
+  const register = (modalInstance: DrawerInstance, uuid: number) => {
     isProdMode() &&
       tryOnUnmounted(() => {
         drawerInstanceRef.value = null;
@@ -153,7 +153,7 @@ export const useDrawerInner = (callbackFn?: Fn): UseDrawerInnerReturnType => {
         getInstance()?.setDrawerProps({ open: false });
       },
 
-      setDrawerProps: (props: Partial<DrawerProps> | boolean) => {
+      setDrawerProps: (props: Partial<DrawerProps>) => {
         getInstance()?.setDrawerProps(props);
       },
     },

src/components/Modal/src/components/ModalWrapper.vue

@@ -53,7 +53,7 @@
 
       let stopElResizeFn: AnyFunction = () => {};
 
-      useWindowSizeFn(setModalHeight.bind(null, false));
+      useWindowSizeFn(setModalHeight.bind(null));
 
       useMutationObserver(
         spinRef,

src/components/Modal/src/hooks/useModal.ts

@@ -32,9 +32,9 @@ const openData = reactive<{ [key: number]: boolean }>({});
 export function useModal(): UseModalReturnType {
   const modal = ref<Nullable<ModalMethods>>(null);
   const loaded = ref<Nullable<boolean>>(false);
-  const uid = ref<string>('');
+  const uid = ref<number>(0);
 
-  function register(modalMethod: ModalMethods, uuid: string) {
+  function register(modalMethod: ModalMethods, uuid: number) {
     if (!getCurrentInstance()) {
       throw new Error('useModal() can only be used inside setup() or functional components!');
     }
@@ -43,7 +43,7 @@ export function useModal(): UseModalReturnType {
       onUnmounted(() => {
         modal.value = null;
         loaded.value = false;
-        dataTransfer[unref(uid)] = null;
+        dataTransfer[String(unref(uid))] = null;
       });
     if (unref(loaded) && isProdMode() && modalMethod === unref(modal)) return;
 
@@ -103,7 +103,7 @@ export function useModal(): UseModalReturnType {
 export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
   const modalInstanceRef = ref<Nullable<ModalMethods>>(null);
   const currentInstance = getCurrentInstance();
-  const uidRef = ref<string>('');
+  const uidRef = ref<number>(0);
 
   const getInstance = () => {
     const instance = unref(modalInstanceRef);
@@ -113,7 +113,7 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
     return instance;
   };
 
-  const register = (modalInstance: ModalMethods, uuid: string) => {
+  const register = (modalInstance: ModalMethods, uuid: number) => {
     isProdMode() &&
       tryOnUnmounted(() => {
         modalInstanceRef.value = null;

src/components/Modal/src/typing.ts

@@ -9,7 +9,7 @@ export interface ModalMethods {
   redoModalHeight?: () => void;
 }
 
-export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
+export type RegisterFn = (modalMethods: ModalMethods, uuid: number) => void;
 
 export interface ReturnMethods extends ModalMethods {
   openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void;