@tmagic/form 1.1.0-beta.4 → 1.1.0-beta.7

package/dist/{tmagic-form.es.js → tmagic-form.mjs}

@@ -158,15 +158,7 @@ const initValue = async (mForm, { initValues, config }) => {
   return valuesTmp || {};
 };
 
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-const _sfc_main$v = defineComponent({
+const _sfc_main$u = defineComponent({
   name: "m-form-container",
   components: { WarningFilled },
   props: {
@@ -311,7 +303,16 @@ const _sfc_main$v = defineComponent({
     };
   }
 });
-const _hoisted_1$d = ["innerHTML"];
+
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _hoisted_1$c = ["innerHTML"];
 const _hoisted_2$7 = ["innerHTML"];
 const _hoisted_3$7 = ["innerHTML"];
 const _hoisted_4$6 = ["innerHTML"];
@@ -319,7 +320,7 @@ const _hoisted_5$4 = {
   key: 4,
   style: { "text-align": "center" }
 };
-function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_fields_hidden = resolveComponent("m-fields-hidden");
   const _component_el_tooltip = resolveComponent("el-tooltip");
   const _component_el_form_item = resolveComponent("el-form-item");
@@ -361,7 +362,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
         label: withCtx(() => [
           createElementVNode("span", {
             innerHTML: _ctx.type === "checkbox" ? "" : _ctx.config.text
-          }, null, 8, _hoisted_1$d)
+          }, null, 8, _hoisted_1$c)
         ]),
         default: withCtx(() => [
           _ctx.tooltip ? (openBlock(), createBlock(_component_el_tooltip, { key: 0 }, {
@@ -446,9 +447,9 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ], 6)) : createCommentVNode("", true);
 }
-var Container = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$p]]);
+const Container = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$o]]);
 
-const _hoisted_1$c = ["innerHTML"];
+const _hoisted_1$b = ["innerHTML"];
 const _hoisted_2$6 = ["innerHTML"];
 const _hoisted_3$6 = { key: 1 };
 const _hoisted_4$5 = ["innerHTML"];
@@ -459,7 +460,7 @@ const _hoisted_6$2 = {
 };
 const _hoisted_7$2 = { style: { "flex": "1" } };
 const _hoisted_8$1 = ["src"];
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "Fieldset",
   props: {
     labelWidth: null,
@@ -515,7 +516,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 createElementVNode("span", {
                   innerHTML: __props.config.legend
-                }, null, 8, _hoisted_1$c),
+                }, null, 8, _hoisted_1$b),
                 __props.config.extra ? (openBlock(), createElementBlock("span", {
                   key: 0,
                   innerHTML: __props.config.extra,
@@ -572,7 +573,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$t = defineComponent({
+const _sfc_main$s = defineComponent({
   name: "m-form-group-list-item",
   components: { CaretBottom, CaretRight, CaretTop },
   props: {
@@ -656,18 +657,19 @@ const _sfc_main$t = defineComponent({
     };
   }
 });
-const _hoisted_1$b = { class: "m-fields-group-list-item" };
+
+const _hoisted_1$a = { class: "m-fields-group-list-item" };
 const _hoisted_2$5 = /* @__PURE__ */ createTextVNode("\u4E0A\u79FB");
 const _hoisted_3$5 = /* @__PURE__ */ createTextVNode("\u4E0B\u79FB");
 const _hoisted_4$4 = ["innerHTML"];
-function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CaretBottom = resolveComponent("CaretBottom");
   const _component_CaretRight = resolveComponent("CaretRight");
   const _component_el_icon = resolveComponent("el-icon");
   const _component_el_button = resolveComponent("el-button");
   const _component_CaretTop = resolveComponent("CaretTop");
   const _component_m_form_container = resolveComponent("m-form-container");
-  return openBlock(), createElementBlock("div", _hoisted_1$b, [
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
     createElementVNode("div", null, [
       createVNode(_component_el_icon, {
         style: { "margin-right": "7px" },
@@ -750,9 +752,9 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["config", "model", "labelWidth", "prop", "size", "onChange"])) : createCommentVNode("", true)
   ]);
 }
-var MFieldsGroupListItem = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$o]]);
+const MFieldsGroupListItem = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$n]]);
 
-const _sfc_main$s = defineComponent({
+const _sfc_main$r = defineComponent({
   name: "m-form-group-list",
   components: { MFieldsGroupListItem },
   props: {
@@ -848,7 +850,8 @@ const _sfc_main$s = defineComponent({
     };
   }
 });
-const _hoisted_1$a = { class: "m-fields-group-list" };
+
+const _hoisted_1$9 = { class: "m-fields-group-list" };
 const _hoisted_2$4 = ["innerHTML"];
 const _hoisted_3$4 = {
   key: 1,
@@ -860,10 +863,10 @@ const _hoisted_5$2 = [
 ];
 const _hoisted_6$1 = /* @__PURE__ */ createTextVNode("\u6DFB\u52A0\u7EC4");
 const _hoisted_7$1 = /* @__PURE__ */ createTextVNode("\u5207\u6362\u4E3A\u8868\u683C");
-function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_fields_group_list_item = resolveComponent("m-fields-group-list-item");
   const _component_el_button = resolveComponent("el-button");
-  return openBlock(), createElementBlock("div", _hoisted_1$a, [
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [
     _ctx.config.extra ? (openBlock(), createElementBlock("div", {
       key: 0,
       innerHTML: _ctx.config.extra,
@@ -907,9 +910,9 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["onClick"])) : createCommentVNode("", true)
   ]);
 }
-var GroupList = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$n]]);
+const GroupList = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$m]]);
 
