@tmagic/editor 1.8.0-beta.25 → 1.8.0-beta.26

package/dist/es/fields/StyleSetter/pro/Background.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,6 @@
-import BackgroundPosition_default from "../components/BackgroundPosition.js";
-import Repeat_default from "../icons/background-repeat/Repeat.js";
-import RepeatX_default from "../icons/background-repeat/RepeatX.js";
-import RepeatY_default from "../icons/background-repeat/RepeatY.js";
-import NoRepeat_default from "../icons/background-repeat/NoRepeat.js";
-import { MContainer, defineFormConfig } from "@tmagic/form";
-import { appendValidateSuggestion } from "@tmagic/design";
-import { Fragment, createBlock, createElementBlock, defineComponent, markRaw, openBlock, renderList, unref } from "vue";
+import { createBackgroundConfig } from "../configs.js";
+import { MContainer } from "@tmagic/form";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, openBlock, renderList, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Background.vue?vue&type=script&setup=true&lang.ts
 var Background_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Background",
@@ -21,111 +16,13 @@ var Background_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const formConfig = defineFormConfig([
-			{
-				name: "backgroundColor",
-				text: "背景色",
-				labelWidth: "68px",
-				type: "data-source-field-select",
-				fieldConfig: { type: "colorPicker" },
-				rules: [{
-					typeMatch: true,
-					message: appendValidateSuggestion("背景色应为字符串", "请参考以下示例值：\"#000000\"")
-				}]
-			},
-			{
-				name: "backgroundImage",
-				text: "背景图",
-				labelWidth: "68px",
-				type: "data-source-field-select",
-				fieldConfig: { type: "img-upload" }
-			},
-			{
-				name: "backgroundSize",
-				text: "背景尺寸",
-				type: "radioGroup",
-				childType: "button",
-				labelWidth: "68px",
-				options: [
-					{
-						value: "auto",
-						text: "默认",
-						tooltip: "默认 auto"
-					},
-					{
-						value: "contain",
-						text: "等比填充",
-						tooltip: "等比填充 contain"
-					},
-					{
-						value: "cover",
-						text: "等比覆盖",
-						tooltip: "等比覆盖 cover"
-					}
-				],
-				rules: [{ typeMatch: false }, { validator: ({ value, callback }) => {
-					if (value === "" || value === null || value === void 0) return callback();
-					const keywords = [
-						"auto",
-						"cover",
-						"contain",
-						"inherit",
-						"initial",
-						"revert",
-						"unset"
-					];
-					const lengthPercent = /^-?\d+(\.\d+)?(px|em|rem|ex|ch|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)$/;
-					const singleValue = (v) => keywords.includes(v) || lengthPercent.test(v);
-					const parts = String(value).trim().split(/\s+/);
-					if (parts.length > 1 && (parts.includes("cover") || parts.includes("contain"))) return callback("cover/contain 不能与其他值组合");
-					if (parts.length > 2) return callback("backgroundSize 最多支持两个值");
-					if (parts.every((part) => singleValue(part))) return callback();
-					return callback("backgroundSize 值不合法");
-				} }]
-			},
-			{
-				name: "backgroundRepeat",
-				text: "重复显示",
-				type: "radioGroup",
-				childType: "button",
-				labelWidth: "68px",
-				options: [
-					{
-						value: "no-repeat",
-						icon: markRaw(NoRepeat_default),
-						tooltip: "不重复 no-repeat"
-					},
-					{
-						value: "repeat-x",
-						icon: markRaw(RepeatX_default),
-						tooltip: "水平方向重复 repeat-x"
-					},
-					{
-						value: "repeat-y",
-						icon: markRaw(RepeatY_default),
-						tooltip: "垂直方向重复 repeat-y"
-					},
-					{
-						value: "repeat",
-						icon: markRaw(Repeat_default),
-						tooltip: "垂直和水平方向重复 repeat"
-					}
-				]
-			},
-			{
-				name: "backgroundPosition",
-				text: "背景定位",
-				type: "component",
-				component: BackgroundPosition_default,
-				labelWidth: "68px"
-			}
-		]);
+		const formConfig = computed(() => createBackgroundConfig());
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
 		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
