@tmagic/form 1.7.7 → 1.7.8-beta.1

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

@@ -0,0 +1,85 @@
+import Container_default from "./Container.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, openBlock, ref, renderList, unref, vShow, watchEffect, withCtx, withDirectives } from "vue";
+import { TMagicStep, TMagicSteps } from "@tmagic/design";
+//#region packages/form/src/containers/Step.vue?vue&type=script&setup=true&lang.ts
+var Step_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormStep",
+	__name: "Step",
+	props: {
+		model: {},
+		name: {},
+		lastValues: {},
+		isCompare: { type: Boolean },
+		config: {},
+		stepActive: { default: 1 },
+		labelWidth: {},
+		size: {},
+		disabled: { type: Boolean }
+	},
+	emits: ["change", "addDiffCount"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const mForm = inject("mForm");
+		const active = ref(1);
+		watchEffect(() => {
+			active.value = props.stepActive;
+		});
+		const stepClick = (index) => {
+			active.value = index + 1;
+			mForm?.$emit("update:stepActive", active.value);
+		};
+		const changeHandler = (v, eventData) => {
+			emit("change", props.model, eventData);
+		};
+		const onAddDiffCount = () => emit("addDiffCount");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [createVNode(unref(TMagicSteps), {
+				active: active.value,
+				"align-center": "",
+				space: __props.config.space
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.items, (item, index) => {
+					return openBlock(), createBlock(unref(TMagicStep), {
+						key: item.__key,
+						title: item.title,
+						active: active.value,
+						onClick: ($event) => stepClick(index)
+					}, null, 8, [
+						"title",
+						"active",
+						"onClick"
+					]);
+				}), 128))]),
+				_: 1
+			}, 8, ["active", "space"]), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.items, (step, index) => {
+				return openBlock(), createElementBlock(Fragment, null, [(openBlock(true), createElementBlock(Fragment, null, renderList(step.items, (item) => {
+					return openBlock(), createElementBlock(Fragment, null, [item ? withDirectives((openBlock(), createBlock(Container_default, {
+						key: item[unref(mForm)?.keyProp || "__key"],
+						config: item,
+						model: step.name ? __props.model[step.name] : __props.model,
+						lastValues: step.name ? __props.lastValues[step.name] : __props.lastValues,
+						"is-compare": __props.isCompare,
+						prop: `${step.name}`,
+						size: __props.size,
+						disabled: __props.disabled,
+						"label-width": __props.config.labelWidth || __props.labelWidth,
+						onChange: changeHandler,
+						onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
+					}, null, 8, [
+						"config",
+						"model",
+						"lastValues",
+						"is-compare",
+						"prop",
+						"size",
+						"disabled",
+						"label-width"
+					])), [[vShow, active.value - 1 === index]]) : createCommentVNode("v-if", true)], 64);
+				}), 256))], 64);
+			}), 256))]);
+		};
+	}
+});
+//#endregion
+export { Step_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/containers/Tabs.js

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

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

@@ -0,0 +1,194 @@
+import { display, filterFunction, initValue } from "../utils/form.js";
+import Container_default from "./Container.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeProps, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, watchEffect, withCtx } from "vue";
+import { isEmpty } from "lodash-es";
+import { TMagicBadge, getDesignConfig } from "@tmagic/design";
+//#region packages/form/src/containers/Tabs.vue?vue&type=script&setup=true&lang.ts
+var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormTabs",
+	__name: "Tabs",
+	props: {
+		model: {},
+		lastValues: { default: () => ({}) },
+		isCompare: {
+			type: Boolean,
+			default: false
+		},
+		config: {},
+		name: {},
+		size: {},
+		labelWidth: {},
+		prop: { default: "" },
+		expandMore: { type: Boolean },
+		disabled: { type: Boolean }
+	},
+	emits: ["change", "addDiffCount"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const tabPaneComponent = getDesignConfig("components")?.tabPane;
+		const tabsComponent = getDesignConfig("components")?.tabs;
+		const getActive = (mForm, props, activeTabName) => {
+			const { config, model, prop } = props;
+			const { active } = config;
+			if (typeof active === "function") return active(mForm, {
+				model,
+				formValue: mForm?.values,
+				prop
+			});
+			if (+activeTabName >= props.config.items.length) return "0";
+			if (typeof active !== "undefined") return active;
+			return "0";
+		};
+		const tabClick = (mForm, tab, props) => {
+			const { config, model, prop } = props;
+			tab.name = tab.paneName;
+			if (typeof config.onTabClick === "function") config.onTabClick(mForm, tab, {
+				model,
+				formValue: mForm?.values,
+				prop,
+				config
+			});
+			const tabConfig = config.items.find((item) => tab.name === item.status);
+			if (tabConfig && typeof tabConfig.onTabClick === "function") tabConfig.onTabClick(mForm, tab, {
+				model,
+				formValue: mForm?.values,
+				prop,
+				config
+			});
+		};
+		const emit = __emit;
+		const mForm = inject("mForm");
+		const activeTabName = ref(getActive(mForm, props, ""));
+		const diffCount = ref({});
+		const tabs = computed(() => {
+			if (props.config.dynamic) {
+				if (!props.config.name) throw new Error("dynamic tab 必须配置name");
+				return props.model[props.config.name] || [];
+			}
+			return props.config.items.filter((item) => display(mForm, item.display, props));
+		});
+		const filter = (config) => filterFunction(mForm, config, props);
+		watchEffect(() => {
+			if (typeof props.config.activeChange === "function") props.config.activeChange(mForm, activeTabName.value, {
+				model: props.model,
+				prop: props.prop
+			});
+		});
+		const tabItems = (tab) => props.config.dynamic ? props.config.items : tab.items;
+		const tabClickHandler = (tab) => {
+			if (typeof tab === "object") tabClick(mForm, tab, props);
+			else {
+				let item = tabs.value.find((tab) => tab.status === tab);
+				if (!item) item = tabs.value[tab];
+				tabClick(mForm, item, props);
+			}
+		};
+		const onTabAdd = async () => {
+			if (!props.name) throw new Error("dynamic tab 必须配置name");
+			if (typeof props.config.onTabAdd === "function") {
+				props.config.onTabAdd(mForm, {
+					model: props.model,
+					prop: props.prop,
+					config: props.config
+				});
+				emit("change", props.model[props.name]);
+			} else {
+				const newObj = await initValue(mForm, {
+					config: props.config.items,
+					initValues: {}
+				});
+				newObj.title = `标签${tabs.value.length + 1}`;
+				props.model[props.name].push(newObj);
+				emit("change", props.model[props.name], { changeRecords: [{
+					propPath: `${props.prop}.${props.model[props.name].length - 1}`,
+					value: newObj
+				}] });
+			}
+			mForm?.$emit("field-change", props.prop, props.model[props.name]);
+		};
+		const onTabRemove = (tabName) => {
+			if (!props.name) throw new Error("dynamic tab 必须配置name");
+			if (typeof props.config.onTabRemove === "function") props.config.onTabRemove(mForm, tabName, {
+				model: props.model,
+				prop: props.prop,
+				config: props.config
+			});
+			else {
+				props.model[props.name].splice(+tabName, 1);
+				if (tabName < activeTabName.value || activeTabName.value >= props.model[props.name].length) {
+					activeTabName.value = (+activeTabName.value - 1).toString();
+					tabClick(mForm, { name: activeTabName.value }, props);
+				}
+			}
+			emit("change", props.model[props.name]);
+			mForm?.$emit("field-change", props.prop, props.model[props.name]);
+		};
+		const changeHandler = (v, eventData) => {
+			emit("change", props.name ? props.model[props.name] : props.model, eventData);
+		};
+		const onAddDiffCount = (tabIndex) => {
+			if (!diffCount.value[tabIndex]) diffCount.value[tabIndex] = 1;
+			else diffCount.value[tabIndex] += 1;
+			emit("addDiffCount");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent)?.component || "el-tabs"), mergeProps({
+				modelValue: activeTabName.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event)
+			}, unref(tabsComponent)?.props({
+				type: __props.config.tabType,
+				editable: __props.config.editable || false,
+				tabPosition: __props.config.tabPosition || "top"
+			}) || {}, {
+				class: `tmagic-design-tabs ${__props.config.dynamic ? "magic-form-dynamic-tab" : "magic-form-tab"}`,
+				onTabClick: tabClickHandler,
+				onTabAdd,
+				onTabRemove
+			}), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab, tabIndex) => {
+					return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), mergeProps({ key: tab[unref(mForm)?.keyProp || "__key"] ?? tabIndex }, { ref_for: true }, unref(tabPaneComponent)?.props({
+						name: filter(tab.status) || tabIndex.toString(),
+						lazy: tab.lazy || false
+					}) || {}), {
+						label: withCtx(() => [createElementVNode("span", null, [createTextVNode(toDisplayString(filter(tab.title)), 1), createVNode(unref(TMagicBadge), {
+							hidden: !diffCount.value[Number(tabIndex)],
+							value: diffCount.value[Number(tabIndex)],
+							class: "diff-count-badge"
+						}, null, 8, ["hidden", "value"])])]),
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(tabItems(tab), (item) => {
+							return openBlock(), createBlock(Container_default, {
+								key: item[unref(mForm)?.keyProp || "__key"],
+								config: item,
+								disabled: __props.disabled,
+								model: __props.config.dynamic ? (__props.name ? __props.model[__props.name] : __props.model)[tabIndex] : tab.name ? (__props.name ? __props.model[__props.name] : __props.model)[tab.name] : __props.name ? __props.model[__props.name] : __props.model,
+								"last-values": unref(isEmpty)(__props.lastValues) ? {} : __props.config.dynamic ? (__props.name ? __props.lastValues[__props.name] : __props.lastValues)[tabIndex] : tab.name ? (__props.name ? __props.lastValues[__props.name] : __props.lastValues)[tab.name] : __props.name ? __props.lastValues[__props.name] : __props.lastValues,
+								"is-compare": __props.isCompare,
+								prop: __props.config.dynamic ? `${__props.prop}${__props.prop ? "." : ""}${String(tabIndex)}` : tab.name ? `${__props.prop}${__props.prop ? "." : ""}${tab.name}` : __props.prop,
+								size: __props.size,
+								"label-width": tab.labelWidth || __props.labelWidth,
+								"expand-more": __props.expandMore,
+								onChange: changeHandler,
+								onAddDiffCount: ($event) => onAddDiffCount(Number(tabIndex))
+							}, null, 8, [
+								"config",
+								"disabled",
+								"model",
+								"last-values",
+								"is-compare",
+								"prop",
+								"size",
+								"label-width",
+								"expand-more",
+								"onAddDiffCount"
+							]);
+						}), 128))]),
+						_: 2
+					}, 1040);
+				}), 128))]),
+				_: 1
+			}, 16, ["modelValue", "class"]);
+		};
+	}
+});
+//#endregion
+export { Tabs_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Cascader.js

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

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

@@ -0,0 +1,123 @@
+import { filterFunction } from "../utils/form.js";
+import { useAddField } from "../utils/useAddField.js";
+import { getConfig } from "../utils/config.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
+var Cascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormCascader",
+	__name: "Cascader",
+	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;
+		const mForm = inject("mForm");
+		useAddField(props.prop);
+		const requestFunc = getConfig("request");
+		const tMagicCascader = ref();
+		const options = ref([]);
+		const remoteData = ref(null);
+		const checkStrictly = computed(() => filterFunction(mForm, props.config.checkStrictly, props));
+		const valueSeparator = computed(() => filterFunction(mForm, props.config.valueSeparator, props));
+		const value = computed(() => {
+			if (typeof props.model[props.name] === "string" && valueSeparator.value) return props.model[props.name].split(valueSeparator.value);
+			return props.model[props.name];
+		});
+		const updateModelValueHandler = (value) => {
+			let result = value;
+			if (valueSeparator.value) result = value.join(valueSeparator.value);
+			if (typeof result === "undefined") {
+				if (Array.isArray(props.model[props.name])) emit("change", []);
+				else if (typeof props.model[props.name] === "string") emit("change", "");
+				else if (typeof props.model[props.name] === "object") emit("change", null);
+			}
+			emit("change", result);
+		};
+		const setRemoteOptions = async function() {
+			const { config } = props;
+			const { option } = config;
+			if (!option) return;
+			let { body } = option;
+			const postOptions = {
+				url: option.url,
+				cache: option.cache,
+				timeout: option.timeout,
+				data: {}
+			};
+			if (body && mForm) {
+				if (typeof body === "function" && props.model && mForm) body = body(mForm, {
+					model: props.model,
+					formValue: mForm.values,
+					formValues: mForm.values,
+					config: props.config
+				});
+				postOptions.data = body;
+			}
+			const res = await requestFunc(postOptions);
+			remoteData.value = res[option.root];
+			if (remoteData.value && typeof option?.item === "function") options.value = option.item(res[option.root]);
+		};
+		if (typeof props.config.options === "function" && props.model && mForm) watchEffect(() => {
+			typeof props.config.options === "function" && Promise.resolve(props.config.options(mForm, {
+				model: props.model,
+				prop: props.prop,
+				formValue: mForm?.values
+			})).then((data) => {
+				options.value = data;
+			});
+		});
+		else if (!props.config.options?.length || props.config.remote) Promise.resolve(setRemoteOptions());
+		else if (Array.isArray(props.config.options)) watchEffect(() => {
+			options.value = props.config.options;
+		});
+		const changeHandler = () => {
+			if (!tMagicCascader.value) return;
+			tMagicCascader.value.setQuery("");
+			tMagicCascader.value.setPreviousQuery(null);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicCascader), {
+				"model-value": value.value,
+				ref_key: "tMagicCascader",
+				ref: tMagicCascader,
+				style: { "width": "100%" },
+				clearable: "",
+				filterable: "",
+				size: __props.size,
+				placeholder: __props.config.placeholder,
+				disabled: __props.disabled,
+				options: options.value,
+				"popper-class": __props.config.popperClass,
+				props: {
+					multiple: __props.config.multiple ?? false,
+					emitPath: __props.config.emitPath ?? true,
+					checkStrictly: checkStrictly.value ?? false
+				},
+				"onUpdate:modelValue": updateModelValueHandler,
+				onChange: changeHandler
+			}, null, 8, [
+				"model-value",
+				"size",
+				"placeholder",
+				"disabled",
+				"options",
+				"popper-class",
+				"props"
+			]);
+		};
+	}
+});
+//#endregion
+export { Cascader_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Checkbox.js

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

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

@@ -0,0 +1,61 @@
+import { useAddField } from "../utils/useAddField.js";
+import { computed, createBlock, createSlots, createTextVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { TMagicCheckbox } from "@tmagic/design";
+//#region packages/form/src/fields/Checkbox.vue?vue&type=script&setup=true&lang.ts
+var Checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormCheckbox",
+	__name: "Checkbox",
+	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 activeValue = computed(() => {
+			if (typeof props.config.activeValue === "undefined") {
+				if (props.config.filter === "number") return 1;
+			} else return props.config.activeValue;
+		});
+		const inactiveValue = computed(() => {
+			if (typeof props.config.inactiveValue === "undefined") {
+				if (props.config.filter === "number") return 0;
+			} else return props.config.inactiveValue;
+		});
+		const changeHandler = (value) => {
+			emit("change", value);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicCheckbox), {
+				"model-value": __props.model[__props.name],
+				size: __props.size,
+				trueValue: activeValue.value,
+				falseValue: inactiveValue.value,
+				disabled: __props.disabled,
+				"onUpdate:modelValue": changeHandler
+			}, createSlots({ _: 2 }, [!__props.config.useLabel ? {
+				name: "default",
+				fn: withCtx(() => [createTextVNode(toDisplayString(__props.config.text), 1)]),
+				key: "0"
+			} : void 0]), 1032, [
+				"model-value",
+				"size",
+				"trueValue",
+				"falseValue",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { Checkbox_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/CheckboxGroup.js

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

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

@@ -0,0 +1,63 @@
+import { filterFunction } from "../utils/form.js";
+import { useAddField } from "../utils/useAddField.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
+var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormCheckGroup",
+	__name: "CheckboxGroup",
+	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);
+		if (props.model && !props.model[props.name]) props.model[props.name] = [];
+		const changeHandler = (v) => {
+			emit("change", v);
+		};
+		const mForm = inject("mForm");
+		const options = computed(() => {
+			if (Array.isArray(props.config.options)) return props.config.options;
+			if (typeof props.config.options === "function") return filterFunction(mForm, props.config.options, props) || [];
+			return [];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicCheckboxGroup), {
+				"model-value": __props.model[__props.name],
+				size: __props.size,
+				disabled: __props.disabled,
+				"onUpdate:modelValue": changeHandler
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (option) => {
+					return openBlock(), createBlock(unref(TMagicCheckbox), {
+						value: option.value,
+						key: option.value,
+						disabled: option.disabled
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(option.text), 1)]),
+						_: 2
+					}, 1032, ["value", "disabled"]);
+				}), 128))]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"size",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { CheckboxGroup_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/ColorPicker.js

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

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

@@ -0,0 +1,42 @@
+import { useAddField } from "../utils/useAddField.js";
+import { createBlock, defineComponent, openBlock, unref } from "vue";
+import { TMagicColorPicker } from "@tmagic/design";
+//#region packages/form/src/fields/ColorPicker.vue?vue&type=script&setup=true&lang.ts
+var ColorPicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormColorPicker",
+	__name: "ColorPicker",
+	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);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicColorPicker), {
+				"model-value": __props.model[__props.name],
+				size: __props.size,
+				disabled: __props.disabled,
+				showAlpha: true,
+				"onUpdate:modelValue": changeHandler
+			}, null, 8, [
+				"model-value",
+				"size",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { ColorPicker_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/Date.js

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

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

@@ -0,0 +1,52 @@
+import { datetimeFormatter } from "../utils/form.js";
+import { useAddField } from "../utils/useAddField.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
+var Date_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFormDate",
+	__name: "Date",
+	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);
+		props.model[props.name] = datetimeFormatter(props.model[props.name], "", props.config.valueFormat || "YYYY/MM/DD");
+		const changeHandler = (v) => {
+			emit("change", v);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicDatePicker), {
+				"model-value": __props.model[__props.name],
+				type: "date",
+				size: __props.size,
+				placeholder: __props.config.placeholder,
+				disabled: __props.disabled,
+				format: __props.config.format || "YYYY/MM/DD",
+				"value-format": __props.config.valueFormat || "YYYY/MM/DD",
+				"onUpdate:modelValue": changeHandler
+			}, null, 8, [
+				"model-value",
+				"size",
+				"placeholder",
+				"disabled",
+				"format",
+				"value-format"
+			]);
+		};
+	}
+});
+//#endregion
+export { Date_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/DateTime.js

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