2025-04-02 21:57:33 +08:00

173 lines
6.2 KiB
JavaScript

import _mergeJSXProps from "babel-helper-vue-jsx-merge-props";
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys.push.apply(ownKeys, Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import './BasicLayout.less';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout';
import { ContainerQuery } from 'vue-container-query';
import { SiderMenuWrapper, GlobalFooter } from './components';
import { contentWidthCheck, getComponentFromProp, isFun } from './utils/util';
import { SiderMenuProps } from './components/SiderMenu';
import HeaderView, { HeaderViewProps } from './Header';
import WrapContent from './WrapContent';
import ConfigProvider from './components/ConfigProvider';
import PageHeaderWrapper from './components/PageHeaderWrapper';
export var BasicLayoutProps = _objectSpread({}, SiderMenuProps, HeaderViewProps, {
contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
// contentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('Fluid'),
locale: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('en-US'),
breadcrumbRender: PropTypes.func,
disableMobile: PropTypes.bool.def(false),
mediaQuery: PropTypes.object.def({}),
handleMediaQuery: PropTypes.func,
footerRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(undefined)
});
var MediaQueryEnum = {
'screen-xs': {
maxWidth: 575
},
'screen-sm': {
minWidth: 576,
maxWidth: 767
},
'screen-md': {
minWidth: 768,
maxWidth: 991
},
'screen-lg': {
minWidth: 992,
maxWidth: 1199
},
'screen-xl': {
minWidth: 1200,
maxWidth: 1599
},
'screen-xxl': {
minWidth: 1600
}
};
var getPaddingLeft = function getPaddingLeft(hasLeftPadding) {
var collapsed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
var collapsedWidth = arguments.length > 2 ? arguments[2] : undefined;
var siderWidth = arguments.length > 3 ? arguments[3] : undefined;
if (hasLeftPadding) {
return collapsed ? collapsedWidth ? collapsedWidth : 80 : siderWidth;
}
return 0;
};
var headerRender = function headerRender(h, props) {
if (props.headerRender === false) {
return null;
}
return h(HeaderView, {
props: props
});
};
var defaultI18nRender = function defaultI18nRender(key) {
return key;
};
var BasicLayout = {
name: 'BasicLayout',
functional: true,
props: BasicLayoutProps,
render: function render(h, content) {
var props = content.props,
children = content.children,
listeners = content.listeners;
var layout = props.layout,
isMobile = props.isMobile,
collapsed = props.collapsed,
collapsedWidth = props.collapsedWidth,
mediaQuery = props.mediaQuery,
handleMediaQuery = props.handleMediaQuery,
handleCollapse = props.handleCollapse,
siderWidth = props.siderWidth,
fixSiderbar = props.fixSiderbar,
_props$i18nRender = props.i18nRender,
i18nRender = _props$i18nRender === void 0 ? defaultI18nRender : _props$i18nRender;
var footerRender = getComponentFromProp(content, 'footerRender');
var rightContentRender = getComponentFromProp(content, 'rightContentRender');
var collapsedButtonRender = getComponentFromProp(content, 'collapsedButtonRender');
var menuHeaderRender = getComponentFromProp(content, 'menuHeaderRender');
var breadcrumbRender = getComponentFromProp(content, 'breadcrumbRender');
var headerContentRender = getComponentFromProp(content, 'headerContentRender');
var menuRender = getComponentFromProp(content, 'menuRender');
var isTopMenu = layout === 'topmenu';
var hasSiderMenu = !isTopMenu; // If it is a fix menu, calculate padding
// don't need padding in phone mode
var hasLeftPadding = fixSiderbar && !isTopMenu && !isMobile;
var cdProps = _objectSpread({}, props, {
hasSiderMenu: hasSiderMenu,
footerRender: footerRender,
menuHeaderRender: menuHeaderRender,
rightContentRender: rightContentRender,
collapsedButtonRender: collapsedButtonRender,
breadcrumbRender: breadcrumbRender,
headerContentRender: headerContentRender,
menuRender: menuRender
}, listeners);
return h(ConfigProvider, {
attrs: {
i18nRender: i18nRender,
contentWidth: props.contentWidth,
breadcrumbRender: breadcrumbRender
}
}, [h(ContainerQuery, {
attrs: {
query: MediaQueryEnum
},
on: {
"change": handleMediaQuery
}
}, [h(Layout, {
"class": _objectSpread({
'ant-pro-basicLayout': true,
'ant-pro-topmenu': isTopMenu
}, mediaQuery)
}, [h(SiderMenuWrapper, _mergeJSXProps([{
props: cdProps
}, {
attrs: {
collapsed: collapsed
},
on: {
"collapse": handleCollapse
}
}])), h(Layout, {
"class": [layout],
style: {
paddingLeft: hasSiderMenu ? "".concat(getPaddingLeft(!!hasLeftPadding, collapsed, collapsedWidth, siderWidth), "px") : undefined,
minHeight: '100vh'
}
}, [headerRender(h, _objectSpread({}, cdProps, {
mode: 'horizontal'
})), h(WrapContent, {
"class": "ant-pro-basicLayout-content",
attrs: {
contentWidth: props.contentWidth
}
}, [children]), footerRender !== false && h(Layout.Footer, [isFun(footerRender) && footerRender(h) || footerRender]) || null])])])]);
}
};
BasicLayout.install = function (Vue) {
Vue.component(PageHeaderWrapper.name, PageHeaderWrapper);
Vue.component('PageContainer', PageHeaderWrapper);
Vue.component('ProLayout', BasicLayout);
};
export default BasicLayout;