@tmagic/form 1.8.0-beta.11 → 1.8.0-beta.13

package/dist/es/utils/typeMatch.js

@@ -0,0 +1,408 @@
+import { readonly } from "vue";
+import { appendValidateSuggestion } from "@tmagic/design";
+import { getValueByKeyPath, toLine } from "@tmagic/utils";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+//#region packages/form/src/utils/typeMatch.ts
+dayjs.extend(customParseFormat);
+var typeMatchRuleRegistry = /* @__PURE__ */ new Map();
+var isPromise = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
+/** 注册或覆盖某个字段 type 的 typeMatch 校验规则 */
+var registerTypeMatchRule = (type, validator) => {
+	typeMatchRuleRegistry.set(toLine(type), validator);
+};
+/** 批量注册 typeMatch 校验规则 */
+var registerTypeMatchRules = (rules) => {
+	Object.entries(rules).forEach(([type, validator]) => {
+		registerTypeMatchRule(type, validator);
+	});
+};
+/** 获取某个字段 type 的自定义 typeMatch 校验规则 */
+var getTypeMatchRule = (type) => typeMatchRuleRegistry.get(toLine(type));
+/** 删除某个字段 type 的自定义 typeMatch 校验规则 */
+var deleteTypeMatchRule = (type) => typeMatchRuleRegistry.delete(toLine(type));
+/** 清空所有自定义 typeMatch 校验规则 */
+var clearTypeMatchRules = () => {
+	typeMatchRuleRegistry.clear();
+};
+/** 本地解析配置函数，避免与 form.ts 循环依赖 */
+var resolveConfig = (mForm, config, props) => {
+	if (typeof config === "function") return config(mForm, {
+		values: readonly(mForm?.initValues || {}),
+		model: readonly(props.model),
+		parent: readonly(mForm?.parentValues || {}),
+		formValue: readonly(mForm?.values || props.model),
+		prop: props.prop,
+		config: props.config,
+		index: props.index,
+		getFormValue: (prop) => getValueByKeyPath(prop, mForm?.values || props.model)
+	});
+	return config;
+};
+var SKIP_TYPES = /* @__PURE__ */ new Set([
+	"display",
+	"hidden",
+	"row",
+	"tab",
+	"dynamic-tab",
+	"fieldset",
+	"panel",
+	"step",
+	"flex-layout",
+	"link",
+	"component",
+	"dynamic-field",
+	"dynamicfield",
+	"form",
+	"container"
+]);
+var STRING_TYPES = /* @__PURE__ */ new Set([
+	"text",
+	"textarea",
+	"color-picker",
+	"html",
+	""
+]);
+var DATE_LIKE_TYPES = /* @__PURE__ */ new Set([
+	"date",
+	"datetime",
+	"time"
+]);
+var DATE_LIKE_DEFAULT_VALUE_FORMAT = {
+	date: "YYYY/MM/DD",
+	datetime: "YYYY/MM/DD HH:mm:ss",
+	time: "HH:mm:ss",
+	daterange: "YYYY/MM/DD HH:mm:ss",
+	timerange: "HH:mm:ss"
+};
+var TIMESTAMP_VALUE_FORMATS = /* @__PURE__ */ new Set(["x", "timestamp"]);
+/**
+* 将值格式化为可读的参考示例字符串。
+*/
+var stringifyExampleValue = (value) => {
+	if (typeof value === "string") return `"${value}"`;
+	if (value === null || value === void 0) return String(value);
+	if (typeof value === "object") try {
+		return JSON.stringify(value);
+	} catch {
+		return String(value);
+	}
+	return String(value);
+};
+var MAX_SUGGESTION_OPTIONS = 5;
+/**
+* 生成「请使用以下某一个值：xxx；xxx」形式的参考建议；无可选值时返回空字符串（不追加建议）。
+* 可选值超过 MAX_SUGGESTION_OPTIONS 个时仅展示前若干个并以「等」省略。
+*/
+var optionSuggestion = (optionValues) => {
+	const values = optionValues.filter((item) => typeof item !== "undefined");
+	if (!values.length) return "";
+	const shown = values.slice(0, MAX_SUGGESTION_OPTIONS).map(stringifyExampleValue);
+	const suffix = values.length > MAX_SUGGESTION_OPTIONS ? " 等" : "";
+	return `请使用以下某一个值：${shown.join("；")}${suffix}`;
+};
+/**
+* 基于真实 options 生成类型不匹配场景的「参考示例值」。
+*
+* - expectArray 为 true 时，取前若干个真实可选值组成数组示例；
+* - 否则取第一个真实可选值作为标量示例。
+* 无可用 options 时回退到通用示例。
+*/
+var optionExampleSuggestion = (optionValues, fallbackExample, expectArray) => {
+	const values = optionValues.filter((item) => typeof item !== "undefined");
+	if (!values.length) return `请参考以下示例值：${fallbackExample}`;
+	return `请参考以下示例值：${expectArray ? stringifyExampleValue(values.slice(0, 2)) : stringifyExampleValue(values[0])}`;
+};
+/**
+* 生成开关类字段的参考建议，列出合法的开关值。
+*/
+var toggleSuggestion = (activeValue, inactiveValue) => `请使用以下某一个值：${stringifyExampleValue(activeValue)}；${stringifyExampleValue(inactiveValue)}`;
+/**
+* 解析字段配置中的真实默认值（defaultValue），用于生成「真实」的参考示例值。
+* defaultValue 可能是函数，交由 resolveConfig 处理；未配置时返回 undefined。
+*/
+var resolveFieldDefaultValue = (mForm, props) => {
+	const { defaultValue } = props.config || {};
+	if (typeof defaultValue === "undefined" || defaultValue === "undefined") return void 0;
+	const resolvedDefaultValue = resolveConfig(mForm, defaultValue, props);
+	if (isPromise(resolvedDefaultValue)) return;
+	return resolvedDefaultValue;
+};
+var isNumberValue = (value) => typeof value === "number" && !Number.isNaN(value);
+var isStringValue = (value) => typeof value === "string";
+var isObjectValue = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isObjectArrayValue = (value) => Array.isArray(value) && value.every((item) => isObjectValue(item));
+var isNumberRangeValue = (value) => Array.isArray(value) && value.length === 2 && value.every((item) => isNumberValue(item));
+/**
+* 生成类型不匹配场景的「参考示例值」。
+*
+* 优先使用字段配置的真实默认值（defaultValue，需符合期望类型）；无可用默认值时回退到通用示例。
+*/
+var typeExampleSuggestion = (mForm, props, fallbackExample, isValid) => {
+	const defaultValue = resolveFieldDefaultValue(mForm, props);
+	return `请参考以下示例值：${typeof defaultValue !== "undefined" && isValid(defaultValue) ? stringifyExampleValue(defaultValue) : fallbackExample}`;
+};
+/**
+* 返回最终错误文案。
+*
+* - 传入了自定义 `message` 时，直接使用自定义文案（不追加建议）；
+* - 否则使用默认文案 `fallback`，并在其后拼接「参考建议」。
+*   参考建议给出一个可参考的示例值（如可选项列表、示例数据），仅用于错误汇总展示；
+*   form-item 行内错误不展示建议（由 @tmagic/design FormItem 在渲染时截断建议）。
+*   主文案与建议的拼接/截断统一复用 @tmagic/design 的 `appendValidateSuggestion`。
+*/
+var defaultMessage = (message, fallback, suggestion) => {
+	if (message) return message;
+	return appendValidateSuggestion(fallback, suggestion);
+};
+var isEmptyValue = (value) => value === void 0 || value === null || value === "";
+var isEmptyArray = (value) => Array.isArray(value) && value.length === 0;
+var resolveDateValueFormat = (fieldType, config) => config.valueFormat || DATE_LIKE_DEFAULT_VALUE_FORMAT[fieldType] || "YYYY/MM/DD HH:mm:ss";
+var isTimestampValueFormat = (valueFormat) => TIMESTAMP_VALUE_FORMATS.has(valueFormat);
+var isValidDateValueByFormat = (value, valueFormat) => {
+	if (isTimestampValueFormat(valueFormat)) return typeof value === "number" && !Number.isNaN(value);
+	if (typeof value !== "string") return false;
+	return dayjs(value, valueFormat, true).isValid();
+};
+/**
+* 生成单个日期类字段的参考示例值：时间戳格式给出当前时间戳，其余按 valueFormat 格式化当前时间。
+*/
+var dateSuggestion = (valueFormat) => isTimestampValueFormat(valueFormat) ? `请参考以下示例值：${Date.now()}` : `请参考以下示例值："${dayjs().format(valueFormat)}"`;
+/**
+* 生成日期范围类字段的参考示例值（长度为 2 的数组）。
+*/
+var dateRangeSuggestion = (valueFormat) => {
+	if (isTimestampValueFormat(valueFormat)) return `请参考以下示例值：[${Date.now()}, ${Date.now()}]`;
+	const example = dayjs().format(valueFormat);
+	return `请参考以下示例值：["${example}", "${example}"]`;
+};
+var dateValueFormatErrorMessage = (message, valueFormat) => defaultMessage(message, isTimestampValueFormat(valueFormat) ? "值类型应为时间戳数字" : `值格式应为 ${valueFormat}`, dateSuggestion(valueFormat));
+var resolveToggleValues = (config) => {
+	const filterIsNumber = config.filter === "number";
+	const { activeValue: configActiveValue, inactiveValue: configInactiveValue } = config;
+	let activeValue = configActiveValue;
+	let inactiveValue = configInactiveValue;
+	if (typeof activeValue === "undefined") activeValue = filterIsNumber ? 1 : true;
+	if (typeof inactiveValue === "undefined") inactiveValue = filterIsNumber ? 0 : false;
+	return {
+		activeValue,
+		inactiveValue
+	};
+};
+var flattenSelectOptions = (options) => {
+	const values = [];
+	options.forEach((option) => {
+		if (Array.isArray(option?.options)) {
+			option.options.forEach((child) => {
+				if (typeof child?.value !== "undefined") values.push(child.value);
+			});
+			return;
+		}
+		if (typeof option?.value !== "undefined") values.push(option.value);
+	});
+	return values;
+};
+var resolveOptions = (props) => {
+	const { options } = props.config || {};
+	return Array.isArray(options) ? options : [];
+};
+var includesOptionValue = (optionValues, value) => optionValues.some((item) => Object.is(item, value));
+var collectCascaderLeafValues = (options, result = []) => {
+	options.forEach((option) => {
+		if (option.children?.length) collectCascaderLeafValues(option.children, result);
+		else if (typeof option.value !== "undefined") result.push(option.value);
+	});
+	return result;
+};
+var isValidCascaderPath = (options, path) => {
+	if (!path.length) return false;
+	let currentOptions = options;
+	for (let i = 0; i < path.length; i++) {
+		const node = currentOptions.find((option) => Object.is(option.value, path[i]));
+		if (!node) return false;
+		if (i === path.length - 1) return true;
+		currentOptions = node.children || [];
+	}
+	return false;
+};
+/**
+* 取 cascader options 的第一条完整路径（从顶层到叶子的 value 数组）。
+*/
+var firstCascaderPath = (options) => {
+	const path = [];
+	let current = options;
+	while (current?.length) {
+		const node = current[0];
+		if (typeof node.value === "undefined") break;
+		path.push(node.value);
+		current = node.children;
+	}
+	return path;
+};
+/**
+* 基于真实 cascader options 生成类型不匹配场景的「参考示例值」。
+*
+* 依据 valueSeparator / multiple / emitPath 组织真实选中值的形态；无可用 options 时回退到通用示例。
+*/
+var cascaderExampleSuggestion = (options, config, valueSeparator, fallbackExample) => {
+	const path = firstCascaderPath(options);
+	if (!path.length) return `请参考以下示例值：${fallbackExample}`;
+	const emitPath = config.emitPath !== false;
+	const multiple = Boolean(config.multiple);
+	const single = emitPath ? path : path[path.length - 1];
+	let example;
+	if (valueSeparator) example = path.join(valueSeparator);
+	else if (multiple) example = [single];
+	else example = single;
+	return `请参考以下示例值：${stringifyExampleValue(example)}`;
+};
+var validateSelectValue = (value, config, optionValues, message) => {
+	if (optionValues.length === 0) return;
+	if (config.allowCreate || config.remote) {
+		if (config.multiple) {
+			if (!Array.isArray(value)) return defaultMessage(message, `${value} 类型应为数组`, optionExampleSuggestion(optionValues, "[\"选项1\", \"选项2\"]", true));
+			return;
+		}
+		if (typeof value === "object") return defaultMessage(message, `${value} 类型不合法`, optionExampleSuggestion(optionValues, "\"文本内容\" 或 123", false));
+		return;
+	}
+	const isStaticOptions = Array.isArray(config.options);
+	if (config.multiple) {
+		if (!Array.isArray(value)) return defaultMessage(message, `${value} 类型应为数组`, optionExampleSuggestion(optionValues, "[\"选项1\", \"选项2\"]", true));
+		if (isStaticOptions && value.some((item) => !includesOptionValue(optionValues, item))) return defaultMessage(message, `${value} 不在可选项中`, optionSuggestion(optionValues));
+		return;
+	}
+	if (isStaticOptions && !includesOptionValue(optionValues, value)) return defaultMessage(message, `${value} 不在可选项中`, optionSuggestion(optionValues));
+};
+var validateCascaderValue = (value, config, props, mForm, message) => {
+	const options = resolveOptions(props);
+	if (!options.length) return;
+	const valueSeparator = resolveConfig(mForm, config.valueSeparator, props);
+	if (isPromise(valueSeparator)) return;
+	const emitPath = config.emitPath !== false;
+	const multiple = Boolean(config.multiple);
+	const cascaderExample = (fallbackExample) => cascaderExampleSuggestion(options, config, valueSeparator, fallbackExample);
+	if (valueSeparator) {
+		if (typeof value !== "string" && !Array.isArray(value)) return defaultMessage(message, `${value} 类型应为字符串或数组`, cascaderExample("\"选项1,选项2\" 或 [\"选项1\", \"选项2\"]"));
+	} else if (multiple) {
+		if (!Array.isArray(value)) return defaultMessage(message, `${value} 类型应为数组`, cascaderExample("[\"选项1\", \"选项2\"]"));
+	} else if (emitPath && !Array.isArray(value)) return defaultMessage(message, `${value} 类型应为数组`, cascaderExample("[\"选项1\", \"选项2\"]"));
+	if (config.remote) return;
+	if (!options.length) return;
+	const normalizedValue = typeof value === "string" && valueSeparator ? value.split(valueSeparator) : value;
+	if (multiple) {
+		if (!Array.isArray(normalizedValue)) return defaultMessage(message, `${value} 类型应为数组`, cascaderExample("[\"选项1\", \"选项2\"]"));
+		if (normalizedValue.some((item) => {
+			if (emitPath) return !Array.isArray(item) || !isValidCascaderPath(options, item);
+			return !includesOptionValue(collectCascaderLeafValues(options), item);
+		})) return defaultMessage(message, `${value} 不在可选项中`, optionSuggestion(collectCascaderLeafValues(options)));
+		return;
+	}
+	if (emitPath) {
+		if (!Array.isArray(normalizedValue) || !isValidCascaderPath(options, normalizedValue)) return defaultMessage(message, `${value} 不在可选项中`, optionSuggestion(collectCascaderLeafValues(options)));
+		return;
+	}
+	if (!includesOptionValue(collectCascaderLeafValues(options), normalizedValue)) return defaultMessage(message, `${value} 不在可选项中`, optionSuggestion(collectCascaderLeafValues(options)));
+};
+var validateBuiltinTypeMatch = (value, fieldType, mForm, props, message) => {
+	if (SKIP_TYPES.has(fieldType)) return;
+	const config = props.config || {};
+	if (STRING_TYPES.has(fieldType)) {
+		if (config.filter === "number") {
+			if (typeof value !== "number" || Number.isNaN(value)) return defaultMessage(message, `${value} 类型应为数字`, typeExampleSuggestion(mForm, props, "123", isNumberValue));
+			return;
+		}
+		if (typeof config.filter === "function") return;
+		if (typeof value !== "string") return defaultMessage(message, `${value} 类型应为字符串`, typeExampleSuggestion(mForm, props, "\"文本内容\"", isStringValue));
+		return;
+	}
+	if (DATE_LIKE_TYPES.has(fieldType)) {
+		const valueFormat = resolveDateValueFormat(fieldType, config);
+		if (!isValidDateValueByFormat(value, valueFormat)) return dateValueFormatErrorMessage(message, valueFormat);
+		return;
+	}
+	if (fieldType === "number") {
+		if (typeof value !== "number" || Number.isNaN(value)) return defaultMessage(message, `${value} 类型应为数字`, typeExampleSuggestion(mForm, props, "123", isNumberValue));
+		return;
+	}
+	if (fieldType === "number-range") {
+		if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || Number.isNaN(item))) return defaultMessage(message, `${value} 类型应为长度为 2 的数字数组`, typeExampleSuggestion(mForm, props, "[0, 100]", isNumberRangeValue));
+		return;
+	}
+	if (fieldType === "switch" || fieldType === "checkbox") {
+		const { activeValue, inactiveValue } = resolveToggleValues(config);
+		if (!Object.is(value, activeValue) && !Object.is(value, inactiveValue)) return defaultMessage(message, `${value} 不在合法开关值中`, toggleSuggestion(activeValue, inactiveValue));
+		return;
+	}
+	if (fieldType === "select") return validateSelectValue(value, config, flattenSelectOptions(resolveOptions(props)), message);
+	if (fieldType === "radio-group") {
+		const optionValues = flattenSelectOptions(resolveOptions(props));
+		if (optionValues.length === 0) return;
+		if (!includesOptionValue(optionValues, value)) return defaultMessage(message, `${value} 不在可选项中`, optionSuggestion(optionValues));
+		return;
+	}
+	if (fieldType === "checkbox-group") {
+		const optionValues = flattenSelectOptions(resolveOptions(props));
+		if (optionValues.length === 0) return;
+		if (!Array.isArray(value)) return defaultMessage(message, `${value} 类型应为数组`, optionExampleSuggestion(optionValues, "[\"选项1\", \"选项2\"]", true));
+		if (value.some((item) => !includesOptionValue(optionValues, item))) return defaultMessage(message, `${value} 不在可选项中`, optionSuggestion(optionValues));
+		return;
+	}
+	if (fieldType === "cascader") return validateCascaderValue(value, config, props, mForm, message);
+	if (fieldType === "daterange" || fieldType === "timerange") {
+		if (config.names) return;
+		const valueFormat = resolveDateValueFormat(fieldType, config);
+		if (!Array.isArray(value) || value.length !== 2 || value.some((item) => !isValidDateValueByFormat(item, valueFormat))) return defaultMessage(message, isTimestampValueFormat(valueFormat) ? `${value} 类型应为长度为 2 的时间戳数字数组` : `${value} 格式应为长度为 2 的 ${valueFormat} 数组`, dateRangeSuggestion(valueFormat));
+		return;
+	}
+	if (fieldType === "table" || fieldType === "group-list" || fieldType === "grouplist") {
+		if (!Array.isArray(value) || value.some((item) => !isObjectValue(item))) return defaultMessage(message, `${value} 类型应为对象数组`, typeExampleSuggestion(mForm, props, "[{}]", isObjectArrayValue));
+		return;
+	}
+};
+var validateTypeMatch = (value, mForm, props, message) => {
+	if (isEmptyValue(value) || isEmptyArray(value)) return;
+	const rawFieldType = "type" in (props.config || {}) ? props.config.type : "";
+	if (typeof rawFieldType !== "string" || !rawFieldType) return;
+	const fieldType = toLine(rawFieldType);
+	const customValidator = getTypeMatchRule(fieldType);
+	if (customValidator) return customValidator(value, {
+		fieldType,
+		mForm,
+		props,
+		message
+	});
+	return validateBuiltinTypeMatch(value, fieldType, mForm, props, message);
+};
+var createTypeMatchValidator = (mForm, props, rule) => {
+	const originalValidator = typeof rule.validator === "function" ? rule.validator : void 0;
+	return (asyncValidatorRule, value, callback, source, options) => {
+		const actualValue = props.config?.names ? props.model : value;
+		try {
+			const error = validateTypeMatch(actualValue, mForm, props, rule.message);
+			if (error) {
+				callback(new Error(error));
+				return;
+			}
+		} catch (error) {
+			console.error(error);
+		}
+		if (originalValidator) return originalValidator({
+			rule: asyncValidatorRule,
+			value: actualValue,
+			callback,
+			source,
+			options
+		}, {
+			values: mForm?.initValues || {},
+			model: props.model,
+			parent: mForm?.parentValues || {},
+			formValue: mForm?.values || props.model,
+			prop: props.prop,
+			config: props.config
+		}, mForm);
+		callback();
+	};
+};
+//#endregion
+export { clearTypeMatchRules, createTypeMatchValidator, deleteTypeMatchRule, getTypeMatchRule, registerTypeMatchRule, registerTypeMatchRules, validateTypeMatch };

package/dist/style.css

@@ -23,7 +23,7 @@
 .m-form-dialog .m-dialog-body {
   padding: 0 20px;
 }
-.m-form-dialog .el-table .m-form-item .el-form-item {
+.m-form-dialog .el-table .m-form-item .el-form-item:not(.is-error) {
   margin-bottom: 0;
 }
 
@@ -247,6 +247,10 @@ fieldset.m-fieldset .m-form-tip {
   width: 95vw !important;
 }
 
+.el-form-item .m-fields-table .el-form-item.is-error {
+  margin-bottom: 18px;
+}
+
 .m-fields-table {
   width: 100%;
 }
@@ -269,7 +273,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-table .el-table__expanded-cell .m-form-tip {
   margin-left: 80px;
 }
-.m-fields-table .el-form-item {
+.m-fields-table .el-form-item:not(.is-error) {
   margin-bottom: 0;
 }
 .m-fields-table .tmagic-form-table-drag-target {