@tmagic/form 1.5.0-beta.9 → 1.5.1

package/dist/tmagic-form.js

@@ -1,11 +1,12 @@
-import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, Teleport, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, nextTick, resolveDirective, createSlots, withModifiers } from 'vue';
+import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, Teleport, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, shallowRef, onBeforeMount, nextTick, resolveDirective, createSlots, withModifiers } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, CaretTop, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
-import { cloneDeep, isEqual, isEmpty } from 'lodash-es';
-import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getDesignConfig, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicSelect, TMagicSwitch, TMagicPopover, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
+import { cloneDeep, isEqual, isEmpty, debounce } from 'lodash-es';
+import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getDesignConfig, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, tMagicMessageBox, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicSelect, TMagicSwitch, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import Sortable from 'sortablejs';
-import { sleep, asyncLoadJs, getValueByKeyPath, isNumber } from '@tmagic/utils';
+import { asyncLoadJs, getValueByKeyPath, isNumber } from '@tmagic/utils';
+import { createPopper } from '@popperjs/core';
 
 const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
 const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
@@ -243,7 +244,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       } 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 = computed(() => `m-${items.value ? "form" : "fields"}-${type.value}`);
     const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
@@ -299,40 +303,69 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       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 = 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 = resolveComponent("m-fields-hidden");
@@ -369,9 +402,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         }, 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 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           createVNode(unref(TMagicFormItem), {
             style: normalizeStyle(_ctx.config.tip ? "flex: 1" : ""),
-            class: normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+            class: 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: withCtx(() => [
@@ -419,7 +453,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               }, null, 8, _hoisted_4$3)) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["style", "class", "prop", "label-width", "rules"]),
+          }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
           _ctx.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             placement: "left"
@@ -442,9 +476,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         ], 64)) : type.value && display$1.value && showDiff.value ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
           createVNode(unref(TMagicFormItem), {
             style: normalizeStyle([_ctx.config.tip ? "flex: 1" : "", { "background": "#f7dadd" }]),
-            class: normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+            class: 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: withCtx(() => [
@@ -488,7 +523,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               }, null, 8, _hoisted_8$1)) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["style", "class", "prop", "label-width", "rules"]),
+          }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
           _ctx.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             placement: "left"
@@ -510,9 +545,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           })) : createCommentVNode("", true),
           createVNode(unref(TMagicFormItem), {
             style: normalizeStyle([_ctx.config.tip ? "flex: 1" : "", { "background": "#def7da" }]),
-            class: normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+            class: 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: withCtx(() => [
@@ -556,7 +592,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               }, null, 8, _hoisted_12)) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["style", "class", "prop", "label-width", "rules"]),
+          }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
           _ctx.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 1,
             placement: "left"
@@ -577,11 +613,11 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             _: 1
           })) : createCommentVNode("", true)
         ], 64)) : items.value && display$1.value ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
