@tmagic/form 1.7.14-beta.2 → 1.8.0-beta.0

package/dist/tmagic-form.umd.cjs

@@ -1,15 +1,15 @@
 (function(global, factory) {
-	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("dayjs"), require("dayjs/plugin/utc"), require("@tmagic/utils"), require("@tmagic/design"), require("@element-plus/icons-vue"), require("@popperjs/core")) : typeof define === "function" && define.amd ? define([
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@tmagic/design"), require("@tmagic/utils"), require("@element-plus/icons-vue"), require("dayjs"), require("dayjs/plugin/utc"), require("@popperjs/core")) : typeof define === "function" && define.amd ? define([
 		"exports",
 		"vue",
-		"dayjs",
-		"dayjs/plugin/utc",
-		"@tmagic/utils",
 		"@tmagic/design",
+		"@tmagic/utils",
 		"@element-plus/icons-vue",
+		"dayjs",
+		"dayjs/plugin/utc",
 		"@popperjs/core"
-	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.dayjs, global.dayjs_plugin_utc, global._tmagic_utils, global._tmagic_design, global._element_plus_icons_vue, global._popperjs_core));
-})(this, function(exports, vue, dayjs, dayjs_plugin_utc, _tmagic_utils, _tmagic_design, _element_plus_icons_vue, _popperjs_core) {
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global._tmagic_design, global._tmagic_utils, global._element_plus_icons_vue, global.dayjs, global.dayjs_plugin_utc, global._popperjs_core));
+})(this, function(exports, vue, _tmagic_design, _tmagic_utils, _element_plus_icons_vue, dayjs, dayjs_plugin_utc, _popperjs_core) {
 	Object.defineProperties(exports, {
 		__esModule: { value: true },
 		[Symbol.toStringTag]: { value: "Module" }
@@ -2617,6 +2617,52 @@
 		return baseIsEqual(value, other);
 	}
 	//#endregion
+	//#region packages/form/src/utils/useAddField.ts
+	var useAddField = (prop) => {
+		if (!prop) return;
+		const mForm = (0, vue.inject)("mForm");
+		const instance = (0, vue.getCurrentInstance)();
+		(0, vue.watch)(() => instance?.proxy, (vm) => {
+			if (vm) mForm?.setField(prop, vm);
+			else mForm?.deleteField(prop);
+		}, { immediate: true });
+	};
+	//#endregion
+	//#region packages/form/src/fields/Hidden.vue
+	var Hidden_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		name: "MFormHidden",
+		__name: "Hidden",
+		props: {
+			model: {},
+			name: {},
+			prop: {}
+		},
+		setup(__props) {
+			useAddField(__props.prop);
+			return (_ctx, _cache) => {
+				return __props.model ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("input", {
+					key: 0,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+					type: "hidden"
+				}, null, 512)), [[vue.vModelText, __props.model[__props.name]]]) : (0, vue.createCommentVNode)("v-if", true);
+			};
+		}
+	});
+	//#endregion
+	//#region packages/form/src/utils/config.ts
+	var $MAGIC_FORM = {};
+	var setConfig = (option) => {
+		$MAGIC_FORM = option;
+	};
+	var getConfig = (key) => $MAGIC_FORM[key];
+	var fieldRegistry = /* @__PURE__ */ new Map();
+	var registerField = (tagName, component) => {
+		if (fieldRegistry.has(tagName)) return;
+		fieldRegistry.set(tagName, component);
+	};
+	var getField = (tagName) => fieldRegistry.get(tagName);
+	var deleteField = (tagName) => fieldRegistry.delete(tagName);
+	//#endregion
 	//#region packages/form/src/utils/form.ts
 	var TABLE_SELECT_TYPES = new Set(["table-select", "tableSelect"]);
 	var isTableSelect = (type) => typeof type === "string" && TABLE_SELECT_TYPES.has(type);
@@ -2786,52 +2832,6 @@
 		return `${[...itemPath, key].join(".")}`;
 	};
 	//#endregion
