@tmagic/form 1.8.0-beta.25 → 1.8.0-beta.27

package/dist/es/utils/validateError.js

@@ -0,0 +1,57 @@
+//#region packages/form/src/utils/validateError.ts
+/**
+* 通过 name 从 config 中查找对应的 text
+*
+* @param name - 字段名，支持点分隔的路径格式，如 'a.b.c'
+* @param config - 表单配置数组
+* @returns 找到的 text 值，如果未找到则返回 undefined
+*/
+var getTextByName = (name, config = []) => {
+	if (!name || !Array.isArray(config)) return void 0;
+	const nameParts = name.split(".");
+	const findInConfig = (configs, parts) => {
+		if (parts.length === 0) return void 0;
+		const [currentPart, ...remainingParts] = parts;
+		for (const item of configs) {
+			if (item.name === currentPart) {
+				if (remainingParts.length === 0) return typeof item.text === "string" ? item.text : void 0;
+				if ("items" in item && Array.isArray(item.items)) {
+					const result = findInConfig(item.items, remainingParts);
+					if (result !== void 0) return result;
+				}
+			}
+			if ("items" in item && Array.isArray(item.items)) {
+				const result = findInConfig(item.items, parts);
+				if (result !== void 0) return result;
+			}
+		}
+	};
+	return findInConfig(config, nameParts);
+};
+/**
+* 将校验返回的 invalidFields 汇总为可读的错误文案（多条以 `<br>` 拼接）。
+*
+* `useFieldTextInError` 为 `true`（默认）时用字段的 text 文案作为错误前缀，找不到则回退为字段 name。
+*
+* 由渲染式校验（Form.vue 的 `submitForm` / `validate`）与无渲染校验（`validateValues`）共用，
+* 保证两条校验链路产出的错误文案格式完全一致。
+*
+* @param invalidFields - async-validator 产出的字段错误表
+* @param [options] - 文案选项
+* @param [options.config] - 用于查找 text 的表单配置
+* @param [options.useFieldTextInError=true] - 错误前缀是否使用字段 text
+* @returns 拼接后的错误文案；无错误时为空串
+*/
+var formatValidateError = (invalidFields, { config = [], useFieldTextInError = true } = {}) => {
+	const error = [];
+	Object.entries(invalidFields).forEach(([prop, validateError]) => {
+		validateError.forEach(({ field, message }) => {
+			const name = field || prop;
+			const text = (useFieldTextInError ? getTextByName(name, config) : void 0) || name;
+			error.push(`${text} -> ${message}`);
+		});
+	});
+	return error.join("<br>");
+};
+//#endregion
+export { formatValidateError, getTextByName };

package/dist/es/utils/validateValues.js

@@ -0,0 +1,115 @@
+import { createFormStateProxy } from "./formStateProxy.js";
+import { createFormStateBase, initValue } from "./form.js";
+import { applyMountValueEffects, collectValidatableFields } from "./collectFields.js";
+import { formatValidateError } from "./validateError.js";
+import { reactive } from "vue";
+import Schema from "async-validator";
+//#region packages/form/src/utils/validateValues.ts
+/**
+* 构造一个不依赖组件实例的 `formState`。
+*
+* 字段结构与 `Form.vue` 中 provide 给子树的 `mForm` 保持一致，使配置里的
+* `display` / `rules.validator` / `filter` 等回调拿到的上下文与渲染式校验相同。
+*
+* 差异：没有真实的表单实例，因此 `$emit` 为空实现、`fields` 注册表始终为空
+* （该注册表在整个仓库中只写不读，不参与校验）。
+*/
+var createHeadlessFormState = (options) => {
+	const context = options.context ?? {};
+	const state = {
+		keyProp: options.keyProp ?? "__key",
+		popperClass: options.popperClass ?? "",
+		config: options.config,
+		initValues: options.initValues ?? {},
+		isCompare: false,
+		lastValues: {},
+		parentValues: options.parentValues ?? {},
+		values: {},
+		lastValuesProcessed: {},
+		$emit: () => void 0,
+		...createFormStateBase()
+	};
+	return createFormStateProxy(reactive(state), () => context);
+};
+/**
+* 按 prop 路径从表单值中取字段值，路径中断时返回 `undefined`。
+*
+* 不复用 `@tmagic/utils` 的 `getValueByKeyPath`：后者在路径中断时抛错，
+* 而 Element Plus 的 FormItem 取值是宽松的（拿不到就是 `undefined`），此处与之对齐。
+*/
+var getFieldValue = (prop, values) => {
+	if (!prop) return void 0;
+	return prop.split(".").reduce((acc, key) => {
+		if (acc === null || typeof acc !== "object") return void 0;
+		return acc[key];
+	}, values);
+};
+/**
+* 校验单个字段，返回 async-validator 的 `fields` 错误映射（通过则返回 `null`）。
+*
+* 与 Element Plus 的 FormItem 逐字段校验保持一致：
+* 每个字段独立构造一个 `Schema({ [prop]: rules })`，以字段自身的值为 source，
+* 并开启 `firstFields` 只取每个字段的首条错误；`trigger` 是 FormItem 用来筛选规则的
+* 元信息，交给 async-validator 前必须剔除，否则会改变规则的匹配方式。
+*/
+var validateField = async (field, values) => {
+	const rules = field.rules.map(({ trigger, ...rule }) => rule);
+	if (!rules.length) return null;
+	const value = getFieldValue(field.prop, values);
+	try {
+		await new Schema({ [field.prop]: rules }).validate({ [field.prop]: value }, { firstFields: true });
+		return null;
+	} catch (err) {
+		if (err?.fields) return err.fields;
+		return { [field.prop]: [{
+			field: field.prop,
+			message: err?.message ?? `${err}`
+		}] };
+	}
+};
+/**
+* 不挂载任何组件，纯逻辑地对「一份 config + 一份值」执行一次完整校验。
+*
+* 流程与渲染式校验一一对应，但不需要 DOM，也不会实例化任何字段组件：
+*
+* 1. 构造 headless `formState` 并挂上 `context` 读穿；
+* 2. `initValue` 初始化表单值（默认值、嵌套结构、`onInitValue` 等）；
+* 3. `applyMountValueEffects` 执行字段登记的值初始化写入（与渲染式共用同一份登记表）；
+* 4. 遍历 config 树收集所有带规则的字段（等价于渲染出的 FormItem 集合）；
+* 5. 逐字段交给 async-validator 执行，汇总错误文案。
+*
+* @example
+* ```ts
+* const { error, values } = await validateValues({
+*   config: [...],
+*   initValues: { name: '' },
+*   typeMatchValid: true,
+* });
+* ```
+*/
+var validateValues = async (options) => {
+	const { config, initValues = {}, typeMatchValid, useFieldTextInError = true } = options;
+	const formState = createHeadlessFormState(options);
+	const values = await initValue(formState, {
+		initValues,
+		config
+	});
+	formState.values = values;
+	applyMountValueEffects(formState, config, values);
+	const fields = collectValidatableFields(formState, config, values, Boolean(typeMatchValid));
+	const invalidFields = {};
+	for (const field of fields) {
+		const fieldErrors = await validateField(field, values);
+		if (fieldErrors) Object.assign(invalidFields, fieldErrors);
+	}
+	return {
+		values,
+		invalidFields,
+		error: formatValidateError(invalidFields, {
+			config,
+			useFieldTextInError
+		})
+	};
+};
+//#endregion
+export { createHeadlessFormState, validateValues };