-const _sfc_main$r = defineComponent({
+const _sfc_main$q = defineComponent({
   name: "m-form-panel",
   components: { CaretBottom, CaretRight },
   props: {
@@ -942,7 +945,8 @@ const _sfc_main$r = defineComponent({
     };
   }
 });
-const _hoisted_1$9 = { class: "clearfix" };
+
+const _hoisted_1$8 = { class: "clearfix" };
 const _hoisted_2$3 = ["innerHTML"];
 const _hoisted_3$3 = {
   key: 0,
@@ -950,7 +954,7 @@ const _hoisted_3$3 = {
 };
 const _hoisted_4$2 = { style: { "flex": "1" } };
 const _hoisted_5$1 = ["src"];
-function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_caret_bottom = resolveComponent("caret-bottom");
   const _component_caret_right = resolveComponent("caret-right");
   const _component_el_icon = resolveComponent("el-icon");
@@ -962,7 +966,7 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     "body-style": { display: _ctx.expand ? "block" : "none" }
   }, {
     header: withCtx(() => [
-      createElementVNode("div", _hoisted_1$9, [
+      createElementVNode("div", _hoisted_1$8, [
         createElementVNode("a", {
           href: "javascript:",
           style: { "width": "100%", "display": "block" },
@@ -1020,9 +1024,9 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["body-style"])) : createCommentVNode("", true);
 }
-var Panel = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$m]]);
+const Panel = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$l]]);
 
-const _sfc_main$q = defineComponent({
+const _sfc_main$p = defineComponent({
   props: {
     labelWidth: String,
     expandMore: Boolean,
@@ -1049,7 +1053,8 @@ const _sfc_main$q = defineComponent({
     };
   }
 });
-function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form_container = resolveComponent("m-form-container");
   const _component_el_col = resolveComponent("el-col");
   return withDirectives((openBlock(), createBlock(_component_el_col, { span: _ctx.span }, {
@@ -1069,9 +1074,9 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.display && _ctx.config.type !== "hidden"]
   ]);
 }
-var Col = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$l]]);
+const Col = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$k]]);
 
-const _sfc_main$p = defineComponent({
+const _sfc_main$o = defineComponent({
   name: "m-form-row",
   components: { Col },
   props: {
@@ -1099,7 +1104,8 @@ const _sfc_main$p = defineComponent({
     };
   }
 });
-function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Col = resolveComponent("Col");
   const _component_el_row = resolveComponent("el-row");
   return openBlock(), createBlock(_component_el_row, { gutter: 10 }, {
@@ -1121,9 +1127,9 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-var Row = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$k]]);
+const Row = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$j]]);
 
-const _sfc_main$o = defineComponent({
+const _sfc_main$n = defineComponent({
   name: "m-form-step",
   props: {
     model: {
@@ -1158,7 +1164,8 @@ const _sfc_main$o = defineComponent({
     return { mForm, active, stepClick, changeHandler };
   }
 });
-function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_step = resolveComponent("el-step");
   const _component_el_steps = resolveComponent("el-steps");
   const _component_m_form_container = resolveComponent("m-form-container");
@@ -1201,11 +1208,11 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     }), 256))
   ]);
 }
