@tmagic/form 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/tmagic-form.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lodash-es'), require('@element-plus/icons'), require('element-plus'), require('sortablejs'), require('@tmagic/utils')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'lodash-es', '@element-plus/icons', 'element-plus', 'sortablejs', '@tmagic/utils'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.vue, global.lodashEs, global.icons, global.elementPlus, global.Sortable, global.utils));
-})(this, (function (exports, vue, lodashEs, icons, elementPlus, Sortable, utils) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons'), require('lodash-es'), require('element-plus'), require('sortablejs'), require('@tmagic/utils')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons', 'lodash-es', 'element-plus', 'sortablejs', '@tmagic/utils'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.vue, global.icons, global.lodashEs, global.elementPlus, global.Sortable, global.utils));
+})(this, (function (exports, vue, icons, lodashEs, elementPlus, Sortable, utils) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -174,6 +174,7 @@
 
   const _sfc_main$s = vue.defineComponent({
     name: "m-form-container",
+    components: { WarningFilled: icons.WarningFilled },
     props: {
       labelWidth: String,
       expandMore: Boolean,
@@ -267,9 +268,14 @@
       };
       const onChangeHandler = async function(v, key2) {
         const { filter, onChange, trim, name: name2, dynamicKey } = props.config;
-        let value = filterHandler(filter, v);
-        value = await changeHandler(onChange, value) ?? value;
-        value = trimHandler(trim, value) ?? value;
+        let value = v;
+        try {
+          value = filterHandler(filter, v);
+          value = await changeHandler(onChange, value) ?? 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;
         }
@@ -299,9 +305,8 @@
   const _hoisted_1$g = ["innerHTML"];
   const _hoisted_2$7 = ["innerHTML"];
   const _hoisted_3$7 = ["innerHTML"];
-  const _hoisted_4$6 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-warning" }, null, -1);
-  const _hoisted_5$4 = ["innerHTML"];
-  const _hoisted_6$3 = {
+  const _hoisted_4$6 = ["innerHTML"];
+  const _hoisted_5$4 = {
     key: 4,
     style: { "text-align": "center" }
   };
@@ -309,11 +314,13 @@
     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");
+    const _component_warning_filled = vue.resolveComponent("warning-filled");
+    const _component_el_icon = vue.resolveComponent("el-icon");
     const _component_m_form_container = vue.resolveComponent("m-form-container");
     const _component_el_button = vue.resolveComponent("el-button");
     return _ctx.config ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
-      style: vue.normalizeStyle(_ctx.config.tip ? "display: flex" : ""),
+      style: vue.normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
       class: vue.normalizeClass([_ctx.config.className, "m-form-container"])
     }, [
       _ctx.type === "hidden" ? (vue.openBlock(), vue.createBlock(_component_m_fields_hidden, {
@@ -384,16 +391,20 @@
         }, 8, ["style", "prop", "label-width", "rules"]),
         _ctx.config.tip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
           key: 0,
-          placement: "top",
-          style: { "line-height": "40px", "margin-left": "5px" }
+          placement: "top"
         }, {
           content: vue.withCtx(() => [
             vue.createElementVNode("div", {
               innerHTML: _ctx.config.tip
-            }, null, 8, _hoisted_5$4)
+            }, null, 8, _hoisted_4$6)
           ]),
           default: vue.withCtx(() => [
-            _hoisted_4$6
+            vue.createVNode(_component_el_icon, { style: { "line-height": "40px", "margin-left": "5px" } }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_warning_filled)
+              ]),
+              _: 1
+            })
           ]),
           _: 1
         })) : vue.createCommentVNode("", true)
@@ -412,7 +423,7 @@
           }, null, 8, ["model", "config", "size", "step-active", "expand-more", "label-width", "prop", "onChange"]);
         }), 128)) : vue.createCommentVNode("", true)
       ], 64)) : vue.createCommentVNode("", true),