package/dist/style.css

@@ -269,6 +269,21 @@ fieldset.m-fieldset .m-form-tip {
   margin-left: 5px;
 }
 
+.m-fields-group-list {
+  --m-group-list-footer-padding-top: 12px;
+  --m-group-list-footer-padding-bottom: 16px;
+  --m-group-list-footer-button-height: 32px;
+  --m-group-list-footer-height: calc(
+    var(--m-group-list-footer-padding-top) +
+      var(--m-group-list-footer-button-height) +
+      var(--m-group-list-footer-padding-bottom)
+  );
+  --m-group-list-footer-bg: var(--el-bg-color, #fff);
+  --m-group-list-header-height: 65px;
+  --m-group-list-header-bg: #fff;
+  width: 100%;
+  min-width: 0;
+}
 .m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
   border: 0;
 }
@@ -284,22 +299,87 @@ fieldset.m-fieldset .m-form-tip {
   transform: rotate(90deg);
 }
 .m-fields-group-list .m-fields-group-list-item {
+  overflow: visible;
   border-bottom: 1px solid #ebeef5;
   margin-bottom: 7px;
 }
 .m-fields-group-list .m-fields-group-list-item:last-of-type {
   border-bottom: 0;
 }
+.m-fields-group-list .m-fields-group-list-item .el-card__body,
+.m-fields-group-list .m-fields-group-list-item .t-card__body {
+  overflow: visible;
+}
+.m-fields-group-list .m-fields-group-list-item .el-card__body > .m-container-row,
+.m-fields-group-list .m-fields-group-list-item .t-card__body > .m-container-row {
+  overflow: visible;
+}
+.m-fields-group-list .m-fields-group-list-item .el-card__body .tmagic-design-form-item,
+.m-fields-group-list .m-fields-group-list-item .t-card__body .tmagic-design-form-item {
+  margin-bottom: 16px;
+}
 .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-header {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.m-fields-group-list .m-fields-group-list-footer {
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-title {
+  flex: 1;
+  min-width: 0;
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+}
+.m-fields-group-list .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list .m-fields-group-list-item > .t-card__header {
+  position: sticky;
+  top: var(--m-group-list-header-sticky-top, 0px);
+  z-index: 7;
+  background-color: var(--m-group-list-header-bg, #fff);
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
+  top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
+  z-index: 6;
+}
+.m-fields-group-list .el-table__empty-block {
+  width: 100%;
+  min-height: 0;
+}
+.m-fields-group-list .el-table__empty-text {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+.m-fields-group-list > .m-fields-group-list-footer {
+  display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 16px;
 }
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
+  position: sticky;
+  bottom: 0;
+  z-index: 7;
+  margin-bottom: 0;
+  padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
+  background-color: var(--m-group-list-footer-bg);
+}
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full > div {
+  justify-content: stretch;
+}
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .el-button,
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .tmagic-design-button {
+  width: 100%;
+  height: var(--m-group-list-footer-button-height);
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
+  bottom: var(--m-group-list-footer-height);
+  z-index: 7;
+}
 
 /** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
 .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {

package/dist/themes/magic-admin.css

@@ -269,6 +269,21 @@ fieldset.m-fieldset .m-form-tip {
   margin-left: 5px;
 }
 
+.m-fields-group-list {
+  --m-group-list-footer-padding-top: 12px;
+  --m-group-list-footer-padding-bottom: 16px;
+  --m-group-list-footer-button-height: 32px;
+  --m-group-list-footer-height: calc(
+    var(--m-group-list-footer-padding-top) +
+      var(--m-group-list-footer-button-height) +
+      var(--m-group-list-footer-padding-bottom)
+  );
+  --m-group-list-footer-bg: var(--el-bg-color, #fff);
+  --m-group-list-header-height: 65px;
+  --m-group-list-header-bg: #fff;
+  width: 100%;
+  min-width: 0;
+}
 .m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
   border: 0;
 }
@@ -284,22 +299,87 @@ fieldset.m-fieldset .m-form-tip {
   transform: rotate(90deg);
 }
 .m-fields-group-list .m-fields-group-list-item {
+  overflow: visible;
   border-bottom: 1px solid #ebeef5;
   margin-bottom: 7px;
 }
 .m-fields-group-list .m-fields-group-list-item:last-of-type {
   border-bottom: 0;
 }
+.m-fields-group-list .m-fields-group-list-item .el-card__body,
+.m-fields-group-list .m-fields-group-list-item .t-card__body {
+  overflow: visible;
+}
+.m-fields-group-list .m-fields-group-list-item .el-card__body > .m-container-row,
+.m-fields-group-list .m-fields-group-list-item .t-card__body > .m-container-row {
+  overflow: visible;
+}
+.m-fields-group-list .m-fields-group-list-item .el-card__body .tmagic-design-form-item,
+.m-fields-group-list .m-fields-group-list-item .t-card__body .tmagic-design-form-item {
+  margin-bottom: 16px;
+}
 .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-header {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.m-fields-group-list .m-fields-group-list-footer {
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-title {
+  flex: 1;
+  min-width: 0;
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+}
+.m-fields-group-list .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list .m-fields-group-list-item > .t-card__header {
+  position: sticky;
+  top: var(--m-group-list-header-sticky-top, 0px);
+  z-index: 7;
+  background-color: var(--m-group-list-header-bg, #fff);
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
+  top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
+  z-index: 6;
+}
+.m-fields-group-list .el-table__empty-block {
+  width: 100%;
+  min-height: 0;
+}
+.m-fields-group-list .el-table__empty-text {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+.m-fields-group-list > .m-fields-group-list-footer {
+  display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 16px;
 }
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
+  position: sticky;
+  bottom: 0;
+  z-index: 7;
+  margin-bottom: 0;
+  padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
+  background-color: var(--m-group-list-footer-bg);
+}
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full > div {
+  justify-content: stretch;
+}
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .el-button,
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .tmagic-design-button {
+  width: 100%;
+  height: var(--m-group-list-footer-button-height);
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
+  bottom: var(--m-group-list-footer-height);
+  z-index: 7;
+}
 
 /** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
 .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
@@ -457,7 +537,8 @@ fieldset.m-fieldset .m-form-tip {
 .m-form.m-form--magic-admin [class="m-container-fieldset m-form-container"] {
   margin-top: 15px;
 }
-.m-form.m-form--magic-admin .m-container-tab:not(.magic-right-panel-tabs-top):not(.magic-form-dynamic-tab) > .tmagic-design-tabs:not(.el-tabs--border-card) > .el-tabs__content {
+.m-form.m-form--magic-admin .m-container-tab:not(.magic-right-panel-tabs-top):not(.magic-form-dynamic-tab) > .tmagic-design-tabs:not(.el-tabs--border-card) > .el-tabs__content,
+.m-form.m-form--magic-admin .m-container-tab:not(.magic-right-panel-tabs-top):not(.magic-form-dynamic-tab) > .tmagic-design-tabs:not(.el-tabs--border-card) > .t-tabs__content {
   background-color: #fff;
   padding: 16px 16px 0 16px;
   border-radius: 4px;
@@ -494,12 +575,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-form.m-form--magic-admin .m-fields-group-list-item.tmagic-design-card--flat .el-card__body .m-fields-table-wrap .m-fields-table .el-table__header-wrapper thead {
   height: 48px;
 }
-.m-form.m-form--magic-admin .m-fields-group-list-item.tmagic-design-card--flat .m-fields-group-list-item-header {
-  position: relative;
-}
 .m-form.m-form--magic-admin .m-fields-group-list-item.tmagic-design-card--flat .m-fields-group-list-item-header .delete-button {
-  position: absolute;
-  right: 0;
   color: #0f1113;
 }
 .m-form.m-form--magic-admin .m-form-container .m-form-container-expand {