@tmagic/form 1.7.7 → 1.7.8-beta.1

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

@@ -0,0 +1,74 @@
+import { useAddField } from "../utils/useAddField.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { TMagicIcon, TMagicRadio, TMagicRadioButton, TMagicRadioGroup, TMagicTooltip } from "@tmagic/design";
+//#region packages/form/src/fields/RadioGroup.vue?vue&type=script&setup=true&lang.ts
+var RadioGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormRadioGroup",
+	__name: "RadioGroup",
+	props: {
+		config: {},
+		model: {},
+		initValues: {},
+		values: {},
+		name: {},
+		prop: {},
+		disabled: { type: Boolean },
+		size: {},
+		lastValues: {},
+		isCompare: { type: Boolean }
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const itemComponent = computed(() => props.config.childType === "button" ? TMagicRadioButton : TMagicRadio);
+		const emit = __emit;
+		const clickHandler = (item) => {
+			emit("change", props.model[props.name] === item ? "" : item);
+		};
+		useAddField(props.prop);
+		const iconSize = computed(() => {
+			if (props.size === "small") return "12";
+			if (props.size === "large") return "16";
+			return "14";
+		});
+		return (_ctx, _cache) => {
+			return __props.model ? (openBlock(), createBlock(unref(TMagicRadioGroup), {
+				key: 0,
+				"model-value": __props.model[__props.name],
+				size: __props.size,
+				disabled: __props.disabled
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.options, (option) => {
+					return openBlock(), createBlock(resolveDynamicComponent(itemComponent.value), {
+						value: option.value,
+						key: `${option.value}`,
+						onClick: ($event) => clickHandler(option.value)
+					}, {
+						default: withCtx(() => [createVNode(unref(TMagicTooltip), {
+							disabled: !Boolean(option.tooltip),
+							placement: "top-start",
+							content: option.tooltip
+						}, {
+							default: withCtx(() => [createElementVNode("div", null, [option.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
+								key: 0,
+								size: iconSize.value
+							}, {
+								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(option.icon)))]),
+								_: 2
+							}, 1032, ["size"])) : createCommentVNode("v-if", true), createElementVNode("span", null, toDisplayString(option.text), 1)])]),
+							_: 2
+						}, 1032, ["disabled", "content"])]),
+						_: 2
+					}, 1032, ["value", "onClick"]);
+				}), 128))]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"size",
+				"disabled"
+			])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { RadioGroup_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Select.js

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

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

@@ -0,0 +1,337 @@
+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 { TMagicSelect, getDesignConfig } from "@tmagic/design";
+//#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({
+	name: "MFormSelect",
+	__name: "Select",
+	props: {
+		config: {},
+		model: {},
+		initValues: {},
+		values: {},
+		name: {},
+		prop: {},
+		disabled: { type: Boolean },
+		size: {},
+		lastValues: {},
+		isCompare: { type: Boolean }
+	},
+	emits: ["change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const optionComponent = getDesignConfig("components")?.option;
+		const optionGroupComponent = getDesignConfig("components")?.optionGroup;
+		if (!props.model) throw new Error("不能没有model");
+		useAddField(props.prop);
+		const tMagicSelect = ref();
+		const mForm = inject("mForm");
+		const options = ref([]);
+		const localOptions = ref([]);
+		const loading = ref(false);
+		const moreLoadingVisible = ref(false);
+		const total = ref(0);
+		const pgIndex = ref(0);
+		const pgSize = ref(20);
+		const query = ref("");
+		const remoteData = ref([]);
+		const remote = ref(true);
+		const equalValue = (value, v) => {
+			if (typeof v === "object") {
+				const key = props.config.valueKey || "value";
+				return v[key] === value[key];
+			}
+			return value === v;
+		};
+		const mapOptions = (data) => {
+			const { option = {
+				text: "text",
+				value: "value"
+			} } = props.config;
+			const { text = "text", value = "value" } = option;
+			return data.map((item) => ({
+				text: typeof text === "function" ? text(item) : item[text],
+				value: typeof value === "function" ? value(item) : item[value]
+			}));
+		};
+		const getOptions = async () => {
+			if (!props.model) return [];
+			if (localOptions.value.length) return localOptions.value;
+			loading.value = true;
+			let items = [];
+			const { option } = props.config;
+			if (!option) return [];
+			const { root = "", totalKey = "total" } = option;
+			let { body = {}, url } = option;
+			if (typeof url === "function") url = await url(mForm, {
+				model: props.model,
+				formValue: mForm?.values
+			});
+			let postOptions = {
+				method: option.method || "POST",
+				url,
+				cache: option.cache,
+				timeout: option.timeout,
+				mode: option.mode,
+				headers: option.headers || {},
+				json: option.json || false
+			};
+			if (typeof body === "function") body = body(mForm, {
+				model: props.model,
+				formValue: mForm?.values,
+				formValues: mForm?.values,
+				config: props.config
+			});
+			body.query = query.value;
+			body.pgSize = pgSize.value;
+			body.pgIndex = pgIndex.value;
+			postOptions.data = body;
+			const requestFuc = getConfig("request");
+			if (typeof option.beforeRequest === "function") postOptions = await option.beforeRequest(mForm, postOptions, {
+				model: props.model,
+				formValue: mForm?.values,
+				formValues: mForm?.values,
+				prop: props.prop,
+				config: props.config
+			});
+			if (option.method?.toLocaleLowerCase() === "jsonp") postOptions.jsonpCallback = option.jsonpCallback || "callback";
+			let res = await requestFuc(postOptions);
+			if (typeof option.afterRequest === "function") res = await option.afterRequest(mForm, res, {
+				model: props.model,
+				formValue: mForm?.values,
+				formValues: mForm?.values,
+				config: props.config,
+				prop: props.prop,
+				postOptions
+			});
+			const optionsData = getValueByKeyPath(root, res);
+			const resTotal = globalThis.parseInt(getValueByKeyPath(totalKey, res), 10);
+			if (resTotal > 0) total.value = resTotal;
+			remoteData.value = remoteData.value.concat(optionsData);
+			if (optionsData) {
+				if (typeof option.item === "function") items = option.item(optionsData);
+				else if (optionsData.map) items = mapOptions(optionsData);
+			}
+			loading.value = false;
+			const selectedOptions = [];
+			if (props.config.multiple && props.model[props.name]) options.value.forEach((o) => {
+				if (props.model?.[props.name].includes(o.value) && !items.find((op) => op.value === o.value)) selectedOptions.push(o);
+			});
+			return pgIndex.value === 0 ? selectedOptions.concat(items) : options.value.concat(items);
+		};
+		const getInitLocalOption = async () => {
+			if (!props.model) return [];
+			const value = props.model[props.name];
+			const { config } = props;
+			localOptions.value = await getOptions();
+			remote.value = false;
+			if (config.group) {
+				if (config.multiple && value.findIndex) return localOptions.value.filter((group) => group.options.findIndex((item) => value.find((v) => equalValue(item.value, v)) > -1) > -1);
+				return localOptions.value.filter((group) => group.options.findIndex((item) => equalValue(item.value, value)) > -1);
+			}
+			if (config.multiple && value.findIndex) return localOptions.value.filter((item) => value.findIndex((v) => equalValue(item.value, v)) > -1);
+			return localOptions.value.filter((item) => equalValue(item.value, value));
+		};
+		const getInitOption = async () => {
+			if (!props.model) return [];
+			const { option } = props.config;
+			if (!option) return [];
+			const { root = "", initRoot = "" } = option;
+			let { initBody = {} } = option;
+			let options = [];
+			let url = option.initUrl;
+			if (!url) return getInitLocalOption();
+			if (typeof url === "function") url = await url(mForm, {
+				model: props.model,
+				formValue: mForm?.values
+			});
+			if (typeof initBody === "function") initBody = initBody(mForm, {
+				model: props.model,
+				formValue: mForm?.values,
+				formValues: mForm?.values,
+				config: props.config
+			});
+			let postOptions = {
+				method: option.method || "POST",
+				url,
+				data: {
+					id: props.model[props.name],
+					...initBody
+				},
+				mode: option.mode,
+				headers: option.headers || {},
+				json: option.json || false
+			};
+			if (typeof option.beforeInitRequest === "function") postOptions = await option.beforeInitRequest(mForm, postOptions, {
+				model: props.model,
+				formValue: mForm?.values,
+				formValues: mForm?.values,
+				config: props.config,
+				prop: props.prop
+			});
+			if (option.method?.toLocaleLowerCase() === "jsonp") postOptions.jsonpCallback = option.jsonpCallback || "callback";
+			let res = await getConfig("request")(postOptions);
+			if (typeof option.afterRequest === "function") res = await option.afterRequest(mForm, res, {
+				model: props.model,
+				formValue: mForm?.values,
+				formValues: mForm?.values,
+				config: props.config,
+				prop: props.prop,
+				postOptions
+			});
+			let initData = getValueByKeyPath(initRoot || root, res);
+			if (initData) {
+				if (!Array.isArray(initData)) initData = [initData];
+				if (typeof option.item === "function") options = option.item(initData);
+				else if (initData.map) options = mapOptions(initData);
+			}
+			return options;
+		};
+		const setOptions = (data) => {
+			options.value = data;
+		};
+		if (typeof props.config.options === "function") watchEffect(() => {
+			typeof props.config.options === "function" && Promise.resolve(props.config.options(mForm, {
+				model: props.model,
+				prop: props.prop,
+				formValues: mForm?.values,
+				formValue: mForm?.values,
+				config: props.config
+			})).then((data) => {
+				setOptions(data);
+			});
+		});
+		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);
+			});
+		});
+		if (props.config.remote) {
+			const unWatch = watch(() => tMagicSelect.value?.scrollbarWrap, (scrollbarWrap) => {
+				if (!scrollbarWrap) return;
+				nextTick(() => unWatch());
+				scrollbarWrap.addEventListener("scroll", async (e) => {
+					const el = e.currentTarget;
+					if (moreLoadingVisible.value) return;
+					if (el.scrollHeight - el.clientHeight - el.scrollTop > 1) return;
+					if (total.value <= options.value.length) return;
+					moreLoadingVisible.value = true;
+					pgIndex.value += 1;
+					setOptions(await getOptions());
+					moreLoadingVisible.value = false;
+				});
+			}, { immediate: true });
+		}
+		const popperClass = mForm?.popperClass;
+		const changeHandler = (value) => {
+			emit("change", value);
+		};
+		const visibleHandler = async (visible) => {
+			if (!visible) return;
+			if (!props.config.remote) return;
+			if (query.value && tMagicSelect.value) {
+				tMagicSelect.value.setQuery(query.value);
+				tMagicSelect.value.setPreviousQuery(query.value);
+				tMagicSelect.value.setSelectedLabel(query.value);
+			} else if (options.value.length <= (props.config.multiple ? props.model?.[props.name].length : 1)) setOptions(await getOptions());
+		};
+		const remoteMethod = async (q) => {
+			if (!localOptions.value.length) {
+				query.value = q;
+				pgIndex.value = 0;
+				setOptions(await getOptions());
+				if (props.config.multiple) setTimeout(() => {
+					tMagicSelect.value?.setSelected();
+				}, 0);
+			}
+		};
+		__expose({
+			options,
+			setOptions
+		});
+		return (_ctx, _cache) => {
+			const _directive_loading = resolveDirective("loading");
+			return __props.model ? withDirectives((openBlock(), createBlock(unref(TMagicSelect), {
+				key: 0,
+				"model-value": __props.model[__props.name],
+				class: "m-select",
+				ref_key: "tMagicSelect",
+				ref: tMagicSelect,
+				clearable: typeof __props.config.clearable !== "undefined" ? __props.config.clearable : true,
+				filterable: typeof __props.config.filterable !== "undefined" ? __props.config.filterable : true,
+				"popper-class": `m-select-popper ${unref(popperClass)}`,
+				size: __props.size,
+				remote: remote.value,
+				placeholder: __props.config.placeholder,
+				multiple: __props.config.multiple,
+				"value-key": __props.config.valueKey || "value",
+				"allow-create": __props.config.allowCreate,
+				disabled: __props.disabled,
+				"remote-method": __props.config.remote && remoteMethod,
+				"onUpdate:modelValue": changeHandler,
+				onVisibleChange: visibleHandler
+			}, {
+				default: withCtx(() => [__props.config.group ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(options.value, (group, index) => {
+					return openBlock(), createBlock(resolveDynamicComponent(unref(optionGroupComponent)?.component || "el-option-group"), mergeProps({ key: index }, { ref_for: true }, unref(optionGroupComponent)?.props({
+						label: group.label,
+						disabled: group.disabled
+					}) || {
+						label: group.label,
+						disabled: group.disabled
+					}), {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(group.options, (item, index) => {
+							return openBlock(), createBlock(resolveDynamicComponent(unref(optionComponent)?.component || "el-option"), mergeProps({ key: index }, { ref_for: true }, unref(optionComponent)?.props({
+								label: item.label || item.text,
+								value: item.value,
+								disabled: item.disabled
+							}) || {
+								label: item.label || item.text,
+								value: item.value,
+								disabled: item.disabled
+							}), null, 16);
+						}), 128))]),
+						_: 2
+					}, 1040);
+				}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(options.value, (option) => {
+					return openBlock(), createBlock(resolveDynamicComponent(unref(optionComponent)?.component || "el-option"), mergeProps({
+						class: "tmagic-design-option",
+						key: __props.config.valueKey ? option.value[__props.config.valueKey] : option.value
+					}, { ref_for: true }, unref(optionComponent)?.props({
+						label: option.text,
+						value: option.value,
+						disabled: option.disabled
+					}) || {
+						label: option.text,
+						value: option.value,
+						disabled: option.disabled
+					}), null, 16);
+				}), 128)), moreLoadingVisible.value ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1, null, 512)), [[_directive_loading, true]]) : createCommentVNode("v-if", true)]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"clearable",
+				"filterable",
+				"popper-class",
+				"size",
+				"remote",
+				"placeholder",
+				"multiple",
+				"value-key",
+				"allow-create",
+				"disabled",
+				"remote-method"
+			])), [[_directive_loading, loading.value]]) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { Select_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Switch.js

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

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

@@ -0,0 +1,59 @@
+import { useAddField } from "../utils/useAddField.js";
+import { computed, createBlock, defineComponent, openBlock, unref } from "vue";
+import { TMagicSwitch } from "@tmagic/design";
+//#region packages/form/src/fields/Switch.vue?vue&type=script&setup=true&lang.ts
+var Switch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormSwitch",
+	__name: "Switch",
+	props: {
+		config: {},
+		model: {},
+		initValues: {},
+		values: {},
+		name: {},
+		prop: {},
+		disabled: { type: Boolean },
+		size: {},
+		lastValues: {},
+		isCompare: { type: Boolean }
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		useAddField(props.prop);
+		const changeHandler = (value) => {
+			emit("change", value);
+		};
+		const activeValue = computed(() => {
+			if (typeof props.config.activeValue === "undefined") {
+				if (props.config.filter === "number") return 1;
+			} else return props.config.activeValue;
+			return true;
+		});
+		const inactiveValue = computed(() => {
+			if (typeof props.config.inactiveValue === "undefined") {
+				if (props.config.filter === "number") return 0;
+			} else return props.config.inactiveValue;
+			return false;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicSwitch), {
+				"model-value": __props.model[__props.name],
+				size: __props.size,
+				activeValue: activeValue.value,
+				inactiveValue: inactiveValue.value,
+				disabled: __props.disabled,
+				"onUpdate:modelValue": changeHandler
+			}, null, 8, [
+				"model-value",
+				"size",
+				"activeValue",
+				"inactiveValue",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { Switch_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Text.js

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