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

package/dist/ThemeEditor/style/theme.js

@@ -0,0 +1,71 @@
+import { TinyColor } from "@ctrl/tinycolor";
+
+//#region src/ThemeEditor/style/theme.ts
+const proThemeSetting = (token) => {
+	const componentCls = `${token.componentCls}`;
+	const subTitleColor = new TinyColor(new TinyColor(token.colorWhite).setAlpha(.55).toRgbString());
+	return { [componentCls]: {
+		"&-color-list": {
+			display: "flex",
+			gap: 8,
+			marginBlockEnd: token.margin
+		},
+		"&-color-item": {
+			width: 20,
+			height: 20,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: 2,
+			cursor: "pointer",
+			color: token.colorWhite,
+			fontWeight: "bold"
+		},
+		"&-color-picker": {
+			marginBlock: token.marginXS,
+			padding: 2,
+			height: 106,
+			background: `conic-gradient(from 180deg at 50% 50%,#00c3ff 0,${token.colorPrimary} 120deg,${token.colorPrimary} 180deg,#4ceb1b 290.62deg,#00c3ff 1turn)`,
+			borderRadius: 9,
+			cursor: "pointer",
+			transition: `padding ${token.motionDurationMid}`,
+			"&:hover": { padding: 4 },
+			"&-inner": {
+				backgroundColor: token.colorBgElevated,
+				padding: "2px 2px 4px 2px",
+				borderRadius: 7,
+				maxHeight: "100%"
+			},
+			"&-top": {
+				width: "100%",
+				borderRadius: 6,
+				padding: "4px 8px",
+				p: {
+					color: subTitleColor.toString(),
+					lineHeight: "20px",
+					fontSize: token.fontSizeSM,
+					margin: 0
+				}
+			},
+			"&-bottom": {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				padding: "4px 8px",
+				p: {
+					margin: 0,
+					fontSize: token.fontSize,
+					lineHeight: "22px",
+					"&:first-child": {
+						color: token.colorText,
+						fontWeight: 600
+					},
+					"&:last-child": { color: token.colorTextDescription }
+				}
+			}
+		}
+	} };
+};
+
+//#endregion
+export { proThemeSetting };

package/dist/ThemeEditor/utils/config.d.ts

@@ -0,0 +1,37 @@
+import { LayoutConfig } from "../props.js";
+import { BaseTheme } from "@gx-design-vue/context";
+import * as vue_jsx_runtime11 from "vue/jsx-runtime";
+
+//#region src/ThemeEditor/utils/config.d.ts
+type MergerSettingsType<T> = Partial<T> & {
+  colorWeak?: boolean;
+  progress?: boolean;
+};
+type SettingsState = MergerSettingsType<LayoutConfig>;
+declare const systemTheme: {
+  value: string;
+  label: () => vue_jsx_runtime11.JSX.Element;
+}[];
+declare const theme: {
+  key: BaseTheme;
+  title: string;
+}[];
+declare const layout: {
+  key: string;
+  title: string;
+}[];
+declare const layoutLabelRadioList: {
+  label: keyof SettingsState;
+  title: string;
+}[];
+declare const othersLabelRadioList: {
+  label: keyof SettingsState;
+  title: string;
+}[];
+declare const colorList: {
+  key: string;
+  color: string;
+  title: string;
+}[];
+//#endregion
+export { MergerSettingsType, SettingsState, colorList, layout, layoutLabelRadioList, othersLabelRadioList, systemTheme, theme };

package/dist/ThemeEditor/utils/config.js

