@tmagic/form 1.2.14 → 1.3.0-alpha.0

package/dist/style.css

@@ -36,6 +36,9 @@
 .m-form .el-form-item.hidden > .el-form-item__label {
   display: none;
 }
+.m-form .t-form__item.hidden > .t-form__label {
+  display: none;
+}
 
 .magic-datetime-picker-popper .el-picker-panel__footer button:first-child {
   display: none;

package/dist/tmagic-form.js

@@ -1,7 +1,7 @@
-import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, toRefs, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, resolveDirective, createSlots, withModifiers } from 'vue';
+import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, resolveDirective, createSlots, withModifiers } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, CaretTop, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
 import { cloneDeep, isEqual, isEmpty } from 'lodash-es';
-import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicTabs, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicOptionGroup, TMagicOption, TMagicSelect, TMagicSwitch, TMagicTimePicker } from '@tmagic/design';
+import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicOptionGroup, TMagicOption, TMagicSelect, TMagicSwitch, TMagicTimePicker } from '@tmagic/design';
 import Sortable from 'sortablejs';
 import { asyncLoadJs, sleep, datetimeFormatter, isNumber } from '@tmagic/utils';
 import cloneDeep$1 from 'lodash-es/cloneDeep';
@@ -253,7 +253,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       }
       return value;
     });
-    const itemLabelWidth = computed(() => props.config.labelWidth || props.labelWidth);
+    const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
     watchEffect(() => {
       expand.value = props.expandMore;
     });
@@ -647,14 +647,6 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       emit("change", props.model);
     };
     const key = (item, index) => item[mForm?.keyProp || "__key"] ?? index;
-    if (props.config.checkbox && name.value) {
-      watch(
-        () => props.model[name.value]?.value,
-        () => {
-          emit("change", props.model);
-        }
-      );
-    }
     const onAddDiffCount = () => emit("addDiffCount");
     return (_ctx, _cache) => {
       return (unref(name) ? __props.model[unref(name)] : __props.model) ? (openBlock(), createElementBlock("fieldset", {
@@ -666,7 +658,10 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createVNode(unref(TMagicCheckbox), {
               modelValue: __props.model[unref(name)].value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[unref(name)].value = $event),
+              "onUpdate:modelValue": [
+                _cache[0] || (_cache[0] = ($event) => __props.model[unref(name)].value = $event),
+                change
+              ],
               prop: `${__props.prop}${__props.prop ? "." : ""}${__props.config.name}.value`,
               "true-label": 1,
               "false-label": 0
@@ -1614,7 +1609,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       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();
@@ -1967,7 +1962,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   emits: ["change", "addDiffCount"],
   setup(__props, { emit }) {
     const props = __props;
-    const uiComponent = getConfig$1("components").tabPane;
+    const tabPaneComponent = getConfig$1("components").tabPane;
+    const tabsComponent = getConfig$1("components").tabs;
     const getActive = (mForm2, props2, activeTabName2) => {
       const { config, model, prop } = props2;
       const { active } = config;
@@ -1999,7 +1995,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           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);
     watchEffect(() => {
@@ -2048,7 +2044,6 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       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") {
@@ -2064,61 +2059,62 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       emit("addDiffCount");
     };
     return (_ctx, _cache) => {
-      const _component_el_badge = resolveComponent("el-badge");
-      return openBlock(), createBlock(unref(TMagicTabs), {
-        modelValue: activeTabName.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
-        class: 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 openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent).component), mergeProps(
+        {
+          modelValue: activeTabName.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event)
+        },
+        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: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(tabs), (tab, tabIndex) => {
-            return openBlock(), createElementBlock(Fragment, null, [
-              display$1(tab.display) && tabItems(tab).length ? (openBlock(), createBlock(resolveDynamicComponent(unref(uiComponent).component), {
-                key: tab[unref(mForm)?.keyProp || "__key"] ?? tabIndex,
-                name: filter(tab.status) || tabIndex.toString(),
-                lazy: tab.lazy || false
-              }, {
-                label: withCtx(() => [
-                  createElementVNode("span", null, [
-                    createTextVNode(toDisplayString(filter(tab.title)), 1),
-                    createVNode(_component_el_badge, {
-                      hidden: !diffCount.value[tabIndex],
-                      value: diffCount.value[tabIndex],
-                      class: "diff-count-badge"
-                    }, null, 8, ["hidden", "value"])
-                  ])
-                ]),
-                default: withCtx(() => [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(tabItems(tab), (item) => {
-                    return openBlock(), createBlock(_sfc_main$v, {
-                      key: item[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": unref(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"])) : createCommentVNode("", true)
-            ], 64);
-          }), 256))
+            return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent).component), mergeProps({
+              key: tab[unref(mForm)?.keyProp || "__key"] ?? tabIndex
+            }, unref(tabPaneComponent).props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false })), {
+              label: withCtx(() => [
+                createElementVNode("span", null, [
+                  createTextVNode(toDisplayString(filter(tab.title)), 1),
+                  createVNode(unref(TMagicBadge), {
+                    hidden: !diffCount.value[tabIndex],
+                    value: diffCount.value[tabIndex],
+                    class: "diff-count-badge"
+                  }, null, 8, ["hidden", "value"])
+                ])
+              ]),
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(tabItems(tab), (item) => {
+                  return openBlock(), createBlock(_sfc_main$v, {
+                    key: item[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": unref(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"]);
     };
   }
 });
@@ -2162,7 +2158,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2206,7 +2203,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       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) => {
@@ -2249,7 +2246,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2310,7 +2308,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2372,7 +2371,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2405,7 +2405,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2444,7 +2445,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2545,7 +2547,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2592,7 +2595,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     initValues: null,
     values: null,
     name: null,
-    prop: null
+    prop: null,
+    lastValues: null
   },
   setup(__props) {
     const props = __props;
@@ -2620,7 +2624,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2709,7 +2714,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     initValues: null,
     values: null,
     name: null,
-    prop: null
+    prop: null,
+    lastValues: null
   },
   setup(__props) {
     const props = __props;
@@ -3085,7 +3091,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -3182,7 +3189,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change", "input"],
   setup(__props, { emit }) {
@@ -3229,7 +3237,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -3338,7 +3347,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -3646,8 +3656,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         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 ${unref(popperClass)}`,
         size: __props.size,
         remote: remote.value,
@@ -3673,7 +3683,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           ]) : 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]
       ]) : createCommentVNode("", true);
     };
@@ -3693,7 +3703,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -3750,7 +3761,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change", "input"],
   setup(__props, { emit }) {
@@ -3826,7 +3838,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
-      const _component_el_button = resolveComponent("el-button");
       return openBlock(), createBlock(unref(TMagicInput), {
         modelValue: __props.model[__props.name],
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
@@ -3842,7 +3853,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           name: "append",
           fn: withCtx(() => [
             typeof __props.config.append === "string" ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.config.append), 1)) : createCommentVNode("", true),
-            typeof __props.config.append === "object" && __props.config.append.type === "button" ? (openBlock(), createBlock(_component_el_button, {
+            typeof __props.config.append === "object" && __props.config.append.type === "button" ? (openBlock(), createBlock(unref(TMagicButton), {
               key: 1,
               style: { "color": "#409eff" },
               size: __props.size,
@@ -3873,7 +3884,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change", "input"],
   setup(__props, { emit }) {
@@ -3916,7 +3928,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     name: null,
     prop: null,
     disabled: { type: Boolean },
-    size: null
+    size: null,
+    lastValues: null
   },
   emits: ["change"],
   setup(__props, { emit }) {