@vrx-arco/pro-layout/dist/ProLayout/components/Menu/Menu.js

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const webVue = require("@arco-design/web-vue");
const vueRouter = require("vue-router");
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const MenuItem = ({
  menu
}, {
  slots
}) => {
  var _a, _b, _c;
  const renderMenuIcon = () => {
    var _a2, _b2;
    return ((_a2 = slots.icon) == null ? void 0 : _a2.call(slots, menu)) || ((_b2 = menu.meta) == null ? void 0 : _b2.icon);
  };
  if ((_a = menu.meta) == null ? void 0 : _a.hidden) {
    return;
  }
  if (!menu.children) {
    return vue.createVNode(webVue.MenuItem, {
      "key": menu.name
    }, {
      default: () => {
        var _a2;
        return [((_a2 = menu.meta) == null ? void 0 : _a2.title) || ""];
      },
      icon: renderMenuIcon
    });
  }
  if ((_b = menu.meta) == null ? void 0 : _b.list) {
    const firstChild = menu.children[0].name;
    return vue.createVNode(webVue.MenuItem, {
      "key": firstChild
    }, {
      default: () => {
        var _a2;
        return [((_a2 = menu.meta) == null ? void 0 : _a2.title) || ""];
      },
      icon: renderMenuIcon
    });
  }
  return vue.createVNode(webVue.SubMenu, {
    "key": menu.name,
    "title": ((_c = menu.meta) == null ? void 0 : _c.title) || ""
  }, {
    default: () => {
      var _a2;
      return [(_a2 = menu.children) == null ? void 0 : _a2.map((item) => vue.createVNode(MenuItem, {
        "menu": item,
        "key": item.name
      }, {
        icon: slots.icon
      }))];
    },
    icon: renderMenuIcon
  });
};
const ProMenu = /* @__PURE__ */ vue.defineComponent({
  name: "vrx-arco-pro-menu",
  props: {
    menu: {
      type: Array,
      default: () => []
    }
  },
  slots: Object,
  setup: (props, {
    slots
  }) => {
    const menu = vue.toRef(props, "menu");
    const route = vueRouter.useRoute();
    const router = vueRouter.useRouter();
    const active = vue.computed(() => route.name);
    const selectedKeys = vue.ref([]);
    const openKeys = vue.ref([]);
    vue.watch(active, () => {
      openKeys.value = route.matched.map((item) => item.name);
      selectedKeys.value = [active.value];
    }, {
      immediate: true
    });
    const onMenuItemClick = (key) => {
      router.push({
        name: key
      });
    };
    return () => {
      let _slot;
      return vue.createVNode(webVue.Menu, vue.mergeProps({
        "selectedKeys": selectedKeys.value,
        "onUpdate:selectedKeys": ($event) => selectedKeys.value = $event,
        "openKeys": openKeys.value,
        "onUpdate:openKeys": ($event) => openKeys.value = $event
      }, {
        autoOpenSelected: true,
        accordion: true,
        autoScrollIntoView: true,
        onMenuItemClick
      }), _isSlot(_slot = menu.value.map((item) => vue.createVNode(MenuItem, {
        "menu": item,
        "key": item.name
      }, {
        icon: slots.icon
      }))) ? _slot : {
        default: () => [_slot]
      });
    };
  }
});
exports.ProMenu = ProMenu;