-      _ctx.config.expand && _ctx.type !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$3, [
+      _ctx.config.expand && _ctx.type !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
         vue.createVNode(_component_el_button, {
           type: "text",
           onClick: _ctx.expandHandler
@@ -1362,6 +1373,8 @@
         ArrowDown: icons.ArrowDown,
         ArrowUp: icons.ArrowUp,
         Delete: icons.Delete,
+        FullScreen: icons.FullScreen,
+        Grid: icons.Grid,
         data: vue.computed(() => props.model[modelName.value].filter((item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value)),
         addable: vue.computed(() => {
           if (!props.model[modelName.value].length) {
@@ -1610,7 +1623,7 @@
                 })) : vue.createCommentVNode("", true),
                 vue.createVNode(_component_el_table_column, {
                   label: "\u64CD\u4F5C",
-                  width: "50",
+                  width: "60",
                   fixed: _ctx.config.fixed === false ? void 0 : "left"
                 }, {
                   default: vue.withCtx((scope) => [
@@ -1628,7 +1641,7 @@
                 _ctx.sort && _ctx.model[_ctx.modelName] && _ctx.model[_ctx.modelName].length > 1 ? (vue.openBlock(), vue.createBlock(_component_el_table_column, {
                   key: 1,
                   label: "\u6392\u5E8F",
-                  width: "70"
+                  width: "60"
                 }, {
                   default: vue.withCtx((scope) => [
                     scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize - 1 !== 0 ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
@@ -1676,7 +1689,7 @@
                   width: "45"
                 })) : vue.createCommentVNode("", true),
                 vue.createVNode(_component_el_table_column, {
-                  width: "50",
+                  width: "60",
                   label: "\u5E8F\u53F7"
                 }, {
                   default: vue.withCtx((scope) => [
@@ -1733,7 +1746,7 @@
         _hoisted_5,
         _ctx.enableToggleMode && !_ctx.isFullscreen ? (vue.openBlock(), vue.createBlock(_component_el_button, {
           key: 1,
-          icon: "el-icon-s-grid",
+          icon: _ctx.Grid,
           size: "small",
           onClick: _ctx.toggleMode
         }, {
@@ -1741,10 +1754,10 @@
             _hoisted_6
           ]),
           _: 1
-        }, 8, ["onClick"])) : vue.createCommentVNode("", true),
+        }, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true),
         _ctx.config.enableFullscreen !== false ? (vue.openBlock(), vue.createBlock(_component_el_button, {
           key: 2,
-          icon: "el-icon-s-grid",
+          icon: _ctx.FullScreen,
           size: "small",
           onClick: _ctx.toggleFullscreen
         }, {
@@ -1752,7 +1765,7 @@
             vue.createTextVNode(vue.toDisplayString(_ctx.isFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F\u7F16\u8F91"), 1)
           ]),
           _: 1
-        }, 8, ["onClick"])) : vue.createCommentVNode("", true),
+        }, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true),
         _ctx.importable ? (vue.openBlock(), vue.createBlock(_component_el_upload, {
           key: 3,
           ref: "excelBtn",
@@ -1818,6 +1831,7 @@
   };
   const tabClickHandler = (mForm, tab, props) => {
     const { config, model, prop } = props;
+    tab.name = tab.paneName;
     if (typeof config.onTabClick === "function") {
       config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
     }
@@ -2937,6 +2951,7 @@
         vue.watch(() => mForm?.values, () => {
           typeof props.config.options === "function" && Promise.resolve(props.config.options(mForm, {
             model: props.model,
+            prop: props.prop,
             formValues: mForm?.values,
             formValue: mForm?.values
           })).then((data) => {
@@ -2986,6 +3001,7 @@
         remote,
         options,
         moreLoadingVisible,
+        popperClass: mForm?.popperClass,
         getRequestFuc() {
           return getConfig("request");
         },
@@ -3039,6 +3055,7 @@
       ref: "select",
       clearable: "",
       filterable: "",
+      "popper-class": `m-select-popper ${_ctx.popperClass}`,
       size: _ctx.size,
       remote: _ctx.remote,
       placeholder: _ctx.config.placeholder,
@@ -3082,7 +3099,7 @@
         ]) : vue.createCommentVNode("", true)
       ]),
       _: 1
-    }, 8, ["modelValue", "size", "remote", "placeholder", "multiple", "value-key", "allow-create", "disabled", "remote-method", "onChange", "onVisibleChange"])), [
+    }, 8, ["modelValue", "popper-class", "size", "remote", "placeholder", "multiple", "value-key", "allow-create", "disabled", "remote-method", "onChange", "onVisibleChange"])), [
       [_directive_loading, _ctx.loading]
     ]) : vue.createCommentVNode("", true);
   }
@@ -3253,7 +3270,7 @@
           typeof _ctx.config.append === "object" && _ctx.config.append.type === "button" ? (vue.openBlock(), vue.createBlock(_component_el_button, {
             key: 1,
             style: { "color": "#409eff" },
-            onClick: _ctx.buttonClickHandler
+            onClick: vue.withModifiers(_ctx.buttonClickHandler, ["prevent"])
           }, {
             default: vue.withCtx(() => [
               vue.createTextVNode(vue.toDisplayString(_ctx.config.append.text), 1)
@@ -3358,7 +3375,6 @@
 
   const _sfc_main$1 = vue.defineComponent({
     name: "m-form",
-    components: { ElForm: elementPlus.ElForm, MContainer: Container },
     props: {
       initValues: {
         type: Object,
@@ -3391,8 +3407,7 @@
         default: () => 1
       },
       size: {
-        type: String,
-        default: "small"
+        type: String
       },
       inline: {
         type: Boolean,
@@ -3405,6 +3420,9 @@
       keyProp: {
         type: String,
         default: "__key"
+      },
+      popperClass: {
+        type: String
       }
     },
     emits: ["change", "field-input", "field-change"],
@@ -3416,6 +3434,7 @@
       const requestFuc = getConfig("request");
       const formState = vue.reactive({
         keyProp: props.keyProp,
+        popperClass: props.popperClass,
         config: props.config,
         initValues: props.initValues,
         parentValues: props.parentValues,
@@ -3435,8 +3454,10 @@
         }
       });
       vue.provide("mForm", formState);
-      vue.watchEffect(() => {
-        initialized.value = false;
+      vue.watch([() => props.config, () => props.initValues], ([config], [preConfig]) => {
+        if (!lodashEs.isEqual(vue.toRaw(config), vue.toRaw(preConfig))) {
+          initialized.value = false;
+        }
         initValue(formState, {
           initValues: props.initValues,
           config: props.config
@@ -3444,7 +3465,7 @@
           values.value = value;
           initialized.value = true;
         });
-      });
+      }, { immediate: true });
       return {
         initialized,
         values,
@@ -3477,10 +3498,9 @@
     }
   });
   function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_MContainer = vue.resolveComponent("MContainer");
-    const _component_ElForm = vue.resolveComponent("ElForm");
-    return _ctx.initialized && Array.isArray(_ctx.config) ? (vue.openBlock(), vue.createBlock(_component_ElForm, {
-      key: 0,
+    const _component_m_form_container = vue.resolveComponent("m-form-container");
+    const _component_el_form = vue.resolveComponent("el-form");
+    return vue.openBlock(), vue.createBlock(_component_el_form, {
       class: "m-form",
       ref: "elForm",
       model: _ctx.values,
@@ -3491,8 +3511,8 @@
       "label-position": _ctx.labelPosition
     }, {
       default: vue.withCtx(() => [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config, (item, index) => {
-          return vue.openBlock(), vue.createBlock(_component_MContainer, {
+        _ctx.initialized && Array.isArray(_ctx.config) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.config, (item, index) => {
+          return vue.openBlock(), vue.createBlock(_component_m_form_container, {
             key: item[_ctx.keyProp] ?? index,
             config: item,
             model: _ctx.values,
@@ -3501,10 +3521,10 @@
             size: _ctx.size,
             onChange: _ctx.changeHandler
           }, null, 8, ["config", "model", "label-width", "step-active", "size", "onChange"]);
-        }), 128))
+        }), 128)) : vue.createCommentVNode("", true)
       ]),
       _: 1
-    }, 8, ["model", "label-width", "disabled", "style", "inline", "label-position"])) : vue.createCommentVNode("", true);
+    }, 8, ["model", "label-width", "disabled", "style", "inline", "label-position"]);
   }
   var Form = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
@@ -3524,6 +3544,7 @@
         default: () => []
       },
       labelWidth: [Number, String],
+      size: String,
       confirmText: {
         type: String,
         default: "\u786E\u5B9A"
@@ -3694,11 +3715,12 @@
               modelValue: _ctx.stepActive,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.stepActive = $event),
               ref: "form",
+              size: _ctx.size,
               config: _ctx.config,
               "init-values": _ctx.values,
               "label-width": _ctx.labelWidth,
               onChange: _ctx.changeHandler
-            }, null, 8, ["modelValue", "config", "init-values", "label-width", "onChange"]),
+            }, null, 8, ["modelValue", "size", "config", "init-values", "label-width", "onChange"]),
             vue.renderSlot(_ctx.$slots, "default")
           ], 4)
         ]),