-	//#region packages/form/src/utils/useAddField.ts
-	var useAddField = (prop) => {
-		if (!prop) return;
-		const mForm = (0, vue.inject)("mForm");
-		const instance = (0, vue.getCurrentInstance)();
-		(0, vue.watch)(() => instance?.proxy, (vm) => {
-			if (vm) mForm?.setField(prop, vm);
-			else mForm?.deleteField(prop);
-		}, { immediate: true });
-	};
-	//#endregion
-	//#region packages/form/src/fields/Hidden.vue
-	var Hidden_default = /* @__PURE__ */ (0, vue.defineComponent)({
-		name: "MFormHidden",
-		__name: "Hidden",
-		props: {
-			model: {},
-			name: {},
-			prop: {}
-		},
-		setup(__props) {
-			useAddField(__props.prop);
-			return (_ctx, _cache) => {
-				return __props.model ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("input", {
-					key: 0,
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
-					type: "hidden"
-				}, null, 512)), [[vue.vModelText, __props.model[__props.name]]]) : (0, vue.createCommentVNode)("v-if", true);
-			};
-		}
-	});
-	//#endregion
-	//#region packages/form/src/utils/config.ts
-	var $MAGIC_FORM = {};
-	var setConfig = (option) => {
-		$MAGIC_FORM = option;
-	};
-	var getConfig = (key) => $MAGIC_FORM[key];
-	var fieldRegistry = /* @__PURE__ */ new Map();
-	var registerField = (tagName, component) => {
-		if (fieldRegistry.has(tagName)) return;
-		fieldRegistry.set(tagName, component);
-	};
-	var getField = (tagName) => fieldRegistry.get(tagName);
-	var deleteField = (tagName) => fieldRegistry.delete(tagName);
-	//#endregion
 	//#region packages/form/src/containers/FormLabel.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$15 = {
 		key: 0,
@@ -3537,6 +3537,90 @@
 		}
 	});
 	//#endregion
+	//#region packages/form/src/submitForm.ts
+	/**
+	* 以命令式方式调用 Form.vue 完成一次表单校验/提交。
+	*
+	* 类似 ElMessage 的用法：传入 props（包含 `config`/`initValues` 等），函数内部会临时挂载
+	* 一个不可见的 Form 组件实例，等待初始化完成后调用其 `submitForm` 方法，
+	* 校验通过则 resolve 表单值，校验失败则 reject 错误信息，最后自动卸载实例。
+	*
+	* @example
+	* ```ts
+	* import { submitForm } from '@tmagic/form';
+	*
+	* try {
+	*   const values = await submitForm({
+	*     config: [...],
+	*     initValues: { name: 'foo' },
+	*   });
+	*   console.log(values);
+	* } catch (e) {
+	*   console.error(e);
+	* }
+	* ```
+	*/
+	var submitForm = (options) => {
+		const { native, appContext, timeout = 1e4, ...formProps } = options;
+		return new Promise((resolve, reject) => {
+			const container = document.createElement("div");
+			container.style.display = "none";
+			document.body.appendChild(container);
+			let cleaned = false;
+			let timer = null;
+			const app = (0, vue.createApp)((0, vue.defineComponent)({
+				name: "MFormSubmitWrapper",
+				setup() {
+					const formRef = (0, vue.ref)(null);
+					const stop = (0, vue.watch)(() => formRef.value?.initialized, async (initialized) => {
+						if (!initialized) return;
+						stop();
+						try {
+							await (0, vue.nextTick)();
+							resolve(await formRef.value.submitForm(native));
+						} catch (err) {
+							reject(err);
+						} finally {
+							cleanup();
+						}
+					}, {
+						flush: "post",
+						immediate: true
+					});
+					return () => (0, vue.h)(Form_default, {
+						...formProps,
+						ref: formRef
+					});
+				}
+			}));
+			if (appContext) Object.assign(app._context, appContext);
+			const cleanup = () => {
+				if (cleaned) return;
+				cleaned = true;
+				if (timer) {
+					clearTimeout(timer);
+					timer = null;
+				}
+				try {
+					app.unmount();
+				} catch {}
+				container.parentNode?.removeChild(container);
+			};
+			if (timeout > 0) timer = setTimeout(() => {
+				if (!cleaned) {
+					reject(/* @__PURE__ */ new Error(`submitForm timeout after ${timeout}ms: form is not initialized.`));
+					cleanup();
+				}
+			}, timeout);
+			try {
+				app.mount(container);
+			} catch (err) {
+				reject(err);
+				cleanup();
+			}
+		});
+	};
+	//#endregion
 	//#region packages/form/src/FormDialog.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$13 = { style: { "min-height": "1px" } };
 	//#endregion
