@vue-ui-kit/ant 1.4.0 → 1.5.0

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

@@ -1,20 +1,40 @@
 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;
     } & 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;
+    }>, never>, "onPick" | "onToolbarButtonClick" | "onToolbarToolClick"> & PGridProps<D, F>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         commitProxy: {
             query: import('lodash').DebouncedFunc<() => Promise<D[]>>;
@@ -23,13 +43,32 @@ 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;
     }>): 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;
+    } & {};
 }>) => 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.5.0",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "types": "./dist/index.d.ts",

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,
@@ -153,7 +154,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 +258,7 @@ export interface PGridInstance<D = Recordable, F = Recordable> {
   $table: Recordable;
   $form: Recordable;
   setLoadings: (value: boolean) => void;
+  setBtnLoading: (code: string, status: boolean) => 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

@@ -8,7 +8,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';
@@ -45,7 +45,8 @@
   const submitOnReset = true;
   const boxEl = 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 +70,7 @@
                 .finally(() => {
                   loading.table = false;
                   loading.toolbar = false;
+                  codeLoadings.multiDelete = false;
                 });
             });
           } else {
@@ -97,6 +99,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 +146,41 @@
       : '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;
+  }>();
+  // @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 +196,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;
@@ -214,6 +246,7 @@
   };
   const resetPage = () => {
     pagination.page = 1;
+    selectedCaches.value = [];
     selectedRowKeys.value = [];
     return fetchData();
   };
@@ -309,6 +342,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,
             },
@@ -345,6 +386,8 @@
     },
     $table: computed(() => tableEl.value),
     selectedRowKeys: computed(() => selectedRowKeys.value),
+    setBtnLoading,
+    selectedRecords,
     $form: computed(() => formEl.value),
     setLoadings: (value: boolean) => {
       loading.form = value;
@@ -459,7 +502,11 @@
                     </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'"
+                  :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
+                >
                   <Icon v-if="btn.icon" :icon="btn.icon" />
                   {{ btn.content }}
                   <DownOutlined />
@@ -469,7 +516,7 @@
                 v-else-if="btn.code"
                 :type="btn.type"
                 :size="btn.size ?? 'small'"
-                :loading="loading.toolbar"
+                :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
                 @click="debounceToolBtnClick(btn.code)"
               >
                 <Icon v-if="btn.icon" :icon="btn.icon" />
@@ -487,7 +534,7 @@
               :type="tool.type"
               size="small"
               @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);