@gx-design-vue/pro-layout-components 0.1.0-alpha.0

package/dist/ThemeEditor/components/SwitchTab/style.js

@@ -0,0 +1,54 @@
+//#region src/ThemeEditor/components/SwitchTab/style.ts
+const switchTabStyleToken = (token) => {
+	return { [`${token.componentCls}`]: {
+		display: "flex",
+		alignItems: "flex-start",
+		flex: 1,
+		overflow: "hidden",
+		"&-nav": {
+			position: "relative",
+			paddingInline: token.paddingXS
+		},
+		"&-line": {
+			position: "absolute",
+			width: 3,
+			height: 80,
+			left: 0,
+			background: token.colorPrimary,
+			transition: `top ${token.motionDurationMid}`,
+			borderRadius: `0 9px 9px 0`
+		},
+		"&-panel": {
+			cursor: "pointer",
+			textAlign: "center",
+			width: 56,
+			height: 80,
+			padding: token.paddingXXS,
+			borderRadius: token.borderRadius * 2,
+			marginBlockEnd: token.marginXS,
+			transition: `all ${token.motionDurationMid} linear`,
+			"&-active": { backgroundColor: token.layout?.header?.colorBgRightActionsItemHover },
+			"svg": {
+				fontSize: 48,
+				borderRadius: 9
+			},
+			"&-title": {
+				fontSize: token.fontSizeSM,
+				marginBlockStart: token.marginXXS - 2,
+				lineHeight: `20px`,
+				color: token.colorText
+			}
+		},
+		"&-content": {
+			flex: 1,
+			height: `calc(100% - ${token.paddingXS}px)`,
+			color: token.colorText,
+			marginInlineEnd: token.marginXS,
+			borderRadius: token.borderRadius * 2,
+			backgroundColor: token.layout?.header?.colorBgRightActionsItemHover
+		}
+	} };
+};
+
+//#endregion
+export { switchTabStyleToken };

package/dist/ThemeEditor/components/Tokens/Colors/ColorSvg.d.ts

@@ -0,0 +1,7 @@
+import * as vue180 from "vue";
+import * as vue_jsx_runtime5 from "vue/jsx-runtime";
+
+//#region src/ThemeEditor/components/Tokens/Colors/ColorSvg.d.ts
+declare const _default: vue180.DefineComponent<{}, () => vue_jsx_runtime5.JSX.Element, {}, {}, {}, vue180.ComponentOptionsMixin, vue180.ComponentOptionsMixin, {}, string, vue180.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue180.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/ThemeEditor/components/Tokens/Colors/ColorSvg.js

