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

A Vue 3 UI Library. Uses Composable.

{"version":3,"file":"SopTheSidebar.mjs","sources":["../../../src/components/SopTheSidebar/SopTheSidebar.tsx"],"sourcesContent":["import { defineComponent, ref, isVNode, computed, watch, type PropType, type VNode } from 'vue';\nimport { ElMenu, ElAside, ElScrollbar } from 'element-plus';\nimport { SidebarItem } from './SidebarItem';\nimport { useCustomRouter } from '../../composables/customRouter';\n\nexport interface SidebarListItem {\n  /** 标题 */\n  title: string,\n  /** iconify 类名 */\n  icon?: VNode,\n  /** 外链 */\n  href?: string,\n  /** 内链 */\n  path?: string\n  // 是否禁用\n  disabled?: boolean\n  /** 子菜单 */\n  subMenu?: SidebarListItem[]\n}\n\n/**\n * @description 设置 subMenu(索引) menu(链接) 的 index 属性\n * @param menu  SidebarListItem\n * @param index number\n * @returns string\n */\nexport function setMenuIndex(menu: SidebarListItem, index: number)   {\n  if (!menu.path && !menu.href) {\n    return `${index}`;\n  }\n  return menu.path ? menu.path : menu.href;\n}\n\nexport default defineComponent({\n  name: 'SopTheSidebar',\n  components: {\n    ElMenu, ElAside, ElScrollbar, SidebarItem\n  },\n  props: {\n    width: {\n      type: String,\n      default: '256px'\n    },\n    menuList: {\n      type: Array as PropType<SidebarListItem[]>,\n      default: () => ([])\n    },\n    collapseIcon: {\n      type: Object as PropType<VNode>,\n      default: () => ({})\n    },\n    collapse: {\n      type: Boolean,\n      default: false\n    }\n  },\n  emits: ['update:collapse'],\n  setup(props, { attrs, emit }) {\n    const { route } = useCustomRouter();\n    const defaultActive = ref('');\n    const menuList = ref(props.menuList);\n\n    const isShowCollapseContainer = computed(() => props.collapseIcon && isVNode(props.collapseIcon));\n\n    // fix: 页面内点击跳转后，菜单高亮无法跟随变动\n    watch(\n      () => route.value,\n      () => {\n        if (route.value) {\n          /**\n           * bug: 跳转到 /examples/child 时, /examples 对应的菜单高亮效果丢失。\n           * routes\n           * [\n           *    { path: '/example' },\n           *    /example/child 是否需要 /example 进行高亮显示\n           *    { path: '/example/child }\n           * ]\n           *\n           * menuList\n           * [\n           *    { title: '示例', path: '/example' }\n           * ]\n           *\n           * 如果 VueRouter 的 routes 中配置了 meta.active 就以这个字段为准，如果没有就使用 path\n           * TODO: 硬编码的方式解决以上问题, 期待更合适的解决方案。。。\n           */\n          if (route.value.meta && route.value.meta.active) {\n            const active = route.value.meta.active as string;\n            defaultActive.value = active;\n          } else {\n            if (route.value.path) {\n              defaultActive.value = route.value.path;\n            }\n          }\n        }\n      },\n      { deep: true, immediate: true }\n    );\n\n    return () => (\n      <ElAside\n        class={[props.collapse ? 'aside-collapse' : '', 'app-aside']}\n        width={props.width}\n      >\n        <ElScrollbar height=\"calc(100vh - 64px)\">\n          <ElMenu\n            {...attrs}\n            mode=\"vertical\"\n            unique-opened\n            menu-trigger=\"click\"\n            default-active={defaultActive.value}\n            collapse={props.collapse}\n            collapse-transition\n            class={isShowCollapseContainer.value ? 'collapse-menu' : ''}\n          >\n            {\n              menuList.value.map((menu, index) => {\n                return <SidebarItem\n                  item={menu}\n                  index={setMenuIndex(menu, index) || ''}\n                  onClick-menu-item={(menuIndex) => {\n                    defaultActive.value = menuIndex;\n                  }}\n                />;\n              })\n            }\n          </ElMenu>\n\n        </ElScrollbar>\n\n        {\n          isShowCollapseContainer.value &&\n          <div class=\"collapse-container\">\n            <div onClick={() => {\n              emit('update:collapse', !props.collapse);\n            }}>\n              {props.collapseIcon}\n            </div>\n          </div>\n        }\n      </ElAside>\n    );\n  },\n});\n\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","setMenuIndex","menu","index","path","href","defineComponent","name","components","ElMenu","ElAside","ElScrollbar","SidebarItem","props","width","type","String","default","menuList","Array","collapseIcon","collapse","Boolean","emits","setup","attrs","emit","route","useCustomRouter","defaultActive","ref","isShowCollapseContainer","computed","isVNode","watch","value","meta","active","deep","immediate","_slot","_createVNode","_mergeProps","map","menuIndex","onClick"],"mappings":"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"}