@fmdevui/fm-dev/lib/packages/core/layout/component/aside.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var pinia = require('pinia');
require('../../stores/index.js');
var index = require('../../utils/emit/index.js');
require('../logo/index.vue.js');
require('../navMenu/vertical.vue.js');
var routesList = require('../../stores/routesList.js');
var themeConfig = require('../../stores/themeConfig.js');
var tagsViewRoutes = require('../../stores/tagsViewRoutes.js');
var index_vue_vue_type_script_setup_true_name_layoutLogo_lang = require('../logo/index.vue2.js');
var vertical_vue_vue_type_script_setup_true_name_navMenuVertical_lang = require('../navMenu/vertical.vue2.js');

const _hoisted_1 = { class: "h100" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "aside",
  setup(__props) {
    const layoutAsideScrollbarRef = vue.ref();
    const stores = routesList.useRoutesList();
    const storesThemeConfig = themeConfig.useThemeConfig();
    const storesTagsViewRoutes = tagsViewRoutes.useTagsViewRoutes();
    const { routesList: routesList$1 } = pinia.storeToRefs(stores);
    const { themeConfig: themeConfig$1 } = pinia.storeToRefs(storesThemeConfig);
    const { isTagsViewCurrenFull } = pinia.storeToRefs(storesTagsViewRoutes);
    const state = vue.reactive({
      menuList: [],
      clientWidth: 0
    });
    const setCollapseStyle = vue.computed(() => {
      const { layout, isCollapse, menuBar } = themeConfig$1.value;
      const asideBrTheme = ["#FFFFFF", "#FFF", "#fff", "#ffffff"];
      const asideBrColor = asideBrTheme.includes(menuBar) ? "layout-el-aside-br-color" : "";
      if (state.clientWidth <= 1e3) {
        if (isCollapse) {
          document.body.setAttribute("class", "el-popup-parent--hidden");
          const asideEle = document.querySelector(".layout-container");
          const modeDivs = document.createElement("div");
          modeDivs.setAttribute("class", "layout-aside-mobile-mode");
          asideEle.appendChild(modeDivs);
          modeDivs.addEventListener("click", closeLayoutAsideMobileMode);
          return [asideBrColor, "layout-aside-mobile", "layout-aside-mobile-open"];
        } else {
          closeLayoutAsideMobileMode();
          return [asideBrColor, "layout-aside-mobile", "layout-aside-mobile-close"];
        }
      } else {
        if (layout === "columns" || layout === "classic") {
          if (isCollapse) return [asideBrColor, "layout-aside-pc-1"];
          else return [asideBrColor, "layout-aside-pc-220"];
        } else {
          if (isCollapse) return [asideBrColor, "layout-aside-pc-64"];
          else return [asideBrColor, "layout-aside-pc-220"];
        }
      }
    });
    const setShowLogo = vue.computed(() => {
      let { layout, isShowLogo } = themeConfig$1.value;
      return isShowLogo && layout === "defaults" || isShowLogo && layout === "columns";
    });
    const closeLayoutAsideMobileMode = () => {
      const el = document.querySelector(".layout-aside-mobile-mode");
      el?.setAttribute("style", "animation: error-img-two 0.3s");
      setTimeout(() => {
        el?.parentNode?.removeChild(el);
      }, 300);
      const clientWidth = document.body.clientWidth;
      if (clientWidth < 1e3) themeConfig$1.value.isCollapse = false;
      document.body.setAttribute("class", "");
    };
    const setFilterRoutes = () => {
      if (themeConfig$1.value.layout === "columns") return false;
      state.menuList = filterRoutesFun(routesList$1.value);
    };
    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 initMenuFixed = (clientWidth) => {
      state.clientWidth = clientWidth;
    };
    const onAsideEnterLeave = (bool) => {
      let { layout } = themeConfig$1.value;
      if (layout !== "columns") return false;
      if (!bool) index.default.emit("restoreDefault");
      if (themeConfig$1.value.isColumnsMenuHoverPreload) stores.setColumnsMenuHover(bool);
    };
    vue.onBeforeMount(() => {
      initMenuFixed(document.body.clientWidth);
      setFilterRoutes();
      index.default.on("setSendColumnsChildren", (res) => {
        state.menuList = res.children;
      });
      index.default.on("setSendClassicChildren", (res) => {
        let { layout, isClassicSplitMenu } = themeConfig$1.value;
        if (layout === "classic" && isClassicSplitMenu) {
          res.children.length <= 1 ? themeConfig$1.value.isCollapse = true : themeConfig$1.value.isCollapse = false;
          state.menuList = [];
          state.menuList = res.children;
        }
      });
      index.default.on("getBreadcrumbIndexSetFilterRoutes", () => {
        setFilterRoutes();
      });
      index.default.on("layoutMobileResize", (res) => {
        initMenuFixed(res.clientWidth);
        closeLayoutAsideMobileMode();
      });
    });
    vue.watch(
      () => [themeConfig$1.value.isShowLogoChange, themeConfig$1.value.isShowLogo, themeConfig$1.value.layout, themeConfig$1.value.isClassicSplitMenu],
      ([isShowLogoChange, isShowLogo, layout, isClassicSplitMenu]) => {
        if (isShowLogoChange !== isShowLogo) {
          if (layoutAsideScrollbarRef.value) layoutAsideScrollbarRef.value.update();
        }
        if (layout === "classic" && isClassicSplitMenu) return false;
      }
    );
    vue.watch(
      () => routesList$1.value,
      () => {
        setFilterRoutes();
      }
    );
    return (_ctx, _cache) => {
      const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
      const _component_el_aside = vue.resolveComponent("el-aside");
      return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
        "div",
        _hoisted_1,
        [
          vue.createVNode(_component_el_aside, {
            class: vue.normalizeClass(["layout-aside", setCollapseStyle.value])
          }, {
            default: vue.withCtx(() => [
              setShowLogo.value ? (vue.openBlock(), vue.createBlock(index_vue_vue_type_script_setup_true_name_layoutLogo_lang.default, { key: 0 })) : vue.createCommentVNode("v-if", true),
              vue.createVNode(
                _component_el_scrollbar,
                {
                  class: "flex-auto",
                  ref_key: "layoutAsideScrollbarRef",
                  ref: layoutAsideScrollbarRef,
                  onMouseenter: _cache[0] || (_cache[0] = ($event) => onAsideEnterLeave(true)),
                  onMouseleave: _cache[1] || (_cache[1] = ($event) => onAsideEnterLeave(false))
                },
                {
                  default: vue.withCtx(() => [
                    vue.createVNode(vertical_vue_vue_type_script_setup_true_name_navMenuVertical_lang.default, {
                      menuList: state.menuList
                    }, null, 8, ["menuList"])
                  ]),
                  _: 1
                  /* STABLE */
                },
                512
                /* NEED_PATCH */
              )
            ]),
            _: 1
            /* STABLE */
          }, 8, ["class"])
        ],
        512
        /* NEED_PATCH */
      )), [
        [vue.vShow, !vue.unref(isTagsViewCurrenFull)]
      ]);
    };
  }
});

exports.default = _sfc_main;