@@ -0,0 +1,453 @@
+import { createVNode, defineComponent } from "vue";
+
+//#region src/ThemeEditor/components/Tokens/Colors/ColorSvg.tsx
+var ColorSvg_default = /* @__PURE__ */ defineComponent({
+	name: "ColorSvg",
+	setup() {
+		return () => {
+			return createVNode("svg", {
+				"width": "1em",
+				"height": "1em",
+				"viewBox": "0 0 64 64",
+				"fill": "none",
+				"xmlns": "http://www.w3.org/2000/svg"
+			}, [
+				createVNode("rect", {
+					"width": "8",
+					"height": "8",
+					"fill": "#DBE1FC"
+				}, null),
+				createVNode("rect", {
+					"y": "8",
+					"width": "8",
+					"height": "8",
+					"fill": "#B6C5FA"
+				}, null),
+				createVNode("rect", {
+					"y": "16",
+					"width": "8",
+					"height": "8",
+					"fill": "#90A9F9"
+				}, null),
+				createVNode("rect", {
+					"y": "24",
+					"width": "8",
+					"height": "8",
+					"fill": "#688DF7"
+				}, null),
+				createVNode("rect", {
+					"y": "32",
+					"width": "8",
+					"height": "8",
+					"fill": "#4471EC"
+				}, null),
+				createVNode("rect", {
+					"y": "40",
+					"width": "8",
+					"height": "8",
+					"fill": "#2257D2"
+				}, null),
+				createVNode("rect", {
+					"y": "48",
+					"width": "8",
+					"height": "8",
+					"fill": "#1640A6"
+				}, null),
+				createVNode("rect", {
+					"y": "56",
+					"width": "8",
+					"height": "8",
+					"fill": "#0D2B76"
+				}, null),
+				createVNode("rect", {
+					"x": "48",
+					"width": "8",
+					"height": "8",
+					"fill": "#CBEAD3"
+				}, null),
+				createVNode("rect", {
+					"x": "48",
+					"y": "8",
+					"width": "8",
+					"height": "8",
+					"fill": "#A4D7B5"
+				}, null),
+				createVNode("rect", {
+					"x": "48",
+					"y": "16",
+					"width": "8",
+					"height": "8",
+					"fill": "#77BE92"
+				}, null),
+				createVNode("rect", {
+					"x": "48",
+					"y": "24",
+					"width": "8",
+					"height": "8",
+					"fill": "#57A075"
+				}, null),
+				createVNode("rect", {
+					"x": "48",
+					"y": "32",
+					"width": "8",
+					"height": "8",
+					"fill": "#3F855C"
+				}, null),
+				createVNode("rect", {
+					"x": "48",
+					"y": "40",
+					"width": "8",
+					"height": "8",
+					"fill": "#306948"
+				}, null),
+				createVNode("rect", {
+					"x": "48",
+					"y": "48",
+					"width": "8",
+					"height": "8",
+					"fill": "#235136"
+				}, null),
+				createVNode("rect", {
+					"x": "48",
+					"y": "56",
+					"width": "8",
+					"height": "8",
+					"fill": "#163724"
+				}, null),
+				createVNode("rect", {
+					"x": "32",
+					"width": "8",
+					"height": "8",
+					"fill": "#F8DCCA"
+				}, null),
+				createVNode("rect", {
+					"x": "32",
+					"y": "8",
+					"width": "8",
+					"height": "8",
+					"fill": "#F3BA94"
+				}, null),
+				createVNode("rect", {
+					"x": "32",
+					"y": "16",
+					"width": "8",
+					"height": "8",
+					"fill": "#EC9B66"
+				}, null),
+				createVNode("rect", {
+					"x": "32",
+					"y": "24",
+					"width": "8",
+					"height": "8",
+					"fill": "#D97E40"
+				}, null),
+				createVNode("rect", {
+					"x": "32",
+					"y": "32",
+					"width": "8",
+					"height": "8",
+					"fill": "#B9642A"
+				}, null),
+				createVNode("rect", {
+					"x": "32",
+					"y": "40",
+					"width": "8",
+					"height": "8",
+					"fill": "#944A1A"
+				}, null),
+				createVNode("rect", {
+					"x": "32",
+					"y": "48",
+					"width": "8",
+					"height": "8",
+					"fill": "#713712"
+				}, null),
+				createVNode("rect", {
+					"x": "32",
+					"y": "56",
+					"width": "8",
+					"height": "8",
+					"fill": "#51270A"
+				}, null),
+				createVNode("rect", {
+					"x": "56",
+					"width": "8",
+					"height": "8",
+					"fill": "#D5E3FC"
+				}, null),
+				createVNode("rect", {
+					"x": "56",
+					"y": "8",
+					"width": "8",
+					"height": "8",
+					"fill": "#A3C7FA"
+				}, null),
+				createVNode("rect", {
+					"x": "56",
+					"y": "16",
+					"width": "8",
+					"height": "8",
+					"fill": "#6EAAF8"
+				}, null),
+				createVNode("rect", {
+					"x": "56",
+					"y": "24",
+					"width": "8",
+					"height": "8",
+					"fill": "#4C91E7"
+				}, null),
+				createVNode("rect", {
+					"x": "56",
+					"y": "32",
+					"width": "8",
+					"height": "8",
+					"fill": "#3577C8"
+				}, null),
+				createVNode("rect", {
+					"x": "56",
+					"y": "40",
+					"width": "8",
+					"height": "8",
+					"fill": "#295EA0"
+				}, null),
+				createVNode("rect", {
+					"x": "56",
+					"y": "48",
+					"width": "8",
+					"height": "8",
+					"fill": "#1C4679"
+				}, null),
+				createVNode("rect", {
+					"x": "56",
+					"y": "56",
+					"width": "8",
+					"height": "8",
+					"fill": "#123258"
+				}, null),
+				createVNode("rect", {
+					"x": "24",
+					"width": "8",
+					"height": "8",
+					"fill": "#F8DADB"
+				}, null),
+				createVNode("rect", {
+					"x": "24",
+					"y": "8",
+					"width": "8",
+					"height": "8",
+					"fill": "#F1B2B3"
+				}, null),
+				createVNode("rect", {
+					"x": "24",
+					"y": "16",
+					"width": "8",
+					"height": "8",
+					"fill": "#ED8B8D"
+				}, null),
+				createVNode("rect", {
+					"x": "24",
+					"y": "24",
+					"width": "8",
+					"height": "8",
+					"fill": "#D96B6D"
+				}, null),
+				createVNode("rect", {
+					"x": "24",
+					"y": "32",
+					"width": "8",
+					"height": "8",
+					"fill": "#BD5156"
+				}, null),
+				createVNode("rect", {
+					"x": "24",
+					"y": "40",
+					"width": "8",
+					"height": "8",
+					"fill": "#96373C"
+				}, null),
+				createVNode("rect", {
+					"x": "24",
+					"y": "48",
+					"width": "8",
+					"height": "8",
+					"fill": "#752027"
+				}, null),
+				createVNode("rect", {
+					"x": "24",
+					"y": "56",
+					"width": "8",
+					"height": "8",
+					"fill": "#581119"
+				}, null),
+				createVNode("rect", {
+					"x": "8",
+					"width": "8",
+					"height": "8",
+					"fill": "#EBDDFC"
+				}, null),
+				createVNode("rect", {
+					"x": "8",
+					"y": "8",
+					"width": "8",
+					"height": "8",
+					"fill": "#D6BDFA"
+				}, null),
+				createVNode("rect", {
+					"x": "8",
+					"y": "16",
+					"width": "8",
+					"height": "8",
+					"fill": "#BE9AF8"
+				}, null),
+				createVNode("rect", {
+					"x": "8",
+					"y": "24",
+					"width": "8",
+					"height": "8",
+					"fill": "#A079E4"
+				}, null),
+				createVNode("rect", {
+					"x": "8",
+					"y": "32",
+					"width": "8",
+					"height": "8",
+					"fill": "#8862CA"
+				}, null),
+				createVNode("rect", {
+					"x": "8",
+					"y": "40",
+					"width": "8",
+					"height": "8",
+					"fill": "#6A44AB"
+				}, null),
+				createVNode("rect", {
+					"x": "8",
+					"y": "48",
+					"width": "8",
+					"height": "8",
+					"fill": "#512A91"
+				}, null),
+				createVNode("rect", {
+					"x": "8",
+					"y": "56",
+					"width": "8",
+					"height": "8",
+					"fill": "#360F72"
+				}, null),
+				createVNode("rect", {
+					"x": "40",
+					"width": "8",
+					"height": "8",
+					"fill": "#FBE8BF"
+				}, null),
+				createVNode("rect", {
+					"x": "40",
+					"y": "8",
+					"width": "8",
+					"height": "8",
+					"fill": "#F7D582"
+				}, null),
+				createVNode("rect", {
+					"x": "40",
+					"y": "16",
+					"width": "8",
+					"height": "8",
+					"fill": "#ECBB46"
+				}, null),
+				createVNode("rect", {
+					"x": "40",
+					"y": "24",
+					"width": "8",
+					"height": "8",
+					"fill": "#CA9E35"
+				}, null),
+				createVNode("rect", {
+					"x": "40",
+					"y": "32",
+					"width": "8",
+					"height": "8",
+					"fill": "#9B7926"
+				}, null),
+				createVNode("rect", {
+					"x": "40",
+					"y": "40",
+					"width": "8",
+					"height": "8",
+					"fill": "#74591A"
+				}, null),
+				createVNode("rect", {
+					"x": "40",
+					"y": "48",
+					"width": "8",
+					"height": "8",
+					"fill": "#584312"
+				}, null),
+				createVNode("rect", {
+					"x": "40",
+					"y": "56",
+					"width": "8",
+					"height": "8",
+					"fill": "#3D2E09"
+				}, null),
+				createVNode("rect", {
+					"x": "16",
+					"width": "8",
+					"height": "8",
+					"fill": "#F8D9EA"
+				}, null),
+				createVNode("rect", {
+					"x": "16",
+					"y": "8",
+					"width": "8",
+					"height": "8",
+					"fill": "#F1AED7"
+				}, null),
+				createVNode("rect", {
+					"x": "16",
+					"y": "16",
+					"width": "8",
+					"height": "8",
+					"fill": "#EC7EC7"
+				}, null),
+				createVNode("rect", {
+					"x": "16",
+					"y": "24",
+					"width": "8",
+					"height": "8",
+					"fill": "#D95EB1"
+				}, null),
+				createVNode("rect", {
+					"x": "16",
+					"y": "32",
+					"width": "8",
+					"height": "8",
+					"fill": "#BB4998"
+				}, null),
+				createVNode("rect", {
+					"x": "16",
+					"y": "40",
+					"width": "8",
+					"height": "8",
+					"fill": "#943477"
+				}, null),
+				createVNode("rect", {
+					"x": "16",
+					"y": "48",
+					"width": "8",
+					"height": "8",
+					"fill": "#72215B"
+				}, null),
+				createVNode("rect", {
+					"x": "16",
+					"y": "56",
+					"width": "8",
+					"height": "8",
+					"fill": "#571042"
+				}, null)
+			]);
+		};
+	}
+});
+
+//#endregion
+export { ColorSvg_default as default };