-var MStep = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$j]]);
+const MStep = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$i]]);
 
 let loadedAMapJS = false;
 let firstLoadingAMapJS = true;
-const _sfc_main$n = defineComponent({
+const _sfc_main$m = defineComponent({
   name: "m-form-table",
   props: {
     name: {
@@ -1574,7 +1581,8 @@ const _sfc_main$n = defineComponent({
     };
   }
 });
-const _hoisted_1$8 = ["innerHTML"];
+
+const _hoisted_1$7 = ["innerHTML"];
 const _hoisted_2$2 = { class: "el-form-item__content" };
 const _hoisted_3$2 = ["innerHTML"];
 const _hoisted_4$1 = /* @__PURE__ */ createTextVNode("\u6DFB\u52A0");
@@ -1587,7 +1595,7 @@ const _hoisted_10 = {
   class: "bottom",
   style: { "text-align": "right" }
 };
-function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_table_column = resolveComponent("el-table-column");
   const _component_el_button = resolveComponent("el-button");
   const _component_el_tooltip = resolveComponent("el-tooltip");
@@ -1603,7 +1611,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0,
       style: { "color": "rgba(0, 0, 0, 0.45)" },
       innerHTML: _ctx.config.extra
-    }, null, 8, _hoisted_1$8)) : createCommentVNode("", true),
+    }, null, 8, _hoisted_1$7)) : createCommentVNode("", true),
     createElementVNode("div", _hoisted_2$2, [
       createVNode(_component_el_tooltip, {
         content: "\u62D6\u62FD\u53EF\u6392\u5E8F",
@@ -1836,7 +1844,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 2);
 }
-var Table = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$i]]);
+const Table = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$h]]);
 
 const getActive = (mForm, props, activeTabName) => {
   const { config, model, prop } = props;
@@ -1955,8 +1963,8 @@ const Tab = defineComponent({
     };
   }
 });
-const _sfc_main$m = Tab;
-function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form_container = resolveComponent("m-form-container");
   const _component_el_tab_pane = resolveComponent("el-tab-pane");
   const _component_el_tabs = resolveComponent("el-tabs");
@@ -2002,7 +2010,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["modelValue", "class", "type", "editable", "tab-position", "onTabClick", "onTabAdd", "onTabRemove"]);
 }
-var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$h]]);
+const Tabs = /* @__PURE__ */ _export_sfc(Tab, [["render", _sfc_render$g]]);
 
 let $MAGIC_FORM = {};
 const setConfig = (option) => {
@@ -2010,7 +2018,7 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $MAGIC_FORM[key];
 
-var fieldProps = {
+const fieldProps = {
   model: {
     type: Object,
     required: true,
@@ -2061,8 +2069,8 @@ const _sfc_main$l = defineComponent({
     const vm = getCurrentInstance();
     useAddField(props.prop);
     const requestFunc = getConfig("request");
-    const cascader = ref(null);
-    const dialog = ref(null);
+    const cascader = ref();
+    const dialog = ref();
     const options = Array.isArray(props.config.options) ? ref(props.config.options) : ref([]);
     const remoteData = ref(null);
     const setRemoteOptions = async function() {
@@ -2139,13 +2147,14 @@ const _sfc_main$l = defineComponent({
     };
   }
 });
-const _hoisted_1$7 = {
+
+const _hoisted_1$6 = {
   class: "m-cascader",
   style: { "width": "100%" }
 };
-function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_cascader = resolveComponent("el-cascader");
-  return openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return openBlock(), createElementBlock("div", _hoisted_1$6, [
     createVNode(_component_el_cascader, {
       modelValue: _ctx.model[_ctx.name],
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
@@ -2162,7 +2171,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["modelValue", "size", "placeholder", "disabled", "options", "props", "onChange"])
   ]);
 }
-var Cascader = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$g]]);
+const Cascader = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$f]]);
 
 const _sfc_main$k = defineComponent({
   name: "m-fields-checkbox",
@@ -2203,7 +2212,8 @@ const _sfc_main$k = defineComponent({
     };
   }
 });
-function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_checkbox = resolveComponent("el-checkbox");
   return openBlock(), createBlock(_component_el_checkbox, {
     modelValue: _ctx.model[_ctx.name],
@@ -2216,7 +2226,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _ctx.changeHandler
   }, null, 8, ["modelValue", "size", "trueLabel", "falseLabel", "disabled", "label", "onChange"]);
 }
