ele-admin-plus 1.0.0-beta.1

package/lib/ele-pro-layout/components/pro-header.js

@@ -0,0 +1,187 @@
+"use strict";
+const vue = require("vue");
+const iconsVue = require("@element-plus/icons-vue");
+const EleBreadcrumb = require("../../ele-breadcrumb/index");
+const EleMenus = require("../../ele-menus/index");
+const util = require("../util");
+const _sfc_main = vue.defineComponent({
+  name: "ProHeader",
+  components: { EleBreadcrumb, EleMenus },
+  props: {
+    // 菜单数据
+    menus: {
+      type: Array,
+      required: true
+    },
+    // 顶栏风格
+    headerStyle: String,
+    // 菜单选中
+    active: String,
+    // 菜单是否省略多余的子项
+    ellipsis: Boolean,
+    // 子菜单触发方式
+    menuTrigger: String,
+    // 侧栏是否折叠
+    collapse: Boolean,
+    // 当前是否有侧栏
+    sidebar: Boolean,
+    // 标题插槽名称
+    titleSlot: String,
+    // 图标插槽名称
+    iconSlot: String,
+    // 面包屑导航数据
+    levels: {
+      type: Array,
+      required: true
+    },
+    // 是否显示面包屑导航
+    breadcrumb: Boolean,
+    // 面包屑导航分隔符
+    breadcrumbSeparator: [String, Object],
+    // 主页路由地址
+    homePath: String,
+    // 当前路由是否是主页
+    isHome: Boolean
+  },
+  emits: {
+    logoClick: () => true,
+    open: (_index, _indexPath) => true,
+    close: (_index, _indexPath) => true
+  },
+  setup(props, { emit }) {
+    const levelItems = vue.shallowRef([]);
+    const menuItems = vue.computed(() => util.getMenuItems(props.menus));
+    const isDark = vue.computed(() => props.headerStyle === "dark");
+    const isPrimary = vue.computed(() => props.headerStyle === "primary");
+    const isIconSeparator = vue.computed(() => {
+      return typeof props.breadcrumbSeparator !== "string";
+    });
+    const onLogoClick = () => {
+      emit("logoClick");
+    };
+    const onOpen = (index, indexPath) => {
+      emit("open", index, indexPath);
+    };
+    const onClose = (index, indexPath) => {
+      emit("close", index, indexPath);
+    };
+    vue.watch(
+      [() => props.isHome, () => props.homePath, () => props.levels],
+      () => {
+        const data = [];
+        if (!props.isHome) {
+          data.push({
+            to: props.homePath,
+            icon: iconsVue.House,
+            iconStyle: {
+              transform: "scale(1.08)",
+              transformOrigin: "8px -10px"
+            }
+          });
+        }
+        props.levels.forEach((d) => {
+          data.push({ key: d.path, title: d.title });
+        });
+        levelItems.value = data;
+      },
+      { deep: true, immediate: true }
+    );
+    return {
+      levelItems,
+      menuItems,
+      isDark,
+      isPrimary,
+      isIconSeparator,
+      onLogoClick,
+      onOpen,
+      onClose
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-admin-tools" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-admin-breadcrumb"
+};
+const _hoisted_3 = { class: "ele-admin-menus" };
+const _hoisted_4 = { class: "ele-admin-tools" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EleBreadcrumb = vue.resolveComponent("EleBreadcrumb");
+  const _component_EleMenus = vue.resolveComponent("EleMenus");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "ele-admin-header",
+      { "is-dark": _ctx.isDark },
+      { "is-primary": _ctx.isPrimary }
+    ])
+  }, [
+    vue.createElementVNode("div", {
+      class: "ele-admin-logo",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onLogoClick && _ctx.onLogoClick(...args))
+    }, [
+      vue.renderSlot(_ctx.$slots, "logo", {
+        collapse: _ctx.collapse,
+        sidebar: _ctx.sidebar
+      })
+    ]),
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.renderSlot(_ctx.$slots, "left", { sidebar: _ctx.sidebar })
+    ]),
+    _ctx.breadcrumb ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+      vue.renderSlot(_ctx.$slots, "breadcrumb", {
+        levels: _ctx.levels,
+        isHome: _ctx.isHome,
+        homePath: _ctx.homePath,
+        sidebar: _ctx.sidebar
+      }, () => [
+        vue.createVNode(_component_EleBreadcrumb, {
+          separator: _ctx.isIconSeparator ? void 0 : _ctx.breadcrumbSeparator,
+          separatorIcon: _ctx.isIconSeparator ? _ctx.breadcrumbSeparator : void 0,
+          items: _ctx.levelItems
+        }, null, 8, ["separator", "separatorIcon", "items"])
+      ])
+    ])) : vue.createCommentVNode("", true),
+    vue.renderSlot(_ctx.$slots, "center", { sidebar: _ctx.sidebar }),
+    vue.createElementVNode("div", _hoisted_3, [
+      _ctx.menuItems.length ? (vue.openBlock(), vue.createBlock(_component_EleMenus, {
+        key: 0,
+        items: _ctx.menuItems,
+        theme: _ctx.isDark || _ctx.isPrimary ? "dark" : "light",
+        popupTheme: _ctx.isDark ? "dark" : "light",
+        mode: "horizontal",
+        ellipsis: _ctx.ellipsis,
+        defaultActive: _ctx.active,
+        menuTrigger: _ctx.menuTrigger,
+        onOpen: _ctx.onOpen,
+        onClose: _ctx.onClose
+      }, vue.createSlots({ _: 2 }, [
+        _ctx.iconSlot && _ctx.$slots[_ctx.iconSlot] ? {
+          name: "icon",
+          fn: vue.withCtx((slotProps) => [
+            vue.renderSlot(_ctx.$slots, _ctx.iconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.titleSlot && _ctx.$slots[_ctx.titleSlot] ? {
+          name: "title",
+          fn: vue.withCtx((slotProps) => [
+            vue.renderSlot(_ctx.$slots, _ctx.titleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["items", "theme", "popupTheme", "ellipsis", "defaultActive", "menuTrigger", "onOpen", "onClose"])) : vue.createCommentVNode("", true)
+    ]),
+    vue.createElementVNode("div", _hoisted_4, [
+      vue.renderSlot(_ctx.$slots, "right", { sidebar: _ctx.sidebar })
+    ])
+  ], 2);
+}
+const proHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = proHeader;

package/lib/ele-pro-layout/components/pro-sidebar.d.ts

@@ -0,0 +1,53 @@
+import type { PropType } from 'vue';
+import type { MenuItem, SidebarStyle } from '../types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    menus: {
+        type: PropType<MenuItem[]>;
+        required: true;
+    };
+    sidebarStyle: {
+        type: PropType<SidebarStyle>;
+        default: string;
+    };
+    colorfulIcon: BooleanConstructor;
+    active: StringConstructor;
+    collapse: BooleanConstructor;
+    uniqueOpened: BooleanConstructor;
+    defaultOpeneds: PropType<string[]>;
+    popperEffect: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>>;
+    titleSlot: StringConstructor;
+    iconSlot: StringConstructor;
+}, {
+    menuItems: import("vue").ComputedRef<import("../../ele-menus/types").MenuItem[]>;
+    onOpen: (index: string, indexPath: string[]) => void;
+    onClose: (index: string, indexPath: string[]) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (_index: string, _indexPath: string[]) => true;
+    close: (_index: string, _indexPath: string[]) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    menus: {
+        type: PropType<MenuItem[]>;
+        required: true;
+    };
+    sidebarStyle: {
+        type: PropType<SidebarStyle>;
+        default: string;
+    };
+    colorfulIcon: BooleanConstructor;
+    active: StringConstructor;
+    collapse: BooleanConstructor;
+    uniqueOpened: BooleanConstructor;
+    defaultOpeneds: PropType<string[]>;
+    popperEffect: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>>;
+    titleSlot: StringConstructor;
+    iconSlot: StringConstructor;
+}>> & {
+    onClose?: ((_index: string, _indexPath: string[]) => any) | undefined;
+    onOpen?: ((_index: string, _indexPath: string[]) => any) | undefined;
+}, {
+    uniqueOpened: boolean;
+    collapse: boolean;
+    sidebarStyle: SidebarStyle;
+    colorfulIcon: boolean;
+}, {}>;
+export default _sfc_main;

package/lib/ele-pro-layout/components/pro-sidebar.js

@@ -0,0 +1,97 @@
+"use strict";
+const vue = require("vue");
+const EleMenus = require("../../ele-menus/index");
+const util = require("../util");
+const _sfc_main = vue.defineComponent({
+  name: "ProSidebar",
+  components: { EleMenus },
+  props: {
+    // 菜单数据
+    menus: {
+      type: Array,
+      required: true
+    },
+    // 侧栏风格
+    sidebarStyle: {
+      type: String,
+      default: "dark"
+    },
+    // 侧栏菜单是否彩色图标
+    colorfulIcon: Boolean,
+    // 菜单选中
+    active: String,
+    // 是否折叠
+    collapse: Boolean,
+    // 是否只保持一个子菜单展开
+    uniqueOpened: Boolean,
+    // 默认展开的子菜单
+    defaultOpeneds: Array,
+    // tooltip 主题
+    popperEffect: String,
+    // 标题插槽名称
+    titleSlot: String,
+    // 图标插槽名称
+    iconSlot: String
+  },
+  emits: {
+    open: (_index, _indexPath) => true,
+    close: (_index, _indexPath) => true
+  },
+  setup(props, { emit }) {
+    const menuItems = vue.computed(() => util.getMenuItems(props.menus));
+    const onOpen = (index, indexPath) => {
+      emit("open", index, indexPath);
+    };
+    const onClose = (index, indexPath) => {
+      emit("close", index, indexPath);
+    };
+    return { menuItems, onOpen, onClose };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-admin-sidebar" };
+const _hoisted_2 = { class: "ele-admin-menus" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EleMenus = vue.resolveComponent("EleMenus");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.renderSlot(_ctx.$slots, "top"),
+    vue.createElementVNode("div", _hoisted_2, [
+      vue.createVNode(_component_EleMenus, {
+        items: _ctx.menuItems,
+        theme: _ctx.sidebarStyle,
+        colorful: _ctx.colorfulIcon,
+        collapse: _ctx.collapse,
+        defaultActive: _ctx.active,
+        defaultOpeneds: _ctx.defaultOpeneds,
+        uniqueOpened: _ctx.uniqueOpened,
+        popperEffect: _ctx.popperEffect,
+        onOpen: _ctx.onOpen,
+        onClose: _ctx.onClose
+      }, vue.createSlots({ _: 2 }, [
+        _ctx.iconSlot && _ctx.$slots[_ctx.iconSlot] ? {
+          name: "icon",
+          fn: vue.withCtx((slotProps) => [
+            vue.renderSlot(_ctx.$slots, _ctx.iconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.titleSlot && _ctx.$slots[_ctx.titleSlot] ? {
+          name: "title",
+          fn: vue.withCtx((slotProps) => [
+            vue.renderSlot(_ctx.$slots, _ctx.titleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["items", "theme", "colorful", "collapse", "defaultActive", "defaultOpeneds", "uniqueOpened", "popperEffect", "onOpen", "onClose"])
+    ]),
+    vue.renderSlot(_ctx.$slots, "bottom")
+  ]);
+}
+const proSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = proSidebar;

package/lib/ele-pro-layout/components/pro-sidebox.d.ts

@@ -0,0 +1,36 @@
+import type { PropType } from 'vue';
+import type { MenuItem, SidebarStyle } from '../types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    menus: {
+        type: PropType<MenuItem[]>;
+        required: true;
+    };
+    sidebarStyle: PropType<SidebarStyle>;
+    colorfulIcon: BooleanConstructor;
+    active: StringConstructor;
+    compact: BooleanConstructor;
+    collapse: BooleanConstructor;
+    popperEffect: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>>;
+    titleSlot: StringConstructor;
+    iconSlot: StringConstructor;
+}, {
+    menuItems: import("vue").ComputedRef<import("../../ele-menus/types").MenuItem[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    menus: {
+        type: PropType<MenuItem[]>;
+        required: true;
+    };
+    sidebarStyle: PropType<SidebarStyle>;
+    colorfulIcon: BooleanConstructor;
+    active: StringConstructor;
+    compact: BooleanConstructor;
+    collapse: BooleanConstructor;
+    popperEffect: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>>;
+    titleSlot: StringConstructor;
+    iconSlot: StringConstructor;
+}>>, {
+    collapse: boolean;
+    colorfulIcon: boolean;
+    compact: boolean;
+}, {}>;
+export default _sfc_main;

package/lib/ele-pro-layout/components/pro-sidebox.js

@@ -0,0 +1,80 @@
+"use strict";
+const vue = require("vue");
+const EleMenus = require("../../ele-menus/index");
+const util = require("../util");
+const _sfc_main = vue.defineComponent({
+  name: "ProSidebox",
+  components: { EleMenus },
+  props: {
+    // 菜单数据
+    menus: {
+      type: Array,
+      required: true
+    },
+    // 侧栏风格
+    sidebarStyle: String,
+    // 侧栏菜单是否彩色图标
+    colorfulIcon: Boolean,
+    // 菜单选中
+    active: String,
+    // 是否紧凑风格
+    compact: Boolean,
+    // 二级侧栏是否折叠
+    collapse: Boolean,
+    // tooltip 主题
+    popperEffect: String,
+    // 标题插槽名称
+    titleSlot: String,
+    // 图标插槽名称
+    iconSlot: String
+  },
+  setup(props) {
+    return { menuItems: vue.computed(() => util.getMenuItems(props.menus)) };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-admin-sidebox" };
+const _hoisted_2 = { class: "ele-admin-menus" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EleMenus = vue.resolveComponent("EleMenus");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.renderSlot(_ctx.$slots, "boxTop"),
+    vue.createElementVNode("div", _hoisted_2, [
+      vue.createVNode(_component_EleMenus, {
+        items: _ctx.menuItems,
+        theme: _ctx.sidebarStyle,
+        popupColorful: _ctx.colorfulIcon,
+        collapse: _ctx.compact || _ctx.collapse,
+        defaultActive: _ctx.active,
+        uniqueOpened: true,
+        popperEffect: _ctx.popperEffect,
+        firstPopperClass: "ele-admin-sidebox-popup",
+        tooltipDisabled: !_ctx.compact
+      }, vue.createSlots({ _: 2 }, [
+        _ctx.iconSlot && _ctx.$slots[_ctx.iconSlot] ? {
+          name: "icon",
+          fn: vue.withCtx((slotProps) => [
+            vue.renderSlot(_ctx.$slots, _ctx.iconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.titleSlot && _ctx.$slots[_ctx.titleSlot] ? {
+          name: "title",
+          fn: vue.withCtx((slotProps) => [
+            vue.renderSlot(_ctx.$slots, _ctx.titleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["items", "theme", "popupColorful", "collapse", "defaultActive", "popperEffect", "tooltipDisabled"])
+    ]),
+    vue.renderSlot(_ctx.$slots, "boxBottom")
+  ]);
+}
+const proSidebox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = proSidebox;

package/lib/ele-pro-layout/components/pro-tab-bar.d.ts

@@ -0,0 +1,59 @@
+import type { PropType } from 'vue';
+import type { TabPaneItem, TabEventOption, DropdownInstance } from '../../ele-tabs/types';
+import type { TabItem, TabStyle, TabItemEventOption } from '../types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    tabs: {
+        type: PropType<TabItem[]>;
+        required: true;
+    };
+    active: {
+        type: StringConstructor;
+        required: true;
+    };
+    fixedHome: BooleanConstructor;
+    homePath: StringConstructor;
+    isHome: BooleanConstructor;
+    tabStyle: PropType<TabStyle>;
+    tabContextMenu: BooleanConstructor;
+    tabSortable: BooleanConstructor;
+}, {
+    homeRef: any;
+    tabRef: any;
+    items: import("vue").ComputedRef<TabPaneItem[]>;
+    onTabRemove: (key: string) => void;
+    onTabItemClick: (opt: TabEventOption) => void;
+    onTabContextMenu: (opt: TabEventOption) => void;
+    onTabContextOpen: (ref: DropdownInstance) => void;
+    onTabSortChange: (data: TabPaneItem[]) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    tabClick: (_opt: TabItemEventOption) => true;
+    tabRemove: (_opt: TabItemEventOption) => true;
+    tabContextMenu: (_opt: TabItemEventOption) => true;
+    tabSortChange: (_data: TabItem[]) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tabs: {
+        type: PropType<TabItem[]>;
+        required: true;
+    };
+    active: {
+        type: StringConstructor;
+        required: true;
+    };
+    fixedHome: BooleanConstructor;
+    homePath: StringConstructor;
+    isHome: BooleanConstructor;
+    tabStyle: PropType<TabStyle>;
+    tabContextMenu: BooleanConstructor;
+    tabSortable: BooleanConstructor;
+}>> & {
+    onTabClick?: ((_opt: TabItemEventOption) => any) | undefined;
+    onTabRemove?: ((_opt: TabItemEventOption) => any) | undefined;
+    onTabContextMenu?: ((_opt: TabItemEventOption) => any) | undefined;
+    onTabSortChange?: ((_data: TabItem[]) => any) | undefined;
+}, {
+    tabContextMenu: boolean;
+    fixedHome: boolean;
+    isHome: boolean;
+    tabSortable: boolean;
+}, {}>;
+export default _sfc_main;