@@ -0,0 +1,132 @@
+import Icon_default from "../../Icon/index.js";
+import { createTextVNode, createVNode } from "vue";
+import { DesktopOutlined } from "@ant-design/icons-vue";
+
+//#region src/ThemeEditor/utils/config.tsx
+const systemTheme = [
+	{
+		value: "light",
+		label: () => createVNode("div", { "style": {
+			display: "flex",
+			alignItems: "center",
+			gap: "6px"
+		} }, [createVNode(Icon_default, {
+			"type": "moon",
+			"style": { fontSize: "15px" }
+		}, null), createTextVNode("亮色")])
+	},
+	{
+		value: "dark",
+		label: () => createVNode("div", { "style": {
+			display: "flex",
+			alignItems: "center",
+			gap: "6px"
+		} }, [createVNode(Icon_default, {
+			"type": "sunny",
+			"style": { fontSize: "15px" }
+		}, null), createTextVNode("深色")])
+	},
+	{
+		value: "system",
+		label: () => createVNode("div", { "style": {
+			display: "flex",
+			alignItems: "center",
+			gap: "6px"
+		} }, [createVNode(DesktopOutlined, null, null), createTextVNode("自动")])
+	}
+];
+const theme = [{
+	key: "light",
+	title: "亮色"
+}, {
+	key: "dark",
+	title: "深色"
+}];
+const layout = [
+	{
+		key: "side",
+		title: "侧边导航"
+	},
+	{
+		key: "mix",
+		title: "混合导航"
+	},
+	{
+		key: "top",
+		title: "顶部导航"
+	},
+	{
+		key: "wide",
+		title: "定宽导航"
+	},
+	{
+		key: "simple",
+		title: "简单导航"
+	}
+];
+const layoutLabelRadioList = [
+	{
+		label: "fixedHeader",
+		title: "固定 Header"
+	},
+	{
+		label: "fixSiderbar",
+		title: "固定侧边菜单"
+	},
+	{
+		label: "splitMenus",
+		title: "自动分割菜单"
+	}
+];
+const othersLabelRadioList = [{
+	label: "showTabsBar",
+	title: "多标签"
+}, {
+	label: "fixedTabsBar",
+	title: "固定多标签"
+}];
+const colorList = [
+	{
+		key: "techBlue",
+		color: "#1677FF",
+		title: "拂晓蓝（默认）"
+	},
+	{
+		key: "dust",
+		color: "#F5222D",
+		title: "薄暮"
+	},
+	{
+		key: "volcano",
+		color: "#FA541C",
+		title: "火山"
+	},
+	{
+		key: "sunset",
+		color: "#FAAD14",
+		title: "日暮"
+	},
+	{
+		key: "cyan",
+		color: "#13C2C2",
+		title: "明青"
+	},
+	{
+		key: "green",
+		color: "#52C41A",
+		title: "极光绿"
+	},
+	{
+		key: "geekblue",
+		color: "#2F54EB",
+		title: "极客蓝"
+	},
+	{
+		key: "purple",
+		color: "#722ED1",
+		title: "酱紫"
+	}
+];
+
+//#endregion
+export { colorList, layout, layoutLabelRadioList, othersLabelRadioList, systemTheme, theme };

package/dist/ThemeEditor/utils/index.d.ts

@@ -0,0 +1,9 @@
+import { ExtraConfigState, LayoutConfig } from "../props.js";
+import * as _gx_design_vue_pro_layout3 from "@gx-design-vue/pro-layout";
+
+//#region src/ThemeEditor/utils/index.d.ts
+type LayoutConfigDisabled = Record<keyof LayoutConfig, boolean>;
+declare function handleSettingsDisabled(config: LayoutConfig): LayoutConfigDisabled;
+declare function handleThemeConfig(config: LayoutConfig): Partial<_gx_design_vue_pro_layout3.ProLayoutConfig & ExtraConfigState>;
+//#endregion
+export { LayoutConfigDisabled, handleSettingsDisabled, handleThemeConfig };

package/dist/ThemeEditor/utils/index.js

