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

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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,94 @@
+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

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

package/dist/components/BaseMenu/style.js

@@ -0,0 +1,155 @@
+import { unit } from "@gx-design-vue/pro-provider";
+
+//#region src/components/BaseMenu/style.ts
+const ProBaseMenuStyle = (token) => {
+	const fontSize = unit(token.layout?.menuItemIconSize || token.fontSize);
+	const collapsedFontSize = unit((token.layout?.menuItemIconSize || token.fontSize) + 2);
+	const siderToken = token.layout?.sider;
+	const headerToken = token.layout?.header;
+	return {
+		[`${token.antCls}-menu`]: { [`&${token.componentCls}`]: {
+			background: "transparent",
+			border: "none",
+			[`&${token.componentCls}-inline,&${token.componentCls}-inline-collapsed`]: {
+				color: siderToken?.colorTextMenu,
+				[`${token.componentCls}-item-right-content`]: {
+					position: "absolute",
+					right: 0,
+					top: "50%",
+					transform: "translateY(-50%)",
+					lineHeight: "normal"
+				},
+				[`${token.antCls}-menu-submenu`]: { "&-selected": { [`>${token.antCls}-menu-submenu-title`]: {
+					color: siderToken?.colorTextSubMenuSelected ?? token.colorPrimary,
+					"&:hover": { color: siderToken?.colorTextSubMenuSelected ?? token.colorPrimary }
+				} } }
+			},
+			[`&${token.componentCls}-horizontal`]: {
+				color: headerToken?.colorTextMenu,
+				[`${token.componentCls}-item-right-content`]: { marginLeft: token.marginXXS },
+				[`${token.antCls}-menu-submenu`]: { "&-selected": { [`>${token.antCls}-menu-submenu-title`]: {
+					color: headerToken?.colorTextMenuSelected,
+					"&:hover": { color: headerToken?.colorTextMenuSelected }
+				} } }
+			},
+			[`${token.componentCls}-submenu`]: { paddingBottom: "0px" },
+			[`${token.antCls}-menu-title-content`]: {
+				width: "100%",
+				height: "100%",
+				display: "inline-flex"
+			},
+			[`${token.antCls}-menu-title-content`]: { "&:first-child": { width: "100%" } },
+			[`${token.componentCls}-item-icon`]: {
+				display: "flex",
+				alignItems: "center",
+				marginRight: token.marginXXS
+			},
+			[`&&-collapsed`]: {
+				[`${token.antCls}-menu-item,
+        ${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-item,
+        ${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-submenu > ${token.antCls}-menu-submenu-title,
+        ${token.antCls}-menu-submenu > ${token.antCls}-menu-submenu-title`]: {
+					paddingInline: "0 !important",
+					marginBlock: "4px !important"
+				},
+				[`${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title,
+        ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title`]: {
+					borderRadius: token.borderRadiusLG,
+					backgroundColor: siderToken?.colorBgMenuItemSelected,
+					color: siderToken?.colorTextSubMenuSelected ?? token.colorPrimary
+				},
+				[`${token.componentCls}-group`]: { [`${token.antCls}-menu-item-group-title`]: { paddingInline: 0 } },
+				[`&${token.componentCls}-menu-inline`]: { [`${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title,
+        ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title`]: { backgroundColor: siderToken?.colorBgMenuItemSelected } },
+				[`&${token.componentCls}-menu-horizontal`]: { [`${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title,
+        ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title`]: { backgroundColor: headerToken?.colorBgMenuItemSelected } },
+				[`${token.componentCls}-item-icon`]: { marginRight: 0 }
+			},
+			[`${token.componentCls}-item-title`]: {
+				position: "relative",
+				display: "flex",
+				flexDirection: "row",
+				alignItems: "center",
+				[`${token.componentCls}-item-icon`]: {
+					[`${token.componentCls}-item-image`]: { width: collapsedFontSize },
+					".anticon": { fontSize }
+				},
+				[`${token.componentCls}-item-text`]: {
+					maxWidth: "100%",
+					textOverflow: "ellipsis",
+					overflow: "hidden",
+					wordBreak: "break-all",
+					whiteSpace: "nowrap"
+				},
+				"&-collapsed": {
+					minWidth: 40,
+					height: 40,
+					[`${token.componentCls}-item-text-has-icon`]: { display: "none !important" },
+					[`${token.componentCls}-item-icon`]: {
+						[`&${token.componentCls}-item-collapsed-icon-text`]: { ".anticon": { fontSize: token.fontSize } },
+						[`${token.componentCls}-item-image`]: { width: collapsedFontSize },
+						".anticon": { fontSize: collapsedFontSize }
+					}
+				},
+				"&-collapsed-level-0": {
+					flexDirection: "column",
+					justifyContent: "center",
+					[`&>${token.componentCls}-item-icon`]: { ".anticon": { display: "inline-flex" } }
+				},
+				[`&${token.componentCls}-group-item-title`]: {
+					gap: token.marginXS,
+					height: 18,
+					overflow: "hidden"
+				}
+			},
+			"&-group": { [`${token.antCls}-menu-item-group-title`]: {
+				fontSize: 12,
+				color: token.colorTextLabel,
+				".anticon": { marginInlineEnd: 8 }
+			} },
+			"&-group-divider": {
+				color: token.colorTextSecondary,
+				fontSize: 12,
+				lineHeight: 20
+			}
+		} },
+		[`${token.componentCls}-submenu-popup${token.antCls}-menu-submenu-popup`]: {
+			background: "transparent",
+			"-webkit-backdrop-filter": "blur(8px)",
+			backdropFilter: "blur(8px)",
+			[`${token.antCls}-menu>${token.antCls}-menu-item,${token.antCls}-menu>${token.antCls}-menu-submenu>${token.antCls}-menu-submenu-title`]: {
+				height: 32,
+				lineHeight: unit(32)
+			},
+			[`${token.componentCls}-item-title`]: {
+				display: "flex",
+				flexDirection: "row",
+				alignItems: "center",
+				gap: token.marginXS,
+				[`${token.componentCls}-item-icon`]: {
+					[`${token.componentCls}-item-image`]: { width: collapsedFontSize },
+					".anticon": { fontSize }
+				},
+				[`${token.componentCls}-item-text`]: {
+					maxWidth: "100%",
+					textOverflow: "ellipsis",
+					overflow: "hidden",
+					wordBreak: "break-all",
+					whiteSpace: "nowrap"
+				}
+			},
+			[`&${token.componentCls}-submenu-popup-sider`]: { [`${token.antCls}-menu-submenu-selected ${token.antCls}-menu-submenu-title`]: {
+				background: siderToken?.colorBgMenuItemSelected,
+				"&:hover": { color: siderToken?.colorTextMenuSelected }
+			} },
+			[`&${token.componentCls}-submenu-popup-header`]: { [`${token.antCls}-menu-submenu-selected ${token.antCls}-menu-submenu-title`]: {
+				background: siderToken?.colorBgMenuItemSelected,
+				"&:hover": { color: siderToken?.colorTextMenuSelected }
+			} },
+			[`&>${token.antCls}-menu${token.antCls}-menu-sub`]: { background: token.colorBgElevated }
+		}
+	};
+};
+
+//#endregion
+export { ProBaseMenuStyle };

