yuang-framework-ui-pc 1.1.1 → 1.1.3

package/es/ele-pro-layout/props.d.ts

@@ -0,0 +1,253 @@
+import { PropType, ExtractPropTypes, InjectionKey } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { EleMenusProps, EleBreadcrumbProps, EleDropdownProps, EleBacktopProps } from '../ele-app/plus';
+import { ContextMenus } from '../ele-tabs/types';
+import { BreadcrumbSeparator as Separator } from '../ele-breadcrumb/types';
+import { Layout, SidebarLayout, HeaderStyle, SidebarStyle, TabStyle, TabBar, Maximized } from '../ele-admin-layout/types';
+import { MenuItem, TabItem, MenuItemTrigger, MenuI18n, BeforeClick, TabItemEventOption, BodySizeChangeOption, ProLayoutProvide } from './types';
+
+type TextEllipsisTooltip = EleMenusProps['textEllipsisTooltip'];
+type ProLayoutKey = InjectionKey<ProLayoutProvide>;
+/**
+ * 属性
+ */
+export declare const proLayoutProps: {
+    /** 高度 */
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: null;
+    };
+    /** 菜单数据 */
+    menus: PropType<MenuItem[] | null>;
+    /** 页签数据 */
+    tabs: PropType<TabItem[] | null>;
+    /** 是否折叠侧栏 */
+    collapse: BooleanConstructor;
+    /** 双侧栏一级是否紧凑风格 */
+    compact: BooleanConstructor;
+    /** 内容区是否最大化 */
+    maximized: PropType<Maximized>;
+    /** 是否需要页签栏 */
+    tabBar: {
+        type: PropType<TabBar>;
+        default: boolean;
+    };
+    /** 是否需要面包屑导航 */
+    breadcrumb: {
+        type: PropType<boolean | EleBreadcrumbProps>;
+        default: boolean;
+    };
+    /** 是否需要返回顶部 */
+    backTop: {
+        type: PropType<boolean | EleBacktopProps>;
+        default: boolean;
+    };
+    /** 布局类型 */
+    layout: PropType<Layout>;
+    /** 侧栏布局类型 */
+    sidebarLayout: PropType<SidebarLayout>;
+    /** 顶栏风格 */
+    headerStyle: PropType<HeaderStyle>;
+    /** 侧栏风格 */
+    sidebarStyle: {
+        type: PropType<SidebarStyle>;
+        default: string;
+    };
+    /** 页签风格 */
+    tabStyle: {
+        type: PropType<TabStyle>;
+        default: string;
+    };
+    /** 是否固定顶栏 */
+    fixedHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否固定侧栏 */
+    fixedSidebar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否固定内容区 */
+    fixedBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 图标是否置于顶栏 */
+    logoInHeader: BooleanConstructor;
+    /** 是否需要固定的主页页签 */
+    fixedHome: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 主页路由地址 */
+    homePath: StringConstructor;
+    /** 刷新路由地址 */
+    redirectPath: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 内容区是否撑满 */
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 返回键退出内容区最大化 */
+    compressOnEsc: BooleanConstructor;
+    /** 固定主体时切换路由自动滚到顶部 */
+    autoScrollTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 顶栏菜单触发模式 */
+    navTrigger: PropType<MenuItemTrigger>;
+    /** 双侧栏一级菜单触发模式 */
+    boxTrigger: PropType<MenuItemTrigger>;
+    /** 侧栏菜单触发模式 */
+    itemTrigger: PropType<MenuItemTrigger>;
+    /** hover模式的菜单切换超时 */
+    menuHoverTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 菜单点击事件前钩子 */
+    beforeClick: PropType<BeforeClick>;
+    /** 是否支持内嵌缓存 */
+    keepAlive: BooleanConstructor;
+    /** 内嵌切换动画 */
+    transitionName: StringConstructor;
+    /** 内嵌进入动画延迟时间 */
+    transitionDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 是否开启响应式 */
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 国际化语言 */
+    locale: StringConstructor;
+    /** 菜单标题国际化方法 */
+    i18n: PropType<MenuI18n>;
+    /** 是否支持页签右键菜单 */
+    tabContextMenu: PropType<boolean | EleDropdownProps>;
+    /** 右键菜单 */
+    tabContextMenus: PropType<ContextMenus>;
+    /** 是否支持页签拖动排序 */
+    tabSortable: BooleanConstructor;
+    /** 顶栏菜单标题插槽名称 */
+    headerTitleSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 顶栏菜单图标插槽名称 */
+    headerIconSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 侧栏菜单标题插槽名称 */
+    sidebarTitleSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 侧栏菜单图标插槽名称 */
+    sidebarIconSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 双侧栏一级菜单标题插槽名称 */
+    sideboxTitleSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 双侧栏一级菜单图标插槽名称 */
+    sideboxIconSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 顶栏样式 */
+    headerCustomStyle: PropType<StyleValue>;
+    /** 侧栏样式 */
+    sidebarCustomStyle: PropType<StyleValue>;
+    /** 双侧栏一级样式 */
+    sideboxCustomStyle: PropType<StyleValue>;
+    /** 页签栏样式 */
+    tabsCustomStyle: PropType<StyleValue>;
+    /** 内容区样式 */
+    contentCustomStyle: PropType<StyleValue>;
+    /** logo样式 */
+    logoStyle: PropType<StyleValue>;
+    /** logo文字样式 */
+    logoTitleStyle: PropType<StyleValue>;
+    /** 顶栏菜单样式 */
+    headerMenusStyle: PropType<StyleValue>;
+    /** 侧栏菜单样式 */
+    sidebarMenusStyle: PropType<StyleValue>;
+    /** 双侧栏一级菜单样式 */
+    sideboxMenusStyle: PropType<StyleValue>;
+    /** 顶栏菜单属性 */
+    headerMenuProps: PropType<EleMenusProps>;
+    /** 侧栏菜单属性 */
+    sidebarMenuProps: PropType<EleMenusProps>;
+    /** 双侧栏一级菜单属性 */
+    sideboxMenuProps: PropType<EleMenusProps>;
+    /** 顶栏菜单是否省略多余的子项 */
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 顶栏菜单省略项的属性 */
+    ellipsisProps: PropType<EleMenusProps["ellipsisProps"]>;
+    /** 顶栏子菜单触发方式 */
+    menuTrigger: PropType<EleMenusProps["menuTrigger"]>;
+    /** 侧栏默认展开的菜单 */
+    sidebarOpeneds: PropType<string[]>;
+    /** 侧栏是否只保持一个子菜单展开 */
+    uniqueOpened: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 侧栏菜单是否彩色图标 */
+    colorfulIcon: BooleanConstructor;
+    /** 菜单 tooltip 主题 */
+    tooltipEffect: PropType<EleMenusProps["popperEffect"]>;
+    /** 是否开启菜单文本溢出提示 */
+    menuTextEllipsisTooltip: PropType<TextEllipsisTooltip>;
+    /** 内容区最大时不带页签栏 */
+    expanded: BooleanConstructor;
+    /** 面包屑导航分隔符 */
+    breadcrumbSeparator: PropType<Separator>;
+    /** 返回顶部可见的滚动高度 */
+    backTopVisibilityHeight: NumberConstructor;
+    /** 返回顶部的右边距 */
+    backTopRight: NumberConstructor;
+    /** 返回顶部的下边距 */
+    backTopBottom: NumberConstructor;
+    /** 返回顶部的目标选择器 */
+    backTopTarget: StringConstructor;
+};
+export type ProLayoutProps = ExtractPropTypes<typeof proLayoutProps>;
+/**
+ * 事件
+ */
+export declare const proLayoutEmits: {
+    'update:collapse': (_collapse: boolean) => boolean;
+    'update:maximized': (_maximized: boolean) => boolean;
+    tabAdd: (_data: TabItem) => boolean;
+    tabClick: (_option: TabItemEventOption) => boolean;
+    tabRemove: (_option: TabItemEventOption) => boolean;
+    tabContextMenu: (_option: TabItemEventOption) => boolean;
+    tabSortChange: (_data: TabItem[]) => boolean;
+    logoClick: (_isHome: boolean, _e: MouseEvent) => boolean;
+    headMenuOpen: (_index: string, _indexPath: string[]) => boolean;
+    headMenuClose: (_index: string, _indexPath: string[]) => boolean;
+    sideMenuOpen: (_index: string, _indexPath: string[]) => boolean;
+    sideMenuClose: (_index: string, _indexPath: string[]) => boolean;
+    bodySizeChange: (_option: BodySizeChangeOption) => boolean;
+};
+/**
+ * 共享数据key
+ */
+export declare const PRO_LAYOUT_KEY: ProLayoutKey;
+export {};

