@gx-design-vue/pro-layout 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/components/BaseMenu/index.js

@@ -1,381 +0,0 @@
-import { useProLayoutContext } from "../../Context/index.js";
-import { convertCSSPropertiesToString } from "../../utils/style/index.js";
-import { defaultSettings } from "../../config/index.js";
-import { baseMenuProps } from "./props.js";
-import { ProBaseMenuStyle } from "./style.js";
-import { cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps, resolveComponent, watch } from "vue";
-import { useMemo, useState } from "@gx-design-vue/pro-hooks";
-import { unit, useProConfigContext, useProStyle } from "@gx-design-vue/pro-provider";
-import { classNames as classNames$1, getPrefixCls, isImg, isString, isUrl } from "@gx-design-vue/pro-utils";
-import { useStyleTag } from "@vueuse/core";
-import { Menu } from "ant-design-vue";
-import { omit } from "es-toolkit";
-import { createFromIconfontCN } from "@ant-design/icons-vue";
-import { useRouter } from "vue-router";
-
-//#region src/components/BaseMenu/index.tsx
-const LazyIcon = (props) => {
-	const { icon, iconPrefix = "", iconfontUrl, hashId, style } = props;
-	const className = classNames$1(props.className, iconPrefix, hashId);
-	/**
-	* 如果没有icon在收起的时候用首字母代替
-	*/
-	const defaultIcon = createVNode("span", {
-		"class": classNames$1(className),
-		"style": { display: "none" }
-	}, [createVNode("span", { "class": "anticon" }, null)]);
-	if (!icon) return defaultIcon;
-	const renderImg = (src) => createVNode("img", {
-		"src": src,
-		"alt": "icon",
-		"class": classNames$1(props.className ? `${props.className}-image` : "", className),
-		"style": style
-	}, null);
-	const renderIconFont = (type) => {
-		const IconFont = createFromIconfontCN({ scriptUrl: iconfontUrl || defaultSettings.iconfontUrl });
-		return iconfontUrl ? createVNode(IconFont, {
-			"type": type,
-			"class": className,
-			"style": style
-		}, null) : createVNode("span", {
-			"class": className,
-			"style": style
-		}, null);
-	};
-	const renderVNodeIcon = () => cloneVNode(icon, {
-		class: className,
-		style
-	});
-	const renderByString = (str) => {
-		if (isUrl(str) || isImg(str)) return renderImg(str);
-		if (iconPrefix === "iconfont") return renderIconFont(str);
-		const DynamicIcon = resolveComponent(str);
-		return typeof DynamicIcon === "function" && createVNode(DynamicIcon, null, null) || defaultIcon;
-	};
-	if (typeof icon === "string") return icon !== "" ? renderByString(icon) : defaultIcon;
-	if (isVNode(icon)) return renderVNodeIcon();
-	return defaultIcon;
-};
-let IconFont = createFromIconfontCN({ scriptUrl: defaultSettings.iconfontUrl });
-function getIcon({ icon, style, iconPrefixes = "icon-", className, hashId }) {
-	if (typeof icon === "string" && icon !== "") {
-		if (isUrl(icon) || isImg(icon)) return createVNode("img", {
-			"key": icon,
-			"src": icon,
-			"alt": "icon",
-			"style": style,
-			"class": classNames$1(`${className}-image`, hashId)
-		}, null);
-		if (icon.startsWith(iconPrefixes)) return createVNode(IconFont, {
-			"type": icon,
-			"style": style
-		}, null);
-	}
-	return 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;
-	}
-	getNavMenuItems = (menusData = [], level, noGroupLevel) => menusData.filter((item) => !item.meta?.hideInMenu).map((item) => this.getSubMenuOrItem(item, level, noGroupLevel)).filter((item) => item).flat(1);
-	/** Get SubMenu or Item */
-	getSubMenuOrItem = (item, level, noGroupLevel) => {
-		const { menuRenderType, subMenuItemRender, baseClassName, iconPrefixes, styles, classNames } = this.props;
-		const collapsed = menuRenderType === "sider" ? this.props.collapsed : false;
-		const name = this.getIntlName(item);
-		const inlineIndentCount = menuRenderType === "sider" ? item.meta?.inlineIndent ?? level * (this.props.extraInlineIndent ?? 10) : 0;
-		const children = item?.children;
-		const hidden = item?.meta?.hideInMenu;
-		const rightContent = item?.meta?.rightContent;
-		const hasDivider = item?.meta?.divider;
-		const isSubMenu = Array.isArray(children) && children.length > 0 && !hidden;
-		const emptyChilds = children?.every((child) => child.meta?.hideInMenu);
-		if (isSubMenu && !emptyChilds) {
-			const shouldHasIcon = collapsed || menuRenderType === "header" ? level === 0 : item.meta?.icon || level === 0;
-			const hasImageIcon = typeof item.meta?.icon === "string" ? isUrl(item.meta?.icon) || isImg(item.meta?.icon) : false;
-			const iconDom = getIcon({
-				icon: item.meta?.icon,
-				style: item.meta?.styles?.itemIcon,
-				iconPrefixes,
-				className: classNames$1(`${baseClassName}-item`, item.meta?.classNames?.itemIcon),
-				hashId: this.props?.hashId
-			});
-			/**
-			* 如果没有icon在收起的时候用首字母代替
-			*/
-			const defaultIcon = collapsed && shouldHasIcon ? getMenuTitleSymbol(item.meta?.title) : null;
-			const defaultTitle = createVNode("div", {
-				"class": classNames$1(classNames?.menuItemTitle, `${baseClassName}-item-title`, this.props?.hashId, {
-					[`${baseClassName}-item-title-collapsed`]: collapsed,
-					[`${baseClassName}-item-title-collapsed-level-${noGroupLevel}`]: collapsed
-				}, item.meta?.classNames?.itemTitle),
-				"style": {
-					paddingInlineStart: collapsed ? 0 : level === 0 ? void 0 : unit(inlineIndentCount),
-					...styles?.menuItemTitle || {},
-					...item.meta?.styles?.itemTitle || {}
-				}
-			}, [
-				shouldHasIcon && iconDom ? !collapsed || level === 0 ? createVNode("span", {
-					"class": classNames$1(`${baseClassName}-item-icon`, this.props?.hashId, classNames?.menuItemIcon, item.meta?.classNames?.itemIcon),
-					"style": {
-						...styles?.menuItemIcon,
-						...hasImageIcon ? {} : item.meta?.styles?.itemIcon || {}
-					}
-				}, [iconDom]) : defaultIcon : defaultIcon,
-				createVNode("span", {
-					"class": classNames$1(`${baseClassName}-item-text`, this.props?.hashId, { [`${baseClassName}-item-text-has-icon`]: shouldHasIcon && (iconDom || defaultIcon) }, classNames?.menuItemTitleText, item.meta?.classNames?.itemTitle),
-					"style": {
-						...styles?.menuItemTitleText || {},
-						...item.meta?.styles?.itemTitle || {}
-					}
-				}, [name]),
-				rightContent && typeof rightContent === "function" ? createVNode("div", {
-					"class": classNames$1(`${baseClassName}-item-right-content`, this.props.hashId, item.meta?.classNames?.itemRight),
-					"style": item.meta?.styles?.itemRight
-				}, [rightContent(item.meta)]) : null
-			]);
-			const title = subMenuItemRender ? subMenuItemRender({
-				item,
-				children: defaultTitle,
-				menuProps: this.props
-			}) : defaultTitle;
-			const childrenList = this.getNavMenuItems(children, level + 1, level === 0 && collapsed ? level : level + 1);
-			return [hasDivider && menuRenderType === "sider" ? { type: "divider" } : void 0, {
-				key: item.name,
-				label: title,
-				children: childrenList,
-				style: {
-					...styles?.subMenu || {},
-					...item.meta?.styles?.subMenu || {}
-				},
-				disabled: item.meta?.disabled,
-				class: classNames$1(classNames?.subMenu, {
-					[`${baseClassName}-submenu`]: true,
-					[`${baseClassName}-submenu-has-icon`]: shouldHasIcon && iconDom
-				}, item.meta?.classNames?.subMenu),
-				popupClassName: classNames$1(classNames?.subMenuPopup, `${baseClassName}-submenu-popup`, `${baseClassName}-submenu-popup-${this.props?.menuRenderType}`, this.props?.hashId, item.meta?.classNames?.subMenuPopup)
-			}].filter(Boolean);
-		}
-		return [hasDivider && menuRenderType === "sider" ? { type: "divider" } : void 0, {
-			class: classNames$1(`${baseClassName}-item`, classNames?.menuItem, item.meta?.classNames?.item),
-			style: {
-				...styles?.menuItem || {},
-				...item.meta?.styles?.item || {}
-			},
-			key: item.name,
-			disabled: item.meta?.disabled,
-			label: this.getMenuItemPath(item, level, noGroupLevel)
-		}].filter(Boolean);
-	};
-	getIntlName = (item) => {
-		const meta = { ...item.meta };
-		const finalName = meta.title;
-		if (this.props.menuTextRender) return this.props.menuTextRender({
-			item,
-			defaultText: meta.title,
-			menuProps: this.props
-		});
-		return finalName;
-	};
-	/**
-	* 判断是否是http链接.返回 Link 或 a Judge whether it is http link.return a or Link
-	*
-	* @memberof SiderMenu
-	*/
-	getMenuItemPath = (item, level, noGroupLevel) => {
-		const itemPath = this.conversionPath(item.path || "/");
-		const { isMobile, menuRenderType, onCollapse, menuItemRender, iconPrefixes, classNames, styles, baseClassName } = this.props;
-		const menuItemTitle = this.getIntlName(item);
-		const collapsed = menuRenderType === "sider" ? this.props.collapsed : false;
-		const hasIcon = collapsed || menuRenderType === "header" ? level === 0 : !!(item.meta?.icon || level === 0);
-		const rightContent = item.meta?.rightContent;
-		const hasImageIcon = typeof item.meta?.icon === "string" ? isUrl(item.meta?.icon) || isImg(item.meta?.icon) : false;
-		const inlineIndentCount = menuRenderType === "sider" ? item.meta?.inlineIndent ?? level * (this.props.extraInlineIndent ?? 10) : 0;
-		const icon = !hasIcon ? null : getIcon({
-			icon: item.meta?.icon,
-			style: item.meta?.styles?.itemIcon,
-			iconPrefixes,
-			className: `${baseClassName}-item`,
-			hashId: this.props?.hashId
-		});
-		const defaultIcon = collapsed && hasIcon ? getMenuTitleSymbol(item.meta?.title) : null;
-		const isHttpUrl = item.meta?.linkStatus === 1 && isUrl(item.meta?.link);
-		const defaultItem = createVNode("div", {
-			"key": itemPath,
-			"class": classNames$1(classNames?.menuItemTitle, `${baseClassName}-item-title`, this.props?.hashId, {
-				[`${baseClassName}-item-link`]: isHttpUrl,
-				[`${baseClassName}-item-title-collapsed`]: collapsed,
-				[`${baseClassName}-item-title-collapsed-level-${noGroupLevel}`]: collapsed
-			}, item.meta?.classNames?.itemTitle),
-			"style": {
-				paddingInlineStart: collapsed ? 0 : unit(inlineIndentCount),
-				...styles?.menuItemTitle || {},
-				...item.meta?.styles?.itemTitle || {}
-			}
-		}, [
-			createVNode("span", {
-				"class": classNames$1(`${baseClassName}-item-icon ${this.props?.hashId}`, classNames?.menuItemIcon),
-				"style": {
-					display: defaultIcon === null && !icon ? "none" : "",
-					...styles?.menuItemIcon,
-					...hasImageIcon ? {} : item.meta?.styles?.itemIcon || {}
-				}
-			}, [icon || createVNode("span", { "class": "anticon" }, [defaultIcon])]),
-			createVNode("span", {
-				"class": classNames$1(classNames?.menuItemTitleText, `${baseClassName}-item-text`, this.props?.hashId, { [`${baseClassName}-item-text-has-icon`]: hasIcon && (icon || defaultIcon) }, item.meta?.classNames?.itemTitleText),
-				"style": {
-					...styles?.menuItemTitleText || {},
-					...item.meta?.styles?.itemTitleText || {}
-				}
-			}, [menuItemTitle]),
-			rightContent && typeof rightContent === "function" && !collapsed ? createVNode("div", {
-				"class": classNames$1(`${baseClassName}-item-right-content`, this.props.hashId, item.meta?.classNames?.itemRight),
-				"style": item.meta?.styles?.itemRight
-			}, [rightContent(item.meta)]) : null
-		]);
-		if (menuItemRender) return menuItemRender({
-			item: {
-				...item,
-				isUrl: isHttpUrl,
-				itemPath,
-				isMobile,
-				replace: itemPath === location.pathname,
-				onClick: () => onCollapse && onCollapse(true),
-				children: void 0
-			},
-			defaultDom: defaultItem,
-			menuProps: this.props
-		});
-		return defaultItem;
-	};
-	conversionPath = (path) => {
-		if (path && path.indexOf("http") === 0) return path;
-		return `/${path || ""}`.replace(/\/+/g, "/");
-	};
-};
-var BaseMenu_default = /* @__PURE__ */ defineComponent({
-	name: "BaseMenu",
-	props: baseMenuProps,
-	setup(props) {
-		const router = useRouter();
-		const { dark, token } = useProConfigContext();
-		const layoutContext = useProLayoutContext();
-		const baseClassName = (layoutContext?.getPrefixCls || getPrefixCls)({
-			isPor: true,
-			suffixCls: `base-menu`
-		});
-		const { wrapSSR, hashId } = useProStyle("ProBaseMenu", [ProBaseMenuStyle], baseClassName);
-		const [openKeys, setOpenKeys] = useState(props.openKeys || []);
-		const [selectedKeys, setSelectedKeys] = useState(props.selectedKeys || []);
-		const menuUtils = useMemo(() => {
-			return new MenuUtil({
-				...props,
-				layout: layoutContext?.settings?.value?.layout,
-				isMobile: layoutContext?.isMobile?.value,
-				collapsed: layoutContext?.collapsedEffect?.value,
-				token: token.value,
-				menuRenderType: props.menuRenderType,
-				baseClassName,
-				inlineIndent: props.menuProps?.inlineIndent,
-				extraInlineIndent: props.menuProps?.extraInlineIndent,
-				iconfontUrl: props.iconfontUrl,
-				hashId: hashId.value,
-				onCollapse: (value) => {
-					if (layoutContext) layoutContext.collapsed.value = value;
-				}
-			});
-		}, [
-			() => hashId.value,
-			() => token.value,
-			() => props.menuData,
-			() => props.iconfontUrl,
-			() => props.styles,
-			() => props.classNames,
-			() => props.menuProps?.inlineIndent,
-			() => props.menuProps?.extraInlineIndent,
-			() => layoutContext?.isMobile?.value,
-			() => layoutContext?.collapsedEffect?.value,
-			() => layoutContext?.settings?.value?.layout
-		]);
-		useStyleTag(computed(() => {
-			const tooltip = ".ant-tooltip-inner";
-			const menuClass = `.${baseClassName}`;
-			const menuItemClass = `.${baseClassName}-item`;
-			const menuSubmenuClass = `.${baseClassName}-submenu`;
-			const menuItemSelectClass = `${token.value.antCls}-menu-item-selected`;
-			return `
-        ${tooltip} ${menuItemClass}-title ${menuItemClass}-image {
-          display: none;
-        }
-        ${menuClass} ${menuSubmenuClass}>${`${token.value.antCls}-menu-submenu-title`} {
-          ${convertCSSPropertiesToString(props.styles.subMenuTitle)}
-        }
-        ${menuClass} ${menuItemClass}${menuItemSelectClass} {
-          ${convertCSSPropertiesToString(props.styles.menuItemSelect)}
-        }
-      `;
-		}));
-		watch(() => props.openKeys, (val) => setOpenKeys(val));
-		watch(() => props.selectedKeys, (val) => setSelectedKeys(val));
-		watch(() => props.iconfontUrl, () => {
-			if (props.iconfontUrl) IconFont = createFromIconfontCN({ scriptUrl: props.iconfontUrl });
-		}, { immediate: true });
-		return () => {
-			if (props.menuData && props.menuData?.length < 1) return null;
-			return wrapSSR(createVNode(Menu, mergeProps({
-				"key": layoutContext?.collapsedEffect?.value ? "Menu1" : "Menu",
-				"mode": props.mode,
-				"inlineIndent": 16,
-				"theme": dark.value ? "dark" : "light",
-				"openKeys": openKeys.value,
-				"selectedKeys": selectedKeys.value,
-				"style": {
-					backgroundColor: "transparent",
-					border: "none",
-					...props.style
-				},
-				"class": classNames$1(props.class, hashId, baseClassName, {
-					[`${baseClassName}-inline`]: props.mode === "inline",
-					[`${baseClassName}-horizontal`]: props.mode === "horizontal",
-					[`${baseClassName}-collapsed`]: props.menuRenderType === "sider" ? layoutContext?.collapsedEffect?.value : false
-				}),
-				"items": menuUtils.value.getNavMenuItems(props.menuData, 0, 0)
-			}, omit(props.menuProps, [
-				"onOpenChange",
-				"onSelect",
-				"onClick",
-				"items"
-			]), {
-				"onOpenChange": (_openKeys) => {
-					if (layoutContext?.collapsedEffect?.value) return;
-					setOpenKeys(_openKeys);
-					props.onOpenKeys && props.onOpenKeys(_openKeys);
-				},
-				"onSelect": (info) => {
-					props.onSelect && props.onSelect(info);
-					setSelectedKeys(info.selectedKeys);
-				},
-				"onClick": (e) => {
-					if (props.onClick) props.onClick(e);
-					else {
-						const row = layoutContext?.menu?.value?.flatMenus?.find((item) => item.name === e.key);
-						if (row) {
-							const toPath = isString(row.redirect) ? row.redirect : row.path || "";
-							const target = row.meta?.link || "";
-							const hasUrl = isUrl(target);
-							if (router.currentRoute.value?.fullPath !== toPath) if (hasUrl && target && row.meta?.linkStatus === 1) window.open(target);
-							else router.push({ path: toPath });
-						}
-					}
-				}
-			}), null));
-		};
-	}
-});
-
-//#endregion
-export { LazyIcon, BaseMenu_default as default };