package/dist/components/BreadCrumb/Breadcrumb.d.ts

@@ -0,0 +1,33 @@
+import { ProRoute } from "../../types/Breadcrumb.js";
+import * as vue161 from "vue";
+import { PropType } from "vue";
+import * as vue_jsx_runtime6 from "vue/jsx-runtime";
+
+//#region src/components/BreadCrumb/Breadcrumb.d.ts
+declare const Breadcrumb: vue161.DefineComponent<vue161.ExtractPropTypes<{
+  hashId: {
+    type: PropType<string>;
+  };
+  className: {
+    type: PropType<string>;
+  };
+  routes: {
+    type: PropType<ProRoute[]>;
+    default: () => any[];
+  };
+}>, () => vue_jsx_runtime6.JSX.Element, {}, {}, {}, vue161.ComponentOptionsMixin, vue161.ComponentOptionsMixin, {}, string, vue161.PublicProps, Readonly<vue161.ExtractPropTypes<{
+  hashId: {
+    type: PropType<string>;
+  };
+  className: {
+    type: PropType<string>;
+  };
+  routes: {
+    type: PropType<ProRoute[]>;
+    default: () => any[];
+  };
+}>> & Readonly<{}>, {
+  routes: ProRoute[];
+}, {}, {}, {}, string, vue161.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { Breadcrumb as default };

