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

package/dist/tmagic-form.umd.js

@@ -4,9 +4,9 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.lodashEs, global.ElementPlus, global.Sortable, global.utils));
 })(this, (function (exports, vue, iconsVue, lodashEs, elementPlus, Sortable, utils) { 'use strict';
 
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+  const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
-  var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
+  const Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
 
   const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
   const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
@@ -161,15 +161,7 @@
     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 = vue.defineComponent({
+  const _sfc_main$u = vue.defineComponent({
     name: "m-form-container",
     components: { WarningFilled: iconsVue.WarningFilled },
     props: {
@@ -314,7 +306,16 @@
       };
     }
   });
-  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"];
@@ -322,7 +323,7 @@
     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 = vue.resolveComponent("m-fields-hidden");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
     const _component_el_form_item = vue.resolveComponent("el-form-item");
@@ -364,7 +365,7 @@
           label: vue.withCtx(() => [
             vue.createElementVNode("span", {
               innerHTML: _ctx.type === "checkbox" ? "" : _ctx.config.text
-            }, null, 8, _hoisted_1$d)
+            }, null, 8, _hoisted_1$c)
           ]),
           default: vue.withCtx(() => [
             _ctx.tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, { key: 0 }, {
@@ -449,9 +450,9 @@
       ])) : vue.createCommentVNode("", true)
     ], 6)) : vue.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"];
@@ -462,7 +463,7 @@
   };
   const _hoisted_7$2 = { style: { "flex": "1" } };
   const _hoisted_8$1 = ["src"];
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "Fieldset",
     props: {
       labelWidth: null,
@@ -518,7 +519,7 @@
                 default: vue.withCtx(() => [
                   vue.createElementVNode("span", {
                     innerHTML: __props.config.legend
-                  }, null, 8, _hoisted_1$c),
+                  }, null, 8, _hoisted_1$b),
                   __props.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: __props.config.extra,
@@ -575,7 +576,7 @@
     }
   });
 
