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

package/README.md

@@ -0,0 +1 @@
+# [文档](https://tencent.github.io/tmagic-editor/docs/)

package/dist/style.css

@@ -136,7 +136,6 @@ fieldset.m-fieldset .m-form-tip {
   background-color: #f2f2f2 !important;
   color: #333 !important;
 }
-.m-fields-table .el-table td,
 .m-fields-table .el-table th {
   padding: 0 !important;
 }

package/dist/tmagic-form.es.js

@@ -1,7 +1,7 @@
-import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, toRefs, getCurrentInstance, watch, unref, reactive, onBeforeUnmount, vModelText, onBeforeMount, resolveDirective, createSlots, provide } from 'vue';
-import { cloneDeep } from 'lodash-es';
-import { CaretRight, CaretBottom, Delete, ArrowDown, ArrowUp } from '@element-plus/icons';
-import { ElMessage, ElForm } from 'element-plus';
+import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, toRefs, getCurrentInstance, watch, unref, reactive, onBeforeUnmount, vModelText, onBeforeMount, resolveDirective, createSlots, withModifiers, provide } from 'vue';
+import { WarningFilled, CaretRight, CaretBottom, Delete, ArrowDown, ArrowUp, FullScreen, Grid } from '@element-plus/icons';
+import { cloneDeep, isEqual } from 'lodash-es';
+import { ElMessage } from 'element-plus';
 import Sortable from 'sortablejs';
 import { asyncLoadJs, sleep, datetimeFormatter } from '@tmagic/utils';
 
