@tmagic/form 1.4.7 → 1.4.8

package/dist/tmagic-form.umd.cjs

@@ -152,8 +152,7 @@
     });
   };
   const initValue = async (mForm, { initValues, config }) => {
-    if (!Array.isArray(config))
-      throw new Error("config应该为数组");
+    if (!Array.isArray(config)) throw new Error("config应该为数组");
     let valuesTmp = createValues(mForm, config, vue.toRaw(initValues), {});
     const [firstForm] = config;
     if (firstForm && typeof firstForm.onInitValue === "function") {
@@ -207,8 +206,7 @@
       const expand = vue.ref(false);
       const name = vue.computed(() => props.config.name || "");
       const showDiff = vue.computed(() => {
-        if (!props.isCompare)
-          return false;
+        if (!props.isCompare) return false;
         const curValue = name.value ? props.model[name.value] : props.model;
         const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
         return !lodashEs.isEqual(curValue, lastValue);
@@ -235,10 +233,8 @@
       const type = vue.computed(() => {
         let { type: type2 } = props.config;
         type2 = type2 && filterFunction(mForm, type2, props);
-        if (type2 === "form")
-          return "";
-        if (type2 === "container")
-          return "";
+        if (type2 === "form") return "";
+        if (type2 === "container") return "";
         return type2?.replace(/([A-Z])/g, "-$1").toLowerCase() || (items.value ? "" : "text");
       });
       const display$1 = vue.computed(() => {
@@ -255,10 +251,8 @@
       vue.watch(
         showDiff,
         (showDiff2) => {
-          if (type.value === "hidden")
-            return;
-          if (items.value && !text.value && type.value && display$1.value)
-            return;
+          if (type.value === "hidden") return;
+          if (items.value && !text.value && type.value && display$1.value) return;
           if (display$1.value && showDiff2 && type.value) {
             emit("addDiffCount");
           }
@@ -794,8 +788,7 @@
       const changeOrder = (offset = 0) => emit("swap-item", props.index, props.index + offset);
       const movable = () => {
         const { movable: movable2 } = props.config;
-        if (movable2 === void 0)
-          return true;
+        if (movable2 === void 0) return true;
         if (typeof movable2 === "function") {
           return movable2(mForm, props.index || 0, props.model, props.groupModel);
         }
@@ -926,8 +919,7 @@
       const emit = __emit;
       const mForm = vue.inject("mForm");
       const addable = vue.computed(() => {
-        if (!props.name)
-          return false;
+        if (!props.name) return false;
         if (typeof props.config.addable === "function") {
           return props.config.addable(mForm, {
             model: props.model[props.name],
@@ -939,13 +931,11 @@
         return typeof props.config.addable === "undefined" ? true : props.config.addable;
       });
       const changeHandler = () => {
-        if (!props.name)
-          return false;
+        if (!props.name) return false;
         emit("change", props.model[props.name]);
       };
       const addHandler = async () => {
-        if (!props.name)
-          return false;
+        if (!props.name) return false;
         let initValues = {};
         if (typeof props.config.defaultAdd === "function") {
           initValues = await props.config.defaultAdd(mForm, {
@@ -964,14 +954,12 @@
         props.model[props.name].push(groupValue);
       };
       const removeHandler = (index) => {
-        if (!props.name)
-          return false;
+        if (!props.name) return false;
         props.model[props.name].splice(index, 1);
         changeHandler();
       };
       const swapHandler = (idx1, idx2) => {
-        if (!props.name)
-          return false;
+        if (!props.name) return false;
         const [currRow] = props.model[props.name].splice(idx1, 1);
         props.model[props.name].splice(idx2, 0, currRow);
         changeHandler();
@@ -1408,10 +1396,8 @@
         if (tBodyEl) {
           const sortable = Sortable.create(tBodyEl, {
             onEnd: ({ newIndex, oldIndex }) => {
-              if (typeof newIndex === "undefined")
-                return;
-              if (typeof oldIndex === "undefined")
-                return;
+              if (typeof newIndex === "undefined") return;
+              if (typeof oldIndex === "undefined") return;
               swapArray(newIndex, oldIndex);
               emit("change", props.model[modelName.value]);
               foreUpdate();
@@ -1441,8 +1427,7 @@
             formValue: mForm?.values,
             prop: props.prop
           });
-          if (!beforeCheckRes)
-            return;
+          if (!beforeCheckRes) return;
         }
         const columns = props.config.items;
         const enumValues = props.config.enum || [];
@@ -1547,8 +1532,7 @@
         return fuc;
       };
       const removeHandler = (index) => {
-        if (props.disabled)
-          return;
+        if (props.disabled) return;
         props.model[modelName.value].splice(index, 1);
         emit("change", props.model[modelName.value]);
       };
@@ -1655,8 +1639,7 @@
       };
       const toggleMode = () => {
         const calcLabelWidth = (label) => {
-          if (!label)
-            return "0px";
+          if (!label) return "0px";
           const zhLength = label.match(/[^\x00-\xff]/g)?.length || 0;
           const chLength = label.length - zhLength;
           return `${Math.max(chLength * 8 + zhLength * 20, 80)}px`;
@@ -1676,8 +1659,7 @@
         });
       };
       const toggleFullscreen = () => {
-        if (!mTable.value)
-          return;
+        if (!mTable.value) return;
         if (isFullscreen.value) {
           mTable.value.classList.remove("fixed");
           isFullscreen.value = false;
@@ -1992,12 +1974,9 @@
       const getActive = (mForm2, props2, activeTabName2) => {
         const { config, model, prop } = props2;
         const { active } = config;
-        if (typeof active === "function")
-          return active(mForm2, { model, formValue: mForm2?.values, prop });
-        if (+activeTabName2 >= props2.config.items.length)
-          return "0";
-        if (typeof active !== "undefined")
-          return active;
+        if (typeof active === "function") return active(mForm2, { model, formValue: mForm2?.values, prop });
+        if (+activeTabName2 >= props2.config.items.length) return "0";
+        if (typeof active !== "undefined") return active;
         return "0";
       };
       const tabClick = (mForm2, tab, props2) => {
@@ -2018,8 +1997,7 @@
       const diffCount = vue.ref({});
       const tabs = vue.computed(() => {
         if (props.config.dynamic) {
-          if (!props.config.name)
-            throw new Error("dynamic tab 必须配置name");
+          if (!props.config.name) throw new Error("dynamic tab 必须配置name");
           return props.model[props.config.name] || [];
         }
         return props.config.items.filter((item) => display(mForm, item.display, props));
@@ -2036,8 +2014,7 @@
       const tabItems = (tab) => props.config.dynamic ? props.config.items : tab.items;
       const tabClickHandler = (tab) => tabClick(mForm, tab, props);
       const onTabAdd = () => {
-        if (!props.config.name)
-          throw new Error("dynamic tab 必须配置name");
+        if (!props.config.name) throw new Error("dynamic tab 必须配置name");
         if (typeof props.config.onTabAdd === "function") {
           props.config.onTabAdd(mForm, {
             model: props.model,
@@ -2053,8 +2030,7 @@
         mForm?.$emit("field-change", props.prop, props.model[props.config.name]);
       };
       const onTabRemove = (tabName) => {
-        if (!props.config.name)
-          throw new Error("dynamic tab 必须配置name");
+        if (!props.config.name) throw new Error("dynamic tab 必须配置name");
         if (typeof props.config.onTabRemove === "function") {
           props.config.onTabRemove(mForm, tabName, {
             model: props.model,
@@ -2157,8 +2133,7 @@
   const getConfig = (key) => $MAGIC_FORM[key];
 
   const useAddField = (prop) => {
-    if (!prop)
-      return;
+    if (!prop) return;
     const mForm = vue.inject("mForm");
     const instance = vue.getCurrentInstance();
     vue.watch(
@@ -2222,8 +2197,7 @@
       const setRemoteOptions = async function() {
         const { config } = props;
         const { option } = config;
-        if (!option)
-          return;
+        if (!option) return;
         let { body } = option;
         const postOptions = {
           url: option.url,
@@ -2268,8 +2242,7 @@
         });
       }
       const changeHandler = () => {
-        if (!tMagicCascader.value)
-          return;
+        if (!tMagicCascader.value) return;
         tMagicCascader.value.setQuery("");
         tMagicCascader.value.setPreviousQuery(null);
         emit("change", props.model[props.name]);
@@ -2391,10 +2364,8 @@
       };
       const mForm = vue.inject("mForm");
       const options = vue.computed(() => {
-        if (Array.isArray(props.config.options))
-          return props.config.options;
-        if (typeof props.config.options === "function")
-          return filterFunction(mForm, props.config.options, props);
+        if (Array.isArray(props.config.options)) return props.config.options;
+        if (typeof props.config.options === "function") return filterFunction(mForm, props.config.options, props);
         return [];
       });
       return (_ctx, _cache) => {
@@ -2532,12 +2503,9 @@
               if (!value.value) {
                 value.value = [];
               }
-              if (!start || !end)
-                value.value = [];
-              if (start !== preStart)
-                value.value[0] = new Date(start);
-              if (end !== preEnd)
-                value.value[1] = new Date(end);
+              if (!start || !end) value.value = [];
+              if (start !== preStart) value.value[0] = new Date(start);
+              if (end !== preEnd) value.value[1] = new Date(end);
             },
             {
               immediate: true
@@ -2547,8 +2515,7 @@
           vue.watch(
             () => props.model[props.name],
             (start, preStart) => {
-              if (start !== preStart)
-                value.value = start.map((item) => item ? new Date(item) : void 0);
+              if (start !== preStart) value.value = start.map((item) => item ? new Date(item) : void 0);
             },
             {
               immediate: true
@@ -2574,8 +2541,7 @@
           emit(
             "change",
             value2.map((item) => {
-              if (item)
-                return utils.datetimeFormatter(item, "");
+              if (item) return utils.datetimeFormatter(item, "");
               return void 0;
             })
           );
@@ -2713,14 +2679,12 @@
         value: {}
       });
       const changeFieldMap = async () => {
-        if (typeof props.config.returnFields !== "function" || !props.model)
-          return;
+        if (typeof props.config.returnFields !== "function" || !props.model) return;
         const fields = await props.config.returnFields(props.config, props.model, request);
         fieldMap.value = {};
         fieldLabelMap.value = {};
         fields.forEach((v) => {
-          if (typeof v !== "object" || v.name === void 0)
-            return;
+          if (typeof v !== "object" || v.name === void 0) return;
           let oldVal = props.model?.[v.name] || "";
           if (!oldVal && v.defaultValue !== void 0) {
             oldVal = v.defaultValue;
@@ -2924,12 +2888,9 @@
             const error = [];
             Object.entries(invalidFields).forEach(([, ValidateError]) => {
               ValidateError.forEach(({ field, message }) => {
-                if (field && message)
-                  error.push(`${field} -> ${message}`);
-                if (field && !message)
-                  error.push(`${field} -> 出现错误`);
-                if (!field && message)
-                  error.push(`${message}`);
+                if (field && message) error.push(`${field} -> ${message}`);
+                if (field && !message) error.push(`${field} -> 出现错误`);
+                if (!field && message) error.push(`${message}`);
               });
             });
             throw new Error(error.join("<br>"));
@@ -3452,8 +3413,7 @@
       const emit = __emit;
       const optionComponent = design.getConfig("components")?.option;
       const optionGroupComponent = design.getConfig("components")?.optionGroup;
-      if (!props.model)
-        throw new Error("不能没有model");
+      if (!props.model) throw new Error("不能没有model");
       useAddField(props.prop);
       const tMagicSelect = vue.ref();
       const mForm = vue.inject("mForm");
@@ -3488,16 +3448,14 @@
         }));
       };
       const getOptions = async () => {
-        if (!props.model)
-          return [];
+        if (!props.model) return [];
         if (localOptions.value.length) {
           return localOptions.value;
         }
         loading.value = true;
         let items = [];
         const { option } = props.config;
-        if (!option)
-          return [];
+        if (!option) return [];
         const { root = "", totalKey = "total" } = option;
         let { body = {}, url } = option;
         if (typeof url === "function") {
@@ -3570,8 +3528,7 @@
         return pgIndex.value === 0 ? selectedOptions.concat(items) : options.value.concat(items);
       };
       const getInitLocalOption = async () => {
-        if (!props.model)
-          return [];
+        if (!props.model) return [];
         const value = props.model[props.name];
         const { config } = props;
         localOptions.value = await getOptions();
@@ -3592,11 +3549,9 @@
         return localOptions.value.filter((item) => equalValue(item.value, value));
       };
       const getInitOption = async () => {
-        if (!props.model)
-          return [];
+        if (!props.model) return [];
         const { option } = props.config;
-        if (!option)
-          return [];
+        if (!option) return [];
         const { root = "", initRoot = "" } = option;
         let { initBody = {} } = option;
         let options2 = [];
@@ -3679,8 +3634,7 @@
         });
       } else if (props.config.option) {
         vue.onBeforeMount(() => {
-          if (!props.model)
-            return;
+          if (!props.model) return;
           const v = props.model[props.name];
           if (Array.isArray(v) ? v.length : typeof v !== "undefined") {
             getInitOption().then((data) => {
@@ -3724,10 +3678,8 @@
         emit("change", value);
       };
       const visibleHandler = async (visible) => {
-        if (!visible)
-          return;
-        if (!props.config.remote)
-          return;
+        if (!visible) return;
+        if (!props.config.remote) return;
         if (query.value && tMagicSelect.value) {
           tMagicSelect.value.setQuery(query.value);
           tMagicSelect.value.setPreviousQuery(query.value);
@@ -3954,8 +3906,7 @@
         mForm?.$emit("field-input", props.prop, v);
       };
       const buttonClickHandler = () => {
-        if (!appendConfig.value)
-          return;
+        if (!appendConfig.value) return;
         if (typeof appendConfig.value.handler === "function") {
           appendConfig.value.handler(mForm, {
             model: props.model,
@@ -3964,10 +3915,8 @@
         }
       };
       const keyUpHandler = ($event) => {
-        if (!props.model)
-          return;
-        if (!props.name)
-          return;
+        if (!props.model) return;
+        if (!props.name) return;
         const arrowUp = $event.key === "ArrowUp";
         const arrowDown = $event.key === "ArrowDown";
         if (!arrowUp && !arrowDown) {
@@ -4197,12 +4146,9 @@
             if (!value.value) {
               value.value = [];
             }
-            if (!start || !end)
-              value.value = [];
-            if (start !== preStart)
-              value.value[0] = start;
-            if (end !== preEnd)
-              value.value[1] = end;
+            if (!start || !end) value.value = [];
+            if (start !== preStart) value.value[0] = start;
+            if (end !== preEnd) value.value[1] = end;
           },
           {
             immediate: true

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.7",
+  "version": "1.4.8",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -22,6 +22,10 @@
     },
     "./*": "./*"
   },
+  "files": [
+    "dist",
+    "types"
+  ],
   "license": "Apache-2.0",
   "engines": {
     "node": ">=18"
@@ -44,14 +48,14 @@
     "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
     "sass": "^1.77.0",
-    "vite": "^5.2.11",
-    "vue-tsc": "^2.0.16"
+    "vite": "^5.3.1",
+    "vue-tsc": "^2.0.19"
   },
   "peerDependencies": {
     "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/design": "1.4.7",
-    "@tmagic/utils": "1.4.7"
+    "@tmagic/design": "1.4.8",
+    "@tmagic/utils": "1.4.8"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -1,201 +0,0 @@
-<template>
-  <TMagicForm
-    class="m-form"
-    ref="tMagicForm"
-    :model="values"
-    :label-width="labelWidth"
-    :style="`height: ${height}`"
-    :inline="inline"
-    :label-position="labelPosition"
-  >
-    <template v-if="initialized && Array.isArray(config)">
-      <Container
-        v-for="(item, index) in config"
-        :disabled="disabled"
-        :key="item[keyProp] ?? index"
-        :config="item"
-        :model="values"
-        :last-values="lastValuesProcessed"
-        :is-compare="isCompare"
-        :label-width="item.labelWidth || labelWidth"
-        :step-active="stepActive"
-        :size="size"
-        @change="changeHandler"
-      ></Container>
-    </template>
-  </TMagicForm>
-</template>
-
-<script setup lang="ts">
-import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
-import { cloneDeep, isEqual } from 'lodash-es';
-
-import { TMagicForm } from '@tmagic/design';
-
-import Container from './containers/Container.vue';
-import { getConfig } from './utils/config';
-import { initValue } from './utils/form';
-import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
-
-defineOptions({
-  name: 'MForm',
-});
-
-const props = withDefaults(
-  defineProps<{
-    /** 表单配置 */
-    config: FormConfig;
-    /** 表单值 */
-    initValues: Record<string, any>;
-    /** 需对比的值（开启对比模式时传入） */
-    lastValues?: Record<string, any>;
-    /** 是否开启对比模式 */
-    isCompare?: boolean;
-    parentValues?: Record<string, any>;
-    labelWidth?: string;
-    disabled?: boolean;
-    height?: string;
-    stepActive?: string | number;
-    size?: 'small' | 'default' | 'large';
-    inline?: boolean;
-    labelPosition?: string;
-    keyProp?: string;
-    popperClass?: string;
-    extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
-  }>(),
-  {
-    config: () => [],
-    initValues: () => ({}),
-    lastValues: () => ({}),
-    isCompare: false,
-    parentValues: () => ({}),
-    labelWidth: '200px',
-    disabled: false,
-    height: 'auto',
-    stepActive: 1,
-    inline: false,
-    labelPosition: 'right',
-    keyProp: '__key',
-  },
-);
-
-const emit = defineEmits(['change', 'error', 'field-input', 'field-change']);
-
-const tMagicForm = ref<InstanceType<typeof TMagicForm>>();
-const initialized = ref(false);
-const values = ref<FormValue>({});
-const lastValuesProcessed = ref<FormValue>({});
-const fields = new Map<string, any>();
-
-const requestFuc = getConfig('request') as Function;
-
-const formState: FormState = reactive<FormState>({
-  keyProp: props.keyProp,
-  popperClass: props.popperClass,
-  config: props.config,
-  initValues: props.initValues,
-  isCompare: props.isCompare,
-  lastValues: props.lastValues,
-  parentValues: props.parentValues,
-  values,
-  lastValuesProcessed,
-  $emit: emit as (event: string, ...args: any[]) => void,
-  fields,
-  setField: (prop: string, field: any) => fields.set(prop, field),
-  getField: (prop: string) => fields.get(prop),
-  deleteField: (prop: string) => fields.delete(prop),
-  post: (options: any) => {
-    if (requestFuc) {
-      return requestFuc({
-        ...options,
-        method: 'POST',
-      });
-    }
-  },
-});
-
-watchEffect(async () => {
-  formState.initValues = props.initValues;
-  formState.lastValues = props.lastValues;
-  formState.isCompare = props.isCompare;
-  formState.config = props.config;
-  formState.keyProp = props.keyProp;
-  formState.popperClass = props.popperClass;
-  formState.parentValues = props.parentValues;
-
-  if (typeof props.extendState === 'function') {
-    const state = (await props.extendState(formState)) || {};
-    Object.entries(state).forEach(([key, value]) => {
-      formState[key] = value;
-    });
-  }
-});
-
-provide('mForm', formState);
-
-watch(
-  [() => props.config, () => props.initValues],
-  ([config], [preConfig]) => {
-    if (!isEqual(toRaw(config), toRaw(preConfig))) {
-      initialized.value = false;
-    }
-
-    initValue(formState, {
-      initValues: props.initValues,
-      config: props.config,
-    }).then((value) => {
-      values.value = value;
-      // 非对比模式，初始化完成
-      initialized.value = !props.isCompare;
-    });
-
-    if (props.isCompare) {
-      // 对比模式下初始化待对比的表单值
-      initValue(formState, {
-        initValues: props.lastValues,
-        config: props.config,
-      }).then((value) => {
-        lastValuesProcessed.value = value;
-        initialized.value = true;
-      });
-    }
-  },
-  { immediate: true },
-);
-
-const changeHandler = () => {
-  emit('change', values.value);
-};
-
-defineExpose({
-  values,
-  lastValuesProcessed,
-  formState,
-  initialized,
-
-  changeHandler,
-
-  resetForm: () => tMagicForm.value?.resetFields(),
-
-  submitForm: async (native?: boolean): Promise<any> => {
-    try {
-      await tMagicForm.value?.validate();
-      return native ? values.value : cloneDeep(toRaw(values.value));
-    } catch (invalidFields: any) {
-      emit('error', invalidFields);
-
-      const error: string[] = [];
-
-      Object.entries(invalidFields).forEach(([, ValidateError]) => {
-        (ValidateError as ValidateError[]).forEach(({ field, message }) => {
-          if (field && message) error.push(`${field} -> ${message}`);
-          if (field && !message) error.push(`${field} -> 出现错误`);
-          if (!field && message) error.push(`${message}`);
-        });
-      });
-
-      throw new Error(error.join('<br>'));
-    }
-  },
-});
-</script>