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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vben-admin",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": {
     "url": "https://github.com/vbenjs/vue-vben-admin/issues"

packages/hooks/src/useRefs.ts

@@ -1,9 +1,9 @@
-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[]>;
 
@@ -11,8 +11,8 @@ function useRefs<T = HTMLElement>(): {
     refs.value = [];
   });
 
-  const setRefs = (index: number) => (el: T) => {
+  const setRefs = (index: number) => (el: Element | ComponentPublicInstance | null) => {
-    refs.value[index] = el;
+    refs.value[index] = el as T;
   };
 
   return {

src/components/ContextMenu/src/ContextMenu.vue

@@ -59,12 +59,12 @@
         const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
         const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
         return {
-          ...styles,
           position: 'absolute',
           width: `${width}px`,
           left: `${left + 1}px`,
           top: `${top + 1}px`,
           zIndex: 9999,
+          ...styles, // Not the first, fix options.styles.width not working
         };
       });
 
@@ -127,11 +127,15 @@
         }
         const { items } = props;
         return (
-          <div class={prefixCls}>
+          <Menu
-            <Menu inlineIndent={12} mode="vertical" ref={wrapRef} style={unref(getStyle)}>
+            inlineIndent={12}
-              {renderMenuItem(items)}
+            mode="vertical"
-            </Menu>
+            class={prefixCls}
-          </div>
+            ref={wrapRef}
+            style={unref(getStyle)}
+          >
+            {renderMenuItem(items)}
+          </Menu>
         );
       };
     },
@@ -147,7 +151,7 @@
   .item-style() {
     li {
       display: inline-block;
-      width: 100%;
+      width: 100% !important;
       height: @default-height;
       margin: 0 !important;
       line-height: @default-height;
@@ -157,6 +161,8 @@
       }
 
       > div {
+        width: 100% !important;
+        height: 100% !important;
         margin: 0 !important;
       }
 
@@ -176,10 +182,12 @@
     width: 156px;
     margin: 0;
     border: 1px solid rgb(0 0 0 / 8%);
-    border-radius: 0.25rem;
+    border-radius: 8px;
     background-clip: padding-box;
     background-color: @component-background;
-    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
+    box-shadow:
+      0 2px 2px 0 rgb(0 0 0 / 14%),
+      0 3px 1px -2px rgb(0 0 0 / 10%),
       0 1px 5px 0 rgb(0 0 0 / 6%);
     list-style: none;
     user-select: none;

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/Form/src/components/ApiSelect.vue

@@ -144,6 +144,7 @@
       }
 
       function handleChange(_, ...args) {
+        emit('change', args[0] ? args[0].value : undefined);
         emitData.value = args;
       }
 

src/components/Form/src/components/ApiTree.vue

@@ -3,9 +3,6 @@
     <template #[item]="data" v-for="item in Object.keys($slots)">
       <slot :name="item" v-bind="data || {}"></slot>
     </template>
-    <template #suffixIcon v-if="loading">
-      <LoadingOutlined spin />
-    </template>
   </a-tree>
 </template>
 
@@ -16,11 +13,11 @@
   import { isArray, isFunction } from '/@/utils/is';
   import { get } from 'lodash-es';
   import { propTypes } from '/@/utils/propTypes';
-  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { DataNode } from 'ant-design-vue/es/tree';
 
   export default defineComponent({
     name: 'ApiTree',
-    components: { ATree: Tree, LoadingOutlined },
+    components: { ATree: Tree },
     props: {
       api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
       params: { type: Object },
@@ -30,7 +27,7 @@
     },
     emits: ['options-change', 'change'],
     setup(props, { attrs, emit }) {
-      const treeData = ref<Recordable<any>[]>([]);
+      const treeData = ref<DataNode[]>([]);
       const isFirstLoaded = ref<Boolean>(false);
       const loading = ref(false);
       const getAttrs = computed(() => {

src/components/Form/src/components/ApiTreeSelect.vue

@@ -11,16 +11,7 @@
 
 <script lang="ts">
   import { type Recordable } from '@vben/types';
-  import {
+  import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
-    type PropType,
-    computed,
-    defineComponent,
-    watchEffect,
-    watch,
-    ref,
-    onMounted,
-    unref,
-  } from 'vue';
   import { TreeSelect } from 'ant-design-vue';
   import { isArray, isFunction } from '/@/utils/is';
   import { get } from 'lodash-es';

src/components/Form/src/helper.ts

@@ -78,7 +78,6 @@ export const NO_AUTO_LINK_COMPONENTS: ComponentType[] = [
   'Upload',
   'ApiTransfer',
   'ApiTree',
-  'ApiSelect',
   'ApiTreeSelect',
   'ApiRadioGroup',
   'ApiCascader',

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/index.less

@@ -11,6 +11,10 @@
       height: 100%;
     }
   }
+
+  .ant-modal-footer {
+    margin-top: 0;
+  }
 }
 
 .vben-basic-modal-wrap .ant-modal {

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;

src/components/Table/src/BasicTable.vue

@@ -21,6 +21,7 @@
       :rowClassName="getRowClassName"
       v-show="getEmptyDataIsShowTable"
       @change="handleTableChange"
+      @resizeColumn="setColumnWidth"
     >
       <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
         <slot :name="item" v-bind="data || {}"></slot>
@@ -189,6 +190,7 @@
         getColumns,
         setCacheColumnsByField,
         setCacheColumns,
+        setColumnWidth,
         setColumns,
         getColumnsRef,
         getCacheColumns,
@@ -345,6 +347,7 @@
         handleSearchInfoChange,
         getEmptyDataIsShowTable,
         handleTableChange,
+        setColumnWidth,
         getRowClassName,
         wrapRef,
         tableAction,

src/components/Table/src/hooks/useColumns.ts

@@ -264,12 +264,19 @@ export function useColumns(
     if (!isArray(columns)) return;
     cacheColumns = columns.filter((item) => !item.flag);
   }
+  /**
+   * 拖拽列宽修改列的宽度
+   */
+  function setColumnWidth(w: number, col: BasicColumn) {
+    col.width = w;
+  }
 
   return {
     getColumnsRef,
     getCacheColumns,
     getColumns,
     setColumns,
+    setColumnWidth,
     getViewColumns,
     setCacheColumnsByField,
     setCacheColumns,