@@ -0,0 +1,64 @@
+//#region src/ThemeEditor/utils/index.ts
+function handleSettingsDisabled(config) {
+	const keysObject = Object.keys(config).reduce((acc, current) => {
+		acc[current] = false;
+		return acc;
+	}, {});
+	if (config.layout === "mix") {
+		keysObject.fixSiderbar = true;
+		keysObject.fixedHeader = true;
+	}
+	if (config.layout === "top") {
+		keysObject.fixSiderbar = true;
+		keysObject.splitMenus = true;
+	}
+	if (config.layout === "side") keysObject.splitMenus = true;
+	if (config.layout === "simple") {
+		keysObject.splitMenus = true;
+		keysObject.fixedHeader = true;
+		keysObject.showTabsBar = true;
+		keysObject.fixedTabsBar = true;
+	}
+	if (config.layout === "wide") {
+		keysObject.splitMenus = true;
+		keysObject.fixedHeader = true;
+		keysObject.fixSiderbar = true;
+		keysObject.showTabsBar = true;
+		keysObject.fixedTabsBar = true;
+	}
+	return keysObject;
+}
+function handleThemeConfig(config) {
+	if (config.layout === "mix") {
+		config.fixSiderbar = true;
+		config.fixedHeader = true;
+		config.splitMenus = true;
+	}
+	if (config.layout === "top") {
+		config.fixSiderbar = false;
+		config.fixedHeader = true;
+		config.splitMenus = false;
+	}
+	if (config.layout === "simple") {
+		config.splitMenus = false;
+		config.showTabsBar = false;
+		config.fixedHeader = false;
+		config.fixSiderbar = false;
+	}
+	if (config.layout === "side") {
+		config.splitMenus = false;
+		config.fixedHeader = true;
+		config.fixSiderbar = true;
+	}
+	if (config.layout === "wide") {
+		config.splitMenus = false;
+		config.fixSiderbar = false;
+		config.fixedHeader = true;
+		config.showTabsBar = false;
+		config.fixedTabsBar = false;
+	}
+	return config;
+}
+
+//#endregion
+export { handleSettingsDisabled, handleThemeConfig };

package/dist/hooks/useClockTime/index.d.ts

@@ -0,0 +1,11 @@
+//#region src/hooks/useClockTime/index.d.ts
+declare function export_default(): {
+  hh: string;
+  mm: string;
+  ss: string;
+  dddd: string;
+  day: string;
+  a: string;
+};
+//#endregion
+export { export_default as default };

package/dist/hooks/useClockTime/index.js

@@ -0,0 +1,28 @@
+import { reactive } from "vue";
+import dayjs from "dayjs";
+
+//#region src/hooks/useClockTime/index.ts
+function useClockTime_default() {
+	const clockTime = reactive({
+		hh: "",
+		mm: "",
+		ss: "",
+		dddd: "",
+		day: "",
+		a: ""
+	});
+	function display_time() {
+		clockTime.hh = dayjs().format("HH");
+		clockTime.mm = dayjs().format("mm");
+		clockTime.ss = dayjs().format("ss");
+		clockTime.a = dayjs().format("a").toUpperCase();
+		clockTime.day = dayjs().format("YYYY-MM-DD");
+		clockTime.dddd = dayjs().format("dddd");
+		requestAnimationFrame(display_time);
+	}
+	requestAnimationFrame(display_time);
+	return clockTime;
+}
+
+//#endregion
+export { useClockTime_default as default };

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { AppItemProps, AppListProps, AppsLogoComponentsProps } from "./AppsLogoComponents/props.js";
+import AppsLogoIcon, { DefaultRenderLogo } from "./AppsLogoComponents/index.js";
+import { RightContentActions } from "./RightContent/props.js";
+import GlobalRightContent from "./RightContent/index.js";
+import { ExtraConfigState } from "./ThemeEditor/props.js";
+import ThemeEditor from "./ThemeEditor/index.js";
+export { AppItemProps, AppListProps, AppsLogoComponentsProps, DefaultRenderLogo, type ExtraConfigState, AppsLogoIcon as GAppsLogoComponents, ThemeEditor as GProThemeEditor, GlobalRightContent as GRightContent, type RightContentActions };

package/dist/index.js

@@ -0,0 +1,5 @@
+import AppsLogoComponents_default, { DefaultRenderLogo } from "./AppsLogoComponents/index.js";
+import RightContent_default from "./RightContent/index.js";
+import ThemeEditor_default from "./ThemeEditor/index.js";
+
+export { DefaultRenderLogo, AppsLogoComponents_default as GAppsLogoComponents, ThemeEditor_default as GProThemeEditor, RightContent_default as GRightContent };