-var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$f]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$e]]);
 
 const _sfc_main$j = defineComponent({
   name: "m-fields-checkbox-group",
@@ -2240,7 +2250,8 @@ const _sfc_main$j = defineComponent({
     };
   }
 });
-function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_checkbox = resolveComponent("el-checkbox");
   const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
   return openBlock(), createBlock(_component_el_checkbox_group, {
@@ -2266,20 +2277,19 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["modelValue", "size", "disabled", "onChange"]);
 }
-var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$e]]);
+const CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$d]]);
 
-const _hoisted_1$6 = { key: 0 };
-const __default__$2 = defineComponent({
-  name: "m-fields-color-picker"
-});
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+  __name: "ColorPicker",
   props: {
-    ...fieldProps,
-    config: {
-      type: Object,
-      required: true
-    }
+    config: null,
+    model: null,
+    initValues: null,
+    values: null,
+    name: null,
+    prop: null,
+    disabled: { type: Boolean },
+    size: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2288,16 +2298,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const changeHandler = (value) => emit("change", value);
     return (_ctx, _cache) => {
       const _component_el_color_picker = resolveComponent("el-color-picker");
-      return _ctx.model ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
-        createVNode(_component_el_color_picker, {
-          modelValue: _ctx.model[_ctx.name],
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
-          size: _ctx.size,
-          disabled: _ctx.disabled,
-          showAlpha: true,
-          onChange: changeHandler
-        }, null, 8, ["modelValue", "size", "disabled"])
-      ])) : createCommentVNode("", true);
+      return openBlock(), createBlock(_component_el_color_picker, {
+        modelValue: __props.model[__props.name],
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        size: __props.size,
+        disabled: __props.disabled,
+        showAlpha: true,
+        onChange: changeHandler
+      }, null, 8, ["modelValue", "size", "disabled"]);
     };
   }
 });
@@ -2322,7 +2330,8 @@ const _sfc_main$h = defineComponent({
     };
   }
 });
-function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_date_picker = resolveComponent("el-date-picker");
   return openBlock(), createBlock(_component_el_date_picker, {
     modelValue: _ctx.model[_ctx.name],
@@ -2336,74 +2345,95 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _ctx.changeHandler
   }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format", "onChange"]);
 }
-var Date$1 = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$d]]);
+const Date$1 = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$c]]);
 
