mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
256 lines • 10.4 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
var _excluded = ["pure", "onCollapse", "onOpenKeys", "onSelect", "onMenuClick"];
import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
import SiderMenu, { siderMenuProps } from '../SiderMenu/SiderMenu';
import { computed, defineComponent, provide, reactive, watchEffect, toRefs } from 'vue';
import { defaultSettingProps } from '../defaultSettings';
import { baseHeaderProps } from '../TopHeader';
import Header, { headerViewProps } from './Header';
import useConfigInject from "ant-design-vue/es/config-provider/hooks/useConfigInject";
import { pick } from 'lodash-es';
import { defaultRouteContext, routeContextInjectKey } from '../RouteContext';
import { getMenuFirstChildren, getSlot } from '../util';
import { Layout, LayoutContent } from '../../components';
export var basicLayoutProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultSettingProps), siderMenuProps), baseHeaderProps), headerViewProps), {}, {
pure: Boolean,
loading: Boolean,
locale: {
type: [Function, Boolean],
default: function _default() {
return function (s) {
return s;
};
}
},
/**
* 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
*/
disableMobile: {
type: Boolean,
required: false
},
isChildrenLayout: {
type: Boolean,
required: false
},
/**
* 兼用 content 的 margin
*/
disableContentMargin: {
type: Boolean,
required: false
},
colSize: {
type: Number,
required: false
},
contentStyle: {
type: [String, Object],
default: function _default() {
return null;
}
},
breadcrumb: {
type: [Object, Function],
default: function _default() {
return null;
}
},
collapsedButtonRender: {
type: [Function, Object, Boolean],
default: function _default() {
return undefined;
}
},
breadcrumbRender: {
type: [Object, Function, Boolean],
default: function _default() {
return null;
}
},
headerContentRender: {
type: [Function, Object, Boolean],
default: function _default() {
return undefined;
}
},
headerRender: {
type: [Object, Function, Boolean],
default: function _default() {
return undefined;
}
}
});
export default defineComponent({
name: 'JProLayout',
inheritAttrs: false,
props: basicLayoutProps,
emits: ['update:collapsed', 'update:open-keys', 'update:selected-keys', 'collapse', 'openKeys', 'select', 'menuHeaderClick', 'menuClick', 'backClick'],
setup: function setup(props, _ref) {
var emit = _ref.emit,
attrs = _ref.attrs,
slots = _ref.slots;
var _useConfigInject = useConfigInject('layout', {}),
prefixCls = _useConfigInject.prefixCls;
var isTop = computed(function () {
return props.layout === 'top';
});
var hasSide = computed(function () {
return props.layout === 'mix' || props.layout === 'side' || false;
});
var hasSplitMenu = computed(function () {
return props.layout === 'mix' && props.splitMenus;
});
var hasFlatMenu = computed(function () {
return hasSide.value && hasSplitMenu.value;
});
var siderWidth = computed(function () {
return props.collapsed ? props.collapsedWidth : props.siderWidth;
});
var onCollapse = function onCollapse(collapsed) {
emit('update:collapsed', collapsed);
emit('collapse', collapsed);
};
var onOpenKeys = function onOpenKeys(openKeys) {
emit('update:open-keys', openKeys);
emit('openKeys', openKeys);
};
var onSelect = function onSelect(selectedKeys) {
emit('update:selected-keys', selectedKeys);
emit('select', selectedKeys);
};
var onMenuHeaderClick = function onMenuHeaderClick(e) {
emit('menuHeaderClick', e);
};
var onMenuClick = function onMenuClick(args) {
emit('menuClick', args);
};
var onBack = function onBack(args) {
emit('backClick', args);
};
var baseClassName = computed(function () {
return "".concat(props.prefixCls, "-basicLayout");
});
var className = computed(function () {
var _ref2;
return _ref2 = {}, _defineProperty(_ref2, baseClassName.value, true), _defineProperty(_ref2, "".concat(baseClassName.value, "-top-menu"), isTop.value), _defineProperty(_ref2, "".concat(baseClassName.value, "-is-children"), props.isChildrenLayout), _defineProperty(_ref2, "".concat(baseClassName.value, "-fix-siderbar"), props.fixSiderbar), _defineProperty(_ref2, "".concat(baseClassName.value, "-").concat(props.layout), props.layout), _ref2;
});
var genLayoutStyle = reactive({
position: 'relative'
});
watchEffect(function () {
if (props.isChildrenLayout || props.contentStyle && props.contentStyle.minHeight) {
genLayoutStyle.minHeight = 0;
}
});
var headerRender = function headerRender(p, matchMenuKeys) {
if (p.headerRender === false || p.pure) {
return null;
}
return _createVNode(Header, _objectSpread(_objectSpread({}, p), {}, {
"matchMenuKeys": matchMenuKeys || []
}), null);
};
var breadcrumb = computed(function () {
return _objectSpread(_objectSpread({}, props.breadcrumb), {}, {
itemRender: getSlot(slots, props, 'breadcrumbRender')
});
});
var flatMenuData = computed(function () {
return hasFlatMenu.value && props.selectedKeys && getMenuFirstChildren(props.menuData, props.selectedKeys[0]) || [];
});
var routeContext = reactive(_objectSpread(_objectSpread(_objectSpread({}, defaultRouteContext), pick(toRefs(props), ['pure', 'locale', 'menuData', 'openKeys', 'selectedKeys', 'contentWidth', 'disableMobile', 'fixSiderbar', 'fixedHeader', 'headerHeight'])), {}, {
siderWidth: siderWidth,
breadcrumb: breadcrumb,
flatMenuData: flatMenuData,
hasSide: hasSide,
back: onBack,
hasHeader: true,
flatMenu: hasFlatMenu
}));
provide(routeContextInjectKey, routeContext);
return function () {
var _slots$default, _slots$default2;
var pure = props.pure,
propsOnCollapse = props.onCollapse,
propsOnOpenKeys = props.onOpenKeys,
propsOnSelect = props.onSelect,
propsOnMenuClick = props.onMenuClick,
restProps = _objectWithoutProperties(props, _excluded);
var collapsedButtonRender = getSlot(slots, props, 'collapsedButtonRender');
var headerContentRender = getSlot(slots, props, 'headerContentRender');
var rightContentRender = getSlot(slots, props, 'rightContentRender');
var customHeaderRender = getSlot(slots, props, 'headerRender');
// menu
var menuHeaderRender = getSlot(slots, props, 'menuHeaderRender');
var menuExtraRender = getSlot(slots, props, 'menuExtraRender');
var menuContentRender = getSlot(slots, props, 'menuContentRender');
var menuItemRender = getSlot(slots, props, 'menuItemRender');
var subMenuItemRender = getSlot(slots, props, 'subMenuItemRender');
var headerDom = computed(function () {
return headerRender(_objectSpread(_objectSpread({}, props), {}, {
menuItemRender: menuItemRender,
subMenuItemRender: subMenuItemRender,
hasSiderMenu: !isTop.value,
menuData: props.menuData,
onCollapse: onCollapse,
onOpenKeys: onOpenKeys,
onSelect: onSelect,
onMenuHeaderClick: onMenuHeaderClick,
rightContentRender: rightContentRender,
collapsedButtonRender: collapsedButtonRender,
headerTitleRender: menuHeaderRender,
menuExtraRender: menuExtraRender,
menuContentRender: menuContentRender,
headerContentRender: headerContentRender,
headerRender: customHeaderRender,
theme: (props.theme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light'
}), props.matchMenuKeys);
});
routeContext.hasHeader = !!headerDom.value;
var contentClassName = computed(function () {
var _ref3;
return _ref3 = {}, _defineProperty(_ref3, "".concat(baseClassName.value, "-content"), true), _defineProperty(_ref3, "".concat(baseClassName.value, "-has-header"), headerDom), _defineProperty(_ref3, "".concat(baseClassName.value, "-content-disable-margin"), props.disableContentMargin), _ref3;
});
return _createVNode(_Fragment, null, [pure ? (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots) : _createVNode("div", {
"class": className.value
}, [_createVNode(Layout, {
"style": _objectSpread({
minHeight: '100vh'
}, attrs.style || {})
}, {
default: function _default() {
return [headerDom.value, _createVNode(Layout, {
"style": genLayoutStyle,
"class": prefixCls.value
}, {
default: function _default() {
return [!isTop.value && _createVNode(SiderMenu, _objectSpread(_objectSpread({}, restProps), {}, {
"menuHeaderRender": menuHeaderRender,
"menuExtraRender": menuExtraRender,
"menuContentRender": menuContentRender,
"menuItemRender": menuItemRender,
"subMenuItemRender": subMenuItemRender,
"collapsedButtonRender": collapsedButtonRender,
"onCollapse": onCollapse,
"onSelect": onSelect,
"onOpenKeys": onOpenKeys,
"onMenuClick": onMenuClick
}), null), _createVNode(Layout, null, {
default: function _default() {
return [_createVNode(LayoutContent, null, {
default: function _default() {
return [(_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)];
}
})];
}
})];
}
})];
}
})])]);
};
}
});