@tmagic/form 1.4.5 → 1.4.7

package/dist/tmagic-form.js

@@ -1,4 +1,4 @@
-import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, Teleport, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, nextTick, resolveDirective, createSlots, withModifiers } from 'vue';
+import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, Teleport, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, nextTick, 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, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicSelect, TMagicSwitch, TMagicPopover, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
@@ -227,12 +227,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       return `${props.prop}${props.prop ? "." : ""}${n}`;
     });
-    const tagName = computed(() => {
-      const component = resolveComponent(`m-${items.value ? "form" : "fields"}-${type.value}`);
-      if (typeof component !== "string")
-        return component;
-      return "m-fields-text";
-    });
+    const tagName = computed(() => `m-${items.value ? "form" : "fields"}-${type.value}`);
     const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
     const text = computed(() => filterFunction(mForm, props.config.text, props));
     const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
@@ -240,11 +235,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const rule = computed(() => getRules(mForm, props.config.rules, props));
     const type = computed(() => {
       let { type: type2 } = props.config;
-      if (typeof type2 === "function") {
-        type2 = type2(mForm, {
-          model: props.model
-        });
-      }
+      type2 = type2 && filterFunction(mForm, type2, props);
       if (type2 === "form")
         return "";
       if (type2 === "container")
@@ -2212,17 +2203,19 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const tMagicCascader = ref();
     const options = ref([]);
     const remoteData = ref(null);
+    const checkStrictly = computed(() => filterFunction(mForm, props.config.checkStrictly, props));
+    const valueSeparator = computed(() => filterFunction(mForm, props.config.valueSeparator, props));
     const value = computed({
       get() {
-        if (typeof props.model[props.name] === "string" && props.config.valueSeparator) {
-          return props.model[props.name].split(props.config.valueSeparator);
+        if (typeof props.model[props.name] === "string" && valueSeparator.value) {
+          return props.model[props.name].split(valueSeparator.value);
         }
         return props.model[props.name];
       },
       set(value2) {
         let result = value2;
-        if (props.config.valueSeparator) {
-          result = value2.join(props.config.valueSeparator);
+        if (valueSeparator.value) {
+          result = value2.join(valueSeparator.value);
         }
         props.model[props.name] = result;
       }
@@ -2299,7 +2292,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         props: {
           multiple: _ctx.config.multiple ?? false,
           emitPath: _ctx.config.emitPath ?? true,
-          checkStrictly: _ctx.config.checkStrictly ?? false
+          checkStrictly: checkStrictly.value ?? false
         },
         onChange: changeHandler
       }, null, 8, ["modelValue", "size", "placeholder", "disabled", "options", "popper-class", "props"]);

package/dist/tmagic-form.umd.cjs

@@ -226,12 +226,7 @@
         }
         return `${props.prop}${props.prop ? "." : ""}${n}`;
       });
-      const tagName = vue.computed(() => {
-        const component = vue.resolveComponent(`m-${items.value ? "form" : "fields"}-${type.value}`);
-        if (typeof component !== "string")
-          return component;
-        return "m-fields-text";
-      });
+      const tagName = vue.computed(() => `m-${items.value ? "form" : "fields"}-${type.value}`);
       const disabled = vue.computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
       const text = vue.computed(() => filterFunction(mForm, props.config.text, props));
       const tooltip = vue.computed(() => filterFunction(mForm, props.config.tooltip, props));
@@ -239,11 +234,7 @@
       const rule = vue.computed(() => getRules(mForm, props.config.rules, props));
       const type = vue.computed(() => {
         let { type: type2 } = props.config;
-        if (typeof type2 === "function") {
-          type2 = type2(mForm, {
-            model: props.model
-          });
-        }
+        type2 = type2 && filterFunction(mForm, type2, props);
         if (type2 === "form")
           return "";
         if (type2 === "container")
@@ -2211,17 +2202,19 @@
       const tMagicCascader = vue.ref();
       const options = vue.ref([]);
       const remoteData = vue.ref(null);
+      const checkStrictly = vue.computed(() => filterFunction(mForm, props.config.checkStrictly, props));
+      const valueSeparator = vue.computed(() => filterFunction(mForm, props.config.valueSeparator, props));
       const value = vue.computed({
         get() {
-          if (typeof props.model[props.name] === "string" && props.config.valueSeparator) {
-            return props.model[props.name].split(props.config.valueSeparator);
+          if (typeof props.model[props.name] === "string" && valueSeparator.value) {
+            return props.model[props.name].split(valueSeparator.value);
           }
           return props.model[props.name];
         },
         set(value2) {
           let result = value2;
-          if (props.config.valueSeparator) {
-            result = value2.join(props.config.valueSeparator);
+          if (valueSeparator.value) {
+            result = value2.join(valueSeparator.value);
           }
           props.model[props.name] = result;
         }
@@ -2298,7 +2291,7 @@
           props: {
             multiple: _ctx.config.multiple ?? false,
             emitPath: _ctx.config.emitPath ?? true,
-            checkStrictly: _ctx.config.checkStrictly ?? false
+            checkStrictly: checkStrictly.value ?? false
           },
           onChange: changeHandler
         }, null, 8, ["modelValue", "size", "placeholder", "disabled", "options", "popper-class", "props"]);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.5",
+  "version": "1.4.7",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -35,11 +35,6 @@
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.15.2"
   },
-  "peerDependencies": {
-    "vue": "^3.4.27",
-    "@tmagic/design": "1.4.5",
-    "@tmagic/utils": "1.4.5"
-  },
   "devDependencies": {
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^18.19.0",
@@ -49,10 +44,20 @@
     "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
     "sass": "^1.77.0",
-    "typescript": "^5.4.2",
     "vite": "^5.2.11",
     "vue-tsc": "^2.0.16"
   },
+  "peerDependencies": {
+    "vue": "^3.4.27",
+    "typescript": "*",
+    "@tmagic/design": "1.4.7",
+    "@tmagic/utils": "1.4.7"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "npm run build:type && vite build",
     "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",

package/src/containers/Container.vue

@@ -220,13 +220,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, resolveComponent, watch, watchEffect } from 'vue';
+import { computed, inject, ref, watch, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 import { isEqual } from 'lodash-es';
 
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';
 
-import { ChildConfig, ContainerCommonConfig, FormState, FormValue } from '../schema';
+import { ChildConfig, ContainerCommonConfig, FormState, FormValue, TypeFunction } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
 defineOptions({
@@ -288,11 +288,7 @@ const itemProp = computed(() => {
   return `${props.prop}${props.prop ? '.' : ''}${n}`;
 });
 
-const tagName = computed(() => {
-  const component = resolveComponent(`m-${items.value ? 'form' : 'fields'}-${type.value}`);
-  if (typeof component !== 'string') return component;
-  return 'm-fields-text';
-});
+const tagName = computed(() => `m-${items.value ? 'form' : 'fields'}-${type.value}`);
 
 const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 
@@ -306,11 +302,7 @@ const rule = computed(() => getRules(mForm, props.config.rules, props));
 
 const type = computed((): string => {
   let { type } = props.config;
-  if (typeof type === 'function') {
-    type = type(mForm, {
-      model: props.model,
-    });
-  }
+  type = type && (filterFunction<string | TypeFunction>(mForm, type, props) as string);
   if (type === 'form') return '';
   if (type === 'container') return '';
   return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');

package/src/fields/Cascader.vue

@@ -13,7 +13,7 @@
     :props="{
       multiple: config.multiple ?? false,
       emitPath: config.emitPath ?? true,
-      checkStrictly: config.checkStrictly ?? false,
+      checkStrictly: checkStrictly ?? false,
     }"
     @change="changeHandler"
   ></TMagicCascader>
@@ -26,6 +26,7 @@ import { TMagicCascader } from '@tmagic/design';
 
 import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '../schema';
 import { getConfig } from '../utils/config';
+import { filterFunction } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -36,7 +37,7 @@ const props = defineProps<FieldProps<CascaderConfig>>();
 
 const emit = defineEmits(['change']);
 
-const mForm = inject<FormState | null>('mForm');
+const mForm = inject<FormState | undefined>('mForm');
 
 useAddField(props.prop);
 
@@ -47,17 +48,20 @@ const tMagicCascader = ref<InstanceType<typeof TMagicCascader>>();
 const options = ref<CascaderOption[]>([]);
 const remoteData = ref<any>(null);
 
+const checkStrictly = computed(() => filterFunction(mForm, props.config.checkStrictly, props));
+const valueSeparator = computed(() => filterFunction(mForm, props.config.valueSeparator, props));
+
 const value = computed({
   get() {
-    if (typeof props.model[props.name] === 'string' && props.config.valueSeparator) {
-      return props.model[props.name].split(props.config.valueSeparator);
+    if (typeof props.model[props.name] === 'string' && valueSeparator.value) {
+      return props.model[props.name].split(valueSeparator.value);
     }
     return props.model[props.name];
   },
   set(value) {
     let result = value;
-    if (props.config.valueSeparator) {
-      result = value.join(props.config.valueSeparator);
+    if (valueSeparator.value) {
+      result = value.join(valueSeparator.value);
     }
     props.model[props.name] = result;
   },

package/src/schema.ts

@@ -536,11 +536,11 @@ export interface CascaderConfig extends FormItem, Input {
   /** 是否多选，默认 false */
   multiple?: boolean;
   /** 是否严格的遵守父子节点不互相关联，默认 false */
-  checkStrictly?: boolean;
+  checkStrictly?: boolean | FilterFunction<boolean>;
   /** 弹出内容的自定义类名 */
   popperClass?: string;
   /** 合并成字符串时的分隔符 */
-  valueSeparator?: string;
+  valueSeparator?: string | FilterFunction<string>;
   options?:
     | ((
         mForm: FormState | undefined,

package/types/schema.d.ts

@@ -436,11 +436,11 @@ export interface CascaderConfig extends FormItem, Input {
     /** 是否多选，默认 false */
     multiple?: boolean;
     /** 是否严格的遵守父子节点不互相关联，默认 false */
-    checkStrictly?: boolean;
+    checkStrictly?: boolean | FilterFunction<boolean>;
     /** 弹出内容的自定义类名 */
     popperClass?: string;
     /** 合并成字符串时的分隔符 */
-    valueSeparator?: string;
+    valueSeparator?: string | FilterFunction<string>;
     options?: ((mForm: FormState | undefined, data: {
         model: Record<any, any>;
         prop: string;