@vue-ui-kit/ant 1.7.0 → 1.7.2

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: any) => 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,7 @@ 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>;
     }>): 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.0",
+  "version": "1.7.2",
   "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[];
 }
 
@@ -178,6 +180,7 @@ export interface PageConfig {
 
 export interface SelectConfig<D = Recordable> {
   multiple?: boolean;
+  showCount?: boolean;
   getCheckboxProps?: (record: D) => { disabled?: boolean };
 }
 
@@ -185,6 +188,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 +279,7 @@ export interface PFormInstance {
 export interface PromisePickerInstance<D = Recordable> {
   pick: () => Promise<{ row: D; field?: string }>;
   pickMultiple: () => Promise<D[]>;
+  grid: PGridInstance<D>
 }
 
 export interface PFormBlockInstance {
@@ -285,4 +290,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

@@ -97,6 +97,9 @@
         blockInstance.value.map((block) => block.$form?.validate() ?? Promise.resolve()),
       );
     },
+    validate: (index) => {
+      return blockInstance.value[index]?.$form?.validate()
+    },
   });
 </script>
 <template>

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>();
@@ -393,16 +404,16 @@
   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', ''))
+    const formOriginHeight = pFormWrapper.value
+      ? window.getComputedStyle(pFormWrapper.value).height
+      : '0px';
+    const formHeight = formOriginHeight.includes('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({
@@ -417,20 +428,42 @@
     setBtnLoading,
     selectedRecords,
     $form: computed(() => formEl.value),
-    setLoadings: (value: boolean) => {
-      loading.form = value;
-      loading.table = value;
-      loading.toolbar = value;
-    },
+    setLoadings,
     resizeTable,
   });
+
+  let observer: MutationObserver;
   onMounted(() => {
     resizeTable();
     window.addEventListener('resize', resizeTable);
+    // 还需要在组件根节点由不可见转为可见时重新计算高度（display:none等样式控制时）
+    observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+          const el = mutation.target as HTMLElement;
+          const style = window.getComputedStyle(el);
+          if (style.display !== 'none') {
+            resizeTable();
+          }
+        }
+      });
+    });
+
+    if (boxEl.value) {
+      observer.observe(boxEl.value, { attributes: true, attributeFilter: ['style'] });
+    }
     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();
   });
 </script>
 <template>
@@ -570,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-100p 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"
@@ -597,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,7 @@
         rejectPromise = reject;
         visible.modal = true;
       }),
+  grid: gridEl,
   });
 </script>
 <template>

package/src/packages/store/renderStore.tsx