-  const _sfc_main$t = vue.defineComponent({
+  const _sfc_main$s = vue.defineComponent({
     name: "m-form-group-list-item",
     components: { CaretBottom: iconsVue.CaretBottom, CaretRight: iconsVue.CaretRight, CaretTop: iconsVue.CaretTop },
     props: {
@@ -659,18 +660,19 @@
       };
     }
   });
-  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__ */ vue.createTextVNode("\u4E0A\u79FB");
   const _hoisted_3$5 = /* @__PURE__ */ vue.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 = vue.resolveComponent("CaretBottom");
     const _component_CaretRight = vue.resolveComponent("CaretRight");
     const _component_el_icon = vue.resolveComponent("el-icon");
     const _component_el_button = vue.resolveComponent("el-button");
     const _component_CaretTop = vue.resolveComponent("CaretTop");
     const _component_m_form_container = vue.resolveComponent("m-form-container");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
       vue.createElementVNode("div", null, [
         vue.createVNode(_component_el_icon, {
           style: { "margin-right": "7px" },
@@ -753,9 +755,9 @@
       }, null, 8, ["config", "model", "labelWidth", "prop", "size", "onChange"])) : vue.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 = vue.defineComponent({
+  const _sfc_main$r = vue.defineComponent({
     name: "m-form-group-list",
     components: { MFieldsGroupListItem },
     props: {
@@ -851,7 +853,8 @@
       };
     }
   });
-  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,
@@ -863,10 +866,10 @@
   ];
   const _hoisted_6$1 = /* @__PURE__ */ vue.createTextVNode("\u6DFB\u52A0\u7EC4");
   const _hoisted_7$1 = /* @__PURE__ */ vue.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 = vue.resolveComponent("m-fields-group-list-item");
     const _component_el_button = vue.resolveComponent("el-button");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
       _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
         innerHTML: _ctx.config.extra,
@@ -910,9 +913,9 @@
       }, 8, ["onClick"])) : vue.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 = vue.defineComponent({
+  const _sfc_main$q = vue.defineComponent({
     name: "m-form-panel",
     components: { CaretBottom: iconsVue.CaretBottom, CaretRight: iconsVue.CaretRight },
     props: {
@@ -945,7 +948,8 @@
       };
     }
   });
-  const _hoisted_1$9 = { class: "clearfix" };
+
+  const _hoisted_1$8 = { class: "clearfix" };
   const _hoisted_2$3 = ["innerHTML"];
   const _hoisted_3$3 = {
     key: 0,
@@ -953,7 +957,7 @@
   };
   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 = vue.resolveComponent("caret-bottom");
     const _component_caret_right = vue.resolveComponent("caret-right");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -965,7 +969,7 @@
       "body-style": { display: _ctx.expand ? "block" : "none" }
     }, {
       header: vue.withCtx(() => [
-        vue.createElementVNode("div", _hoisted_1$9, [
+        vue.createElementVNode("div", _hoisted_1$8, [
           vue.createElementVNode("a", {
             href: "javascript:",
             style: { "width": "100%", "display": "block" },
@@ -1023,9 +1027,9 @@
       _: 3
     }, 8, ["body-style"])) : vue.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 = vue.defineComponent({
+  const _sfc_main$p = vue.defineComponent({
     props: {
       labelWidth: String,
       expandMore: Boolean,
@@ -1052,7 +1056,8 @@
       };
     }
   });
-  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 = vue.resolveComponent("m-form-container");
     const _component_el_col = vue.resolveComponent("el-col");
     return vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_col, { span: _ctx.span }, {
@@ -1072,9 +1077,9 @@
       [vue.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 = vue.defineComponent({
+  const _sfc_main$o = vue.defineComponent({
     name: "m-form-row",
     components: { Col },
     props: {
@@ -1102,7 +1107,8 @@
       };
     }
   });
-  function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+
+  function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Col = vue.resolveComponent("Col");
     const _component_el_row = vue.resolveComponent("el-row");
     return vue.openBlock(), vue.createBlock(_component_el_row, { gutter: 10 }, {
@@ -1124,9 +1130,9 @@
       _: 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 = vue.defineComponent({
+  const _sfc_main$n = vue.defineComponent({
     name: "m-form-step",
     props: {
       model: {
@@ -1161,7 +1167,8 @@
       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 = vue.resolveComponent("el-step");
     const _component_el_steps = vue.resolveComponent("el-steps");
     const _component_m_form_container = vue.resolveComponent("m-form-container");
@@ -1204,11 +1211,11 @@
       }), 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 = vue.defineComponent({
+  const _sfc_main$m = vue.defineComponent({
     name: "m-form-table",
     props: {
       name: {
@@ -1284,7 +1291,7 @@
         const tableEl = elTable.value?.$el;
         if (tableEl?.querySelectorAll(".el-table__body > tbody")) {
           const el = tableEl.querySelectorAll(".el-table__body > tbody")[0];
-          const sortable = Sortable__default["default"].create(el, {
+          const sortable = Sortable__default.default.create(el, {
             onEnd: ({ newIndex, oldIndex }) => {
               if (typeof newIndex === "undefined")
                 return;
@@ -1577,7 +1584,8 @@
       };
     }
   });
-  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__ */ vue.createTextVNode("\u6DFB\u52A0");
@@ -1590,7 +1598,7 @@
     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 = vue.resolveComponent("el-table-column");
     const _component_el_button = vue.resolveComponent("el-button");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -1606,7 +1614,7 @@
         key: 0,
         style: { "color": "rgba(0, 0, 0, 0.45)" },
         innerHTML: _ctx.config.extra
-      }, null, 8, _hoisted_1$8)) : vue.createCommentVNode("", true),
+      }, null, 8, _hoisted_1$7)) : vue.createCommentVNode("", true),
       vue.createElementVNode("div", _hoisted_2$2, [
         vue.createVNode(_component_el_tooltip, {
           content: "\u62D6\u62FD\u53EF\u6392\u5E8F",
@@ -1839,7 +1847,7 @@
       ])
     ], 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;
@@ -1958,8 +1966,8 @@
       };
     }
   });
-  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 = vue.resolveComponent("m-form-container");
     const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
     const _component_el_tabs = vue.resolveComponent("el-tabs");
@@ -2005,7 +2013,7 @@
       _: 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) => {
@@ -2013,7 +2021,7 @@
   };
   const getConfig = (key) => $MAGIC_FORM[key];
 
-  var fieldProps = {
+  const fieldProps = {
     model: {
       type: Object,
       required: true,
@@ -2064,8 +2072,8 @@
       const vm = vue.getCurrentInstance();
       useAddField(props.prop);
       const requestFunc = getConfig("request");
-      const cascader = vue.ref(null);
-      const dialog = vue.ref(null);
+      const cascader = vue.ref();
+      const dialog = vue.ref();
       const options = Array.isArray(props.config.options) ? vue.ref(props.config.options) : vue.ref([]);
       const remoteData = vue.ref(null);
       const setRemoteOptions = async function() {
@@ -2142,13 +2150,14 @@
       };
     }
   });
-  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 = vue.resolveComponent("el-cascader");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
       vue.createVNode(_component_el_cascader, {
         modelValue: _ctx.model[_ctx.name],
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
@@ -2165,7 +2174,7 @@
       }, 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 = vue.defineComponent({
     name: "m-fields-checkbox",
@@ -2206,7 +2215,8 @@
       };
     }
   });
-  function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+
+  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_checkbox = vue.resolveComponent("el-checkbox");
     return vue.openBlock(), vue.createBlock(_component_el_checkbox, {
       modelValue: _ctx.model[_ctx.name],
@@ -2219,7 +2229,7 @@
       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 = vue.defineComponent({
     name: "m-fields-checkbox-group",
@@ -2243,7 +2253,8 @@
       };
     }
   });
-  function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+
+  function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_checkbox = vue.resolveComponent("el-checkbox");
     const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group");
     return vue.openBlock(), vue.createBlock(_component_el_checkbox_group, {
@@ -2269,20 +2280,19 @@
       _: 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 = vue.defineComponent({
-    name: "m-fields-color-picker"
-  });
   const _sfc_main$i = /* @__PURE__ */ vue.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 }) {
@@ -2291,16 +2301,14 @@
       const changeHandler = (value) => emit("change", value);
       return (_ctx, _cache) => {
         const _component_el_color_picker = vue.resolveComponent("el-color-picker");
-        return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
-          vue.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"])
-        ])) : vue.createCommentVNode("", true);
+        return vue.openBlock(), vue.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"]);
       };
     }
   });
@@ -2325,7 +2333,8 @@
       };
     }
   });
-  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 = vue.resolveComponent("el-date-picker");
     return vue.openBlock(), vue.createBlock(_component_el_date_picker, {
       modelValue: _ctx.model[_ctx.name],
@@ -2339,74 +2348,95 @@
       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 = vue.defineComponent({
-    name: "m-fields-daterange",
+  const _sfc_main$g = /* @__PURE__ */ vue.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 = vue.ref([]);
       if (props.model !== void 0) {
         if (names?.length) {
-          value.value = names.map((item) => utils.datetimeFormatter(props.model?.[item], ""));
-        } else if (props.name && props.model[props.name]) {
-          value.value = props.model[props.name].map((item) => utils.datetimeFormatter(item, ""));
-        }
-      }
-      const setValue = (v) => {
-        if (names?.length && v instanceof Array) {
-          names.forEach((item, index) => {
-            if (props.model) {
-              props.model[item] = utils.datetimeFormatter(v[index].toString(), "");
+          vue.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] = utils.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]) {
+          vue.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] = utils.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 utils.datetimeFormatter(item, "");
+            return void 0;
+          }));
+        } else {
+          if (names?.length) {
+            setValue(value2);
+          }
+          emit("change", value2);
         }
       };
+      return (_ctx, _cache) => {
+        const _component_el_date_picker = vue.resolveComponent("el-date-picker");
+        return vue.openBlock(), vue.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 = vue.resolveComponent("el-date-picker");
-    return vue.openBlock(), vue.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 = vue.defineComponent({
     name: "m-fields-datetime",
@@ -2436,6 +2466,7 @@
       };
     }
   });
+
   function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_date_picker = vue.resolveComponent("el-date-picker");
     return vue.openBlock(), vue.createBlock(_component_el_date_picker, {
@@ -2452,30 +2483,27 @@
       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 = vue.defineComponent({
-    name: "m-fields-display"
-  });
   const _sfc_main$e = /* @__PURE__ */ vue.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 = vue.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 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$5, vue.toDisplayString(_ctx.model[vue.unref(n)]), 1)) : vue.createCommentVNode("", true);
+        return __props.model ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$5, vue.toDisplayString(__props.model[__props.name]), 1)) : vue.createCommentVNode("", true);
       };
     }
   });