-			return openBlock(true), createElementBlock(Fragment, null, renderList(unref(formConfig), (item) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(formConfig.value, (item) => {
 				return openBlock(), createBlock(unref(MContainer), {
 					prop: __props.prop,
 					key: item.name,

package/dist/es/fields/StyleSetter/pro/Border.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
+import { borderRadiusConfig } from "../configs.js";
 import Border_default from "../components/Border.js";
-import { MContainer, defineFormItem } from "@tmagic/form";
+import { MContainer } from "@tmagic/form";
 import { Fragment, createElementBlock, createVNode, defineComponent, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Border.vue?vue&type=script&setup=true&lang.ts
 var Border_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -15,13 +16,6 @@ var Border_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const config = defineFormItem({
-			labelWidth: "68px",
-			name: "borderRadius",
-			text: "圆角",
-			type: "data-source-field-select",
-			fieldConfig: { type: "text" }
-		});
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
@@ -29,7 +23,7 @@ var Border_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(MContainer), {
 				prop: __props.prop,
-				config: unref(config),
+				config: unref(borderRadiusConfig),
 				model: __props.values,
 				"last-values": __props.lastValues,
 				"is-compare": __props.isCompare,

package/dist/es/fields/StyleSetter/pro/Font.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,7 @@
 import { validateDataSourceFieldSelect } from "../../../utils/type-match-rules.js";
-import Left_default from "../icons/text-align/Left.js";
-import Center_default from "../icons/text-align/Center.js";
-import Right_default from "../icons/text-align/Right.js";
-import { MContainer, defineFormConfig } from "@tmagic/form";
-import { appendValidateSuggestion } from "@tmagic/design";
-import { Fragment, createBlock, createElementBlock, defineComponent, markRaw, openBlock, renderList, unref } from "vue";
+import { createFontConfig } from "../configs.js";
+import { MContainer } from "@tmagic/form";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, openBlock, renderList, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Font.vue?vue&type=script&setup=true&lang.ts
 var Font_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Font",
@@ -19,107 +16,13 @@ var Font_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const formConfig = defineFormConfig([
-			{
-				type: "row",
-				items: [{
-					labelWidth: "68px",
-					name: "fontSize",
-					text: "字号",
-					type: "data-source-field-select",
-					fieldConfig: { type: "text" },
-					rules: [{
-						typeMatch: true,
-						message: appendValidateSuggestion("字号应为字符串或数字", "请参考以下示例值：24 或 \"24\"")
-					}]
-				}, {
-					labelWidth: "68px",
-					name: "lineHeight",
-					text: "行高",
-					type: "data-source-field-select",
-					fieldConfig: { type: "text" }
-				}]
-			},
-			{
-				name: "fontWeight",
-				text: "字重",
-				labelWidth: "68px",
-				type: "data-source-field-select",
-				dataSourceFieldType: ["string", "number"],
-				fieldConfig: {
-					type: "select",
-					allowCreate: true,
-					options: ["normal", "bold"].concat(Array(7).fill(1).map((x, i) => `${i + 1}00`)).map((item) => ({
-						value: item,
-						text: item
-					}))
-				},
-				rules: [{ typeMatch: false }, { validator: ({ value, callback }, { config, model, prop }, mForm) => {
-					if (value === "" || value === null || value === void 0) return callback();
-					const result = validateDataSourceFieldSelect(value, {
-						fieldType: "data-source-field-select",
-						mForm,
-						props: {
-							config,
-							model,
-							prop
-						}
-					}, { validatePlainValue: (plainValue) => {
-						if (typeof plainValue === "string" || typeof plainValue === "number" && !Number.isNaN(plainValue)) return;
-						return "字重应为字符串或数字";
-					} });
-					if (result && typeof result.then === "function") {
-						result.then((error) => callback(error), (error) => callback(error));
-						return;
-					}
-					return callback(result);
-				} }]
-			},
-			{
-				labelWidth: "68px",
-				name: "color",
-				text: "颜色",
-				type: "data-source-field-select",
-				fieldConfig: { type: "colorPicker" },
-				rules: [{
-					typeMatch: true,
-					message: appendValidateSuggestion("颜色应为字符串", "请参考以下示例值：\"#000000\"")
-				}]
-			},
-			{
-				name: "textAlign",
-				text: "对齐",
-				type: "radioGroup",
-				childType: "button",
-				labelWidth: "68px",
-				options: [
-					{
-						value: "left",
-						icon: markRaw(Left_default),
-						tooltip: "左对齐 row",
-						text: "左对齐"
-					},
-					{
-						value: "center",
-						icon: markRaw(Center_default),
-						tooltip: "居中对齐 center",
-						text: "居中对齐"
-					},
-					{
-						value: "right",
-						icon: markRaw(Right_default),
-						tooltip: "右对齐 right",
-						text: "右对齐"
-					}
-				]
-			}
-		]);
+		const formConfig = computed(() => createFontConfig(validateDataSourceFieldSelect));
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
 		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
-			return openBlock(true), createElementBlock(Fragment, null, renderList(unref(formConfig), (item, index) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(formConfig.value, (item, index) => {
 				return openBlock(), createBlock(unref(MContainer), {
 					prop: __props.prop,
 					key: index,

package/dist/es/fields/StyleSetter/pro/Layout.vue_vue_type_script_setup_true_lang.js

@@ -1,26 +1,8 @@
+import { createLayoutConfig } from "../configs.js";
 import Box_default from "../components/Box.js";
-import Center_default from "../icons/align-items/Center.js";
-import FlexEnd_default from "../icons/align-items/FlexEnd.js";
-import FlexStart_default from "../icons/align-items/FlexStart.js";
-import SpaceAround_default from "../icons/align-items/SpaceAround.js";
-import SpaceBetween_default from "../icons/align-items/SpaceBetween.js";
-import Block_default from "../icons/display/Block.js";
-import Flex_default from "../icons/display/Flex.js";
-import Inline_default from "../icons/display/Inline.js";
-import InlineBlock_default from "../icons/display/InlineBlock.js";
-import None_default from "../icons/display/None.js";
-import Column_default from "../icons/flex-direction/Column.js";
-import ColumnReverse_default from "../icons/flex-direction/ColumnReverse.js";
-import Row_default from "../icons/flex-direction/Row.js";
-import RowReverse_default from "../icons/flex-direction/RowReverse.js";
-import Center_default$1 from "../icons/justify-content/Center.js";
-import FlexEnd_default$1 from "../icons/justify-content/FlexEnd.js";
-import FlexStart_default$1 from "../icons/justify-content/FlexStart.js";
-import SpaceAround_default$1 from "../icons/justify-content/SpaceAround.js";
-import SpaceBetween_default$1 from "../icons/justify-content/SpaceBetween.js";
-import { MContainer, defineFormConfig } from "@tmagic/form";
+import { MContainer } from "@tmagic/form";
 import { useTheme } from "@tmagic/design";
-import { Fragment, createBlock, createElementBlock, createVNode, defineComponent, markRaw, openBlock, renderList, unref, vShow, withDirectives } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, createVNode, defineComponent, openBlock, renderList, unref, vShow, withDirectives } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Layout.vue?vue&type=script&setup=true&lang.ts
 var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Layout",
@@ -38,255 +20,13 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const props = __props;
 		const emit = __emit;
 		const displayTheme = useTheme(props);
-		const formConfig = defineFormConfig([
-			{
-				name: "display",
-				text: "模式",
-				type: "radioGroup",
-				childType: "button",
-				labelWidth: "90px",
-				iconSize: "24px",
-				options: [
-					{
-						value: "inline",
-						icon: markRaw(Inline_default),
-						tooltip: "内联布局 inline"
-					},
-					{
-						value: "flex",
-						icon: markRaw(Flex_default),
-						tooltip: "弹性布局 flex"
-					},
-					{
-						value: "block",
-						icon: markRaw(Block_default),
-						tooltip: "块级布局 block"
-					},
-					{
-						value: "inline-block",
-						icon: markRaw(InlineBlock_default),
-						tooltip: "内联块布局 inline-block"
-					},
-					{
-						value: "none",
-						icon: markRaw(None_default),
-						tooltip: "隐藏 none"
-					}
-				]
-			},
-			{
-				name: "flexDirection",
-				text: "主轴方向",
-				type: "radioGroup",
-				childType: "button",
-				labelWidth: "90px",
-				iconSize: "24px",
-				options: [
-					{
-						value: "row",
-						icon: markRaw(Row_default),
-						tooltip: "水平方向 起点在左侧 row"
-					},
-					{
-						value: "row-reverse",
-						icon: markRaw(RowReverse_default),
-						tooltip: "水平方向 起点在右侧 row-reverse"
-					},
-					{
-						value: "column",
-						icon: markRaw(Column_default),
-						tooltip: "垂直方向 起点在上沿 column"
-					},
-					{
-						value: "column-reverse",
-						icon: markRaw(ColumnReverse_default),
-						tooltip: "垂直方向 起点在下沿 column-reverse"
-					}
-				],
-				display: (_mForm, { model }) => model.display === "flex"
-			},
-			{
-				name: "justifyContent",
-				text: "主轴对齐",
-				type: "radioGroup",
-				childType: "button",
-				labelWidth: "90px",
-				iconSize: "24px",
-				options: [
-					{
-						value: "flex-start",
-						icon: markRaw(FlexStart_default$1),
-						tooltip: "左对齐 flex-start"
-					},
-					{
-						value: "flex-end",
-						icon: markRaw(FlexEnd_default$1),
-						tooltip: "右对齐 flex-end"
-					},
-					{
-						value: "center",
-						icon: markRaw(Center_default$1),
-						tooltip: "居中 center"
-					},
-					{
-						value: "space-between",
-						icon: markRaw(SpaceBetween_default$1),
-						tooltip: "两端对齐 space-between"
-					},
-					{
-						value: "space-around",
-						icon: markRaw(SpaceAround_default$1),
-						tooltip: "横向平分 space-around"
-					}
-				],
-				display: (_mForm, { model }) => model.display === "flex"
-			},
-			{
-				name: "alignItems",
-				text: "辅轴对齐",
-				type: "radioGroup",
-				childType: "button",
-				labelWidth: "90px",
-				iconSize: "24px",
-				options: [
-					{
-						value: "flex-start",
-						icon: markRaw(FlexStart_default),
-						tooltip: "左对齐 flex-start"
-					},
-					{
-						value: "flex-end",
-						icon: markRaw(FlexEnd_default),
-						tooltip: "右对齐 flex-end"
-					},
-					{
-						value: "center",
-						icon: markRaw(Center_default),
-						tooltip: "居中 center"
-					},
-					{
-						value: "space-between",
-						icon: markRaw(SpaceBetween_default),
-						tooltip: "两端对齐 space-between"
-					},
-					{
-						value: "space-around",
-						icon: markRaw(SpaceAround_default),
-						tooltip: "横向平分 space-around"
-					}
-				],
-				display: (_mForm, { model }) => model.display === "flex"
-			},
-			{
-				name: "flexWrap",
-				text: "换行",
-				type: "radioGroup",
-				childType: displayTheme.value !== "magic-admin" ? "button" : "default",
-				labelWidth: "90px",
-				iconSize: "24px",
-				options: [
-					{
-						value: "nowrap",
-						text: "不换行",
-						tooltip: "不换行 nowrap"
-					},
-					{
-						value: "wrap",
-						text: "正换行",
-						tooltip: "第一行在上方 wrap"
-					},
-					{
-						value: "wrap-reverse",
-						text: "逆换行",
-						tooltip: "第一行在下方 wrap-reverse"
-					}
-				],
-				display: (_mForm, { model }) => model.display === "flex"
-			},
-			{
-				type: "row",
-				items: [{
-					name: "width",
-					text: "宽度（px）",
-					labelWidth: "90px",
-					type: "data-source-field-select",
-					fieldConfig: { type: "text" }
-				}]
-			},
-			{
-				type: "row",
-				items: [{
-					name: "height",
-					text: "高度（px）",
-					labelWidth: "90px",
-					type: "data-source-field-select",
-					fieldConfig: { type: "text" }
-				}]
-			},
-			{
-				type: "row",
-				items: [{
-					type: "data-source-field-select",
-					text: "overflow",
-					name: "overflow",
-					labelWidth: "90px",
-					checkStrictly: false,
-					dataSourceFieldType: ["string"],
-					fieldConfig: {
-						type: "select",
-						clearable: true,
-						allowCreate: true,
-						options: [
-							{
-								text: "visible",
-								value: "visible"
-							},
-							{
-								text: "hidden",
-								value: "hidden"
-							},
-							{
-								text: "clip",
-								value: "clip"
-							},
-							{
-								text: "scroll",
-								value: "scroll"
-							},
-							{
-								text: "auto",
-								value: "auto"
-							},
-							{
-								text: "overlay",
-								value: "overlay"
-							},
-							{
-								text: "initial",
-								value: "initial"
-							}
-						]
-					}
-				}]
-			},
-			{
-				type: "row",
-				items: [{
-					type: "data-source-field-select",
-					text: "透明度（%）",
-					name: "opacity",
-					labelWidth: "90px",
-					dataSourceFieldType: ["string", "number"],
-					fieldConfig: { type: "text" }
-				}]
-			}
-		]);
+		const formConfig = computed(() => createLayoutConfig(displayTheme.value));
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
 		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(formConfig), (item) => {
+			return openBlock(), createElementBlock(Fragment, null, [(openBlock(true), createElementBlock(Fragment, null, renderList(formConfig.value, (item) => {
 				return openBlock(), createBlock(unref(MContainer), {
 					prop: __props.prop,
 					key: item.name,

package/dist/es/fields/StyleSetter/pro/Position.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import { MContainer, defineFormConfig } from "@tmagic/form";
-import { appendValidateSuggestion } from "@tmagic/design";
-import { Fragment, createBlock, createElementBlock, defineComponent, openBlock, renderList, unref } from "vue";
+import { createPositionConfig } from "../configs.js";
+import { MContainer } from "@tmagic/form";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, openBlock, renderList, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Position.vue?vue&type=script&setup=true&lang.ts
 var Position_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Position",
@@ -16,93 +16,13 @@ var Position_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const positionText = {
-			static: "不定位",
-			relative: "相对定位",
-			absolute: "绝对定位",
-			fixed: "固定定位",
-			sticky: "粘性定位"
-		};
-		const formConfig = defineFormConfig([
-			{
-				name: "position",
-				text: "定位",
-				labelWidth: "68px",
-				type: "data-source-field-select",
-				fieldConfig: {
-					type: "select",
-					options: Object.keys(positionText).map((item) => ({
-						value: item,
-						text: `${item}(${positionText[item]})`
-					}))
-				}
-			},
-			{
-				type: "row",
-				labelWidth: "68px",
-				display: () => props.values.position !== "static",
-				items: [{
-					name: "left",
-					type: "data-source-field-select",
-					text: "left",
-					fieldConfig: { type: "text" },
-					rules: [{
-						typeMatch: true,
-						message: appendValidateSuggestion("left 应为字符串", "请参考以下示例值：\"10\"")
-					}]
-				}, {
-					name: "top",
-					type: "data-source-field-select",
-					text: "top",
-					fieldConfig: { type: "text" },
-					rules: [{
-						typeMatch: true,
-						message: appendValidateSuggestion("top 应为字符串", "请参考以下示例值：\"10\"")
-					}]
-				}]
-			},
-			{
-				type: "row",
-				labelWidth: "68px",
-				display: () => props.values.position !== "static",
-				items: [{
-					name: "right",
-					type: "data-source-field-select",
-					text: "right",
-					fieldConfig: { type: "text" },
-					rules: [{
-						typeMatch: true,
-						message: appendValidateSuggestion("right 应为字符串", "请参考以下示例值：\"10\"")
-					}]
-				}, {
-					name: "bottom",
-					type: "data-source-field-select",
-					text: "bottom",
-					fieldConfig: { type: "text" },
-					rules: [{
-						typeMatch: true,
-						message: appendValidateSuggestion("bottom 应为字符串", "请参考以下示例值：\"10\"")
-					}]
-				}]
-			},
-			{
-				labelWidth: "68px",
-				name: "zIndex",
-				text: "zIndex",
-				type: "data-source-field-select",
-				fieldConfig: { type: "text" },
-				rules: [{
-					typeMatch: true,
-					message: appendValidateSuggestion("zIndex 应为数字", "请参考以下示例值：10")
-				}]
-			}
-		]);
+		const formConfig = computed(() => createPositionConfig(props.values));
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
 		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
-			return openBlock(true), createElementBlock(Fragment, null, renderList(unref(formConfig), (item, index) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(formConfig.value, (item, index) => {
 				return openBlock(), createBlock(unref(MContainer), {
 					prop: __props.prop,
 					key: index,