@tmagic/form 1.7.7 → 1.7.8-beta.2

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

@@ -0,0 +1,215 @@
+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 { 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" };
+var _hoisted_2 = { key: 1 };
+var _hoisted_3 = { style: {
+	"display": "flex",
+	"justify-content": "flex-end"
+} };
+var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormText",
+	__name: "Text",
+	props: {
+		config: {},
+		model: {},
+		initValues: {},
+		values: {},
+		name: {},
+		prop: {},
+		disabled: { type: Boolean },
+		size: {},
+		lastValues: {},
+		isCompare: { type: Boolean }
+	},
+	emits: ["change", "input"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		useAddField(props.prop);
+		const mForm = inject("mForm");
+		const value = ref("");
+		watch(() => props.model[props.name], (v) => {
+			value.value = v;
+		}, { immediate: true });
+		const appendConfig = computed(() => {
+			if (typeof props.config.append === "string") return {
+				type: "text",
+				text: props.config.append,
+				handler: void 0
+			};
+			if (typeof props.config.append === "object") {
+				if (typeof props.config.append?.handler === "function") return {
+					type: "button",
+					text: props.config.append.text,
+					handler: props.config.append.handler
+				};
+				if (props.config.append) {
+					if (props.config.append.value === 0) return false;
+					return props.config.append;
+				}
+			}
+			return false;
+		});
+		const popoverVisible = ref(false);
+		const confirmTrimHandler = () => {
+			emit("change", props.model[props.name].trim() || "");
+			popoverVisible.value = false;
+		};
+		const checkWhiteSpace = debounce((value) => {
+			if (typeof value === "string" && !props.config.trim) popoverVisible.value = value.trim() !== value;
+		}, 300);
+		const changeHandler = (value) => {
+			emit("change", value);
+		};
+		const inputHandler = (v) => {
+			checkWhiteSpace(v);
+			emit("input", v);
+			mForm?.$emit("field-input", props.prop, v);
+		};
+		const buttonClickHandler = () => {
+			if (!appendConfig.value) return;
+			if (typeof appendConfig.value.handler === "function") {
+				const newChangeRecords = [];
+				const setModel = (key, value) => {
+					newChangeRecords.push({
+						propPath: props.prop.replace(`${props.name}`, key),
+						value
+					});
+				};
+				const setFormValue = (key, value) => {
+					newChangeRecords.push({
+						propPath: key,
+						value
+					});
+				};
+				appendConfig.value.handler(mForm, {
+					model: props.model,
+					values: mForm ? readonly(mForm.initValues) : null,
+					formValue: props.values || {},
+					setModel,
+					setFormValue
+				});
+				if (newChangeRecords.length > 0) emit("change", props.model[props.name], { changeRecords: newChangeRecords });
+			}
+		};
+		const keyUpHandler = ($event) => {
+			if (!props.model) return;
+			if (!props.name) return;
+			const arrowUp = $event.key === "ArrowUp";
+			const arrowDown = $event.key === "ArrowDown";
+			if (!arrowUp && !arrowDown) return;
+			const value = props.model[props.name];
+			let num;
+			let unit;
+			if (isNumber(value)) num = +value;
+			else value.replace(/^([0-9.]+)([a-z%]+)$/, ($0, $1, $2) => {
+				num = +$1;
+				unit = $2;
+			});
+			if (num === void 0) return;
+			const ctrl = navigator.platform.match("Mac") ? $event.metaKey : $event.ctrlKey;
+			const shift = $event.shiftKey;
+			const alt = $event.altKey;
+			if (arrowUp) if (ctrl) num += 100;
+			else if (alt) num = (num * 1e4 + 1e3) / 1e4;
+			else if (shift) num = num + 10;
+			else num += 1;
+			else if (arrowDown) if (ctrl) num -= 100;
+			else if (alt) num = (num * 1e4 - 1e3) / 1e4;
+			else if (shift) num -= 10;
+			else num -= 1;
+			props.model[props.name] = `${num}${unit || ""}`;
+			emit("change", props.model[props.name]);
+		};
+		const popoverEl = ref();
+		const input = ref();
+		const instanceRef = shallowRef();
+		watch(popoverEl, (el) => {
+			destroyPopover();
+			if (!input.value?.$el || !el) return;
+			instanceRef.value = createPopper(input.value.$el, el, {
+				placement: props.config.tooltip ? "top" : "bottom",
+				strategy: "absolute",
+				modifiers: [{
+					name: "offset",
+					options: { offset: [0, 10] }
+				}]
+			});
+		});
+		const destroyPopover = () => {
+			if (!instanceRef.value) return;
+			instanceRef.value.destroy();
+			instanceRef.value = void 0;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(TMagicInput), {
+				modelValue: value.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+				ref_key: "input",
+				ref: input,
+				clearable: __props.config.clearable ?? true,
+				size: __props.size,
+				placeholder: __props.config.placeholder,
+				disabled: __props.disabled,
+				onChange: changeHandler,
+				onInput: inputHandler,
+				onKeyup: _cache[1] || (_cache[1] = ($event) => keyUpHandler($event))
+			}, createSlots({ _: 2 }, [__props.config.prepend ? {
+				name: "prepend",
+				fn: withCtx(() => [createElementVNode("span", null, toDisplayString(__props.config.prepend), 1)]),
+				key: "0"
+			} : void 0, appendConfig.value ? {
+				name: "append",
+				fn: withCtx(() => [appendConfig.value.type === "button" ? (openBlock(), createBlock(unref(TMagicButton), {
+					key: 0,
+					style: { "color": "#409eff" },
+					size: __props.size,
+					onClick: withModifiers(buttonClickHandler, ["prevent"])
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(appendConfig.value.text), 1)]),
+					_: 1
+				}, 8, ["size"])) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(appendConfig.value.text), 1))]),
+				key: "1"
+			} : void 0]), 1032, [
+				"modelValue",
+				"clearable",
+				"size",
+				"placeholder",
+				"disabled"
+			]), (openBlock(), createBlock(Teleport, { to: "body" }, [popoverVisible.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "tmagic-form-text-popper m-form-item__content",
+				ref_key: "popoverEl",
+				ref: popoverEl
+			}, [
+				_cache[5] || (_cache[5] = createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格，是否移除空格？", -1)),
+				createElementVNode("div", _hoisted_3, [createVNode(unref(TMagicButton), {
+					link: "",
+					size: "small",
+					onClick: _cache[2] || (_cache[2] = ($event) => popoverVisible.value = false)
+				}, {
+					default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("保持原样", -1)])]),
+					_: 1
+				}), createVNode(unref(TMagicButton), {
+					type: "primary",
+					size: "small",
+					onClick: confirmTrimHandler
+				}, {
+					default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("移除空格", -1)])]),
+					_: 1
+				})]),
+				_cache[6] || (_cache[6] = createElementVNode("span", {
+					class: "tmagic-form-text-popper-arrow",
+					"data-popper-arrow": ""
+				}, null, -1))
+			], 512)) : createCommentVNode("v-if", true)]))]);
+		};
+	}
+});
+//#endregion
+export { Text_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Textarea.js

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

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

@@ -0,0 +1,60 @@
+import { useAddField } from "../utils/useAddField.js";
+import { createBlock, defineComponent, inject, openBlock, ref, unref, watch } from "vue";
+import { TMagicInput } from "@tmagic/design";
+//#region packages/form/src/fields/Textarea.vue?vue&type=script&setup=true&lang.ts
+var Textarea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormTextarea",
+	__name: "Textarea",
+	props: {
+		config: {},
+		model: {},
+		initValues: {},
+		values: {},
+		name: {},
+		prop: {},
+		disabled: { type: Boolean },
+		size: {},
+		lastValues: {},
+		isCompare: { type: Boolean }
+	},
+	emits: ["change", "input"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const value = ref("");
+		watch(() => props.model[props.name], (v) => {
+			value.value = v;
+		}, { immediate: true });
+		useAddField(props.prop);
+		const mForm = inject("mForm");
+		const changeHandler = (value) => {
+			emit("change", value);
+		};
+		const inputHandler = (v) => {
+			emit("input", v);
+			mForm?.$emit("field-input", props.prop, v);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicInput), {
+				modelValue: value.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+				type: "textarea",
+				size: __props.size,
+				clearable: "",
+				placeholder: __props.config.placeholder,
+				disabled: __props.disabled,
+				rows: __props.config.rows,
+				onChange: changeHandler,
+				onInput: inputHandler
+			}, null, 8, [
+				"modelValue",
+				"size",
+				"placeholder",
+				"disabled",
+				"rows"
+			]);
+		};
+	}
+});
+//#endregion
+export { Textarea_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Time.js

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

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

@@ -0,0 +1,49 @@
+import { useAddField } from "../utils/useAddField.js";
+import { createBlock, defineComponent, openBlock, unref } from "vue";
+import { TMagicTimePicker } from "@tmagic/design";
+//#region packages/form/src/fields/Time.vue?vue&type=script&setup=true&lang.ts
+var Time_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormTime",
+	__name: "Time",
+	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 = (v) => {
+			emit("change", v);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicTimePicker), {
+				"model-value": __props.model[__props.name],
+				"value-format": __props.config.valueFormat || "HH:mm:ss",
+				format: __props.config.format || "HH:mm:ss",
+				size: __props.size,
+				placeholder: __props.config.placeholder,
+				disabled: __props.disabled,
+				"onUpdate:modelValue": changeHandler
+			}, null, 8, [
+				"model-value",
+				"value-format",
+				"format",
+				"size",
+				"placeholder",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { Time_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Timerange.js

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

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

@@ -0,0 +1,100 @@
+import { datetimeFormatter } from "../utils/form.js";
+import { useAddField } from "../utils/useAddField.js";
+import { createBlock, defineComponent, onUnmounted, openBlock, ref, unref, watch } from "vue";
+import dayjs from "dayjs";
+import { TMagicTimePicker } from "@tmagic/design";
+//#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",
+	__name: "Timerange",
+	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 { names } = props.config;
+		const value = ref([]);
+		const getFullDatetime = (item) => item ? `${dayjs().format("YYYY/MM/DD")} ${item}` : "";
+		const getFormat = () => `YYYY/MM/DD ${props.config.valueFormat || "HH:mm:ss"}`;
+		const timeFormatter = (time, format) => datetimeFormatter(getFullDatetime(time), "", format).substring(11);
+		if (props.model !== void 0) {
+			if (names?.length) {
+				const unWatch = watch([() => props.model[names[0]], () => props.model[names[1]]], ([start, end], [preStart, preEnd]) => {
+					if (!value.value) value.value = [];
+					const format = getFormat();
+					if (!start || !end) value.value = [];
+					if (start !== preStart) value.value[0] = timeFormatter(start, format);
+					if (end !== preEnd) value.value[1] = timeFormatter(end, format);
+				}, { immediate: true });
+				onUnmounted(() => {
+					unWatch();
+				});
+			} else if (props.name) {
+				const unWatch = watch(() => props.model[props.name], (v = []) => {
+					if (Array.isArray(v)) value.value = v.map((item) => item ? timeFormatter(item, getFormat()) : void 0);
+					else value.value = [];
+				}, { immediate: true });
+				onUnmounted(() => {
+					unWatch();
+				});
+			}
+		}
+		const changeHandler = (v) => {
+			const value = v || [];
+			if (props.name) emit("change", value);
+			else if (props.config.names?.length) {
+				const newChangeRecords = [];
+				props.config.names.forEach((item, index) => {
+					if (!props.model) return;
+					if (Array.isArray(v)) newChangeRecords.push({
+						propPath: props.prop ? `${props.prop}.${item}` : item,
+						value: v[index]
+					});
+					else newChangeRecords.push({
+						propPath: props.prop ? `${props.prop}.${item}` : item,
+						value: void 0
+					});
+				});
+				emit("change", props.model, { changeRecords: newChangeRecords });
+			}
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicTimePicker), {
+				modelValue: value.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+				"is-range": "",
+				"range-separator": "-",
+				"start-placeholder": "开始时间",
+				"end-placeholder": "结束时间",
+				size: __props.size,
+				"unlink-panels": true,
+				disabled: __props.disabled,
+				"default-time": __props.config.defaultTime,
+				format: __props.config.format || "HH:mm:ss",
+				"value-format": __props.config.valueFormat || "HH:mm:ss",
+				onChange: changeHandler
+			}, null, 8, [
+				"modelValue",
+				"size",
+				"disabled",
+				"default-time",
+				"format",
+				"value-format"
+			]);
+		};
+	}
+});
+//#endregion
+export { Timerange_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/index.js

@@ -0,0 +1,41 @@
+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 Container_default from "./containers/Container.js";
+import Form_default from "./Form.js";
+import FormDialog_default from "./FormDialog.js";
+import FormDrawer_default from "./FormDrawer.js";
+import FormBox_default from "./FormBox.js";
+import Fieldset_default from "./containers/Fieldset.js";
+import FlexLayout_default from "./containers/FlexLayout.js";
+import Panel_default from "./containers/Panel.js";
+import Row_default from "./containers/Row.js";
+import Tabs_default from "./containers/Tabs.js";
+import Table_default from "./table/Table.js";
+import GroupList_default from "./containers/GroupList.js";
+import Text_default from "./fields/Text.js";
+import Number_default from "./fields/Number.js";
+import NumberRange_default from "./fields/NumberRange.js";
+import Textarea_default from "./fields/Textarea.js";
+import Date_default from "./fields/Date.js";
+import DateTime_default from "./fields/DateTime.js";
+import Time_default from "./fields/Time.js";
+import Checkbox_default from "./fields/Checkbox.js";
+import Switch_default from "./fields/Switch.js";
+import Daterange_default from "./fields/Daterange.js";
+import Timerange_default from "./fields/Timerange.js";
+import ColorPicker_default from "./fields/ColorPicker.js";
+import CheckboxGroup_default from "./fields/CheckboxGroup.js";
+import RadioGroup_default from "./fields/RadioGroup.js";
+import Display_default from "./fields/Display.js";
+import Link_default from "./fields/Link.js";
+import Select_default from "./fields/Select.js";
+import Cascader_default from "./fields/Cascader.js";
+import DynamicField_default from "./fields/DynamicField.js";
+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, GroupList_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, Table_default as MTable, 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 };