-const _sfc_main$g = defineComponent({
-  name: "m-fields-daterange",
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "Daterange",
   props: {
-    ...fieldProps,
-    config: {
-      type: Object,
-      required: true
-    }
+    config: null,
+    model: null,
+    initValues: null,
+    values: null,
+    name: null,
+    prop: null,
+    disabled: { type: Boolean },
+    size: null
   },
   emits: ["change"],
-  setup(props, { emit }) {
+  setup(__props, { emit }) {
+    const props = __props;
     useAddField(props.prop);
     const { names } = props.config;
     const value = ref([]);
     if (props.model !== void 0) {
       if (names?.length) {
-        value.value = names.map((item) => datetimeFormatter(props.model?.[item], ""));
-      } else if (props.name && props.model[props.name]) {
-        value.value = props.model[props.name].map((item) => datetimeFormatter(item, ""));
-      }
-    }
-    const setValue = (v) => {
-      if (names?.length && v instanceof Array) {
-        names.forEach((item, index) => {
-          if (props.model) {
-            props.model[item] = datetimeFormatter(v[index].toString(), "");
+        watch([() => props.model[names[0]], () => props.model[names[1]]], ([start, end], [preStart, preEnd]) => {
+          if (!value.value) {
+            value.value = [];
           }
+          if (!start || !end)
+            value.value = [];
+          if (start !== preStart)
+            value.value[0] = new Date(start);
+          if (end !== preEnd)
+            value.value[1] = new Date(end);
+        }, {
+          immediate: true
         });
-      } else if (props.model && props.name && v instanceof Date) {
-        props.model[props.name] = datetimeFormatter(v.toString(), "");
-      } else if (names?.length) {
-        names.forEach((item) => {
-          if (props.model) {
-            props.model[item] = void 0;
-          }
+      } else if (props.name && props.model[props.name]) {
+        watch(() => props.model[props.name], (start, preStart) => {
+          if (start !== preStart)
+            value.value = start.map((item) => item ? new Date(item) : void 0);
+        }, {
+          immediate: true
         });
-      } else if (props.name) {
-        props.model[props.name] = void 0;
       }
+    }
+    const setValue = (v) => {
+      names?.forEach((item, index) => {
+        if (!props.model) {
+          return;
+        }
+        if (Array.isArray(v)) {
+          props.model[item] = datetimeFormatter(v[index]?.toString(), "");
+        } else {
+          props.model[item] = void 0;
+        }
+      });
     };
-    return {
-      value,
-      changeHandler(v) {
-        setValue(v);
-        emit("change", v);
+    const changeHandler = (v) => {
+      const value2 = v || [];
+      if (props.name) {
+        emit("change", value2.map((item) => {
+          if (item)
+            return datetimeFormatter(item, "");
+          return void 0;
+        }));
+      } else {
+        if (names?.length) {
+          setValue(value2);
+        }
+        emit("change", value2);
       }
     };
+    return (_ctx, _cache) => {
+      const _component_el_date_picker = resolveComponent("el-date-picker");
+      return openBlock(), createBlock(_component_el_date_picker, {
+        modelValue: value.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+        type: "datetimerange",
+        "range-separator": "-",
+        "start-placeholder": "\u5F00\u59CB\u65E5\u671F",
+        "end-placeholder": "\u7ED3\u675F\u65E5\u671F",
+        size: __props.size,
+        "unlink-panels": true,
+        disabled: __props.disabled,
+        "default-time": __props.config.defaultTime,
+        onChange: changeHandler
+      }, null, 8, ["modelValue", "size", "disabled", "default-time"]);
+    };
   }
 });
-function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_date_picker = resolveComponent("el-date-picker");
-  return openBlock(), createBlock(_component_el_date_picker, {
-    modelValue: _ctx.value,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.value = $event),
-    type: "datetimerange",
-    "range-separator": "-",
-    "start-placeholder": "\u5F00\u59CB\u65E5\u671F",
-    "end-placeholder": "\u7ED3\u675F\u65E5\u671F",
-    size: _ctx.size,
-    "unlink-panels": true,
-    disabled: _ctx.disabled,
-    "default-time": _ctx.config.defaultTime,
-    onChange: _ctx.changeHandler
-  }, null, 8, ["modelValue", "size", "disabled", "default-time", "onChange"]);
-}
-var Daterange = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$c]]);
 
 const _sfc_main$f = defineComponent({
   name: "m-fields-datetime",
@@ -2433,6 +2463,7 @@ const _sfc_main$f = defineComponent({
     };
   }
 });
+
 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_date_picker = resolveComponent("el-date-picker");
   return openBlock(), createBlock(_component_el_date_picker, {
@@ -2449,30 +2480,27 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _ctx.changeHandler
   }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format", "default-time", "onChange"]);
 }
-var DateTime = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$b]]);
+const DateTime = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$b]]);
 
 const _hoisted_1$5 = { key: 0 };
-const __default__$1 = defineComponent({
-  name: "m-fields-display"
-});
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+  __name: "Display",
   props: {
-    ...fieldProps,
-    config: {
-      type: Object,
-      required: true
-    }
+    config: null,
+    model: null,
+    initValues: null,
+    values: null,
+    name: null,
+    prop: null
   },
   setup(__props) {
     const props = __props;
-    const n = computed(() => props.name || props.config.name || "");
-    if (props.config.initValue && n.value && props.model) {
-      props.model[n.value] = props.config.initValue;
+    if (props.config.initValue && props.model) {
+      props.model[props.name] = props.config.initValue;
     }
     useAddField(props.prop);
     return (_ctx, _cache) => {
-      return _ctx.model ? (openBlock(), createElementBlock("span", _hoisted_1$5, toDisplayString(_ctx.model[unref(n)]), 1)) : createCommentVNode("", true);
+      return __props.model ? (openBlock(), createElementBlock("span", _hoisted_1$5, toDisplayString(__props.model[__props.name]), 1)) : createCommentVNode("", true);
     };
   }
 });
@@ -2542,6 +2570,7 @@ const _sfc_main$d = defineComponent({
     }
   }
 });
+
 const _hoisted_1$4 = { class: "m-fields-dynamic-field" };
 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input = resolveComponent("el-input");
@@ -2571,31 +2600,28 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ]);
 }
-var DynamicField = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$a]]);
+const DynamicField = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$a]]);
 
