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

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

@@ -0,0 +1,326 @@
+import { PureSettings } from "../../defaultSettings.js";
+import { AppItemProps, AppListProps } from "../AppsLogoComponents/typing.js";
+import { MenuDataItem, MessageDescriptor, RouterTypes } from "../../typing.js";
+import { AvatarPropsType } from "../GlobalHeader/ActionsContent.js";
+import { BaseMenuProps } from "./BaseMenu.js";
+import { SiderMenuToken } from "./style/stylish.js";
+import { ActionsRender, AppListRender, CollapsedButtonRender, HeaderRender, HeaderTitleRender, MenuContentRender, MenuExtraRender, MenuFooterRender, MenuHeaderRender, MenuItemRender, SubMenuItemRender } from "../../RenderTypings.js";
+import * as _$vue from "vue";
+import { CSSProperties, Events, ShallowRef, VNode } from "vue";
+import { GenerateStyle } from "@antdv-vue/pro-provider";
+import * as _$_antdv_vue_pro_utils0 from "@antdv-vue/pro-utils";
+import { VueNode, WithFalse } from "@antdv-vue/pro-utils";
+import * as _$antdv_next0 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";
+import { Breakpoint } from "antdv-next/dist/_util/responsiveObserver";
+import { SiderProps } from "antdv-next/dist/layout/index";
+
+//#region src/components/SiderMenu/SiderMenu.d.ts
+type HeaderRenderKey = 'menuHeaderRender' | 'headerTitleRender';
+/**
+ * 渲染 title 和 logo
+ *
+ * @param props
+ * @param renderKey
+ */
+declare function renderLogoAndTitle(props: Partial<SiderMenuProps & {
+  headerTitleRender: WithFalse<HeaderTitleRender>;
+}>, renderKey?: HeaderRenderKey): VueNode;
+type SiderMenuProps = BaseMenuProps & {
+  collapsedWidth?: number;
+  firstMenuWidth?: number;
+  theme?: SiderProps['theme']; /** 品牌logo的标识 */
+  logo?: VueNode$1; /** 相关品牌的列表 */
+  appList?: AppListProps; /** 相关品牌的列表自定义渲染 */
+  appListRender?: AppListRender | false; /** 相关品牌的列表项 点击事件，当事件存在时，appList 内配置的 url 不在自动跳转 */
+  itemClick?: (item: AppItemProps, popoverRef: ShallowRef<HTMLSpanElement | null>) => void;
+  /**
+   * @name links 侧边菜单底部的一些快捷链接
+   *
+   * @example links={[<a href="ant.design"> 访问官网 </a>,<a href="help.ant.design"> 帮助 </a>]}
+   */
+  links?: ({
+    icon?: VNode;
+    title?: string;
+    label?: VNode;
+  }[] | VueNode[]) | false; /** 菜单的宽度 */
+  siderWidth?: number;
+  /**
+   * @name menuHeaderRender  菜单 logo 和 title 区域的渲染
+   *
+   * @example 不要logo : menuHeaderRender={(logo,title)=> title}
+   * @example 不要title : menuHeaderRender={(logo,title)=> logo}
+   * @example 展开的时候显示title,收起显示 logo： menuHeaderRender={(logo,title,props)=> props.collapsed ? logo : title}
+   * @example 不要这个区域了 : menuHeaderRender={false}
+   */
+  menuHeaderRender?: MenuHeaderRender | false;
+  /**
+   * @name  侧边菜单，菜单区域的处理,可以单独处理菜单的dom
+   *
+   * @example 增加菜单区域的背景颜色 menuContentRender={(props,defaultDom)=><div style.ts={{backgroundColor:"red"}}>{defaultDom}</div>}
+   * @example 某些情况下不显示菜单 menuContentRender={(props)=> return <div>不显示菜单</div>}
+   */
+  menuContentRender?: MenuContentRender | false;
+  /**
+   * @name menuFooterRender 侧边菜单底部的配置，可以增加一些底部操作
+   *
+   * @example 底部增加超链接 menuFooterRender={()=><a href="https://pro.ant.design">pro.ant.design</a>}
+   * @example 根据收起展开配置不同的 dom  menuFooterRender={()=>collapsed? null :<a href="https://pro.ant.design">pro.ant.design</a>}
+   */
+  menuFooterRender?: MenuFooterRender | false;
+  /**
+   * @name collapsedButtonRender 自定义展开收起按钮的渲染
+   *
+   * @example 使用文字渲染 collapsedButtonRender={(collapsed)=>collapsed?"展开":"收起"})}
+   * @example 使用icon渲染 collapsedButtonRender={(collapsed)=>collapsed?<MenuUnfoldOutlined />:<MenuFoldOutlined />}
+   * @example 不渲染按钮 collapsedButtonRender={false}
+   */
+  collapsedButtonRender?: CollapsedButtonRender | false;
+  siderProps?: SiderProps;
+  /**
+   * @name breakpoint 菜单是否收起的断点，设置成false 可以禁用
+   *
+   * @example 禁用断点  breakpoint={false}
+   * @example 最小的屏幕再收起 breakpoint={"xs"}
+   */
+  breakpoint?: Breakpoint | false; /** 头像的设置 */
+  avatarProps?: AvatarPropsType;
+  /**
+   * @name actionsRender Layout的操作功能列表，不同的 layout 会放到不同的位置
+   */
+  actionsRender?: ActionsRender | false;
+  /**
+   * @name menuExtraRender 侧边菜单 title 和 logo 下面区域的渲染，一般会增加个搜索框
+   *
+   * @example  增加一个搜索框 menuExtraRender={()=>(<Search placeholder="请输入" />)}
+   * @example  根据收起展开配置不同的 dom： menuExtraRender={()=>collapsed? null : <Search placeholder="请输入" />}
+   */
+  menuExtraRender?: MenuExtraRender | false;
+  /**
+   * @name onMenuHeaderClick 菜单顶部logo 和 title 区域的点击事件
+   *
+   * @example 点击跳转到首页 onMenuHeaderClick={()=>{ router.push('/') }}
+   */
+  onMenuHeaderClick?: (e: Events['onClick']) => void;
+  /**
+   * @name logoStyle 侧边菜单的logo的样式，可以调整下大小
+   *
+   * @example 设置logo的大小为 42px logoStyle={{width: '42px', height: '42px'}}
+   */
+  logoStyle?: CSSProperties;
+  headerRender?: HeaderRender | false;
+};
+interface PrivateSiderMenuProps {
+  matchMenuKeys?: string[];
+  originCollapsed?: boolean;
+  menuRenderType?: 'header' | 'sider';
+  stylish?: GenerateStyle<SiderMenuToken>;
+}
+/**
+ *  默认渲染菜单折叠切换按钮
+ * @param collapsed
+ * @param tabIndex
+ * @returns
+ */
+declare const SiderMenu: _$vue.DefineSetupFnComponent<{
+  defaultCollapsed?: boolean;
+  collapsed?: boolean;
+  isMobile?: boolean;
+  onOpenChange?: (openKeys?: _$_antdv_vue_pro_utils0.Key[] | false) => void;
+  menuData?: MenuDataItem[];
+  onCollapse?: (collapsed: boolean) => void;
+  openKeys?: string[] | false;
+  mode?: _$antdv_next0.MenuProps["mode"];
+  menuProps?: _$antdv_next0.MenuProps;
+  menuItemRender?: MenuItemRender | false;
+  subMenuItemRender?: SubMenuItemRender | false;
+  iconPrefixes?: string;
+  formatMessage?: (message: MessageDescriptor) => string | undefined;
+  postMenuData?: (menusData?: MenuDataItem[]) => MenuDataItem[];
+  onSelect?: (selectedKeys: _$_antdv_vue_pro_utils0.Key[]) => void;
+} & Partial<RouterTypes> & Omit<_$antdv_next_dist_menu_index0.InternalMenuProps, "openKeys" | "onOpenChange" | "title"> & Partial<PureSettings> & {
+  collapsedWidth?: number;
+  firstMenuWidth?: number;
+  theme?: SiderProps["theme"]; /** 品牌logo的标识 */
+  logo?: VueNode$1; /** 相关品牌的列表 */
+  appList?: AppListProps; /** 相关品牌的列表自定义渲染 */
+  appListRender?: AppListRender | false; /** 相关品牌的列表项 点击事件，当事件存在时，appList 内配置的 url 不在自动跳转 */
+  itemClick?: (item: AppItemProps, popoverRef: ShallowRef<HTMLSpanElement | null>) => void;
+  /**
+   * @name links 侧边菜单底部的一些快捷链接
+   *
+   * @example links={[<a href="ant.design"> 访问官网 </a>,<a href="help.ant.design"> 帮助 </a>]}
+   */
+  links?: ({
+    icon?: VNode;
+    title?: string;
+    label?: VNode;
+  }[] | VueNode[]) | false; /** 菜单的宽度 */
+  siderWidth?: number;
+  /**
+   * @name menuHeaderRender  菜单 logo 和 title 区域的渲染
+   *
+   * @example 不要logo : menuHeaderRender={(logo,title)=> title}
+   * @example 不要title : menuHeaderRender={(logo,title)=> logo}
+   * @example 展开的时候显示title,收起显示 logo： menuHeaderRender={(logo,title,props)=> props.collapsed ? logo : title}
+   * @example 不要这个区域了 : menuHeaderRender={false}
+   */
+  menuHeaderRender?: MenuHeaderRender | false;
+  /**
+   * @name  侧边菜单，菜单区域的处理,可以单独处理菜单的dom
+   *
+   * @example 增加菜单区域的背景颜色 menuContentRender={(props,defaultDom)=><div style.ts={{backgroundColor:"red"}}>{defaultDom}</div>}
+   * @example 某些情况下不显示菜单 menuContentRender={(props)=> return <div>不显示菜单</div>}
+   */
+  menuContentRender?: MenuContentRender | false;
+  /**
+   * @name menuFooterRender 侧边菜单底部的配置，可以增加一些底部操作
+   *
+   * @example 底部增加超链接 menuFooterRender={()=><a href="https://pro.ant.design">pro.ant.design</a>}
+   * @example 根据收起展开配置不同的 dom  menuFooterRender={()=>collapsed? null :<a href="https://pro.ant.design">pro.ant.design</a>}
+   */
+  menuFooterRender?: MenuFooterRender | false;
+  /**
+   * @name collapsedButtonRender 自定义展开收起按钮的渲染
+   *
+   * @example 使用文字渲染 collapsedButtonRender={(collapsed)=>collapsed?"展开":"收起"})}
+   * @example 使用icon渲染 collapsedButtonRender={(collapsed)=>collapsed?<MenuUnfoldOutlined />:<MenuFoldOutlined />}
+   * @example 不渲染按钮 collapsedButtonRender={false}
+   */
+  collapsedButtonRender?: CollapsedButtonRender | false;
+  siderProps?: SiderProps;
+  /**
+   * @name breakpoint 菜单是否收起的断点，设置成false 可以禁用
+   *
+   * @example 禁用断点  breakpoint={false}
+   * @example 最小的屏幕再收起 breakpoint={"xs"}
+   */
+  breakpoint?: Breakpoint | false; /** 头像的设置 */
+  avatarProps?: AvatarPropsType;
+  /**
+   * @name actionsRender Layout的操作功能列表，不同的 layout 会放到不同的位置
+   */
+  actionsRender?: ActionsRender | false;
+  /**
+   * @name menuExtraRender 侧边菜单 title 和 logo 下面区域的渲染，一般会增加个搜索框
+   *
+   * @example  增加一个搜索框 menuExtraRender={()=>(<Search placeholder="请输入" />)}
+   * @example  根据收起展开配置不同的 dom： menuExtraRender={()=>collapsed? null : <Search placeholder="请输入" />}
+   */
+  menuExtraRender?: MenuExtraRender | false;
+  /**
+   * @name onMenuHeaderClick 菜单顶部logo 和 title 区域的点击事件
+   *
+   * @example 点击跳转到首页 onMenuHeaderClick={()=>{ router.push('/') }}
+   */
+  onMenuHeaderClick?: (e: Events["onClick"]) => void;
+  /**
+   * @name logoStyle 侧边菜单的logo的样式，可以调整下大小
+   *
+   * @example 设置logo的大小为 42px logoStyle={{width: '42px', height: '42px'}}
+   */
+  logoStyle?: CSSProperties;
+  headerRender?: HeaderRender | false;
+} & PrivateSiderMenuProps, {}, {}, {
+  defaultCollapsed?: boolean;
+  collapsed?: boolean;
+  isMobile?: boolean;
+  onOpenChange?: (openKeys?: _$_antdv_vue_pro_utils0.Key[] | false) => void;
+  menuData?: MenuDataItem[];
+  onCollapse?: (collapsed: boolean) => void;
+  openKeys?: string[] | false;
+  mode?: _$antdv_next0.MenuProps["mode"];
+  menuProps?: _$antdv_next0.MenuProps;
+  menuItemRender?: MenuItemRender | false;
+  subMenuItemRender?: SubMenuItemRender | false;
+  iconPrefixes?: string;
+  formatMessage?: (message: MessageDescriptor) => string | undefined;
+  postMenuData?: (menusData?: MenuDataItem[]) => MenuDataItem[];
+  onSelect?: (selectedKeys: _$_antdv_vue_pro_utils0.Key[]) => void;
+} & Partial<RouterTypes> & Omit<_$antdv_next_dist_menu_index0.InternalMenuProps, "openKeys" | "onOpenChange" | "title"> & Partial<PureSettings> & {
+  collapsedWidth?: number;
+  firstMenuWidth?: number;
+  theme?: SiderProps["theme"]; /** 品牌logo的标识 */
+  logo?: VueNode$1; /** 相关品牌的列表 */
+  appList?: AppListProps; /** 相关品牌的列表自定义渲染 */
+  appListRender?: AppListRender | false; /** 相关品牌的列表项 点击事件，当事件存在时，appList 内配置的 url 不在自动跳转 */
+  itemClick?: (item: AppItemProps, popoverRef: ShallowRef<HTMLSpanElement | null>) => void;
+  /**
+   * @name links 侧边菜单底部的一些快捷链接
+   *
+   * @example links={[<a href="ant.design"> 访问官网 </a>,<a href="help.ant.design"> 帮助 </a>]}
+   */
+  links?: ({
+    icon?: VNode;
+    title?: string;
+    label?: VNode;
+  }[] | VueNode[]) | false; /** 菜单的宽度 */
+  siderWidth?: number;
+  /**
+   * @name menuHeaderRender  菜单 logo 和 title 区域的渲染
+   *
+   * @example 不要logo : menuHeaderRender={(logo,title)=> title}
+   * @example 不要title : menuHeaderRender={(logo,title)=> logo}
+   * @example 展开的时候显示title,收起显示 logo： menuHeaderRender={(logo,title,props)=> props.collapsed ? logo : title}
+   * @example 不要这个区域了 : menuHeaderRender={false}
+   */
+  menuHeaderRender?: MenuHeaderRender | false;
+  /**
+   * @name  侧边菜单，菜单区域的处理,可以单独处理菜单的dom
+   *
+   * @example 增加菜单区域的背景颜色 menuContentRender={(props,defaultDom)=><div style.ts={{backgroundColor:"red"}}>{defaultDom}</div>}
+   * @example 某些情况下不显示菜单 menuContentRender={(props)=> return <div>不显示菜单</div>}
+   */
+  menuContentRender?: MenuContentRender | false;
+  /**
+   * @name menuFooterRender 侧边菜单底部的配置，可以增加一些底部操作
+   *
+   * @example 底部增加超链接 menuFooterRender={()=><a href="https://pro.ant.design">pro.ant.design</a>}
+   * @example 根据收起展开配置不同的 dom  menuFooterRender={()=>collapsed? null :<a href="https://pro.ant.design">pro.ant.design</a>}
+   */
+  menuFooterRender?: MenuFooterRender | false;
+  /**
+   * @name collapsedButtonRender 自定义展开收起按钮的渲染
+   *
+   * @example 使用文字渲染 collapsedButtonRender={(collapsed)=>collapsed?"展开":"收起"})}
+   * @example 使用icon渲染 collapsedButtonRender={(collapsed)=>collapsed?<MenuUnfoldOutlined />:<MenuFoldOutlined />}
+   * @example 不渲染按钮 collapsedButtonRender={false}
+   */
+  collapsedButtonRender?: CollapsedButtonRender | false;
+  siderProps?: SiderProps;
+  /**
+   * @name breakpoint 菜单是否收起的断点，设置成false 可以禁用
+   *
+   * @example 禁用断点  breakpoint={false}
+   * @example 最小的屏幕再收起 breakpoint={"xs"}
+   */
+  breakpoint?: Breakpoint | false; /** 头像的设置 */
+  avatarProps?: AvatarPropsType;
+  /**
+   * @name actionsRender Layout的操作功能列表，不同的 layout 会放到不同的位置
+   */
+  actionsRender?: ActionsRender | false;
+  /**
+   * @name menuExtraRender 侧边菜单 title 和 logo 下面区域的渲染，一般会增加个搜索框
+   *
+   * @example  增加一个搜索框 menuExtraRender={()=>(<Search placeholder="请输入" />)}
+   * @example  根据收起展开配置不同的 dom： menuExtraRender={()=>collapsed? null : <Search placeholder="请输入" />}
+   */
+  menuExtraRender?: MenuExtraRender | false;
+  /**
+   * @name onMenuHeaderClick 菜单顶部logo 和 title 区域的点击事件
+   *
+   * @example 点击跳转到首页 onMenuHeaderClick={()=>{ router.push('/') }}
+   */
+  onMenuHeaderClick?: (e: Events["onClick"]) => void;
+  /**
+   * @name logoStyle 侧边菜单的logo的样式，可以调整下大小
+   *
+   * @example 设置logo的大小为 42px logoStyle={{width: '42px', height: '42px'}}
+   */
+  logoStyle?: CSSProperties;
+  headerRender?: HeaderRender | false;
+} & PrivateSiderMenuProps & {}, _$vue.PublicProps>;
+//#endregion
+export { HeaderRenderKey, PrivateSiderMenuProps, SiderMenuProps, SiderMenu as default, renderLogoAndTitle };