package/dist/components/BreadCrumb/Breadcrumb.js

@@ -0,0 +1,75 @@
+import { useProLayoutContext } from "../../Context/index.js";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent, isVNode } from "vue";
+import { classNames, isString, isUrl } from "@gx-design-vue/pro-utils";
+import { Dropdown, Menu, MenuItem, SubMenu } from "ant-design-vue";
+import { DownOutlined, HomeOutlined } from "@ant-design/icons-vue";
+import { useRouter } from "vue-router";
+
+//#region src/components/BreadCrumb/Breadcrumb.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const Breadcrumb = /* @__PURE__ */ defineComponent({
+	name: "BreadCrumb",
+	inheritAttrs: false,
+	props: {
+		hashId: { type: String },
+		className: { type: String },
+		routes: {
+			type: Array,
+			default: () => []
+		}
+	},
+	setup(props) {
+		const router = useRouter();
+		const layoutContext = useProLayoutContext();
+		const prefixCls = computed(() => classNames(`${props.className}-routes`));
+		function onRouterClick(row, isLast) {
+			if (row.children && row.children.length > 0 || isLast) return;
+			if (row.name === "Root") router.push({ path: row.path });
+			const menuRow = layoutContext?.menu?.value?.flatMenus?.find((item) => item.name === row.name);
+			if (menuRow) {
+				const toPath = isString(menuRow.redirect) ? menuRow.redirect : menuRow.path || "";
+				const target = menuRow.meta?.link || "";
+				const hasUrl = isUrl(target);
+				if (router && router.currentRoute.value?.fullPath !== toPath) if (hasUrl && target && menuRow.meta?.linkStatus === 1) window.open(target);
+				else router.push({ path: toPath });
+			}
+		}
+		const RenderMenus = (menus) => {
+			return menus.map((menu) => {
+				const changeTitle = menu.name === router.currentRoute.value?.name ? layoutContext.currentMeta.value?.title : "";
+				if (menu.children && menu.children.length > 0) {
+					let _slot;
+					return createVNode(SubMenu, {
+						"key": menu.name,
+						"title": changeTitle || menu.breadcrumbName
+					}, _isSlot(_slot = RenderMenus(menu.children)) ? _slot : { default: () => [_slot] });
+				}
+				return createVNode(MenuItem, {
+					"key": menu.name,
+					"onClick": () => onRouterClick(menu)
+				}, { default: () => [changeTitle || menu.breadcrumbName] });
+			});
+		};
+		return () => {
+			const currentName = router.currentRoute.value?.name;
+			return createVNode("nav", { "class": classNames(prefixCls.value, props.hashId) }, [createVNode("ol", null, [props.routes.map((row, index) => {
+				let _slot2;
+				const changeTitle = row.name === currentName ? layoutContext.currentMeta.value?.title : "";
+				const breadcrumbItem = createVNode("div", {
+					"class": classNames(`${prefixCls.value}-link`, index === props.routes.length - 1 && `${prefixCls.value}-link-last`, props.hashId),
+					"onClick": () => onRouterClick(row, index === props.routes.length - 1)
+				}, [row.homeIcon ? row.homeIcon === true ? createVNode(HomeOutlined, null, null) : row.homeIcon : changeTitle || row.breadcrumbName]);
+				return createVNode(Fragment, null, [createVNode("li", {
+					"key": row.name,
+					"class": classNames(`${prefixCls.value}-item`, props.hashId)
+				}, [row.children && row.children.length > 0 ? createVNode(Dropdown, { "overlay": createVNode(Menu, { "selectedKeys": layoutContext.selectedKeys.value }, _isSlot(_slot2 = RenderMenus(row.children)) ? _slot2 : { default: () => [_slot2] }) }, { default: () => [createVNode("div", { "class": classNames(`${prefixCls.value}-overlay-link`, props.hashId) }, [changeTitle || row.breadcrumbName, createVNode(DownOutlined, null, null)])] }) : breadcrumbItem]), index < props.routes.length - 1 && createVNode("li", { "class": classNames(`${prefixCls.value}-separator`, props.hashId) }, [createTextVNode("/")])]);
+			})])]);
+		};
+	}
+});
+var Breadcrumb_default = Breadcrumb;
+
+//#endregion
+export { Breadcrumb_default as default };

