@seemusic/ui-components/lib/components/SopTheSidebar/SopTheSidebar.mjs

A Vue 3 UI Library. Uses Composable.

import { defineComponent, ref, computed, isVNode, watch, createVNode, mergeProps } from "vue";
import { ElMenu, ElAside, ElScrollbar } from "element-plus";
import { SidebarItem } from "./SidebarItem.mjs";
import { useCustomRouter } from "../../composables/customRouter.mjs";
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
function setMenuIndex(menu, index) {
  if (!menu.path && !menu.href) {
    return `${index}`;
  }
  return menu.path ? menu.path : menu.href;
}
const SopTheSidebar = /* @__PURE__ */ defineComponent({
  name: "SopTheSidebar",
  components: {
    ElMenu,
    ElAside,
    ElScrollbar,
    SidebarItem
  },
  props: {
    width: {
      type: String,
      default: "256px"
    },
    menuList: {
      type: Array,
      default: () => []
    },
    collapseIcon: {
      type: Object,
      default: () => ({})
    },
    collapse: {
      type: Boolean,
      default: false
    }
  },
  emits: ["update:collapse"],
  setup(props, {
    attrs,
    emit
  }) {
    const {
      route
    } = useCustomRouter();
    const defaultActive = ref("");
    const menuList = ref(props.menuList);
    const isShowCollapseContainer = computed(() => props.collapseIcon && isVNode(props.collapseIcon));
    watch(() => route.value, () => {
      if (route.value) {
        if (route.value.meta && route.value.meta.active) {
          const active = route.value.meta.active;
          defaultActive.value = active;
        } else {
          if (route.value.path) {
            defaultActive.value = route.value.path;
          }
        }
      }
    }, {
      deep: true,
      immediate: true
    });
    return () => {
      let _slot;
      return createVNode(ElAside, {
        "class": [props.collapse ? "aside-collapse" : "", "app-aside"],
        "width": props.width
      }, {
        default: () => [createVNode(ElScrollbar, {
          "height": "calc(100vh - 64px)"
        }, {
          default: () => [createVNode(ElMenu, mergeProps(attrs, {
            "mode": "vertical",
            "unique-opened": true,
            "menu-trigger": "click",
            "default-active": defaultActive.value,
            "collapse": props.collapse,
            "collapse-transition": true,
            "class": isShowCollapseContainer.value ? "collapse-menu" : ""
          }), _isSlot(_slot = menuList.value.map((menu, index) => {
            return createVNode(SidebarItem, {
              "item": menu,
              "index": setMenuIndex(menu, index) || "",
              "onClick-menu-item": (menuIndex) => {
                defaultActive.value = menuIndex;
              }
            }, null);
          })) ? _slot : {
            default: () => [_slot]
          })]
        }), isShowCollapseContainer.value && createVNode("div", {
          "class": "collapse-container"
        }, [createVNode("div", {
          "onClick": () => {
            emit("update:collapse", !props.collapse);
          }
        }, [props.collapseIcon])])]
      });
    };
  }
});
export {
  SopTheSidebar as default,
  setMenuIndex
};
//# sourceMappingURL=SopTheSidebar.mjs.map