@tmagic/form 1.8.0-manmanyu.9 → 1.8.1

package/src/fields/{Date.vue → Date/Index.vue}

@@ -14,9 +14,8 @@
 <script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
 
-import type { DateConfig, FieldProps } from '../schema';
-import { datetimeFormatter } from '../utils/form';
-import { useAddField } from '../utils/useAddField';
+import type { DateConfig, FieldProps } from '@form/schema';
+import { useAddField } from '@form/utils/useAddField';
 
 defineOptions({
   name: 'MFormDate',
@@ -30,8 +29,6 @@ const emit = defineEmits<{
 
 useAddField(props.prop);
 
-props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat || 'YYYY/MM/DD');
-
 const changeHandler = (v: string) => {
   emit('change', v);
 };

package/src/fields/Date/effect.ts

@@ -0,0 +1,29 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DateConfig } from '@form/schema';
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+import { datetimeFormatter } from '@form/utils/form';
+
+/** 按 `valueFormat` 归一化日期值。 */
+export const effect: FieldMountValueEffect = ({ config, model }) => {
+  if (!model) return;
+
+  const { name, valueFormat } = config as DateConfig & { name: string };
+  model[name] = datetimeFormatter(model[name], '', valueFormat || 'YYYY/MM/DD');
+};

package/src/fields/{DateTime.vue → DateTime/Index.vue}

@@ -16,9 +16,8 @@
 <script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
 
-import type { DateTimeConfig, FieldProps } from '../schema';
-import { datetimeFormatter } from '../utils/form';
-import { useAddField } from '../utils/useAddField';
+import type { DateTimeConfig, FieldProps } from '@form/schema';
+import { useAddField } from '@form/utils/useAddField';
 
 defineOptions({
   name: 'MFormDateTime',
@@ -32,19 +31,6 @@ const emit = defineEmits<{
 
 useAddField(props.prop);
 
-const value = props.model?.[props.name]?.toString();
-if (props.model) {
-  if (!value || value === 'Invalid Date') {
-    props.model[props.name] = '';
-  } else {
-    props.model[props.name] = datetimeFormatter(
-      props.model[props.name],
-      '',
-      props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss',
-    );
-  }
-}
-
 const changeHandler = (v: string) => {
   emit('change', v);
 };

package/src/fields/DateTime/effect.ts

@@ -0,0 +1,36 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DateTimeConfig } from '@form/schema';
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+import { datetimeFormatter } from '@form/utils/form';
+
+/** 按 `valueFormat` 归一化日期时间值，空值与非法值统一为空字符串。 */
+export const effect: FieldMountValueEffect = ({ config, model }) => {
+  if (!model) return;
+
+  const { name, valueFormat } = config as DateTimeConfig & { name: string };
+  const value = model[name]?.toString();
+
+  if (!value || value === 'Invalid Date') {
+    model[name] = '';
+    return;
+  }
+
+  model[name] = datetimeFormatter(model[name], '', valueFormat || 'YYYY/MM/DD HH:mm:ss');
+};

package/src/fields/{Display.vue → Display/Index.vue}

@@ -5,9 +5,9 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import type { DisplayConfig, FieldProps, FormState } from '../schema';
-import { filterFunction } from '../utils/form';
-import { useAddField } from '../utils/useAddField';
+import type { DisplayConfig, FieldProps, FormState } from '@form/schema';
+import { filterFunction } from '@form/utils/form';
+import { useAddField } from '@form/utils/useAddField';
 
 defineOptions({
   name: 'MFormDisplay',
@@ -17,10 +17,6 @@ const props = defineProps<FieldProps<DisplayConfig>>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
-if (props.config.initValue && props.model) {
-  props.model[props.name] = props.config.initValue;
-}
-
 const text = computed(() => {
   if (props.config.displayText) {
     return filterFunction<string>(mForm, props.config.displayText, props);

package/src/fields/Display/effect.ts

@@ -0,0 +1,28 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DisplayConfig } from '@form/schema';
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+
+/** 把 `initValue` 写入 model。 */
+export const effect: FieldMountValueEffect = ({ config, model }) => {
+  const { initValue, name } = config as DisplayConfig & { name: string };
+  if (initValue && model) {
+    model[name] = initValue;
+  }
+};

package/src/fields/{DynamicField.vue → DynamicField/Index.vue}

@@ -27,9 +27,11 @@ import { onBeforeUnmount, reactive, watch } from 'vue';
 
 import { TMagicForm, TMagicFormItem, TMagicInput } from '@tmagic/design';
 
-import type { DynamicFieldConfig, FieldProps } from '../schema';
-import { getConfig } from '../utils/config';
-import { useAddField } from '../utils/useAddField';
+import type { DynamicFieldConfig, FieldProps } from '@form/schema';
+import { getConfig } from '@form/utils/config';
+import { useAddField } from '@form/utils/useAddField';
+
+import { eachDynamicField } from './effect';
 
 defineOptions({
   name: 'MFormDynamicField',
@@ -54,15 +56,13 @@ const changeFieldMap = async () => {
   const fields = await props.config.returnFields(props.config, props.model, request);
   fieldMap.value = {};
   fieldLabelMap.value = {};
-  fields.forEach((v) => {
-    if (typeof v !== 'object' || v.name === undefined) return;
-    let oldVal = props.model?.[v.name] || '';
-    if (!oldVal && v.defaultValue !== undefined) {
-      oldVal = v.defaultValue;
-      emit('change', oldVal, { modifyKey: v.name });
+  eachDynamicField(fields, props.model, (field, value, isDefaultApplied) => {
+    // 取了 defaultValue 的字段需要写回表单值
+    if (isDefaultApplied) {
+      emit('change', value, { modifyKey: field.name });
     }
-    fieldMap.value[v.name] = oldVal;
-    fieldLabelMap.value[v.name] = v.label || '';
+    fieldMap.value[field.name] = value;
+    fieldLabelMap.value[field.name] = field.label || '';
   });
 };
 

package/src/fields/DynamicField/effect.ts

@@ -0,0 +1,74 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { setValueByKeyPath } from '@tmagic/utils';
+
+import type { DynamicFieldConfig, FormValue } from '@form/schema';
+import { getConfig } from '@form/utils/config';
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+
+/** `dynamic-field` 的 `returnFields` 返回的单个字段描述 */
+type DynamicFieldItem = ReturnType<DynamicFieldConfig['returnFields']>[number];
+
+/**
+ * 遍历动态字段列表，按「原值为空且声明了 defaultValue 则取默认值」求出每个字段当前的值。
+ *
+ * `isDefaultApplied` 为真表示该值来自 `defaultValue`，需要写回表单值
+ * （组件通过 emit change 写回，初始化写入直接写 `values`）。
+ */
+export const eachDynamicField = (
+  fields: DynamicFieldItem[],
+  model: FormValue | undefined,
+  onField: (_field: DynamicFieldItem, _value: any, _isDefaultApplied: boolean) => void,
+): void => {
+  for (const field of fields) {
+    if (typeof field !== 'object' || field?.name === undefined) continue;
+
+    let value = model?.[field.name] || '';
+    let isDefaultApplied = false;
+
+    if (!value && field.defaultValue !== undefined) {
+      value = field.defaultValue;
+      isDefaultApplied = true;
+    }
+
+    onField(field, value, isDefaultApplied);
+  }
+};
+
+/**
+ * 同步 `returnFields` 的 defaultValue 按 prop 写入值根对象。
+ *
+ * 该组件读取的是同级 model，但写入走 Container 的 modifyKey 分支，落在 `${prop}.${key}`，
+ * 这里保持与渲染一致（含这层不对称），避免两条链路产出不同的值。
+ * 异步 returnFields 由组件挂载后的 watch 负责，此处不等待。
+ */
+export const effect: FieldMountValueEffect = ({ config, model, prop, values }) => {
+  const { returnFields, dynamicKey } = config as DynamicFieldConfig;
+  if (typeof returnFields !== 'function' || !model) return;
+  if (model[dynamicKey] === '') return;
+
+  const result = returnFields(config as DynamicFieldConfig, model, getConfig<Function>('request'));
+  if (!result || typeof (result as any).then === 'function' || !Array.isArray(result)) return;
+
+  eachDynamicField(result, model, (field, value, isDefaultApplied) => {
+    if (isDefaultApplied) {
+      setValueByKeyPath(`${prop}.${field.name}`, value, values || model);
+    }
+  });
+};

package/src/fields/Link.vue

@@ -2,7 +2,7 @@
   <a
     target="_blank"
     :href="href"
-    v-if="displayTheme === 'magic-admin' && config.href && !disabled"
+    v-if="isGlobalFlat && config.href && !disabled"
     class="magic-admin-link"
     :style="config.css || {}"
   >
@@ -31,10 +31,11 @@
 import { computed, inject, readonly, ref } from 'vue';
 import { Notebook } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicIcon, useTheme } from '@tmagic/design';
+import { TMagicButton, TMagicIcon } from '@tmagic/design';
 
 import FormDialog from '../FormDialog.vue';
 import type { FieldProps, FormState, LinkConfig } from '../schema';
+import { isGlobalFlat } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -45,8 +46,6 @@ const props = defineProps<FieldProps<LinkConfig> & { theme?: string }>();
 
 const emit = defineEmits(['change']);
 
-const displayTheme = useTheme(props);
-
 useAddField(props.prop);
 
 const formValue = ref({});

package/src/fields/Number.vue

@@ -3,7 +3,7 @@
     v-if="model"
     v-model="value"
     clearable
-    controls-position="right"
+    :controls-position="isGlobalFlat ? '' : 'right'"
     :size="size"
     :max="config.max"
     :min="config.min"
@@ -21,6 +21,7 @@ import { inject, ref, watch } from 'vue';
 import { TMagicInputNumber } from '@tmagic/design';
 
 import type { FieldProps, FormState, NumberConfig } from '../schema';
+import { isGlobalFlat } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({

package/src/fields/{NumberRange.vue → NumberRange/Index.vue}

@@ -23,8 +23,8 @@ import { ref, watch } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
 
-import type { FieldProps, NumberRangeConfig } from '../schema';
-import { useAddField } from '../utils/useAddField';
+import type { FieldProps, NumberRangeConfig } from '@form/schema';
+import { useAddField } from '@form/utils/useAddField';
 
 defineOptions({
   name: 'MFormNumberRange',
@@ -53,10 +53,6 @@ watch(
 
 useAddField(props.prop);
 
-if (!Array.isArray(props.model[props.name])) {
-  props.model[props.name] = [];
-}
-
 const minChangeHandler = (v: string) => {
   emit('change', [Number(v), props.model[props.name][1]]);
 };

package/src/fields/NumberRange/effect.ts

@@ -0,0 +1,27 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+
+/** 值不是数组时修正为空数组。 */
+export const effect: FieldMountValueEffect = ({ config, model }) => {
+  const { name } = config as any;
+  if (model && !Array.isArray(model[name])) {
+    model[name] = [];
+  }
+};

package/src/fields/RadioGroup.vue

@@ -1,5 +1,11 @@
 <template>
-  <TMagicRadioGroup v-if="model" :model-value="model[name]" :size="size" :disabled="disabled">
+  <TMagicRadioGroup
+    v-if="model"
+    :model-value="model[name]"
+    :size="size"
+    :disabled="disabled"
+    class="icon-{{ iconSize }}"
+  >
     <component
       v-for="option in config.options"
       :is="itemComponent"
@@ -41,6 +47,9 @@ const itemComponent = computed(() => (props.config.childType === 'button' ? TMag
 const emit = defineEmits(['change']);
 
 const clickHandler = (item: string | number | boolean) => {
+  if (props.disabled) {
+    return;
+  }
   // 再次点击取消选中
   emit('change', props.model[props.name] === item ? '' : item);
 };
@@ -49,6 +58,9 @@ useAddField(props.prop);
 
 // 这里换了设计稿里的图标，所以需要调整一下图标大小
 const iconSize = computed(() => {
+  if (props.config.iconSize) {
+    return props.config.iconSize;
+  }
   if (props.size === 'small') {
     return '14';
   }

package/src/fields/Select.vue

@@ -57,7 +57,7 @@
       <component
         v-for="option in options as SelectOption[]"
         class="tmagic-design-option"
-        :key="config.valueKey ? option.value[config.valueKey] : option.value"
+        :key="config.valueKey ? option.value?.[config.valueKey] : option.value"
         :is="optionComponent?.component || 'el-option'"
         v-bind="
           optionComponent?.props({
@@ -372,7 +372,12 @@ const getInitOption = async () => {
     });
   }
 
-  let initData = getValueByKeyPath(initRoot || root, res);
+  let initData: any;
+  try {
+    initData = getValueByKeyPath(initRoot || root, res);
+  } catch {
+    // 响应中不存在 initRoot/root 路径时按无数据处理
+  }
   if (initData) {
     if (!Array.isArray(initData)) {
       initData = [initData];
@@ -417,8 +422,12 @@ if (typeof props.config.options === 'function') {
     const v = props.model[props.name];
     if (Array.isArray(v) ? !v.length : typeof v === 'undefined') return;
     if (typeof v === 'undefined' || hasOption(v)) return;
-    const data = await getInitOption();
-    setOptions(data);
+    try {
+      const data = await getInitOption();
+      setOptions(data);
+    } catch {
+      setOptions([]);
+    }
   };
 
   watch(

package/src/headless.ts

@@ -0,0 +1,78 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview `@tmagic/form/headless`：无渲染校验入口，不加载 Vue 组件与样式。
+ *
+ * 纯 Node / CI 请从这里引入 `submitForm` / `validateForm` / `registerField`。
+ * `dialog: true` 需要 DOM，请改从 `@tmagic/form` 引入。
+ *
+ * ESM 下本入口与 `@tmagic/form` 共用同一批模块文件，字段注册表是同一份。
+ * CJS（`require`）下两者是各自独立的 UMD bundle，注册表不共享，同一进程里不要
+ * 同时 `require('@tmagic/form')` 和 `require('@tmagic/form/headless')`。
+ *
+ * @module @tmagic/form/headless
+ */
+
+export * from './schema';
+export * from './utils/form';
+export { builtInFields } from './utils/builtInFields';
+
+export {
+  clearFields,
+  getField as getFormField,
+  mergeFieldOptions,
+  registerBuiltInFields,
+  registerField,
+  registerFields,
+  unregisterField,
+} from './utils/registerField';
+export type { FieldOptions, HeadlessFieldOptions } from './utils/registerField';
+
+export type { FieldInnerConfig, FieldInnerConfigContext, FieldInnerConfigResult } from './utils/fieldInnerConfig';
+
+export { isLeafFieldType } from './utils/fieldValueEffects';
+export type { FieldMountValueEffect, FieldMountValueEffectContext } from './utils/fieldValueEffects';
+
+export {
+  applyMountValueEffects,
+  collectValidatableFields,
+  FieldInnerConfigError,
+  isFieldInnerConfigError,
+} from './utils/collectFields';
+export type { CollectedField } from './utils/collectFields';
+
+export { createHeadlessFormState, validateValues } from './utils/validateValues';
+export type { HeadlessFormStateOptions, ValidateValuesOptions, ValidateValuesResult } from './utils/validateValues';
+
+export { formatValidateError, getTextByName } from './utils/validateError';
+
+export {
+  clearTypeMatchRules,
+  deleteTypeMatchRule,
+  getTypeMatchRule,
+  MAX_SUGGESTION_OPTIONS,
+  optionSuggestion,
+  stringifyExampleValue,
+  validateTypeMatch,
+} from './utils/typeMatch';
+
+export type { TypeMatchValidateContext, TypeMatchValidator } from './utils/typeMatch';
+
+export { submitForm, validateForm } from './utils/submitHeadless';
+export type { SubmitFormOptions, SubmitFormResult, ValidateFormOptions } from './utils/submitHeadless';

package/src/index.ts

@@ -38,30 +38,67 @@ export { default as MGroupList } from './containers/table-group-list/TableGroupL
 export { default as MTableGroupList } from './containers/table-group-list/TableGroupList.vue';
 export { default as MText } from './fields/Text.vue';
 export { default as MNumber } from './fields/Number.vue';
-export { default as MNumberRange } from './fields/NumberRange.vue';
+export { default as MNumberRange } from './fields/NumberRange/Index.vue';
 export { default as MTextarea } from './fields/Textarea.vue';
 export { default as MHidden } from './fields/Hidden.vue';
-export { default as MDate } from './fields/Date.vue';
-export { default as MDateTime } from './fields/DateTime.vue';
+export { default as MDate } from './fields/Date/Index.vue';
+export { default as MDateTime } from './fields/DateTime/Index.vue';
 export { default as MTime } from './fields/Time.vue';
 export { default as MCheckbox } from './fields/Checkbox.vue';
 export { default as MSwitch } from './fields/Switch.vue';
 export { default as MDaterange } from './fields/Daterange.vue';
 export { default as MTimerange } from './fields/Timerange.vue';
 export { default as MColorPicker } from './fields/ColorPicker.vue';
-export { default as MCheckboxGroup } from './fields/CheckboxGroup.vue';
+export { default as MCheckboxGroup } from './fields/CheckboxGroup/Index.vue';
 export { default as MRadioGroup } from './fields/RadioGroup.vue';
-export { default as MDisplay } from './fields/Display.vue';
+export { default as MDisplay } from './fields/Display/Index.vue';
 export { default as MLink } from './fields/Link.vue';
 export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
-export { default as MDynamicField } from './fields/DynamicField.vue';
+export { default as MDynamicField } from './fields/DynamicField/Index.vue';
+
+export { builtInFields } from './utils/builtInFields';
 
 export {
-  deleteField as deleteFormField,
+  clearFields,
   getField as getFormField,
-  registerField as registerFormField,
-} from './utils/config';
+  mergeFieldOptions,
+  registerBuiltInFields,
+  registerField,
+  registerFields,
+  unregisterField,
+} from './utils/registerField';
+export type { FieldOptions, HeadlessFieldOptions } from './utils/registerField';
+
+export type { FieldInnerConfig, FieldInnerConfigContext, FieldInnerConfigResult } from './utils/fieldInnerConfig';
+
+export { isLeafFieldType } from './utils/fieldValueEffects';
+export type { FieldMountValueEffect, FieldMountValueEffectContext } from './utils/fieldValueEffects';
+
+export {
+  applyMountValueEffects,
+  collectValidatableFields,
+  FieldInnerConfigError,
+  isFieldInnerConfigError,
+} from './utils/collectFields';
+export type { CollectedField } from './utils/collectFields';
+
+export { createHeadlessFormState, validateValues } from './utils/validateValues';
+export type { HeadlessFormStateOptions, ValidateValuesOptions, ValidateValuesResult } from './utils/validateValues';
+
+export { formatValidateError, getTextByName } from './utils/validateError';
+
+export {
+  clearTypeMatchRules,
+  deleteTypeMatchRule,
+  getTypeMatchRule,
+  MAX_SUGGESTION_OPTIONS,
+  optionSuggestion,
+  stringifyExampleValue,
+  validateTypeMatch,
+} from './utils/typeMatch';
+
+export type { TypeMatchValidateContext, TypeMatchValidator } from './utils/typeMatch';
 
 export type { FormInstallOptions } from './plugin';