@tmagic/form 1.5.0-beta.9 → 1.5.1

package/dist/tmagic-form.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/design'), require('dayjs'), require('dayjs/plugin/utc'), require('sortablejs'), require('@tmagic/utils')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', '@tmagic/design', 'dayjs', 'dayjs/plugin/utc', 'sortablejs', '@tmagic/utils'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.lodashEs, global.design, global.dayjs, global.utc, global.Sortable, global.utils));
-})(this, (function (exports, vue, iconsVue, lodashEs, design, dayjs, utc, Sortable, utils) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/design'), require('dayjs'), require('dayjs/plugin/utc'), require('sortablejs'), require('@tmagic/utils'), require('@popperjs/core')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', '@tmagic/design', 'dayjs', 'dayjs/plugin/utc', 'sortablejs', '@tmagic/utils', '@popperjs/core'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.lodashEs, global.design, global.dayjs, global.utc, global.Sortable, global.utils, global.core));
+})(this, (function (exports, vue, iconsVue, lodashEs, design, dayjs, utc, Sortable, utils, core) { 'use strict';
 
   const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
   const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
@@ -240,7 +240,10 @@
         } else {
           return props.prop;
         }
-        return `${props.prop}${props.prop ? "." : ""}${n}`;
+        if (typeof props.prop !== "undefined" && props.prop !== "") {
+          return `${props.prop}.${n}`;
+        }
+        return `${n}`;
       });
       const tagName = vue.computed(() => `m-${items.value ? "form" : "fields"}-${type.value}`);
       const disabled = vue.computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
@@ -296,40 +299,69 @@
         }
         return value;
       };
-      const changeHandler = (onChange, value) => {
-        if (typeof onChange === "function") {
-          return onChange(mForm, value, {
-            model: props.model,
-            values: mForm?.initValues,
-            formValue: mForm?.values,
-            prop: itemProp.value,
-            config: props.config
-          });
-        }
-      };
       const trimHandler = (trim, value) => {
         if (typeof value === "string" && trim) {
           return value.replace(/^\s*/, "").replace(/\s*$/, "");
         }
       };
       const onAddDiffCount = () => emit("addDiffCount");
-      const onChangeHandler = async function(v, key2) {
-        const { filter, onChange, trim, name: name2, dynamicKey } = props.config;
-        let value = v;
+      const hasModifyKey = (eventDataItem) => typeof eventDataItem?.modifyKey !== "undefined" && eventDataItem.modifyKey !== "";
+      const isValidName = () => {
+        const valueType = typeof name.value;
+        if (valueType !== "string" && valueType !== "symbol" && valueType !== "number") {
+          return false;
+        }
+        if (name.value === "") {
+          return false;
+        }
+        if (typeof name.value === "number") {
+          return name.value >= 0;
+        }
+        return true;
+      };
+      const onChangeHandler = async function(v, eventData = {}) {
+        const { filter, onChange, trim, dynamicKey } = props.config;
+        let value = vue.toRaw(v);
+        const changeRecords = eventData.changeRecords || [];
+        const newChangeRecords = [...changeRecords];
         try {
           value = filterHandler(filter, v);
-          value = await changeHandler(onChange, value) ?? value;
+          if (typeof onChange === "function") {
+            value = await onChange(mForm, value, {
+              model: props.model,
+              values: mForm?.initValues,
+              formValue: mForm?.values,
+              prop: itemProp.value,
+              config: props.config,
+              changeRecords: newChangeRecords
+            }) ?? value;
+          }
           value = trimHandler(trim, value) ?? value;
         } catch (e) {
           console.error(e);
         }
-        if ((name2 || name2 === 0) && props.model !== value && (v !== value || props.model[name2] !== value)) {
-          props.model[name2] = value;
+        let valueProp = itemProp.value;
+        if (hasModifyKey(eventData)) {
+          if (dynamicKey) {
+            props.model[eventData.modifyKey] = value;
+          } else if (isValidName()) {
+            props.model[name.value][eventData.modifyKey] = value;
+          }
+          valueProp = valueProp ? `${valueProp}.${eventData.modifyKey}` : eventData.modifyKey;
+          delete eventData.modifyKey;
+        } else if (isValidName() && props.model !== value && (v !== value || props.model[name.value] !== value)) {
+          props.model[name.value] = value;
         }
-        if (key2 !== void 0 && dynamicKey) {
-          props.model[key2] = value;
+        if (changeRecords.length === 0) {
+          newChangeRecords.push({
+            propPath: valueProp,
+            value
+          });
         }
-        emit("change", props.model);
+        emit("change", props.model, {
+          ...eventData,
+          changeRecords: newChangeRecords
+        });
       };
       return (_ctx, _cache) => {
         const _component_m_fields_hidden = vue.resolveComponent("m-fields-hidden");
@@ -366,9 +398,10 @@
           }, null, 40, ["size", "model", "last-values", "is-compare", "config", "disabled", "name", "prop", "step-active", "expand-more", "label-width"])) : type.value && display$1.value && !showDiff.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             vue.createVNode(vue.unref(design.TMagicFormItem), {
               style: vue.normalizeStyle(_ctx.config.tip ? "flex: 1" : ""),
-              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+              class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
+              "label-position": _ctx.config.labelPosition,
               rules: rule.value
             }, {
               label: vue.withCtx(() => [
@@ -416,7 +449,7 @@
                 }, null, 8, _hoisted_4$3)) : vue.createCommentVNode("", true)
               ]),
               _: 1
