@vue-ui-kit/ant 1.4.0 → 1.6.0

package/dist/packages/components/PGrid.vue.d.ts

@@ -1,20 +1,42 @@
 import { PGridProps } from '../../declarations/antProxy';
 declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_Prettify<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_Prettify<Pick<Partial<{}> & Omit<{
-        readonly onReset?: ((...args: any[]) => any) | undefined;
-        readonly onPick?: ((...args: any[]) => any) | undefined;
-        readonly onQuery?: ((...args: any[]) => any) | undefined;
-        readonly "onUpdate:tableData"?: ((...args: any[]) => any) | undefined;
-        readonly onToolbarButtonClick?: ((...args: any[]) => any) | undefined;
-        readonly onToolbarToolClick?: ((...args: any[]) => any) | undefined;
+        readonly onPick?: ((data: {
+            row: D;
+            field: string;
+        }) => any) | undefined;
+        readonly onToolbarButtonClick?: ((data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }) => any) | undefined;
+        readonly onToolbarToolClick?: ((data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }) => any) | undefined;
+        readonly onResetQuery?: (() => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{}> & Readonly<{
-        onReset?: ((...args: any[]) => any) | undefined;
-        onPick?: ((...args: any[]) => any) | undefined;
-        onQuery?: ((...args: any[]) => any) | undefined;
-        "onUpdate:tableData"?: ((...args: any[]) => any) | undefined;
-        onToolbarButtonClick?: ((...args: any[]) => any) | undefined;
-        onToolbarToolClick?: ((...args: any[]) => any) | undefined;
-    }>, never>, "onReset" | "onPick" | "onQuery" | "onUpdate:tableData" | "onToolbarButtonClick" | "onToolbarToolClick"> & PGridProps<D, F>> & import('vue').PublicProps;
+        onPick?: ((data: {
+            row: D;
+            field: string;
+        }) => any) | undefined;
+        onToolbarButtonClick?: ((data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }) => any) | undefined;
+        onToolbarToolClick?: ((data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }) => any) | undefined;
+        onResetQuery?: (() => any) | undefined;
+    }>, never>, "onPick" | "onToolbarButtonClick" | "onToolbarToolClick" | "onResetQuery"> & PGridProps<D, F>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         commitProxy: {
             query: import('lodash').DebouncedFunc<() => Promise<D[]>>;
@@ -23,13 +45,34 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             passQuery: (params: Partial<F>, lazy?: boolean) => Promise<void> | Promise<D[]> | undefined;
         };
         $table: import('vue').ComputedRef<any>;
-        selectedRowKeys: import('vue').ComputedRef<string[] | number[]>;
+        selectedRowKeys: import('vue').ComputedRef<(string | number)[]>;
+        setBtnLoading: (code: string, value: boolean) => void;
+        selectedRecords: import('vue').ComputedRef<D[]>;
         $form: import('vue').ComputedRef<any>;
         setLoadings: (value: boolean) => void;
