@antdv-vue/pro-layout 0.0.0-stage → 2.0.3

package/dist/components/SettingDrawer/index.js

@@ -0,0 +1,510 @@
+import { genStringToTheme } from "../../utils/index.js";
+import defaultSettings from "../../defaultSettings.js";
+import BlockCheckbox from "./BlockCheckbox.js";
+import { GroupIcon } from "./icon/group.js";
+import { SubIcon } from "./icon/sub.js";
+import { LayoutSetting, getFormatMessage, renderLayoutSettingItem } from "./LayoutChange.js";
+import RegionalSetting from "./RegionalChange.js";
+import style_default from "./style/index.js";
+import ThemeColor from "./ThemeColor.js";
+import { Fragment, Teleport, computed, createVNode, defineComponent, isVNode, onBeforeUnmount, reactive, ref, shallowRef, watch } from "vue";
+import { CopyToClipboard, useMountMergeState } from "@antdv-vue/pro-utils";
+import { classNames, omit } from "@v-c/util";
+import { Alert, Button, Divider, Drawer, Listy, Switch, message } from "antdv-next";
+import { useConfig } from "antdv-next/config-provider/context";
+import { CloseOutlined, CopyOutlined, NotificationOutlined, SettingOutlined } from "@antdv-next/icons";
+//#region src/components/SettingDrawer/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const colorWeakStates = /* @__PURE__ */ new WeakMap();
+function acquireColorWeak(ownerDocument, hashClass) {
+	const { body } = ownerDocument;
+	let state = colorWeakStates.get(ownerDocument);
+	if (!state) {
+		state = {
+			count: 0,
+			hadAttribute: body.hasAttribute("data-color-weak"),
+			hashClasses: /* @__PURE__ */ new Map()
+		};
+		colorWeakStates.set(ownerDocument, state);
+	}
+	state.count += 1;
+	body.setAttribute("data-color-weak", "");
+	if (hashClass) {
+		const hashState = state.hashClasses.get(hashClass) || {
+			count: 0,
+			existed: body.classList.contains(hashClass)
+		};
+		hashState.count += 1;
+		state.hashClasses.set(hashClass, hashState);
+		body.classList.add(hashClass);
+	}
+}
+function releaseColorWeak(ownerDocument, hashClass) {
+	const state = colorWeakStates.get(ownerDocument);
+	if (!state) return;
+	const { body } = ownerDocument;
+	state.count = Math.max(0, state.count - 1);
+	if (hashClass) {
+		const hashState = state.hashClasses.get(hashClass);
+		if (hashState) {
+			hashState.count = Math.max(0, hashState.count - 1);
+			if (hashState.count === 0) {
+				if (!hashState.existed) body.classList.remove(hashClass);
+				state.hashClasses.delete(hashClass);
+			}
+		}
+	}
+	if (state.count === 0) {
+		if (!state.hadAttribute) body.removeAttribute("data-color-weak");
+		colorWeakStates.delete(ownerDocument);
+	}
+}
+const SeetingBody = ({ hashId, prefixCls, title, cssVarCls }, { slots }) => createVNode("div", { "style": { marginBlockEnd: "12px" } }, [createVNode("h3", { "class": classNames(`${prefixCls}-body-title`, hashId, cssVarCls) }, [title]), slots.default?.()]);
+function genCopySettingJson(settingState) {
+	return JSON.stringify(omit({
+		...settingState,
+		colorPrimary: settingState.colorPrimary
+	}, ["colorWeak"]), null, 2);
+}
+/**
+* 可视化配置组件
+*
+* @param props
+*/
+const SettingDrawer = /* @__PURE__ */ defineComponent((props) => {
+	const config = useConfig();
+	const [message$1, ContextHolder] = message.useMessage();
+	const hideMessage = ref();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-setting-drawer`);
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	const formatMessage = getFormatMessage();
+	const drawerRef = shallowRef(null);
+	const [open, setOpen] = useMountMergeState(false, {
+		value: props.collapsed === void 0 ? void 0 : ref(props.collapsed),
+		onChange: (value) => props["onUpdate:collapsed"]?.(value) && props.onCollapse?.(value)
+	});
+	const className = computed(() => classNames(baseClassName.value, hashId?.value, cssVarCls?.value, {
+		[`${baseClassName.value}-collapsed`]: !open.value,
+		[`${baseClassName.value}-realDark`]: props.settings?.navTheme === "realDark"
+	}));
+	const [settingState, setSettingState] = useMountMergeState(defaultSettings, {
+		value: props.settings === void 0 ? void 0 : computed(() => props.settings || {}),
+		onChange: props.onSettingChange
+	});
+	const nextState = reactive(settingState.value);
+	let ownsColorWeak = false;
+	let ownedHashClass = "";
+	const syncColorWeak = (enabled) => {
+		if (typeof document === "undefined") return;
+		if (enabled && !ownsColorWeak) {
+			ownedHashClass = hashId?.value || "";
+			acquireColorWeak(document, ownedHashClass);
+			ownsColorWeak = true;
+		} else if (!enabled && ownsColorWeak) {
+			releaseColorWeak(document, ownedHashClass);
+			ownsColorWeak = false;
+			ownedHashClass = "";
+		}
+	};
+	watch(() => Boolean(settingState.value.colorWeak), syncColorWeak, { immediate: true });
+	onBeforeUnmount(() => {
+		if (ownsColorWeak) releaseColorWeak(document, ownedHashClass);
+	});
+	/**
+	* 修改设置
+	*
+	* @param key
+	* @param value
+	*/
+	const changeSetting = (key, value) => {
+		nextState[key] = value;
+		if (key === "layout") {
+			nextState.contentWidth = value === "top" ? "Fixed" : "Fluid";
+			if (![
+				"mix",
+				"side",
+				"left"
+			].includes(value)) nextState.siderMenuType = "sub";
+		}
+		if (key === "layout" && value !== "mix") nextState.splitMenus = false;
+		if (key === "layout" && value === "mix") nextState.fixedHeader = true;
+		if (key === "layout" && value === "left") {
+			nextState.fixedHeader = true;
+			nextState.splitMenus = true;
+		}
+		delete nextState.fixSiderbar;
+		delete nextState.menu;
+		delete nextState.title;
+		delete nextState.iconfontUrl;
+		delete nextState.logo;
+		delete nextState.pwa;
+		setSettingState({
+			...settingState.value,
+			...nextState
+		});
+	};
+	const otherSettingsOptions = computed(() => {
+		const { otherSettingsRender } = props;
+		if (otherSettingsRender === false) return [];
+		let doms = [{
+			title: formatMessage({
+				id: "app.setting.weakmode",
+				defaultMessage: "色弱模式"
+			}),
+			action: createVNode(Switch, {
+				"size": "small",
+				"class": "color-weak",
+				"checked": !!settingState.value.colorWeak,
+				"onUpdate:checked": (checked) => changeSetting("colorWeak", checked)
+			}, null)
+		}];
+		if (otherSettingsRender && typeof otherSettingsRender === "function") doms = otherSettingsRender({
+			settings: { ...settingState.value },
+			changeSetting,
+			items: doms
+		});
+		return doms;
+	});
+	return () => {
+		let _slot;
+		const { colorList = [
+			{
+				key: "techBlue",
+				color: "#1677FF"
+			},
+			{
+				key: "daybreak",
+				color: "#1890FF"
+			},
+			{
+				key: "dust",
+				color: "#F5222D"
+			},
+			{
+				key: "volcano",
+				color: "#FA541C"
+			},
+			{
+				key: "sunset",
+				color: "#FAAD14"
+			},
+			{
+				key: "cyan",
+				color: "#13C2C2"
+			},
+			{
+				key: "green",
+				color: "#52C41A"
+			},
+			{
+				key: "geekblue",
+				color: "#2F54EB"
+			},
+			{
+				key: "purple",
+				color: "#722ED1"
+			}
+		], hideCopyButton, hideHintAlert } = props;
+		const copyMessage = formatMessage({
+			id: "app.setting.copyinfo",
+			defaultMessage: "拷贝成功，请到 src/defaultSettings.js 中替换默认配置"
+		});
+		const loadingMessage = formatMessage({
+			id: "app.setting.loading",
+			defaultMessage: "正在加载主题"
+		});
+		return createVNode(Fragment, null, [createVNode(Teleport, { "to": "body" }, { default: () => [!open.value && createVNode("div", null, [createVNode("div", { "class": classNames(`${baseClassName.value}-handle-container`, hashId?.value, cssVarCls?.value) }, [createVNode("div", {
+			"class": classNames(`${baseClassName.value}-handle`, hashId?.value, cssVarCls?.value),
+			"onClick": () => setOpen(!open.value)
+		}, [createVNode(SettingOutlined, {
+			"spin": true,
+			"style": {
+				color: "rgb(255,255,255)",
+				fontSize: "20px"
+			}
+		}, null)])])])] }), createVNode(Drawer, {
+			"open": open.value,
+			"closable": false,
+			"size": 300,
+			"rootClass": className.value,
+			"onClose": () => setOpen(false),
+			"placement": "right",
+			"drawerRender": (dom) => {
+				return createVNode(Fragment, null, [createVNode("div", {
+					"ref": drawerRef,
+					"class": classNames(`${baseClassName.value}-handle`, hashId?.value, cssVarCls?.value),
+					"onClick": () => setOpen(!open.value)
+				}, [!open.value ? createVNode(SettingOutlined, {
+					"spin": true,
+					"style": {
+						color: "rgb(255,255,255)",
+						fontSize: "20px"
+					}
+				}, null) : createVNode(CloseOutlined, { "style": {
+					color: "rgb(255,255,255)",
+					fontSize: "20px"
+				} }, null)]), dom]);
+			}
+		}, { default: () => [createVNode("div", { "class": classNames(`${baseClassName.value}-content`, hashId?.value, cssVarCls?.value) }, [
+			createVNode(SeetingBody, {
+				"prefixCls": baseClassName.value,
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"title": formatMessage({
+					id: "app.setting.pagestyle",
+					defaultMessage: "整体风格设置"
+				})
+			}, { default: () => [createVNode(BlockCheckbox, {
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"prefixCls": baseClassName.value,
+				"list": [
+					{
+						key: "light",
+						title: formatMessage({
+							id: "app.setting.pagestyle.light",
+							defaultMessage: "亮色菜单风格"
+						})
+					},
+					{
+						key: "dark",
+						title: formatMessage({
+							id: "app.setting.pagestyle.dark",
+							defaultMessage: "暗色菜单风格"
+						})
+					},
+					{
+						key: "realDark",
+						title: formatMessage({
+							id: "app.setting.pagestyle.realdark",
+							defaultMessage: "暗色风格"
+						})
+					}
+				],
+				"configType": "theme",
+				"key": "navTheme",
+				"value": settingState.value.navTheme,
+				"onChange": (value) => changeSetting("navTheme", value)
+			}, null)] }),
+			colorList !== false && createVNode(SeetingBody, {
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"title": formatMessage({
+					id: "app.setting.themecolor",
+					defaultMessage: "主题色"
+				}),
+				"prefixCls": baseClassName.value
+			}, { default: () => [createVNode(ThemeColor, {
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"prefixCls": baseClassName.value,
+				"colorList": colorList,
+				"formatMessage": formatMessage,
+				"value": genStringToTheme(settingState.value.colorPrimary),
+				"onChange": async (color) => {
+					if (color !== settingState.value.colorPrimary) hideMessage.value = message.loading(loadingMessage, 0);
+					changeSetting("colorPrimary", color);
+					if (hideMessage.value) hideMessage.value?.();
+				}
+			}, null)] }),
+			createVNode(Divider, null, null),
+			createVNode(SeetingBody, {
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"title": formatMessage({
+					id: "app.setting.navigationmode",
+					defaultMessage: "导航模式"
+				}),
+				"prefixCls": baseClassName.value
+			}, { default: () => [createVNode(BlockCheckbox, {
+				"prefixCls": baseClassName.value,
+				"value": settingState.value.layout,
+				"key": "layout",
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"configType": "layout",
+				"list": [
+					{
+						key: "side",
+						title: formatMessage({
+							id: "app.setting.sidemenu",
+							defaultMessage: "侧边菜单布局"
+						})
+					},
+					{
+						key: "top",
+						title: formatMessage({
+							id: "app.setting.topmenu",
+							defaultMessage: "顶部菜单布局"
+						})
+					},
+					{
+						key: "mix",
+						title: formatMessage({
+							id: "app.setting.mixmenu",
+							defaultMessage: "混合菜单布局"
+						})
+					},
+					{
+						key: "left",
+						title: formatMessage({
+							id: "app.setting.leftmenu",
+							defaultMessage: "左侧混合布局"
+						})
+					}
+				],
+				"onChange": (value) => changeSetting("layout", value)
+			}, null)] }),
+			settingState.value.layout === "side" || settingState.value.layout === "mix" || settingState.value.layout === "left" ? createVNode(SeetingBody, {
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"prefixCls": baseClassName.value,
+				"title": formatMessage({
+					id: "app.setting.sidermenutype",
+					defaultMessage: "侧边菜单类型"
+				})
+			}, { default: () => [createVNode(BlockCheckbox, {
+				"prefixCls": baseClassName.value,
+				"value": settingState.value.siderMenuType,
+				"key": "siderMenuType",
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"configType": "siderMenuType",
+				"list": [{
+					key: "sub",
+					icon: createVNode(SubIcon, { "dark": props.settings?.navTheme === "realDark" }, null),
+					title: formatMessage({
+						id: "app.setting.sidermenutype-sub",
+						defaultMessage: "经典模式"
+					})
+				}, {
+					key: "group",
+					icon: createVNode(GroupIcon, { "dark": props.settings?.navTheme === "realDark" }, null),
+					title: formatMessage({
+						id: "app.setting.sidermenutype-group",
+						defaultMessage: "分组模式"
+					})
+				}],
+				"onChange": (value) => changeSetting("siderMenuType", value)
+			}, null)] }) : null,
+			createVNode(LayoutSetting, {
+				"prefixCls": baseClassName.value,
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"formatMessage": formatMessage,
+				"settings": { ...settingState.value },
+				"changeSetting": changeSetting
+			}, null),
+			createVNode(Divider, null, null),
+			createVNode(SeetingBody, {
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"prefixCls": baseClassName.value,
+				"title": formatMessage({
+					id: "app.setting.regionalsettings",
+					defaultMessage: "内容区域"
+				})
+			}, { default: () => [createVNode(RegionalSetting, {
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"prefixCls": baseClassName.value,
+				"formatMessage": formatMessage,
+				"settings": { ...settingState.value },
+				"changeSetting": changeSetting
+			}, null)] }),
+			otherSettingsOptions.value.length > 0 && createVNode(Fragment, null, [createVNode(Divider, null, null), createVNode(SeetingBody, {
+				"hashId": hashId?.value,
+				"cssVarCls": cssVarCls?.value,
+				"prefixCls": baseClassName.value,
+				"title": formatMessage({
+					id: "app.setting.othersettings",
+					defaultMessage: "其他设置"
+				})
+			}, { default: () => [createVNode(Listy, {
+				"class": classNames(`${baseClassName.value}-list`, hashId?.value, cssVarCls?.value),
+				"rowKey": (item) => item.title,
+				"itemRender": (item) => renderLayoutSettingItem(item),
+				"items": otherSettingsOptions.value,
+				"styles": { item: {
+					borderBottom: 0,
+					paddingInlineStart: 0,
+					paddingInlineEnd: 0
+				} }
+			}, null)] })]),
+			hideHintAlert && hideCopyButton ? null : createVNode(Divider, null, null),
+			hideHintAlert ? null : createVNode(Alert, {
+				"type": "warning",
+				"message": formatMessage({
+					id: "app.setting.production.hint",
+					defaultMessage: "配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件"
+				}),
+				"icon": createVNode(NotificationOutlined, null, null),
+				"showIcon": true,
+				"style": { marginBlockEnd: "16px" }
+			}, null),
+			hideCopyButton ? null : createVNode(CopyToClipboard, {
+				"text": genCopySettingJson(settingState.value),
+				"onCopy": () => message$1.info(copyMessage)
+			}, { default: () => [createVNode(ContextHolder, null, null), createVNode(Button, {
+				"block": true,
+				"icon": createVNode(CopyOutlined, null, null),
+				"style": { marginBlockEnd: "24px" }
+			}, _isSlot(_slot = formatMessage({ id: "app.setting.copy" })) ? _slot : { default: () => [_slot] })] })
+		])] })]);
+	};
+}, {
+	props: {
+		settings: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		collapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		colorList: {
+			type: [Array, Boolean],
+			required: false,
+			default: void 0
+		},
+		hideHintAlert: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		hideCopyButton: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onSettingChange: {
+			type: Function,
+			required: false
+		},
+		onCollapse: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:collapsed": {
+			type: Function,
+			required: false
+		},
+		otherSettingsRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "SettingDrawer",
+	inheritAttrs: false
+});
+//#endregion
+export { SettingDrawer as default };

package/dist/components/SettingDrawer/style/index.d.ts

@@ -0,0 +1,9 @@
+import * as _$vue from "vue";
+import { GenerateStyle, ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/SettingDrawer/style/index.d.ts
+interface SettingDrawerToken extends ProAliasCssVarToken {}
+declare const genSettingDrawerStyle: GenerateStyle<SettingDrawerToken>;
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { SettingDrawerToken, _default as default, genSettingDrawerStyle };