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

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

import { defineComponent, toRef, computed, ref, watch, createVNode, mergeProps, isVNode } from "vue";
import { Menu, MenuItem as MenuItem$1, SubMenu } from "@arco-design/web-vue";
import { useRoute, useRouter } from "vue-router";
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !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 createVNode(MenuItem$1, {
      "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 createVNode(MenuItem$1, {
      "key": firstChild
    }, {
      default: () => {
        var _a2;
        return [((_a2 = menu.meta) == null ? void 0 : _a2.title) || ""];
      },
      icon: renderMenuIcon
    });
  }
  return createVNode(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) => createVNode(MenuItem, {
        "menu": item,
        "key": item.name
      }, {
        icon: slots.icon
      }))];
    },
    icon: renderMenuIcon
  });
};
const ProMenu = /* @__PURE__ */ defineComponent({
  name: "vrx-arco-pro-menu",
  props: {
    menu: {
      type: Array,
      default: () => []
    }
  },
  slots: Object,
  setup: (props, {
    slots
  }) => {
    const menu = toRef(props, "menu");
    const route = useRoute();
    const router = useRouter();
    const active = computed(() => route.name);
    const selectedKeys = ref([]);
    const openKeys = ref([]);
    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 createVNode(Menu, 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) => createVNode(MenuItem, {
        "menu": item,
        "key": item.name
      }, {
        icon: slots.icon
      }))) ? _slot : {
        default: () => [_slot]
      });
    };
  }
});
export {
  ProMenu
};