mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
328 lines (327 loc) • 11.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.pageHeaderTabConfig = exports.pageContainerProps = exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _type = require("../../util/type");
var _components = require("../../components");
var _pageHeader = require("ant-design-vue/lib/page-header");
var _RouteContext = require("../RouteContext");
var _util = require("../util");
require("ant-design-vue/lib/_util/type");
require("./index.less");
var _excluded = ["title", "tabList", "tabActiveKey", "content", "pageHeaderRender", "header", "extraContent", "prefixedClassName", "prefixCls", "fixedHeader", "showBack"];
var pageHeaderTabConfig = {
/**
* @name tabs 的列表
*/
tabList: {
type: [Object, Function, Array],
default: function _default() {
return undefined;
}
},
/**
* @name 当前选中 tab 的 key
*/
tabActiveKey: String,
/**
* @name tab 上多余的区域
*/
tabBarExtraContent: {
type: [Object, Function],
default: function _default() {
return undefined;
}
},
/**
* @name tabs 的其他配置
*/
tabProps: {
type: Object,
default: function _default() {
return undefined;
}
},
/**
* @name 固定 PageHeader 到页面顶部
*/
fixedHeader: Boolean,
// events
onTabChange: Function,
pure: Boolean
};
exports.pageHeaderTabConfig = pageHeaderTabConfig;
var pageContainerProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageHeaderTabConfig), _pageHeader.pageHeaderProps), {}, {
prefixCls: {
type: String,
default: 'ant-pro'
},
title: {
type: [Object, String, Boolean, Function],
default: function _default() {
return null;
}
},
subTitle: {
type: [Object, String, Boolean, Function],
default: function _default() {
return null;
}
},
content: {
type: [Object, String, Boolean, Function],
default: function _default() {
return null;
}
},
extra: {
type: [Object, String, Boolean, Function],
default: function _default() {
return null;
}
},
extraContent: {
type: [Object, String, Boolean, Function],
default: function _default() {
return null;
}
},
header: {
type: [Object, String, Boolean, Function],
default: function _default() {
return null;
}
},
pageHeaderRender: {
type: [Object, Function, Boolean],
default: function _default() {
return undefined;
}
},
affixProps: {
type: [Object, Function]
},
ghost: {
type: Boolean,
default: function _default() {
return false;
}
},
loading: {
type: Boolean,
default: function _default() {
return undefined;
}
},
childrenFullHeight: {
type: Boolean,
default: function _default() {
return true;
}
},
pure: {
type: Boolean,
default: false
},
showBack: {
type: Boolean,
default: false
},
contentStyle: {
type: Object,
default: function _default() {
return {};
}
}
});
exports.pageContainerProps = pageContainerProps;
var renderFooter = function renderFooter(props) {
var tabList = props.tabList,
tabActiveKey = props.tabActiveKey,
onTabChange = props.onTabChange,
tabBarExtraContent = props.tabBarExtraContent,
tabProps = props.tabProps;
var tabPane = function tabPane(item) {
return (0, _vue.createVNode)("span", {
"class": item.class || "tab-pane-".concat(item.key)
}, [item.tab]);
};
if (tabList && tabList.length) {
return (0, _vue.createVNode)(_components.Tabs, (0, _objectSpread2.default)({
"class": "page-container-tabs",
"activeKey": tabActiveKey,
"onChange": function onChange(key) {
if (onTabChange) {
onTabChange(key);
}
},
"tabBarExtraContent": tabBarExtraContent
}, tabProps), {
default: function _default() {
return [tabList.map(function (item) {
return (0, _vue.createVNode)(_components.Tabs.TabPane, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
"tab": tabPane(item),
"key": item.key
}), null);
})];
}
});
}
return null;
};
var renderPageHeader = function renderPageHeader(content, extraContent, prefixedClassName) {
if (!content && !extraContent) {
return null;
}
return (0, _vue.createVNode)("div", {
"class": "".concat(prefixedClassName, "-detail")
}, [(0, _vue.createVNode)("div", {
"class": "".concat(prefixedClassName, "-main")
}, [(0, _vue.createVNode)("div", {
"class": "".concat(prefixedClassName, "-row")
}, [content && (0, _vue.createVNode)("div", {
"class": "".concat(prefixedClassName, "-content")
}, [
// @ts-ignore
typeof content === 'function' && content() || content]), extraContent && (0, _vue.createVNode)("div", {
"class": "".concat(prefixedClassName, "-extraContent")
}, [
// @ts-ignore
typeof extraContent === 'function' && extraContent() || extraContent])])])]);
};
var ProPageHeader = function ProPageHeader(props) {
var title = props.title,
tabList = props.tabList,
tabActiveKey = props.tabActiveKey,
content = props.content,
pageHeaderRender = props.pageHeaderRender,
header = props.header,
extraContent = props.extraContent,
prefixedClassName = props.prefixedClassName,
prefixCls = props.prefixCls,
_ = props.fixedHeader,
showBack = props.showBack,
restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
var value = (0, _RouteContext.useRouteContext)();
if (pageHeaderRender === false) {
return null;
}
if (pageHeaderRender) {
return pageHeaderRender((0, _objectSpread2.default)({}, props));
}
var pageHeaderTitle = title;
if (!title && title !== false) {
pageHeaderTitle = value.title;
}
var unrefBreadcrumb = (0, _vue.unref)(value.breadcrumb || {});
var breadcrumb = props.breadcrumb || (0, _objectSpread2.default)((0, _objectSpread2.default)({}, unrefBreadcrumb), {}, {
routes: unrefBreadcrumb.routes,
itemRender: unrefBreadcrumb.itemRender
});
var backProps = {};
if (showBack) {
// @ts-ignore
backProps.backIcon = (0, _vue.createVNode)(_components.Button, null, {
default: function _default() {
return [(0, _vue.createTextVNode)("\u8FD4\u56DE")];
}
});
backProps.onBack = function () {
var _value$back;
(_value$back = value.back) === null || _value$back === void 0 ? void 0 : _value$back.call(value);
};
}
return (0, _vue.createVNode)("div", {
"class": "".concat(prefixedClassName, "-wrap")
}, [(0, _vue.createVNode)(_components.PageHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, backProps), restProps), {}, {
"title": pageHeaderTitle,
"breadcrumb": breadcrumb,
"footer": renderFooter((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
tabList: tabList,
tabActiveKey: tabActiveKey
})),
"prefixCls": prefixCls
}), {
default: function _default() {
return [header || renderPageHeader(content, extraContent, prefixedClassName)];
}
})]);
};
var PageContainer = (0, _vue.defineComponent)({
name: 'JPageContainer',
inheritAttrs: false,
props: pageContainerProps,
setup: function setup(props, _ref) {
var slots = _ref.slots,
attrs = _ref.attrs;
var _toRefs = (0, _vue.toRefs)(props),
loading = _toRefs.loading,
affixProps = _toRefs.affixProps,
ghost = _toRefs.ghost,
childrenFullHeight = _toRefs.childrenFullHeight;
var value = (0, _RouteContext.useRouteContext)();
var getPrefixCls = value.getPrefixCls;
var prefixCls = props.prefixCls || getPrefixCls();
var prefixedClassName = (0, _vue.computed)(function () {
return "".concat(prefixCls, "-page-container");
});
var classNames = (0, _vue.computed)(function () {
var _ref2;
return _ref2 = {}, (0, _defineProperty2.default)(_ref2, prefixedClassName.value, true), (0, _defineProperty2.default)(_ref2, "".concat(prefixCls, "-page-container-ghost"), ghost.value), _ref2;
});
var headerDom = (0, _vue.computed)(function () {
// const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
var headerContent = (0, _util.getSlotVNode)(slots, props, 'content');
var extra = (0, _util.getSlotVNode)(slots, props, 'extra');
var extraContent = (0, _util.getSlotVNode)(slots, props, 'extraContent');
var subTitle = (0, _util.getSlotVNode)(slots, props, 'subTitle');
var title = (0, _util.getSlotVNode)(slots, props, 'title');
// @ts-ignore
return (0, _vue.createVNode)(ProPageHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
"prefixCls": undefined,
"prefixedClassName": prefixedClassName.value,
"ghost": ghost.value,
"title": title,
"subTitle": subTitle,
"content": headerContent,
"extra": extra,
"extraContent": extraContent
}), null);
});
return function () {
var _slots$default;
var fixedHeader = props.fixedHeader,
pure = props.pure;
return (0, _vue.createVNode)(_vue.Fragment, null, [pure ? (0, _vue.createVNode)("div", {
"class": classNames.value
}, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]) : (0, _vue.createVNode)("div", {
"class": classNames.value,
"style": (0, _objectSpread2.default)({}, attrs.style || {})
}, [fixedHeader && headerDom.value ? (0, _vue.createVNode)(_components.Affix, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, affixProps.value), {}, {
"offsetTop": value.hasHeader && value.fixedHeader ? value.headerHeight : 0
}), {
default: function _default() {
return [headerDom.value];
}
}) : headerDom.value, (0, _vue.createVNode)("div", {
"class": "".concat(prefixedClassName.value, "-grid-content")
}, [loading.value ? (0, _vue.createVNode)(_components.Spin, null, null) : slots.default ? (0, _vue.createVNode)("div", null, [(0, _vue.createVNode)("div", {
"class": "".concat(prefixedClassName.value, "-children-content ").concat(childrenFullHeight.value ? 'children-full-height' : ''),
"style": (0, _objectSpread2.default)({}, props.contentStyle || {})
}, [slots.default()]), value.hasFooterToolbar && (0, _vue.createVNode)("div", {
"style": {
height: 48,
marginTop: 24
}
}, null)]) : null])])]);
};
}
});
var _default2 = (0, _type.withInstall)(PageContainer, 'JPageContainer');
exports.default = _default2;