@tmagic/editor 1.8.0-beta.24 → 1.8.0-beta.26

package/src/utils/type-match-rules.ts

@@ -18,9 +18,14 @@
 
 import type { DataSourceFieldType, DataSourceSchema, Id } from '@tmagic/core';
 import { NodeType } from '@tmagic/core';
-import { appendValidateSuggestion } from '@tmagic/design';
-import type { TypeMatchValidateContext, TypeMatchValidator } from '@tmagic/form';
-import { MAX_SUGGESTION_OPTIONS, optionSuggestion, stringifyExampleValue, validateTypeMatch } from '@tmagic/form';
+import { appendValidateSuggestion } from '@tmagic/design/headless';
+import type { TypeMatchValidateContext, TypeMatchValidator } from '@tmagic/form/headless';
+import {
+  MAX_SUGGESTION_OPTIONS,
+  optionSuggestion,
+  stringifyExampleValue,
+  validateTypeMatch,
+} from '@tmagic/form/headless';
 import {
   DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX,
   DATA_SOURCE_SET_DATA_METHOD_NAME,
@@ -209,7 +214,6 @@ const validateDataSourceFieldPath = (
   path: string[],
   options: {
     dataSourceId?: string;
-    valueMode?: 'key' | 'value';
     dataSourceFieldType?: DataSourceFieldType[];
     message?: string;
   } = {},
@@ -219,19 +223,11 @@ const validateDataSourceFieldPath = (
     return undefined;
   }
 
-  let dsId = options.dataSourceId;
-  let fieldNames = path;
-
+  const dsId = options.dataSourceId;
   if (!dsId) {
-    if (!path.length) {
-      return defaultMessage(options.message, '值不在可选项中', dataSourceIdSuggestion());
-    }
-    const rawDsId = path[0];
-    dsId =
-      options.valueMode === 'key' || !`${rawDsId}`.startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
-        ? `${rawDsId}`
-        : removeDataSourceFieldPrefix(`${rawDsId}`);
-    fieldNames = path.slice(1);
+    // 仅当取值为空数组或首项为空串时命中。表单校验管道里 validateTypeMatch 对空数组会短路，
+    // 因此这里只可能来自直接调用 validateDataSourceFieldSelect 的自定义 validator
+    return defaultMessage(options.message, '数据源不存在', dataSourceIdSuggestion());
   }
 
   const ds = findDataSource(`${dsId}`);
@@ -239,11 +235,11 @@ const validateDataSourceFieldPath = (
     return defaultMessage(options.message, `数据源(${dsId})不存在`, dataSourceIdSuggestion());
   }
 
-  if (!fieldNames.length) {
+  if (!path.length) {
     return undefined;
   }
 
-  const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, fieldNames);
+  const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, path);
   if (!ok) {
     return defaultMessage(
       options.message,
@@ -258,11 +254,15 @@ const validateDataSourceFieldPath = (
   }
 
   const leafType = field?.type || 'any';
-  if (leafType === 'any' || allowedTypes.includes(leafType)) {
-    return undefined;
-  }
+  if (leafType !== 'any' && !allowedTypes.includes(leafType)) {
+    const fieldName = field?.name || path[path.length - 1];
 
-  return defaultMessage(options.message, '值不在可选项中', dataSourceIdSuggestion());
+    // 文案已点明当前字段类型与要求类型，无需再列同级可选字段
+    return defaultMessage(
+      options.message,
+      `请选择类型为${allowedTypes.join('或')}的字段，字段(${fieldName})的类型为${leafType}`,
+    );
+  }
 };
 
 const validateDataSourceMethodTuple = (value: any, message?: string): string | undefined => {
@@ -367,7 +367,7 @@ const validateCondOpSelect: TypeMatchValidator = (value, { message, props }) =>
   const parentFields = props.config?.parentFields || [];
   const fieldPath = Array.isArray(props.model?.field) ? props.model.field : [];
   const [id, ...fieldNames] = [...parentFields, ...fieldPath];
-  const ds = id ? findDataSource(`${id}`) : undefined;
+  const ds = id ? findDataSource(removeDataSourceFieldPrefix(`${id}`)) : undefined;
   const fieldType = getFieldType(ds, fieldNames);
   const allowed = getCondOpsByFieldType(fieldType);
 
@@ -464,7 +464,7 @@ export type ValidateDataSourceFieldSelectOptions = {
 /**
  * data-source-field-select 的 typeMatch 校验逻辑，可供自定义 rules.validator 复用。
  */
-export const validateDataSourceFieldSelectValue = (
+export const validateDataSourceFieldSelect = (
   value: any,
   context: TypeMatchValidateContext,
   options?: ValidateDataSourceFieldSelectOptions,
@@ -492,17 +492,22 @@ export const validateDataSourceFieldSelectValue = (
     return defaultMessage(message, `${value}类型应为字符串数组`, dataSourceFieldPathSuggestion());
   }
 
-  return validateDataSourceFieldPath(value, {
-    dataSourceId: config.dataSourceId,
-    valueMode: config.value,
+  // 未指定 dataSourceId 时，路径首项为数据源 id，其余为字段名。
+  // value 模式的首项带 ds-field:: 前缀、key 模式不带，removeDataSourceFieldPrefix 对后者是幂等的，无需分支。
+  let dataSourceId = config.dataSourceId ? `${config.dataSourceId}` : undefined;
+  let fieldNames = value;
+  if (!dataSourceId) {
+    dataSourceId = value.length ? removeDataSourceFieldPrefix(value[0]) : undefined;
+    fieldNames = value.slice(1);
+  }
+
+  return validateDataSourceFieldPath(fieldNames, {
+    dataSourceId,
     dataSourceFieldType: config.dataSourceFieldType,
     message,
   });
 };
 
-const validateDataSourceFieldSelect: TypeMatchValidator = (value, context) =>
-  validateDataSourceFieldSelectValue(value, context);
-
 const validateDataSourceSelect: TypeMatchValidator = (value, { message, props }) => {
   const config = props.config || {};
   const dataSources = getDataSources();
@@ -678,7 +683,8 @@ export const editorTypeMatchRules: Record<string, TypeMatchValidator> = {
   'ui-select': validateUiSelect,
   'data-source-input': validateDataSourceInput,
   'data-source-method-select': validateDataSourceMethodSelect,
-  'data-source-field-select': validateDataSourceFieldSelect,
+  /** 注册进 typeMatch 规则表的入口，收窄为 TypeMatchValidator，避免调用方误传第三个参数 */
+  'data-source-field-select': (value, context) => validateDataSourceFieldSelect(value, context),
   'data-source-select': validateDataSourceSelect,
   'code-select': validateCodeSelect,
   'data-source-fields': validateDataSourceFields,

package/types/headless.d.ts

@@ -0,0 +1,18 @@
+import { HeadlessFieldOptions } from "@tmagic/form/headless";
+//#region temp/packages/editor/src/fields/headless-validation.d.ts
+/**
+ * 编辑器字段的无渲染登记表（不含 Vue 组件）。
+ *
+ * Node 里 `registerFields(editorFields)` 即可配合 `validateForm` / `submitForm`。
+ * 安装编辑器时由 plugin 把 `component` 叠上去再传给 `@tmagic/form`。
+ *
+ * - 叶子：内部只渲染叶子 UI，或把子表单渲染在独立的 MForm / MFormBox 实例里
+ * - innerConfig：内部再渲染 MContainer / MPanel / MGroupList，把运行期配置交出来
+ * - typeMatch：该 type 自身的类型匹配校验
+ *
+ * innerConfig 返回的 config / model / prop 与组件模板里传给内部容器的那一组保持一一对应，
+ * 且配置本身与组件共用同一份工厂（`fields/configs/`）。
+ */
+declare const editorFields: Record<string, HeadlessFieldOptions>;
+//#endregion
+export { editorFields };