mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
274 lines (273 loc) • 11.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.siderMenuProps = exports.defaultRenderLogoAndTitle = exports.defaultRenderLogo = exports.defaultRenderCollapsedButton = exports.default = void 0;
var _vue = require("vue");
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _components = require("../../components");
var _BaseMenu = _interopRequireWildcard(require("./BaseMenu"));
var _defaultSettings = require("../defaultSettings");
var _vueTypes = _interopRequireDefault(require("ant-design-vue/lib/_util/vue-types"));
var _AIcon = _interopRequireDefault(require("../../AIcon"));
var _RouteContext = require("../RouteContext");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var siderMenuProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), _BaseMenu.baseMenuProps), {}, {
logo: {
type: [Object, String, Function],
default: function _default() {
return undefined;
}
},
logoStyle: {
type: Object,
default: function _default() {
return undefined;
}
},
siderWidth: _vueTypes.default.number.def(208),
headerHeight: _vueTypes.default.number.def(48),
collapsedWidth: _vueTypes.default.number.def(48),
menuHeaderRender: {
type: [Function, Object, Boolean],
default: function _default() {
return undefined;
}
},
menuContentRender: {
type: [Function, Object, Boolean],
default: function _default() {
return undefined;
}
},
menuExtraRender: {
type: [Function, Object, Boolean],
default: function _default() {
return undefined;
}
},
collapsedButtonRender: {
type: [Function, Object, Boolean],
default: function _default() {
return undefined;
}
},
breakpoint: {
type: [Object, Boolean],
default: function _default() {
return false;
}
},
splitMenus: _vueTypes.default.looseBool,
fixed: _vueTypes.default.looseBool,
hide: _vueTypes.default.looseBool,
matchMenuKeys: {
type: Array,
default: function _default() {
return [];
}
},
// events
onMenuHeaderClick: _vueTypes.default.func,
onMenuClick: _vueTypes.default.func,
onCollapse: {
type: Function
},
onOpenKeys: {
type: Function
},
onSelect: {
type: Function
}
});
exports.siderMenuProps = siderMenuProps;
var defaultRenderLogo = function defaultRenderLogo(logo, logoStyle) {
if (!logo) {
return null;
}
if (typeof logo === 'string') {
return (0, _vue.createVNode)("img", {
"src": logo,
"alt": "logo",
"style": logoStyle
}, null);
}
if (typeof logo === 'function') {
// @ts-ignore
return logo();
}
return logo;
};
exports.defaultRenderLogo = defaultRenderLogo;
var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props) {
var renderKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'menuHeaderRender';
var _props$logo = props.logo,
logo = _props$logo === void 0 ? 'http://demo.jetlinks.cn/static/logo.760eb65c.png' : _props$logo,
logoStyle = props.logoStyle,
title = props.title,
layout = props.layout;
var renderFunction = props[renderKey || ''];
if (layout === 'mix' && renderFunction === false) {
return null;
}
var logoDom = defaultRenderLogo(logo, logoStyle);
var titleDom = (0, _vue.createVNode)("h1", null, [title]);
if (renderKey === 'menuHeaderRender') {
return null;
}
// call menuHeaderRender
if (typeof renderFunction === 'function') {
// @ts-ignore
return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
}
if (Array.isArray(renderFunction)) {
return (0, _vue.createVNode)(_vue.Fragment, null, [renderFunction]);
}
return (0, _vue.createVNode)("a", null, [logoDom, props.collapsed ? null : titleDom]);
};
exports.defaultRenderLogoAndTitle = defaultRenderLogoAndTitle;
var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(collapsed) {
return collapsed ? (0, _vue.createVNode)(_AIcon.default, {
"type": 'MenuUnfoldOutlined'
}, null) : (0, _vue.createVNode)(_AIcon.default, {
"type": 'MenuFoldOutlined'
}, null);
};
exports.defaultRenderCollapsedButton = defaultRenderCollapsedButton;
var SiderMenu = function SiderMenu(props) {
var _ref2;
var collapsed = props.collapsed,
siderWidth = props.siderWidth,
breakpoint = props.breakpoint,
_props$collapsedWidth = props.collapsedWidth,
collapsedWidth = _props$collapsedWidth === void 0 ? 48 : _props$collapsedWidth,
_props$menuExtraRende = props.menuExtraRender,
menuExtraRender = _props$menuExtraRende === void 0 ? false : _props$menuExtraRende,
_props$menuContentRen = props.menuContentRender,
menuContentRender = _props$menuContentRen === void 0 ? false : _props$menuContentRen,
_props$collapsedButto = props.collapsedButtonRender,
collapsedButtonRender = _props$collapsedButto === void 0 ? defaultRenderCollapsedButton : _props$collapsedButto,
theme = props.theme;
var context = (0, _RouteContext.useRouteContext)();
var getPrefixCls = context.getPrefixCls;
var baseClassName = getPrefixCls('sider');
var hasSplitMenu = (0, _vue.computed)(function () {
return props.layout === 'mix' && props.splitMenus;
});
var sSideWidth = (0, _vue.computed)(function () {
return props.collapsed ? props.collapsedWidth : props.siderWidth;
});
var classNames = (0, _vue.computed)(function () {
var _ref;
return _ref = {}, (0, _defineProperty2.default)(_ref, baseClassName, true), (0, _defineProperty2.default)(_ref, "".concat(baseClassName, "-fixed"), context.fixSiderbar), (0, _defineProperty2.default)(_ref, "".concat(baseClassName, "-").concat(theme), true), (0, _defineProperty2.default)(_ref, "".concat(baseClassName, "-layout-").concat(props.layout), props.layout), _ref;
});
var handleSelect = function handleSelect($event) {
if (props.onSelect) {
if ((0, _vue.unref)(hasSplitMenu)) {
props.onSelect([context.selectedKeys[0]].concat((0, _toConsumableArray2.default)($event)));
return;
}
props.onSelect($event);
}
};
var headerDom = defaultRenderLogoAndTitle(props);
var extraDom = menuExtraRender && menuExtraRender(props);
if (hasSplitMenu.value && (0, _vue.unref)(context.flatMenuData).length === 0) {
return null;
}
var defaultMenuDom = (0, _vue.createVNode)(_BaseMenu.default, {
"prefixCls": getPrefixCls(),
"locale": props.locale || context.locale,
"theme": theme,
"mode": "inline",
"menuData": hasSplitMenu.value ? context.flatMenuData : context.menuData,
"collapsed": props.collapsed,
"openKeys": context.openKeys,
"selectedKeys": context.selectedKeys,
"menuItemRender": props.menuItemRender,
"subMenuItemRender": props.subMenuItemRender,
"iconfontUrl": props.iconfontUrl,
"onClick": props.onMenuClick,
"style": {
width: '100%'
},
"class": "".concat(baseClassName, "-menu"),
'onUpdate:openKeys': function onUpdateOpenKeys($event) {
return props.onOpenKeys && props.onOpenKeys($event);
},
'onUpdate:selectedKeys': handleSelect
}, null);
return (0, _vue.createVNode)(_vue.Fragment, null, [context.fixSiderbar && (0, _vue.createVNode)("div", {
"style": {
width: "".concat(sSideWidth.value, "px"),
overflow: 'hidden',
flex: "0 0 ".concat(sSideWidth.value, "px"),
maxWidth: "".concat(sSideWidth.value, "px"),
minWidth: "".concat(sSideWidth.value, "px"),
transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
}
}, null), (0, _vue.createVNode)(_components.LayoutSider, {
"collapsible": true,
"trigger": null,
"collapsed": collapsed,
"breakpoint": breakpoint || undefined,
"onCollapse": function onCollapse(collapse) {
var _props$onCollapse;
(_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 ? void 0 : _props$onCollapse.call(props, collapse);
},
"collapsedWidth": collapsedWidth,
"style": {
overflow: 'hidden',
paddingTop: "".concat(props.headerHeight, "px")
},
"width": siderWidth,
"theme": theme,
"class": classNames.value
}, {
default: function _default() {
return [headerDom && (0, _vue.createVNode)("div", {
"class": "".concat(baseClassName, "-logo"),
"onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
"id": "logo",
"style": props === null || props === void 0 ? void 0 : props.logoStyle
}, [headerDom]), extraDom && !props.collapsed && (0, _vue.createVNode)("div", {
"class": (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(baseClassName, "-extra"), true), (0, _defineProperty2.default)(_ref2, "".concat(baseClassName, "-extra-no-logo"), !headerDom), _ref2)
}, [extraDom]), (0, _vue.createVNode)("div", {
"style": "flex: 1; overflow: hidden auto;"
}, [menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom]), (0, _vue.createVNode)("div", {
"class": "".concat(baseClassName, "-links")
}, [collapsedButtonRender !== false ? (0, _vue.createVNode)(_components.Menu, {
"class": "".concat(baseClassName, "-link-menu"),
"inlineIndent": 16,
"theme": theme,
"selectedKeys": [],
"openKeys": [],
"mode": "inline",
"onClick": function onClick() {
if (props.onCollapse) {
props.onCollapse(!props.collapsed);
}
}
}, {
default: function _default() {
return [(0, _vue.createVNode)(_components.Menu.Item, {
"key": 'collapsed-button',
"class": "".concat(baseClassName, "-collapsed-button"),
"title": false
}, {
default: function _default() {
return [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender];
}
})];
}
}) : null])];
}
})]);
};
var _default2 = SiderMenu;
exports.default = _default2;