package/dist/components/BreadCrumb/index.d.ts

@@ -0,0 +1,7 @@
+import * as vue168 from "vue";
+import * as ant_design_vue_es__util_type22 from "ant-design-vue/es/_util/type";
+
+//#region src/components/BreadCrumb/index.d.ts
+declare const _default: vue168.DefineComponent<{}, () => ant_design_vue_es__util_type22.VueNode, {}, {}, {}, vue168.ComponentOptionsMixin, vue168.ComponentOptionsMixin, {}, string, vue168.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue168.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/components/BreadCrumb/index.js

@@ -0,0 +1,44 @@
+import { useProLayoutContext } from "../../Context/index.js";
+import Breadcrumb_default from "./Breadcrumb.js";
+import { ProBreadCrumbStyle } from "./style.js";
+import { computed, createVNode, defineComponent } from "vue";
+import { useProStyle } from "@gx-design-vue/pro-provider";
+import { classNames, getPrefixCls } from "@gx-design-vue/pro-utils";
+import { cloneDeep as cloneDeep$1 } from "es-toolkit";
+
+//#region src/components/BreadCrumb/index.tsx
+var BreadCrumb_default = /* @__PURE__ */ defineComponent({
+	name: "BreadCrumb",
+	setup() {
+		const layoutContext = useProLayoutContext();
+		const baseClassName = (layoutContext?.getPrefixCls || getPrefixCls)({
+			isPor: true,
+			suffixCls: "breadcrumb"
+		});
+		const { wrapSSR, hashId } = useProStyle("ProBreadCrumb", [ProBreadCrumbStyle], baseClassName);
+		const breadcrumbRoutes = computed(() => {
+			const breadcrumb = layoutContext?.breadcrumb?.value || {};
+			const homeIcon = breadcrumb.homeIcon;
+			return (homeIcon && breadcrumb.routes?.length ? [{
+				path: "/",
+				name: "Root",
+				homeIcon,
+				breadcrumbName: "首页"
+			}] : []).concat(cloneDeep$1(breadcrumb.routes || []));
+		});
+		return () => {
+			const breadcrumbRender = layoutContext.breadcrumbRender.value === false ? false : layoutContext.breadcrumbRender.value || layoutContext?.breadcrumb?.value?.breadcrumbRender;
+			return wrapSSR(createVNode("div", { "class": classNames(baseClassName, hashId.value, layoutContext?.breadcrumb?.value?.position === "header" && `${baseClassName}-header`) }, [breadcrumbRender === false ? createVNode("span", null, null) : typeof breadcrumbRender === "function" ? breadcrumbRender?.({
+				...layoutContext?.breadcrumb?.value || {},
+				routes: breadcrumbRoutes.value
+			}) : createVNode(Breadcrumb_default, {
+				"className": baseClassName,
+				"hashId": hashId.value,
+				"routes": breadcrumbRoutes.value
+			}, null)]));
+		};
+	}
+});
+
+//#endregion
+export { BreadCrumb_default as default };

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

@@ -0,0 +1,8 @@
+import { CSSObject, GenerateStyle, ProAliasToken } from "@gx-design-vue/pro-provider";
+
+//#region src/components/BreadCrumb/style.d.ts
+declare function genFocusOutline(token: ProAliasToken, offset?: number): CSSObject;
+declare function genFocusStyle(token: ProAliasToken, offset?: number): CSSObject;
+declare const ProBreadCrumbStyle: GenerateStyle;
+//#endregion
+export { ProBreadCrumbStyle, genFocusOutline, genFocusStyle };

package/dist/components/BreadCrumb/style.js

