@tmagic/form 1.7.7 → 1.7.8-beta.2

package/dist/es/Form.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,234 @@
+import { initValue } from "./utils/form.js";
+import { getConfig } from "./utils/config.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";
+//#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",
+	__name: "Form",
+	props: {
+		config: { default: () => [] },
+		initValues: { default: () => ({}) },
+		lastValues: { default: () => ({}) },
+		isCompare: {
+			type: Boolean,
+			default: false
+		},
+		parentValues: { default: () => ({}) },
+		labelWidth: { default: "200px" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		height: { default: "auto" },
+		stepActive: { default: 1 },
+		size: {},
+		inline: {
+			type: Boolean,
+			default: false
+		},
+		labelPosition: { default: "right" },
+		keyProp: { default: "__key" },
+		popperClass: {},
+		preventSubmitDefault: { type: Boolean },
+		extendState: {}
+	},
+	emits: [
+		"change",
+		"error",
+		"field-input",
+		"field-change",
+		"update:stepActive"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const tMagicFormRef = useTemplateRef("tMagicForm");
+		const initialized = ref(false);
+		const values = ref({});
+		const lastValuesProcessed = ref({});
+		const fields = /* @__PURE__ */ new Map();
+		const requestFuc = getConfig("request");
+		const formState = reactive({
+			keyProp: props.keyProp,
+			popperClass: props.popperClass,
+			config: props.config,
+			initValues: props.initValues,
+			isCompare: props.isCompare,
+			lastValues: props.lastValues,
+			parentValues: props.parentValues,
+			values,
+			lastValuesProcessed,
+			$emit: emit,
+			fields,
+			setField: (prop, field) => fields.set(prop, field),
+			getField: (prop) => fields.get(prop),
+			deleteField: (prop) => fields.delete(prop),
+			$messageBox: tMagicMessageBox,
+			$message: tMagicMessage,
+			post: (options) => {
+				if (requestFuc) return requestFuc({
+					method: "POST",
+					...options
+				});
+			}
+		});
+		watchEffect(async () => {
+			formState.initValues = props.initValues;
+			formState.lastValues = props.lastValues;
+			formState.isCompare = props.isCompare;
+			formState.config = props.config;
+			formState.keyProp = props.keyProp;
+			formState.popperClass = props.popperClass;
+			formState.parentValues = props.parentValues;
+			if (typeof props.extendState === "function") {
+				const state = await props.extendState(formState) || {};
+				Object.entries(state).forEach(([key, value]) => {
+					formState[key] = value;
+				});
+			}
+		});
+		provide("mForm", formState);
+		const changeRecords = shallowRef([]);
+		watch([() => props.config, () => props.initValues], ([config], [preConfig]) => {
+			changeRecords.value = [];
+			if (!isEqual(toRaw(config), toRaw(preConfig))) initialized.value = false;
+			initValue(formState, {
+				initValues: props.initValues,
+				config: props.config
+			}).then((value) => {
+				values.value = value;
+				initialized.value = !props.isCompare;
+			});
+			if (props.isCompare) initValue(formState, {
+				initValues: props.lastValues,
+				config: props.config
+			}).then((value) => {
+				lastValuesProcessed.value = value;
+				initialized.value = true;
+			});
+		}, { immediate: true });
+		const changeHandler = (v, eventData) => {
+			if (eventData.changeRecords?.length) {
+				for (const record of eventData.changeRecords) if (record.propPath) {
+					const index = changeRecords.value.findIndex((item) => item.propPath === record.propPath);
+					if (index > -1) changeRecords.value[index] = record;
+					else changeRecords.value.push(record);
+					setValueByKeyPath(record.propPath, record.value, values.value);
+				}
+			}
+			emit("change", values.value, eventData);
+		};
+		const submitHandler = (e) => {
+			if (props.preventSubmitDefault) e.preventDefault();
+		};
+		/**
+		* 通过 name 从 config 中查找对应的 text
+		* @param name - 字段名，支持点分隔的路径格式，如 'a.b.c'
+		* @param config - 表单配置数组
+		* @returns 找到的 text 值，如果未找到则返回 undefined
+		*/
+		const getTextByName = (name, config = props.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);
+		};
+		__expose({
+			values,
+			lastValuesProcessed,
+			formState,
+			initialized,
+			changeRecords,
+			changeHandler,
+			resetForm: () => {
+				tMagicFormRef.value?.resetFields();
+				changeRecords.value = [];
+			},
+			submitForm: async (native) => {
+				try {
+					const result = await tMagicFormRef.value?.validate();
+					if (result !== true) throw result;
+					changeRecords.value = [];
+					return native ? values.value : cloneDeep(toRaw(values.value));
+				} catch (invalidFields) {
+					emit("error", invalidFields);
+					const error = [];
+					Object.entries(invalidFields).forEach(([prop, ValidateError]) => {
+						ValidateError.forEach(({ field, message }) => {
+							const name = field || prop;
+							const text = getTextByName(name, props.config) || name;
+							error.push(`${text} -> ${message}`);
+						});
+					});
+					throw new Error(error.join("<br>"));
+				}
+			},
+			getTextByName
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicForm), {
+				class: "m-form",
+				ref: "tMagicForm",
+				model: values.value,
+				"label-width": __props.labelWidth,
+				style: normalizeStyle(`height: ${__props.height}`),
+				inline: __props.inline,
+				"label-position": __props.labelPosition,
+				onSubmit: submitHandler
+			}, {
+				default: withCtx(() => [initialized.value && Array.isArray(__props.config) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.config, (item, index) => {
+					return openBlock(), createBlock(Container_default, {
+						disabled: __props.disabled,
+						key: item[__props.keyProp] ?? index,
+						config: item,
+						model: values.value,
+						"last-values": lastValuesProcessed.value,
+						"is-compare": __props.isCompare,
+						"label-width": item.labelWidth || __props.labelWidth,
+						"step-active": __props.stepActive,
+						size: __props.size,
+						onChange: changeHandler
+					}, null, 8, [
+						"disabled",
+						"config",
+						"model",
+						"last-values",
+						"is-compare",
+						"label-width",
+						"step-active",
+						"size"
+					]);
+				}), 128)) : createCommentVNode("v-if", true)]),
+				_: 1
+			}, 8, [
+				"model",
+				"label-width",
+				"style",
+				"inline",
+				"label-position"
+			]);
+		};
+	}
+});
+//#endregion
+export { Form_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/FormBox.js

@@ -0,0 +1,5 @@
+import FormBox_vue_vue_type_script_setup_true_lang_default from "./FormBox.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/FormBox.vue
+var FormBox_default = FormBox_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FormBox_default as default };