package/dist/components/BaseMenu/props.d.ts

@@ -1,105 +0,0 @@
-import { BaseMenuProps, MenuClassNamesType, MenuStylesType, ProLayoutMenuFunProps } from "../../types/MenuTypings.js";
-import { ProLayoutConfig } from "../../config/index.js";
-import "../../index.js";
-import { CSSProperties, PropType } from "vue";
-
-//#region src/components/BaseMenu/props.d.ts
-declare const defaultMenuProps: Partial<BaseMenuProps>;
-declare const modelValueMenuProps: {
-  openKeys: {
-    type: PropType<ProLayoutMenuFunProps["openKeys"]>;
-    default: () => any[];
-  };
-  selectedKeys: {
-    type: PropType<ProLayoutMenuFunProps["selectedKeys"]>;
-    default: () => any[];
-  };
-};
-declare const commonMenuFunProps: {
-  onOpenKeys: {
-    type: PropType<ProLayoutMenuFunProps["onOpenKeys"]>;
-  };
-  onSelect: {
-    type: PropType<ProLayoutMenuFunProps["onSelect"]>;
-  };
-  menuItemRender: {
-    type: PropType<BaseMenuProps["menuItemRender"]>;
-    default: () => any;
-  };
-  menuTextRender: {
-    type: PropType<BaseMenuProps["menuTextRender"]>;
-    default: () => any;
-  };
-  subMenuItemRender: {
-    type: PropType<BaseMenuProps["subMenuItemRender"]>;
-    default: () => any;
-  };
-};
-declare const baseMenuProps: {
-  class: {
-    type: PropType<string>;
-  };
-  classNames: {
-    type: PropType<MenuClassNamesType>;
-    default: () => {};
-  };
-  styles: {
-    type: PropType<MenuStylesType>;
-    default: () => {};
-  };
-  type: {
-    type: PropType<BaseMenuProps["type"]>;
-  };
-  menuRenderType: {
-    type: PropType<"header" | "sider">;
-  };
-  style: {
-    type: PropType<CSSProperties>;
-    default: () => {};
-  };
-  iconfontUrl: {
-    type: PropType<ProLayoutConfig["iconfontUrl"]>;
-    default: string;
-  };
-  mode: {
-    type: PropType<BaseMenuProps["mode"]>;
-    default: string;
-  };
-  menuData: {
-    type: PropType<BaseMenuProps["menuData"]>;
-    default: () => any[];
-  };
-  menuProps: {
-    type: PropType<BaseMenuProps["menuProps"]>;
-    default: () => any;
-  };
-  onClick: PropType<BaseMenuProps["onClick"]>;
-  onOpenKeys: {
-    type: PropType<BaseMenuProps["onOpenKeys"]>;
-  };
-  onSelect: {
-    type: PropType<BaseMenuProps["onSelect"]>;
-  };
-  menuItemRender: {
-    type: PropType<BaseMenuProps["menuItemRender"]>;
-    default: () => any;
-  };
-  menuTextRender: {
-    type: PropType<BaseMenuProps["menuTextRender"]>;
-    default: () => any;
-  };
-  subMenuItemRender: {
-    type: PropType<BaseMenuProps["subMenuItemRender"]>;
-    default: () => any;
-  };
-  openKeys: {
-    type: PropType<ProLayoutMenuFunProps["openKeys"]>;
-    default: () => any[];
-  };
-  selectedKeys: {
-    type: PropType<ProLayoutMenuFunProps["selectedKeys"]>;
-    default: () => any[];
-  };
-};
-//#endregion
-export { baseMenuProps, commonMenuFunProps, defaultMenuProps, modelValueMenuProps };