package/es/ele-pro-layout/props.js

@@ -0,0 +1,237 @@
+const proLayoutProps = {
+  /** 高度 */
+  height: {
+    type: [String, Number],
+    default: null
+  },
+  /** 菜单数据 */
+  menus: Array,
+  /** 页签数据 */
+  tabs: Array,
+  /** 是否折叠侧栏 */
+  collapse: Boolean,
+  /** 双侧栏一级是否紧凑风格 */
+  compact: Boolean,
+  /** 内容区是否最大化 */
+  maximized: [Boolean, String],
+  /** 是否需要页签栏 */
+  tabBar: {
+    type: [Boolean, String],
+    default: true
+  },
+  /** 是否需要面包屑导航 */
+  breadcrumb: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /** 是否需要返回顶部 */
+  backTop: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /** 布局类型 */
+  layout: String,
+  /** 侧栏布局类型 */
+  sidebarLayout: String,
+  /** 顶栏风格 */
+  headerStyle: String,
+  /** 侧栏风格 */
+  sidebarStyle: {
+    type: String,
+    default: "dark"
+  },
+  /** 页签风格 */
+  tabStyle: {
+    type: String,
+    default: "simple"
+  },
+  /** 是否固定顶栏 */
+  fixedHeader: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否固定侧栏 */
+  fixedSidebar: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否固定内容区 */
+  fixedBody: {
+    type: Boolean,
+    default: true
+  },
+  /** 图标是否置于顶栏 */
+  logoInHeader: Boolean,
+  /** 是否需要固定的主页页签 */
+  fixedHome: {
+    type: Boolean,
+    default: true
+  },
+  /** 主页路由地址 */
+  homePath: String,
+  /** 刷新路由地址 */
+  redirectPath: {
+    type: String,
+    default: "/redirect"
+  },
+  /** 内容区是否撑满 */
+  fluid: {
+    type: Boolean,
+    default: true
+  },
+  /** 返回键退出内容区最大化 */
+  compressOnEsc: Boolean,
+  /** 固定主体时切换路由自动滚到顶部 */
+  autoScrollTop: {
+    type: Boolean,
+    default: true
+  },
+  /** 顶栏菜单触发模式 */
+  navTrigger: String,
+  /** 双侧栏一级菜单触发模式 */
+  boxTrigger: String,
+  /** 侧栏菜单触发模式 */
+  itemTrigger: String,
+  /** hover模式的菜单切换超时 */
+  menuHoverTimeout: {
+    type: Number,
+    default: 600
+  },
+  /** 菜单点击事件前钩子 */
+  beforeClick: Function,
+  /** 是否支持内嵌缓存 */
+  keepAlive: Boolean,
+  /** 内嵌切换动画 */
+  transitionName: String,
+  /** 内嵌进入动画延迟时间 */
+  transitionDelay: {
+    type: Number,
+    default: 250
+  },
+  /** 是否开启响应式 */
+  responsive: {
+    type: Boolean,
+    default: true
+  },
+  /** 国际化语言 */
+  locale: String,
+  /** 菜单标题国际化方法 */
+  i18n: Function,
+  /** 是否支持页签右键菜单 */
+  tabContextMenu: [Boolean, Object],
+  /** 右键菜单 */
+  tabContextMenus: [Array, Function],
+  /** 是否支持页签拖动排序 */
+  tabSortable: Boolean,
+  /** 顶栏菜单标题插槽名称 */
+  headerTitleSlot: {
+    type: String,
+    default: "title"
+  },
+  /** 顶栏菜单图标插槽名称 */
+  headerIconSlot: {
+    type: String,
+    default: "icon"
+  },
+  /** 侧栏菜单标题插槽名称 */
+  sidebarTitleSlot: {
+    type: String,
+    default: "title"
+  },
+  /** 侧栏菜单图标插槽名称 */
+  sidebarIconSlot: {
+    type: String,
+    default: "icon"
+  },
+  /** 双侧栏一级菜单标题插槽名称 */
+  sideboxTitleSlot: {
+    type: String,
+    default: "title"
+  },
+  /** 双侧栏一级菜单图标插槽名称 */
+  sideboxIconSlot: {
+    type: String,
+    default: "icon"
+  },
+  /** 顶栏样式 */
+  headerCustomStyle: Object,
+  /** 侧栏样式 */
+  sidebarCustomStyle: Object,
+  /** 双侧栏一级样式 */
+  sideboxCustomStyle: Object,
+  /** 页签栏样式 */
+  tabsCustomStyle: Object,
+  /** 内容区样式 */
+  contentCustomStyle: Object,
+  /** logo样式 */
+  logoStyle: Object,
+  /** logo文字样式 */
+  logoTitleStyle: Object,
+  /** 顶栏菜单样式 */
+  headerMenusStyle: Object,
+  /** 侧栏菜单样式 */
+  sidebarMenusStyle: Object,
+  /** 双侧栏一级菜单样式 */
+  sideboxMenusStyle: Object,
+  /** 顶栏菜单属性 */
+  headerMenuProps: Object,
+  /** 侧栏菜单属性 */
+  sidebarMenuProps: Object,
+  /** 双侧栏一级菜单属性 */
+  sideboxMenuProps: Object,
+  /** 顶栏菜单是否省略多余的子项 */
+  ellipsis: {
+    type: Boolean,
+    default: true
+  },
+  /** 顶栏菜单省略项的属性 */
+  ellipsisProps: Object,
+  /** 顶栏子菜单触发方式 */
+  menuTrigger: String,
+  /** 侧栏默认展开的菜单 */
+  sidebarOpeneds: Array,
+  /** 侧栏是否只保持一个子菜单展开 */
+  uniqueOpened: {
+    type: Boolean,
+    default: true
+  },
+  /** 侧栏菜单是否彩色图标 */
+  colorfulIcon: Boolean,
+  /** 菜单 tooltip 主题 */
+  tooltipEffect: String,
+  /** 是否开启菜单文本溢出提示 */
+  menuTextEllipsisTooltip: [Boolean, Object],
+  /** 内容区最大时不带页签栏 */
+  expanded: Boolean,
+  /** 面包屑导航分隔符 */
+  breadcrumbSeparator: [String, Object, Function],
+  /** 返回顶部可见的滚动高度 */
+  backTopVisibilityHeight: Number,
+  /** 返回顶部的右边距 */
+  backTopRight: Number,
+  /** 返回顶部的下边距 */
+  backTopBottom: Number,
+  /** 返回顶部的目标选择器 */
+  backTopTarget: String
+};
+const proLayoutEmits = {
+  "update:collapse": (_collapse) => true,
+  "update:maximized": (_maximized) => true,
+  tabAdd: (_data) => true,
+  tabClick: (_option) => true,
+  tabRemove: (_option) => true,
+  tabContextMenu: (_option) => true,
+  tabSortChange: (_data) => true,
+  logoClick: (_isHome, _e) => true,
+  headMenuOpen: (_index, _indexPath) => true,
+  headMenuClose: (_index, _indexPath) => true,
+  sideMenuOpen: (_index, _indexPath) => true,
+  sideMenuClose: (_index, _indexPath) => true,
+  bodySizeChange: (_option) => true
+};
+const PRO_LAYOUT_KEY = Symbol("proLayout");
+export {
+  PRO_LAYOUT_KEY,
+  proLayoutEmits,
+  proLayoutProps
+};

