mt-ui-components-vue3/lib/ProLayout/SiderMenu/BaseMenu.js

玛果添实UI组件库(Vue3)

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.baseMenuProps = void 0;
var _vue = require("vue");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defaultSettings = require("../defaultSettings");
var _RouteContext = require("../RouteContext");
var _AIcon = _interopRequireDefault(require("../../AIcon"));
var _regular = require("../../util/regular");
var _Menu = _interopRequireDefault(require("../../Menu"));
var _iconsVue = require("@ant-design/icons-vue/lib/icons");
var baseMenuProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), {}, {
  prefixCls: {
    type: String,
    default: function _default() {
      return _RouteContext.defaultPrefixCls;
    }
  },
  locale: {
    type: [Function, Boolean],
    default: function _default(t) {
      return t;
    }
  },
  menuData: {
    type: Array,
    default: function _default() {
      return [];
    }
  },
  mode: {
    type: String,
    default: 'inline'
  },
  theme: {
    type: String,
    default: 'dark'
  },
  collapsed: {
    type: Boolean,
    default: function _default() {
      return false;
    }
  },
  openKeys: {
    type: Array,
    default: function _default() {
      return undefined;
    }
  },
  selectedKeys: {
    type: Array,
    default: function _default() {
      return undefined;
    }
  },
  menuProps: {
    type: Object,
    default: function _default() {
      return null;
    }
  },
  menuItemRender: {
    type: [Object, Function, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  subMenuItemRender: {
    type: [Object, Function, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  onClick: [Function, Object]
});
exports.baseMenuProps = baseMenuProps;
var AntdIconFont = (0, _iconsVue.createFromIconfontCN)({
  scriptUrl: ''
});
var LazyIcon = function LazyIcon(props) {
  var icon = props.icon,
    iconUrl = props.iconUrl,
    _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? _RouteContext.defaultPrefixCls : _props$prefixCls;
  if (!icon) return null;
  if ((0, _vue.isVNode)(icon)) {
    return icon;
  }
  if (typeof icon === 'string' && icon !== '') {
    if ((0, _regular.isUrl)(icon) || (0, _regular.isImg)(icon)) {
      return (0, _vue.createVNode)("img", {
        "src": icon,
        "alt": "icon",
        "class": "".concat(prefixCls, "-sider-menu-icon")
      }, null);
    }
    return iconUrl ? (0, _vue.createVNode)(AntdIconFont, {
      "type": icon
    }, null) : (0, _vue.createVNode)(_AIcon.default, {
      "type": icon
    }, null);
  }
};
var MenuUtil = /*#__PURE__*/(0, _createClass2.default)(function MenuUtil(_props, ctx) {
  var _this = this;
  (0, _classCallCheck2.default)(this, MenuUtil);
  (0, _defineProperty2.default)(this, "getNavMenuItems", function () {
    var menusData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
    return menusData.map(function (item) {
      return _this.getSubMenuOrItem(item);
    }).filter(function (item) {
      return item;
    });
  });
  (0, _defineProperty2.default)(this, "getSubMenuOrItem", function (item) {
    var _item$meta, _item$meta2, _item$meta7, _item$meta8;
    if (Array.isArray(item.children) && item.children.length > 0 && !(item !== null && item !== void 0 && (_item$meta = item.meta) !== null && _item$meta !== void 0 && _item$meta.hideInMenu) && !(item !== null && item !== void 0 && (_item$meta2 = item.meta) !== null && _item$meta2 !== void 0 && _item$meta2.hideChildrenInMenu)) {
      var _item$meta3, _item$meta4, _item$meta5, _item$meta6;
      if (_this.props.subMenuItemRender) {
        var subMenuItemRender = (0, _vue.withCtx)(_this.props.subMenuItemRender, _this.ctx);
        return subMenuItemRender({
          item: item,
          children: _this.getNavMenuItems(item.children)
        });
      }
      var _this$props = _this.props,
        prefixCls = _this$props.prefixCls,
        locale = _this$props.locale;
      var menuTitle = locale && locale((_item$meta3 = item.meta) === null || _item$meta3 === void 0 ? void 0 : _item$meta3.title) || ((_item$meta4 = item.meta) === null || _item$meta4 === void 0 ? void 0 : _item$meta4.title);
      var defaultTitle = (_item$meta5 = item.meta) !== null && _item$meta5 !== void 0 && _item$meta5.icon ? (0, _vue.createVNode)("span", {
        "class": "".concat(prefixCls, "-menu-item")
      }, [(0, _vue.createVNode)("span", {
        "class": "".concat(prefixCls, "-menu-item-title")
      }, [menuTitle])]) : (0, _vue.createVNode)("span", {
        "class": "".concat(prefixCls, "-menu-item")
      }, [menuTitle]);
      return (0, _vue.createVNode)(_Menu.default.SubMenu, {
        "title": defaultTitle,
        "key": item.path,
        "popupClassName": "".concat(prefixCls, "-menu-popup"),
        "icon": (0, _vue.createVNode)(LazyIcon, {
          "iconUrl": _this.props.iconfontUrl,
          "icon": (_item$meta6 = item.meta) === null || _item$meta6 === void 0 ? void 0 : _item$meta6.icon
        }, null)
      }, {
        default: function _default() {
          return [_this.getNavMenuItems(item.children)];
        }
      });
    }
    var menuItemRender = _this.props.menuItemRender && (0, _vue.withCtx)(_this.props.menuItemRender, _this.ctx);
    var _this$getMenuItem = _this.getMenuItem(item),
      _this$getMenuItem2 = (0, _slicedToArray2.default)(_this$getMenuItem, 2),
      title = _this$getMenuItem2[0],
      icon = _this$getMenuItem2[1];
    return menuItemRender && menuItemRender({
      item: item,
      title: title,
      icon: icon
    }) || (0, _vue.createVNode)(_Menu.default.Item, {
      "disabled": (_item$meta7 = item.meta) === null || _item$meta7 === void 0 ? void 0 : _item$meta7.disabled,
      "danger": (_item$meta8 = item.meta) === null || _item$meta8 === void 0 ? void 0 : _item$meta8.danger,
      "key": item.path
    }, {
      default: function _default() {
        return [title];
      }
    });
  });
  (0, _defineProperty2.default)(this, "getMenuItem", function (item) {
    var _item$meta9, _item$meta10, _item$meta11, _item$meta12, _item$meta13;
    var meta = (0, _objectSpread2.default)({}, item.meta);
    var target = meta.target || null;
    var hasUrl = (0, _regular.isUrl)(item.path);
    var CustomTag = target && 'a' || _this.RouterLink;
    var props = {
      to: (0, _objectSpread2.default)({
        name: item.name
      }, item.meta)
    };
    var attrs = hasUrl || target ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item.meta), {}, {
      href: item.path,
      target: target
    }) : {};
    var _this$props2 = _this.props,
      prefixCls = _this$props2.prefixCls,
      locale = _this$props2.locale;
    var icon = ((_item$meta9 = item.meta) === null || _item$meta9 === void 0 ? void 0 : _item$meta9.icon) && (0, _vue.createVNode)(LazyIcon, {
      "iconUrl": _this.props.iconfontUrl,
      "icon": (_item$meta10 = item.meta) === null || _item$meta10 === void 0 ? void 0 : _item$meta10.icon
    }, null) || undefined;
    var menuTitle = locale && locale((_item$meta11 = item.meta) === null || _item$meta11 === void 0 ? void 0 : _item$meta11.title) || ((_item$meta12 = item.meta) === null || _item$meta12 === void 0 ? void 0 : _item$meta12.title);
    var defaultTitle = (_item$meta13 = item.meta) !== null && _item$meta13 !== void 0 && _item$meta13.icon ? (0, _vue.createVNode)(CustomTag, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), props), {}, {
      "class": "".concat(prefixCls, "-menu-item")
    }), {
      default: function _default() {
        return [icon, (0, _vue.createVNode)("span", {
          "class": "".concat(prefixCls, "-menu-item-title")
        }, [menuTitle])];
      }
    }) : (0, _vue.createVNode)(CustomTag, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), props), {}, {
      "class": "".concat(prefixCls, "-menu-item")
    }), {
      default: function _default() {
        return [(0, _vue.createVNode)("span", null, [menuTitle])];
      }
    });
    return [defaultTitle, icon];
  });
  this.props = _props;
  this.ctx = ctx;
  this.RouterLink = (0, _vue.resolveComponent)('router-link');
});
var _default2 = (0, _vue.defineComponent)({
  name: 'BaseMenu',
  props: baseMenuProps,
  emits: ['update:openKeys', 'update:selectedKeys', 'click'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;
    var ctx = (0, _vue.getCurrentInstance)();
    var menuUtil = new MenuUtil(props, ctx);
    (0, _vue.watchEffect)(function () {
      if (props.iconfontUrl) {
        AntdIconFont = (0, _iconsVue.createFromIconfontCN)({
          scriptUrl: props.iconfontUrl
        });
      }
    });
    var handleOpenChange = function handleOpenChange(openKeys) {
      emit('update:openKeys', openKeys);
    };
    var handleSelect = function handleSelect(args) {
      // ignore https? link handle selectkeys
      if ((0, _regular.isUrl)(args.key)) {
        return;
      }
      emit('update:selectedKeys', args.selectedKeys);
    };
    var handleClick = function handleClick(args) {
      emit('click', args);
    };
    return function () {
      return (0, _vue.createVNode)(_Menu.default, (0, _objectSpread2.default)({
        "key": "Menu",
        "inlineIndent": 16,
        "mode": props.mode,
        "theme": props.theme,
        "openKeys": props.openKeys === false ? [] : props.openKeys,
        "selectedKeys": props.selectedKeys || [],
        "onOpenChange": handleOpenChange,
        "onSelect": handleSelect,
        "onClick": handleClick
      }, props.menuProps), {
        default: function _default() {
          return [menuUtil.getNavMenuItems(props.menuData)];
        }
      });
    };
  }
});
exports.default = _default2;