@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
275 lines (270 loc) • 10.8 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var vueRouter = require('vue-router');
var pinia = require('pinia');
require('../../stores/index.js');
var index = require('../../utils/emit/index.js');
var routesList = require('../../stores/routesList.js');
var themeConfig = require('../../stores/themeConfig.js');
const _hoisted_1 = { class: "layout-columns-aside" };
const _hoisted_2 = { class: "layout-logo" };
const _hoisted_3 = ["src"];
const _hoisted_4 = ["onClick", "onMouseenter", "title"];
const _hoisted_5 = { class: "columns-vertical-title font12" };
const _hoisted_6 = ["href"];
const _hoisted_7 = { class: "columns-vertical-title font12" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "columnsAside",
setup(__props) {
const columnsAsideOffsetTopRefs = vue.ref([]);
const columnsAsideActiveRef = vue.ref();
const stores = routesList.useRoutesList();
const storesThemeConfig = themeConfig.useThemeConfig();
const { routesList: routesList$1, isColumnsMenuHover, isColumnsNavHover } = pinia.storeToRefs(stores);
const { themeConfig: themeConfig$1 } = pinia.storeToRefs(storesThemeConfig);
const route = vueRouter.useRoute();
const router = vueRouter.useRouter();
const state = vue.reactive({
columnsAsideList: [],
liIndex: 0,
liOldIndex: null,
liHoverIndex: null,
liOldPath: null,
difference: 0,
routeSplit: []
});
const setColumnsAsideMove = (k) => {
if (k === void 0) return false;
state.liIndex = k;
columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
};
const onColumnsAsideMenuClick = async (v) => {
let { path, redirect } = v;
if (redirect) {
onColumnsAsideDown(v.k);
if (route.path.startsWith(redirect)) index.default.emit("setSendColumnsChildren", setSendChildren(redirect));
else router.push(redirect);
} else {
if (!v.children || v.children?.length === 0) {
router.push(path);
onColumnsAsideDown(v.k);
} else {
const resData = setSendChildren(path);
if (Object.keys(resData).length <= 0) return false;
onColumnsAsideDown(resData.item?.k);
index.default.emit("setSendColumnsChildren", resData);
}
}
if (!v.children || v.children?.length === 0) themeConfig$1.value.isCollapse = true;
else if (v.children.length > 1) themeConfig$1.value.isCollapse = false;
};
const onColumnsAsideMenuMouseenter = (v, k) => {
if (!themeConfig$1.value.isColumnsMenuHoverPreload) return false;
let { path } = v;
state.liOldPath = path;
state.liOldIndex = k;
state.liHoverIndex = k;
index.default.emit("setSendColumnsChildren", setSendChildren(path));
stores.setColumnsMenuHover(false);
stores.setColumnsNavHover(true);
};
const onColumnsAsideMenuMouseleave = async () => {
if (!themeConfig$1.value.isColumnsMenuHoverPreload) return false;
await stores.setColumnsNavHover(false);
setTimeout(() => {
if (!isColumnsMenuHover && !isColumnsNavHover) index.default.emit("restoreDefault");
}, 100);
};
const onColumnsAsideDown = (k) => {
vue.nextTick(() => {
setColumnsAsideMove(k);
});
};
const setMenuAutoCollaps = (path) => {
const resData = setSendChildren(path);
!resData.item?.redirect && resData.children.length == 0 || resData.item?.redirect && resData.children.length <= 1 ? themeConfig$1.value.isCollapse = true : themeConfig$1.value.isCollapse = false;
return resData;
};
const setFilterRoutes = () => {
state.columnsAsideList = filterRoutesFun(routesList$1.value);
const resData = setMenuAutoCollaps(route.path);
onColumnsAsideDown(resData.item?.k);
setTimeout(() => {
index.default.emit("setSendColumnsChildren", resData);
}, 500);
};
const setSendChildren = (path) => {
const currentPathSplit = path.split("/");
let currentData = { children: [], item: void 0 };
const matched = state.columnsAsideList.find((v, k) => {
if (v.path === `/${currentPathSplit[1]}`) {
v["k"] = k;
return true;
}
return false;
});
if (matched) {
currentData.item = { ...matched };
currentData.children = matched.children ? [...matched.children] : [{ ...matched }];
}
return currentData;
};
const filterRoutesFun = (arr) => {
return arr.filter((item) => !item.meta?.isHide).map((item) => {
item = Object.assign({}, item);
if (item.children) item.children = filterRoutesFun(item.children);
return item;
});
};
const setColumnsMenuHighlight = (path) => {
state.routeSplit = path.split("/");
state.routeSplit.shift();
const routeFirst = `/${state.routeSplit[0]}`;
const currentSplitRoute = state.columnsAsideList.find((v) => v.path === routeFirst);
if (!currentSplitRoute) return false;
setTimeout(() => {
onColumnsAsideDown(currentSplitRoute.k);
}, 0);
};
vue.onMounted(() => {
setFilterRoutes();
index.default.on("restoreDefault", () => {
state.liOldIndex = null;
state.liOldPath = null;
});
});
vue.onUnmounted(() => {
index.default.off("restoreDefault", () => {
});
});
vueRouter.onBeforeRouteUpdate((to) => {
const resData = setMenuAutoCollaps(to.path);
setColumnsMenuHighlight(to.path);
index.default.emit("setSendColumnsChildren", resData);
});
vue.watch(
[() => themeConfig$1.value.columnsAsideStyle, isColumnsMenuHover, isColumnsNavHover],
() => {
themeConfig$1.value.columnsAsideStyle === "columnsRound" ? state.difference = 3 : state.difference = 0;
if (!isColumnsMenuHover.value && !isColumnsNavHover.value) {
state.liHoverIndex = null;
index.default.emit("setSendColumnsChildren", setSendChildren(route.path));
} else {
state.liHoverIndex = state.liOldIndex;
if (!state.liOldPath) return false;
index.default.emit("setSendColumnsChildren", setSendChildren(state.liOldPath));
}
},
{
deep: true
}
);
return (_ctx, _cache) => {
const _component_SvgIcon = vue.resolveComponent("SvgIcon");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("img", {
src: vue.unref(themeConfig$1).logoUrl,
class: "layout-logo-medium-img"
}, null, 8, _hoisted_3)
]),
vue.createVNode(_component_el_scrollbar, null, {
default: vue.withCtx(() => [
vue.createElementVNode(
"ul",
{
onMouseleave: _cache[0] || (_cache[0] = ($event) => onColumnsAsideMenuMouseleave())
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(state.columnsAsideList, (v, k) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: k,
onClick: ($event) => onColumnsAsideMenuClick(v),
onMouseenter: ($event) => onColumnsAsideMenuMouseenter(v, k),
ref_for: true,
ref: (el) => {
if (el) columnsAsideOffsetTopRefs.value[k] = el;
},
class: vue.normalizeClass({ "layout-columns-active": state.liIndex === k, "layout-columns-hover": state.liHoverIndex === k }),
title: _ctx.$t(`message.menu.${v.meta.title}`)
}, [
!v.meta.isLink || v.meta.isLink && v.meta.isIframe ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(vue.unref(themeConfig$1).columnsAsideLayout)
},
[
vue.createVNode(_component_SvgIcon, {
name: v.meta.icon
}, null, 8, ["name"]),
vue.createElementVNode(
"div",
_hoisted_5,
vue.toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
1
/* TEXT */
)
],
2
/* CLASS */
)) : (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass(vue.unref(themeConfig$1).columnsAsideLayout)
},
[
vue.createElementVNode("a", {
href: v.meta.isLink,
target: "_blank"
}, [
vue.createVNode(_component_SvgIcon, {
name: v.meta.icon
}, null, 8, ["name"]),
vue.createElementVNode(
"div",
_hoisted_7,
vue.toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
1
/* TEXT */
)
], 8, _hoisted_6)
],
2
/* CLASS */
))
], 42, _hoisted_4);
}),
128
/* KEYED_FRAGMENT */
)),
vue.createElementVNode(
"div",
{
ref_key: "columnsAsideActiveRef",
ref: columnsAsideActiveRef,
class: vue.normalizeClass(vue.unref(themeConfig$1).columnsAsideStyle)
},
null,
2
/* CLASS */
)
],
32
/* NEED_HYDRATION */
)
]),
_: 1
/* STABLE */
})
]);
};
}
});
exports.default = _sfc_main;