package/es/ele-pro-layout/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-pro-layout/style/index.js

@@ -0,0 +1,2 @@
+import "../../ele-admin-layout/style/index";
+import "./index.scss";

package/es/ele-pro-layout/{types.ts → types.d.ts}

@@ -1,5 +1,12 @@
 import type { EleMenuItemProps } from '../ele-app/plus';
-export type { Layout, SidebarLayout, HeaderStyle, SidebarStyle, TabStyle, TabBar } from '../ele-admin-layout/types';
+export type {
+  Layout,
+  SidebarLayout,
+  HeaderStyle,
+  SidebarStyle,
+  TabStyle,
+  TabBar
+} from '../ele-admin-layout/types';
 
 /**
  * 菜单元数据
@@ -114,7 +121,9 @@ export interface MenuI18nOption {
 /**
  * 菜单标题国际化方法
  */
-export type MenuI18n = (option: MenuI18nOption) => string | undefined | null | void;
+export type MenuI18n = (
+  option: MenuI18nOption
+) => string | undefined | null | void;
 
 /**
  * 页签事件参数

package/es/ele-pro-layout/util.d.ts

@@ -0,0 +1,88 @@
+import { RouteLocationNormalizedLoaded, RouteLocationMatched } from 'vue-router';
+import { EleMenuItemProps } from '../ele-app/plus';
+import { LayoutProvide } from '../ele-admin-layout/types';
+import { MenuItem, TabItem, LevelItem, MatchedResult, ProLayoutProvide, ResponsiveProps } from './types';
+
+/**
+ * 根据菜单地址获取菜单
+ * @param path 菜单地址
+ * @param menus 菜单数据
+ */
+export declare function findMenuByPath(path?: string, menus?: MenuItem[]): MenuItem | undefined;
+/**
+ * 根据路由地址获取页签
+ * @param path 路由地址
+ * @param tabs 页签数据
+ */
+export declare function findTabByPath(path?: string, tabs?: TabItem[] | null): TabItem | undefined;
+/**
+ * 根据页签标识获取页签
+ * @param key 页签标识
+ * @param tabs 页签数据
+ */
+export declare function findTabByKey(key?: string, tabs?: TabItem[] | null): TabItem | undefined;
+/**
+ * 根据菜单地址获取菜单及所有父级
+ * @param path 菜单地址
+ * @param menus 菜单数据
+ */
+export declare function getMatchedMenus(path: string, menus: MenuItem[], parents?: MenuItem[]): MenuItem[] | undefined;
+/**
+ * 获取路由匹配的菜单数据
+ * @param route 路由信息
+ * @param menus 菜单数据
+ */
+export declare function getRouteMatched(route: RouteLocationNormalizedLoaded, menus: MenuItem[]): MatchedResult;
+/**
+ * 获取面包屑导航数据
+ * @param matched 匹配的菜单数据
+ * @param activeOther 是否选中非本身
+ * @param route 路由信息
+ * @param menus 菜单数据
+ * @param tabs 页签数据
+ */
+export declare function getMatchedLevels(matched: MenuItem[] | undefined, activeOther: boolean | undefined, route: RouteLocationNormalizedLoaded, menus: MenuItem[], tabs: TabItem[]): LevelItem[];
+/**
+ * 获取路由对应的组件名称
+ * @param matched 路由匹配数据
+ */
+export declare function getMatchedComponents(matched: RouteLocationMatched[]): string[];
+/**
+ * 返回路由对应的页签数据
+ * @param route 路由信息
+ * @param tabs 当前页签数据
+ * @param homePath 主页地址
+ * @param routeTitle 路由对应的标题
+ */
+export declare function getRouteTab(route: RouteLocationNormalizedLoaded, tabs: TabItem[], homePath: string | undefined, routeTitle?: string): TabItem;
+/**
+ * 获取选中菜单的子级
+ * @param menus 菜单数据
+ * @param active 选中地址
+ * @param childrenName 子级字段名称
+ */
+export declare function getActiveChilds(menus: MenuItem[], active?: string, childrenName?: string): MenuItem[];
+/**
+ * 拼接内嵌地址
+ * @param routePath 路由地址含参数
+ * @param iframeUrl 内嵌地址
+ */
+export declare function getIframeSrc(routePath?: string, iframeUrl?: string): string;
+/**
+ * 菜单数据转换
+ * @param menus 菜单数据
+ * @param link 是否使用超链接
+ */
+export declare function getMenuItems(menus: MenuItem[], link: boolean): EleMenuItemProps[];
+/**
+ * 获取布局共享数据
+ */
+export declare function useLayoutState(): LayoutProvide;
+/**
+ * 获取高级布局共享数据
+ */
+export declare function useProLayoutState(): ProLayoutProvide;
+/**
+ * 获取是否开启布局响应
+ */
+export declare function useResponsive(props: ResponsiveProps): import('vue').ComputedRef<boolean>;