pro-design-vue 1.3.41 → 1.4.1

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Pro Design Vue v1.3.41 */
+/*! Pro Design Vue v1.4.1 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('ant-design-vue'), require('vue'), require('ant-design-vue/es/locale/zh_CN.js')) :
@@ -32,7 +32,7 @@
   const DEFAULT_NAMESPACE = "pro";
   const DEFAULT_LOCALE = "zh-CN";
 
-  const version$1 = "1.3.41";
+  const version$1 = "1.4.1";
 
   const makeInstaller = (components = []) => {
     const install = (app) => {
@@ -3551,7 +3551,7 @@
     };
   }
 
-  function NOOP() {
+  function NOOP$1() {
   }
 
   const withInstall = (main, extra) => {
@@ -3568,7 +3568,7 @@
     return main;
   };
   const withNoopInstall = (component) => {
-    component.install = NOOP;
+    component.install = NOOP$1;
     return component;
   };
 
@@ -10299,7 +10299,7 @@
 
   const ProIcon = withInstall(_sfc_main$W);
 
-  function _isSlot$8(s) {
+  function _isSlot$9(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var Button = /* @__PURE__ */ vue.defineComponent({
@@ -10473,7 +10473,7 @@
           })();
           defaultDom = vue.createVNode(antDesignVue.Tooltip, vue.mergeProps(props.tooltipProps, {
             "title": props.tooltip
-          }), _isSlot$8(defaultDom) ? defaultDom : {
+          }), _isSlot$9(defaultDom) ? defaultDom : {
             default: () => [_defaultDom]
           });
         }
@@ -10487,7 +10487,7 @@
               var _a2;
               return (_a2 = props.onCancel) == null ? void 0 : _a2.call(props, props.data);
             }
-          }), _isSlot$8(defaultDom) ? defaultDom : {
+          }), _isSlot$9(defaultDom) ? defaultDom : {
             default: () => [defaultDom]
           });
         }
@@ -13725,7 +13725,7 @@
       }
     },
     setup(props, { slots }) {
-      const currentValue = vue.reactive({});
+      const currentValue = vue.shallowReactive({});
       vue.watch(
         () => props.value,
         () => {
@@ -14055,7 +14055,7 @@
     return vue.inject(FormContextKey, {});
   };
 
-  function _isSlot$7(s) {
+  function _isSlot$8(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var FieldReadonly = /* @__PURE__ */ vue.defineComponent({
@@ -14134,7 +14134,7 @@
         if (props.copy && props.text) {
           return vue.createVNode(ProClipboard, {
             "text": props.text
-          }, _isSlot$7(dom) ? dom : {
+          }, _isSlot$8(dom) ? dom : {
             default: () => [dom]
           });
         }
@@ -14145,7 +14145,7 @@
               "placement": "topLeft",
               "title": title,
               "getPopupContainer": getPopupContainer
-            }, _isSlot$7(dom) ? dom : {
+            }, _isSlot$8(dom) ? dom : {
               default: () => [dom]
             });
           }
@@ -15265,7 +15265,7 @@
     }
   });
 
