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

package/dist/components/SettingDrawer/style/index.js

@@ -0,0 +1,236 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/SettingDrawer/style/index.ts
+const genSettingDrawerStyle = (token) => {
+	const portalClassNames = [
+		"drawer",
+		"message",
+		"popover",
+		"tooltip",
+		"modal-root",
+		"image-preview-root",
+		"dropdown",
+		"menu-submenu-popup",
+		"select-dropdown",
+		"cascader-dropdown",
+		"picker-dropdown",
+		"tour",
+		"notification"
+	].map((className) => `${token.antCls}-${className}`);
+	const colorWeakPortalStyles = Object.fromEntries(portalClassNames.flatMap((className) => [[`> ${className}`, { filter: "invert(80%)" }], [`> div > ${className}`, { filter: "invert(80%)" }]]));
+	return {
+		[`${token.componentCls}-handle`]: {
+			position: "absolute",
+			insetBlockStart: 240,
+			insetInlineEnd: 300,
+			zIndex: 0,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 48,
+			height: 48,
+			fontSize: 16,
+			textAlign: "center",
+			backgroundColor: token.colorPrimary,
+			borderEndStartRadius: token.borderRadiusLG,
+			borderStartStartRadius: token.borderRadiusLG,
+			"-webkit-backdropilter": "saturate(180%) blur(20px)",
+			backdropFilter: "saturate(180%) blur(20px)",
+			cursor: "pointer",
+			pointerEvents: "auto"
+		},
+		[`${token.componentCls}-handle-container`]: {
+			position: "fixed",
+			inset: 0,
+			pointerEvents: "none",
+			[`${token.componentCls}-handle`]: { insetInlineEnd: 0 }
+		},
+		[token.componentCls]: {
+			"&-collapsed": { [`${token.antCls}-drawer-content-wrapper`]: {
+				display: "block !important",
+				transform: "translateX(100%) !important"
+			} },
+			"&-realDark": {
+				[`${token.componentCls}-body-title`]: { color: "rgb(229, 224, 216)" },
+				[`${token.componentCls}-content`]: { [`${token.componentCls}-block-checkbox`]: { "&-item": {
+					"&-realDark": {
+						backgroundColor: "rgba(15, 28, 41, 0.85)",
+						boxShadow: "0px 1px 2.5px rgba(13, 13, 13, 0.18)",
+						"&::before": { backgroundColor: "rgba(15, 28, 41,0.65)" },
+						"&::after": { backgroundColor: "rgba(15, 28, 41,0.85)" }
+					},
+					"&-light": {
+						backgroundColor: "rgb(42, 44, 44)",
+						boxShadow: "rgba(13, 13, 13, 0.18) 0px 1px 2.5px",
+						"&::before": { backgroundColor: "rgb(36, 37, 37)" },
+						"&::after": { backgroundColor: "rgb(36, 37, 37)" }
+					},
+					"&-dark,&-side": {
+						backgroundColor: "rgb(42, 44, 44)",
+						boxShadow: "rgba(13, 13, 13, 0.18) 0px 1px 2.5px",
+						"&::before": {
+							zIndex: "1",
+							backgroundColor: "#0f1c29"
+						},
+						"&::after": { backgroundColor: "rgb(36, 37, 37)" }
+					},
+					"&-top": {
+						backgroundColor: "rgb(42, 44, 44)",
+						boxShadow: "rgba(13, 13, 13, 0.18) 0px 1px 2.5px",
+						"&::after": { backgroundColor: "rgb(15 28 41)" }
+					},
+					"&-mix": {
+						backgroundColor: "rgb(42, 44, 44)",
+						boxShadow: "rgba(13, 13, 13, 0.18) 0px 1px 2.5px",
+						"&::before": { backgroundColor: "rgb(36, 37, 37)" },
+						"&::after": { backgroundColor: "#0f1c29" }
+					},
+					"&-left": {
+						backgroundColor: "rgb(42, 44, 44)",
+						boxShadow: "rgba(13, 13, 13, 0.18) 0px 1px 2.5px",
+						"&-inner": { backgroundColor: "rgb(36, 37, 37)" },
+						"&::before": { backgroundColor: "#0f1c29" },
+						"&::after": { backgroundColor: "rgb(36, 37, 37)" }
+					},
+					"&-sub": {
+						backgroundColor: "rgb(42, 44, 44)",
+						boxShadow: "rgba(13, 13, 13, 0.18) 0px 1px 2.5px",
+						"&::before": {
+							zIndex: "1",
+							backgroundColor: "#0f1c29"
+						},
+						"&::after": { backgroundColor: "rgb(36, 37, 37)" }
+					}
+				} } }
+			},
+			"&-content": { position: "relative" },
+			"&-body-title": {
+				marginBlock: token.marginXS,
+				fontSize: 14,
+				lineHeight: "22px",
+				color: token.colorTextHeading
+			},
+			"&-block-checkbox": {
+				display: "flex",
+				minHeight: 42,
+				gap: token.marginSM,
+				"& &-item": {
+					position: "relative",
+					width: 44,
+					height: 36,
+					overflow: "hidden",
+					borderRadius: 4,
+					boxShadow: "0 1px 2.5px rgba(0,0,0,.18)",
+					cursor: "pointer",
+					[`&:not(&-top):not(&-left)::before`]: {
+						content: "''",
+						position: "absolute",
+						insetBlockStart: 0,
+						insetInlineStart: 0,
+						width: "33%",
+						height: "100%"
+					},
+					"&::after": {
+						position: "absolute",
+						insetBlockStart: 0,
+						insetInlineStart: 0,
+						width: "100%",
+						height: "25%",
+						content: "''"
+					},
+					"&-realDark": {
+						backgroundColor: "rgba(0, 21, 41, 0.85)",
+						"&::before": { backgroundColor: "rgba(0, 0, 0, 0.65)" },
+						"&::after": { backgroundColor: "rgba(0, 0, 0, 0.85)" }
+					},
+					"&-light": {
+						backgroundColor: "#f0f2f5",
+						"&::before": { backgroundColor: "#fff" },
+						"&::after": { backgroundColor: "#fff" }
+					},
+					"&-dark,&-side": {
+						backgroundColor: "#f0f2f5",
+						"&::before": {
+							zIndex: 1,
+							backgroundColor: "#001529"
+						},
+						"&::after": { backgroundColor: "#fff" }
+					},
+					"&-top": {
+						backgroundColor: "#f7f8fa",
+						"&::after": { backgroundColor: "#001529" }
+					},
+					"&-mix": {
+						backgroundColor: "#f7f8fa",
+						"&::before": { backgroundColor: "#fff" },
+						"&::after": { backgroundColor: "#001529" }
+					},
+					"&-left": {
+						backgroundColor: "#f7f8fa",
+						"&-inner": {
+							position: "absolute",
+							insetInlineStart: 0,
+							insetBlockStart: 0,
+							width: "33%",
+							height: "100%",
+							backgroundColor: "#fff"
+						},
+						"&::before": {
+							content: "''",
+							position: "absolute",
+							insetBlockStart: 0,
+							insetInlineStart: 0,
+							backgroundColor: "#001529",
+							width: "16%",
+							zIndex: 1,
+							height: "100%"
+						},
+						"&::after": { backgroundColor: "#ffff" }
+					}
+				},
+				"& &-selectIcon": {
+					position: "absolute",
+					insetInlineEnd: 6,
+					insetBlockEnd: 4,
+					color: token.colorPrimary,
+					fontWeight: "bold",
+					fontSize: 14,
+					pointerEvents: "none",
+					".action": { color: token.colorPrimary }
+				},
+				"& &-icon": {
+					fontSize: 56,
+					lineHeight: "56px"
+				}
+			},
+			"&-theme-color": {
+				marginBlockStart: 16,
+				overflow: "hidden",
+				"& &-block": {
+					float: "left",
+					width: 20,
+					height: 20,
+					lineHeight: "20px",
+					marginBlockStart: 8,
+					marginInlineEnd: 8,
+					color: "#fff",
+					fontWeight: "bold",
+					textAlign: "center",
+					borderRadius: 2,
+					cursor: "pointer"
+				}
+			},
+			[`&-list${token.antCls}-listy`]: { [`${token.antCls}-listy-item`]: {
+				paddingBlockStart: token.paddingXS,
+				paddingBlockEnd: token.paddingXS,
+				"&:hover": { backgroundColor: "transparent" }
+			} }
+		},
+		"[data-color-weak]": { ...colorWeakPortalStyles }
+	};
+};
+var style_default = useStyle("ProLayoutSettingDrawer", (token) => {
+	return [genSettingDrawerStyle(mergeToken(token, {}))];
+});
+//#endregion
+export { style_default as default, genSettingDrawerStyle };

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

