mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
262 lines • 9.45 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { createVNode as _createVNode } from "vue";
import { defaultSettingProps } from '../defaultSettings';
import { defineComponent, getCurrentInstance, isVNode, resolveComponent, watchEffect, withCtx } from 'vue';
import { defaultPrefixCls } from '../RouteContext';
import IconFont from '../../AIcon';
import { isImg, isUrl } from '../../util/regular';
import Menu from '../../Menu';
import { createFromIconfontCN } from '@ant-design/icons-vue';
export var baseMenuProps = _objectSpread(_objectSpread({}, defaultSettingProps), {}, {
prefixCls: {
type: String,
default: function _default() {
return 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]
});
var AntdIconFont = createFromIconfontCN({
scriptUrl: ''
});
var LazyIcon = function LazyIcon(props) {
var icon = props.icon,
iconUrl = props.iconUrl,
_props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? defaultPrefixCls : _props$prefixCls;
if (!icon) return null;
if (isVNode(icon)) {
return icon;
}
if (typeof icon === 'string' && icon !== '') {
if (isUrl(icon) || isImg(icon)) {
return _createVNode("img", {
"src": icon,
"alt": "icon",
"class": "".concat(prefixCls, "-sider-menu-icon")
}, null);
}
return iconUrl ? _createVNode(AntdIconFont, {
"type": icon
}, null) : _createVNode(IconFont, {
"type": icon
}, null);
}
};
var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(_props, ctx) {
var _this = this;
_classCallCheck(this, MenuUtil);
_defineProperty(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;
});
});
_defineProperty(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 = 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 ? _createVNode("span", {
"class": "".concat(prefixCls, "-menu-item")
}, [_createVNode("span", {
"class": "".concat(prefixCls, "-menu-item-title")
}, [menuTitle])]) : _createVNode("span", {
"class": "".concat(prefixCls, "-menu-item")
}, [menuTitle]);
return _createVNode(Menu.SubMenu, {
"title": defaultTitle,
"key": item.path,
"popupClassName": "".concat(prefixCls, "-menu-popup"),
"icon": _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 && withCtx(_this.props.menuItemRender, _this.ctx);
var _this$getMenuItem = _this.getMenuItem(item),
_this$getMenuItem2 = _slicedToArray(_this$getMenuItem, 2),
title = _this$getMenuItem2[0],
icon = _this$getMenuItem2[1];
return menuItemRender && menuItemRender({
item: item,
title: title,
icon: icon
}) || _createVNode(Menu.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];
}
});
});
_defineProperty(this, "getMenuItem", function (item) {
var _item$meta9, _item$meta10, _item$meta11, _item$meta12, _item$meta13;
var meta = _objectSpread({}, item.meta);
var target = meta.target || null;
var hasUrl = isUrl(item.path);
var CustomTag = target && 'a' || _this.RouterLink;
var props = {
to: _objectSpread({
name: item.name
}, item.meta)
};
var attrs = hasUrl || target ? _objectSpread(_objectSpread({}, 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) && _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 ? _createVNode(CustomTag, _objectSpread(_objectSpread(_objectSpread({}, attrs), props), {}, {
"class": "".concat(prefixCls, "-menu-item")
}), {
default: function _default() {
return [icon, _createVNode("span", {
"class": "".concat(prefixCls, "-menu-item-title")
}, [menuTitle])];
}
}) : _createVNode(CustomTag, _objectSpread(_objectSpread(_objectSpread({}, attrs), props), {}, {
"class": "".concat(prefixCls, "-menu-item")
}), {
default: function _default() {
return [_createVNode("span", null, [menuTitle])];
}
});
return [defaultTitle, icon];
});
this.props = _props;
this.ctx = ctx;
this.RouterLink = resolveComponent('router-link');
});
export default defineComponent({
name: 'BaseMenu',
props: baseMenuProps,
emits: ['update:openKeys', 'update:selectedKeys', 'click'],
setup: function setup(props, _ref) {
var emit = _ref.emit;
var ctx = getCurrentInstance();
var menuUtil = new MenuUtil(props, ctx);
watchEffect(function () {
if (props.iconfontUrl) {
AntdIconFont = createFromIconfontCN({
scriptUrl: props.iconfontUrl
});
}
});
var handleOpenChange = function handleOpenChange(openKeys) {
emit('update:openKeys', openKeys);
};
var handleSelect = function handleSelect(args) {
// ignore https? link handle selectkeys
if (isUrl(args.key)) {
return;
}
emit('update:selectedKeys', args.selectedKeys);
};
var handleClick = function handleClick(args) {
emit('click', args);
};
return function () {
return _createVNode(Menu, _objectSpread({
"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)];
}
});
};
}
});