-  function _isSlot$6(s) {
+  function _isSlot$7(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var FieldRadioGroup = /* @__PURE__ */ vue.defineComponent({
@@ -15329,7 +15329,7 @@
             "value": props.value
           }, attrs, {
             "onChange": onChange
-          }), _isSlot$6(_slot = mergeOptions.value.map((option) => {
+          }), _isSlot$7(_slot = mergeOptions.value.map((option) => {
             var _a2;
             return vue.createVNode(antDesignVue.Radio, {
               "value": option.value,
@@ -17579,7 +17579,7 @@
   const useInitialValues = (props) => {
     const hasInitial = vue.ref(true);
     const requestLoading = vue.ref(false);
-    const initialValues = vue.ref({ ...props.initialValues });
+    const initialValues = vue.shallowRef({ ...props.initialValues });
     const fetchData = useFetchData$1({ request: props.request });
     vue.onMounted(async () => {
       var _a;
@@ -17600,7 +17600,14 @@
   const useLinkage = () => {
     const hiddenKeys = vue.shallowRef([]);
     const disabledKeys = vue.shallowRef([]);
-    const excludeKeys = vue.computed(() => hiddenKeys.value.map((key) => key.split(":")[1]));
+    const hiddenExcludeSet = vue.computed(() => {
+      const set = /* @__PURE__ */ new Set();
+      for (const key of hiddenKeys.value) {
+        const target = key.split(":")[1];
+        if (target) set.add(target);
+      }
+      return set;
+    });
     const genNewKeys = (originKeys, fieldKey, keys) => {
       if (!Array.isArray(keys)) {
         keys = [keys];
@@ -17616,10 +17623,30 @@
       disabledKeys.value = genNewKeys(disabledKeys.value, fieldKey, keys);
     };
     const allHiddenKeys = vue.computed(() => {
-      return hiddenKeys.value.filter((key) => !excludeKeys.value.includes(key.split(":")[0])).map((key) => key.split(":")[1]);
+      const excludeSet = hiddenExcludeSet.value;
+      const result = [];
+      for (const key of hiddenKeys.value) {
+        const idx = key.indexOf(":");
+        const source = key.substring(0, idx);
+        const target = key.substring(idx + 1);
+        if (!excludeSet.has(source)) {
+          result.push(target);
+        }
+      }
+      return result;
     });
     const allDisabledKeys = vue.computed(() => {
-      return disabledKeys.value.filter((key) => !excludeKeys.value.includes(key.split(":")[0])).map((key) => key.split(":")[1]);
+      const excludeSet = hiddenExcludeSet.value;
+      const result = [];
+      for (const key of disabledKeys.value) {
+        const idx = key.indexOf(":");
+        const source = key.substring(0, idx);
+        const target = key.substring(idx + 1);
+        if (!excludeSet.has(source)) {
+          result.push(target);
+        }
+      }
+      return result;
     });
     return {
       allHiddenKeys,
@@ -17770,6 +17797,7 @@
     props,
     formRef,
     formData,
+    formDataVersion,
     initialValues,
     hasInitial,
     transformerMap,
@@ -17825,6 +17853,7 @@
       const namePath = covertFormName(name);
       if (!namePath) throw new Error("name is require");
       set(formData.value, namePath, value);
+      formDataVersion.value++;
     };
     const setFieldsValue = (values, isMerge = true) => {
       if (!values) throw new Error("values is require");
@@ -17833,6 +17862,7 @@
       } else {
         formData.value = cloneDeep(values);
       }
+      formDataVersion.value++;
     };
     const resetInitialValues = (values) => {
       if (!values) throw new Error("values is require");
@@ -17845,6 +17875,7 @@
       hasInitial.value = true;
       (_a = formRef.value) == null ? void 0 : _a.clearValidate();
       formData.value = cloneDeep(convertKeyInitialValue(initialValues.value, transformerMap.value));
+      formDataVersion.value++;
       Promise.resolve().then(() => {
         hasInitial.value = false;
         onReset == null ? void 0 : onReset(transformKeySubmitValue(formData.value, transformerMap.value, props.omitNil));
@@ -17856,6 +17887,7 @@
       if (!namePath) throw new Error("name is require");
       (_a = formRef.value) == null ? void 0 : _a.clearValidate(name);
       set(formData.value, name, cloneDeep(get(initialValues.value, name)));
+      formDataVersion.value++;
     };
     const clearValidate = (name) => {
       var _a;
@@ -18050,7 +18082,7 @@
     }
   });
 
-  function _isSlot$5(s) {
+  function _isSlot$6(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var FormGroup = /* @__PURE__ */ vue.defineComponent({
@@ -18102,12 +18134,18 @@
         formData
       } = useInjectForm();
       const items = vue.computed(() => {
-        var _a, _b;
-        return (_b = formatItems == null ? void 0 : formatItems(runFunction((_a = props.items) != null ? _a : [], formData.value))) != null ? _b : [];
+        var _a, _b, _c;
+        const raw = (_a = props.items) != null ? _a : [];
+        const fields = (_b = typeof raw === "function" ? runFunction(raw, formData.value) : raw) != null ? _b : [];
+        return (_c = formatItems == null ? void 0 : formatItems(fields)) != null ? _c : [];
       });
       const formItemProps = vue.computed(() => {
         var _a;
-        return (_a = runFunction(props.formItemProps, formData.value)) != null ? _a : {};
+        const raw = props.formItemProps;
+        if (typeof raw === "function") {
+          return (_a = runFunction(raw, formData.value)) != null ? _a : {};
+        }
+        return raw != null ? raw : {};
       });
       const isExistTitle = vue.computed(() => {
         if (!props.title) {
@@ -18150,7 +18188,7 @@
           }, null)]), vue.createVNode("div", null, [vue.createVNode(FormRowWrapper, {
             "rowProps": props.rowProps,
             "grid": props.grid
-          }, _isSlot$5(defaultDom) ? defaultDom : {
+          }, _isSlot$6(defaultDom) ? defaultDom : {
             default: () => [defaultDom]
           })])])]
         });
@@ -18164,31 +18202,31 @@
     convertValue
   }) {
     const fieldValue = vue.shallowRef();
-    const { formData, initialValues } = useInjectForm();
-    const modelValue = vue.computed(() => get(formData.value, namePath.value));
+    const { formData, formDataVersion, initialValues } = useInjectForm();
+    const modelValue = vue.computed(() => {
+      void formDataVersion.value;
+      return get(formData.value, namePath.value);
+    });
     const onValueChange = (value) => {
       set(formData.value, namePath.value, value);
+      formDataVersion.value++;
     };
     vue.watch(
       modelValue,
       (newValue) => {
-        fieldValue.value = cloneDeep(newValue);
+        fieldValue.value = newValue;
       },
       {
-        immediate: true,
-        deep: true
+        immediate: true
       }
     );
     const initFieldInitialValue = () => {
       var _a;
-      if (
-        // !mountedRef.value &&
-        typeof modelValue.value === "undefined" && typeof initialValue !== "undefined"
-      ) {
+      if (typeof modelValue.value === "undefined" && typeof initialValue !== "undefined") {
         const value = convertValue ? convertValue(initialValue, namePath.value) : initialValue;
         set((_a = initialValues == null ? void 0 : initialValues.value) != null ? _a : {}, namePath.value, cloneDeep(initialValue));
         set(formData.value, namePath.value, cloneDeep(value));
-        fieldValue.value = value;
+        fieldValue.value = get(formData.value, namePath.value);
       }
     };
     initFieldInitialValue();
@@ -18265,14 +18303,19 @@
       });
       const formItemProps = vue.computed(() => {
         var _a;
-        return (_a = runFunction(props.formItemProps, formData.value)) != null ? _a : {};
+        const raw = props.formItemProps;
+        if (typeof raw === "function") {
+          return (_a = runFunction(raw, formData.value)) != null ? _a : {};
+        }
+        return raw != null ? raw : {};
       });
       const restItemProps = vue.computed(() => omitUndefined({
         ...pickKeys(formItemProps.value, ALL_ANTD_PROP_KEYS$2)
       }));
       const items = vue.computed(() => {
         var _a, _b, _c;
-        let children = (_b = runFunction((_a = props.items) != null ? _a : [], formData.value)) != null ? _b : [];
+        const raw = (_a = props.items) != null ? _a : [];
+        let children = (_b = typeof raw === "function" ? runFunction(raw, formData.value) : raw) != null ? _b : [];
         if (Array.isArray(props.initialValue) && props.initialValue.length) {
           children = children.filter((item) => {
             var _a2;
@@ -18458,24 +18501,27 @@
         return newDependencies;
       };
       const genListItems = (fields) => {
-        return cloneDeep(fields).filter((item) => {
+        return fields.filter((item) => {
           var _a;
           return !NOT_ALLOW_FIELD_TYPES.includes((_a = item.fieldType) != null ? _a : "");
         }).map((field) => {
           var _a, _b, _c, _d, _e, _f;
-          if (field.fieldType === ProFieldType.GROUP) {
-            field.children = genListItems((_b = runFunction((_a = field.children) != null ? _a : [], formData.value)) != null ? _b : []);
-            return field;
-          }
-          const originName = (_c = field.originName) != null ? _c : field.name;
-          const originKey = (_d = field.originKey) != null ? _d : field.key;
-          const namePath = covertFormName(field.name);
-          const title = index.value === 0 || props.alwaysShowItemLabel ? field.title : void 0;
+          const cloned = {
+            ...field
+          };
+          if (cloned.fieldType === ProFieldType.GROUP) {
+            cloned.children = genListItems((_b = runFunction((_a = cloned.children) != null ? _a : [], formData.value)) != null ? _b : []);
+            return cloned;
+          }
+          const originName = (_c = cloned.originName) != null ? _c : cloned.name;
+          const originKey = (_d = cloned.originKey) != null ? _d : cloned.key;
+          const namePath = covertFormName(cloned.name);
+          const title = index.value === 0 || props.alwaysShowItemLabel ? cloned.title : void 0;
           const item = {
-            ...field,
+            ...cloned,
             title,
             originKey,
-            key: `${listKey.value}_${(_e = field.key) != null ? _e : namePath == null ? void 0 : namePath.join("_")}`,
+            key: `${listKey.value}_${(_e = cloned.key) != null ? _e : namePath == null ? void 0 : namePath.join("_")}`,
             originName,
             name: [...(_f = listName == null ? void 0 : listName.value) != null ? _f : [], namePath].filter((item2) => item2 !== void 0).flat(1)
           };
@@ -18487,7 +18533,8 @@
       };
       const items = vue.computed(() => {
         var _a, _b, _c;
-        const fields = (_b = runFunction((_a = props.items) != null ? _a : [], formData.value)) != null ? _b : [];
+        const raw = (_a = props.items) != null ? _a : [];
+        const fields = (_b = typeof raw === "function" ? runFunction(raw, formData.value) : raw) != null ? _b : [];
         return (_c = formatItems == null ? void 0 : formatItems(genListItems(fields))) != null ? _c : [];
       });
       const showRowTitle = vue.computed(() => props.alwaysShowRowTitle && props.rowTitle);
@@ -18625,7 +18672,7 @@
     }
   });
 
-  function _isSlot$4(s) {
+  function _isSlot$5(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
   }
   var FormListContainer = /* @__PURE__ */ vue.defineComponent({
@@ -18730,14 +18777,16 @@
       slots
     }) {
       const loading = vue.ref(false);
-      const listValues = vue.ref([]);
       const {
         prefixCls
       } = useInjectForm();
+      const formItemContext = antDesignVue.Form.useInjectFormItemContext();
       const keyRef = vue.shallowRef({
         keys: [],
         id: 0
       });
+      let lastActionVersion = 0;
+      let watchedActionVersion = 0;
       const {
         fieldValue,
         onValueChange
@@ -18747,31 +18796,35 @@
         convertValue: props.convertValue,
         transform: props.transform
       });
-      const formItemContext = antDesignVue.Form.useInjectFormItemContext();
       const count = vue.computed(() => {
         var _a, _b;
         return (_b = (_a = fieldValue.value) == null ? void 0 : _a.length) != null ? _b : 0;
       });
       const action = {
         add: async (defaultValue, index) => {
-          var _a, _b, _c;
+          var _a, _b;
           if ((_a = props.actionGuard) == null ? void 0 : _a.beforeAddRow) {
             const success = await ((_b = props.actionGuard) == null ? void 0 : _b.beforeAddRow(defaultValue, index, count.value));
             if (!success) {
               return false;
             }
           }
-          const newValue = cloneDeep((_c = fieldValue.value) != null ? _c : []);
+          const newValue = fieldValue.value ? [...fieldValue.value] : [];
           if (index !== void 0 && index >= 0 && index <= newValue.length) {
-            keyRef.value.keys = [...keyRef.value.keys.slice(0, index), keyRef.value.id, ...keyRef.value.keys.slice(index)];
-            onValueChange(cloneDeep([...newValue.slice(0, index), defaultValue, ...newValue.slice(index)]));
-            formItemContext.onFieldChange();
+            keyRef.value = {
+              keys: [...keyRef.value.keys.slice(0, index), keyRef.value.id, ...keyRef.value.keys.slice(index)],
+              id: keyRef.value.id + 1
+            };
+            onValueChange([...newValue.slice(0, index), defaultValue, ...newValue.slice(index)]);
           } else {
-            keyRef.value.keys = [...keyRef.value.keys, keyRef.value.id];
-            onValueChange(cloneDeep([...newValue, defaultValue]));
-            formItemContext.onFieldChange();
+            keyRef.value = {
+              keys: [...keyRef.value.keys, keyRef.value.id],
+              id: keyRef.value.id + 1
+            };
+            onValueChange([...newValue, defaultValue]);
           }
-          keyRef.value.id += 1;
+          lastActionVersion++;
+          formItemContext.onFieldChange();
           Promise.resolve().then(() => {
             var _a2;
             (_a2 = props.onAfterAdd) == null ? void 0 : _a2.call(props, defaultValue, index, count.value);
@@ -18779,21 +18832,24 @@
           return true;
         },
         remove: async (index) => {
-          var _a, _b, _c;
+          var _a, _b;
           if ((_a = props.actionGuard) == null ? void 0 : _a.beforeRemoveRow) {
             const success = await ((_b = props.actionGuard) == null ? void 0 : _b.beforeRemoveRow(index, count.value));
             if (!success) {
               return false;
             }
           }
-          const newValue = cloneDeep((_c = fieldValue.value) != null ? _c : []);
+          const newValue = fieldValue.value ? [...fieldValue.value] : [];
           const indexSet = new Set(Array.isArray(index) ? index : [index]);
           if (indexSet.size <= 0) {
             return false;
           }
-          keyRef.value.keys = keyRef.value.keys.filter((_, keysIndex) => !indexSet.has(keysIndex));
-          const value = newValue.filter((_, valueIndex) => !indexSet.has(valueIndex));
-          onValueChange(value);
+          keyRef.value = {
+            keys: keyRef.value.keys.filter((_, keysIndex) => !indexSet.has(keysIndex)),
+            id: keyRef.value.id
+          };
+          onValueChange(newValue.filter((_, valueIndex) => !indexSet.has(valueIndex)));
+          lastActionVersion++;
           formItemContext.onFieldChange();
           Promise.resolve().then(() => {
             var _a2;
@@ -18818,10 +18874,32 @@
       const onCopy = async (index) => {
         await action.add(cloneDeep(fieldValue.value[index]), count.value + 1);
       };
-      vue.watch(fieldValue, () => {
-        var _a;
-        if (!isEqual(listValues.value, fieldValue.value)) {
-          listValues.value = cloneDeep((_a = fieldValue.value) != null ? _a : []);
+      vue.watch(fieldValue, (newVal, oldVal) => {
+        var _a, _b;
+        if (lastActionVersion !== watchedActionVersion) {
+          watchedActionVersion = lastActionVersion;
+          return;
+        }
+        const len = (_a = newVal == null ? void 0 : newVal.length) != null ? _a : 0;
+        const keysLen = keyRef.value.keys.length;
+        if (keysLen !== len) {
+          const newKeys = [];
+          for (let i = 0; i < len; i++) {
+            newKeys.push((_b = keyRef.value.keys[i]) != null ? _b : keyRef.value.id++);
+          }
+          keyRef.value = {
+            keys: newKeys,
+            id: keyRef.value.id
+          };
+        } else if (newVal !== oldVal) {
+          const newKeys = [];
+          for (let i = 0; i < len; i++) {
+            newKeys.push(keyRef.value.id++);
+          }
+          keyRef.value = {
+            keys: newKeys,
+            id: keyRef.value.id
+          };
         }
       }, {
         immediate: true
@@ -18846,7 +18924,7 @@
         }, restProps, {
           "loading": loading.value,
           "onClick": onAdd
-        }), _isSlot$4(creatorButtonText) ? creatorButtonText : {
+        }), _isSlot$5(creatorButtonText) ? creatorButtonText : {
           default: () => [creatorButtonText]
         });
         if (slots.creator) {
@@ -18862,17 +18940,15 @@
         return defaultDom;
       });
       return () => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if (props.readonly && !((_a = listValues.value) == null ? void 0 : _a.length)) {
-          listValues.value = [{}];
-        }
+        var _a, _b, _c, _d, _e;
+        const listData = props.readonly && !((_a = fieldValue.value) == null ? void 0 : _a.length) ? [{}] : (_b = fieldValue.value) != null ? _b : [];
         return vue.createVNode("div", {
           "style": "width: max-content; max-width: 100%; min-width: 100%; ",
           "class": {
             [`${prefixCls}-list-container`]: true,
-            [`${prefixCls}-list-empty`]: ((_c = (_b = fieldValue.value) != null ? _b : []) == null ? void 0 : _c.length) == 0
+            [`${prefixCls}-list-empty`]: listData.length === 0
           }
-        }, [props.creatorButtonProps !== false && ((_d = props.creatorButtonProps) == null ? void 0 : _d.position) === "top" && creatorButton.value, ((_e = listValues.value) != null ? _e : []).map((record, index) => {
+        }, [props.creatorButtonProps !== false && ((_c = props.creatorButtonProps) == null ? void 0 : _c.position) === "top" && creatorButton.value, listData.map((record, index) => {
           let key = keyRef.value.keys[index];
           if (key === void 0) {
             keyRef.value.keys[index] = keyRef.value.id;
@@ -18905,7 +18981,7 @@
             action: slots.action,
             item: slots.item
           });
-        }), props.creatorButtonProps !== false && (((_f = props.creatorButtonProps) == null ? void 0 : _f.position) === "bottom" || ((_g = props.creatorButtonProps) == null ? void 0 : _g.position) === void 0) && creatorButton.value]);
+        }), props.creatorButtonProps !== false && (((_d = props.creatorButtonProps) == null ? void 0 : _d.position) === "bottom" || ((_e = props.creatorButtonProps) == null ? void 0 : _e.position) === void 0) && creatorButton.value]);
       };
     }
   });
@@ -19062,8 +19138,10 @@
         });
       });
       const items = vue.computed(() => {
-        var _a, _b;
-        return (_b = formatItems == null ? void 0 : formatItems(runFunction((_a = props.items) != null ? _a : [], formData.value))) != null ? _b : [];
+        var _a, _b, _c;
+        const raw = (_a = props.items) != null ? _a : [];
+        const fields = (_b = typeof raw === "function" ? runFunction(raw, formData.value) : raw) != null ? _b : [];
+        return (_c = formatItems == null ? void 0 : formatItems(fields)) != null ? _c : [];
       });
       const slotsGetter = vue.computed(() => {
         const temp = {};
@@ -19791,6 +19869,7 @@
         formKey,
         prefixCls,
         formData,
+        formDataVersion,
         readonly,
         readonlyProps,
         disabledKeys,
@@ -19809,6 +19888,7 @@
         rowData
       } = useInjectFormList();
       const formSlotsContext = useInjectSlots$1();
+      const formItemContext = antDesignVue.Form.useInjectFormItemContext();
       const {
         fieldValue,
         onValueChange
@@ -19829,7 +19909,11 @@
       });
       const mergeReadonly = vue.computed(() => {
         var _a;
-        return runFunction((_a = props.item.readonly) != null ? _a : readonly == null ? void 0 : readonly.value, formData.value, rowData == null ? void 0 : rowData.value);
+        const readonlyProp = (_a = props.item.readonly) != null ? _a : readonly == null ? void 0 : readonly.value;
+        if (typeof readonlyProp === "function") {
+          return runFunction(readonlyProp, formData.value, rowData == null ? void 0 : rowData.value);
+        }
+        return readonlyProp;
       });
       const mergeReadonlyProps = vue.computed(() => merge({}, readonlyProps == null ? void 0 : readonlyProps.value, props.item.readonlyProps));
       const linkageDisabledKeys = vue.computed(() => disabledKeys.value.map((key) => key.split(":")[1]));
@@ -19840,17 +19924,22 @@
       });
       const formItemProps = vue.computed(() => {
         var _a;
-        return (_a = runFunction(props.item.formItemProps, formData.value, rowData == null ? void 0 : rowData.value)) != null ? _a : {};
+        const raw = props.item.formItemProps;
+        if (typeof raw === "function") {
+          return (_a = runFunction(raw, formData.value, rowData == null ? void 0 : rowData.value)) != null ? _a : {};
+        }
+        return raw != null ? raw : {};
       });
       const restItemProps = vue.computed(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
+        const rulesProp = (_a = props.item.rules) != null ? _a : formItemProps.value.rules;
         return omitUndefined({
           ...pickKeys(formItemProps.value, ALL_ANTD_PROP_KEYS),
-          labelCol: (_b = (_a = formItemProps.value) == null ? void 0 : _a.labelCol) != null ? _b : labelCol == null ? void 0 : labelCol.value,
-          wrapperCol: (_d = (_c = formItemProps.value) == null ? void 0 : _c.wrapperCol) != null ? _d : wrapperCol == null ? void 0 : wrapperCol.value,
+          labelCol: (_c = (_b = formItemProps.value) == null ? void 0 : _b.labelCol) != null ? _c : labelCol == null ? void 0 : labelCol.value,
+          wrapperCol: (_e = (_d = formItemProps.value) == null ? void 0 : _d.wrapperCol) != null ? _e : wrapperCol == null ? void 0 : wrapperCol.value,
           name: mergeReadonly.value ? void 0 : props.item.name,
-          htmlFor: mergeReadonly.value ? void 0 : (_g = (_e = formItemProps.value) == null ? void 0 : _e.htmlFor) != null ? _g : `form-${(_f = formKey.value) != null ? _f : ""}-${props.item.key}`,
-          rules: mergeReadonly.value ? void 0 : runFunction((_h = props.item.rules) != null ? _h : formItemProps.value.rules, formData.value, action, rowData == null ? void 0 : rowData.value)
+          htmlFor: mergeReadonly.value ? void 0 : (_h = (_f = formItemProps.value) == null ? void 0 : _f.htmlFor) != null ? _h : `form-${(_g = formKey.value) != null ? _g : ""}-${props.item.key}`,
+          rules: mergeReadonly.value ? void 0 : runFunction(rulesProp, formData.value, action, rowData == null ? void 0 : rowData.value)
         });
       });
       const clearOnChange = (newValue) => {
@@ -19861,27 +19950,33 @@
         if (clear) {
           const clearNamePaths = (_b = runFunction(clear, newValue, formData.value, rowData == null ? void 0 : rowData.value)) != null ? _b : [];
           if (clearNamePaths.length > 0) {
+            let changed = false;
             clearNamePaths.forEach((namePath) => {
               var _a2;
               const path = isList ? [...(_a2 = listName == null ? void 0 : listName.value) != null ? _a2 : [], ...covertFormName(namePath)].filter((item) => item !== void 0).flat(1) : covertFormName(namePath);
               const value = get(formData.value, path);
               if (typeof value !== "undefined") {
                 set(formData.value, path, void 0);
+                changed = true;
               }
             });
+            if (changed) {
+              formDataVersion.value++;
+            }
           }
         }
       };
       const fieldProps = vue.computed(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-        const baseProps = runFunction((_a = props.item.fieldProps) != null ? _a : {}, formData.value, action, rowData == null ? void 0 : rowData.value);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+        const raw = props.item.fieldProps;
+        const baseProps = runFunction(raw != null ? raw : {}, formData.value, action, rowData == null ? void 0 : rowData.value);
         const mergeProps = {
           ...baseProps,
-          id: (_c = baseProps == null ? void 0 : baseProps.id) != null ? _c : `form-${(_b = formKey.value) != null ? _b : ""}-${props.item.key}`,
-          disabled: ((_e = runFunction((_d = props.item.disabled) != null ? _d : baseProps == null ? void 0 : baseProps.disabled, formData.value, rowData == null ? void 0 : rowData.value)) != null ? _e : allDisabledKeys.value.includes(props.item.key)) ? true : void 0,
-          placeholder: (_f = props.item.placeholder) != null ? _f : baseProps == null ? void 0 : baseProps.placeholder,
-          options: (_h = (_g = props.item.options) != null ? _g : baseProps == null ? void 0 : baseProps.options) != null ? _h : baseProps == null ? void 0 : baseProps.treeData,
-          allowClear: (_j = (_i = props.item.allowClear) != null ? _i : baseProps == null ? void 0 : baseProps.allowClear) != null ? _j : true
+          id: (_b = baseProps == null ? void 0 : baseProps.id) != null ? _b : `form-${(_a = formKey.value) != null ? _a : ""}-${props.item.key}`,
+          disabled: ((_d = runFunction((_c = props.item.disabled) != null ? _c : baseProps == null ? void 0 : baseProps.disabled, formData.value, rowData == null ? void 0 : rowData.value)) != null ? _d : allDisabledKeys.value.includes(props.item.key)) ? true : void 0,
+          placeholder: (_e = props.item.placeholder) != null ? _e : baseProps == null ? void 0 : baseProps.placeholder,
+          options: (_g = (_f = props.item.options) != null ? _f : baseProps == null ? void 0 : baseProps.options) != null ? _g : baseProps == null ? void 0 : baseProps.treeData,
+          allowClear: (_i = (_h = props.item.allowClear) != null ? _h : baseProps == null ? void 0 : baseProps.allowClear) != null ? _i : true
         };
         return omitUndefined({
           valueEnum: props.item.valueEnum,
@@ -19894,6 +19989,7 @@
             var _a2, _b2;
             clearOnChange(value);
             onValueChange(value);
+            formItemContext.onFieldChange();
             (_b2 = (_a2 = props.item).onChange) == null ? void 0 : _b2.call(_a2, value, ...args, action);
           },
           ...fieldPropsMap[fieldType.value] ? pickKeys(mergeProps, fieldPropsMap[fieldType.value]) : mergeProps
@@ -19901,9 +19997,8 @@
       });
       const fieldStyle = vue.computed(() => {
         var _a;
-        const baseProps = runFunction((_a = props.item.fieldProps) != null ? _a : {}, formData.value, rowData == null ? void 0 : rowData.value);
         const newStyle = {
-          ...baseProps == null ? void 0 : baseProps.style
+          ...(_a = fieldProps.value) == null ? void 0 : _a.style
         };
         if (props.item.width && !fieldWidthSizeMap[props.item.width]) {
           newStyle.width = isNumber$2(props.item.width) ? props.item.width + "px" : props.item.width;
@@ -19999,8 +20094,10 @@
       vue.watch(() => {
         var _a;
         return (_a = restItemProps.value) == null ? void 0 : _a.rules;
-      }, () => {
-        action.clearValidate(props.item.name);
+      }, (newRules, oldRules) => {
+        if (!isEqual(newRules, oldRules)) {
+          action.clearValidate(props.item.name);
+        }
       });
       return () => {
         var _a, _b;
@@ -20067,6 +20164,9 @@
     }
   });
 
+  function _isSlot$4(s) {
+    return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+  }
   const LIST_PROP_KEYS = ["min", "max", "rowTitle", "rowTitleStyle", "alwaysShowRowTitle", "isValidateList", "emptyListMessage", "creatorRecord", "creatorButtonProps", "alwaysShowItemLabel", "actionGuard", "copyIconProps", "deleteIconProps", "onAfterAdd", "onAfterRemove"];
   const LIST_SLOT_NAMES = ["action", "creator", "item"];
   var FormItems = /* @__PURE__ */ vue.defineComponent({
@@ -20105,86 +20205,86 @@
         var _a;
         return (_a = props.grid) != null ? _a : grid == null ? void 0 : grid.value;
       });
-      const getItemsDom = vue.computed(() => {
-        return props.list.filter((item) => !allHiddenKeys.value.includes(item.key)).map((item) => {
-          var _a;
-          if (item.fieldType === ProFieldType.GROUP) {
-            return vue.createVNode(FormGroup, {
-              "key": item.key,
-              "items": item.children,
-              "title": item.title,
-              "tooltip": item.tooltip,
-              "colProps": item.colProps,
-              "rowProps": item.rowProps,
-              "spaceProps": item.spaceProps,
-              "grid": item.grid,
-              "item": item,
-              "formItemProps": item.formItemProps
-            }, null);
-          }
-          if (item.fieldType === ProFieldType.FORM_SET) {
-            return vue.createVNode(FormSet, {
-              "key": item.key,
-              "name": item.name,
-              "items": item.children,
-              "title": item.title,
-              "tooltip": item.tooltip,
-              "colProps": item.colProps,
-              "rowProps": item.rowProps,
-              "spaceProps": item.spaceProps,
-              "formItemProps": item.formItemProps,
-              "initialValue": item.initialValue,
-              "convertValue": item.convertValue,
-              "transform": item.transform
-            }, null);
-          }
-          if (item.fieldType === ProFieldType.FORM_LIST) {
-            const fieldProps = omitUndefined(pickKeys((_a = item.fieldProps) != null ? _a : {}, LIST_PROP_KEYS));
-            const slotsGetter = {};
-            LIST_SLOT_NAMES.forEach((name) => {
-              var _a2;
-              const slot = getSlot((_a2 = item.fieldProps) == null ? void 0 : _a2[`${name}Render`], formSlotsContext);
-              if (slot) {
-                slotsGetter[name] = (args) => vue.createVNode(RenderVNode$1, {
-                  "vnode": slot,
-                  "props": args
-                }, null);
-              }
-            });
-            return vue.createVNode(FormList, vue.mergeProps({
-              "key": item.key,
-              "name": item.name,
-              "originName": item.originName,
-              "items": item.children,
-              "title": item.title,
-              "tooltip": item.tooltip,
-              "rules": item.rules,
-              "colProps": item.colProps,
-              "rowProps": item.rowProps,
-              "formItemProps": item.formItemProps,
-              "initialValue": item.initialValue,
-              "convertValue": item.convertValue,
-              "transform": item.transform
-            }, fieldProps), {
-              ...slotsGetter
-            });
-          }
-          return vue.createVNode(FormItem, {
+      const visibleList = vue.computed(() => props.list.filter((item) => !allHiddenKeys.value.includes(item.key)));
+      const renderItem = (item) => {
+        var _a;
+        if (item.fieldType === ProFieldType.GROUP) {
+          return vue.createVNode(FormGroup, {
             "key": item.key,
+            "items": item.children,
+            "title": item.title,
+            "tooltip": item.tooltip,
+            "colProps": item.colProps,
+            "rowProps": item.rowProps,
+            "spaceProps": item.spaceProps,
+            "grid": item.grid,
             "item": item,
-            "grid": mergeGrid.value
+            "formItemProps": item.formItemProps
           }, null);
-        });
-      });
+        }
+        if (item.fieldType === ProFieldType.FORM_SET) {
+          return vue.createVNode(FormSet, {
+            "key": item.key,
+            "name": item.name,
+            "items": item.children,
+            "title": item.title,
+            "tooltip": item.tooltip,
+            "colProps": item.colProps,
+            "rowProps": item.rowProps,
+            "spaceProps": item.spaceProps,
+            "formItemProps": item.formItemProps,
+            "initialValue": item.initialValue,
+            "convertValue": item.convertValue,
+            "transform": item.transform
+          }, null);
+        }
+        if (item.fieldType === ProFieldType.FORM_LIST) {
+          const fieldProps = omitUndefined(pickKeys((_a = item.fieldProps) != null ? _a : {}, LIST_PROP_KEYS));
+          const slotsGetter = {};
+          LIST_SLOT_NAMES.forEach((name) => {
+            var _a2;
+            const slot = getSlot((_a2 = item.fieldProps) == null ? void 0 : _a2[`${name}Render`], formSlotsContext);
+            if (slot) {
+              slotsGetter[name] = (args) => vue.createVNode(RenderVNode$1, {
+                "vnode": slot,
+                "props": args
+              }, null);
+            }
+          });
+          return vue.createVNode(FormList, vue.mergeProps({
+            "key": item.key,
+            "name": item.name,
+            "originName": item.originName,
+            "items": item.children,
+            "title": item.title,
+            "tooltip": item.tooltip,
+            "rules": item.rules,
+            "colProps": item.colProps,
+            "rowProps": item.rowProps,
+            "formItemProps": item.formItemProps,
+            "initialValue": item.initialValue,
+            "convertValue": item.convertValue,
+            "transform": item.transform
+          }, fieldProps), {
+            ...slotsGetter
+          });
+        }
+        return vue.createVNode(FormItem, {
+          "key": item.key,
+          "item": item,
+          "grid": mergeGrid.value
+        }, null);
+      };
       return () => {
+        const items = visibleList.value.map(renderItem);
         if (props.type === "space" && !(mergeGrid == null ? void 0 : mergeGrid.value)) {
           return vue.createVNode(antDesignVue.Space, vue.mergeProps(props.spaceProps, {
             "align": "start"
-          }), {
-            default: () => [getItemsDom.value]
+          }), _isSlot$4(items) ? items : {
+            default: () => [items]
           });
         }
-        return getItemsDom.value;
+        return items;
       };
     }
   });
@@ -20387,6 +20487,7 @@
       const formRef = vue.ref();
       const prefixCls = usePrefixCls("form");
       const formData = vue.ref({});
+      const formDataVersion = vue.ref(0);
       const formItems = vue.ref([]);
       const formKey = vue.computed(() => {
         var _a;
@@ -20409,7 +20510,7 @@
       const formProps = vue.computed(() => {
         var _a;
         return {
-          ...omitUndefined(omit(props, ["colProps", "submitter", "loading", "showLoading", "omitNil", "grid", "theme", "colon", "customUi", "gridSubmitter", "requestAbort", "isKeyPressSubmit", "formKey", "initialValues", "rowProps", "dateFormatter", "params", "readonly", "readonlyProps", "items", "request", "validateMessages", "requiredMark", "labelAlign", "labelCol", "wrapperCol", "submitOnLoading", "onLoadingChange", "onFinish", "onValuesChange"])),
+          ...omitUndefined(omit(props, ["colProps", "submitter", "loading", "showLoading", "omitNil", "grid", "theme", "colon", "customUi", "gridSubmitter", "requestAbort", "isKeyPressSubmit", "formKey", "initialValues", "rowProps", "dateFormatter", "params", "readonly", "readonlyProps", "items", "request", "validateMessages", "requiredMark", "labelAlign", "labelCol", "wrapperCol", "submitOnLoading", "onLoadingChange", "onFinish", "onFinishFailed", "onReset", "onValuesChange", "onInit"])),
           layout: (_a = props.layout) != null ? _a : "vertical"
         };
       });
@@ -20451,6 +20552,7 @@
       vue.watch(initialValues, (newValues, oldValues) => {
         if (!isEqual(newValues, oldValues)) {
           formData.value = cloneDeep(convertKeyInitialValue(newValues, transformerMap.value));
+          formDataVersion.value++;
           if (!props.request || props.requestAbort) {
             Promise.resolve().then(() => {
               hasInitial.value = false;
@@ -20458,8 +20560,7 @@
           }
         }
       }, {
-        immediate: true,
-        deep: true
+        immediate: true
       });
       const onValuesChange = debounce(() => {
         var _a;
@@ -20482,18 +20583,17 @@
           }
         }
       };
-      vue.watch(formData, () => {
+      vue.watch(formDataVersion, () => {
         if (!hasInitial.value) {
           onValuesChange();
         }
-      }, {
-        deep: true
       });
       const linkage = useLinkage();
       const action = useAction({
         props,
         formRef,
         formData,
+        formDataVersion,
         initialValues,
         hasInitial,
         transformerMap,
@@ -20558,6 +20658,7 @@
         prefixCls,
         initialValues,
         formData,
+        formDataVersion,
         hasInitial,
         theme: vue.computed(() => props.theme),
         customUi: vue.computed(() => props.customUi),
@@ -20650,7 +20751,8 @@
     emits: ["update:open"],
     setup(props, {
       slots,
-      emit
+      emit,
+      expose
     }) {
       const _open = vue.ref(false);
       const loading = vue.ref(false);
@@ -20762,6 +20864,7 @@
           (_c = (_b = formRef.value) == null ? void 0 : _b.reset) == null ? void 0 : _c.call(_b);
         }
       };
+      expose(useFormExpose(formRef));
       const onFinishHandle = async (values) => {
         var _a;
         const response = (_a = props.onFinish) == null ? void 0 : _a.call(props, values);
@@ -20800,7 +20903,7 @@
         }
       }), {
         default: () => [vue.createVNode(BaseForm, vue.mergeProps(formProps.value, {
-          "submitter": submitterConfig.value,
+          "submitter": props.readonly ? false : submitterConfig.value,
           "onFinish": async (values) => {
             const result = await onFinishHandle(values);
             return result;
@@ -20826,10 +20929,12 @@
           }
         }), formSlots.value)],
         ...drawerSlots.value,
-        footer: props.submitter !== false && !props.readonly ? () => vue.createVNode("div", {
-          "style": "display: flex; justify-content: flex-end;",
-          "ref": footerRef
-        }, null) : void 0
+        ...props.submitter !== false && !props.readonly ? {
+          footer: () => vue.createVNode("div", {
+            "style": "display: flex; justify-content: flex-end;",
+            "ref": footerRef
+          }, null)
+        } : {}
       }), triggerDom.value]);
     }
   });
@@ -20847,7 +20952,8 @@
     emits: ["update:open"],
     setup(props, {
       slots,
-      emit
+      emit,
+      expose
     }) {
       const _open = vue.ref(false);
       const loading = vue.ref(false);
@@ -20891,7 +20997,7 @@
           ...omit((_a = props.modalProps) != null ? _a : {}, ["title", "width", "footer", "onCancel", "afterClose"]),
           width: props.width,
           title: props.title,
-          footer: props.submitter === false ? null : void 0
+          footer: props.readonly || props.submitter === false ? null : void 0
         });
       });
       const modalSlots = vue.computed(() => {
@@ -20961,6 +21067,7 @@
           (_c = (_b = formRef.value) == null ? void 0 : _b.reset) == null ? void 0 : _c.call(_b);
         }
       };
