ele-admin-plus 1.2.0-beta.1 → 1.2.0-beta.3

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

@@ -0,0 +1,159 @@
+import { PropType, ExtractPropTypes, InjectionKey } from 'vue';
+import { EleMenusProps, EleBreadcrumbProps, EleBacktopProps, EleDropdownProps } from '../ele-app/plus';
+import { MenuItem } from '../ele-menus/types';
+import { BreadcrumbItem } from '../ele-breadcrumb/types';
+import { TabPaneItem, TabEventOption, ContextMenus } from '../ele-tabs/types';
+import { Layout, SidebarLayout, HeaderStyle, SidebarStyle, TabStyle, TabBar, Maximized, LayoutProvide } from './types';
+
+/**
+ * 属性
+ */
+export declare const adminLayoutProps: {
+    /** 高度 */
+    height: (StringConstructor | NumberConstructor)[];
+    /** 顶栏菜单数据 */
+    headerMenus: PropType<MenuItem[]>;
+    /** 顶栏菜单选中 */
+    headerActive: StringConstructor;
+    /** 侧栏菜单数据 */
+    sidebarMenus: PropType<MenuItem[]>;
+    /** 侧栏菜单选中 */
+    sidebarActive: StringConstructor;
+    /** 双侧栏一级菜单数据 */
+    sideboxMenus: PropType<MenuItem[]>;
+    /** 双侧栏一级菜单选中 */
+    sideboxActive: StringConstructor;
+    /** 页签数据 */
+    tabs: PropType<TabPaneItem[]>;
+    /** 页签选中 */
+    tabActive: StringConstructor;
+    /** 面包屑导航数据 */
+    levels: PropType<BreadcrumbItem[]>;
+    /** 是否折叠侧栏 */
+    collapse: BooleanConstructor;
+    /** 双侧栏一级是否紧凑风格 */
+    compact: BooleanConstructor;
+    /** 内容区是否最大化 */
+    maximized: PropType<Maximized>;
+    /** 是否需要页签栏 */
+    tabBar: PropType<TabBar>;
+    /** 是否需要面包屑导航 */
+    breadcrumb: PropType<boolean | EleBreadcrumbProps>;
+    /** 是否需要返回顶部 */
+    backTop: PropType<boolean | EleBacktopProps>;
+    /** 顶栏菜单属性 */
+    headerMenuProps: PropType<EleMenusProps>;
+    /** 侧栏菜单属性 */
+    sidebarMenuProps: PropType<EleMenusProps>;
+    /** 双侧栏一级菜单属性 */
+    sideboxMenuProps: PropType<EleMenusProps>;
+    /** 布局类型 */
+    layout: PropType<Layout>;
+    /** 侧栏布局类型 */
+    sidebarLayout: PropType<SidebarLayout>;
+    /** 顶栏风格 */
+    headerStyle: PropType<HeaderStyle>;
+    /** 侧栏风格 */
+    sidebarStyle: PropType<SidebarStyle>;
+    /** 页签风格 */
+    tabStyle: {
+        type: PropType<TabStyle>;
+        default: string;
+    };
+    /** 是否固定顶栏 */
+    fixedHeader: BooleanConstructor;
+    /** 是否固定侧栏 */
+    fixedSidebar: BooleanConstructor;
+    /** 是否固定内容区 */
+    fixedBody: BooleanConstructor;
+    /** logo是否置于顶栏 */
+    logoInHeader: BooleanConstructor;
+    /** 是否需要固定的主页页签 */
+    fixedHome: BooleanConstructor;
+    /** 主页路由地址 */
+    homePath: StringConstructor;
+    /** 是否选中固定的主页页签 */
+    isHome: BooleanConstructor;
+    /** 是否支持页签右键菜单 */
+    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<Partial<import('vue').CSSProperties>>;
+    /** 侧栏样式 */
+    sidebarCustomStyle: PropType<Partial<import('vue').CSSProperties>>;
+    /** 双侧栏一级样式 */
+    sideboxCustomStyle: PropType<Partial<import('vue').CSSProperties>>;
+    /** 页签栏样式 */
+    tabsCustomStyle: PropType<Partial<import('vue').CSSProperties>>;
+    /** 内容区样式 */
+    contentCustomStyle: PropType<Partial<import('vue').CSSProperties>>;
+    /** 是否是移动端风格 */
+    mobile: BooleanConstructor;
+};
+export type AdminLayoutProps = ExtractPropTypes<typeof adminLayoutProps>;
+/**
+ * 事件
+ */
+export declare const adminLayoutEmits: {
+    'update:collapse': (_collapse: boolean) => boolean;
+    logoClick: (_e: MouseEvent) => boolean;
+    headMenuOpen: (_index: string, _indexPath: string[]) => boolean;
+    headMenuClose: (_index: string, _indexPath: string[]) => boolean;
+    headMenuItemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
+    headMenuItemMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
+    headMenuItemMouseleave: (_item: MenuItem, _e: MouseEvent) => boolean;
+    headMouseenter: (_e: MouseEvent) => boolean;
+    headMouseleave: (_e: MouseEvent) => boolean;
+    boxMenuItemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
+    boxMenuItemMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
+    boxMenuItemMouseleave: (_item: MenuItem, _e: MouseEvent) => boolean;
+    boxMouseenter: (_e: MouseEvent) => boolean;
+    boxMouseleave: (_e: MouseEvent) => boolean;
+    sideMenuOpen: (_index: string, _indexPath: string[]) => boolean;
+    sideMenuClose: (_index: string, _indexPath: string[]) => boolean;
+    sideMenuItemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
+    sideMouseenter: (_e: MouseEvent) => boolean;
+    sideMouseleave: (_e: MouseEvent) => boolean;
+    tabClick: (_option: TabEventOption) => boolean;
+    tabRemove: (_name: string) => boolean;
+    tabContextMenu: (_option: TabEventOption) => boolean;
+    tabSortChange: (_data: TabPaneItem[]) => boolean;
+    contentMounted: (_contentEl: HTMLElement, _modalsEl: HTMLElement) => boolean;
+};
+/**
+ * 共享数据key
+ */
+export declare const LAYOUT_KEY: InjectionKey<LayoutProvide>;

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