package/dist/ThemeEditor/components/Tokens/Colors/Primary.d.ts

@@ -0,0 +1,7 @@
+import * as vue232 from "vue";
+import * as vue_jsx_runtime10 from "vue/jsx-runtime";
+
+//#region src/ThemeEditor/components/Tokens/Colors/Primary.d.ts
+declare const _default: vue232.DefineComponent<{}, () => vue_jsx_runtime10.JSX.Element, {}, {}, {}, vue232.ComponentOptionsMixin, vue232.ComponentOptionsMixin, {}, string, vue232.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue232.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/ThemeEditor/components/Tokens/Colors/Primary.js

@@ -0,0 +1,58 @@
+import { colorList } from "../../../utils/config.js";
+import { useThemeEditorContext } from "../../../context.js";
+import { useThemeTokensStateContext } from "../context.js";
+import { Body } from "../../../index.js";
+import { computed, createTextVNode, createVNode, defineComponent } from "vue";
+import { useProConfigContext } from "@gx-design-vue/pro-provider";
+import { classNames } from "@gx-design-vue/pro-utils";
+import { Tooltip } from "ant-design-vue";
+import { CheckOutlined, EditOutlined } from "@ant-design/icons-vue";
+import { AggregationColor, GColorPicker } from "@gx-design-vue/color-picker";
+
+//#region src/ThemeEditor/components/Tokens/Colors/Primary.tsx
+var Primary_default = /* @__PURE__ */ defineComponent({ setup() {
+	const { prefixCls, hashId, tokens } = useThemeEditorContext();
+	const { onChange } = useThemeTokensStateContext();
+	const { token } = useProConfigContext();
+	const colorsState = computed(() => {
+		return { colorPrimary: tokens.value.colorPrimary || token.value.colorPrimary };
+	});
+	const colorPrimaryStr = computed(() => {
+		const colors = new AggregationColor(colorsState.value.colorPrimary);
+		return {
+			hsb: colors.toHsbString(),
+			rgb: colors.toRgbString(),
+			hex: colors.toHexString()
+		};
+	});
+	return () => {
+		return createVNode(Body, {
+			"hashId": hashId.value,
+			"prefixCls": prefixCls,
+			"title": "主题色"
+		}, { default: () => [createVNode("div", { "class": classNames(`${prefixCls}-color-list`, hashId.value) }, [colorList.map((item) => createVNode(Tooltip, {
+			"title": item.title,
+			"key": item.key
+		}, { default: () => [createVNode("div", {
+			"class": classNames(`${prefixCls}-color-item`, hashId.value),
+			"style": { background: item.color },
+			"onClick": () => {
+				onChange?.({ colorPrimary: item.color });
+			}
+		}, [item.color.toLowerCase() === colorsState.value.colorPrimary.toLowerCase() ? createVNode(CheckOutlined, { "style": {
+			color: token.value.colorWhite,
+			fontSize: "12px"
+		} }, null) : null])] }))]), createVNode(GColorPicker, {
+			"value": colorsState.value.colorPrimary,
+			"onChangeComplete": (c) => {
+				onChange?.({ colorPrimary: c.toHexString() });
+			}
+		}, { default: () => [createVNode("div", { "class": classNames(`${prefixCls}-color-picker`, hashId.value) }, [createVNode("div", { "class": classNames(`${prefixCls}-color-picker-inner`, hashId.value) }, [createVNode("div", {
+			"class": classNames(`${prefixCls}-color-picker-top`, hashId.value),
+			"style": { background: colorsState.value.colorPrimary }
+		}, [createVNode("p", null, [createTextVNode("hsb："), colorPrimaryStr.value.hsb]), createVNode("p", null, [createTextVNode("rgb："), colorPrimaryStr.value.rgb])]), createVNode("div", { "class": classNames(`${prefixCls}-color-picker-bottom`, hashId.value) }, [createVNode("div", null, [createVNode("p", null, [createTextVNode("自定义主题颜色")]), createVNode("p", null, [createTextVNode("HEX:"), colorPrimaryStr.value.hex])]), createVNode(EditOutlined, { "style": { fontSize: "18px" } }, null)])])])] })] });
+	};
+} });
+
+//#endregion
+export { Primary_default as default };