+      expose(useFormExpose(formRef));
       const onFinishHandle = async (values) => {
         var _a;
         const response = (_a = props.onFinish) == null ? void 0 : _a.call(props, values);
@@ -20999,7 +21106,7 @@
         }
       }), {
         default: () => [vue.createVNode(BaseForm, vue.mergeProps(formProps.value, {
-          "submitter": submitterConfig.value,
+          "submitter": props.readonly ? false : submitterConfig.value,
           "onFinish": async (values) => {
             const result = await onFinishHandle(values);
             return result;
@@ -21025,10 +21132,12 @@
           }
         }), formSlots.value)],
         ...modalSlots.value,
-        footer: props.submitter !== false && !props.readonly ? () => vue.createVNode("div", {
-          "style": "display: flex; justify-content: flex-end;",
-          "ref": footerRef
-        }, null) : void 0
+        ...props.submitter !== false && !props.readonly ? {
+          footer: () => vue.createVNode("div", {
+            "style": "display: flex; justify-content: flex-end;",
+            "ref": footerRef
+          }, null)
+        } : {}
       }), triggerDom.value]);
     }
   });
@@ -21077,7 +21186,7 @@
   const flatMapItems = (items, ignoreRules) => {
     return items == null ? void 0 : items.flatMap((item) => {
       if (item.fieldType === ProFieldType.GROUP && !item.title) {
-        return item.props.children;
+        return item.children;
       }
       if (ignoreRules) {
         return {
@@ -21116,14 +21225,10 @@
       const {
         form
       } = useProConfigInject();
-      const totalSpan = vue.ref(0);
-      const totalSize = vue.ref(0);
-      const currentSpan = vue.ref(0);
       const intl = useIntl();
       const prefixCls = usePrefixCls("query-filter");
       const wrapEl = vue.useTemplateRef("wrapper");
       const formRef = vue.ref();
-      const processedList = vue.ref([]);
       const [width, setWidth] = useMergedState$1(defaultWidth);
       const formExpose = useFormExpose(formRef);
       useResizeObserver(wrapEl, useDebounceFn((entries) => {
@@ -21148,20 +21253,6 @@
         }
         return Math.max(1, 24 / spanSize.value.span - 1);
       });
-      const hiddenNum = vue.computed(() => props.showHiddenNum && processedList.value.filter((item) => item.hidden).length);
-      const needCollapse = vue.computed(() => {
-        if (totalSpan.value < 24 || totalSize.value <= showLength.value) {
-          return false;
-        }
-        return true;
-      });
-      const offset = vue.computed(() => {
-        const offsetSpan = currentSpan.value % 24 + spanSize.value.span;
-        if (offsetSpan > 24) {
-          return 24 - spanSize.value.span;
-        }
-        return 24 - offsetSpan;
-      });
       const formItemFixStyle = vue.computed(() => {
         var _a2, _b, _c;
         const labelWidth = (_c = (_b = props.labelWidth) != null ? _b : (_a2 = form == null ? void 0 : form.value) == null ? void 0 : _a2.labelWidth) != null ? _c : "80";
@@ -21188,6 +21279,80 @@
           emit("collapse", val);
         }
       });
+      const processedResult = vue.computed(() => {
+        var _a2;
+        let _totalSpan = 0;
+        let _totalSize = 0;
+        let _currentSpan = 0;
+        let list = [];
+        if ((_a2 = props.items) == null ? void 0 : _a2.length) {
+          let firstRowFull = false;
+          list = flatMapItems(props.items, props.ignoreRules).map((item, index) => {
+            var _a3;
+            const colSize = (_a3 = item.colSize) != null ? _a3 : 1;
+            const colSpan = Math.min(spanSize.value.span * (colSize || 1), 24);
+            _totalSpan += colSpan;
+            _totalSize += colSize;
+            if (index === 0) {
+              firstRowFull = colSpan === 24 && !item.hidden;
+            }
+            const hidden = item.hidden || collapsed.value && (firstRowFull || _totalSize > showLength.value) && !!index;
+            if (hidden) {
+              if (!props.preserve) {
+                return {
+                  ...item,
+                  colProps: {
+                    span: 0
+                  },
+                  hidden: true
+                };
+              }
+              return {
+                ...item,
+                colProps: {
+                  span: colSpan
+                },
+                hidden: true
+              };
+            }
+            if (24 - _currentSpan % 24 < colSpan) {
+              _totalSpan += 24 - _currentSpan % 24;
+              _currentSpan += 24 - _currentSpan % 24;
+            }
+            _currentSpan += colSpan;
+            return {
+              ...item,
+              hidden,
+              formItemProps: {
+                ...item.title ? formItemFixStyle.value : {},
+                ...item.formItemProps
+              },
+              colProps: {
+                span: colSpan
+              }
+            };
+          });
+        }
+        return {
+          list,
+          totalSpan: _totalSpan,
+          totalSize: _totalSize,
+          currentSpan: _currentSpan
+        };
+      });
+      const needCollapse = vue.computed(() => {
+        if (processedResult.value.totalSpan < 24 || processedResult.value.totalSize <= showLength.value) {
+          return false;
+        }
+        return true;
+      });
+      const offset = vue.computed(() => {
+        const offsetSpan = processedResult.value.currentSpan % 24 + spanSize.value.span;
+        if (offsetSpan > 24) {
+          return 24 - spanSize.value.span;
+        }
+        return 24 - offsetSpan;
+      });
       const formProps = vue.computed(() => {
         return {
           ...omitUndefined(omit(props, [
@@ -21238,66 +21403,7 @@
           }
         }, props.submitter);
       });
-      vue.watch([spanSize, collapsed, () => props.items], () => {
-        var _a2;
-        let firstRowFull = false;
-        currentSpan.value = 0;
-        totalSize.value = 0;
-        totalSpan.value = 0;
-        if ((_a2 = props.items) == null ? void 0 : _a2.length) {
-          processedList.value = flatMapItems(props.items, props.ignoreRules).map((item, index) => {
-            var _a3;
-            const colSize = (_a3 = item.colSize) != null ? _a3 : 1;
-            const colSpan = Math.min(spanSize.value.span * (colSize || 1), 24);
-            totalSpan.value += colSpan;
-            totalSize.value += colSize;
-            if (index === 0) {
-              firstRowFull = colSpan === 24 && !item.hidden;
-            }
-            const hidden = item.hidden || // 如果收起了
-            collapsed.value && (firstRowFull || // 如果 超过显示长度 且 总长度超过了 24
-            totalSize.value > showLength.value) && !!index;
-            if (hidden) {
-              if (!props.preserve) {
-                return {
-                  ...item,
-                  colProps: {
-                    span: 0
-                  },
-                  hidden: true
-                };
-              }
-              return {
-                ...item,
-                colProps: {
-                  span: colSpan
-                },
-                hidden: true
-              };
-            }
-            if (24 - currentSpan.value % 24 < colSpan) {
-              totalSpan.value += 24 - currentSpan.value % 24;
-              currentSpan.value += 24 - currentSpan.value % 24;
-            }
-            currentSpan.value += colSpan;
-            return {
-              ...item,
-              hidden,
-              formItemProps: {
-                ...item.title ? formItemFixStyle.value : {},
-                ...item.formItemProps
-              },
-              colProps: {
-                span: colSpan
-              }
-            };
-          });
-        } else {
-          processedList.value = [];
-        }
-      }, {
-        immediate: true
-      });
+      const hiddenNum = vue.computed(() => props.showHiddenNum && processedResult.value.list.filter((item) => item.hidden).length);
       expose({
         formRef,
         ...formExpose
@@ -21321,7 +21427,7 @@
           "isKeyPressSubmit": (_a2 = props.isKeyPressSubmit) != null ? _a2 : true,
           "showLoading": false,
           "submitter": submitterConfig.value,
-          "items": processedList.value,
+          "items": processedResult.value.list,
           "layout": spanSize.value.layout,
           "onReset": (values) => {
             var _a3, _b, _c, _d;
@@ -24076,6 +24182,7 @@
     showHeaderScrollbar: Boolean,
     deepWatchDataSource: Boolean,
     deepWatchColumns: Boolean,
+    perf: Boolean,
     prefixCls: String,
     columnDrag: {
       type: Boolean,
@@ -25584,6 +25691,121 @@
     frame && cancelRequestAnimationFrame(frame.id);
   };
 
+  const PERF_KEY = Symbol("TablePerf");
+  const MAX_ENTRIES = 200;
+  const NOOP = () => {
+  };
+  const NOOP_CTX = {
+    enabled: vue.shallowRef(false),
+    metrics: vue.shallowRef({ entries: [], memory: null, scrollEventsPerSec: 0, fps: 0 }),
+    markStart: NOOP,
+    markEnd: NOOP,
+    captureMemory: NOOP,
+    recordScrollEvent: NOOP
+  };
+  let _activeCtx = NOOP_CTX;
+  function createPerfContext(enabled) {
+    const metrics = vue.shallowRef({
+      entries: [],
+      memory: null,
+      scrollEventsPerSec: 0,
+      fps: 0
+    });
+    let scrollCount = 0;
+    let frameCount = 0;
+    let lastFpsTime = 0;
+    const pendingMarks = /* @__PURE__ */ new Map();
+    const fpsLoop = (now) => {
+      frameCount++;
+      if (now - lastFpsTime >= 1e3) {
+        const current = metrics.value;
+        metrics.value = {
+          ...current,
+          fps: frameCount,
+          scrollEventsPerSec: scrollCount
+        };
+        frameCount = 0;
+        scrollCount = 0;
+        lastFpsTime = now;
+      }
+      if (enabled.value) {
+        requestAnimationFrame(fpsLoop);
+      }
+    };
+    const start = () => {
+      lastFpsTime = performance.now();
+      frameCount = 0;
+      scrollCount = 0;
+      requestAnimationFrame(fpsLoop);
+    };
+    const markStart = (label) => {
+      if (!enabled.value) return;
+      pendingMarks.set(label, performance.now());
+    };
+    const markEnd = (label) => {
+      if (!enabled.value) return;
+      const startTime = pendingMarks.get(label);
+      if (startTime === void 0) return;
+      pendingMarks.delete(label);
+      const duration = performance.now() - startTime;
+      const current = metrics.value;
+      const entries = current.entries.length >= MAX_ENTRIES ? current.entries.slice(-MAX_ENTRIES + 1) : [...current.entries];
+      entries.push({ label, duration, timestamp: Date.now() });
+      metrics.value = { ...current, entries };
+    };
+    const captureMemory = (rows, cells) => {
+      var _a, _b, _c;
+      if (!enabled.value) return;
+      const mem = performance.memory;
+      const current = metrics.value;
+      metrics.value = {
+        ...current,
+        memory: {
+          usedJSHeapSize: (_a = mem == null ? void 0 : mem.usedJSHeapSize) != null ? _a : 0,
+          totalJSHeapSize: (_b = mem == null ? void 0 : mem.totalJSHeapSize) != null ? _b : 0,
+          jsHeapSizeLimit: (_c = mem == null ? void 0 : mem.jsHeapSizeLimit) != null ? _c : 0,
+          renderedRows: rows,
+          renderedCells: cells,
+          timestamp: Date.now()
+        }
+      };
+    };
+    const recordScrollEvent = () => {
+      if (!enabled.value) return;
+      scrollCount++;
+    };
+    if (enabled.value) start();
+    const ctx = {
+      enabled,
+      metrics,
+      markStart,
+      markEnd,
+      captureMemory,
+      recordScrollEvent
+    };
+    _activeCtx = ctx;
+    return ctx;
+  }
+  function providePerfContext(ctx) {
+    vue.provide(PERF_KEY, ctx);
+  }
+  function usePerf() {
+    const injected = vue.inject(PERF_KEY, null);
+    if (injected) return injected;
+    return {
+      get enabled() {
+        return _activeCtx.enabled;
+      },
+      get metrics() {
+        return _activeCtx.metrics;
+      },
+      markStart: (l) => _activeCtx.markStart(l),
+      markEnd: (l) => _activeCtx.markEnd(l),
+      captureMemory: (r, c) => _activeCtx.captureMemory(r, c),
+      recordScrollEvent: () => _activeCtx.recordScrollEvent()
+    };
+  }
+
   const HScrollSymbolKey = Symbol("HScrollSymbolKey");
   const useHScrollSyncProvide = ({
     scrollLeft,
@@ -25591,6 +25813,7 @@
     onScroll,
     bodyWidth
   }) => {
+    const perf = usePerf();
     const domsSet = /* @__PURE__ */ new Set();
     const setAllDoms = (scrollLeft2) => {
       const left = Math.max(0, Math.min(scrollLeft2, maxScrollLeft.value));
@@ -25603,6 +25826,7 @@
       var _a;
       const left = (_a = e.target) == null ? void 0 : _a.scrollLeft;
       if (left !== scrollLeft.value) {
+        perf.recordScrollEvent();
         setAllDoms(left);
         scrollLeft.value = left;
         onScroll(e);
@@ -25613,6 +25837,7 @@
       const left = (_a = e.target) == null ? void 0 : _a.scrollLeft;
       if (left !== scrollLeft.value) {
         raf.cancel(rafFrame);
+        perf.recordScrollEvent();
         rafFrame = raf(() => {
           scrollLeft.value = left;
           onScroll(e);
@@ -25668,6 +25893,7 @@
     updateAnimate,
     bodyWidth
   }) => {
+    const perf = usePerf();
     const domsSet = /* @__PURE__ */ new Set();
     const setAllDoms = (scrollTop2) => {
       const top = Math.max(0, Math.min(scrollTop2, maxScrollTop.value));
@@ -25680,6 +25906,7 @@
       var _a;
       const top = (_a = e.target) == null ? void 0 : _a.scrollTop;
       if (top !== scrollTop.value) {
+        perf.recordScrollEvent();
         updateAnimate();
         setAllDoms(top);
         scrollTop.value = top;
@@ -25703,6 +25930,7 @@
       const top = (_a = e.target) == null ? void 0 : _a.scrollTop;
       if (top !== scrollTop.value) {
         raf.cancel(rafFrame);
+        perf.recordScrollEvent();
         updateAnimate();
         rafFrame = raf(() => {
           scrollTop.value = top;
@@ -26260,43 +26488,68 @@
     }
     target.__resizeObserver__rect = { width: newWidth, height: newHeight };
   }
-  function resizeDisconnect(el) {
-    if (el.__resizeObserver__listeners) {
-      el.__resizeObserver__listeners.unobserve(el);
-      el.__resizeObserver__listeners.disconnect();
-      el.__resizeObserver__listeners = null;
+  const sharedObservers = {};
+  const observerRefCounts = {};
+  function getSharedObserver(arg) {
+    const key = arg || "__default__";
+    if (!sharedObservers[key]) {
+      sharedObservers[key] = new index((entries) => {
+        for (let i = 0; i < entries.length; i++) {
+          const entry = entries[i];
+          const target = entry.target;
+          resizeHandler(
+            target,
+            target.__resizeObserver__arg,
+            entry.contentRect,
+            target.__resizeObserver__rect || {}
+          );
+        }
+      });
+      observerRefCounts[key] = 0;
     }
+    return sharedObservers[key];
   }
-  function resizeCallbackFactory(arg) {
-    return function(entries) {
-      const target = entries[0].target;
-      resizeHandler(target, arg, target.getBoundingClientRect(), target.__resizeObserver__rect || {});
-    };
+  function sharedObserve(el, arg) {
+    const key = arg || "__default__";
+    el.__resizeObserver__arg = arg;
+    const observer = getSharedObserver(arg);
+    observer.observe(el);
+    observerRefCounts[key] = (observerRefCounts[key] || 0) + 1;
+  }
+  function sharedUnobserve(el, arg) {
+    const key = arg || "__default__";
+    const observer = sharedObservers[key];
+    if (observer) {
+      observer.unobserve(el);
+      observerRefCounts[key]--;
+      if (observerRefCounts[key] <= 0) {
+        observer.disconnect();
+        delete sharedObservers[key];
+        delete observerRefCounts[key];
+      }
+    }
+    el.__resizeObserver__arg = void 0;
   }
   const resize = {
     created(el, binding) {
       const { arg, value = true } = binding;
       if (value) {
-        const resizeObserver = new index(resizeCallbackFactory(arg));
-        resizeObserver.observe(el);
-        el.__resizeObserver__listeners = resizeObserver;
+        sharedObserve(el, arg);
       }
     },
     updated(el, binding) {
       const { arg, value = true } = binding;
-      if (value && !el.__resizeObserver__listeners) {
-        const resizeObserver = new index(resizeCallbackFactory(arg));
-        resizeObserver.observe(el);
-        el.__resizeObserver__listeners = resizeObserver;
-      } else if (!value) {
-        resizeDisconnect(el);
+      if (value && el.__resizeObserver__arg === void 0) {
+        sharedObserve(el, arg);
+      } else if (!value && el.__resizeObserver__arg !== void 0) {
+        sharedUnobserve(el, arg);
       }
     },
     beforeUnmount(el, binding) {
       const { arg, value = true } = binding;
       if (value) {
         resizeHandler(el, arg, { width: 0, height: 0 }, el.__resizeObserver__rect || {});
-        resizeDisconnect(el);
+        sharedUnobserve(el, arg);
       }
     }
   };
@@ -27630,6 +27883,7 @@
   }
 
   function useCal(props, flattenData, scrollHeight, scrollTop, virtual, keyEntities) {
+    const perf = usePerf();
     const rowPosition = vue.shallowRef([]);
     const rowHeights = vue.shallowRef({});
     const mergedRowHeights = vue.shallowRef({});
@@ -27734,6 +27988,7 @@
       raf.cancel(refreshRaf);
       refreshRaf = raf(
         () => {
+          perf.markStart("rowPositionRecalc");
           const defaultHeight = currentSizeHeight.value;
           const crhs = currentRowHeights.value;
           const rhs = rowHeights.value;
@@ -27753,6 +28008,7 @@
           mergedRowHeights.value = newMergedRowHeights;
           viewportHeight.value = newViewportHeight;
           rowPosition.value = newRowPosition;
+          perf.markEnd("rowPositionRecalc");
         },
         isRaf.value ? 0 : 1
       );
@@ -27763,6 +28019,7 @@
     });
     const calculationRowHeights = (data) => {
       var _a, _b;
+      perf.markStart("calculationRowHeights");
       const newRowHeights = {};
       const defaultHeight = currentSizeHeight.value;
       const newCurrentRowHeights = {};
@@ -27795,6 +28052,7 @@
       }
       rowHeights.value = newRowHeights;
       currentRowHeights.value = newCurrentRowHeights;
+      perf.markEnd("calculationRowHeights");
     };
     vue.watch(
       [flattenData, mergeRowHeight],
@@ -28121,6 +28379,7 @@
   function useData(_props, rowPosition, flattenData, startIndex, endIndex, draggingRowKey, useAnimate, getRowFlattenIndexByKey, latestRangeStartCell) {
     const data = vue.shallowRef([]);
     const pos = vue.shallowRef([]);
+    const perf = usePerf();
     let rowKeyIndexMap = {};
     let exchange = true;
     vue.watch(
@@ -28130,6 +28389,7 @@
         if (flattenData.value.length !== rowPosition.value.length) {
           return;
         }
+        perf.markStart("useData-slice");
         const newData = [];
         const newPos = [];
         const recordPositionArr = [];
@@ -28184,6 +28444,7 @@
         rowKeyIndexMap = newRowKeyIndexMap;
         data.value = newData;
         pos.value = newPos;
+        perf.markEnd("useData-slice");
       },
       { immediate: true }
     );
@@ -28236,16 +28497,37 @@
     const allCellProps = vue.shallowRef({});
     const hasMultiRowSpanInfo = vue.shallowRef({});
     const centerRowColumnsMap = vue.shallowRef(/* @__PURE__ */ new Map());
+    const perf = usePerf();
+    const EMPTY_OBJ = Object.freeze({});
+    const cellPropsCache = /* @__PURE__ */ new Map();
+    let prevLeftCols = [];
+    let prevRightCols = [];
+    let prevCenterCols = [];
+    let prevAllCols = [];
+    let prevBodyWidth = 0;
+    let prevLeftWidth = 0;
+    let prevCenterWidth = 0;
+    let prevCustomCell = void 0;
+    let prevMergedRowHeights = {};
     const computedCellProps = (offsetLeft, column, rowIndex, record, overflow) => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c;
       const { customRender, originColumn, dataIndex, columnIndex, left, customCell } = column;
       const cellProps = {};
-      const customCellProps = (_b = (_a = customCell || contextCustomCell.value) == null ? void 0 : _a({ record, rowIndex, column })) != null ? _b : {};
-      const mergeCellStyles = Object.assign(
-        { overflow },
-        parseStyleText(customCellProps.style || {})
-      );
-      const copyCustomCellProps = Object.assign({}, customCellProps);
+      const hasCustomCell = !!(customCell || contextCustomCell.value);
+      const customCellProps = hasCustomCell ? (_a = (customCell || contextCustomCell.value)({ record, rowIndex, column })) != null ? _a : EMPTY_OBJ : EMPTY_OBJ;
+      if (customCellProps === EMPTY_OBJ && !customRender) {
+        const { width: width2 } = getColumnPosition(columnIndex, 1);
+        const style = {
+          overflow,
+          width: `${width2}px`,
+          left: `${left - offsetLeft}px`
+        };
+        if (width2 === 0) style.display = "none";
+        cellProps.props = { colSpan: 1, rowSpan: 1, style };
+        return cellProps;
+      }
+      const mergeCellStyles = customCellProps !== EMPTY_OBJ ? Object.assign({ overflow }, parseStyleText(customCellProps.style || {})) : { overflow };
+      const copyCustomCellProps = customCellProps !== EMPTY_OBJ ? Object.assign({}, customCellProps) : {};
       if (customRender) {
         const value = getPathValue(record, dataIndex);
         const customCellRender = customRender({
@@ -28266,8 +28548,8 @@
           cellProps.children = customCellRender;
         }
       }
-      copyCustomCellProps.colSpan = (_c = copyCustomCellProps.colSpan) != null ? _c : 1;
-      copyCustomCellProps.rowSpan = (_d = copyCustomCellProps.rowSpan) != null ? _d : 1;
+      copyCustomCellProps.colSpan = (_b = copyCustomCellProps.colSpan) != null ? _b : 1;
+      copyCustomCellProps.rowSpan = (_c = copyCustomCellProps.rowSpan) != null ? _c : 1;
       const { width } = getColumnPosition(columnIndex, copyCustomCellProps.colSpan);
       Object.assign(mergeCellStyles, { width: `${width}px`, left: left - offsetLeft + "px" });
       if (width === 0) {
@@ -28285,6 +28567,29 @@
       return cellProps;
     };
     vue.watchEffect(() => {
+      perf.markStart("useCellProps");
+      const curLeft = leftColumns.value;
+      const curRight = rightColumns.value;
+      const curCenter = visibleCenterColumns.value;
+      const curAll = allColumns.value;
+      const curBodyW = bodyWidth.value;
+      const curLeftW = leftWidth.value;
+      const curCenterW = centerWidth.value;
+      const curCustomCell = contextCustomCell.value;
+      const curMergedH = mergedRowHeights.value;
+      const columnsChanged = curLeft !== prevLeftCols || curRight !== prevRightCols || curCenter !== prevCenterCols || curAll !== prevAllCols || curBodyW !== prevBodyWidth || curLeftW !== prevLeftWidth || curCenterW !== prevCenterWidth || curCustomCell !== prevCustomCell || curMergedH !== prevMergedRowHeights;
+      if (columnsChanged) {
+        cellPropsCache.clear();
+        prevLeftCols = curLeft;
+        prevRightCols = curRight;
+        prevCenterCols = curCenter;
+        prevAllCols = curAll;
+        prevBodyWidth = curBodyW;
+        prevLeftWidth = curLeftW;
+        prevCenterWidth = curCenterW;
+        prevCustomCell = curCustomCell;
+        prevMergedRowHeights = curMergedH;
+      }
       const rawAllCellProps = {};
       const rawRowSpanInfo = {};
       const genAllCellProps = (index, offsetLeft, finallyColumns, rowKey, rowIndex, record, overflow, rowColumnsMap2) => {
@@ -28337,8 +28642,15 @@
       for (let i = 0; i < len; i++) {
         if (!data.value[i]) continue;
         const { record, isExpandRow, rowKey, rowIndex } = data.value[i];
-        rawAllCellProps[rowKey] = {};
         const overflow = mergedRowHeights.value[rowKey] ? "hidden" : "initial";
+        const cached = cellPropsCache.get(rowKey);
+        if (cached && cached.overflow === overflow) {
+          rawAllCellProps[rowKey] = cached.cellProps;
+          if (cached.hasRowSpan) rawRowSpanInfo[rowKey] = true;
+          if (cached.centerColumns) rowColumnsMap.set(rowKey, cached.centerColumns);
+          continue;
+        }
+        rawAllCellProps[rowKey] = {};
         if (isExpandRow) {
           rawAllCellProps[rowKey][ExpandColumnKey] = {
             props: {
@@ -28367,10 +28679,24 @@
             overflow
           );
         }
+        cellPropsCache.set(rowKey, {
+          cellProps: rawAllCellProps[rowKey],
+          hasRowSpan: !!rawRowSpanInfo[rowKey],
+          centerColumns: rowColumnsMap.get(rowKey),
+          overflow
+        });
       }
       allCellProps.value = rawAllCellProps;
       hasMultiRowSpanInfo.value = rawRowSpanInfo;
       centerRowColumnsMap.value = rowColumnsMap;
+      if (perf.enabled.value) {
+        const totalCells = Object.values(rawAllCellProps).reduce(
+          (sum, row) => sum + Object.keys(row).length,
+          0
+        );
+        perf.captureMemory(len, totalCells);
+      }
+      perf.markEnd("useCellProps");
     });
     return { allCellProps, hasMultiRowSpanInfo, centerRowColumnsMap };
   };
@@ -34655,21 +34981,12 @@
         return summaryStyle.value;
       });
       const emptyStyle = vue.computed(() => ({ width: `${props.bodyWidth}px` }));
-      useResizeObserver(
-        measureDomRef,
-        useDebounceFn((entries) => {
-          var _a;
-          const contentRect = (_a = entries[0]) == null ? void 0 : _a.contentRect;
-          emit("update:bodyWidth", (contentRect == null ? void 0 : contentRect.width) || 0);
-          emit("update:bodyHeight", (contentRect == null ? void 0 : contentRect.height) || 0);
-        }, 100)
-      );
-      const handleBodyInnerResize = useDebounceFn((e) => {
-        bodyInnerWidth.value = e.detail.width;
-      }, 100);
-      const handleBodyScrollResize = (e) => {
-        emit("update:bodyScrollWidth", e.detail.width);
-      };
+      useResizeObserver(measureDomRef, (entries) => {
+        var _a;
+        const contentRect = (_a = entries[0]) == null ? void 0 : _a.contentRect;
+        emit("update:bodyWidth", (contentRect == null ? void 0 : contentRect.width) || 0);
+        emit("update:bodyHeight", (contentRect == null ? void 0 : contentRect.height) || 0);
+      });
       return {
         bodyContainerStyle,
         measureDomStyle: vue.computed(() => ({
@@ -34713,8 +35030,12 @@
         centerColumns,
         rightColumns,
         bodyInnerWidth,
-        handleBodyInnerResize,
-        handleBodyScrollResize,
+        handleBodyInnerResize: (e) => {
+          bodyInnerWidth.value = e.detail.width;
+        },
+        handleBodyScrollResize: (e) => {
+          emit("update:bodyScrollWidth", e.detail.width);
+        },
         bodyRef,
         measureDomRef,
         bodyInnerRef,
@@ -35361,6 +35682,9 @@
     slots: {},
     setup(props, { expose, emit, slots }) {
       const { table } = useProConfigInject();
+      const perfEnabled = vue.shallowRef(!!props.perf);
+      const perfContext = createPerfContext(perfEnabled);
+      providePerfContext(perfContext);
       const counter = useInjectContainer();
       const rowKey = vue.computed(() => {
         var _a, _b, _c;
@@ -37677,7 +38001,7 @@
         [`${props.prefixCls}-card-bordered`]: isCard.value && isBordered("search", props.cardBordered)
       }));
       return () => {
-        var _a, _b;
+        var _a;
         return vue.createVNode("div", {
           "class": className.value,
           "style": {
@@ -37689,27 +38013,27 @@
           "items": props.items,
           "loading": props.loading,
           "style": {
-            marginBlockEnd: ((_a = props.search) == null ? void 0 : _a.cardProps) !== false && props.tableShowCard ? 0 : "16px",
-            ...(_b = props.search) == null ? void 0 : _b.style
+            marginBlockEnd: isCard.value ? 0 : "16px",
+            ...(_a = props.search) == null ? void 0 : _a.style
           },
           "onReset": props.onReset,
           "onFinish": (values) => {
-            var _a2, _b2;
+            var _a2, _b;
             submit(values, false);
-            (_b2 = (_a2 = props.search) == null ? void 0 : _a2.onFinish) == null ? void 0 : _b2.call(_a2, values);
+            (_b = (_a2 = props.search) == null ? void 0 : _a2.onFinish) == null ? void 0 : _b.call(_a2, values);
           },
           "onValuesChange": (values) => {
-            var _a2, _b2, _c;
+            var _a2, _b, _c;
             if (((_a2 = props.search) == null ? void 0 : _a2.submitter) === false) {
               submit(values, true);
             }
-            (_c = (_b2 = props.search) == null ? void 0 : _b2.onValuesChange) == null ? void 0 : _c.call(_b2, values);
+            (_c = (_b = props.search) == null ? void 0 : _b.onValuesChange) == null ? void 0 : _c.call(_b, values);
           },
           "onInit": (values, action) => {
-            var _a2, _b2, _c;
+            var _a2, _b, _c;
             submit(values, true);
             (_a2 = props.setFormAction) == null ? void 0 : _a2.call(props, action);
-            (_c = (_b2 = props.search) == null ? void 0 : _b2.onInit) == null ? void 0 : _c.call(_b2, values, action);
+            (_c = (_b = props.search) == null ? void 0 : _b.onInit) == null ? void 0 : _c.call(_b, values, action);
           },
           "onCollapse": props.onCollapse
         }), slots)]);
@@ -37998,11 +38322,11 @@
         return false;
       });
       const showTableCard = vue.computed(() => {
-        var _a2, _b2;
+        var _a2, _b2, _c;
         if (counter.hasFullScreen.value) {
           return false;
         }
-        return !!((_b2 = props.cardProps) != null ? _b2 : (_a2 = table == null ? void 0 : table.value) == null ? void 0 : _a2.cardProps) && !notNeedCardDom.value;
+        return !!((_c = (_b2 = props.cardProps) != null ? _b2 : (_a2 = table == null ? void 0 : table.value) == null ? void 0 : _a2.cardProps) != null ? _c : true) && !notNeedCardDom.value;
       });
       const cardBodyStyle = vue.computed(() => {
         if (!showTableCard.value) return {};