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

package/dist/es/fields/StyleSetter/configs.js

@@ -0,0 +1,663 @@
+import BackgroundPosition_default from "./components/BackgroundPosition.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 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 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 Left_default from "./icons/text-align/Left.js";
+import Center_default$2 from "./icons/text-align/Center.js";
+import Right_default from "./icons/text-align/Right.js";
+import { markRaw } from "vue";
+import { appendValidateSuggestion } from "@tmagic/design/headless";
+import { defineFormItem } from "@tmagic/form/headless";
+//#region packages/editor/src/fields/StyleSetter/configs.ts
+/**
+* 「布局」面板配置。
+*
+* `theme` 需要由调用方从 `useTheme()` 解析后传入：magic-admin 主题下换行只能用普通
+* radio，其余主题用 button。
+*/
+var createLayoutConfig = (theme) => [
+	defineFormItem({
+		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"
+			}
+		]
+	}),
+	defineFormItem({
+		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"
+	}),
+	defineFormItem({
+		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"
+	}),
+	defineFormItem({
+		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"
+	}),
+	defineFormItem({
+		name: "flexWrap",
+		text: "换行",
+		type: "radioGroup",
+		childType: theme !== "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"
+	}),
+	defineFormItem({
+		type: "row",
+		items: [{
+			name: "width",
+			text: "宽度（px）",
+			labelWidth: "90px",
+			type: "data-source-field-select",
+			fieldConfig: { type: "text" }
+		}]
+	}),
+	defineFormItem({
+		type: "row",
+		items: [{
+			name: "height",
+			text: "高度（px）",
+			labelWidth: "90px",
+			type: "data-source-field-select",
+			fieldConfig: { type: "text" }
+		}]
+	}),
+	defineFormItem({
+		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"
+					}
+				]
+			}
+		}]
+	}),
+	defineFormItem({
+		type: "row",
+		items: [{
+			type: "data-source-field-select",
+			text: "透明度（%）",
+			name: "opacity",
+			labelWidth: "90px",
+			dataSourceFieldType: ["string", "number"],
+			fieldConfig: { type: "text" }
+		}]
+	})
+];
+var positionText = {
+	static: "不定位",
+	relative: "相对定位",
+	absolute: "绝对定位",
+	fixed: "固定定位",
+	sticky: "粘性定位"
+};
+/**
+* 「位置」面板配置。
+*
+* `values` 是当前 style 的 model：left/top/right/bottom 的 display 在求值时读取
+* `values.position`，所以必须传入响应式对象本身，不能先解构。
+*/
+var createPositionConfig = (values) => [
+	defineFormItem({
+		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]})`
+			}))
+		}
+	}),
+	defineFormItem({
+		type: "row",
+		labelWidth: "68px",
+		display: () => 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\"")
+			}]
+		}]
+	}),
+	defineFormItem({
+		type: "row",
+		labelWidth: "68px",
+		display: () => 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\"")
+			}]
+		}]
+	}),
+	defineFormItem({
+		labelWidth: "68px",
+		name: "zIndex",
+		text: "zIndex",
+		type: "data-source-field-select",
+		fieldConfig: { type: "text" },
+		rules: [{
+			typeMatch: true,
+			message: appendValidateSuggestion("zIndex 应为数字", "请参考以下示例值：10")
+		}]
+	})
+];
+/**
+* 「背景」面板配置。
+*
+* 校验文案由 `@tmagic/design` 的 `appendValidateSuggestion` 生成，必须延迟到调用时
+* 才执行，不能在模块顶层求值：本模块会被大量组件间接引入，而 design 层在部分场景下
+* 才可用。
+*/
+var createBackgroundConfig = () => [
+	defineFormItem({
+		name: "backgroundColor",
+		text: "背景色",
+		labelWidth: "68px",
+		type: "data-source-field-select",
+		fieldConfig: { type: "colorPicker" },
+		rules: [{
+			typeMatch: true,
+			message: appendValidateSuggestion("背景色应为字符串", "请参考以下示例值：\"#000000\"")
+		}]
+	}),
+	defineFormItem({
+		name: "backgroundImage",
+		text: "背景图",
+		labelWidth: "68px",
+		type: "data-source-field-select",
+		fieldConfig: { type: "img-upload" }
+	}),
+	defineFormItem({
+		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 值不合法");
+		} }]
+	}),
+	defineFormItem({
+		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"
+			}
+		]
+	}),
+	defineFormItem({
+		name: "backgroundPosition",
+		text: "背景定位",
+		type: "component",
+		component: BackgroundPosition_default,
+		labelWidth: "68px"
+	})
+];
+/**
+* 「文字」面板配置。
+*
+* 字重校验依赖编辑器服务（数据源/代码块），由调用方把 `type-match-rules` 的
+* `validateDataSourceFieldSelect` 传进来：本模块只描述配置，不直接引用服务层，
+* 否则会把整条服务依赖链拖进所有引用方。
+*/
+var createFontConfig = (validateDataSourceField) => [
+	defineFormItem({
+		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" }
+		}]
+	}),
+	defineFormItem({
+		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 = validateDataSourceField(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);
+		} }]
+	}),
+	defineFormItem({
+		labelWidth: "68px",
+		name: "color",
+		text: "颜色",
+		type: "data-source-field-select",
+		fieldConfig: { type: "colorPicker" },
+		rules: [{
+			typeMatch: true,
+			message: appendValidateSuggestion("颜色应为字符串", "请参考以下示例值：\"#000000\"")
+		}]
+	}),
+	defineFormItem({
+		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$2),
+				tooltip: "居中对齐 center",
+				text: "居中对齐"
+			},
+			{
+				value: "right",
+				icon: markRaw(Right_default),
+				tooltip: "右对齐 right",
+				text: "右对齐"
+			}
+		]
+	})
+];
+/** 「边框与圆角」面板中圆角部分的配置，边框四向配置见 `createBorderDirectionConfig`。 */
+var borderRadiusConfig = defineFormItem({
+	labelWidth: "68px",
+	name: "borderRadius",
+	text: "圆角",
+	type: "data-source-field-select",
+	fieldConfig: { type: "text" }
+});
+/** 「变形」面板配置。 */
+var transformConfig = defineFormItem({
+	name: "transform",
+	items: [{
+		name: "rotate",
+		text: "旋转角度",
+		labelWidth: "68px",
+		type: "data-source-field-select",
+		checkStrictly: false,
+		dataSourceFieldType: ["string", "number"],
+		fieldConfig: { type: "text" }
+	}, {
+		name: "scale",
+		text: "缩放",
+		labelWidth: "68px",
+		type: "data-source-field-select",
+		checkStrictly: false,
+		dataSourceFieldType: ["string", "number"],
+		fieldConfig: { type: "text" }
+	}]
+});
+/**
+* 把 6 个样式面板里会向父表单注册 FormItem 的配置按 `Index.vue` 的面板顺序拼成一份。
+*
+* 给无渲染校验的嵌套配置用：组件侧仍按面板各自渲染，这份合成配置只描述「父表单上
+* 实际会出现哪些字段」。以下两处与组件一致、不纳入：
+* - Layout 里的 Box（margin/padding）是裸 input，没有 MContainer；
+* - Border 子组件的四向边框 MContainer 没传 `:prop`（路径从父表单脱落，本轮不修）。
+*
+* `theme` 只影响 flexWrap 的 UI `childType`，不影响校验字段。
+*/
+var createStyleSetterConfig = (values, theme, validateDataSourceField) => [
+	...createLayoutConfig(theme),
+	...createPositionConfig(values),
+	...createBackgroundConfig(),
+	...createFontConfig(validateDataSourceField),
+	borderRadiusConfig,
+	transformConfig
+];
+/**
+* 边框配置，按当前选中的方向拼字段名。
+*
+* `direction` 取 ''(四向) / 'Top' / 'Right' / 'Bottom' / 'Left'，空串对应
+* `borderWidth` 这类不带方向的字段。
+*/
+var createBorderDirectionConfig = (direction) => defineFormItem({ items: [
+	{
+		name: `border${direction}Width`,
+		text: "边框宽度",
+		labelWidth: "68px",
+		type: "data-source-field-select",
+		fieldConfig: { type: "text" }
+	},
+	{
+		name: `border${direction}Color`,
+		text: "边框颜色",
+		labelWidth: "68px",
+		type: "data-source-field-select",
+		fieldConfig: { type: "colorPicker" }
+	},
+	{
+		name: `border${direction}Style`,
+		text: "边框样式",
+		labelWidth: "68px",
+		type: "data-source-field-select",
+		fieldConfig: {
+			type: "select",
+			options: [
+				"solid",
+				"dashed",
+				"dotted"
+			].map((item) => ({
+				value: item,
+				text: item
+			}))
+		}
+	}
+] });
+//#endregion
+export { borderRadiusConfig, createBackgroundConfig, createBorderDirectionConfig, createFontConfig, createLayoutConfig, createPositionConfig, createStyleSetterConfig, transformConfig };