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

huangxiaomin

2023-09-27 9f6d61d02c6bee572ca5d6053339a1f965f570b9

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 @@
    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/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 inlineIndent={12} mode="vertical" ref={wrapRef} style={unref(getStyle)}>
              {renderMenuItem(items)}
            </Menu>
          </div>
          <Menu
            inlineIndent={12}
            mode="vertical"
            class={prefixCls}
            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 { 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 @@
  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 @@
   * @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 @@
  }
  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 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 @@
    return instance;
  };

  const register = (modalInstance: DrawerInstance, uuid: string) => {
  const register = (modalInstance: DrawerInstance, uuid: number) => {
    isProdMode() &&
      tryOnUnmounted(() => {
        drawerInstanceRef.value = null;
@@ -153,7 +153,7 @@
        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 {
    type PropType,
    computed,
    defineComponent,
    watchEffect,
    watch,
    ref,
    onMounted,
    unref,
  } from 'vue';
  import { type PropType, computed, defineComponent, 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 @@
  '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 @@
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 @@
      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 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 @@
    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 @@
  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 @@
    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,