@@ -2545,6 +2573,7 @@
       }
     }
   });
+
   const _hoisted_1$4 = { class: "m-fields-dynamic-field" };
   function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
@@ -2574,31 +2603,28 @@
       })
     ]);
   }
-  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__ = vue.defineComponent({
-    name: "m-fields-hidden"
-  });
   const _sfc_main$c = /* @__PURE__ */ vue.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 = vue.computed(() => props.name || props.config.name || "");
       useAddField(props.prop);
       return (_ctx, _cache) => {
-        return _ctx.model ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+        return __props.model ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
           key: 0,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[vue.unref(n)] = $event),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
           type: "hidden"
         }, null, 512)), [
-          [vue.vModelText, _ctx.model[vue.unref(n)]]
+          [vue.vModelText, __props.model[__props.name]]
         ]) : vue.createCommentVNode("", true);
       };
     }
@@ -2672,6 +2698,7 @@
       };
     }
   });
+
   const _hoisted_1$3 = ["href"];
   const _hoisted_2$1 = {
     key: 2,
@@ -2712,7 +2739,7 @@
       }, 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 = vue.defineComponent({
     name: "m-fields-number",
@@ -2739,6 +2766,7 @@
       };
     }
   });
+
   function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input_number = vue.resolveComponent("el-input-number");
     return _ctx.model ? (vue.openBlock(), vue.createBlock(_component_el_input_number, {
@@ -2757,7 +2785,7 @@
       onInput: _ctx.inputHandler
     }, null, 8, ["modelValue", "size", "max", "min", "step", "placeholder", "disabled", "onChange", "onInput"])) : vue.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 = vue.defineComponent({
     name: "m-fields-radio-group",
@@ -2776,6 +2804,7 @@
       };
     }
   });