-            }, 8, ["style", "class", "prop", "label-width", "rules"]),
+            }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
             _ctx.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               placement: "left"
@@ -439,9 +472,10 @@
           ], 64)) : type.value && display$1.value && showDiff.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
             vue.createVNode(vue.unref(design.TMagicFormItem), {
               style: vue.normalizeStyle([_ctx.config.tip ? "flex: 1" : "", { "background": "#f7dadd" }]),
-              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+              class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
+              "label-position": _ctx.config.labelPosition,
               rules: rule.value
             }, {
               label: vue.withCtx(() => [
@@ -485,7 +519,7 @@
                 }, null, 8, _hoisted_8$1)) : vue.createCommentVNode("", true)
               ]),
               _: 1
-            }, 8, ["style", "class", "prop", "label-width", "rules"]),
+            }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
             _ctx.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               placement: "left"
@@ -507,9 +541,10 @@
             })) : vue.createCommentVNode("", true),
             vue.createVNode(vue.unref(design.TMagicFormItem), {
               style: vue.normalizeStyle([_ctx.config.tip ? "flex: 1" : "", { "background": "#def7da" }]),
-              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+              class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
+              "label-position": _ctx.config.labelPosition,
               rules: rule.value
             }, {
               label: vue.withCtx(() => [
@@ -553,7 +588,7 @@
                 }, null, 8, _hoisted_12)) : vue.createCommentVNode("", true)
               ]),
               _: 1
-            }, 8, ["style", "class", "prop", "label-width", "rules"]),
+            }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
             _ctx.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 1,
               placement: "left"