+        resizeTable: () => void;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {}>;
-    emit: ((event: "reset" | "pick" | "query" | "update:tableData" | "toolbarButtonClick" | "toolbarToolClick", ...args: any[]) => void) & {};
+    emit: {
+        (event: "toolbarButtonClick", data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }): void;
+        (event: "toolbarToolClick", data: {
+            data: D[];
+            code: string;
+            selectedKeys: Array<string | number>;
+            records: D[];
+        }): void;
+        (event: "pick", data: {
+            row: D;
+            field: string;
+        }): void;
+        (event: "resetQuery"): void;
+    } & {};
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {

package/dist/packages/utils/is.d.ts

@@ -1,2 +1,4 @@
 export declare const noValue: (val: any) => boolean;
 export declare const valued: (val: any) => boolean;
+export declare const isBadValue: (val: any) => boolean;
+export declare const isGoodValue: (val: any) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -14,7 +14,10 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "README.md",
+    "README.zh.md",
+    "tsconfig.json"
   ],
   "scripts": {
     "dev": "vue-tsc --noEmit --skipLibCheck & vite",

package/src/declarations/antProxy.ts

@@ -58,6 +58,7 @@ export interface PFormItemProps<F = Recordable> {
   itemRender?: ItemRender;
   tooltipConfig?: TooltipConfig;
   slots?: {
+    title?: () => any;
     default?: (
       { data, field }: ItemFuncArg<F>,
       passTrigger?: (cusFields?: string | string[]) => void,
@@ -138,7 +139,8 @@ export interface ToolbarButtonProps extends PButtonProps {
 
 export interface ToolbarConfig {
   buttons?: Array<ToolbarButtonProps>;
-  tools?: Array<{ code: string; icon: string; type?: ButtonType }>;
+  tools?: Array<{ code: string; icon: string; type?: ButtonType; disabled?: boolean }>;
+  disabled?: boolean;
 }
 
 export interface ResponsePathConfig<D = Recordable> {
@@ -153,7 +155,7 @@ export interface ResponsePathConfig<D = Recordable> {
     | ((res: Recordable) => string | { status: string; content: string; icon?: string });
 }
 
-declare type HandlerMulti = (ids: string[] | number[]) => any;
+declare type HandlerMulti = (ids: Array<string | number>) => any;
 
 export interface AjaxConfig<F = Recordable> {
   query: (Q: { page?: IPage; form: Partial<F> }) => Promise<Recordable>;
@@ -257,6 +259,8 @@ export interface PGridInstance<D = Recordable, F = Recordable> {
   $table: Recordable;
   $form: Recordable;
   setLoadings: (value: boolean) => void;
+  setBtnLoading: (code: string, status: boolean) => void;
+  resizeTable: () => void;
 }
 
 export interface PFormInstance {

package/src/packages/components/PForm.vue

@@ -5,7 +5,7 @@
   import { v4 as uuid_v4 } from 'uuid';
   import RenderAntItem from '@/components/RenderAntItem';
   import RenderItemSlots from '@/components/RenderItemSlots';
-  import { valued } from '@/utils/is';
+  import { isGoodValue, valued } from '@/utils/is';
   import { eachTree } from '@/utils/treeHelper';
   import { defaultItemResponsive } from '@/utils/core';
   import {
@@ -39,7 +39,7 @@
       const obj: Partial<F> = {};
       eachTree(items.value, (item) => {
         if (item.field && item.itemRender) {
-          if (valued(item.itemRender.defaultValue)) {
+          if (isGoodValue(item.itemRender.defaultValue)) {
             obj[item.field] = item.itemRender.defaultValue;
           } else {
             obj[item.field] = undefined;
@@ -103,6 +103,9 @@
               ])
             "
           >
+            <template v-if="item.slots?.title" #label>
+              <component :is="item.slots.title" />
+            </template>
             <render-item-slots
               v-if="item.slots?.default"
               :form-data="formData"

package/src/packages/components/PGrid.vue

@@ -1,6 +1,16 @@
 <script generic="D = Recordable, F = Recordable" lang="ts" name="PGrid" setup>
   import { ColumnProps, PFormItemProps, PGridProps, ResponsePathConfig } from '#/antProxy';
-  import { computed, useAttrs, ref, Ref, reactive, onMounted, watch, toRefs } from 'vue';
+  import {
+    computed,
+    useAttrs,
+    ref,
+    Ref,
+    reactive,
+    onMounted,
+    watch,
+    toRefs,
+    onBeforeUnmount,
+  } from 'vue';
   import { debounce, get, isArray, isFunction, isString, merge, omit, toNumber } from 'lodash-es';
   import { eachTree } from '@/utils/treeHelper';
   import { message as $message } from 'ant-design-vue';
@@ -8,7 +18,7 @@
   import RenderTitleSlots from '@/components/RenderTitleSlots';
   import RenderDefaultSlots from '@/components/RenderDefaultSlots';
   import { v4 as uuid_v4 } from 'uuid';
-  import { valued } from '@/utils/is';
+  import { isGoodValue, valued } from '@/utils/is';
   import RenderItemSlots from '@/components/RenderItemSlots';
   import { cleanCol, defaultItemResponsive, defaultLabelCol } from '@/utils/core';
   import Icon from '@/renders/Icon';
@@ -44,8 +54,10 @@
   });
   const submitOnReset = true;
   const boxEl = ref<HTMLDivElement>();
+  const pFormWrapper = ref<HTMLDivElement>();
   const renderHeight = ref(500);
-  const selectedRowKeys = ref<string[] | number[]>([]);
+  const selectedRowKeys = ref<Array<string | number>>([]);
+  const selectedCaches = ref<D[]>([]);
   const innerToolbarHandler = (code: string) => {
     const { ajax } = proxyConfig.value!;
     switch (code) {
@@ -69,6 +81,7 @@
                 .finally(() => {
                   loading.table = false;
                   loading.toolbar = false;
+                  codeLoadings.multiDelete = false;
                 });
             });
           } else {
@@ -97,6 +110,21 @@
   const refreshForm = () => {
     renderFormKey.value = uuid_v4();
   };
+  const codeLoadings = reactive<Record<string, boolean>>(
+    [
+      ...(props.toolbarConfig?.buttons?.map((m) => m.code) ?? []).filter((f) => f),
+      ...(props.toolbarConfig?.tools?.map((m) => m.code) ?? []).filter((f) => f),
+    ].reduce(
+      (acc, cur) => {
+        acc[cur!] = false;
+        return acc;
+      },
+      {} as Record<string, boolean>,
+    ),
+  );
+  const setBtnLoading = (code: string, value: boolean) => {
+    codeLoadings[code] = value;
+  };
   const refreshTable = () => {
     renderTableKey.value = uuid_v4();
   };
@@ -129,26 +157,42 @@
       : 'bad',
   );
   const attrs = useAttrs();
-  const emit = defineEmits([
-    'query',
-    'reset',
-    'update:tableData',
-    'toolbarButtonClick',
-    'toolbarToolClick',
-    'pick',
-  ]);
+  const emit = defineEmits<{
+    (
+      event: 'toolbarButtonClick',
+      data: { data: D[]; code: string; selectedKeys: Array<string | number>; records: D[] },
+    ): void;
+    (
+      event: 'toolbarToolClick',
+      data: { data: D[]; code: string; selectedKeys: Array<string | number>; records: D[] },
+    ): void;
+    (event: 'pick', data: { row: D; field: string }): void;
+    (event: 'resetQuery'): void;
+  }>();
+  // @ts-ignore
+  const selectedRecords = computed<D[]>(() =>
+    selectedCaches.value.filter((f) =>
+      selectedRowKeys.value.includes(f[props.rowKey ?? 'id'] as string | number),
+    ),
+  );
   const toolBtnClick = (code: string) => {
     emit('toolbarButtonClick', {
       data: tableData.value,
       code,
       selectedKeys: selectedRowKeys.value,
+      records: selectedRecords.value,
     });
     innerToolbarHandler(code);
   };
   const debounceToolBtnClick = debounce(toolBtnClick, 100);
   const toolBtnMenuClick = ({ key }) => debounceToolBtnClick(key);
   const toolToolClick = (code: string) => {
-    emit('toolbarToolClick', { data: tableData.value, code, selectedKeys: selectedRowKeys.value });
+    emit('toolbarToolClick', {
+      data: tableData.value,
+      code,
+      selectedKeys: selectedRowKeys.value,
+      records: selectedRecords.value,
+    });
     innerToolbarHandler(code);
   };
   const debounceToolToolClick = debounce(toolToolClick, 100);
@@ -164,7 +208,7 @@
         const obj: Partial<F> = {};
         eachTree(formConfig.value.items, (item) => {
           if (item.field && item.itemRender) {
-            if (valued(item.itemRender.defaultValue)) {
+            if (isGoodValue(item.itemRender.defaultValue)) {
               obj[item.field] = item.itemRender.defaultValue;
             } else {
               obj[item.field] = undefined;
@@ -173,6 +217,7 @@
         });
         queryFormData.value = obj;
       }
+      emit('resetQuery');
       refreshForm();
     }
 
@@ -214,6 +259,7 @@
   };
   const resetPage = () => {
     pagination.page = 1;
+    selectedCaches.value = [];
     selectedRowKeys.value = [];
     return fetchData();
   };
@@ -309,6 +355,14 @@
               selectedRowKeys: selectedRowKeys.value,
               onChange: (selectedKeys: string[] | number[]) => {
                 selectedRowKeys.value = selectedKeys;
+                const primaryKey = props.rowKey ?? 'id';
+                const cachedKeys = selectedCaches.value.map((m) => m[primaryKey]);
+                const newKeys = selectedKeys.filter((f) => !cachedKeys.includes(f));
+                const newRecords: D[] = newKeys
+                  .map((m) => tableData.value.find((f) => f[primaryKey] === m))
+                  .filter((f) => !!f) as D[];
+                // @ts-ignore
+                selectedCaches.value = [...selectedCaches.value, ...newRecords];
               },
               getCheckboxProps: selectConfig.value.getCheckboxProps,
             },
@@ -336,6 +390,21 @@
     },
     { deep: true },
   );
+  const resizeTable = () => {
+    const pNode = boxEl.value?.parentElement;
+    const ph = pNode ? window.getComputedStyle(pNode).height : '0px';
+    const formHeight = pFormWrapper.value
+      ? toNumber(window.getComputedStyle(pFormWrapper.value).height.replace('px', ''))
+      : 0;
+
+    renderHeight.value =
+      props.renderY ??
+      toNumber(ph.replace('px', '')) -
+        (props.fitHeight ?? 170) -
+        (!!props.toolbarConfig ? 30 : 0) -
+        formHeight;
+    enoughSpacing.value = toNumber(ph.replace('px', '')) > 600;
+  };
   defineExpose({
     commitProxy: {
       query: debounceFetchData,
@@ -345,26 +414,24 @@
     },
     $table: computed(() => tableEl.value),
     selectedRowKeys: computed(() => selectedRowKeys.value),
+    setBtnLoading,
+    selectedRecords,
     $form: computed(() => formEl.value),
     setLoadings: (value: boolean) => {
       loading.form = value;
       loading.table = value;
       loading.toolbar = value;
     },
+    resizeTable,
   });
   onMounted(() => {
-    /*判断本组件所在容器DOM*/
-    const pNode = boxEl.value?.parentElement;
-    const ph = pNode ? window.getComputedStyle(pNode).height : '0px';
-    renderHeight.value =
-      props.renderY ??
-      toNumber(ph.replace('px', '')) -
-        (props.fitHeight ?? 170) -
-        (!!props.toolbarConfig ? 30 : 0) -
-        Math.ceil((props.formConfig?.items?.length ?? 0) / 4) * 35;
-    enoughSpacing.value = toNumber(ph.replace('px', '')) > 600;
+    resizeTable();
+    window.addEventListener('resize', resizeTable);
     resetQueryFormData(props.manualFetch);
   });
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeTable);
+  });
 </script>
 <template>
   <div ref="boxEl" class="h-full p-wrapper flex flex-col gap-8px overflow-y-auto" v-bind="attrs">
@@ -373,6 +440,7 @@
       <div
         v-if="formConfig?.items?.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
         class="p-pane p-form-wrapper"
+        ref="pFormWrapper"
       >
         <a-spin :spinning="loading.form">
           <a-form
@@ -459,7 +527,12 @@
                     </a-menu-item>
                   </a-menu>
                 </template>
-                <a-button :type="btn.type" :size="btn.size ?? 'small'" :loading="loading.toolbar">
+                <a-button
+                  :type="btn.type"
+                  :size="btn.size ?? 'small'"
+                  :disabled="toolbarConfig.disabled || btn.disabled"
+                  :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
+                >
                   <Icon v-if="btn.icon" :icon="btn.icon" />
                   {{ btn.content }}
                   <DownOutlined />
@@ -469,7 +542,8 @@
                 v-else-if="btn.code"
                 :type="btn.type"
                 :size="btn.size ?? 'small'"
-                :loading="loading.toolbar"
+                :disabled="toolbarConfig.disabled || btn.disabled"
+                :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
                 @click="debounceToolBtnClick(btn.code)"
               >
                 <Icon v-if="btn.icon" :icon="btn.icon" />
@@ -486,8 +560,9 @@
               :key="idx"
               :type="tool.type"
               size="small"
+              :disabled="toolbarConfig.disabled || tool.disabled"
               @click="debounceToolToolClick(tool.code)"
-              :loading="loading.toolbar"
+              :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])"
             >
               <Icon :icon="tool.icon" />
             </a-button>

package/src/packages/store/renderStore.tsx

@@ -23,7 +23,7 @@ import {
 } from 'ant-design-vue';
 import { set, isFunction, merge, omit } from 'lodash-es';
 import { ButtonProps } from 'ant-design-vue/lib/button';
-import { noValue, valued } from '@/utils/is';
+import { isBadValue, isGoodValue, noValue, valued } from '@/utils/is';
 import TableInput from '@/renders/TableInput.vue';
 import Icon from '@/renders/Icon';
 import { computed } from 'vue';
@@ -130,7 +130,7 @@ const renderBasic = (name: string) => {
       { props = {}, attrs = {}, events = {}, defaultValue }: RenderOptions,
       { data, field }: RenderFormParams,
     ) {
-      if (valued(defaultValue) && valued(field) && noValue(data[field!])) {
+      if (isGoodValue(defaultValue) && valued(field) && isBadValue(data[field!])) {
         data[field!] = defaultValue;
       }
       return field ? (
@@ -151,7 +151,7 @@ const renderBasic = (name: string) => {
       { props = antDefaultProps[name] ?? {}, attrs = {}, events = {}, defaultValue }: RenderOptions,
       { data, row, field }: RenderTableParams,
     ) {
-      if (valued(defaultValue) && valued(field) && noValue(row[field!])) {
+      if (isGoodValue(defaultValue) && valued(field) && isBadValue(row[field!])) {
         row[field!] = defaultValue;
       }
       return field ? (

package/src/packages/utils/is.ts

@@ -1,2 +1,4 @@
 export const noValue = (val: any) => val === null || val === undefined || val === '';
 export const valued = (val: any) => !noValue(val);
+export const isBadValue = (val: any) => val === null || val === undefined;
+export const isGoodValue = (val: any) => !isBadValue(val);

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo",
+    "emitDeclarationOnly": true,
+    "noImplicitAny": false,
+    "types": [
+      "vite/client",
+      "node"
+    ],
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "paths": {
+      "@/*": [
+        "./src/packages/*"
+      ],
+      "#/*": [
+        "./src/declarations/*"
+      ]
+    },
+    "plugins": [
+      // Transform paths in output .js files
+      {
+        "transform": "typescript-transform-paths"
+      },
+      // Transform paths for declarations files
+      {
+        "transform": "typescript-transform-paths",
+        "afterDeclarations": true
+      }
+    ]
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}