@@ -0,0 +1,133 @@
+import { PureSettings } from "../../defaultSettings.js";
+import { MenuDataItem, MessageDescriptor, RouterTypes } from "../../typing.js";
+import { PrivateSiderMenuProps } from "./SiderMenu.js";
+import { MenuItemRender, SubMenuItemRender } from "../../RenderTypings.js";
+import * as _$vue from "vue";
+import { DefineSetupFnComponent, VNode } from "vue";
+import { Key } from "@antdv-vue/pro-utils";
+import { MenuProps } from "antdv-next";
+import { VueNode as VueNode$1 } from "antdv-next/dist/_util/type";
+import * as _$antdv_next_dist_menu_index0 from "antdv-next/dist/menu/index";
+
+//#region src/components/SiderMenu/BaseMenu.d.ts
+type BaseMenuProps = {
+  defaultCollapsed?: boolean;
+  collapsed?: boolean;
+  isMobile?: boolean;
+  onOpenChange?: (openKeys?: Key[] | false) => void;
+  menuData?: MenuDataItem[];
+  onCollapse?: (collapsed: boolean) => void;
+  openKeys?: string[] | false;
+  mode?: MenuProps['mode'];
+  /**
+   * @name menuProps 要给菜单的props, 参考ant-menu的属性
+   */
+  menuProps?: MenuProps;
+  /**
+   * @name menuItemRender 处理菜单的 props，可以复写菜单的点击功能，一般结合 VueRouter 框架使用
+   * @see 非子级的菜单要使用 subMenuItemRender 来处理
+   *
+   * @example 使用 a 标签 menuItemRender={(item, defaultDom) => { return <a onClick={()=> router.push(item.path) }>{defaultDom}</a> }}
+   * @example 使用 Link 标签 menuItemRender={(item, defaultDom) => { return <RouterLink to={item.path}>{defaultDom}</RouterLink> }}
+   */
+  menuItemRender?: MenuItemRender | false;
+  /**
+   * @name subMenuItemRender 处理父级菜单的 props，可以复写菜单的点击功能，一般用于埋点
+   * @see 子级的菜单要使用 menuItemRender 来处理
+   *
+   * @example 使用 a 标签跳转到特殊的地址 subMenuItemRender={(item, defaultDom) => { return <a onClick={()=> router.push(item.path) }>{defaultDom}</a> }}
+   * @example 增加埋点 subMenuItemRender={(item, defaultDom) => { return <a onClick={()=> log.click(item.name) }>{defaultDom}</a> }}
+   */
+  subMenuItemRender?: SubMenuItemRender | false;
+  iconPrefixes?: string;
+  formatMessage?: (message: MessageDescriptor) => string | undefined;
+  /**
+   * @name postMenuData 处理 menuData 的方法，与 menuDataRender 不同，postMenuData处理完成后会直接渲染，不再进行国际化和拼接处理
+   *
+   * @example 增加菜单图标 postMenuData={(menuData) => { return menuData.map(item => { return { ...item, icon: <Icon type={item.icon} /> } }) }}
+   */
+  postMenuData?: (menusData?: MenuDataItem[]) => MenuDataItem[];
+  onSelect?: (selectedKeys: Key[]) => void;
+} & Partial<RouterTypes> & Omit<MenuProps, 'openKeys' | 'onOpenChange' | 'title'> & Partial<PureSettings>;
+declare function getIcon(icon: VueNode$1 | DefineSetupFnComponent<Record<string, any>>, iconPrefixes: string | undefined, className: string): number | boolean | VNode<_$vue.RendererNode, _$vue.RendererElement, {
+  [key: string]: any;
+}> | "" | null;
+declare const BaseMenu: DefineSetupFnComponent<{
+  defaultCollapsed?: boolean;
+  collapsed?: boolean;
+  isMobile?: boolean;
+  onOpenChange?: (openKeys?: Key[] | false) => void;
+  menuData?: MenuDataItem[];
+  onCollapse?: (collapsed: boolean) => void;
+  openKeys?: string[] | false;
+  mode?: MenuProps["mode"];
+  /**
+   * @name menuProps 要给菜单的props, 参考ant-menu的属性
+   */
+  menuProps?: MenuProps;
+  /**
+   * @name menuItemRender 处理菜单的 props，可以复写菜单的点击功能，一般结合 VueRouter 框架使用
+   * @see 非子级的菜单要使用 subMenuItemRender 来处理
+   *
+   * @example 使用 a 标签 menuItemRender={(item, defaultDom) => { return <a onClick={()=> router.push(item.path) }>{defaultDom}</a> }}
+   * @example 使用 Link 标签 menuItemRender={(item, defaultDom) => { return <RouterLink to={item.path}>{defaultDom}</RouterLink> }}
+   */
+  menuItemRender?: MenuItemRender | false;
+  /**
+   * @name subMenuItemRender 处理父级菜单的 props，可以复写菜单的点击功能，一般用于埋点
+   * @see 子级的菜单要使用 menuItemRender 来处理
+   *
+   * @example 使用 a 标签跳转到特殊的地址 subMenuItemRender={(item, defaultDom) => { return <a onClick={()=> router.push(item.path) }>{defaultDom}</a> }}
+   * @example 增加埋点 subMenuItemRender={(item, defaultDom) => { return <a onClick={()=> log.click(item.name) }>{defaultDom}</a> }}
+   */
+  subMenuItemRender?: SubMenuItemRender | false;
+  iconPrefixes?: string;
+  formatMessage?: (message: MessageDescriptor) => string | undefined;
+  /**
+   * @name postMenuData 处理 menuData 的方法，与 menuDataRender 不同，postMenuData处理完成后会直接渲染，不再进行国际化和拼接处理
+   *
+   * @example 增加菜单图标 postMenuData={(menuData) => { return menuData.map(item => { return { ...item, icon: <Icon type={item.icon} /> } }) }}
+   */
+  postMenuData?: (menusData?: MenuDataItem[]) => MenuDataItem[];
+  onSelect?: (selectedKeys: Key[]) => void;
+} & Partial<RouterTypes> & Omit<_$antdv_next_dist_menu_index0.InternalMenuProps, "openKeys" | "onOpenChange" | "title"> & Partial<PureSettings> & PrivateSiderMenuProps, {}, {}, {
+  defaultCollapsed?: boolean;
+  collapsed?: boolean;
+  isMobile?: boolean;
+  onOpenChange?: (openKeys?: Key[] | false) => void;
+  menuData?: MenuDataItem[];
+  onCollapse?: (collapsed: boolean) => void;
+  openKeys?: string[] | false;
+  mode?: MenuProps["mode"];
+  /**
+   * @name menuProps 要给菜单的props, 参考ant-menu的属性
+   */
+  menuProps?: MenuProps;
+  /**
+   * @name menuItemRender 处理菜单的 props，可以复写菜单的点击功能，一般结合 VueRouter 框架使用
+   * @see 非子级的菜单要使用 subMenuItemRender 来处理
+   *
+   * @example 使用 a 标签 menuItemRender={(item, defaultDom) => { return <a onClick={()=> router.push(item.path) }>{defaultDom}</a> }}
+   * @example 使用 Link 标签 menuItemRender={(item, defaultDom) => { return <RouterLink to={item.path}>{defaultDom}</RouterLink> }}
+   */
+  menuItemRender?: MenuItemRender | false;
+  /**
+   * @name subMenuItemRender 处理父级菜单的 props，可以复写菜单的点击功能，一般用于埋点
+   * @see 子级的菜单要使用 menuItemRender 来处理
+   *
+   * @example 使用 a 标签跳转到特殊的地址 subMenuItemRender={(item, defaultDom) => { return <a onClick={()=> router.push(item.path) }>{defaultDom}</a> }}
+   * @example 增加埋点 subMenuItemRender={(item, defaultDom) => { return <a onClick={()=> log.click(item.name) }>{defaultDom}</a> }}
+   */
+  subMenuItemRender?: SubMenuItemRender | false;
+  iconPrefixes?: string;
+  formatMessage?: (message: MessageDescriptor) => string | undefined;
+  /**
+   * @name postMenuData 处理 menuData 的方法，与 menuDataRender 不同，postMenuData处理完成后会直接渲染，不再进行国际化和拼接处理
+   *
+   * @example 增加菜单图标 postMenuData={(menuData) => { return menuData.map(item => { return { ...item, icon: <Icon type={item.icon} /> } }) }}
+   */
+  postMenuData?: (menusData?: MenuDataItem[]) => MenuDataItem[];
+  onSelect?: (selectedKeys: Key[]) => void;
+} & Partial<RouterTypes> & Omit<_$antdv_next_dist_menu_index0.InternalMenuProps, "openKeys" | "onOpenChange" | "title"> & Partial<PureSettings> & PrivateSiderMenuProps & {}, _$vue.PublicProps>;
+//#endregion
+export { BaseMenuProps, BaseMenu as default, getIcon };