package/dist/es/FormBox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,117 @@
+import Form_default from "./Form.js";
+import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, watchEffect, withCtx } from "vue";
+import { TMagicButton, TMagicScrollbar } from "@tmagic/design";
+//#region packages/form/src/FormBox.vue?vue&type=script&setup=true&lang.ts
+var footerHeight = 60;
+var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormBox",
+	__name: "FormBox",
+	props: {
+		config: { default: () => [] },
+		values: { default: () => ({}) },
+		parentValues: {},
+		width: {},
+		height: {},
+		labelWidth: {},
+		disabled: { type: Boolean },
+		size: {},
+		confirmText: { default: "确定" },
+		inline: { type: Boolean },
+		labelPosition: {},
+		preventSubmitDefault: { type: Boolean }
+	},
+	emits: [
+		"change",
+		"submit",
+		"error"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const style = computed(() => {
+			const style = {};
+			if (typeof props.width === "number") style.width = `${props.width}px`;
+			if (typeof props.height === "number") style.height = `${props.height}px`;
+			return style;
+		});
+		const form = ref();
+		const saveFetch = ref(false);
+		const bodyHeight = ref(0);
+		watchEffect(() => {
+			if (!props.height) return;
+			bodyHeight.value = props.height - footerHeight;
+		});
+		const submitHandler = async () => {
+			try {
+				const changeRecords = form.value?.changeRecords;
+				emit("submit", await form.value?.submitForm(), { changeRecords });
+			} catch (e) {
+				emit("error", e);
+			}
+		};
+		const changeHandler = (value, eventData) => {
+			emit("change", value, eventData);
+		};
+		const show = () => {};
+		const hide = () => {};
+		__expose({
+			form,
+			saveFetch,
+			show,
+			hide
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "m-form-box",
+				style: normalizeStyle(style.value)
+			}, [createElementVNode("div", {
+				class: "m-box-body",
+				style: normalizeStyle(bodyHeight.value ? { height: `${bodyHeight.value}px` } : {})
+			}, [createVNode(unref(TMagicScrollbar), null, {
+				default: withCtx(() => [createVNode(Form_default, {
+					ref_key: "form",
+					ref: form,
+					size: __props.size,
+					disabled: __props.disabled,
+					config: __props.config,
+					"init-values": __props.values,
+					"parent-values": __props.parentValues,
+					"label-width": __props.labelWidth,
+					"label-position": __props.labelPosition,
+					inline: __props.inline,
+					"prevent-submit-default": __props.preventSubmitDefault,
+					onChange: changeHandler
+				}, null, 8, [
+					"size",
+					"disabled",
+					"config",
+					"init-values",
+					"parent-values",
+					"label-width",
+					"label-position",
+					"inline",
+					"prevent-submit-default"
+				]), renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			})], 4), createElementVNode("div", {
+				class: "dialog-footer",
+				style: normalizeStyle(`height: ${footerHeight}px`)
+			}, [createElementVNode("div", null, [renderSlot(_ctx.$slots, "left")]), createElementVNode("div", null, [renderSlot(_ctx.$slots, "footer", {}, () => [createVNode(unref(TMagicButton), {
+				type: "primary",
+				size: __props.size,
+				disabled: __props.disabled,
+				loading: saveFetch.value,
+				onClick: submitHandler
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(__props.confirmText), 1)]),
+				_: 1
+			}, 8, [
+				"size",
+				"disabled",
+				"loading"
+			])])])], 4)], 4);
+		};
+	}
+});
+//#endregion
+export { FormBox_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/FormDialog.js

@@ -0,0 +1,5 @@
+import FormDialog_vue_vue_type_script_setup_true_lang_default from "./FormDialog.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/FormDialog.vue
+var FormDialog_default = FormDialog_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FormDialog_default as default };