@@ -574,11 +609,11 @@
               _: 1
             })) : vue.createCommentVNode("", true)
           ], 64)) : items.value && display$1.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 4 }, [
-            (name.value || name.value === 0 ? _ctx.model[name.value] : _ctx.model) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(items.value, (item) => {
+            (isValidName() ? _ctx.model[name.value] : _ctx.model) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(items.value, (item) => {
               return vue.openBlock(), vue.createBlock(_component_Container, {
                 key: key(item),
-                model: name.value || name.value === 0 ? _ctx.model[name.value] : _ctx.model,
-                "last-values": name.value || name.value === 0 ? _ctx.lastValues[name.value] || {} : _ctx.lastValues,
+                model: isValidName() ? _ctx.model[name.value] : _ctx.model,
+                "last-values": isValidName() ? _ctx.lastValues[name.value] || {} : _ctx.lastValues,
                 "is-compare": _ctx.isCompare,
                 config: item,
                 size: _ctx.size,
@@ -656,16 +691,17 @@
         }
         return props.config.labelWidth || props.labelWidth || (props.config.text ? void 0 : "0");
       });
-      const change = () => {
-        emit("change", props.model);
+      const valueChangeHandler = (value) => {
+        emit("change", value, { modifyKey: "value" });
       };
+      const changeHandler = (v, eventData) => emit("change", v, eventData);
       const key = (item, index) => item[mForm?.keyProp || "__key"] ?? index;
       const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
         return (name.value ? _ctx.model[name.value] : _ctx.model) ? (vue.openBlock(), vue.createElementBlock("fieldset", {
           key: 0,
           class: "m-fieldset",
-          style: vue.normalizeStyle(show.value ? "padding: 15px 15px 0 5px;" : "border: 0")
+          style: vue.normalizeStyle(show.value ? "padding: 15px" : "border: 0")
         }, [
           name.value && _ctx.config.checkbox ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(!show.value ? "div" : "legend"), { key: 0 }, {
             default: vue.withCtx(() => [
@@ -673,7 +709,7 @@
                 modelValue: _ctx.model[name.value].value,
                 "onUpdate:modelValue": [
                   _cache[0] || (_cache[0] = ($event) => _ctx.model[name.value].value = $event),
-                  change
+                  valueChangeHandler
                 ],
                 prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.config.name}.value`,
                 "true-value": 1,
@@ -717,7 +753,7 @@
                   disabled: _ctx.disabled,
                   labelWidth: lWidth.value,
                   size: _ctx.size,
-                  onChange: change,
+                  onChange: changeHandler,
                   onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
                 }, null, 8, ["model", "lastValues", "is-compare", "rules", "config", "prop", "disabled", "labelWidth", "size"]);
               }), 128))
@@ -738,7 +774,7 @@
               labelWidth: lWidth.value,
               size: _ctx.size,
               disabled: _ctx.disabled,
-              onChange: change,
+              onChange: changeHandler,
               onAddDiffCount: _cache[2] || (_cache[2] = ($event) => onAddDiffCount())
             }, null, 8, ["model", "lastValues", "is-compare", "rules", "config", "prop", "labelWidth", "size", "disabled"]);
           }), 128)) : vue.createCommentVNode("", true)
@@ -792,7 +828,9 @@
       const length = vue.computed(() => props.groupModel?.length || 0);
       const itemExtra = vue.computed(() => filterFunction(mForm, props.config.itemExtra, props));
       const removeHandler = () => emit("remove-item", props.index);
-      const changeHandler = () => emit("change");
+      const changeHandler = (v, eventData) => {
+        emit("change", props.model, eventData);
+      };
       const expandHandler = () => {
         expand.value = !expand.value;
       };
@@ -944,9 +982,8 @@
         }
         return typeof props.config.addable === "undefined" ? true : props.config.addable;
       });
-      const changeHandler = () => {
-        if (!props.name) return false;
-        emit("change", props.model[props.name]);
+      const changeHandler = (v, eventData) => {
+        emit("change", props.model, eventData);
       };
       const addHandler = async () => {
         if (!props.name) return false;
@@ -966,18 +1003,25 @@
           initValues
         });
         props.model[props.name].push(groupValue);
-        changeHandler();
+        emit("change", props.model[props.name], {
+          changeRecords: [
+            {
+              propPath: `${props.prop}.${props.model[props.name].length - 1}`,
+              value: groupValue
+            }
+          ]
+        });
       };
       const removeHandler = (index) => {
         if (!props.name) return false;
         props.model[props.name].splice(index, 1);
-        changeHandler();
+        emit("change", props.model[props.name]);
       };
       const swapHandler = (idx1, idx2) => {
         if (!props.name) return false;
         const [currRow] = props.model[props.name].splice(idx1, 1);
         props.model[props.name].splice(idx2, 0, currRow);
-        changeHandler();
+        emit("change", props.model[props.name]);
       };
       const toggleMode = () => {
         props.config.type = "table";
@@ -1020,15 +1064,16 @@
           }), 128)),
           addable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
             key: 3,
-            onClick: addHandler,
-            size: "small",
-            disabled: _ctx.disabled
+            type: "primary",
+            size: _ctx.config.enableToggleMode ? "small" : "default",
+            disabled: _ctx.disabled,
+            onClick: addHandler
           }, {
             default: vue.withCtx(() => _cache[2] || (_cache[2] = [
               vue.createTextVNode("新增")
             ])),
             _: 1
-          }, 8, ["disabled"])) : vue.createCommentVNode("", true),
+          }, 8, ["size", "disabled"])) : vue.createCommentVNode("", true),
           _ctx.config.enableToggleMode ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
             key: 4,
             icon: vue.unref(iconsVue.Grid),
@@ -1077,7 +1122,9 @@
       const expand = vue.ref(props.config.expand !== false);
       const items = vue.computed(() => props.config.items);
       const filter = (config) => filterFunction(mForm, config, props);
-      const changeHandler = () => emit("change", props.model);
+      const changeHandler = (v, eventData) => {
+        emit("change", props.model, eventData);
+      };
       const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
         return items.value && items.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), {
@@ -1174,7 +1221,7 @@
       const emit = __emit;
       const mForm = vue.inject("mForm");
       const display$1 = vue.computed(() => display(mForm, props.config.display, props));
-      const changeHandler = () => emit("change", props.model);
+      const changeHandler = (v, eventData) => emit("change", v, eventData);
       const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCol), { span: _ctx.span }, {
@@ -1223,7 +1270,9 @@
       const props = __props;
       const emit = __emit;
       const mForm = vue.inject("mForm");
-      const changeHandler = () => emit("change", props.name ? props.model[props.name] : props.model);
+      const changeHandler = (v, eventData) => {
+        emit("change", props.name ? props.model[props.name] : props.model, eventData);
+      };
       const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicRow), { gutter: 10 }, {
@@ -1259,6 +1308,7 @@
     __name: "Step",
     props: {
       model: {},
+      name: {},
       lastValues: {},
       isCompare: { type: Boolean },
       config: {},
@@ -1280,8 +1330,8 @@
         active.value = index + 1;
         mForm?.$emit("update:stepActive", active.value);
       };
-      const changeHandler = () => {
-        emit("change", props.model);
+      const changeHandler = (v, eventData) => {
+        emit("change", props.model, eventData);
       };
       const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
@@ -1394,10 +1444,6 @@
           props.model[modelName.value] = props.model[modelName.value].sort((a, b) => b[prop] - a[prop]);
         }
       };
-      const foreUpdate = () => {
-        updateKey.value += 1;
-        setTimeout(() => rowDrop());
-      };
       const swapArray = (index1, index2) => {
         props.model[modelName.value].splice(index1, 0, props.model[modelName.value].splice(index2, 1)[0]);
         if (props.sortKey) {
@@ -1407,31 +1453,25 @@
         }
         mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
       };
+      let sortable;
       const rowDrop = () => {
+        sortable?.destroy();
         const tableEl = tMagicTable.value?.instance.$el;
         const tBodyEl = tableEl?.querySelector(".el-table__body > tbody");
-        if (tBodyEl) {
-          const sortable = Sortable.create(tBodyEl, {
-            onEnd: ({ newIndex, oldIndex }) => {
-              if (typeof newIndex === "undefined") return;
-              if (typeof oldIndex === "undefined") return;
-              swapArray(newIndex, oldIndex);
-              emit("change", props.model[modelName.value]);
-              foreUpdate();
-              sortable.destroy();
-              mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
-              utils.sleep(1e3).then(() => {
-                const elTrs = tableEl.querySelectorAll(".el-table__body > tbody > tr");
-                if (elTrs?.[newIndex]) {
-                  elTrs[newIndex].style.backgroundColor = "rgba(243, 89, 59, 0.2)";
-                  utils.sleep(1e3).then(() => {
-                    elTrs[newIndex].style.backgroundColor = "";
-                  });
-                }
-              });
-            }
-          });
+        if (!tBodyEl) {
+          return;
         }
+        sortable = Sortable.create(tBodyEl, {
+          draggable: ".tmagic-design-table-row",
+          direction: "vertical",
+          onEnd: ({ newIndex, oldIndex }) => {
+            if (typeof newIndex === "undefined") return;
+            if (typeof oldIndex === "undefined") return;
+            swapArray(newIndex, oldIndex);
+            emit("change", props.model[modelName.value]);
+            mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
+          }
+        });
       };
       const newHandler = async (row) => {
         if (props.config.max && props.model[modelName.value].length >= props.config.max) {
@@ -1490,7 +1530,14 @@
           inputs[props.sortKey] = props.model[modelName.value][length - 1][props.sortKey] - 1;
         }
         props.model[modelName.value].push(inputs);
-        emit("change", props.model[modelName.value]);
+        emit("change", props.model[modelName.value], {
+          changeRecords: [
+            {
+              propPath: `${props.prop}.${props.model[modelName.value].length - 1}`,
+              value: inputs
+            }
+          ]
+        });
       };
       vue.onMounted(() => {
         if (props.config.defautSort) {
@@ -1693,6 +1740,9 @@
         return `${prop.value}${prop.value ? "." : ""}${index + 1 + pagecontext.value * pagesize.value - 1}`;
       };
       const onAddDiffCount = () => emit("addDiffCount");
+      const changeHandler = (v, eventData) => {
+        emit("change", props.model, eventData);
+      };
       __expose({
         toggleRowSelection
       });
@@ -1733,7 +1783,7 @@
                     onSortChange: sortChange
                   }, {
                     default: vue.withCtx(() => [
-                      _ctx.config.itemExtra ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                      _ctx.config.itemExtra && !_ctx.config.dropSort ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
                         key: 0,
                         fixed: "left",
                         width: "30",
@@ -1856,8 +1906,8 @@
                                 lastValues: lastData.value[scope.$index],
                                 "is-compare": _ctx.isCompare,
                                 size: _ctx.size,
-                                onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change", _ctx.model[modelName.value])),
-                                onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
+                                onChange: changeHandler,
+                                onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
                               }, null, 8, ["disabled", "prop", "rules", "config", "model", "lastValues", "is-compare", "size"])) : vue.createCommentVNode("", true)
                             ]),
                             _: 2
@@ -1878,9 +1928,9 @@
                   type: "primary",
                   disabled: _ctx.disabled,
                   plain: "",
-                  onClick: _cache[2] || (_cache[2] = ($event) => newHandler())
+                  onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
                 }, {
-                  default: vue.withCtx(() => _cache[4] || (_cache[4] = [
+                  default: vue.withCtx(() => _cache[3] || (_cache[3] = [
                     vue.createTextVNode("新增一行")
                   ])),
                   _: 1
@@ -1893,7 +1943,7 @@
                     type: "primary",
                     onClick: toggleMode
                   }, {
-                    default: vue.withCtx(() => _cache[5] || (_cache[5] = [
+                    default: vue.withCtx(() => _cache[4] || (_cache[4] = [
                       vue.createTextVNode("展开配置")
                     ])),
                     _: 1
@@ -1927,7 +1977,7 @@
                         disabled: _ctx.disabled,
                         plain: ""
                       }, {
-                        default: vue.withCtx(() => _cache[6] || (_cache[6] = [
+                        default: vue.withCtx(() => _cache[5] || (_cache[5] = [
                           vue.createTextVNode("导入EXCEL")
                         ])),
                         _: 1
@@ -1941,9 +1991,9 @@
                     type: "warning",
                     disabled: _ctx.disabled,
                     plain: "",
-                    onClick: _cache[3] || (_cache[3] = ($event) => clearHandler())
+                    onClick: _cache[2] || (_cache[2] = ($event) => clearHandler())
                   }, {
-                    default: vue.withCtx(() => _cache[7] || (_cache[7] = [
+                    default: vue.withCtx(() => _cache[6] || (_cache[6] = [
                       vue.createTextVNode("清空")
                     ])),
                     _: 1
@@ -2032,24 +2082,35 @@
       });
       const tabItems = (tab) => props.config.dynamic ? props.config.items : tab.items;
       const tabClickHandler = (tab) => tabClick(mForm, tab, props);
-      const onTabAdd = () => {
-        if (!props.config.name) throw new Error("dynamic tab 必须配置name");
+      const onTabAdd = async () => {
+        if (!props.name) throw new Error("dynamic tab 必须配置name");
         if (typeof props.config.onTabAdd === "function") {
           props.config.onTabAdd(mForm, {
             model: props.model,
             prop: props.prop,
             config: props.config
           });
-        } else if (tabs.value.length > 0) {
-          const newObj = lodashEs.cloneDeep(tabs.value[0]);
+          emit("change", props.model);
+        } else {
+          const newObj = await initValue(mForm, {
+            config: props.config.items,
+            initValues: {}
+          });
           newObj.title = `标签${tabs.value.length + 1}`;
-          props.model[props.config.name].push(newObj);
+          props.model[props.name].push(newObj);
+          emit("change", props.model[props.name], {
+            changeRecords: [
+              {
+                propPath: `${props.prop}.${props.model[props.name].length - 1}`,
+                value: newObj
+              }
+            ]
+          });
         }
-        emit("change", props.model);
-        mForm?.$emit("field-change", props.prop, props.model[props.config.name]);
+        mForm?.$emit("field-change", props.prop, props.model[props.name]);
       };
       const onTabRemove = (tabName) => {
-        if (!props.config.name) throw new Error("dynamic tab 必须配置name");
+        if (!props.name) throw new Error("dynamic tab 必须配置name");
         if (typeof props.config.onTabRemove === "function") {
           props.config.onTabRemove(mForm, tabName, {
             model: props.model,
@@ -2057,20 +2118,17 @@
             config: props.config
           });
         } else {
-          props.model[props.config.name].splice(+tabName, 1);
-          if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.name].length) {
+          props.model[props.name].splice(+tabName, 1);
+          if (tabName < activeTabName.value || activeTabName.value >= props.model[props.name].length) {
             activeTabName.value = (+activeTabName.value - 1).toString();
             tabClick(mForm, { name: activeTabName.value }, props);
           }
         }
         emit("change", props.model);
-        mForm?.$emit("field-change", props.prop, props.model[props.config.name]);
+        mForm?.$emit("field-change", props.prop, props.model[props.name]);
       };
-      const changeHandler = () => {
-        emit("change", props.model);
-        if (typeof props.config.onChange === "function") {
-          props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
-        }
+      const changeHandler = (v, eventData) => {
+        emit("change", props.model, eventData);
       };
       const onAddDiffCount = (tabIndex) => {
         if (!diffCount.value[tabIndex]) {
@@ -2613,9 +2671,9 @@
       const props = __props;
       const emit = __emit;
       useAddField(props.prop);
-      const value = props.model?.[props.name].toString();
+      const value = props.model?.[props.name]?.toString();
       if (props.model) {
-        if (value === "Invalid Date") {
+        if (!value || value === "Invalid Date") {
           props.model[props.name] = "";
         } else {
           props.model[props.name] = datetimeFormatter(
@@ -2714,7 +2772,7 @@
           let oldVal = props.model?.[v.name] || "";
           if (!oldVal && v.defaultValue !== void 0) {
             oldVal = v.defaultValue;
-            emit("change", oldVal, v.name);
+            emit("change", oldVal, { modifyKey: v.name });
           }
           fieldMap.value[v.name] = oldVal;
           fieldLabelMap.value[v.name] = v.label || "";
@@ -2737,7 +2795,9 @@
         }
       });
       const inputChangeHandler = (key) => {
-        emit("change", fieldMap.value[key], key);
+        emit("change", fieldMap.value[key], {
+          modifyKey: key
+        });
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
@@ -2818,9 +2878,10 @@
       labelPosition: { default: "right" },
       keyProp: { default: "__key" },
       popperClass: {},
+      preventSubmitDefault: { type: Boolean },
       extendState: {}
     },
-    emits: ["change", "error", "field-input", "field-change"],
+    emits: ["change", "error", "field-input", "field-change", "update:stepActive"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -2845,11 +2906,13 @@
         setField: (prop, field) => fields.set(prop, field),
         getField: (prop) => fields.get(prop),
         deleteField: (prop) => fields.delete(prop),
+        $messageBox: design.tMagicMessageBox,
+        $message: design.tMagicMessage,
         post: (options) => {
           if (requestFuc) {
             return requestFuc({
-              ...options,
-              method: "POST"
+              method: "POST",
+              ...options
             });
           }
         }
@@ -2870,9 +2933,11 @@
         }
       });
       vue.provide("mForm", formState);
+      const changeRecords = vue.shallowRef([]);
       vue.watch(
         [() => props.config, () => props.initValues],
         ([config], [preConfig]) => {
+          changeRecords.value = [];
           if (!lodashEs.isEqual(vue.toRaw(config), vue.toRaw(preConfig))) {
             initialized.value = false;
           }
@@ -2895,16 +2960,28 @@
         },
         { immediate: true }
       );
-      const changeHandler = () => {
-        emit("change", values.value);
+      const changeHandler = (v, eventData) => {
+        if (eventData.changeRecords?.length) {
+          changeRecords.value.push(...eventData.changeRecords);
+        }
+        emit("change", values.value, eventData);
+      };
+      const submitHandler = (e) => {
+        if (props.preventSubmitDefault) {
+          e.preventDefault();
+        }
       };
       __expose({
         values,
         lastValuesProcessed,
         formState,
         initialized,
+        changeRecords,
         changeHandler,
-        resetForm: () => tMagicForm.value?.resetFields(),
+        resetForm: () => {
+          tMagicForm.value?.resetFields();
+          changeRecords.value = [];
+        },
         submitForm: async (native) => {
           try {
             await tMagicForm.value?.validate();
@@ -2932,7 +3009,8 @@
           "label-width": _ctx.labelWidth,
           style: vue.normalizeStyle(`height: ${_ctx.height}`),
           inline: _ctx.inline,
-          "label-position": _ctx.labelPosition
+          "label-position": _ctx.labelPosition,
+          onSubmit: submitHandler
         }, {
           default: vue.withCtx(() => [
             initialized.value && Array.isArray(_ctx.config) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.config, (item, index) => {
@@ -2975,7 +3053,8 @@
       labelPosition: {},
       zIndex: {},
       size: {},
-      confirmText: { default: "确定" }
+      confirmText: { default: "确定" },
+      preventSubmitDefault: { type: Boolean }
     },
     emits: ["close", "submit", "error", "change"],
     setup(__props, { expose: __expose, emit: __emit }) {
@@ -3011,7 +3090,7 @@
       const save = async () => {
         try {
           const values = await form.value?.submitForm();
-          emit("submit", values);
+          emit("submit", values, { changeRecords: form.value?.changeRecords });
         } catch (e) {
           emit("error", e);
         }
@@ -3022,8 +3101,8 @@
       const nextStep = () => {
         stepActive.value += 1;
       };
-      const changeHandler = (value) => {
-        emit("change", value);
+      const changeHandler = (value, eventData) => {
+        emit("change", value, eventData);
       };
       const show = () => {
         dialogVisible.value = true;
@@ -3144,8 +3223,9 @@
                 "label-width": _ctx.labelWidth,
                 "label-position": _ctx.labelPosition,
                 inline: _ctx.inline,
+                "prevent-submit-default": _ctx.preventSubmitDefault,
                 onChange: changeHandler
-              }, null, 8, ["modelValue", "size", "disabled", "config", "init-values", "parent-values", "label-width", "label-position", "inline"]),
+              }, null, 8, ["modelValue", "size", "disabled", "config", "init-values", "parent-values", "label-width", "label-position", "inline", "prevent-submit-default"]),
               vue.renderSlot(_ctx.$slots, "default")
             ], 4)) : vue.createCommentVNode("", true)
           ]),
@@ -3871,7 +3951,7 @@
     }
   });
 
-  const _hoisted_1$1 = { class: "m-form-item__content" };
+  const _hoisted_1$1 = { style: { "width": "100%" } };
   const _hoisted_2 = { style: { "display": "flex", "justify-content": "flex-end" } };
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -3916,11 +3996,11 @@
         emit("change", props.model[props.name].trim() || "");
         popoverVisible.value = false;
       };
-      const checkWhiteSpace = (value) => {
+      const checkWhiteSpace = lodashEs.debounce((value) => {
         if (typeof value === "string" && !props.config.trim) {
           popoverVisible.value = value.trim() !== value;
         }
-      };
+      }, 300);
       const changeHandler = (value) => {
         emit("change", value);
       };
@@ -3987,45 +4067,70 @@
         props.model[props.name] = `${num}${unit || ""}`;
         emit("change", props.model[props.name]);
       };
+      const popoverEl = vue.ref();
+      const input = vue.ref();
+      const instanceRef = vue.shallowRef();
+      vue.watch(popoverEl, (el) => {
+        destroyPopover();
+        if (!input.value?.$el || !el) return;
+        instanceRef.value = core.createPopper(input.value.$el, el, {
+          placement: props.config.tooltip ? "top" : "bottom",
+          strategy: "absolute",
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 10]
+              }
+            }
+          ]
+        });
+      });
+      const destroyPopover = () => {
+        if (!instanceRef.value) return;
+        instanceRef.value.destroy();
+        instanceRef.value = void 0;
+      };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
-          width: "220px",
-          visible: popoverVisible.value,
-          "destroy-on-close": true
-        }, {
-          reference: vue.withCtx(() => [
-            vue.createVNode(vue.unref(design.TMagicInput), {
-              modelValue: _ctx.model[_ctx.name],
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
-              clearable: "",
-              size: _ctx.size,
-              placeholder: _ctx.config.placeholder,
-              disabled: _ctx.disabled,
-              onChange: changeHandler,
-              onInput: inputHandler,
-              onKeyup: _cache[1] || (_cache[1] = ($event) => keyUpHandler($event))
-            }, vue.createSlots({ _: 2 }, [
-              appendConfig.value ? {
-                name: "append",
-                fn: vue.withCtx(() => [
-                  appendConfig.value.type === "button" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                    key: 0,
-                    style: { "color": "#409eff" },
-                    size: _ctx.size,
-                    onClick: vue.withModifiers(buttonClickHandler, ["prevent"])
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode(vue.toDisplayString(appendConfig.value.text), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["size"])) : vue.createCommentVNode("", true)
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1032, ["modelValue", "size", "placeholder", "disabled"])
-          ]),
-          default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$1, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+          vue.createVNode(vue.unref(design.TMagicInput), {
+            modelValue: _ctx.model[_ctx.name],
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
+            ref_key: "input",
+            ref: input,
+            clearable: "",
+            size: _ctx.size,
+            placeholder: _ctx.config.placeholder,
+            disabled: _ctx.disabled,
+            onChange: changeHandler,
+            onInput: inputHandler,
+            onKeyup: _cache[1] || (_cache[1] = ($event) => keyUpHandler($event))
+          }, vue.createSlots({ _: 2 }, [
+            appendConfig.value ? {
+              name: "append",
+              fn: vue.withCtx(() => [
+                appendConfig.value.type === "button" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                  key: 0,
+                  style: { "color": "#409eff" },
+                  size: _ctx.size,
+                  onClick: vue.withModifiers(buttonClickHandler, ["prevent"])
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(appendConfig.value.text), 1)
+                  ]),
+                  _: 1
+                }, 8, ["size"])) : vue.createCommentVNode("", true)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "size", "placeholder", "disabled"]),
+          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+            popoverVisible.value ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "tmagic-form-text-popper m-form-item__content",
+              ref_key: "popoverEl",
+              ref: popoverEl
+            }, [
               _cache[5] || (_cache[5] = vue.createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格，是否移除空格？", -1)),
               vue.createElementVNode("div", _hoisted_2, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
@@ -4048,11 +4153,14 @@
                   ])),
                   _: 1
                 })
-              ])
-            ])
-          ]),
-          _: 1
-        }, 8, ["visible"]);
+              ]),
+              _cache[6] || (_cache[6] = vue.createElementVNode("span", {
+                class: "tmagic-form-text-popper-arrow",
+                "data-popper-arrow": ""
+              }, null, -1))
+            ], 512)) : vue.createCommentVNode("", true)
+          ]))
+        ]);
       };
     }
   });
@@ -4237,6 +4345,7 @@
       confirmText: { default: "确定" },
       inline: { type: Boolean },
       labelPosition: {},
+      preventSubmitDefault: { type: Boolean },
       beforeClose: {}
     },
     emits: ["close", "closed", "submit", "error", "change", "open", "opened"],
@@ -4256,13 +4365,13 @@
       const submitHandler = async () => {
         try {
           const values = await form.value?.submitForm();
-          emit("submit", values);
+          emit("submit", values, { changeRecords: form.value?.changeRecords });
         } catch (e) {
           emit("error", e);
         }
       };
-      const changeHandler = (value) => {
-        emit("change", value);
+      const changeHandler = (value, eventData) => {
+        emit("change", value, eventData);
       };
       const openHandler = () => {
         emit("open");
@@ -4373,8 +4482,9 @@
                 "label-width": _ctx.labelWidth,
                 "label-position": _ctx.labelPosition,
                 inline: _ctx.inline,
+                "prevent-submit-default": _ctx.preventSubmitDefault,
                 onChange: changeHandler
-              }, null, 8, ["size", "disabled", "config", "init-values", "parent-values", "label-width", "label-position", "inline"]),
+              }, null, 8, ["size", "disabled", "config", "init-values", "parent-values", "label-width", "label-position", "inline", "prevent-submit-default"]),
               vue.renderSlot(_ctx.$slots, "default")
             ], 512)) : vue.createCommentVNode("", true)
           ]),
@@ -4401,9 +4511,10 @@
       size: {},
       confirmText: { default: "确定" },
       inline: { type: Boolean },
-      labelPosition: {}
+      labelPosition: {},
+      preventSubmitDefault: { type: Boolean }
     },
-    emits: ["submit", "change", "error"],
+    emits: ["change", "submit", "error"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -4429,13 +4540,13 @@
       const submitHandler = async () => {
         try {
           const values = await form.value?.submitForm();
-          emit("submit", values);
+          emit("submit", values, { changeRecords: form.value?.changeRecords });
         } catch (e) {
           emit("error", e);
         }
       };
-      const changeHandler = (value) => {
-        emit("change", value);
+      const changeHandler = (value, eventData) => {
+        emit("change", value, eventData);
       };
       const show = () => {
       };
@@ -4469,8 +4580,9 @@
                   "label-width": _ctx.labelWidth,
                   "label-position": _ctx.labelPosition,
                   inline: _ctx.inline,
+                  "prevent-submit-default": _ctx.preventSubmitDefault,
                   onChange: changeHandler
-                }, null, 8, ["size", "disabled", "config", "init-values", "parent-values", "label-width", "label-position", "inline"]),
+                }, null, 8, ["size", "disabled", "config", "init-values", "parent-values", "label-width", "label-position", "inline", "prevent-submit-default"]),
                 vue.renderSlot(_ctx.$slots, "default")
               ]),
               _: 3
@@ -4508,8 +4620,8 @@
   const createForm = (config) => config;
   const defaultInstallOpt = {};
   const index = {
-    install(app, opt) {
-      const option = Object.assign(defaultInstallOpt, opt || {});
+    install(app, opt = {}) {
+      const option = Object.assign(defaultInstallOpt, opt);
       app.config.globalProperties.$MAGIC_FORM = option;
       setConfig(option);
       app.component("m-form", _sfc_main$d);
@@ -4523,6 +4635,7 @@
       app.component("m-form-table", _sfc_main$p);
       app.component("m-form-tab", _sfc_main$o);
       app.component("m-fields-text", _sfc_main$5);
+      app.component("m-fields-img-upload", _sfc_main$5);
       app.component("m-fields-number", _sfc_main$a);
       app.component("m-fields-number-range", _sfc_main$9);
       app.component("m-fields-textarea", _sfc_main$4);