@tmagic/form 1.2.14 → 1.3.0-alpha.0

package/dist/tmagic-form.umd.cjs

@@ -251,7 +251,7 @@
         }
         return value;
       });
-      const itemLabelWidth = vue.computed(() => props.config.labelWidth || props.labelWidth);
+      const itemLabelWidth = vue.computed(() => props.config.labelWidth ?? props.labelWidth);
       vue.watchEffect(() => {
         expand.value = props.expandMore;
       });
@@ -645,14 +645,6 @@
         emit("change", props.model);
       };
       const key = (item, index) => item[mForm?.keyProp || "__key"] ?? index;
-      if (props.config.checkbox && name.value) {
-        vue.watch(
-          () => props.model[name.value]?.value,
-          () => {
-            emit("change", props.model);
-          }
-        );
-      }
       const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
         return (vue.unref(name) ? __props.model[vue.unref(name)] : __props.model) ? (vue.openBlock(), vue.createElementBlock("fieldset", {
@@ -664,7 +656,10 @@
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(design.TMagicCheckbox), {
                 modelValue: __props.model[vue.unref(name)].value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[vue.unref(name)].value = $event),
+                "onUpdate:modelValue": [
+                  _cache[0] || (_cache[0] = ($event) => __props.model[vue.unref(name)].value = $event),
+                  change
+                ],
                 prop: `${__props.prop}${__props.prop ? "." : ""}${__props.config.name}.value`,
                 "true-label": 1,
                 "false-label": 0
@@ -1612,7 +1607,7 @@
         mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
       };
       const excelHandler = (file) => {
-        if (!file || !file.raw) {
+        if (!file?.raw) {
           return false;
         }
         const reader = new FileReader();
@@ -1965,7 +1960,8 @@
     emits: ["change", "addDiffCount"],
     setup(__props, { emit }) {
       const props = __props;
-      const uiComponent = design.getConfig("components").tabPane;
+      const tabPaneComponent = design.getConfig("components").tabPane;
+      const tabsComponent = design.getConfig("components").tabs;
       const getActive = (mForm2, props2, activeTabName2) => {
         const { config, model, prop } = props2;
         const { active } = config;
@@ -1997,7 +1993,7 @@
             throw new Error("dynamic tab 必须配置name");
           return props.model[props.config.name] || [];
         }
-        return props.config.items;
+        return props.config.items.filter((item) => display(mForm, item.display, props));
       });
       const filter = (config) => filterFunction(mForm, config, props);
       vue.watchEffect(() => {
@@ -2046,7 +2042,6 @@
         emit("change", props.model);
         mForm?.$emit("field-change", props.prop, props.model[props.config.name]);
       };
-      const display$1 = (displayConfig) => display(mForm, displayConfig, props);
       const changeHandler = () => {
         emit("change", props.model);
         if (typeof props.config.onChange === "function") {
@@ -2062,61 +2057,62 @@
         emit("addDiffCount");
       };
       return (_ctx, _cache) => {
-        const _component_el_badge = vue.resolveComponent("el-badge");
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTabs), {
-          modelValue: activeTabName.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
-          class: vue.normalizeClass(__props.config.dynamic ? "magic-form-dynamic-tab" : "magic-form-tab"),
-          type: __props.config.tabType,
-          editable: __props.config.editable || false,
-          "tab-position": __props.config.tabPosition || "top",
-          onTabClick: tabClickHandler,
-          onTabAdd,
-          onTabRemove
-        }, {
+        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabsComponent).component), vue.mergeProps(
+          {
+            modelValue: activeTabName.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event)
+          },
+          vue.unref(tabsComponent).props({
+            type: __props.config.tabType,
+            editable: __props.config.editable || false,
+            tabPosition: __props.config.tabPosition || "top"
+          }),
+          {
+            class: `tmagic-design-tabs ${__props.config.dynamic ? "magic-form-dynamic-tab" : "magic-form-tab"}`,
+            onTabClick: tabClickHandler,
+            onTabAdd,
+            onTabRemove
+          }
+        ), {
           default: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(tabs), (tab, tabIndex) => {
-              return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                display$1(tab.display) && tabItems(tab).length ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(uiComponent).component), {
-                  key: tab[vue.unref(mForm)?.keyProp || "__key"] ?? tabIndex,
-                  name: filter(tab.status) || tabIndex.toString(),
-                  lazy: tab.lazy || false
-                }, {
-                  label: vue.withCtx(() => [
-                    vue.createElementVNode("span", null, [
-                      vue.createTextVNode(vue.toDisplayString(filter(tab.title)), 1),
-                      vue.createVNode(_component_el_badge, {
-                        hidden: !diffCount.value[tabIndex],
-                        value: diffCount.value[tabIndex],
-                        class: "diff-count-badge"
-                      }, null, 8, ["hidden", "value"])
-                    ])
-                  ]),
-                  default: vue.withCtx(() => [
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabItems(tab), (item) => {
-                      return vue.openBlock(), vue.createBlock(_sfc_main$v, {
-                        key: item[vue.unref(mForm)?.keyProp || "__key"],
-                        config: item,
-                        disabled: __props.disabled,
-                        model: __props.config.dynamic ? (__props.name ? __props.model[__props.name] : __props.model)[tabIndex] : tab.name ? (__props.name ? __props.model[__props.name] : __props.model)[tab.name] : __props.name ? __props.model[__props.name] : __props.model,
-                        "last-values": vue.unref(lodashEs.isEmpty)(__props.lastValues) ? {} : __props.config.dynamic ? (__props.name ? __props.lastValues[__props.name] : __props.lastValues)[tabIndex] : tab.name ? (__props.name ? __props.lastValues[__props.name] : __props.lastValues)[tab.name] : __props.name ? __props.lastValues[__props.name] : __props.lastValues,
-                        "is-compare": __props.isCompare,
-                        prop: __props.config.dynamic ? `${__props.prop}${__props.prop ? "." : ""}${String(tabIndex)}` : __props.prop,
-                        size: __props.size,
-                        "label-width": tab.labelWidth || __props.labelWidth,
-                        "expand-more": __props.expandMore,
-                        onChange: changeHandler,
-                        onAddDiffCount: ($event) => onAddDiffCount(tabIndex)
-                      }, null, 8, ["config", "disabled", "model", "last-values", "is-compare", "prop", "size", "label-width", "expand-more", "onAddDiffCount"]);
-                    }), 128))
-                  ]),
-                  _: 2
-                }, 1032, ["name", "lazy"])) : vue.createCommentVNode("", true)
-              ], 64);
-            }), 256))
+              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabPaneComponent).component), vue.mergeProps({
+                key: tab[vue.unref(mForm)?.keyProp || "__key"] ?? tabIndex
+              }, vue.unref(tabPaneComponent).props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false })), {
+                label: vue.withCtx(() => [
+                  vue.createElementVNode("span", null, [
+                    vue.createTextVNode(vue.toDisplayString(filter(tab.title)), 1),
+                    vue.createVNode(vue.unref(design.TMagicBadge), {
+                      hidden: !diffCount.value[tabIndex],
+                      value: diffCount.value[tabIndex],
+                      class: "diff-count-badge"
+                    }, null, 8, ["hidden", "value"])
+                  ])
+                ]),
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabItems(tab), (item) => {
+                    return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                      key: item[vue.unref(mForm)?.keyProp || "__key"],
+                      config: item,
+                      disabled: __props.disabled,
+                      model: __props.config.dynamic ? (__props.name ? __props.model[__props.name] : __props.model)[tabIndex] : tab.name ? (__props.name ? __props.model[__props.name] : __props.model)[tab.name] : __props.name ? __props.model[__props.name] : __props.model,
+                      "last-values": vue.unref(lodashEs.isEmpty)(__props.lastValues) ? {} : __props.config.dynamic ? (__props.name ? __props.lastValues[__props.name] : __props.lastValues)[tabIndex] : tab.name ? (__props.name ? __props.lastValues[__props.name] : __props.lastValues)[tab.name] : __props.name ? __props.lastValues[__props.name] : __props.lastValues,
+                      "is-compare": __props.isCompare,
+                      prop: __props.config.dynamic ? `${__props.prop}${__props.prop ? "." : ""}${String(tabIndex)}` : __props.prop,
+                      size: __props.size,
+                      "label-width": tab.labelWidth || __props.labelWidth,
+                      "expand-more": __props.expandMore,
+                      onChange: changeHandler,
+                      onAddDiffCount: ($event) => onAddDiffCount(tabIndex)
+                    }, null, 8, ["config", "disabled", "model", "last-values", "is-compare", "prop", "size", "label-width", "expand-more", "onAddDiffCount"]);
+                  }), 128))
+                ]),
+                _: 2
+              }, 1040);
+            }), 128))
           ]),
           _: 1