@@ -3578,7 +3662,8 @@
 			showCancel: {
 				type: Boolean,
 				default: true
-			}
+			},
+			extendState: {}
 		},
 		emits: [
 			"close",
@@ -3728,6 +3813,7 @@
 						"label-position": __props.labelPosition,
 						inline: __props.inline,
 						"prevent-submit-default": __props.preventSubmitDefault,
+						"extend-state": __props.extendState,
 						onChange: changeHandler
 					}, null, 8, [
 						"modelValue",
@@ -3739,7 +3825,8 @@
 						"label-width",
 						"label-position",
 						"inline",
-						"prevent-submit-default"
+						"prevent-submit-default",
+						"extend-state"
 					]), (0, vue.renderSlot)(_ctx.$slots, "default")], 4)) : (0, vue.createCommentVNode)("v-if", true)]),
 					_: 3
 				}, 8, [
@@ -3782,7 +3869,8 @@
 			inline: { type: Boolean },
 			labelPosition: {},
 			preventSubmitDefault: { type: Boolean },
-			beforeClose: {}
+			beforeClose: {},
+			extendState: {}
 		},
 		emits: [
 			"close",
@@ -3906,6 +3994,7 @@
 						"label-position": __props.labelPosition,
 						inline: __props.inline,
 						"prevent-submit-default": __props.preventSubmitDefault,
+						"extend-state": __props.extendState,
 						onChange: changeHandler
 					}, null, 8, [
 						"size",
@@ -3916,7 +4005,8 @@
 						"label-width",
 						"label-position",
 						"inline",
-						"prevent-submit-default"
+						"prevent-submit-default",
+						"extend-state"
 					]), (0, vue.renderSlot)(_ctx.$slots, "default")], 512)) : (0, vue.createCommentVNode)("v-if", true)]),
 					_: 3
 				}, 8, [
@@ -3950,7 +4040,8 @@
 			confirmText: { default: "确定" },
 			inline: { type: Boolean },
 			labelPosition: {},
-			preventSubmitDefault: { type: Boolean }
+			preventSubmitDefault: { type: Boolean },
+			extendState: {}
 		},
 		emits: [
 			"change",
@@ -4012,6 +4103,7 @@
 						"label-position": __props.labelPosition,
 						inline: __props.inline,
 						"prevent-submit-default": __props.preventSubmitDefault,
+						"extend-state": __props.extendState,
 						onChange: changeHandler
 					}, null, 8, [
 						"size",
@@ -4022,7 +4114,8 @@
 						"label-width",
 						"label-position",
 						"inline",
-						"prevent-submit-default"
+						"prevent-submit-default",
+						"extend-state"
 					]), (0, vue.renderSlot)(_ctx.$slots, "default")]),
 					_: 3
 				})], 4), (0, vue.createElementVNode)("div", {
@@ -5666,7 +5759,7 @@
 		const addable = (0, vue.computed)(() => {
 			const modelName = props.name || props.config.name || "";
 			if (!modelName) return false;
-			if (!props.model[modelName].length) return true;
+			if (!props.model[modelName]?.length) return true;
 			if (typeof props.config.addable === "function") return props.config.addable(mForm, {
 				model: props.model[modelName],
 				formValue: mForm?.values,
@@ -7078,6 +7171,18 @@
 				}
 				return value === v;
 			};
+			const hasOption = (value) => {
+				const { config } = props;
+				if (Array.isArray(value) && !value.length) return true;
+				if (config.group) {
+					const groups = options.value;
+					if (config.multiple && Array.isArray(value)) return value.every((v) => groups.some((group) => group.options.some((item) => equalValue(item.value, v))));
+					return groups.some((group) => group.options.some((item) => equalValue(item.value, value)));
+				}
+				const opts = options.value;
+				if (config.multiple && Array.isArray(value)) return value.every((v) => opts.some((item) => equalValue(item.value, v)));
+				return opts.some((item) => equalValue(item.value, value));
+			};
 			const mapOptions = (data) => {
 				const { option = {
 					text: "text",
@@ -7240,13 +7345,18 @@
 			else if (Array.isArray(props.config.options)) (0, vue.watchEffect)(() => {
 				setOptions(props.config.options);
 			});
-			else if (props.config.option) (0, vue.onBeforeMount)(() => {
-				if (!props.model) return;
-				const v = props.model[props.name];
-				if (Array.isArray(v) ? v.length : typeof v !== "undefined") getInitOption().then((data) => {
-					setOptions(data);
-				});
-			});
+			else if (props.config.option) {
+				const initOption = async () => {
+					if (!props.model) return;
+					const v = props.model[props.name];
+					if (Array.isArray(v) ? !v.length : typeof v === "undefined") return;
+					if (typeof v === "undefined" || hasOption(v)) return;
+					setOptions(await getInitOption());
+				};
+				(0, vue.watch)(() => props.model?.[props.name], () => {
+					initOption();
+				}, { immediate: true });
+			}
 			if (props.config.remote) {
 				const unWatch = (0, vue.watch)(() => tMagicSelect.value?.scrollbarWrap, (scrollbarWrap) => {
 					if (!scrollbarWrap) return;
@@ -7741,6 +7851,7 @@
 	exports.registerFormField = registerField;
 	exports.sortArray = sortArray;
 	exports.sortChange = sortChange;
+	exports.submitForm = submitForm;
 	exports.useAddField = useAddField;
 	var _tmagic_form_schema = require("@tmagic/form-schema");
 	Object.keys(_tmagic_form_schema).forEach(function(k) {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.14-beta.2",
+  "version": "1.8.0-beta.0",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -52,9 +52,9 @@
   "peerDependencies": {
     "vue": "^3.5.34",
     "typescript": "^6.0.3",
-    "@tmagic/design": "1.7.14-beta.2",
-    "@tmagic/utils": "1.7.14-beta.2",
-    "@tmagic/form-schema": "1.7.14-beta.2"
+    "@tmagic/utils": "1.8.0-beta.0",
+    "@tmagic/design": "1.8.0-beta.0",
+    "@tmagic/form-schema": "1.8.0-beta.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/FormBox.vue

@@ -13,6 +13,7 @@
           :label-position="labelPosition"
           :inline="inline"
           :prevent-submit-default="preventSubmitDefault"
+          :extend-state="extendState"
           @change="changeHandler"
         ></Form>
         <slot></slot>
@@ -40,7 +41,7 @@ import { computed, ref, watchEffect } from 'vue';
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
 
 import Form from './Form.vue';
-import type { ContainerChangeEventData, FormConfig, FormValue } from './schema';
+import type { ContainerChangeEventData, FormConfig, FormState, FormValue } from './schema';
 
 defineOptions({
   name: 'MFormBox',
@@ -60,6 +61,7 @@ const props = withDefaults(
     inline?: boolean;
     labelPosition?: string;
     preventSubmitDefault?: boolean;
+    extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
     config: () => [],

package/src/FormDialog.vue

@@ -31,6 +31,7 @@
         :label-position="labelPosition"
         :inline="inline"
         :prevent-submit-default="preventSubmitDefault"
+        :extend-state="extendState"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -68,7 +69,7 @@ import { computed, ref } from 'vue';
 import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
 
 import Form from './Form.vue';
-import { ContainerChangeEventData, FormConfig, FormValue, StepConfig } from './schema';
+import { ContainerChangeEventData, FormConfig, FormState, FormValue, StepConfig } from './schema';
 
 defineOptions({
   name: 'MFormDialog',
@@ -95,6 +96,8 @@ const props = withDefaults(
     destroyOnClose?: boolean;
     showClose?: boolean;
     showCancel?: boolean;
+    /** 透传给内部 `MForm`，用于扩展 `formState`（如注入 `$message` / `$store` 等） */
+    extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
     config: () => [],

package/src/FormDrawer.vue

@@ -28,6 +28,7 @@
         :label-position="labelPosition"
         :inline="inline"
         :prevent-submit-default="preventSubmitDefault"
+        :extend-state="extendState"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -59,7 +60,7 @@ import { ref, watchEffect } from 'vue';
 import { TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from '@tmagic/design';
 
 import Form from './Form.vue';
-import type { ContainerChangeEventData, FormConfig, FormValue } from './schema';
+import type { ContainerChangeEventData, FormConfig, FormState, FormValue } from './schema';
 
 defineOptions({
   name: 'MFormDialog',
@@ -83,6 +84,8 @@ withDefaults(
     preventSubmitDefault?: boolean;
     /** 关闭前的回调，会暂停 Drawer 的关闭; done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭 */
     beforeClose?: (_done: (_cancel?: boolean) => void) => void;
+    /** 透传给内部 `MForm`，用于扩展 `formState`（如注入 `$message` / `$store` 等） */
+    extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
     closeOnPressEscape: true,

package/src/containers/table-group-list/useAdd.ts

@@ -22,7 +22,7 @@ export const useAdd = (
 
     if (!modelName) return false;
 
-    if (!props.model[modelName].length) {
+    if (!props.model[modelName]?.length) {
       return true;
     }
 

package/src/fields/Select.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, nextTick, onBeforeMount, ref, watch, watchEffect } from 'vue';
+import { inject, nextTick, ref, watch, watchEffect } from 'vue';
 
 import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import { getValueByKeyPath } from '@tmagic/utils';
@@ -123,6 +123,26 @@ const equalValue = (value: any, v: any): boolean => {
   return value === v;
 };
 
+const hasOption = (value: any): boolean => {
+  const { config } = props;
+
+  if (Array.isArray(value) && !value.length) return true;
+
+  if (config.group) {
+    const groups = options.value as SelectGroupOption[];
+    if (config.multiple && Array.isArray(value)) {
+      return value.every((v) => groups.some((group) => group.options.some((item) => equalValue(item.value, v))));
+    }
+    return groups.some((group) => group.options.some((item) => equalValue(item.value, value)));
+  }
+
+  const opts = options.value as SelectOption[];
+  if (config.multiple && Array.isArray(value)) {
+    return value.every((v) => opts.some((item) => equalValue(item.value, v)));
+  }
+  return opts.some((item) => equalValue(item.value, value));
+};
+
 const mapOptions = (data: any[]) => {
   const {
     option = {
@@ -392,15 +412,22 @@ if (typeof props.config.options === 'function') {
     setOptions(props.config.options as SelectOption[] | SelectGroupOption[]);
   });
 } else if (props.config.option) {
-  onBeforeMount(() => {
+  const initOption = async () => {
     if (!props.model) return;
     const v = props.model[props.name];
-    if (Array.isArray(v) ? v.length : typeof v !== 'undefined') {
-      getInitOption().then((data) => {
-        setOptions(data);
-      });
-    }
-  });
+    if (Array.isArray(v) ? !v.length : typeof v === 'undefined') return;
+    if (typeof v === 'undefined' || hasOption(v)) return;
+    const data = await getInitOption();
+    setOptions(data);
+  };
+
+  watch(
+    () => props.model?.[props.name],
+    () => {
+      void initOption();
+    },
+    { immediate: true },
+  );
 }
 
 if (props.config.remote) {

package/src/index.ts

@@ -19,6 +19,7 @@
 import type { FormConfig } from './schema';
 
 export * from './schema';
+export * from './submitForm';
 export * from './utils/form';
 export * from './utils/useAddField';