@@ -220,121 +220,213 @@ const renderBtn = (btnOpt: BtnOptions, params: RenderTableParams) =>
   );
 const renders = {
   ...Object.fromEntries(Object.keys(componentsMap).map((name) => [name, renderBasic(name)])),
-  //简单按钮
+  // 简单按钮
   $button: {
-    renderItemContent(
-      { props = {}, events = {} }: RenderOptions,
-      { data, field }: RenderFormParams,
-      defaultHandler: {
-        [key: string]: (...args: any[]) => any;
-      },
-    ) {
+    renderItemContent({ props = {}, events = {} }: RenderOptions, {
+      data,
+      field,
+    }: RenderFormParams, defaultHandler: {
+      [key: string]: (...args: any[]) => any
+    }) {
       return (
         <Button
           {...omit(props, ['content'])}
           icon={props.icon ? <Icon icon={props.icon} /> : null}
           onClick={() => {
-            events.click?.({ data, field });
+            events.click?.({ data, field })
             if (props.htmlType === 'reset' && defaultHandler?.reset) {
-              defaultHandler.reset({ data, field });
+              if (props.beforeClick && isFunction(props.beforeClick)) {
+                props.beforeClick({ data, field }).then(() => {
+                  defaultHandler.reset({ data, field })
+                })
+              }
+              else {
+                defaultHandler.reset({ data, field })
+              }
             }
           }}
         >
           {props.content}
+          {
+            props.suffix?.({ data, field }) ?? null
+          }
         </Button>
-      );
+      )
     },
-    renderDefault(
-      { props = {}, events = {} }: RenderOptions,
-      { row, field }: RenderTableParams,
-      defaultHandler: {
-        [key: string]: (...args: any[]) => any;
-      },
-    ) {
+    renderDefault({ props = {}, events = {} }: RenderOptions, {
+      row,
+      field,
+    }: RenderTableParams, defaultHandler: {
+      [key: string]: (...args: any[]) => any
+    }) {
       return (
         <Button
           {...omit(props, ['content'])}
           icon={props.icon ? <Icon icon={props.icon} /> : null}
           onClick={() => {
-            events.click?.({ row, field });
+            events.click?.({ row, field })
             if (props.htmlType === 'reset' && defaultHandler?.reset) {
-              defaultHandler.reset({ row, field });
+              if (props.beforeClick && isFunction(props.beforeClick)) {
+                defaultHandler?.setLoadings?.(true)
+                props.beforeClick({ row, field }).then(() => {
+                  defaultHandler.reset({ row, field })
+                }).finally(() => {
+                  defaultHandler?.setLoadings?.(false)
+                })
+              }
+              else {
+                defaultHandler.reset({ row, field })
+              }
             }
             if (props.htmlType === 'pick' && defaultHandler?.pick) {
-              defaultHandler.pick({ row, field });
+              if (props.beforeClick && isFunction(props.beforeClick)) {
+                defaultHandler?.setLoadings?.(true)
+                props.beforeClick({ row, field }).then(() => {
+                  defaultHandler.pick({ row, field })
+                }).finally(() => {
+                  defaultHandler?.setLoadings?.(false)
+                })
+              }
+              else {
+                defaultHandler.pick({ row, field })
+              }
             }
           }}
         >
           {props.content}
         </Button>
-      );
+      )
     },
   },
   // 简单按钮组
   $buttons: {
-    renderItemContent(
-      { props = {}, children = [] }: RenderOptions,
-      { data, field }: RenderFormParams,
-      defaultHandler: {
-        [key: string]: (...args: any[]) => any;
-      },
-    ) {
+    renderItemContent({ props = {}, children = [] }: RenderOptions, {
+      data,
+      field,
+    }: RenderFormParams, defaultHandler: {
+      [key: string]: (...args: any[]) => any
+    }) {
       return (
         <span class="align-gap-box w-fit">
-          {children.map((m) => (
-            <Button
-              {...omit(Object.assign(props, m.props), ['content'])}
-              icon={m.props.icon ? <Icon icon={m.props.icon} /> : null}
-              onClick={() => {
-                m.events?.click?.({ data, field });
-                if (m.props.htmlType === 'reset' && defaultHandler?.reset) {
-                  defaultHandler.reset({ data, field });
-                }
-              }}
-            >
-              {m.props.content}
-            </Button>
-          ))}
+          {
+            children.map((m) => {
+              return (
+                <Button
+                  {...omit(Object.assign({}, props, m.props), ['content'])}
+                  icon={m.props.icon ? <Icon icon={m.props.icon} /> : null}
+                  onClick={() => {
+                    m.events?.click?.({ data, field })
+                    if (m.props.htmlType === 'reset' && defaultHandler?.reset) {
+                      if (props.beforeClick && isFunction(props.beforeClick)) {
+                        props.beforeClick({ data, field }).then(() => {
+                          defaultHandler.reset({ data, field })
+                        })
+                      }
+                      else {
+                        defaultHandler.reset({ data, field })
+                      }
+                    }
+                    if (m.props.htmlType === 'pick' && defaultHandler?.pick) {
+                      if (props.beforeClick && isFunction(props.beforeClick)) {
+                        props.beforeClick({ data, field }).then(() => {
+                          defaultHandler.pick({ data, field })
+                        })
+                      }
+                      else {
+                        defaultHandler.pick({ data, field })
+                      }
+                    }
+                  }}
+                >
+                  {m.props.content}
+                </Button>
+              )
+            })
+          }
         </span>
-      );
+      )
     },
-    renderDefault(
-      { props = {}, children = [] }: RenderOptions,
-      { data, row, field }: RenderTableParams,
-    ) {
+    renderDefault({ props = {}, children = [] }: RenderOptions, {
+      data,
+      row,
+      field,
+    }: RenderTableParams, defaultHandler: {
+      [key: string]: (...args: any[]) => any
+    }) {
       return (
         <span class="align-gap-box w-fit">
-          {children.map((m) => (
-            <Button
-              {...omit(Object.assign(props, m.props), ['content'])}
-              icon={m.props.icon ? <Icon icon={m.props.icon} /> : null}
-              onClick={() => {
-                m.events?.click?.({ data, row, field });
-              }}
-            >
-              {m.props.content}
-            </Button>
-          ))}
+          {
+            children.filter(f => !f?.props?.hiddenIf?.({
+              data,
+              row,
+              field,
+            })).map(m => (
+              <Button
+                {...omit(Object.assign({}, props, m.props), ['content', 'hiddenIf'])}
+                icon={m.props.icon ? <Icon icon={m.props.icon} /> : null}
+                onClick={() => {
+                  m.events?.click?.({ data, row, field })
+                  if (m.props.htmlType === 'reset' && defaultHandler?.reset) {
+                    if (props.beforeClick && isFunction(props.beforeClick)) {
+                      defaultHandler?.setLoadings?.(true)
+                      props.beforeClick({ row, field }).then(() => {
+                        defaultHandler.reset({ row, field })
+                      }).finally(() => {
+                        defaultHandler?.setLoadings?.(false)
+                      })
+                    }
+                    else {
+                      defaultHandler.reset({ row, field })
+                    }
+                  }
+                  if (m.props.htmlType === 'pick' && defaultHandler?.pick) {
+                    if (props.beforeClick && isFunction(props.beforeClick)) {
+                      defaultHandler?.setLoadings?.(true)
+                      props.beforeClick({ row, field }).then(() => {
+                        defaultHandler.pick({ row, field })
+                      }).finally(() => {
+                        defaultHandler?.setLoadings?.(false)
+                      })
+                    }
+                    else {
+                      defaultHandler.pick({ row, field })
+                    }
+                  }
+                }}
+              >
+                {m.props.content}
+              </Button>
+            ))
+          }
         </span>
-      );
+      )
     },
   },
   ButtonTree: {
     renderDefault({ children = [], props = {} as Recordable }, params: RenderTableParams) {
       return (
         <span class={props.noGap ? 'align-no-gap-box' : 'align-gap-box'}>
-          {(children as BtnOptions[]).map((item) => renderBtn(item, params)) ?? []}
+          {(children as BtnOptions[])
+            .filter((f) => !f.hiddenIf?.(params))
+            .map((item) => renderBtn(item, params)) ?? []}
         </span>
       );
     },
   },
   $radio: {
-    renderItemContent({ props = {}, options }: RenderOptions, { data, field }: RenderFormParams) {
+    renderItemContent(
+      { props = {}, events = {}, options }: RenderOptions,
+      { data, field }: RenderFormParams,
+    ) {
       return valued(field) ? (
         <RadioGroup
           v-model:value={data[field!]}
           {...props}
           options={props.options ?? options ?? []}
+          disabled={!!props.disabled}
+          onChange={(...arg) => {
+            events.change?.({ data, field }, ...arg);
+          }}
         />
       ) : null;
     },
@@ -356,7 +448,7 @@ const renders = {
       return valued(field) ? (
         <AutoComplete
           v-model:value={data[field!]}
-          {...props}
+          {...Object.assign({}, { filterOption: defaultProps.autoComplete.filterOption }, props)}
           onChange={(...arg) => {
             events.change?.({ data, field }, ...arg);
           }}

package/src/packages/styles/index.scss

@@ -24,6 +24,12 @@
   padding-left: 2px;
   padding-right: 2px;
 }
+.pl-4x {
+  padding-left: 1em;
+}
+.pl-8 {
+  padding-left: 2em;
+}
 
 .h-0 {
   height: 0;