package/dist/es/plugin.js

@@ -0,0 +1,74 @@
+import Hidden_default from "./fields/Hidden.js";
+import { setConfig } from "./utils/config.js";
+import Container_default from "./containers/Container.js";
+import Form_default from "./Form.js";
+import FormDialog_default from "./FormDialog.js";
+import Fieldset_default from "./containers/Fieldset.js";
+import FlexLayout_default from "./containers/FlexLayout.js";
+import Panel_default from "./containers/Panel.js";
+import Row_default from "./containers/Row.js";
+import Tabs_default from "./containers/Tabs.js";
+import Table_default from "./table/Table.js";
+import GroupList_default from "./containers/GroupList.js";
+import Text_default from "./fields/Text.js";
+import Number_default from "./fields/Number.js";
+import NumberRange_default from "./fields/NumberRange.js";
+import Textarea_default from "./fields/Textarea.js";
+import Date_default from "./fields/Date.js";
+import DateTime_default from "./fields/DateTime.js";
+import Time_default from "./fields/Time.js";
+import Checkbox_default from "./fields/Checkbox.js";
+import Switch_default from "./fields/Switch.js";
+import Daterange_default from "./fields/Daterange.js";
+import Timerange_default from "./fields/Timerange.js";
+import ColorPicker_default from "./fields/ColorPicker.js";
+import CheckboxGroup_default from "./fields/CheckboxGroup.js";
+import RadioGroup_default from "./fields/RadioGroup.js";
+import Display_default from "./fields/Display.js";
+import Link_default from "./fields/Link.js";
+import Select_default from "./fields/Select.js";
+import Cascader_default from "./fields/Cascader.js";
+import DynamicField_default from "./fields/DynamicField.js";
+import Step_default from "./containers/Step.js";
+/* empty css            */
+//#region packages/form/src/plugin.ts
+var defaultInstallOpt = {};
+var plugin_default = { install(app, opt = {}) {
+	const option = Object.assign(defaultInstallOpt, opt);
+	app.config.globalProperties.$MAGIC_FORM = option;
+	setConfig(option);
+	app.component("m-form", Form_default);
+	app.component("m-form-dialog", FormDialog_default);
+	app.component("m-form-container", Container_default);
+	app.component("m-form-fieldset", Fieldset_default);
+	app.component("m-form-group-list", GroupList_default);
+	app.component("m-form-panel", Panel_default);
+	app.component("m-form-row", Row_default);
+	app.component("m-form-step", Step_default);
+	app.component("m-form-table", Table_default);
+	app.component("m-form-tab", Tabs_default);
+	app.component("m-form-flex-layout", FlexLayout_default);
+	app.component("m-fields-text", Text_default);
+	app.component("m-fields-img-upload", Text_default);
+	app.component("m-fields-number", Number_default);
+	app.component("m-fields-number-range", NumberRange_default);
+	app.component("m-fields-textarea", Textarea_default);
+	app.component("m-fields-hidden", Hidden_default);
+	app.component("m-fields-date", Date_default);
+	app.component("m-fields-datetime", DateTime_default);
+	app.component("m-fields-daterange", Daterange_default);
+	app.component("m-fields-timerange", Timerange_default);
+	app.component("m-fields-time", Time_default);
+	app.component("m-fields-checkbox", Checkbox_default);
+	app.component("m-fields-switch", Switch_default);
+	app.component("m-fields-color-picker", ColorPicker_default);
+	app.component("m-fields-checkbox-group", CheckboxGroup_default);
+	app.component("m-fields-radio-group", RadioGroup_default);
+	app.component("m-fields-display", Display_default);
+	app.component("m-fields-link", Link_default);
+	app.component("m-fields-select", Select_default);
+	app.component("m-fields-cascader", Cascader_default);
+	app.component("m-fields-dynamic-field", DynamicField_default);
+} };
+//#endregion
+export { plugin_default as default };

package/dist/es/schema.js

@@ -0,0 +1,2 @@
+import "./_virtual/_rolldown/runtime.js";
+export * from "@tmagic/form-schema";