@@ -0,0 +1,87 @@
+import { resetComponent, unit } from "@gx-design-vue/pro-provider";
+
+//#region src/components/BreadCrumb/style.ts
+function genFocusOutline(token, offset) {
+	return {
+		outline: `${unit(3)} solid ${token.colorPrimaryBorder}`,
+		outlineOffset: offset ?? 1,
+		transition: "outline-offset 0s, outline 0s"
+	};
+}
+function genFocusStyle(token, offset) {
+	return { "&:focus-visible": genFocusOutline(token, offset) };
+}
+const ProBreadCrumbStyle = (token) => {
+	const iconCls = ".anticon";
+	const breadCrumbRouters = `${token.componentCls}-routes`;
+	return { [token.componentCls]: {
+		[`&${token.componentCls}-header`]: {},
+		[breadCrumbRouters]: {
+			...resetComponent(token),
+			color: token.colorTextDescription,
+			fontSize: token.fontSize,
+			[iconCls]: { fontSize: token.fontSize },
+			ol: {
+				display: "flex",
+				flexWrap: "wrap",
+				margin: 0,
+				padding: 0,
+				listStyle: "none"
+			},
+			"li": { cursor: "pointer" },
+			[`${breadCrumbRouters}-item`]: {
+				display: "flex",
+				alignItems: "center"
+			},
+			[`${breadCrumbRouters}-link`]: {
+				color: token.colorTextDescription,
+				transition: `color ${token.motionDurationMid}`,
+				padding: `0 ${unit(token.paddingXXS)}`,
+				borderRadius: token.borderRadiusSM,
+				height: token.fontSize * token.lineHeight,
+				display: "flex",
+				alignItems: "center",
+				gap: token.marginXXS,
+				marginInline: token.calc(token.marginXXS).mul(-1).equal(),
+				[`&${breadCrumbRouters}-link-last`]: {
+					color: token.colorText,
+					"&:hover": {
+						color: token.colorText,
+						backgroundColor: "unset"
+					}
+				},
+				"&:hover": {
+					color: token.colorText,
+					backgroundColor: token.colorBgTextHover
+				},
+				...genFocusStyle(token)
+			},
+			"li:last-child": { cursor: "default" },
+			[`${breadCrumbRouters}-separator`]: {
+				marginInline: token.marginXS,
+				color: token.colorTextDescription
+			},
+			[`${breadCrumbRouters}-overlay-link`]: {
+				borderRadius: token.borderRadiusSM,
+				height: token.fontSize * token.lineHeight,
+				transition: `color ${token.motionDurationMid}`,
+				display: "flex",
+				alignItems: "center",
+				padding: `0 ${unit(token.paddingXXS)}`,
+				marginInline: token.calc(token.marginXXS).mul(-1).equal(),
+				[`> ${iconCls}`]: {
+					marginInlineStart: token.marginXXS,
+					fontSize: token.fontSizeIcon
+				},
+				"&:hover": {
+					color: token.colorText,
+					backgroundColor: token.colorBgTextHover
+				},
+				...genFocusStyle(token)
+			}
+		}
+	} };
+};
+
+//#endregion
+export { ProBreadCrumbStyle, genFocusOutline, genFocusStyle };

package/dist/components/CollapsedIcon/index.d.ts

@@ -0,0 +1,33 @@
+import { CollapsedButtonRender, CollapsedIconRender } from "../../types/SlotsTypings.js";
+import * as vue220 from "vue";
+import { PropType } from "vue";
+import { CustomRender } from "@gx-design-vue/pro-utils";
+import * as ant_design_vue_es__util_type24 from "ant-design-vue/es/_util/type";
+
+//#region src/components/CollapsedIcon/index.d.ts
+declare function renderCollapsedButton(buttonRender: CollapsedButtonRender | undefined, collapsed: boolean, dom?: CustomRender): CustomRender;
+declare function defaultRenderCollapsedButton(props: {
+  collapsed?: boolean;
+  iconRender?: CollapsedIconRender;
+}): CustomRender;
+declare const _default: vue220.DefineComponent<vue220.ExtractPropTypes<{
+  isMobile: PropType<boolean>;
+  collapsed: PropType<boolean>;
+  onClick: PropType<(e: MouseEvent) => void>;
+  iconRender: {
+    type: PropType<CollapsedIconRender>;
+    default: () => any;
+  };
+}>, () => ant_design_vue_es__util_type24.VueNode, {}, {}, {}, vue220.ComponentOptionsMixin, vue220.ComponentOptionsMixin, {}, string, vue220.PublicProps, Readonly<vue220.ExtractPropTypes<{
+  isMobile: PropType<boolean>;
+  collapsed: PropType<boolean>;
+  onClick: PropType<(e: MouseEvent) => void>;
+  iconRender: {
+    type: PropType<CollapsedIconRender>;
+    default: () => any;
+  };
+}>> & Readonly<{}>, {
+  iconRender: CollapsedIconRender;
+}, {}, {}, {}, string, vue220.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default, defaultRenderCollapsedButton, renderCollapsedButton };