@vue-ui-kit/ant 1.7.1 → 1.7.3

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

@@ -11,6 +11,7 @@ declare const _default: <F = Recordable<any>>(__VLS_props: NonNullable<Awaited<t
         activeKey: import('vue').ComputedRef<number>;
         setActiveKey: (key: number) => void;
         validateAll: () => Promise<any[]>;
+        validate: (__index: number) => any;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {

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

@@ -49,7 +49,7 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
         setBtnLoading: (code: string, value: boolean) => void;
         selectedRecords: import('vue').ComputedRef<D[]>;
         $form: import('vue').ComputedRef<any>;
-        setLoadings: (value: boolean) => void;
+        setLoadings: (value: boolean | Record<string, boolean>) => void;
         resizeTable: () => void;
     }>): void;
     attrs: any;

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { PGridProps } from '../../declarations/antProxy';
+import { PGridInstance, 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<{
         title: string;
@@ -43,6 +43,8 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             row: D;
             field?: string;
         }>;
+        grid: import('vue').Ref<PGridInstance<D, Recordable<any>> | undefined, PGridInstance<D, Recordable<any>> | undefined>;
+        hide: () => void;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {}>;

package/dist/packages/store/renderStore.d.ts

@@ -6,18 +6,20 @@ export declare const addRender: (name: string, { renderItemContent, renderDefaul
 declare const _default: {
     renders: {
         $button: {
-            renderItemContent({ props, events }: RenderOptions, { data, field }: RenderFormParams, defaultHandler: {
+            renderItemContent({ props, events }: RenderOptions, { data, field, }: RenderFormParams, defaultHandler: {
                 [key: string]: (...args: any[]) => any;
             }): import("vue/jsx-runtime").JSX.Element;
-            renderDefault({ props, events }: RenderOptions, { row, field }: RenderTableParams, defaultHandler: {
+            renderDefault({ props, events }: RenderOptions, { row, field, }: RenderTableParams, defaultHandler: {
                 [key: string]: (...args: any[]) => any;
             }): import("vue/jsx-runtime").JSX.Element;
         };
         $buttons: {
-            renderItemContent({ props, children }: RenderOptions, { data, field }: RenderFormParams, defaultHandler: {
+            renderItemContent({ props, children }: RenderOptions, { data, field, }: RenderFormParams, defaultHandler: {
+                [key: string]: (...args: any[]) => any;
+            }): import("vue/jsx-runtime").JSX.Element;
+            renderDefault({ props, children }: RenderOptions, { data, row, field, }: RenderTableParams, defaultHandler: {
                 [key: string]: (...args: any[]) => any;
             }): import("vue/jsx-runtime").JSX.Element;
-            renderDefault({ props, children }: RenderOptions, { data, row, field }: RenderTableParams): import("vue/jsx-runtime").JSX.Element;
         };
         ButtonTree: {
             renderDefault({ children, props }: {
@@ -26,7 +28,7 @@ declare const _default: {
             }, params: RenderTableParams): import("vue/jsx-runtime").JSX.Element;
         };
         $radio: {
-            renderItemContent({ props, options }: RenderOptions, { data, field }: RenderFormParams): import("vue/jsx-runtime").JSX.Element | null;
+            renderItemContent({ props, events, options }: RenderOptions, { data, field }: RenderFormParams): import("vue/jsx-runtime").JSX.Element | null;
             renderDefault({ props, options }: RenderOptions, { row, field }: RenderTableParams): import("vue/jsx-runtime").JSX.Element | null;
         };
         $autoComplete: {

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";:root{--p-theme-bg: #fff}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{border-radius:unset}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}
+@charset "UTF-8";:root{--p-theme-bg: #fff}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{border-radius:unset}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "types": "./dist/index.d.ts",

package/src/declarations/antProxy.ts

@@ -22,6 +22,7 @@ export interface ItemRender {
   name: string;
   defaultValue?: any;
   props?: Recordable;
+  attrs?: Recordable;
   options?: IOption[];
   children?: Recordable[];
   events?: { [key: string]: (...args: any[]) => any };
@@ -30,6 +31,7 @@ export interface ItemRender {
 export interface CellRender {
   name: string;
   props?: Recordable;
+  attrs?: Recordable;
   children?: Recordable[];
 }
 
@@ -106,8 +108,10 @@ export interface PFormGroupProps<F = Recordable> {
   tabLabel?: string;
   editAble?: boolean;
   showAdd?: boolean;
+  forceRender?: boolean;
   /* 是否保持连续编号 */
   keepSerial?: boolean;
+  loading?: boolean;
   itemMenus?: Array<GroupMenuItem<F>>;
   creatItem?: ({ list }: { list?: Partial<F>[] }) => Promise<Partial<F>>;
   max?: number;
@@ -142,7 +146,7 @@ export interface ToolbarButtonProps extends PButtonProps {
 
 export interface ToolbarConfig {
   buttons?: Array<ToolbarButtonProps>;
-  tools?: Array<{ code: string; icon: string; type?: ButtonType; disabled?: boolean }>;
+  tools?: Array<{ code: string; icon: string; type?: ButtonType; disabled?: boolean; size?: 'small' | 'large' | 'middle' }>;
   disabled?: boolean;
 }
 
@@ -178,6 +182,7 @@ export interface PageConfig {
 
 export interface SelectConfig<D = Recordable> {
   multiple?: boolean;
+  showCount?: boolean;
   getCheckboxProps?: (record: D) => { disabled?: boolean };
 }
 
@@ -185,6 +190,7 @@ export type PGridProps<D = Recordable, F = Recordable> = {
   selectConfig?: SelectConfig<D>;
   rowKey?: string;
   manualFetch?: boolean;
+  align?: 'left' | 'right' | 'center'
   formConfig?: PFormProps<F>;
   columns?: ColumnProps<D>[];
   toolbarConfig?: ToolbarConfig;
@@ -275,6 +281,8 @@ export interface PFormInstance {
 export interface PromisePickerInstance<D = Recordable> {
   pick: () => Promise<{ row: D; field?: string }>;
   pickMultiple: () => Promise<D[]>;
+  grid: PGridInstance<D>;
+  hide: () => void;
 }
 
 export interface PFormBlockInstance {
@@ -285,4 +293,5 @@ export interface PFormGroupInstance<F = Recordable> {
   activeKey: number;
   setActiveKey: (activeKey: number) => void;
   validateAll: () => Promise<void>;
+  validate: (index: number) => Promise<void>;
 }

package/src/packages/components/PForm.vue

@@ -73,7 +73,7 @@
 </script>
 <template>
   <div
-    v-if="items.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
+    v-if="items.some((s: PFormItemProps<F>) => (s.field && s.itemRender) || s.slots?.default)"
     class="p-pane p-wrapper"
   >
     <a-form :key="renderFormKey" ref="formEl" :model="formData" v-bind="fc" @submit="handleSubmit">

package/src/packages/components/PFormGroup.vue

@@ -2,6 +2,7 @@
   import { computed, nextTick, PropType, ref, watchEffect } from 'vue';
   import { PFormGroupProps, PFormBlockInstance } from '#/antProxy';
   import { MoreOutlined } from '@ant-design/icons-vue';
+  import { Form } from 'ant-design-vue'
   import { cloneDeep, toString, isFunction, omit, maxBy, debounce } from 'lodash-es';
   import PGroupBlock from '@/components/PGroupBlock.vue';
   import {
@@ -15,7 +16,9 @@
   } from 'ant-design-vue';
   import { valued } from '@/utils/is';
   import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
-
+  import { $warning } from '@/hooks/useMessage';
+  
+  const useForm = Form.useForm
   const props = defineProps<PFormGroupProps<F>>();
   const model = defineModel({
     type: Array as PropType<Partial<F & { __index: number }>[]>,
@@ -44,6 +47,15 @@
     { content: '复制', code: 'copy' },
     { content: '删除', code: 'delete' },
   ];
+  // 实际是否强制渲染
+  const fr = computed(() => {
+    return props.forceRender || model.value.length <= 5
+  })
+  const handleTabChange = () => {
+    nextTick().then(() => {
+      blockInstance.value[activeKey.value]?.$form?.validate()
+    })
+  }
   watchEffect(() => {
     if (!props.keepSerial) {
       const unSortItems = model.value.filter((f) => !valued(f.__index));
@@ -70,6 +82,10 @@
           });
           break;
         case 'copy':
+          if (model.value.length >= maxLen.value) {
+            $warning('已达到最大数量')
+            return
+          }
           model.value = [
             ...model.value,
             cloneDeep({
@@ -93,15 +109,22 @@
     activeKey: computed(() => activeKey.value),
     setActiveKey,
     validateAll: () => {
-      return Promise.all(
-        blockInstance.value.map((block) => block.$form?.validate() ?? Promise.resolve()),
-      );
+      return Promise.all(blockInstance.value.map((block, idx) =>
+        fr.value ? (block.$form?.validate() ?? Promise.resolve()) : (useForm(model.value[idx], props.getFormSetting(model.value[idx]).rules)?.validate() ?? Promise.resolve()),
+      ))
+    },
+    validate: (__index: number) => {
+      const index = model.value.findIndex(f => f.__index === __index)
+      return fr.value
+        ? (blockInstance.value[index]?.$form?.validate() ?? Promise.resolve())
+        : (useForm(model.value[index], props.getFormSetting(model.value[index]).rules)?.validate() ?? Promise.resolve())
     },
   });
 </script>
 <template>
   <a-card :title="title" size="small">
-    <a-tabs type="editable-card" v-model:activeKey="activeKey" hide-add>
+    <a-spin v-if="loading" class="w-full" />
+    <a-tabs v-else type="editable-card" v-model:activeKey="activeKey" hide-add @change="handleTabChange">
       <template #rightExtra>
         <slot name="rightExtra">
           <a-button
@@ -117,7 +140,7 @@
         v-for="(item, idx) in model"
         :key="idx"
         :tab="`${tabLabel} ${keepSerial ? idx + 1 : (item.__index ?? 0) + 1}`"
-        force-render
+        :force-render="fr"
       >
         <template #closeIcon>
           <a-dropdown v-if="editAble && itemMenus?.length">

package/src/packages/components/PGrid.vue

@@ -11,7 +11,7 @@
     toRefs,
     onBeforeUnmount,
   } from 'vue';
-  import { debounce, get, isArray, isFunction, isString, merge, omit, toNumber } from 'lodash-es';
+  import { debounce, get, isArray, isBoolean, isFunction, isObject, isString, merge, omit, toNumber } from 'lodash-es';
   import { eachTree } from '@/utils/treeHelper';
   import { message as $message } from 'ant-design-vue';
   import RenderAntItem from '@/components/RenderAntItem';
@@ -52,6 +52,17 @@
     toolbar: false,
     form: false,
   });
+  const setLoadings = (value: boolean|Record<string, boolean>) => {
+    if(isObject(value)) {
+      Object.keys(value).forEach(key => {
+        loading[key] = value[key];
+      });
+    } else if(isBoolean(value)) {
+      loading.form = value;
+      loading.table = value;
+      loading.toolbar = value;
+    }
+  };
   const submitOnReset = true;
   const boxEl = ref<HTMLDivElement>();
   const pFormWrapper = ref<HTMLDivElement>();
@@ -397,15 +408,12 @@
       ? window.getComputedStyle(pFormWrapper.value).height
       : '0px';
     const formHeight = formOriginHeight.includes('px')
-      ? toNumber(window.getComputedStyle(pFormWrapper.value).height.replace('px', ''))
+      ? toNumber(formOriginHeight.replace('px', ''))
       : 0;
-
+    const showCountHeight = selectConfig.value?.showCount ? 22 : 0
     renderHeight.value =
       props.renderY ??
-      toNumber(ph.replace('px', '')) -
-        (props.fitHeight ?? 170) -
-        (!!props.toolbarConfig ? 30 : 0) -
-        formHeight;
+      toNumber(ph.replace('px', '')) -(props.fitHeight ?? 170) -(!!props.toolbarConfig ? 30 : 0) -formHeight- showCountHeight;
     enoughSpacing.value = toNumber(ph.replace('px', '')) > 600;
   };
   defineExpose({
@@ -420,11 +428,7 @@
     setBtnLoading,
     selectedRecords,
     $form: computed(() => formEl.value),
-    setLoadings: (value: boolean) => {
-      loading.form = value;
-      loading.table = value;
-      loading.toolbar = value;
-    },
+    setLoadings,
     resizeTable,
   });
 
@@ -439,7 +443,7 @@
           const el = mutation.target as HTMLElement;
           const style = window.getComputedStyle(el);
           if (style.display !== 'none') {
-            handlePageResize();
+            resizeTable();
           }
         }
       });
@@ -450,6 +454,13 @@
     }
     resetQueryFormData(props.manualFetch);
   });
+  const passFields = ['align']
+  const passDefaultColumnProps = (columns: ColumnProps<D>[]) => columns.map(c => ({
+    ...passFields.reduce((prev, cur) => ({
+      [cur]: props[cur],
+    }), {} as ColumnProps<D>),
+    ...c,
+  }))
   onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeTable);
     observer.disconnect();
@@ -581,7 +592,7 @@
               v-for="(tool, idx) in toolbarConfig.tools"
               :key="idx"
               :type="tool.type"
-              :size="btn.size ?? 'middle'"
+              :size="tool.size ?? 'middle'"
               :disabled="toolbarConfig.disabled || tool.disabled"
               @click="debounceToolToolClick(tool.code)"
               :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])"
@@ -592,11 +603,14 @@
         </span>
       </div>
       <div :class="`p-pane flex-1 ${enoughSpacing ? 'h-0' : ''} p-${scrollMode ?? 'inner'}-scroll`">
+        <div v-if="selectConfig?.multiple && selectConfig.showCount" class="w-full text-slate-5 pl-4">
+          已选：{{ selectedRowKeys.length }}
+        </div>
         <a-table
           :key="renderTableKey + '_table'"
           :row-key="rowKey ?? 'id'"
           ref="tableEl"
-          :columns="(columns ?? []).map((c) => cleanCol(c as Recordable))"
+          :columns="passDefaultColumnProps(columns ?? []).map((c) => cleanCol(c as ColumnProps))"
           :data-source="tableData"
           :loading="loading.table"
           :pagination="pg"
@@ -619,7 +633,7 @@
               v-if="slotDefaultColumns.some((s) => column.key && s.field === column.key)"
               :key="renderTableKey + '_cell_' + dataSeed + '_slot_' + column.key"
               :column="slotDefaultColumns.find((f) => column.key && f.field === column.key)!"
-              :default-handler="{ pick: pickRow }"
+              :default-handler="{ pick: pickRow, setLoadings }"
               :row="record"
               :row-index="index"
               :table-data="tableData as Recordable[]"

package/src/packages/components/PromisePicker.vue

@@ -78,6 +78,10 @@
         rejectPromise = reject;
         visible.modal = true;
       }),
+    grid: gridEl,
+    hide: () => {
+      visible.modal = false;
+    }
   });
 </script>
 <template>