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

package/dist/tmagic-form.es.js

@@ -114,7 +114,8 @@ const filterFunction = (mForm, config, props) => {
     model: props.model,
     parent: mForm?.parentValues || {},
     formValue: mForm?.values || props.model,
-    prop: props.prop
+    prop: props.prop,
+    config: props.config
   });
 };
 const display = function(mForm, config, props) {
@@ -145,7 +146,8 @@ const getRules = function(mForm, rules = [], props) {
         model: props.model,
         parent: mForm?.parentValues || {},
         formValue: mForm?.values || props.model,
-        prop: props.prop
+        prop: props.prop,
+        config: props.config
       }, mForm);
     }
     return item;
@@ -205,7 +207,18 @@ const _sfc_main$t = defineComponent({
     const expand = ref(false);
     const name = computed(() => props.config.name || "");
     const items = computed(() => props.config.items);
-    const itemProp = computed(() => name.value ? `${props.prop}${props.prop ? "." : ""}${name.value}` : props.prop);
+    const itemProp = computed(() => {
+      let n = "";
+      const { names } = props.config;
+      if (names?.[0]) {
+        [n] = names;
+      } else if (name.value) {
+        n = name.value;
+      } else {
+        return props.prop;
+      }
+      return `${props.prop}${props.prop ? "." : ""}${n}`;
+    });
     const tagName = computed(() => {
       const component = resolveComponent(`m-${items.value ? "form" : "fields"}-${type.value}`);
       if (typeof component !== "string")
@@ -245,7 +258,8 @@ const _sfc_main$t = defineComponent({
           model: props.model,
           values: mForm?.initValues,
           formValue: mForm?.values,
-          prop: itemProp.value
+          prop: itemProp.value,
+          config: props.config
         });
       }
       if (filter === "number") {
@@ -259,7 +273,8 @@ const _sfc_main$t = defineComponent({
           model: props.model,
           values: mForm?.initValues,
           formValue: mForm?.values,
-          prop: itemProp.value
+          prop: itemProp.value,
+          config: props.config
         });
       }
     };
@@ -344,10 +359,10 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
       "expand-more": _ctx.expand,
       "label-width": _ctx.itemLabelWidth,
       onChange: _ctx.onChangeHandler
-    }, null, 8, ["size", "model", "config", "name", "prop", "step-active", "expand-more", "label-width", "onChange"])) : _ctx.type && _ctx.display ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+    }, null, 40, ["size", "model", "config", "name", "prop", "step-active", "expand-more", "label-width", "onChange"])) : _ctx.type && _ctx.display ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
       createVNode(_component_el_form_item, {
         style: normalizeStyle(_ctx.config.tip ? "flex: 1" : ""),
-        class: normalizeClass({ hidden: _ctx.itemLabelWidth === 0 || !_ctx.config.text }),
+        class: normalizeClass({ hidden: `${_ctx.itemLabelWidth}` === "0" || !_ctx.config.text }),
         prop: _ctx.itemProp,
         "label-width": _ctx.itemLabelWidth,
         rules: _ctx.rule
@@ -372,7 +387,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
                 disabled: _ctx.disabled,
                 prop: _ctx.itemProp,
                 onChange: _ctx.onChangeHandler
-              }, null, 8, ["size", "model", "config", "name", "disabled", "prop", "onChange"]))
+              }, null, 40, ["size", "model", "config", "name", "disabled", "prop", "onChange"]))
             ]),
             _: 1
           })) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
@@ -384,7 +399,7 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
             disabled: _ctx.disabled,
             prop: _ctx.itemProp,
             onChange: _ctx.onChangeHandler
-          }, null, 8, ["size", "model", "config", "name", "disabled", "prop", "onChange"])),
+          }, null, 40, ["size", "model", "config", "name", "disabled", "prop", "onChange"])),
           _ctx.extra ? (openBlock(), createElementBlock("div", {
             key: 2,
             innerHTML: _ctx.extra,
@@ -1475,7 +1490,7 @@ const _sfc_main$l = defineComponent({
         }
         emit("select", selection, row);
         if (typeof props.config.onSelect === "function") {
-          props.config.onSelect(mForm, { selection, row });
+          props.config.onSelect(mForm, { selection, row, config: props.config });
         }
       },
       toggleRowSelection(row, selected) {
@@ -1880,11 +1895,11 @@ 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 });
+    config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
   }
   const tabConfig = config.items.find((item) => tab.name === item.status);
   if (tabConfig && typeof tabConfig.onTabClick === "function") {
-    tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
+    tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
   }
 };
 const Tab = defineComponent({
@@ -1939,7 +1954,11 @@ const Tab = defineComponent({
         if (!props.config.name)
           throw new Error("dynamic tab \u5FC5\u987B\u914D\u7F6Ename");
         if (typeof props.config.onTabAdd === "function") {
-          props.config.onTabAdd(mForm, { model: props.model });
+          props.config.onTabAdd(mForm, {
+            model: props.model,
+            prop: props.prop,
+            config: props.config
+          });
         } else if (tabs.value.length > 0) {
           const newObj = cloneDeep(tabs.value[0]);
           newObj.title = `\u6807\u7B7E${tabs.value.length + 1}`;
@@ -1952,7 +1971,11 @@ const Tab = defineComponent({
         if (!props.config.name)
           throw new Error("dynamic tab \u5FC5\u987B\u914D\u7F6Ename");
         if (typeof props.config.onTabRemove === "function") {
-          props.config.onTabRemove(mForm, tabName, { model: props.model });
+          props.config.onTabRemove(mForm, tabName, {
+            model: props.model,
+            prop: props.prop,
+            config: props.config
+          });
         } else {
           props.model[props.config.name].splice(+tabName, 1);
           if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.name].length) {
@@ -1967,7 +1990,7 @@ const Tab = defineComponent({
       changeHandler: () => {
         emit("change", props.model);
         if (typeof props.config.onChange === "function") {
-          props.config.onChange(mForm, { model: props.model });
+          props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
         }
       }
     };
@@ -2390,6 +2413,14 @@ const _sfc_main$e = defineComponent({
         });
       } 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] = void 0;
       }
     };
     return {
@@ -2886,7 +2917,8 @@ const _sfc_main$6 = defineComponent({
           body = body(mForm, {
             model: props.model,
             formValue: mForm?.values,
-            formValues: mForm?.values
+            formValues: mForm?.values,
+            config: props.config
           });
         }
         body.query = query.value;
@@ -2909,7 +2941,8 @@ const _sfc_main$6 = defineComponent({
         res = option.afterRequest(mForm, res, {
           model: props.model,
           formValue: mForm?.values,
-          formValues: mForm?.values
+          formValues: mForm?.values,
+          config: props.config
         });
       }
       const optionsData = res[option.root];
@@ -3001,7 +3034,8 @@ const _sfc_main$6 = defineComponent({
           model: props.model,
           prop: props.prop,
           formValues: mForm?.values,
-          formValue: mForm?.values
+          formValue: mForm?.values,
+          config: props.config
         })).then((data) => {
           options.value = data;
         });
@@ -3770,7 +3804,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var FormDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-var index$1 = '';
+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 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 defaultInstallOpt = {};
 const install = (app, opt) => {