+
   function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_radio = vue.resolveComponent("el-radio");
     const _component_el_radio_group = vue.resolveComponent("el-radio-group");
@@ -2803,7 +2832,7 @@
       _: 1
     }, 8, ["modelValue", "size", "disabled", "onChange"])) : vue.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__ */ vue.defineComponent({
     __name: "SelectOptionGroups",
@@ -3128,6 +3157,7 @@
       };
     }
   });
+
   const _hoisted_1$2 = { key: 2 };
   function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_select_option_groups = vue.resolveComponent("select-option-groups");
@@ -3171,7 +3201,7 @@
       [_directive_loading, _ctx.loading]
     ]) : vue.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 = vue.defineComponent({
     name: "m-fields-switch",
@@ -3213,6 +3243,7 @@
       };
     }
   });
+
   function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_switch = vue.resolveComponent("el-switch");
     return _ctx.model ? (vue.openBlock(), vue.createBlock(_component_el_switch, {
@@ -3226,7 +3257,7 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["modelValue", "size", "activeValue", "inactiveValue", "disabled", "onChange"])) : vue.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 = vue.defineComponent({
     name: "m-fields-text",
@@ -3315,6 +3346,7 @@
       };
     }
   });
+
   const _hoisted_1$1 = { key: 0 };
   function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_button = vue.resolveComponent("el-button");
@@ -3349,7 +3381,7 @@
       } : 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 = vue.defineComponent({
     name: "m-fields-textarea",
@@ -3383,6 +3415,7 @@
       };
     }
   });
+
   function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     return vue.openBlock(), vue.createBlock(_component_el_input, {
@@ -3397,7 +3430,7 @@
       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 = vue.defineComponent({
     name: "m-fields-time",
@@ -3422,6 +3455,7 @@
       };
     }
   });
+
   function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_time_picker = vue.resolveComponent("el-time-picker");
     return vue.openBlock(), vue.createBlock(_component_el_time_picker, {
@@ -3434,7 +3468,7 @@
       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 = vue.defineComponent({
     name: "m-form",
@@ -3560,6 +3594,7 @@
       };
     }
   });
+
   function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_form_container = vue.resolveComponent("m-form-container");
     const _component_el_form = vue.resolveComponent("el-form");
@@ -3589,7 +3624,7 @@
       _: 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 = vue.defineComponent({
     name: "m-form-dialog",
@@ -3679,6 +3714,7 @@
       };
     }
   });
+
   const _hoisted_1 = { style: { "min-height": "1px" } };
   const _hoisted_2 = /* @__PURE__ */ vue.createTextVNode("\u53D6 \u6D88");
   const _hoisted_3 = /* @__PURE__ */ vue.createTextVNode("\u4E0A\u4E00\u6B65");
@@ -3791,9 +3827,9 @@
       }, 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) => {
@@ -3803,7 +3839,7 @@
     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);
@@ -3813,23 +3849,23 @@
     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
   };
 
@@ -3840,10 +3876,10 @@
   exports.MContainer = Container;
   exports.MDate = Date$1;
   exports.MDateTime = DateTime;
-  exports.MDaterange = Daterange;
+  exports.MDaterange = _sfc_main$g;
   exports.MDisplay = _sfc_main$e;
   exports.MDynamicField = DynamicField;
-  exports.MFieldset = _sfc_main$u;
+  exports.MFieldset = _sfc_main$t;
   exports.MForm = Form;
   exports.MFormDialog = FormDialog;
   exports.MGroupList = GroupList;
@@ -3860,7 +3896,7 @@
   exports.MText = Text;
   exports.MTextarea = Textarea;
   exports.MTime = Time;
-  exports["default"] = index;
+  exports.default = index;
   exports.display = display;
   exports.fieldProps = fieldProps;
   exports.filterFunction = filterFunction;