plus-pro-components
Version:
Page level components developed based on Element Plus.
180 lines (175 loc) • 7.47 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var elementPlus = require('element-plus');
var iconsVue = require('@element-plus/icons-vue');
var lodashEs = require('lodash-es');
require('../../utils/index.js');
var sidebarItem = require('./sidebar-item.vue.js');
var is = require('../../utils/is.js');
var _sfc_main = /* @__PURE__ */ vue.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 = vue.getCurrentInstance();
const route = vue.computed(
() => instance.appContext.config.globalProperties.$route
);
const plusSidebarInstance = vue.ref(null);
const subCollapse = vue.ref(false);
const subRoutes = vue.computed(
() => lodashEs.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 = vue.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 = vue.computed(
() => vue.unref(props.defaultActive) || computedDefaultActive.value
);
const onClickMenuItem = vue.useAttrs().onClickMenuItem;
const toggleCollapse = () => {
subCollapse.value = !subCollapse.value;
emit("update:collapse", subCollapse.value);
emit("toggleCollapse", subCollapse.value);
};
vue.watchEffect(() => {
subCollapse.value = props.collapse;
});
__expose({
collapse: subCollapse,
toggleCollapse,
plusSidebarInstance
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElMenu), vue.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: vue.withCtx(() => [
_ctx.renderMenuExtra && vue.unref(is.isFunction)(_ctx.renderMenuExtra) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.renderMenuExtra), { key: 0 })) : _ctx.$slots["sidebar-extra"] ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.createCommentVNode(" \u83DC\u5355\u5934\u63D2\u69FD "),
vue.renderSlot(_ctx.$slots, "sidebar-extra")
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)) : vue.createCommentVNode("v-if", true),
vue.createVNode(
vue.unref(elementPlus.ElScrollbar),
vue.mergeProps({ class: "plus-sidebar__scrollbar" }, _ctx.scrollbarProps),
{
default: vue.withCtx(() => [
vue.createCommentVNode(" \u6DFB\u52A0\u9012\u5F52\u7EC4\u4EF6\uFF0C\u7528\u6765\u751F\u6210\u591A\u7EA7\u83DC\u5355 "),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(subRoutes.value, (item) => {
return vue.openBlock(), vue.createBlock(sidebarItem.default, {
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: vue.unref(onClickMenuItem)
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["sidebar-item"] ? {
name: "sidebar-item",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "sidebar-item", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "0"
} : void 0,
_ctx.$slots["sidebar-sub"] ? {
name: "sidebar-sub",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "sidebar-sub", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "1"
} : void 0,
_ctx.$slots["sidebar-item-title"] ? {
name: "sidebar-item-title",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "sidebar-item-title", vue.normalizeProps(vue.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" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElMenuItem), {
key: 2,
index: "collapse",
class: vue.normalizeClass(["plus-sidebar__collapse", subCollapse.value ? "is-collapse" : ""]),
onClick: toggleCollapse
}, {
default: vue.withCtx(() => [
subCollapse.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), { key: 0 }, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.Expand))
]),
_: 1
/* STABLE */
})) : (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), { key: 1 }, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.Fold))
]),
_: 1
/* STABLE */
}))
]),
_: 1
/* STABLE */
}, 8, ["class"])) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 16, ["collapse", "default-active", "class"]);
};
}
});
exports.default = _sfc_main;