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

package/dist/components/SiderMenu/BaseMenu.js

@@ -0,0 +1,583 @@
+import { getOpenKeysFromMenuData } from "../../utils/index.js";
+import defaultSettings from "../../defaultSettings.js";
+import { useStyle } from "./style/menu.js";
+import { Fragment, computed, createVNode, defineComponent, h, isVNode, mergeDefaults, mergeProps, resolveComponent, toRef } from "vue";
+import { isBrowser, isImg, isUrl, useEffect, useMountMergeState } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import { Menu } from "antdv-next";
+import { createFromIconfontCN } from "@antdv-next/icons";
+import toList from "antdv-next/dist/_util/toList";
+//#region src/components/SiderMenu/BaseMenu.tsx
+let IconFont = createFromIconfontCN({ scriptUrl: defaultSettings.iconfontUrl });
+function isDefineSetupFnComponentIcon(icon) {
+	return typeof icon === "boolean" || typeof icon === "string" || typeof icon === "number" || icon === null || icon === void 0;
+}
+function getIcon(icon, iconPrefixes = "icon-", className) {
+	if (!icon) return null;
+	if (typeof icon === "string" && icon !== "") {
+		if (isUrl(icon) || isImg(icon)) return createVNode("img", {
+			"width": 16,
+			"key": icon,
+			"src": icon,
+			"alt": "icon",
+			"class": className
+		}, null);
+		if (icon.startsWith(iconPrefixes)) return createVNode(IconFont, { "type": icon }, null);
+		const DynamicIcon = resolveComponent(icon);
+		return typeof DynamicIcon === "function" && h(DynamicIcon);
+	}
+	if (isVNode(icon)) return icon;
+	return typeof icon === "function" ? h(icon) : icon;
+}
+function getMenuTitleSymbol(title) {
+	if (title && typeof title === "string") return title.substring(0, 1).toUpperCase();
+	return null;
+}
+var MenuUtil = class {
+	constructor(props) {
+		this.props = props;
+		this.RouterLink = resolveComponent("RouterLink");
+	}
+	getNavMenuItems = (menusData = [], level, noGroupLevel) => menusData.map((item) => this.getSubMenuOrItem(item, level, noGroupLevel)).filter((item) => item).flat(1);
+	/** Get SubMenu or Item */
+	getSubMenuOrItem = (item, level, noGroupLevel) => {
+		const { baseClassName, collapsed, menu, subMenuItemRender, iconPrefixes, layout } = this.props;
+		const isGroup = menu?.type === "group" && layout !== "top";
+		const intlTitle = this.getIntlTitle(item);
+		const children = item?.children;
+		const menuType = isGroup && level === 0 ? "group" : void 0;
+		if (Array.isArray(children) && children.length > 0) {
+			/** Menu 第一级可以有icon，或者 isGroup 时第二级别也要有 */
+			const hasIcon = level === 0 || isGroup && level === 1;
+			const icon = !hasIcon ? null : getIcon(item.meta?.icon, iconPrefixes, classNames(`${baseClassName}-icon`, this.props.hashId, this.props.cssVarCls));
+			const defaultIcon = collapsed && hasIcon ? getMenuTitleSymbol(intlTitle) : null;
+			const defaultTitle = !isGroup || isGroup && collapsed || !menuType ? intlTitle : h("div", { class: classNames(`${baseClassName}-item-title`, this.props?.hashId, this.props.cssVarCls, {
+				[`${baseClassName}-item-title-collapsed`]: collapsed,
+				[`${baseClassName}-item-title-collapsed-level-${noGroupLevel}`]: collapsed,
+				[`${baseClassName}-group-item-title`]: menuType === "group",
+				[`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
+			}) }, [h("span", { class: classNames(`${baseClassName}-item-icon`, this.props?.hashId, this.props.cssVarCls) }, !icon && defaultIcon ? defaultIcon : isDefineSetupFnComponentIcon(icon) ? [icon] : h(icon)), h("span", { class: classNames(`${baseClassName}-item-text`, this.props?.hashId, this.props.cssVarCls) }, intlTitle)]);
+			const menuItemTitle = subMenuItemRender ? subMenuItemRender({
+				item: {
+					...item,
+					isUrl: false
+				},
+				dom: createVNode(Fragment, null, [defaultTitle]),
+				props: this.props
+			}) : defaultTitle;
+			if (isGroup && level === 0 && collapsed) return this.getNavMenuItems(children, level + 1, level);
+			const childrenList = this.getNavMenuItems(children, level + 1, isGroup && level === 0 && collapsed ? level : level + 1);
+			return [{
+				type: menuType,
+				key: item.key || item.path,
+				...isGroup && menuType === "group" ? {} : { icon: () => icon || defaultIcon },
+				label: createVNode(Fragment, null, [menuItemTitle]),
+				onClick: isGroup ? void 0 : item.onTitleClick,
+				children: childrenList
+			}, isGroup && level === 0 ? {
+				type: "divider",
+				class: classNames(`${baseClassName}-divider`, this.props.hashId, this.props.cssVarCls),
+				key: `${item.key || item.path}-group-divider`
+			} : void 0].filter(Boolean);
+		}
+		const menuItem = this.getMenuItem(item, level, noGroupLevel);
+		return {
+			class: classNames(`${baseClassName}-menu-item`, this.props.hashId, this.props.cssVarCls),
+			disabled: item.disabled,
+			key: item.key || item.path,
+			onClick: item.onTitleClick || toList(menuItem.label)[0]?.props?.onClick,
+			...menuItem
+		};
+	};
+	/**
+	*
+	* @memberof SiderMenu
+	*/
+	getMenuItem = (item, level, noGroupLevel) => {
+		const { menuItemRender, iconPrefixes, baseClassName, menu, layout, collapsed, location = { path: "/" }, onCollapse, isMobile } = this.props;
+		const menuItemTitle = this.getIntlTitle(item);
+		const itemPath = this.conversionPath(item.path || "/");
+		const isGroup = menu?.type === "group" && layout !== "top";
+		/** Menu 第一级可以有icon，或者 isGroup 时第二级别也要有 */
+		const hasIcon = level === 0 || isGroup && level === 1;
+		const icon = !hasIcon ? null : getIcon(item.meta?.icon, iconPrefixes, classNames(`${baseClassName}-icon`, this.props?.hashId, this.props.cssVarCls));
+		const defaultIcon = collapsed && hasIcon ? getMenuTitleSymbol(menuItemTitle) : null;
+		const isHttpUrl = isUrl(itemPath);
+		const target = { ...item.meta }.target || null;
+		const CustomTag = target && "a" || this.RouterLink;
+		const attrs = isHttpUrl || target ? {
+			href: item.path,
+			target
+		} : {};
+		const props = { to: {
+			name: item.name,
+			...item.meta
+		} };
+		let defaultTitle = h(Fragment, null, [h("span", { class: classNames(`${baseClassName}-item-text`, this.props?.hashId, this.props.cssVarCls) }, menuItemTitle)]);
+		if (typeof CustomTag !== "string" && CustomTag.name === "RouterLink" || typeof CustomTag === "string" && CustomTag === "a") defaultTitle = h(CustomTag, {
+			...attrs,
+			...CustomTag === "a" ? {} : props,
+			key: itemPath,
+			class: classNames(`${baseClassName}-item-title`, this.props?.hashId, this.props.cssVarCls, {
+				[`${baseClassName}-item-title-collapsed`]: collapsed,
+				[`${baseClassName}-item-title-collapsed-level-${noGroupLevel}`]: collapsed,
+				[`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
+			})
+		}, typeof CustomTag === "string" && CustomTag === "a" ? h("span", { class: classNames(`${baseClassName}-item-text`, this.props?.hashId, this.props.cssVarCls) }, menuItemTitle) : () => h("span", { class: classNames(`${baseClassName}-item-text`, this.props?.hashId, this.props.cssVarCls) }, menuItemTitle));
+		if (menuItemRender) {
+			defaultTitle = h("span", { class: classNames(`${baseClassName}-item-text`, this.props?.hashId, this.props.cssVarCls) }, menuItemTitle);
+			return {
+				icon: () => icon || defaultIcon,
+				label: menuItemRender({
+					item: {
+						...item,
+						isUrl: isHttpUrl,
+						itemPath,
+						isMobile,
+						replace: itemPath === location.path,
+						onClick: () => onCollapse && onCollapse(true),
+						children: void 0
+					},
+					dom: defaultTitle,
+					props: this.props
+				})
+			};
+		}
+		return {
+			icon: () => icon || defaultIcon,
+			label: defaultTitle
+		};
+	};
+	getIntlTitle = ({ meta }) => {
+		const { menu, formatMessage } = this.props;
+		const { title, locale } = meta;
+		if (locale && menu?.locale !== false) return formatMessage?.({
+			id: locale,
+			defaultMessage: title
+		});
+		return title;
+	};
+	conversionPath = (path) => {
+		if (path && path.startsWith("http")) return path;
+		return `/${path || ""}`.replace(/\/+/g, "/");
+	};
+};
+/**
+* 生成openKeys 的对象，因为设置了openKeys 就会变成受控，所以需要一个空对象
+*
+*/
+function getOpenKeysProps(openKeys, { layout, collapsed }) {
+	let openKeysProps = {};
+	if (openKeys && !collapsed && [
+		"side",
+		"mix",
+		"left"
+	].includes(layout || "mix")) openKeysProps = { openKeys };
+	return openKeysProps;
+}
+const BaseMenu = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const baseClassName = computed(() => `${props.prefixCls}-base-menu-${props.mode}`);
+	const [defaultOpenAll, setDefaultOpenAll] = useMountMergeState(props.menu?.defaultOpenAll, { value: toRef(props.menu, "defaultOpenAll") });
+	const [openKeys, setOpenKeys] = useMountMergeState(() => {
+		if (props.menu?.defaultOpenAll) return getOpenKeysFromMenuData(props.menuData) || [];
+		if (props.openKeys === false) return false;
+		return [];
+	}, {
+		value: toRef(props, "openKeys"),
+		onChange: props.onOpenChange
+	});
+	const [selectedKeys, setSelectedKeys] = useMountMergeState([], {
+		value: toRef(props, "selectedKeys"),
+		onChange: !props.onSelect ? void 0 : (keys) => {
+			if (props.onSelect && keys) props.onSelect(keys);
+		}
+	});
+	useEffect(() => {
+		if (props.menu?.defaultOpenAll || props.openKeys === false) return;
+		if (props.matchMenuKeys) {
+			setOpenKeys(props.matchMenuKeys);
+			setSelectedKeys(props.matchMenuKeys);
+		}
+	}, [() => props.matchMenuKeys?.join("-")]);
+	useEffect(() => {
+		if (props.matchMenuKeys) {
+			if (props.matchMenuKeys?.join("-") !== (selectedKeys.value || []).join("-")) setSelectedKeys(props.matchMenuKeys);
+		}
+		if (!defaultOpenAll.value && props.openKeys !== false && props.matchMenuKeys?.join("-") !== (openKeys.value || []).join("-")) {
+			let newKeys = props.matchMenuKeys;
+			if (props.menu?.autoClose === false) newKeys = Array.from(new Set([...props.matchMenuKeys, ...openKeys.value || []]));
+			setOpenKeys(newKeys);
+		} else if (props.menu?.ignoreFlatMenu && defaultOpenAll.value) setOpenKeys(getOpenKeysFromMenuData(props.menuData));
+		else setDefaultOpenAll(false);
+	}, [() => props.matchMenuKeys?.join("-")]);
+	useEffect(() => {
+		if (props.iconfontUrl) IconFont = createFromIconfontCN({ scriptUrl: props.iconfontUrl });
+	}, [() => props.iconfontUrl]);
+	const openKeysProps = computed(() => getOpenKeysProps(openKeys.value, props));
+	const [hashId, cssVarCls] = useStyle(baseClassName, props.mode);
+	const finallyData = computed(() => props.postMenuData ? props.postMenuData(props.menuData) : props.menuData);
+	return () => {
+		const { mode, collapsed, theme, menuProps } = props;
+		if (!finallyData.value || finallyData.value && finallyData.value.length < 1) return null;
+		const menuUtils = new MenuUtil({
+			...props,
+			menuRenderType: props.menuRenderType,
+			location: isBrowser() ? props.location || { path: window.location.pathname || "/" } : void 0,
+			baseClassName: baseClassName.value,
+			hashId: hashId?.value,
+			cssVarCls: cssVarCls?.value
+		});
+		return createVNode(Menu, mergeProps(openKeysProps.value, menuProps, {
+			"key": "Menu",
+			"mode": mode,
+			"theme": theme,
+			"inlineIndent": 16,
+			"selectedKeys": selectedKeys.value,
+			"items": menuUtils.getNavMenuItems(finallyData.value, 0, 0),
+			"class": classNames(baseClassName.value, attrs.class, hashId?.value, cssVarCls?.value, { [`${baseClassName.value}-collapsed`]: collapsed }),
+			"onOpenChange": (_openKeys) => {
+				if (!collapsed) setOpenKeys(_openKeys);
+			}
+		}), null);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		defaultCollapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		collapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		isMobile: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onOpenChange: {
+			type: Function,
+			required: false
+		},
+		menuData: {
+			type: Array,
+			required: false
+		},
+		onCollapse: {
+			type: Function,
+			required: false
+		},
+		openKeys: {
+			type: [Array, Boolean],
+			required: false,
+			default: void 0
+		},
+		mode: {
+			type: void 0,
+			required: false
+		},
+		menuProps: {
+			type: Object,
+			required: false
+		},
+		menuItemRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		subMenuItemRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		iconPrefixes: {
+			type: String,
+			required: false
+		},
+		formatMessage: {
+			type: Function,
+			required: false
+		},
+		postMenuData: {
+			type: Function,
+			required: false
+		},
+		onSelect: {
+			type: Function,
+			required: false
+		},
+		route: {
+			type: Object,
+			required: false
+		},
+		location: {
+			type: Object,
+			required: false
+		},
+		theme: {
+			type: String,
+			required: false
+		},
+		inlineIndent: {
+			type: Number,
+			required: false
+		},
+		tooltip: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		_internalDisableMenuItemTitleTooltip: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		labelRender: {
+			type: Function,
+			required: false
+		},
+		extraRender: {
+			type: Function,
+			required: false
+		},
+		iconRender: {
+			type: Function,
+			required: false
+		},
+		itemIcon: {
+			type: Function,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabledOverflow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		inlineCollapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultOpenKeys: {
+			type: Array,
+			required: false
+		},
+		selectable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultSelectedKeys: {
+			type: Array,
+			required: false
+		},
+		selectedKeys: {
+			type: Array,
+			required: false
+		},
+		motion: {
+			type: Object,
+			required: false
+		},
+		defaultMotions: {
+			type: Object,
+			required: false
+		},
+		subMenuOpenDelay: {
+			type: Number,
+			required: false
+		},
+		subMenuCloseDelay: {
+			type: Number,
+			required: false
+		},
+		forceSubMenuRender: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		triggerSubMenuAction: { required: false },
+		builtinPlacements: { required: false },
+		expandIcon: { required: false },
+		overflowedIndicator: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		overflowedIndicatorPopupClassName: {
+			type: String,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		_internalRenderMenuItem: {
+			type: Function,
+			required: false
+		},
+		_internalRenderSubMenuItem: {
+			type: Function,
+			required: false
+		},
+		popupRender: { required: false },
+		id: {
+			type: String,
+			required: false
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		onDeselect: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:openKeys": {
+			type: Function,
+			required: false
+		},
+		"onUpdate:selectedKeys": {
+			type: Function,
+			required: false
+		},
+		navTheme: {
+			type: String,
+			required: false
+		},
+		layout: {
+			type: String,
+			required: false
+		},
+		contentWidth: {
+			type: String,
+			required: false
+		},
+		compact: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		fixedHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		fixedSiderbar: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		menu: {
+			type: Object,
+			required: false
+		},
+		title: {
+			type: [String, Boolean],
+			required: false,
+			default: void 0
+		},
+		iconfontUrl: {
+			type: String,
+			required: false
+		},
+		colorPrimary: {
+			type: String,
+			required: false
+		},
+		colorWeak: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		splitMenus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		suppressSiderWhenMenuEmpty: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		siderMenuType: {
+			type: String,
+			required: false
+		},
+		fixedMultiTab: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		multiTab: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		matchMenuKeys: {
+			type: Array,
+			required: false
+		},
+		originCollapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		menuRenderType: {
+			type: String,
+			required: false
+		},
+		stylish: {
+			type: Function,
+			required: false
+		}
+	}, defaultSettings),
+	name: "BaseMenu",
+	inheritAttrs: false
+});
+//#endregion
+export { BaseMenu as default, getIcon };