package/dist/ThemeEditor/components/Tokens/Colors/Side.d.ts

@@ -0,0 +1,7 @@
+import * as vue227 from "vue";
+import * as vue_jsx_runtime9 from "vue/jsx-runtime";
+
+//#region src/ThemeEditor/components/Tokens/Colors/Side.d.ts
+declare const _default: vue227.DefineComponent<{}, () => vue_jsx_runtime9.JSX.Element, {}, {}, {}, vue227.ComponentOptionsMixin, vue227.ComponentOptionsMixin, {}, string, vue227.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue227.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/ThemeEditor/components/Tokens/Colors/Side.js

@@ -0,0 +1,18 @@
+import { useThemeEditorContext } from "../../../context.js";
+import { Body } from "../../../index.js";
+import { createVNode, defineComponent } from "vue";
+
+//#region src/ThemeEditor/components/Tokens/Colors/Side.tsx
+var Side_default = /* @__PURE__ */ defineComponent({ setup() {
+	const { prefixCls, hashId } = useThemeEditorContext();
+	return () => {
+		return createVNode(Body, {
+			"hashId": hashId.value,
+			"prefixCls": prefixCls,
+			"title": "侧边主题色"
+		}, null);
+	};
+} });
+
+//#endregion
+export { Side_default as default };