-        }, 8, ["modelValue", "class", "type", "editable", "tab-position"]);
+        }, 16, ["modelValue", "class"]);
       };
     }
   });
@@ -2160,7 +2156,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -2204,7 +2201,7 @@
         vue.watchEffect(
           () => options.value = props.config.options(mForm, { model: props.model, formValues: mForm.values })
         );
-      } else if (!props.config.options || !props.config.options.length || props.config.remote) {
+      } else if (!props.config.options?.length || props.config.remote) {
         Promise.resolve(setRemoteOptions());
       }
       const changeHandler = (value) => {
@@ -2247,7 +2244,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -2308,7 +2306,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -2370,7 +2369,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -2403,7 +2403,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -2442,7 +2443,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -2543,7 +2545,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -2590,7 +2593,8 @@
       initValues: null,
       values: null,
       name: null,
-      prop: null
+      prop: null,
+      lastValues: null
     },
     setup(__props) {
       const props = __props;
@@ -2618,7 +2622,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -2707,7 +2712,8 @@
       initValues: null,
       values: null,
       name: null,
-      prop: null
+      prop: null,
+      lastValues: null
     },
     setup(__props) {
       const props = __props;
@@ -3083,7 +3089,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -3180,7 +3187,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change", "input"],
     setup(__props, { emit }) {
@@ -3227,7 +3235,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -3336,7 +3345,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -3644,8 +3654,8 @@
           class: "m-select",
           ref_key: "tMagicSelect",
           ref: tMagicSelect,
-          clearable: "",
-          filterable: "",
+          clearable: typeof __props.config.clearable !== "undefined" ? __props.config.clearable : true,
+          filterable: typeof __props.config.filterable !== "undefined" ? __props.config.filterable : true,
           "popper-class": `m-select-popper ${vue.unref(popperClass)}`,
           size: __props.size,
           remote: remote.value,
@@ -3671,7 +3681,7 @@
             ]) : vue.createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["modelValue", "popper-class", "size", "remote", "placeholder", "multiple", "value-key", "allow-create", "disabled", "remote-method"])), [
+        }, 8, ["modelValue", "clearable", "filterable", "popper-class", "size", "remote", "placeholder", "multiple", "value-key", "allow-create", "disabled", "remote-method"])), [
           [_directive_loading, loading.value]
         ]) : vue.createCommentVNode("", true);
       };
@@ -3691,7 +3701,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -3748,7 +3759,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change", "input"],
     setup(__props, { emit }) {
@@ -3824,7 +3836,6 @@
         emit("change", props.model[props.name]);
       };
       return (_ctx, _cache) => {
-        const _component_el_button = vue.resolveComponent("el-button");
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicInput), {
           modelValue: __props.model[__props.name],
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
@@ -3840,7 +3851,7 @@
             name: "append",
             fn: vue.withCtx(() => [
               typeof __props.config.append === "string" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(__props.config.append), 1)) : vue.createCommentVNode("", true),
-              typeof __props.config.append === "object" && __props.config.append.type === "button" ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+              typeof __props.config.append === "object" && __props.config.append.type === "button" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                 key: 1,
                 style: { "color": "#409eff" },
                 size: __props.size,
@@ -3871,7 +3882,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change", "input"],
     setup(__props, { emit }) {
@@ -3914,7 +3926,8 @@
       name: null,
       prop: null,
       disabled: { type: Boolean },
-      size: null
+      size: null,
+      lastValues: null
     },
     emits: ["change"],
     setup(__props, { emit }) {