plus-pro-components
Version:
Page level components developed based on Element Plus.
176 lines (173 loc) • 7.37 kB
JavaScript
import { defineComponent, getCurrentInstance, computed, ref, unref, useAttrs, watchEffect, openBlock, createBlock, mergeProps, withCtx, resolveDynamicComponent, createElementBlock, Fragment, createCommentVNode, renderSlot, createVNode, renderList, createSlots, normalizeProps, guardReactiveProps, normalizeClass } from 'vue';
import { ElMenu, ElScrollbar, ElMenuItem, ElIcon } from 'element-plus';
import { Expand, Fold } from '@element-plus/icons-vue';
import { cloneDeep } from 'lodash-es';
import '../../utils/index.mjs';
import SidebarItem from './sidebar-item.vue.mjs';
import { isFunction } from '../../utils/is.mjs';
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "PlusSidebar"
},
__name: "index",
props: {
routes: { default: () => [] },
collapse: { type: Boolean, default: false },
defaultActive: { default: void 0 },
renderMenuItem: { type: Function, default: void 0 },
renderSubMenuItem: { type: Function, default: void 0 },
renderTitle: { type: Function, default: void 0 },
renderMenuExtra: { type: Function, default: void 0 },
scrollbarProps: { default: () => ({}) },
width: { default: 200 }
},
emits: ["update:collapse", "toggleCollapse"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const instance = getCurrentInstance();
const route = computed(
() => instance.appContext.config.globalProperties.$route
);
const plusSidebarInstance = ref(null);
const subCollapse = ref(false);
const subRoutes = computed(
() => cloneDeep(props.routes).sort((a, b) => {
var _a, _b;
return (((_a = a.meta) == null ? void 0 : _a.sort) || 0) - (((_b = b.meta) == null ? void 0 : _b.sort) || 0);
})
);
const computedDefaultActive = computed(
() => {
var _a, _b, _c, _d;
return ((_a = route.value) == null ? void 0 : _a.redirectedFrom) && ((_c = (_b = route.value) == null ? void 0 : _b.redirectedFrom) == null ? void 0 : _c.path) || ((_d = route.value) == null ? void 0 : _d.path);
}
);
const subDefaultActive = computed(
() => unref(props.defaultActive) || computedDefaultActive.value
);
const onClickMenuItem = useAttrs().onClickMenuItem;
const toggleCollapse = () => {
subCollapse.value = !subCollapse.value;
emit("update:collapse", subCollapse.value);
emit("toggleCollapse", subCollapse.value);
};
watchEffect(() => {
subCollapse.value = props.collapse;
});
__expose({
collapse: subCollapse,
toggleCollapse,
plusSidebarInstance
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElMenu), mergeProps({
ref_key: "plusSidebarInstance",
ref: plusSidebarInstance,
mode: "vertical",
collapse: subCollapse.value,
"default-active": subDefaultActive.value,
"collapse-transition": true,
class: ["plus-sidebar", [_ctx.$attrs.mode === "horizontal" ? "is-horizontal" : "is-vertical"]],
ellipsis: false,
"unique-opened": ""
}, _ctx.$attrs), {
default: withCtx(() => [
_ctx.renderMenuExtra && unref(isFunction)(_ctx.renderMenuExtra) ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderMenuExtra), { key: 0 })) : _ctx.$slots["sidebar-extra"] ? (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
createCommentVNode(" \u83DC\u5355\u5934\u63D2\u69FD "),
renderSlot(_ctx.$slots, "sidebar-extra")
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)) : createCommentVNode("v-if", true),
createVNode(
unref(ElScrollbar),
mergeProps({ class: "plus-sidebar__scrollbar" }, _ctx.scrollbarProps),
{
default: withCtx(() => [
createCommentVNode(" \u6DFB\u52A0\u9012\u5F52\u7EC4\u4EF6\uFF0C\u7528\u6765\u751F\u6210\u591A\u7EA7\u83DC\u5355 "),
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(subRoutes.value, (item) => {
return openBlock(), createBlock(SidebarItem, {
key: item.path,
item,
parent: subRoutes.value,
collapse: subCollapse.value,
"render-menu-item": _ctx.renderMenuItem,
"render-sub-menu-item": _ctx.renderSubMenuItem,
"render-title": _ctx.renderTitle,
onClickMenuItem: unref(onClickMenuItem)
}, createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["sidebar-item"] ? {
name: "sidebar-item",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "sidebar-item", normalizeProps(guardReactiveProps(data)))
]),
key: "0"
} : void 0,
_ctx.$slots["sidebar-sub"] ? {
name: "sidebar-sub",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "sidebar-sub", normalizeProps(guardReactiveProps(data)))
]),
key: "1"
} : void 0,
_ctx.$slots["sidebar-item-title"] ? {
name: "sidebar-item-title",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "sidebar-item-title", normalizeProps(guardReactiveProps(data)))
]),
key: "2"
} : void 0
]), 1032, ["item", "parent", "collapse", "render-menu-item", "render-sub-menu-item", "render-title", "onClickMenuItem"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 3
/* FORWARDED */
},
16
/* FULL_PROPS */
),
_ctx.$attrs.mode !== "horizontal" ? (openBlock(), createBlock(unref(ElMenuItem), {
key: 2,
index: "collapse",
class: normalizeClass(["plus-sidebar__collapse", subCollapse.value ? "is-collapse" : ""]),
onClick: toggleCollapse
}, {
default: withCtx(() => [
subCollapse.value ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
default: withCtx(() => [
createVNode(unref(Expand))
]),
_: 1
/* STABLE */
})) : (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
default: withCtx(() => [
createVNode(unref(Fold))
]),
_: 1
/* STABLE */
}))
]),
_: 1
/* STABLE */
}, 8, ["class"])) : createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 16, ["collapse", "default-active", "class"]);
};
}
});
export { _sfc_main as default };