yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
596 lines (595 loc) • 28.3 kB
JavaScript
;
const vue = require("vue");
const elementPlus = require("element-plus");
const hook = require("../utils/hook");
const EleMenus = require("../ele-menus/index");
const EleBreadcrumb = require("../ele-breadcrumb/index");
const EleBacktop = require("../ele-backtop/index");
const LayoutSkeleton = require("./components/layout-skeleton");
const LayoutTabs = require("./components/layout-tabs");
const props = require("./props");
const tabSlots = ["tabTitle", "tabExtra", "tabHome"];
const ownSlots = ["logo", "logoTitle", "left", "right", "center", "breadcrumb", "top", "bottom", "boxTop", "boxBottom", "body", ...tabSlots];
const _sfc_main = vue.defineComponent({
name: "EleAdminLayout",
components: {
ElScrollbar: elementPlus.ElScrollbar,
EleMenus,
EleBreadcrumb,
EleBacktop,
LayoutSkeleton,
LayoutTabs
},
props: props.adminLayoutProps,
emits: props.adminLayoutEmits,
setup(props$1, { emit }) {
const [startDisableTransitionTimer] = hook.useTimer(100);
const [startSidebarMenuTimer, stopSidebarMenuTimer] = hook.useTimer(420);
const [startSideboxMenuTimer, stopSideboxMenuTimer] = hook.useTimer(420);
const [startHeaderHoverTimer, stopHeaderHoverTimer] = hook.useTimer(300);
let isHeaderhover = false;
const sidebarMenuRef = vue.shallowRef(null);
const sideboxMenuRef = vue.shallowRef(null);
const contentRef = vue.shallowRef(null);
const modalsRef = vue.shallowRef(null);
const isDisableTransition = vue.shallowRef(false);
const layoutHeight = vue.computed(() => typeof props$1.height === "number" ? `${props$1.height}px` : props$1.height);
const isFixedHeader = vue.computed(() => !props$1.fixedBody && props$1.fixedHeader);
const isFixedSidebar = vue.computed(() => !props$1.fixedBody && props$1.fixedSidebar);
const isTopLayout = vue.computed(() => props$1.layout === "top");
const isSideLayout = vue.computed(() => props$1.layout === "side");
const isBoxSidebar = vue.computed(() => props$1.sidebarLayout === "box");
const isMixSidebar = vue.computed(() => !isTopLayout.value && (props$1.sidebarLayout === "mix" || isBoxSidebar.value));
const isMobile = vue.computed(() => props$1.mobile && !isTopLayout.value);
const isHeaderLogo = vue.computed(() => (props$1.logoInHeader || isTopLayout.value) && !isSideLayout.value && !isMobile.value);
const showHeaderMenus = vue.computed(() => isTopLayout.value || props$1.layout === "mix");
const showHeaderTabs = vue.computed(() => props$1.tabBar === "header");
const isDarkHeader = vue.computed(() => props$1.headerStyle === "dark");
const isPrimaryHeader = vue.computed(() => props$1.headerStyle === "primary");
const isButtonTab = vue.computed(() => props$1.tabStyle === "button");
const isDarkSidebar = vue.computed(() => props$1.sidebarStyle === "dark");
const isDarkMixSidebar = vue.computed(() => isMixSidebar.value && !isHeaderLogo.value && isDarkSidebar.value && (isDarkHeader.value || isPrimaryHeader.value));
const isGhostHeader = vue.computed(() => !isDarkHeader.value && !isPrimaryHeader.value && showHeaderTabs.value && isButtonTab.value);
const isGhostSidebar = vue.computed(() => isGhostHeader.value && !isDarkSidebar.value);
const isCollapseSidebar = vue.computed(() => !isMobile.value && props$1.collapse);
const isCollapseMobile = vue.computed(() => isMobile.value && props$1.collapse);
const getContentEl = () => {
return contentRef.value;
};
const getModalsEl = () => {
return modalsRef.value;
};
const getBodyWrapperEl = () => {
const contentEl = getContentEl();
return contentEl == null ? void 0 : contentEl.parentElement;
};
const sidebarScrollToActive = () => {
stopSidebarMenuTimer();
if (!props$1.menuScrollToActive || sidebarMenuRef.value == null || isCollapseMobile.value || isMixSidebar.value && isCollapseSidebar.value) {
return;
}
startSidebarMenuTimer(() => {
sidebarMenuRef.value && sidebarMenuRef.value.scrollToActive();
});
};
const sideboxScrollToActive = () => {
stopSideboxMenuTimer();
if (!props$1.menuScrollToActive || sideboxMenuRef.value == null || isCollapseMobile.value) {
return;
}
startSideboxMenuTimer(() => {
sideboxMenuRef.value && sideboxMenuRef.value.scrollToActive();
});
};
const updateCollapse = (value) => {
const collapse = typeof value === "boolean" ? value : !props$1.collapse;
if (collapse !== props$1.collapse) {
emit("update:collapse", collapse);
}
};
const handleLogoClick = (e) => {
emit("logoClick", e);
};
const handleHeadMenuOpen = (index2, indexPath) => {
emit("headMenuOpen", index2, indexPath);
};
const handleHeadMenuClose = (index2, indexPath) => {
emit("headMenuClose", index2, indexPath);
};
const handleHeadMenuItemClick = (item, e) => {
emit("headMenuItemClick", item, e);
};
const handleHeadMenuItemMouseenter = (item, e) => {
emit("headMenuItemMouseenter", item, e);
handleHeadMouseenter(e);
};
const handleHeadMenuItemMouseleave = (item, e) => {
emit("headMenuItemMouseleave", item, e);
handleHeadMouseleave(e);
};
const handleHeadMouseenter = (e) => {
stopHeaderHoverTimer();
if (!isHeaderhover) {
isHeaderhover = true;
emit("headMouseenter", e);
}
};
const handleHeadMouseleave = (e) => {
startHeaderHoverTimer(() => {
isHeaderhover = false;
emit("headMouseleave", e);
});
};
const handleBoxMenuItemClick = (item, e) => {
emit("boxMenuItemClick", item, e);
};
const handleBoxMenuItemMouseenter = (item, e) => {
emit("boxMenuItemMouseenter", item, e);
};
const handleBoxMenuItemMouseleave = (item, e) => {
emit("boxMenuItemMouseleave", item, e);
};
const handleBoxMouseEnter = (e) => {
emit("boxMouseenter", e);
};
const handleBoxMouseLeave = (e) => {
emit("boxMouseleave", e);
};
const handleSideMenuOpen = (index2, indexPath) => {
emit("sideMenuOpen", index2, indexPath);
};
const handleSideMenuClose = (index2, indexPath) => {
emit("sideMenuClose", index2, indexPath);
};
const handleSideMenuItemClick = (item, e) => {
emit("sideMenuItemClick", item, e);
};
const handleSideMouseEnter = (e) => {
emit("sideMouseenter", e);
};
const handleSideMouseLeave = (e) => {
emit("sideMouseleave", e);
};
const handleTabClick = (option) => {
emit("tabClick", option);
};
const handleTabRemove = (name) => {
emit("tabRemove", name);
};
const handleTabContextMenu = (option) => {
emit("tabContextMenu", option);
};
const handleTabSortChange = (data) => {
emit("tabSortChange", data);
};
const layoutProvide = vue.shallowReactive({
layout: props$1.layout,
maximized: props$1.maximized,
fixedHeader: isFixedHeader.value,
fixedBody: props$1.fixedBody,
modalsEl: null,
getModalsEl,
getBodyWrapperEl
});
vue.provide(props.LAYOUT_KEY, layoutProvide);
vue.watch([() => props$1.layout, () => props$1.sidebarLayout, () => props$1.fixedSidebar, () => props$1.fixedBody, () => props$1.logoInHeader, () => props$1.maximized, isFixedHeader, isMobile], () => {
isDisableTransition.value = true;
startDisableTransitionTimer(() => {
isDisableTransition.value = false;
});
if (layoutProvide.layout !== props$1.layout) {
layoutProvide.layout = props$1.layout;
}
if (layoutProvide.maximized !== props$1.maximized) {
layoutProvide.maximized = props$1.maximized;
}
if (layoutProvide.fixedHeader !== isFixedHeader.value) {
layoutProvide.fixedHeader = isFixedHeader.value;
}
if (layoutProvide.fixedBody !== props$1.fixedBody) {
layoutProvide.fixedBody = props$1.fixedBody;
}
});
vue.watch([() => props$1.sidebarActive, () => props$1.collapse], () => {
vue.nextTick(() => {
sidebarScrollToActive();
});
});
vue.watch([() => props$1.sideboxActive, () => props$1.compact], () => {
vue.nextTick(() => {
sideboxScrollToActive();
});
});
vue.onMounted(() => {
sideboxScrollToActive();
sidebarScrollToActive();
const modalsEl = getModalsEl();
layoutProvide.modalsEl = modalsEl;
const contentEl = getContentEl();
if (contentEl != null && modalsEl != null) {
emit("contentMounted", contentEl, modalsEl);
}
});
return {
ownSlots,
tabSlots,
sidebarMenuRef,
sideboxMenuRef,
contentRef,
modalsRef,
isDisableTransition,
layoutHeight,
isFixedHeader,
isFixedSidebar,
isTopLayout,
isSideLayout,
isBoxSidebar,
isMixSidebar,
isMobile,
isHeaderLogo,
showHeaderMenus,
showHeaderTabs,
isDarkHeader,
isPrimaryHeader,
isButtonTab,
isDarkSidebar,
isDarkMixSidebar,
isGhostHeader,
isGhostSidebar,
isCollapseSidebar,
isCollapseMobile,
getContentEl,
getModalsEl,
updateCollapse,
handleLogoClick,
handleHeadMenuOpen,
handleHeadMenuClose,
handleHeadMenuItemClick,
handleHeadMenuItemMouseenter,
handleHeadMenuItemMouseleave,
handleHeadMouseenter,
handleHeadMouseleave,
handleBoxMenuItemClick,
handleBoxMenuItemMouseenter,
handleBoxMenuItemMouseleave,
handleBoxMouseEnter,
handleBoxMouseLeave,
handleSideMenuOpen,
handleSideMenuClose,
handleSideMenuItemClick,
handleSideMouseEnter,
handleSideMouseLeave,
handleTabClick,
handleTabRemove,
handleTabContextMenu,
handleTabSortChange
};
}
});
const _export_sfc = (sfc, props2) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props2) {
target[key] = val;
}
return target;
};
const _hoisted_1 = ["src"];
const _hoisted_2 = {
key: 1,
class: "ele-admin-tools"
};
const _hoisted_3 = {
key: 2,
class: "ele-admin-breadcrumb"
};
const _hoisted_4 = {
key: 5,
class: "ele-admin-tools"
};
const _hoisted_5 = ["src"];
const _hoisted_6 = ["src"];
const _hoisted_7 = {
ref: "modalsRef",
class: "ele-admin-modals"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_EleBreadcrumb = vue.resolveComponent("EleBreadcrumb");
const _component_EleMenus = vue.resolveComponent("EleMenus");
const _component_LayoutTabs = vue.resolveComponent("LayoutTabs");
const _component_ElScrollbar = vue.resolveComponent("ElScrollbar");
const _component_EleBacktop = vue.resolveComponent("EleBacktop");
const _component_LayoutSkeleton = vue.resolveComponent("LayoutSkeleton");
return vue.openBlock(), vue.createBlock(_component_LayoutSkeleton, {
isHeaderLogo: _ctx.isHeaderLogo,
class: vue.normalizeClass([{ "is-fixed-body": _ctx.fixedBody }, { "is-transition-disabled": _ctx.isDisableTransition }, { "is-maximized": _ctx.maximized }, { "is-expanded": _ctx.maximized === "expanded" }, { "is-mobile": _ctx.isMobile }, { "is-collapse": _ctx.isCollapseMobile }]),
style: vue.normalizeStyle({
minHeight: _ctx.layoutHeight,
height: _ctx.fixedBody ? _ctx.layoutHeight : void 0
})
}, {
head: vue.withCtx(() => [
!_ctx.isSideLayout ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(["ele-admin-header", { "is-dark": _ctx.isDarkHeader }, { "is-primary": _ctx.isPrimaryHeader }, { "is-ghost": _ctx.isGhostHeader }, { "show-divider": _ctx.tabBar && !_ctx.showHeaderTabs && !_ctx.isButtonTab }, { "is-fixed": _ctx.isFixedHeader }]),
style: vue.normalizeStyle(_ctx.headerCustomStyle),
onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.handleHeadMouseenter && _ctx.handleHeadMouseenter(...args)),
onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.handleHeadMouseleave && _ctx.handleHeadMouseleave(...args))
}, [
_ctx.isHeaderLogo && (_ctx.logoSrc || _ctx.logoTitle || _ctx.$slots.logo || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "ele-admin-logo",
style: vue.normalizeStyle(_ctx.logoStyle)
}, [
_ctx.logoSrc || _ctx.$slots.logo ? vue.renderSlot(_ctx.$slots, "logo", { key: 0 }, () => [
vue.createElementVNode("img", { src: _ctx.logoSrc }, null, 8, _hoisted_1)
]) : vue.createCommentVNode("", true),
_ctx.logoTitle || _ctx.$slots.logoTitle ? vue.renderSlot(_ctx.$slots, "logoTitle", { key: 1 }, () => [
vue.createElementVNode("h1", null, vue.toDisplayString(_ctx.logoTitle), 1)
]) : vue.createCommentVNode("", true)
], 4)) : vue.createCommentVNode("", true),
_ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "left")
])) : vue.createCommentVNode("", true),
_ctx.breadcrumb ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
vue.renderSlot(_ctx.$slots, "breadcrumb", {}, () => [
_ctx.levels && _ctx.levels.length ? (vue.openBlock(), vue.createBlock(_component_EleBreadcrumb, vue.mergeProps({ key: 0 }, _ctx.breadcrumb === true ? {} : _ctx.breadcrumb, { items: _ctx.levels }), null, 16, ["items"])) : vue.createCommentVNode("", true)
])
])) : vue.createCommentVNode("", true),
vue.renderSlot(_ctx.$slots, "center"),
!_ctx.showHeaderTabs || _ctx.showHeaderMenus ? (vue.openBlock(), vue.createElementBlock("div", {
key: 3,
class: "ele-admin-menus",
style: vue.normalizeStyle(_ctx.headerMenusStyle)
}, [
_ctx.showHeaderMenus && _ctx.headerMenus ? (vue.openBlock(), vue.createBlock(_component_EleMenus, vue.mergeProps({
key: 0,
mode: "horizontal",
theme: _ctx.isDarkHeader || _ctx.isPrimaryHeader ? "dark" : "light",
popupTheme: _ctx.isDarkHeader ? "dark" : "light",
defaultActive: _ctx.headerActive
}, _ctx.headerMenuProps || {}, {
items: _ctx.headerMenus,
onOpen: _ctx.handleHeadMenuOpen,
onClose: _ctx.handleHeadMenuClose,
onItemClick: _ctx.handleHeadMenuItemClick,
onItemMouseenter: _ctx.handleHeadMenuItemMouseenter,
onItemMouseleave: _ctx.handleHeadMenuItemMouseleave
}), vue.createSlots({ _: 2 }, [
_ctx.headerIconSlot && !_ctx.ownSlots.includes(_ctx.headerIconSlot) && _ctx.$slots[_ctx.headerIconSlot] ? {
name: "icon",
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, _ctx.headerIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
]),
key: "0"
} : void 0,
_ctx.headerTitleSlot && !_ctx.ownSlots.includes(_ctx.headerTitleSlot) && _ctx.$slots[_ctx.headerTitleSlot] ? {
name: "title",
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, _ctx.headerTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
]),
key: "1"
} : void 0
]), 1040, ["theme", "popupTheme", "defaultActive", "items", "onOpen", "onClose", "onItemClick", "onItemMouseenter", "onItemMouseleave"])) : vue.createCommentVNode("", true)
], 4)) : vue.createCommentVNode("", true),
_ctx.showHeaderTabs ? (vue.openBlock(), vue.createBlock(_component_LayoutTabs, {
key: 4,
tabs: _ctx.tabs,
active: _ctx.tabActive,
fixedHome: _ctx.fixedHome,
homePath: _ctx.homePath,
isHome: _ctx.isHome,
tabStyle: _ctx.tabStyle,
tabContextMenu: _ctx.tabContextMenu,
tabContextMenus: _ctx.tabContextMenus,
tabSortable: _ctx.tabSortable,
class: vue.normalizeClass([{ "is-fixed-home": _ctx.fixedHome }]),
style: vue.normalizeStyle(_ctx.tabsCustomStyle),
onTabClick: _ctx.handleTabClick,
onTabRemove: _ctx.handleTabRemove,
onTabContextMenu: _ctx.handleTabContextMenu,
onTabSortChange: _ctx.handleTabSortChange
}, vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots).filter((k) => _ctx.tabSlots.includes(k)), (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
])
};
})
]), 1032, ["tabs", "active", "fixedHome", "homePath", "isHome", "tabStyle", "tabContextMenu", "tabContextMenus", "tabSortable", "class", "style", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"])) : vue.createCommentVNode("", true),
_ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
vue.renderSlot(_ctx.$slots, "right")
])) : vue.createCommentVNode("", true)
], 38)) : vue.createCommentVNode("", true)
]),
side: vue.withCtx(() => [
!_ctx.isTopLayout ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(["ele-admin-side", { "is-fixed": _ctx.isFixedSidebar }, { "show-placeholder": _ctx.isFixedSidebar && _ctx.isHeaderLogo }, { "is-collapse": !_ctx.isMobile && !_ctx.isBoxSidebar && _ctx.isCollapseSidebar }, { "is-mix": !_ctx.isMobile && !_ctx.isBoxSidebar && _ctx.isMixSidebar }, { "is-compact": !_ctx.isMobile && _ctx.compact }, { "is-box": !_ctx.isMobile && _ctx.isBoxSidebar }]),
style: vue.normalizeStyle({ height: _ctx.isFixedSidebar ? _ctx.layoutHeight : void 0 })
}, [
_ctx.isMixSidebar ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(["ele-admin-sidebox", { "is-dark": _ctx.isDarkSidebar }, { "is-ghost": _ctx.isGhostSidebar }, { "show-divider": !_ctx.isCollapseSidebar && !_ctx.isBoxSidebar }, { "is-compact": _ctx.compact }]),
style: vue.normalizeStyle(_ctx.sideboxCustomStyle),
onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.handleBoxMouseEnter && _ctx.handleBoxMouseEnter(...args)),
onMouseleave: _cache[3] || (_cache[3] = (...args) => _ctx.handleBoxMouseLeave && _ctx.handleBoxMouseLeave(...args))
}, [
!_ctx.isHeaderLogo && (_ctx.logoSrc || _ctx.$slots.logo) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "ele-admin-logo",
style: vue.normalizeStyle(_ctx.logoStyle)
}, [
vue.renderSlot(_ctx.$slots, "logo", {}, () => [
vue.createElementVNode("img", { src: _ctx.logoSrc }, null, 8, _hoisted_5)
])
], 4)) : vue.createCommentVNode("", true),
vue.renderSlot(_ctx.$slots, "boxTop"),
vue.createVNode(_component_ElScrollbar, {
class: "ele-admin-menus",
style: vue.normalizeStyle(_ctx.sideboxMenusStyle)
}, {
default: vue.withCtx(() => [
_ctx.sideboxMenus ? (vue.openBlock(), vue.createBlock(_component_EleMenus, vue.mergeProps({
key: 0,
ref: "sideboxMenuRef",
mode: "compact",
uniqueOpened: true,
collapseTransition: false,
theme: _ctx.sidebarStyle,
defaultActive: _ctx.sideboxActive,
collapse: _ctx.compact
}, _ctx.sideboxMenuProps || {}, {
items: _ctx.sideboxMenus,
onItemClick: _ctx.handleBoxMenuItemClick,
onItemMouseenter: _ctx.handleBoxMenuItemMouseenter,
onItemMouseleave: _ctx.handleBoxMenuItemMouseleave
}), vue.createSlots({ _: 2 }, [
_ctx.sideboxIconSlot && !_ctx.ownSlots.includes(_ctx.sideboxIconSlot) && _ctx.$slots[_ctx.sideboxIconSlot] ? {
name: "icon",
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, _ctx.sideboxIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
]),
key: "0"
} : void 0,
_ctx.sideboxTitleSlot && !_ctx.ownSlots.includes(_ctx.sideboxTitleSlot) && _ctx.$slots[_ctx.sideboxTitleSlot] ? {
name: "title",
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, _ctx.sideboxTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
]),
key: "1"
} : void 0
]), 1040, ["theme", "defaultActive", "collapse", "items", "onItemClick", "onItemMouseenter", "onItemMouseleave"])) : vue.createCommentVNode("", true)
]),
_: 3
}, 8, ["style"]),
vue.renderSlot(_ctx.$slots, "boxBottom")
], 38)) : vue.createCommentVNode("", true),
!_ctx.isBoxSidebar ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(["ele-admin-sidebar", { "is-dark": _ctx.isMixSidebar ? _ctx.isDarkMixSidebar : _ctx.isDarkSidebar }, { "is-ghost": _ctx.isGhostSidebar }, { "is-mix": _ctx.isMixSidebar }, { "is-collapse": _ctx.isCollapseSidebar }]),
style: vue.normalizeStyle(_ctx.sidebarCustomStyle),
onMouseenter: _cache[4] || (_cache[4] = (...args) => _ctx.handleSideMouseEnter && _ctx.handleSideMouseEnter(...args)),
onMouseleave: _cache[5] || (_cache[5] = (...args) => _ctx.handleSideMouseLeave && _ctx.handleSideMouseLeave(...args))
}, [
_ctx.isMixSidebar ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
!_ctx.isHeaderLogo && (_ctx.logoTitle || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "ele-admin-logo-title",
style: vue.normalizeStyle(_ctx.logoTitleStyle)
}, [
vue.renderSlot(_ctx.$slots, "logoTitle", {}, () => [
vue.createElementVNode("h1", null, vue.toDisplayString(_ctx.logoTitle), 1)
])
], 4)) : vue.createCommentVNode("", true)
], 64)) : !_ctx.isHeaderLogo && (_ctx.logoSrc || _ctx.logoTitle || _ctx.$slots.logo || _ctx.$slots.logoTitle) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: "ele-admin-logo",
style: vue.normalizeStyle(_ctx.logoStyle)
}, [
_ctx.logoSrc || _ctx.$slots.logo ? vue.renderSlot(_ctx.$slots, "logo", { key: 0 }, () => [
vue.createElementVNode("img", { src: _ctx.logoSrc }, null, 8, _hoisted_6)
]) : vue.createCommentVNode("", true),
_ctx.logoTitle || _ctx.$slots.logoTitle ? vue.renderSlot(_ctx.$slots, "logoTitle", { key: 1 }, () => [
vue.createElementVNode("h1", null, vue.toDisplayString(_ctx.logoTitle), 1)
]) : vue.createCommentVNode("", true)
], 4)) : vue.createCommentVNode("", true),
vue.renderSlot(_ctx.$slots, "top"),
vue.createVNode(_component_ElScrollbar, {
class: "ele-admin-menus",
style: vue.normalizeStyle(_ctx.sidebarMenusStyle)
}, {
default: vue.withCtx(() => [
_ctx.sidebarMenus ? (vue.openBlock(), vue.createBlock(_component_EleMenus, vue.mergeProps({
key: 0,
ref: "sidebarMenuRef",
uniqueOpened: true,
collapseTransition: false,
theme: _ctx.isMixSidebar && !_ctx.isDarkMixSidebar ? void 0 : _ctx.sidebarStyle,
defaultActive: _ctx.sidebarActive,
collapse: _ctx.isMixSidebar ? false : _ctx.isCollapseSidebar
}, _ctx.sidebarMenuProps || {}, {
items: _ctx.sidebarMenus,
onOpen: _ctx.handleSideMenuOpen,
onClose: _ctx.handleSideMenuClose,
onItemClick: _ctx.handleSideMenuItemClick
}), vue.createSlots({ _: 2 }, [
_ctx.sidebarIconSlot && !_ctx.ownSlots.includes(_ctx.sidebarIconSlot) && _ctx.$slots[_ctx.sidebarIconSlot] ? {
name: "icon",
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, _ctx.sidebarIconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
]),
key: "0"
} : void 0,
_ctx.sidebarTitleSlot && !_ctx.ownSlots.includes(_ctx.sidebarTitleSlot) && _ctx.$slots[_ctx.sidebarTitleSlot] ? {
name: "title",
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, _ctx.sidebarTitleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
]),
key: "1"
} : void 0
]), 1040, ["theme", "defaultActive", "collapse", "items", "onOpen", "onClose", "onItemClick"])) : vue.createCommentVNode("", true)
]),
_: 3
}, 8, ["style"]),
vue.renderSlot(_ctx.$slots, "bottom")
], 38)) : vue.createCommentVNode("", true)
], 6)) : vue.createCommentVNode("", true)
]),
tabs: vue.withCtx(() => [
_ctx.tabBar && !_ctx.showHeaderTabs ? (vue.openBlock(), vue.createBlock(_component_LayoutTabs, {
key: 0,
tabs: _ctx.tabs,
active: _ctx.tabActive,
fixedHome: _ctx.fixedHome,
homePath: _ctx.homePath,
isHome: _ctx.isHome,
tabStyle: _ctx.tabStyle,
tabContextMenu: _ctx.tabContextMenu,
tabContextMenus: _ctx.tabContextMenus,
tabSortable: _ctx.tabSortable,
class: vue.normalizeClass([{ "is-fixed-home": _ctx.fixedHome }, { "is-fixed": _ctx.isFixedHeader }, { "is-fixed-top": _ctx.isFixedHeader && (_ctx.isSideLayout || _ctx.maximized) }]),
style: vue.normalizeStyle(_ctx.tabsCustomStyle),
onTabClick: _ctx.handleTabClick,
onTabRemove: _ctx.handleTabRemove,
onTabContextMenu: _ctx.handleTabContextMenu,
onTabSortChange: _ctx.handleTabSortChange
}, vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots).filter((k) => _ctx.tabSlots.includes(k)), (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
])
};
})
]), 1032, ["tabs", "active", "fixedHome", "homePath", "isHome", "tabStyle", "tabContextMenu", "tabContextMenus", "tabSortable", "class", "style", "onTabClick", "onTabRemove", "onTabContextMenu", "onTabSortChange"])) : vue.createCommentVNode("", true)
]),
body: vue.withCtx(() => [
vue.createElementVNode("div", {
ref: "contentRef",
class: "ele-admin-content",
style: vue.normalizeStyle(_ctx.contentCustomStyle)
}, [
vue.renderSlot(_ctx.$slots, "default")
], 4),
vue.renderSlot(_ctx.$slots, "body"),
_ctx.backTop ? (vue.openBlock(), vue.createBlock(_component_EleBacktop, vue.mergeProps({
key: 0,
target: _ctx.fixedBody && _ctx.contentRef ? _ctx.contentRef : void 0,
style: _ctx.fixedBody ? { position: "absolute" } : void 0
}, _ctx.backTop === true ? {} : _ctx.backTop), null, 16, ["target", "style"])) : vue.createCommentVNode("", true),
vue.createElementVNode("div", _hoisted_7, null, 512)
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: "ele-admin-mask",
onClick: _cache[6] || (_cache[6] = ($event) => _ctx.updateCollapse())
})
]),
_: 3
}, 8, ["isHeaderLogo", "class", "style"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;