package/dist/ThemeEditor/components/Tokens/Colors/index.d.ts

@@ -0,0 +1,7 @@
+import * as vue285 from "vue";
+import * as vue_jsx_runtime14 from "vue/jsx-runtime";
+
+//#region src/ThemeEditor/components/Tokens/Colors/index.d.ts
+declare const _default: vue285.DefineComponent<{}, () => vue_jsx_runtime14.JSX.Element, {}, {}, {}, vue285.ComponentOptionsMixin, vue285.ComponentOptionsMixin, {}, string, vue285.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue285.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/ThemeEditor/components/Tokens/Colors/index.js

@@ -0,0 +1,15 @@
+import Primary_default from "./Primary.js";
+import Side_default from "./Side.js";
+import { createVNode, defineComponent } from "vue";
+import { unit, useProConfigContext } from "@gx-design-vue/pro-provider";
+
+//#region src/ThemeEditor/components/Tokens/Colors/index.tsx
+var Colors_default = /* @__PURE__ */ defineComponent({ setup() {
+	const { token } = useProConfigContext();
+	return () => {
+		return createVNode("div", { "style": { padding: unit(token.value.padding) } }, [createVNode(Primary_default, null, null), createVNode(Side_default, null, null)]);
+	};
+} });
+
+//#endregion
+export { Colors_default as default };

package/dist/ThemeEditor/components/Tokens/context.d.ts

@@ -0,0 +1,9 @@
+import { DeepPartial, ProAliasToken } from "@gx-design-vue/pro-provider";
+
+//#region src/ThemeEditor/components/Tokens/context.d.ts
+interface TokensStateContext {
+  onChange: ((val: DeepPartial<ProAliasToken>) => void) | undefined;
+}
+declare const provideTokensStateContext: (value: TokensStateContext) => void, useThemeTokensStateContext: (injectDefaultValue?: TokensStateContext) => TokensStateContext;
+//#endregion
+export { TokensStateContext, provideTokensStateContext, useThemeTokensStateContext };

package/dist/ThemeEditor/components/Tokens/context.js

@@ -0,0 +1,7 @@
+import { useContext } from "@gx-design-vue/context";
+
+//#region src/ThemeEditor/components/Tokens/context.ts
+const { provideContext: provideTokensStateContext, useInjectContext: useThemeTokensStateContext } = useContext("tokens-state");
+
+//#endregion
+export { provideTokensStateContext, useThemeTokensStateContext };