@@ -59,7 +59,11 @@ const initValueItem = function(mForm, item, initValue2, value) {
   asyncLoadConfig(value, initValue2, item);
   if (name && !items && typeof initValue2[name] !== "undefined") {
     if (typeof value[name] === "undefined") {
-      value[name] = typeof initValue2[name] === "object" ? cloneDeep(initValue2[name]) : initValue2[name];
+      if (type === "number") {
+        value[name] = Number(initValue2[name]);
+      } else {
+        value[name] = typeof initValue2[name] === "object" ? cloneDeep(initValue2[name]) : initValue2[name];
+      }
     }
     return value;
   }
@@ -171,6 +175,7 @@ var _export_sfc = (sfc, props) => {
 
 const _sfc_main$s = defineComponent({
   name: "m-form-container",
+  components: { WarningFilled },
   props: {
     labelWidth: String,
     expandMore: Boolean,
@@ -264,9 +269,14 @@ const _sfc_main$s = defineComponent({
     };
     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;
       }
@@ -296,9 +306,8 @@ const _sfc_main$s = defineComponent({
 const _hoisted_1$g = ["innerHTML"];
 const _hoisted_2$7 = ["innerHTML"];
 const _hoisted_3$7 = ["innerHTML"];
-const _hoisted_4$6 = /* @__PURE__ */ 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" }
 };
@@ -306,11 +315,13 @@ function _sfc_render$p(_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");
+  const _component_warning_filled = resolveComponent("warning-filled");
+  const _component_el_icon = resolveComponent("el-icon");
   const _component_m_form_container = resolveComponent("m-form-container");
   const _component_el_button = resolveComponent("el-button");
   return _ctx.config ? (openBlock(), createElementBlock("div", {
     key: 0,
-    style: normalizeStyle(_ctx.config.tip ? "display: flex" : ""),
+    style: normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
     class: normalizeClass([_ctx.config.className, "m-form-container"])
   }, [
     _ctx.type === "hidden" ? (openBlock(), createBlock(_component_m_fields_hidden, {
@@ -381,16 +392,20 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["style", "prop", "label-width", "rules"]),
       _ctx.config.tip ? (openBlock(), createBlock(_component_el_tooltip, {
         key: 0,
-        placement: "top",
-        style: { "line-height": "40px", "margin-left": "5px" }
+        placement: "top"
       }, {
         content: withCtx(() => [
           createElementVNode("div", {
             innerHTML: _ctx.config.tip
-          }, null, 8, _hoisted_5$4)
+          }, null, 8, _hoisted_4$6)
         ]),
         default: withCtx(() => [
-          _hoisted_4$6
+          createVNode(_component_el_icon, { style: { "line-height": "40px", "margin-left": "5px" } }, {
+            default: withCtx(() => [
+              createVNode(_component_warning_filled)
+            ]),
+            _: 1
+          })
         ]),
         _: 1
       })) : createCommentVNode("", true)
@@ -409,7 +424,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["model", "config", "size", "step-active", "expand-more", "label-width", "prop", "onChange"]);
       }), 128)) : createCommentVNode("", true)
     ], 64)) : createCommentVNode("", true),
-    _ctx.config.expand && _ctx.type !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
+    _ctx.config.expand && _ctx.type !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
       createVNode(_component_el_button, {
         type: "text",
         onClick: _ctx.expandHandler
@@ -1359,6 +1374,8 @@ const _sfc_main$l = defineComponent({
       ArrowDown,
       ArrowUp,
       Delete,
+      FullScreen,
+      Grid,
       data: computed(() => props.model[modelName.value].filter((item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value)),
       addable: computed(() => {
         if (!props.model[modelName.value].length) {
@@ -1607,7 +1624,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
               })) : createCommentVNode("", true),
               createVNode(_component_el_table_column, {
                 label: "\u64CD\u4F5C",
-                width: "50",
+                width: "60",
                 fixed: _ctx.config.fixed === false ? void 0 : "left"
               }, {
                 default: withCtx((scope) => [
@@ -1625,7 +1642,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
               _ctx.sort && _ctx.model[_ctx.modelName] && _ctx.model[_ctx.modelName].length > 1 ? (openBlock(), createBlock(_component_el_table_column, {
                 key: 1,
                 label: "\u6392\u5E8F",
-                width: "70"
+                width: "60"
               }, {
                 default: withCtx((scope) => [
                   scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize - 1 !== 0 ? (openBlock(), createBlock(_component_el_tooltip, {
@@ -1673,7 +1690,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 width: "45"
               })) : createCommentVNode("", true),
               createVNode(_component_el_table_column, {
-                width: "50",
+                width: "60",
                 label: "\u5E8F\u53F7"
               }, {
                 default: withCtx((scope) => [
@@ -1730,7 +1747,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       _hoisted_5,
       _ctx.enableToggleMode && !_ctx.isFullscreen ? (openBlock(), createBlock(_component_el_button, {
         key: 1,
-        icon: "el-icon-s-grid",
+        icon: _ctx.Grid,
         size: "small",
         onClick: _ctx.toggleMode
       }, {
@@ -1738,10 +1755,10 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
           _hoisted_6
         ]),
         _: 1
-      }, 8, ["onClick"])) : createCommentVNode("", true),
+      }, 8, ["icon", "onClick"])) : createCommentVNode("", true),
       _ctx.config.enableFullscreen !== false ? (openBlock(), createBlock(_component_el_button, {
         key: 2,
-        icon: "el-icon-s-grid",
+        icon: _ctx.FullScreen,
         size: "small",
         onClick: _ctx.toggleFullscreen
       }, {
@@ -1749,7 +1766,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
           createTextVNode(toDisplayString(_ctx.isFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F\u7F16\u8F91"), 1)
         ]),
         _: 1
-      }, 8, ["onClick"])) : createCommentVNode("", true),
+      }, 8, ["icon", "onClick"])) : createCommentVNode("", true),
       _ctx.importable ? (openBlock(), createBlock(_component_el_upload, {
         key: 3,
         ref: "excelBtn",
@@ -1815,6 +1832,7 @@ const getActive = (mForm, props, activeTabName) => {
 };
 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 });
   }
@@ -2934,6 +2952,7 @@ const _sfc_main$6 = defineComponent({
       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) => {
@@ -2983,11 +3002,10 @@ const _sfc_main$6 = defineComponent({
       remote,
       options,
       moreLoadingVisible,
+      popperClass: mForm?.popperClass,
       getRequestFuc() {
         return getConfig("request");
       },
-      async getInitOption() {
-      },
       changeHandler(value) {
         emit("change", value);
       },
@@ -3036,6 +3054,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "select",
     clearable: "",
     filterable: "",
+    "popper-class": `m-select-popper ${_ctx.popperClass}`,
     size: _ctx.size,
     remote: _ctx.remote,
     placeholder: _ctx.config.placeholder,
@@ -3043,7 +3062,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     "value-key": _ctx.config.valueKey || "value",
     "allow-create": _ctx.config.allowCreate,
     disabled: _ctx.disabled,
-    "remote-method": _ctx.remoteMethod,
+    "remote-method": _ctx.config.remote && _ctx.remoteMethod,
     onChange: _ctx.changeHandler,
     onVisibleChange: _ctx.visibleHandler
   }, {
@@ -3079,7 +3098,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
       ]) : 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]
   ]) : createCommentVNode("", true);
 }
@@ -3151,6 +3170,7 @@ const _sfc_main$4 = defineComponent({
   },
   emits: ["change", "input"],
   setup(props, { emit }) {
+    const mForm = inject("mForm");
     useAddField(props.prop);
     const modelName = computed(() => props.name || props.config.name || "");
     return {
@@ -3159,12 +3179,10 @@ const _sfc_main$4 = defineComponent({
         emit("change", v);
       },
       inputHandler(v) {
-        const mForm = inject("mForm");
         emit("input", v);
         mForm?.$emit("field-input", props.prop, v);
       },
       buttonClickHandler() {
-        const mForm = inject("mForm");
         if (typeof props.config.append === "string")
           return;
         if (props.config.append?.handler) {
@@ -3250,13 +3268,14 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
         typeof _ctx.config.append === "object" && _ctx.config.append.type === "button" ? (openBlock(), createBlock(_component_el_button, {
           key: 1,
           style: { "color": "#409eff" },
-          onClick: _ctx.buttonClickHandler
+          size: _ctx.size,
+          onClick: withModifiers(_ctx.buttonClickHandler, ["prevent"])
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(_ctx.config.append.text), 1)
           ]),
           _: 1
-        }, 8, ["onClick"])) : createCommentVNode("", true)
+        }, 8, ["size", "onClick"])) : createCommentVNode("", true)
       ])
     } : void 0
   ]), 1032, ["modelValue", "size", "placeholder", "disabled", "onChange", "onInput"]);
@@ -3355,7 +3374,6 @@ var Time = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]])
 
 const _sfc_main$1 = defineComponent({
   name: "m-form",
-  components: { ElForm, MContainer: Container },
   props: {
     initValues: {
       type: Object,
@@ -3388,8 +3406,7 @@ const _sfc_main$1 = defineComponent({
       default: () => 1
     },
     size: {
-      type: String,
-      default: "small"
+      type: String
     },
     inline: {
       type: Boolean,
@@ -3402,6 +3419,9 @@ const _sfc_main$1 = defineComponent({
     keyProp: {
       type: String,
       default: "__key"
+    },
+    popperClass: {
+      type: String
     }
   },
   emits: ["change", "field-input", "field-change"],
@@ -3413,6 +3433,7 @@ const _sfc_main$1 = defineComponent({
     const requestFuc = getConfig("request");
     const formState = reactive({
       keyProp: props.keyProp,
+      popperClass: props.popperClass,
       config: props.config,
       initValues: props.initValues,
       parentValues: props.parentValues,
@@ -3432,8 +3453,10 @@ const _sfc_main$1 = defineComponent({
       }
     });
     provide("mForm", formState);
-    watchEffect(() => {
-      initialized.value = false;
+    watch([() => props.config, () => props.initValues], ([config], [preConfig]) => {
+      if (!isEqual(toRaw(config), toRaw(preConfig))) {
+        initialized.value = false;
+      }
       initValue(formState, {
         initValues: props.initValues,
         config: props.config
@@ -3441,7 +3464,7 @@ const _sfc_main$1 = defineComponent({
         values.value = value;
         initialized.value = true;
       });
-    });
+    }, { immediate: true });
     return {
       initialized,
       values,
@@ -3474,10 +3497,9 @@ const _sfc_main$1 = defineComponent({
   }
 });
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_MContainer = resolveComponent("MContainer");
-  const _component_ElForm = resolveComponent("ElForm");
-  return _ctx.initialized && Array.isArray(_ctx.config) ? (openBlock(), createBlock(_component_ElForm, {
-    key: 0,
+  const _component_m_form_container = resolveComponent("m-form-container");
+  const _component_el_form = resolveComponent("el-form");
+  return openBlock(), createBlock(_component_el_form, {
     class: "m-form",
     ref: "elForm",
     model: _ctx.values,
@@ -3488,8 +3510,8 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     "label-position": _ctx.labelPosition
   }, {
     default: withCtx(() => [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config, (item, index) => {
-        return openBlock(), createBlock(_component_MContainer, {
+      _ctx.initialized && Array.isArray(_ctx.config) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.config, (item, index) => {
+        return openBlock(), createBlock(_component_m_form_container, {
           key: item[_ctx.keyProp] ?? index,
           config: item,
           model: _ctx.values,
@@ -3498,10 +3520,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
           size: _ctx.size,
           onChange: _ctx.changeHandler
         }, null, 8, ["config", "model", "label-width", "step-active", "size", "onChange"]);
-      }), 128))
+      }), 128)) : createCommentVNode("", true)
     ]),
     _: 1
-  }, 8, ["model", "label-width", "disabled", "style", "inline", "label-position"])) : createCommentVNode("", true);
+  }, 8, ["model", "label-width", "disabled", "style", "inline", "label-position"]);
 }
 var Form = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 
@@ -3521,6 +3543,7 @@ const _sfc_main = defineComponent({
       default: () => []
     },
     labelWidth: [Number, String],
+    size: String,
     confirmText: {
       type: String,
       default: "\u786E\u5B9A"
@@ -3691,11 +3714,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             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"]),
           renderSlot(_ctx.$slots, "default")
         ], 4)
       ]),