-          (name.value || name.value === 0 ? _ctx.model[name.value] : _ctx.model) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(items.value, (item) => {
+          (isValidName() ? _ctx.model[name.value] : _ctx.model) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(items.value, (item) => {
             return openBlock(), 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,
@@ -659,16 +695,17 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       }
       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) ? (openBlock(), createElementBlock("fieldset", {
         key: 0,
         class: "m-fieldset",
-        style: normalizeStyle(show.value ? "padding: 15px 15px 0 5px;" : "border: 0")
+        style: normalizeStyle(show.value ? "padding: 15px" : "border: 0")
       }, [
         name.value && _ctx.config.checkbox ? (openBlock(), createBlock(resolveDynamicComponent(!show.value ? "div" : "legend"), { key: 0 }, {
           default: withCtx(() => [
@@ -676,7 +713,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               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,
@@ -720,7 +757,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 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))
@@ -741,7 +778,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             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)) : createCommentVNode("", true)
@@ -795,7 +832,9 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     const length = computed(() => props.groupModel?.length || 0);
     const itemExtra = 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;
     };
@@ -947,9 +986,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       }
       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;
@@ -969,18 +1007,25 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         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";
@@ -1023,15 +1068,16 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         }), 128)),
         addable.value ? (openBlock(), createBlock(unref(TMagicButton), {
           key: 3,
-          onClick: addHandler,
-          size: "small",
-          disabled: _ctx.disabled
+          type: "primary",
+          size: _ctx.config.enableToggleMode ? "small" : "default",
+          disabled: _ctx.disabled,
+          onClick: addHandler
         }, {
           default: withCtx(() => _cache[2] || (_cache[2] = [
             createTextVNode("新增")
           ])),
           _: 1
-        }, 8, ["disabled"])) : createCommentVNode("", true),
+        }, 8, ["size", "disabled"])) : createCommentVNode("", true),
         _ctx.config.enableToggleMode ? (openBlock(), createBlock(unref(TMagicButton), {
           key: 4,
           icon: unref(Grid),
@@ -1080,7 +1126,9 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     const expand = ref(props.config.expand !== false);
     const items = 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 ? (openBlock(), createBlock(unref(TMagicCard), {
@@ -1177,7 +1225,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const mForm = inject("mForm");
     const display$1 = 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 withDirectives((openBlock(), createBlock(unref(TMagicCol), { span: _ctx.span }, {
@@ -1226,7 +1274,9 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const mForm = 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 openBlock(), createBlock(unref(TMagicRow), { gutter: 10 }, {
@@ -1262,6 +1312,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "Step",
   props: {
     model: {},
+    name: {},
     lastValues: {},
     isCompare: { type: Boolean },
     config: {},
@@ -1283,8 +1334,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       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) => {
@@ -1397,10 +1448,6 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         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) {
@@ -1410,31 +1457,25 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
       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]);
-            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)";
-                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) {
@@ -1493,7 +1534,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         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
+          }
+        ]
+      });
     };
     onMounted(() => {
       if (props.config.defautSort) {
@@ -1696,6 +1744,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       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
     });
@@ -1736,7 +1787,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   onSortChange: sortChange
                 }, {
                   default: withCtx(() => [
-                    _ctx.config.itemExtra ? (openBlock(), createBlock(unref(TMagicTableColumn), {
+                    _ctx.config.itemExtra && !_ctx.config.dropSort ? (openBlock(), createBlock(unref(TMagicTableColumn), {
                       key: 0,
                       fixed: "left",
                       width: "30",
@@ -1859,8 +1910,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                               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"])) : createCommentVNode("", true)
                           ]),
                           _: 2
@@ -1881,9 +1932,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                 type: "primary",
                 disabled: _ctx.disabled,
                 plain: "",
-                onClick: _cache[2] || (_cache[2] = ($event) => newHandler())
+                onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
               }, {
-                default: withCtx(() => _cache[4] || (_cache[4] = [
+                default: withCtx(() => _cache[3] || (_cache[3] = [
                   createTextVNode("新增一行")
                 ])),
                 _: 1
@@ -1896,7 +1947,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   type: "primary",
                   onClick: toggleMode
                 }, {
-                  default: withCtx(() => _cache[5] || (_cache[5] = [
+                  default: withCtx(() => _cache[4] || (_cache[4] = [
                     createTextVNode("展开配置")
                   ])),
                   _: 1
@@ -1930,7 +1981,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                       disabled: _ctx.disabled,
                       plain: ""
                     }, {
-                      default: withCtx(() => _cache[6] || (_cache[6] = [
+                      default: withCtx(() => _cache[5] || (_cache[5] = [
                         createTextVNode("导入EXCEL")
                       ])),
                       _: 1
@@ -1944,9 +1995,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   type: "warning",
                   disabled: _ctx.disabled,
                   plain: "",
-                  onClick: _cache[3] || (_cache[3] = ($event) => clearHandler())
+                  onClick: _cache[2] || (_cache[2] = ($event) => clearHandler())
                 }, {
-                  default: withCtx(() => _cache[7] || (_cache[7] = [
+                  default: withCtx(() => _cache[6] || (_cache[6] = [
                     createTextVNode("清空")
                   ])),
                   _: 1
@@ -2035,24 +2086,35 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     });
     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 = 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,
@@ -2060,20 +2122,17 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           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]) {
@@ -2616,9 +2675,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     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(
@@ -2717,7 +2776,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         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 || "";
@@ -2740,7 +2799,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       }
     });
     const inputChangeHandler = (key) => {
-      emit("change", fieldMap.value[key], key);
+      emit("change", fieldMap.value[key], {
+        modifyKey: key
+      });
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
@@ -2821,9 +2882,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     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;
@@ -2848,11 +2910,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       setField: (prop, field) => fields.set(prop, field),
       getField: (prop) => fields.get(prop),
       deleteField: (prop) => fields.delete(prop),
+      $messageBox: tMagicMessageBox,
+      $message: tMagicMessage,
       post: (options) => {
         if (requestFuc) {
           return requestFuc({
-            ...options,
-            method: "POST"
+            method: "POST",
+            ...options
           });
         }
       }
@@ -2873,9 +2937,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }
     });
     provide("mForm", formState);
+    const changeRecords = shallowRef([]);
     watch(
       [() => props.config, () => props.initValues],
       ([config], [preConfig]) => {
+        changeRecords.value = [];
         if (!isEqual(toRaw(config), toRaw(preConfig))) {
           initialized.value = false;
         }
@@ -2898,16 +2964,28 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       },
       { 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();
@@ -2935,7 +3013,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         "label-width": _ctx.labelWidth,
         style: normalizeStyle(`height: ${_ctx.height}`),
         inline: _ctx.inline,
-        "label-position": _ctx.labelPosition
+        "label-position": _ctx.labelPosition,
+        onSubmit: submitHandler
       }, {
         default: withCtx(() => [
           initialized.value && Array.isArray(_ctx.config) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.config, (item, index) => {
@@ -2978,7 +3057,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     labelPosition: {},
     zIndex: {},
     size: {},
-    confirmText: { default: "确定" }
+    confirmText: { default: "确定" },
+    preventSubmitDefault: { type: Boolean }
   },
   emits: ["close", "submit", "error", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -3014,7 +3094,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     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);
       }
@@ -3025,8 +3105,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const nextStep = () => {
       stepActive.value += 1;
     };
-    const changeHandler = (value) => {
-      emit("change", value);
+    const changeHandler = (value, eventData) => {
+      emit("change", value, eventData);
     };
     const show = () => {
       dialogVisible.value = true;
@@ -3147,8 +3227,9 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               "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"]),
             renderSlot(_ctx.$slots, "default")
           ], 4)) : createCommentVNode("", true)
         ]),
@@ -3874,7 +3955,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
@@ -3919,11 +4000,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name].trim() || "");
       popoverVisible.value = false;
     };
-    const checkWhiteSpace = (value) => {
+    const checkWhiteSpace = debounce((value) => {
       if (typeof value === "string" && !props.config.trim) {
         popoverVisible.value = value.trim() !== value;
       }
-    };
+    }, 300);
     const changeHandler = (value) => {
       emit("change", value);
     };
@@ -3990,45 +4071,70 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       props.model[props.name] = `${num}${unit || ""}`;
       emit("change", props.model[props.name]);
     };
+    const popoverEl = ref();
+    const input = ref();
+    const instanceRef = shallowRef();
+    watch(popoverEl, (el) => {
+      destroyPopover();
+      if (!input.value?.$el || !el) return;
+      instanceRef.value = 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 openBlock(), createBlock(unref(TMagicPopover), {
-        width: "220px",
-        visible: popoverVisible.value,
-        "destroy-on-close": true
-      }, {
-        reference: withCtx(() => [
-          createVNode(unref(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))
-          }, createSlots({ _: 2 }, [
-            appendConfig.value ? {
-              name: "append",
-              fn: withCtx(() => [
-                appendConfig.value.type === "button" ? (openBlock(), createBlock(unref(TMagicButton), {
-                  key: 0,
-                  style: { "color": "#409eff" },
-                  size: _ctx.size,
-                  onClick: withModifiers(buttonClickHandler, ["prevent"])
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(appendConfig.value.text), 1)
-                  ]),
-                  _: 1
-                }, 8, ["size"])) : createCommentVNode("", true)
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["modelValue", "size", "placeholder", "disabled"])
-        ]),
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createVNode(unref(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))
+        }, createSlots({ _: 2 }, [
+          appendConfig.value ? {
+            name: "append",
+            fn: withCtx(() => [
+              appendConfig.value.type === "button" ? (openBlock(), createBlock(unref(TMagicButton), {
+                key: 0,
+                style: { "color": "#409eff" },
+                size: _ctx.size,
+                onClick: withModifiers(buttonClickHandler, ["prevent"])
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(appendConfig.value.text), 1)
+                ]),
+                _: 1
+              }, 8, ["size"])) : createCommentVNode("", true)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["modelValue", "size", "placeholder", "disabled"]),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          popoverVisible.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "tmagic-form-text-popper m-form-item__content",
+            ref_key: "popoverEl",
+            ref: popoverEl
+          }, [
             _cache[5] || (_cache[5] = createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格，是否移除空格？", -1)),
             createElementVNode("div", _hoisted_2, [
               createVNode(unref(TMagicButton), {
@@ -4051,11 +4157,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ])),
                 _: 1
               })
-            ])
-          ])
-        ]),
-        _: 1
-      }, 8, ["visible"]);
+            ]),
+            _cache[6] || (_cache[6] = createElementVNode("span", {
+              class: "tmagic-form-text-popper-arrow",
+              "data-popper-arrow": ""
+            }, null, -1))
+          ], 512)) : createCommentVNode("", true)
+        ]))
+      ]);
     };
   }
 });
@@ -4240,6 +4349,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     confirmText: { default: "确定" },
     inline: { type: Boolean },
     labelPosition: {},
+    preventSubmitDefault: { type: Boolean },
     beforeClose: {}
   },
   emits: ["close", "closed", "submit", "error", "change", "open", "opened"],
@@ -4259,13 +4369,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     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");
@@ -4376,8 +4486,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               "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"]),
             renderSlot(_ctx.$slots, "default")
           ], 512)) : createCommentVNode("", true)
         ]),
@@ -4404,9 +4515,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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;
@@ -4432,13 +4544,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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 = () => {
     };
@@ -4472,8 +4584,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "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"]),
               renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
@@ -4511,8 +4624,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 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);
@@ -4526,6 +4639,7 @@ const index = {
     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);