-const __default__ = defineComponent({
-  name: "m-fields-hidden"
-});
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  ...__default__,
+  __name: "Hidden",
   props: {
-    ...fieldProps,
-    config: {
-      type: Object,
-      required: true
-    }
+    config: null,
+    model: null,
+    initValues: null,
+    values: null,
+    name: null,
+    prop: null
   },
   setup(__props) {
     const props = __props;
-    const n = computed(() => props.name || props.config.name || "");
     useAddField(props.prop);
     return (_ctx, _cache) => {
-      return _ctx.model ? withDirectives((openBlock(), createElementBlock("input", {
+      return __props.model ? withDirectives((openBlock(), createElementBlock("input", {
         key: 0,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[unref(n)] = $event),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
         type: "hidden"
       }, null, 512)), [
-        [vModelText, _ctx.model[unref(n)]]
+        [vModelText, __props.model[__props.name]]
       ]) : createCommentVNode("", true);
     };
   }
@@ -2669,6 +2695,7 @@ const _sfc_main$b = defineComponent({
     };
   }
 });
+
 const _hoisted_1$3 = ["href"];
 const _hoisted_2$1 = {
   key: 2,
@@ -2709,7 +2736,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["title", "width", "values", "config", "parentValues", "fullscreen", "onSubmit"])
   ]));
 }
-var Link = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$9]]);
+const Link = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$9]]);
 
 const _sfc_main$a = defineComponent({
   name: "m-fields-number",
@@ -2736,6 +2763,7 @@ const _sfc_main$a = defineComponent({
     };
   }
 });
+
 function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input_number = resolveComponent("el-input-number");
   return _ctx.model ? (openBlock(), createBlock(_component_el_input_number, {
@@ -2754,7 +2782,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     onInput: _ctx.inputHandler
   }, null, 8, ["modelValue", "size", "max", "min", "step", "placeholder", "disabled", "onChange", "onInput"])) : createCommentVNode("", true);
 }
-var Number$1 = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$8]]);
+const Number$1 = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$8]]);
 
 const _sfc_main$9 = defineComponent({
   name: "m-fields-radio-group",
@@ -2773,6 +2801,7 @@ const _sfc_main$9 = defineComponent({
     };
   }
 });
+
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_radio = resolveComponent("el-radio");
   const _component_el_radio_group = resolveComponent("el-radio-group");
@@ -2800,7 +2829,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["modelValue", "size", "disabled", "onChange"])) : createCommentVNode("", true);
 }
-var RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$7]]);
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$7]]);
 
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "SelectOptionGroups",
@@ -3125,6 +3154,7 @@ const _sfc_main$6 = defineComponent({
     };
   }
 });
+
 const _hoisted_1$2 = { key: 2 };
 function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_select_option_groups = resolveComponent("select-option-groups");
@@ -3168,7 +3198,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     [_directive_loading, _ctx.loading]
   ]) : createCommentVNode("", true);
 }
-var Select = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+const Select = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
 
 const _sfc_main$5 = defineComponent({
   name: "m-fields-switch",
@@ -3210,6 +3240,7 @@ const _sfc_main$5 = defineComponent({
     };
   }
 });
+
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_switch = resolveComponent("el-switch");
   return _ctx.model ? (openBlock(), createBlock(_component_el_switch, {
@@ -3223,7 +3254,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _ctx.changeHandler
   }, null, 8, ["modelValue", "size", "activeValue", "inactiveValue", "disabled", "onChange"])) : createCommentVNode("", true);
 }
-var Switch = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+const Switch = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
 
 const _sfc_main$4 = defineComponent({
   name: "m-fields-text",
@@ -3312,6 +3343,7 @@ const _sfc_main$4 = defineComponent({
     };
   }
 });
+
 const _hoisted_1$1 = { key: 0 };
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_button = resolveComponent("el-button");
@@ -3346,7 +3378,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     } : void 0
   ]), 1032, ["modelValue", "size", "placeholder", "disabled", "onChange", "onInput"]);
 }
-var Text = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const Text = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 
 const _sfc_main$3 = defineComponent({
   name: "m-fields-textarea",
@@ -3380,6 +3412,7 @@ const _sfc_main$3 = defineComponent({
     };
   }
 });
+
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input = resolveComponent("el-input");
   return openBlock(), createBlock(_component_el_input, {
@@ -3394,7 +3427,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     onInput: _ctx.inputHandler
   }, null, 8, ["modelValue", "size", "placeholder", "disabled", "onChange", "onInput"]);
 }
-var Textarea = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const Textarea = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 
 const _sfc_main$2 = defineComponent({
   name: "m-fields-time",
@@ -3419,6 +3452,7 @@ const _sfc_main$2 = defineComponent({
     };
   }
 });