package/dist/components/BaseMenu/props.js

@@ -1,94 +0,0 @@
-import { defaultSettingProps } from "../../props/defaultSettings.js";
-import { pick } from "es-toolkit";
-
-//#region src/components/BaseMenu/props.ts
-const defaultMenuProps = {
-	mode: "inline",
-	menuProps: null
-};
-const modelValueMenuProps = {
-	openKeys: {
-		type: Array,
-		default: () => []
-	},
-	selectedKeys: {
-		type: Array,
-		default: () => []
-	}
-};
-const commonMenuFunProps = {
-	onOpenKeys: { type: Function },
-	onSelect: { type: Function },
-	menuItemRender: {
-		type: [
-			Function,
-			Boolean,
-			Array,
-			String,
-			Number
-		],
-		default: () => void 0
-	},
-	menuTextRender: {
-		type: [
-			Function,
-			Boolean,
-			Array,
-			String,
-			Number
-		],
-		default: () => void 0
-	},
-	subMenuItemRender: {
-		type: [
-			Function,
-			Boolean,
-			Array,
-			String,
-			Number
-		],
-		default: () => void 0
-	}
-};
-const baseMenuProps = {
-	...modelValueMenuProps,
-	...pick(commonMenuFunProps, [
-		"menuItemRender",
-		"subMenuItemRender",
-		"menuTextRender"
-	]),
-	class: { type: String },
-	classNames: {
-		type: Object,
-		default: () => ({})
-	},
-	styles: {
-		type: Object,
-		default: () => ({})
-	},
-	type: { type: String },
-	menuRenderType: { type: String },
-	style: {
-		type: Object,
-		default: () => ({})
-	},
-	iconfontUrl: defaultSettingProps.iconfontUrl,
-	mode: {
-		type: String,
-		default: "inline"
-	},
-	menuData: {
-		type: Array,
-		default: () => []
-	},
-	menuProps: {
-		type: Object,
-		default: () => null
-	},
-	onClick: [Function, Object],
-	onOpenKeys: { type: Function },
-	onSelect: { type: Function }
-};
-
-//#endregion
-export { baseMenuProps, commonMenuFunProps, defaultMenuProps, modelValueMenuProps };

package/dist/components/BaseMenu/style.d.ts

@@ -1,6 +0,0 @@
-import { GenerateStyle } from "@gx-design-vue/pro-provider";
-
-//#region src/components/BaseMenu/style.d.ts
-declare const ProBaseMenuStyle: GenerateStyle;
-//#endregion
-export { ProBaseMenuStyle };