package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,222 @@
+import Form_default from "./Form.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from "@tmagic/design";
+//#region packages/form/src/FormDialog.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { style: { "min-height": "1px" } };
+var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormDialog",
+	__name: "FormDialog",
+	props: {
+		config: { default: () => [] },
+		values: { default: () => ({}) },
+		parentValues: {},
+		width: {},
+		labelWidth: {},
+		fullscreen: { type: Boolean },
+		disabled: { type: Boolean },
+		title: {},
+		inline: { type: Boolean },
+		labelPosition: {},
+		zIndex: {},
+		size: {},
+		confirmText: { default: "确定" },
+		preventSubmitDefault: { type: Boolean },
+		closeOnClickModal: {
+			type: Boolean,
+			default: false
+		},
+		closeOnPressEscape: {
+			type: Boolean,
+			default: false
+		},
+		destroyOnClose: {
+			type: Boolean,
+			default: false
+		},
+		showClose: {
+			type: Boolean,
+			default: true
+		},
+		showCancel: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"close",
+		"submit",
+		"error",
+		"change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const form = ref();
+		const dialogVisible = ref(false);
+		const saveFetch = ref(false);
+		const stepActive = ref(1);
+		const bodyHeight = ref(`${document.body.clientHeight - 194}px`);
+		const stepCount = computed(() => {
+			const { length } = props.config;
+			for (let index = 0; index < length; index++) if (props.config[index].type === "step") return props.config[index].items.length;
+			return 0;
+		});
+		const hasStep = computed(() => {
+			const { length } = props.config;
+			for (let index = 0; index < length; index++) if (props.config[index].type === "step") return true;
+			return false;
+		});
+		const closeHandler = () => {
+			stepActive.value = 1;
+			emit("close");
+		};
+		const save = async () => {
+			try {
+				const changeRecords = form.value?.changeRecords;
+				emit("submit", await form.value?.submitForm(), { changeRecords });
+			} catch (e) {
+				emit("error", e);
+			}
+		};
+		const preStep = () => {
+			stepActive.value -= 1;
+		};
+		const nextStep = () => {
+			stepActive.value += 1;
+		};
+		const changeHandler = (value, eventData) => {
+			emit("change", value, eventData);
+		};
+		const show = () => {
+			dialogVisible.value = true;
+		};
+		const hide = () => {
+			dialogVisible.value = false;
+		};
+		const cancel = () => {
+			hide();
+		};
+		__expose({
+			form,
+			saveFetch,
+			dialogVisible,
+			cancel,
+			save,
+			show,
+			hide
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicDialog), {
+				modelValue: dialogVisible.value,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => dialogVisible.value = $event),
+				class: "m-form-dialog",
+				top: "20px",
+				"append-to-body": "",
+				title: __props.title,
+				width: __props.width,
+				zIndex: __props.zIndex,
+				fullscreen: __props.fullscreen,
+				"close-on-click-modal": __props.closeOnClickModal,
+				"close-on-press-escape": __props.closeOnPressEscape,
+				"destroy-on-close": __props.destroyOnClose,
+				"show-close": __props.showClose,
+				onClose: closeHandler
+			}, {
+				footer: withCtx(() => [createVNode(unref(TMagicRow), { class: "dialog-footer" }, {
+					default: withCtx(() => [createVNode(unref(TMagicCol), {
+						span: 12,
+						style: { "text-align": "left" }
+					}, {
+						default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "left")])]),
+						_: 3
+					}), createVNode(unref(TMagicCol), { span: 12 }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "footer", {}, () => [
+							__props.showCancel ? (openBlock(), createBlock(unref(TMagicButton), {
+								key: 0,
+								onClick: cancel,
+								size: "small"
+							}, {
+								default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("取 消", -1)])]),
+								_: 1
+							})) : createCommentVNode("v-if", true),
+							hasStep.value && stepActive.value > 1 ? (openBlock(), createBlock(unref(TMagicButton), {
+								key: 1,
+								type: "info",
+								size: "small",
+								onClick: preStep
+							}, {
+								default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("上一步", -1)])]),
+								_: 1
+							})) : createCommentVNode("v-if", true),
+							hasStep.value && stepCount.value > stepActive.value ? (openBlock(), createBlock(unref(TMagicButton), {
+								key: 2,
+								type: "info",
+								size: "small",
+								onClick: nextStep
+							}, {
+								default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("下一步", -1)])]),
+								_: 1
+							})) : (openBlock(), createBlock(unref(TMagicButton), {
+								key: 3,
+								type: "primary",
+								size: "small",
+								disabled: __props.disabled,
+								loading: saveFetch.value,
+								onClick: save
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.confirmText), 1)]),
+								_: 1
+							}, 8, ["disabled", "loading"]))
+						])]),
+						_: 3
+					})]),
+					_: 3
+				})]),
+				default: withCtx(() => [dialogVisible.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "m-dialog-body",
+					style: normalizeStyle(`max-height: ${bodyHeight.value}; overflow-y: auto; overflow-x: hidden;`)
+				}, [createVNode(Form_default, {
+					modelValue: stepActive.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => stepActive.value = $event),
+					ref_key: "form",
+					ref: form,
+					size: __props.size,
+					disabled: __props.disabled,
+					config: __props.config,
+					"init-values": __props.values,
+					"parent-values": __props.parentValues,
+					"label-width": __props.labelWidth,
+					"label-position": __props.labelPosition,
+					inline: __props.inline,
+					"prevent-submit-default": __props.preventSubmitDefault,
+					onChange: changeHandler
+				}, null, 8, [
+					"modelValue",
+					"size",
+					"disabled",
+					"config",
+					"init-values",
+					"parent-values",
+					"label-width",
+					"label-position",
+					"inline",
+					"prevent-submit-default"
+				]), renderSlot(_ctx.$slots, "default")], 4)) : createCommentVNode("v-if", true)]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"title",
+				"width",
+				"zIndex",
+				"fullscreen",
+				"close-on-click-modal",
+				"close-on-press-escape",
+				"destroy-on-close",
+				"show-close"
+			]);
+		};
+	}
+});
+//#endregion
+export { FormDialog_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/FormDrawer.js

@@ -0,0 +1,5 @@
+import FormDrawer_vue_vue_type_script_setup_true_lang_default from "./FormDrawer.vue_vue_type_script_setup_true_lang.js";
+//#region packages/form/src/FormDrawer.vue
+var FormDrawer_default = FormDrawer_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FormDrawer_default as default };