+
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_time_picker = resolveComponent("el-time-picker");
   return openBlock(), createBlock(_component_el_time_picker, {
@@ -3431,7 +3465,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _ctx.changeHandler
   }, null, 8, ["modelValue", "size", "placeholder", "disabled", "onChange"]);
 }
-var Time = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const Time = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 
 const _sfc_main$1 = defineComponent({
   name: "m-form",
@@ -3557,6 +3591,7 @@ const _sfc_main$1 = defineComponent({
     };
   }
 });
+
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form_container = resolveComponent("m-form-container");
   const _component_el_form = resolveComponent("el-form");
@@ -3586,7 +3621,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["model", "label-width", "disabled", "style", "inline", "label-position"]);
 }
-var Form = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const Form = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
 const _sfc_main = defineComponent({
   name: "m-form-dialog",
@@ -3676,6 +3711,7 @@ const _sfc_main = defineComponent({
     };
   }
 });
+
 const _hoisted_1 = { style: { "min-height": "1px" } };
 const _hoisted_2 = /* @__PURE__ */ createTextVNode("\u53D6 \u6D88");
 const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u4E0A\u4E00\u6B65");
@@ -3788,9 +3824,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["modelValue", "title", "width", "fullscreen", "onClose"])
   ]);
 }
-var FormDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const FormDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-var index$1 = /* #__PURE__ */ (() => ".m-form-dialog .el-dialog__body {\n  padding: 0 !important;\n}\n.m-form-dialog .m-dialog-body {\n  padding: 0 20px;\n}\n.m-form-dialog .el-table .m-form-item .el-form-item {\n  margin-bottom: 0;\n}\n\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.5s;\n}\n\n.fade-enter, .fade-leave-to {\n  opacity: 0;\n}\n\n.m-form .m-form-tip {\n  color: rgba(0, 0, 0, 0.45);\n  font-size: 12px;\n  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n.m-form .m-form-schematic {\n  max-width: 50%;\n  height: 100%;\n}\n.m-form .el-table .cell > div.m-form-container {\n  display: block;\n}\n.m-form .el-tabs {\n  margin-bottom: 10px;\n}\n.m-form .el-form-item.hidden .el-form-item__label {\n  display: none;\n}\n\n.magic-datetime-picker-popper .el-picker-panel__footer button:first-child {\n  display: none;\n}\n\ndiv.m-fields-link {\n  width: fit-content;\n}\n\nfieldset.m-fieldset {\n  position: relative;\n  border: 1px solid rgb(229, 229, 229);\n  margin-top: 10px;\n  margin-bottom: 10px;\n  min-inline-size: auto;\n}\nfieldset.m-fieldset .el-checkbox {\n  height: 22px;\n}\nfieldset.m-fieldset legend {\n  font-size: 14px;\n  position: absolute;\n  border: 0;\n  top: -10px;\n  left: 20px;\n  background: rgb(255, 255, 255);\n  width: auto;\n  padding: 0px 3px;\n  font-weight: bold;\n  line-height: 20px;\n}\nfieldset.m-fieldset .m-form-tip {\n  margin-left: 5px;\n}\n\n.m-fields-group-list .el-button--text {\n  padding: 0;\n  margin-bottom: 7px;\n}\n.m-fields-group-list .el-tree-node__expand-icon {\n  padding: 0;\n  margin-bottom: 7px;\n}\n.m-fields-group-list .el-tree-node__expand-icon.expand {\n  transform: rotate(90deg);\n}\n.m-fields-group-list .m-fields-group-list-item {\n  border-bottom: 1px solid #ebeef5;\n  margin-bottom: 7px;\n}\n.m-fields-group-list .m-fields-group-list-item:last-of-type {\n  border-bottom: 0;\n}\n\n.m-form-panel .el-card__header:hover {\n  background: #f2f6fc;\n}\n.m-form-panel .el-card__header a {\n  color: #409eff;\n}\n.m-form-panel .el-card__body {\n  padding: 10px;\n}\n.m-form-panel .m-form-tip {\n  margin-left: 5px;\n}\n\n.m-fields-table {\n  width: 100%;\n}\n.m-fields-table.fixed {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 100;\n}\n.m-fields-table.fixed::before {\n  content: \" \";\n  display: block;\n  background: rgba(0, 0, 0, 0.5);\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 100;\n}\n.m-fields-table.fixed > .el-form-item__content {\n  z-index: 101;\n  position: relative;\n  margin: 10vh auto;\n  max-width: fit-content;\n}\n.m-fields-table.fixed table {\n  width: 95vw !important;\n}\n.m-fields-table th {\n  background-color: #f2f2f2 !important;\n  color: #333 !important;\n}\n.m-fields-table .el-table th {\n  padding: 0 !important;\n}\n.m-fields-table .el-table__column--dropable {\n  cursor: move;\n}\n.m-fields-table .el-form-item__content .el-input-group {\n  vertical-align: middle;\n}\n.m-fields-table.m-fields-table-item-extra tr.expanded td {\n  border-bottom: 0;\n}\n.m-fields-table .el-table__expanded-cell .m-form-tip {\n  margin-left: 80px;\n}\n.m-fields-table .el-form-item {\n  margin-bottom: 0;\n}\n\n.m-select {\n  width: 100%;\n}")();
+const index$1 = '';
 
 const defaultInstallOpt = {};
 const install = (app, opt) => {
@@ -3800,7 +3836,7 @@ const install = (app, opt) => {
   app.component(Form.name, Form);
   app.component(FormDialog.name, FormDialog);
   app.component(Container.name, Container);
-  app.component("m-form-fieldset", _sfc_main$u);
+  app.component("m-form-fieldset", _sfc_main$t);
   app.component(GroupList.name, GroupList);
   app.component(Panel.name, Panel);
   app.component(Row.name, Row);
@@ -3810,25 +3846,25 @@ const install = (app, opt) => {
   app.component(Text.name, Text);
   app.component(Number$1.name, Number$1);
   app.component(Textarea.name, Textarea);
-  app.component(_sfc_main$c.name, _sfc_main$c);
+  app.component("m-fields-hidden", _sfc_main$c);
   app.component(Date$1.name, Date$1);
   app.component(DateTime.name, DateTime);
   app.component(Time.name, Time);
   app.component(Checkbox.name, Checkbox);
   app.component(Switch.name, Switch);
-  app.component(Daterange.name, Daterange);
-  app.component(_sfc_main$i.name, _sfc_main$i);
+  app.component("m-fields-daterange", _sfc_main$g);
+  app.component("m-fields-color-picker", _sfc_main$i);
   app.component(CheckboxGroup.name, CheckboxGroup);
   app.component(RadioGroup.name, RadioGroup);
-  app.component(_sfc_main$e.name, _sfc_main$e);
+  app.component("m-fields-display", _sfc_main$e);
   app.component(Link.name, Link);
   app.component(Select.name, Select);
   app.component(Cascader.name, Cascader);
   app.component(DynamicField.name, DynamicField);
 };
-var index = {
+const index = {
   install
 };
 
-export { Cascader as MCascader, Checkbox as MCheckbox, CheckboxGroup as MCheckboxGroup, _sfc_main$i as MColorPicker, Container as MContainer, Date$1 as MDate, DateTime as MDateTime, Daterange as MDaterange, _sfc_main$e as MDisplay, DynamicField as MDynamicField, _sfc_main$u as MFieldset, Form as MForm, FormDialog as MFormDialog, GroupList as MGroupList, _sfc_main$c as MHidden, Link as MLink, Number$1 as MNumber, Panel as MPanel, RadioGroup as MRadioGroup, Row as MRow, Select as MSelect, Switch as MSwitch, Table as MTable, Tabs as MTabs, Text as MText, Textarea as MTextarea, Time as MTime, index as default, display, fieldProps, filterFunction, getRules, initValue, useAddField };
-//# sourceMappingURL=tmagic-form.es.js.map
+export { Cascader as MCascader, Checkbox as MCheckbox, CheckboxGroup as MCheckboxGroup, _sfc_main$i as MColorPicker, Container as MContainer, Date$1 as MDate, DateTime as MDateTime, _sfc_main$g as MDaterange, _sfc_main$e as MDisplay, DynamicField as MDynamicField, _sfc_main$t as MFieldset, Form as MForm, FormDialog as MFormDialog, GroupList as MGroupList, _sfc_main$c as MHidden, Link as MLink, Number$1 as MNumber, Panel as MPanel, RadioGroup as MRadioGroup, Row as MRow, Select as MSelect, Switch as MSwitch, Table as MTable, Tabs as MTabs, Text as MText, Textarea as MTextarea, Time as MTime, index as default, display, fieldProps, filterFunction, getRules, initValue, useAddField };
+//# sourceMappingURL=tmagic-form.mjs.map