@@ -0,0 +1,147 @@
+const adminLayoutProps = {
+  /** 高度 */
+  height: [String, Number],
+  /** 顶栏菜单数据 */
+  headerMenus: Array,
+  /** 顶栏菜单选中 */
+  headerActive: String,
+  /** 侧栏菜单数据 */
+  sidebarMenus: Array,
+  /** 侧栏菜单选中 */
+  sidebarActive: String,
+  /** 双侧栏一级菜单数据 */
+  sideboxMenus: Array,
+  /** 双侧栏一级菜单选中 */
+  sideboxActive: String,
+  /** 页签数据 */
+  tabs: Array,
+  /** 页签选中 */
+  tabActive: String,
+  /** 面包屑导航数据 */
+  levels: Array,
+  /** 是否折叠侧栏 */
+  collapse: Boolean,
+  /** 双侧栏一级是否紧凑风格 */
+  compact: Boolean,
+  /** 内容区是否最大化 */
+  maximized: [Boolean, String],
+  /** 是否需要页签栏 */
+  tabBar: [Boolean, String],
+  /** 是否需要面包屑导航 */
+  breadcrumb: [Boolean, Object],
+  /** 是否需要返回顶部 */
+  backTop: [Boolean, Object],
+  /** 顶栏菜单属性 */
+  headerMenuProps: Object,
+  /** 侧栏菜单属性 */
+  sidebarMenuProps: Object,
+  /** 双侧栏一级菜单属性 */
+  sideboxMenuProps: Object,
+  /** 布局类型 */
+  layout: String,
+  /** 侧栏布局类型 */
+  sidebarLayout: String,
+  /** 顶栏风格 */
+  headerStyle: String,
+  /** 侧栏风格 */
+  sidebarStyle: String,
+  /** 页签风格 */
+  tabStyle: {
+    type: String,
+    default: "simple"
+  },
+  /** 是否固定顶栏 */
+  fixedHeader: Boolean,
+  /** 是否固定侧栏 */
+  fixedSidebar: Boolean,
+  /** 是否固定内容区 */
+  fixedBody: Boolean,
+  /** logo是否置于顶栏 */
+  logoInHeader: Boolean,
+  /** 是否需要固定的主页页签 */
+  fixedHome: Boolean,
+  /** 主页路由地址 */
+  homePath: String,
+  /** 是否选中固定的主页页签 */
+  isHome: Boolean,
+  /** 是否支持页签右键菜单 */
+  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,
+  /** 是否是移动端风格 */
+  mobile: Boolean
+};
+const adminLayoutEmits = {
+  "update:collapse": (_collapse) => true,
+  logoClick: (_e) => true,
+  headMenuOpen: (_index, _indexPath) => true,
+  headMenuClose: (_index, _indexPath) => true,
+  headMenuItemClick: (_item, _e) => true,
+  headMenuItemMouseenter: (_item, _e) => true,
+  headMenuItemMouseleave: (_item, _e) => true,
+  headMouseenter: (_e) => true,
+  headMouseleave: (_e) => true,
+  boxMenuItemClick: (_item, _e) => true,
+  boxMenuItemMouseenter: (_item, _e) => true,
+  boxMenuItemMouseleave: (_item, _e) => true,
+  boxMouseenter: (_e) => true,
+  boxMouseleave: (_e) => true,
+  sideMenuOpen: (_index, _indexPath) => true,
+  sideMenuClose: (_index, _indexPath) => true,
+  sideMenuItemClick: (_item, _e) => true,
+  sideMouseenter: (_e) => true,
+  sideMouseleave: (_e) => true,
+  tabClick: (_option) => true,
+  tabRemove: (_name) => true,
+  tabContextMenu: (_option) => true,
+  tabSortChange: (_data) => true,
+  contentMounted: (_contentEl, _modalsEl) => true
+};
+const LAYOUT_KEY = Symbol("layout");
+export {
+  LAYOUT_KEY,
+  adminLayoutEmits,
+  adminLayoutProps
+};

