@tmagic/form 1.7.14-beta.1 → 1.7.14-beta.3

package/dist/es/Form.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
-import { initValue } from "./utils/form.js";
 import { getConfig } from "./utils/config.js";
+import { initValue } from "./utils/form.js";
 import Container_default from "./containers/Container.js";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeStyle, openBlock, provide, reactive, ref, renderList, shallowRef, toRaw, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
 import { cloneDeep, isEqual } from "lodash-es";
-import { setValueByKeyPath } from "@tmagic/utils";
 import { TMagicForm, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
+import { setValueByKeyPath } from "@tmagic/utils";
 //#region packages/form/src/Form.vue?vue&type=script&setup=true&lang.ts
 var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "MForm",

package/dist/es/FormBox.vue_vue_type_script_setup_true_lang.js

@@ -18,7 +18,8 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		confirmText: { default: "确定" },
 		inline: { type: Boolean },
 		labelPosition: {},
-		preventSubmitDefault: { type: Boolean }
+		preventSubmitDefault: { type: Boolean },
+		extendState: {}
 	},
 	emits: [
 		"change",
@@ -80,6 +81,7 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
+					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
 					"size",
@@ -90,7 +92,8 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"label-width",
 					"label-position",
 					"inline",
-					"prevent-submit-default"
+					"prevent-submit-default",
+					"extend-state"
 				]), renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			})], 4), createElementVNode("div", {

package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js

@@ -40,7 +40,8 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		showCancel: {
 			type: Boolean,
 			default: true
-		}
+		},
+		extendState: {}
 	},
 	emits: [
 		"close",
@@ -190,6 +191,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
+					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
 					"modelValue",
@@ -201,7 +203,8 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-width",
 					"label-position",
 					"inline",
-					"prevent-submit-default"
+					"prevent-submit-default",
+					"extend-state"
 				]), renderSlot(_ctx.$slots, "default")], 4)) : createCommentVNode("v-if", true)]),
 				_: 3
 			}, 8, [

package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js

@@ -24,7 +24,8 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		inline: { type: Boolean },
 		labelPosition: {},
 		preventSubmitDefault: { type: Boolean },
-		beforeClose: {}
+		beforeClose: {},
+		extendState: {}
 	},
 	emits: [
 		"close",
@@ -148,6 +149,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
+					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
 					"size",
@@ -158,7 +160,8 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-width",
 					"label-position",
 					"inline",
-					"prevent-submit-default"
+					"prevent-submit-default",
+					"extend-state"
 				]), renderSlot(_ctx.$slots, "default")], 512)) : createCommentVNode("v-if", true)]),
 				_: 3
 			}, 8, [

package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,11 @@
-import { createObjectProp, display, filterFunction, getRules } from "../utils/form.js";
 import Hidden_default from "../fields/Hidden.js";
 import { getField } from "../utils/config.js";
+import { createObjectProp, display, filterFunction, getRules } from "../utils/form.js";
 import FormLabel_default from "./FormLabel.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, readonly, ref, renderList, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, watch, watchEffect, withCtx } from "vue";
 import { isEqual } from "lodash-es";
-import { getValueByKeyPath } from "@tmagic/utils";
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from "@tmagic/design";
+import { getValueByKeyPath } from "@tmagic/utils";
 import { WarningFilled } from "@element-plus/icons-vue";
 //#region packages/form/src/containers/Container.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-tmagic-id", "data-tmagic-form-item-prop"];

package/dist/es/containers/table-group-list/useAdd.js

@@ -7,7 +7,7 @@ var useAdd = (props, emit) => {
 	const addable = 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,

package/dist/es/fields/Cascader.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import { filterFunction } from "../utils/form.js";
 import { useAddField } from "../utils/useAddField.js";
 import { getConfig } from "../utils/config.js";
+import { filterFunction } from "../utils/form.js";
 import { computed, createBlock, defineComponent, inject, openBlock, ref, unref, watchEffect } from "vue";
 import { TMagicCascader } from "@tmagic/design";
 //#region packages/form/src/fields/Cascader.vue?vue&type=script&setup=true&lang.ts

package/dist/es/fields/CheckboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { filterFunction } from "../utils/form.js";
 import { useAddField } from "../utils/useAddField.js";
+import { filterFunction } from "../utils/form.js";
 import { Fragment, computed, createBlock, createElementBlock, createTextVNode, defineComponent, inject, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 import { TMagicCheckbox, TMagicCheckboxGroup } from "@tmagic/design";
 //#region packages/form/src/fields/CheckboxGroup.vue?vue&type=script&setup=true&lang.ts

package/dist/es/fields/Date.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { datetimeFormatter } from "../utils/form.js";
 import { useAddField } from "../utils/useAddField.js";
+import { datetimeFormatter } from "../utils/form.js";
 import { createBlock, defineComponent, openBlock, unref } from "vue";
 import { TMagicDatePicker } from "@tmagic/design";
 //#region packages/form/src/fields/Date.vue?vue&type=script&setup=true&lang.ts

package/dist/es/fields/DateTime.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { datetimeFormatter } from "../utils/form.js";
 import { useAddField } from "../utils/useAddField.js";
+import { datetimeFormatter } from "../utils/form.js";
 import { createBlock, defineComponent, openBlock, unref } from "vue";
 import { TMagicDatePicker } from "@tmagic/design";
 //#region packages/form/src/fields/DateTime.vue?vue&type=script&setup=true&lang.ts

package/dist/es/fields/Daterange.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { datetimeFormatter } from "../utils/form.js";
 import { useAddField } from "../utils/useAddField.js";
+import { datetimeFormatter } from "../utils/form.js";
 import { createBlock, defineComponent, onUnmounted, openBlock, ref, unref, watch } from "vue";
 import { TMagicDatePicker } from "@tmagic/design";
 //#region packages/form/src/fields/Daterange.vue?vue&type=script&setup=true&lang.ts

package/dist/es/fields/Display.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { filterFunction } from "../utils/form.js";
 import { useAddField } from "../utils/useAddField.js";
+import { filterFunction } from "../utils/form.js";
 import { computed, createCommentVNode, createElementBlock, defineComponent, inject, openBlock, toDisplayString } from "vue";
 //#region packages/form/src/fields/Display.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 0 };

package/dist/es/fields/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { useAddField } from "../utils/useAddField.js";
 import { getConfig } from "../utils/config.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, mergeProps, nextTick, onBeforeMount, openBlock, ref, renderList, resolveDirective, resolveDynamicComponent, unref, watch, watchEffect, withCtx, withDirectives } from "vue";
-import { getValueByKeyPath } from "@tmagic/utils";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, mergeProps, nextTick, openBlock, ref, renderList, resolveDirective, resolveDynamicComponent, unref, watch, watchEffect, withCtx, withDirectives } from "vue";
 import { TMagicSelect, getDesignConfig } from "@tmagic/design";
+import { getValueByKeyPath } from "@tmagic/utils";
 //#region packages/form/src/fields/Select.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 2 };
 var Select_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -47,6 +47,18 @@ var Select_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			}
 			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",
@@ -145,6 +157,7 @@ var Select_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			let options = [];
 			let url = option.initUrl;
 			if (!url) return getInitLocalOption();
+			if (typeof props.model[props.name] === "undefined" || props.model[props.name] === "" || props.model[props.name] === null) return [];
 			if (typeof url === "function") url = await url(mForm, {
 				model: props.model,
 				formValue: mForm?.values
@@ -208,13 +221,18 @@ var Select_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		else if (Array.isArray(props.config.options)) watchEffect(() => {
 			setOptions(props.config.options);
 		});
-		else if (props.config.option) 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());
+			};
+			watch(() => props.model?.[props.name], () => {
+				initOption();
+			}, { immediate: true });
+		}
 		if (props.config.remote) {
 			const unWatch = watch(() => tMagicSelect.value?.scrollbarWrap, (scrollbarWrap) => {
 				if (!scrollbarWrap) return;

package/dist/es/fields/Text.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { useAddField } from "../utils/useAddField.js";
 import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, openBlock, readonly, ref, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
 import { debounce } from "lodash-es";
-import { isNumber } from "@tmagic/utils";
 import { TMagicButton, TMagicInput } from "@tmagic/design";
+import { isNumber } from "@tmagic/utils";
 import { createPopper } from "@popperjs/core";
 //#region packages/form/src/fields/Text.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-text" };

package/dist/es/fields/Timerange.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
-import { datetimeFormatter } from "../utils/form.js";
 import { useAddField } from "../utils/useAddField.js";
+import { datetimeFormatter } from "../utils/form.js";
 import { createBlock, defineComponent, onUnmounted, openBlock, ref, unref, watch } from "vue";
-import dayjs from "dayjs";
 import { TMagicTimePicker } from "@tmagic/design";
+import dayjs from "dayjs";
 //#region packages/form/src/fields/Timerange.vue?vue&type=script&setup=true&lang.ts
 var Timerange_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "MFormTimeRange",

package/dist/es/index.js

@@ -1,10 +1,11 @@
 import "./_virtual/_rolldown/runtime.js";
-import { createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
 import { useAddField } from "./utils/useAddField.js";
 import Hidden_default from "./fields/Hidden.js";
 import { deleteField, getField, registerField } from "./utils/config.js";
+import { createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
 import Container_default from "./containers/Container.js";
 import Form_default from "./Form.js";
+import { submitForm } from "./submitForm.js";
 import FormDialog_default from "./FormDialog.js";
 import FormDrawer_default from "./FormDrawer.js";
 import FormBox_default from "./FormBox.js";
@@ -37,4 +38,4 @@ import plugin_default from "./plugin.js";
 export * from "@tmagic/form-schema";
 var createForm = (config) => config;
 //#endregion
-export { Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, useAddField };
+export { Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, submitForm, useAddField };

package/dist/es/submitForm.js

@@ -0,0 +1,87 @@
+import Form_default from "./Form.js";
+import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
+//#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 = createApp(defineComponent({
+			name: "MFormSubmitWrapper",
+			setup() {
+				const formRef = ref(null);
+				const stop = watch(() => formRef.value?.initialized, async (initialized) => {
+					if (!initialized) return;
+					stop();
+					try {
+						await nextTick();
+						resolve(await formRef.value.submitForm(native));
+					} catch (err) {
+						reject(err);
+					} finally {
+						cleanup();
+					}
+				}, {
+					flush: "post",
+					immediate: true
+				});
+				return () => 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
+export { submitForm };

package/dist/es/utils/form.js

@@ -1,8 +1,8 @@
 import { readonly } from "vue";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
 import { cloneDeep } from "lodash-es";
 import { getValueByKeyPath } from "@tmagic/utils";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 //#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);