package/es/ele-admin-layout/style/css-var.scss

@@ -0,0 +1,14 @@
+@use '../../style/util.scss' as *;
+
+/* 布局主题变量 */
+@mixin set-layout-var($var) {
+  .ele-admin-layout {
+    @include set-ele-var('layout', $var);
+    @include set-ele-var('logo', $var);
+    @include set-ele-var('header', $var);
+    @include set-ele-var('sidebar', $var);
+    @include set-ele-var('sidebox', $var);
+    @include set-ele-var('menu-thumb', $var);
+    @include set-ele-var('menu-dark-thumb', $var);
+  }
+}

package/es/ele-admin-layout/style/header.scss

@@ -0,0 +1,192 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+/* 顶栏 */
+.ele-admin-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  height: eleVar('header', 'height');
+  line-height: eleVar('header', 'height');
+  background: eleVar('header', 'bg');
+  box-shadow: eleVar('header', 'shadow');
+  z-index: calc(#{eleVar('layout', 'index')} + 2);
+  transition: all $transition-base;
+
+  /* 顶栏面包屑导航 */
+  .ele-admin-breadcrumb {
+    $tool-padding: eleVar('header', 'tool-padding');
+    margin-left: calc(#{eleVar('header', 'tools-padding')} + #{$tool-padding});
+    flex-shrink: 0;
+  }
+
+  /* 顶栏菜单 */
+  .ele-admin-menus {
+    flex: 1;
+    overflow: hidden;
+
+    & > .ele-menu {
+      $menu-height: eleVar('header', 'menu-height');
+      #{eleVarName('menu-horizontal', 'height')}: #{$menu-height};
+      padding-top: 0;
+      padding-bottom: 0;
+      background: none;
+      border: none;
+    }
+  }
+
+  /* 顶栏页签栏 */
+  & > .ele-admin-tabs {
+    flex: 1;
+    overflow: hidden;
+    line-height: normal;
+
+    &.ele-tab-wrap {
+      padding-right: 0;
+      background: none;
+      box-shadow: none;
+    }
+
+    & + .ele-admin-tools {
+      padding-left: 0;
+    }
+
+    &.is-simple,
+    &.is-indicator {
+      align-self: flex-end;
+    }
+  }
+
+  & > .ele-admin-tabs.ele-tab-wrap.is-simple,
+  & > .ele-admin-tabs.ele-tab-wrap.is-indicator,
+  & > .ele-tab-wrap .ele-tabs.is-simple,
+  & > .ele-tab-wrap .ele-tabs.is-indicator {
+    $height: eleVar('header', 'height');
+    $tool-height: eleVar('header', 'tool-height');
+    $tab-height: calc(#{$height} - (#{$height} - #{$tool-height}) / 2);
+    #{eleVarName('tab', 'height')}: #{$tab-height};
+  }
+
+  /* 顶栏与页签栏分割线 */
+  &.show-divider {
+    box-shadow: 0 -0.8px 0 eleVar('header', 'line-color') inset;
+  }
+
+  /* 模糊透明顶栏 */
+  &.is-ghost {
+    background: eleVar('header', 'ghost-bg');
+    backdrop-filter: eleVar('header', 'ghost-filter');
+  }
+
+  /* 固定顶栏 */
+  &.is-fixed {
+    position: sticky;
+    top: 0;
+  }
+}
+
+/* 顶栏操作按钮容器 */
+.ele-admin-tools {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 eleVar('header', 'tools-padding');
+  box-sizing: border-box;
+  height: 100%;
+
+  & + .ele-admin-breadcrumb {
+    margin-left: 0;
+  }
+
+  & + .ele-admin-tabs {
+    &.ele-tab-wrap,
+    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+      padding-left: 0;
+    }
+  }
+
+  & + .is-simple,
+  & + .is-indicator {
+    &.is-fixed-home,
+    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+      padding-left: eleVar('tab', 'simple-angle-size');
+    }
+  }
+
+  & + .is-button {
+    &.is-fixed-home,
+    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+      padding-left: eleVar('tab', 'button-space');
+    }
+  }
+}
+
+/* 暗色顶栏 */
+.ele-admin-header.is-dark,
+.ele-admin-header.is-primary {
+  color: eleVar('header', 'dark-color');
+  background: eleVar('header', 'dark-bg');
+  box-shadow: eleVar('header', 'dark-shadow');
+
+  /* 暗色顶栏面包屑 */
+  .ele-breadcrumb .el-breadcrumb__item {
+    .el-breadcrumb__inner,
+    .el-breadcrumb__separator {
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .el-breadcrumb__inner.is-link:hover,
+    &:last-child .el-breadcrumb__inner {
+      color: eleVar('header', 'dark-color');
+    }
+  }
+
+  /* 暗色顶栏页签栏 */
+  & > .ele-admin-tabs.ele-tab-wrap,
+  & > .ele-admin-tabs .ele-tabs {
+    $color: eleVar('header', 'dark-color');
+    $hover-bg: eleVar('header', 'dark-tool-hover-bg');
+    #{eleVarName('tab', 'color')}: #{$color};
+    #{eleVarName('tab', 'hover-color')}: #{$color};
+    #{eleVarName('tab', 'close-color')}: #{$color};
+    #{eleVarName('tab', 'close-hover-color')}: #{$color};
+    #{eleVarName('tab', 'close-hover-bg')}: #{$hover-bg};
+    #{eleVarName('tab', 'tool-color')}: #{$color};
+    #{eleVarName('tab', 'tool-hover-color')}: #{$color};
+    #{eleVarName('tab', 'simple-hover-color')}: #{$color};
+    #{eleVarName('tab', 'simple-hover-bg')}: #{$hover-bg};
+    #{eleVarName('tab', 'simple-active-bg')}: #{elVar('bg-color', 'overlay')};
+    #{eleVarName('tab', 'simple-active-line')}: 0px;
+    #{eleVarName('tab', 'simple-tool-hover-bg')}: transparent;
+    #{eleVarName('tab', 'indicator-dot-color')}: rgba(255, 255, 255, 0.4);
+    #{eleVarName('tab', 'indicator-dot-hover-color')}: rgba(255, 255, 255, 0.6);
+    #{eleVarName('tab', 'button-bg')}: #{$hover-bg};
+    #{eleVarName('tab', 'button-hover-bg')}: rgba(255, 255, 255, 0.2);
+    #{eleVarName('tab', 'button-hover-color')}: #{$color};
+  }
+}
+
+.ele-admin-header.is-dark > .ele-admin-tabs.ele-tab-wrap,
+.ele-admin-header.is-dark > .ele-admin-tabs .ele-tabs {
+  $color: eleVar('header', 'dark-color');
+  $hover-bg: eleVar('header', 'dark-tool-hover-bg');
+  #{eleVarName('tab', 'active-close-color')}: #{$color};
+  #{eleVarName('tab', 'active-close-hover-color')}: #{$color};
+  #{eleVarName('tab', 'active-close-hover-bg')}: #{$hover-bg};
+  #{eleVarName('tab', 'simple-active-color')}: #{$color};
+  #{eleVarName('tab', 'simple-active-bg')}: #{elVar('color-primary')};
+  #{eleVarName('tab', 'indicator-dot-active-color')}: #{$color};
+  #{eleVarName('tab', 'button-active-color')}: #{$color};
+  #{eleVarName('tab', 'button-active-bg')}: #{elVar('color-primary')};
+}
+
+/* 主色顶栏 */
+.ele-admin-header.is-primary {
+  background: elVar('color-primary');
+
+  /* 主色顶栏菜单 */
+  .ele-admin-menus > .ele-menu {
+    $active-bg: eleVar('header', 'primary-active-bg');
+    #{eleVarName('menu-horizontal', 'dark-active-bg')}: #{$active-bg};
+  }
+}

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,9 @@
+import "element-plus/es/components/scrollbar/style/index";
+import "element-plus/es/components/icon/style/index";
+import "../../ele-menus/style/index";
+import "../../ele-breadcrumb/style/index";
+import "../../ele-backtop/style/index";
+import "../../ele-tab-wrap/style/index";
+import "../../ele-tab-tool/style/index";
+import "../../ele-tabs/style/index";
+import "./index.scss";