mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
319 lines • 10.2 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
var _excluded = ["title", "tabList", "tabActiveKey", "content", "pageHeaderRender", "header", "extraContent", "prefixedClassName", "prefixCls", "fixedHeader", "showBack"];
import { Fragment as _Fragment, createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
import { withInstall } from '../../util/type';
import { Affix, Spin, PageHeader, Tabs, Button } from '../../components';
import { defineComponent, unref, toRefs, computed } from 'vue';
import { pageHeaderProps } from "ant-design-vue/es/page-header";
import { useRouteContext } from '../RouteContext';
import { getSlotVNode } from '../util';
import "ant-design-vue/es/_util/type";
import './index.less';
export 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
};
export var pageContainerProps = _objectSpread(_objectSpread(_objectSpread({}, pageHeaderTabConfig), 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 {};
}
}
});
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 _createVNode("span", {
"class": item.class || "tab-pane-".concat(item.key)
}, [item.tab]);
};
if (tabList && tabList.length) {
return _createVNode(Tabs, _objectSpread({
"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 _createVNode(Tabs.TabPane, _objectSpread(_objectSpread({}, item), {}, {
"tab": tabPane(item),
"key": item.key
}), null);
})];
}
});
}
return null;
};
var renderPageHeader = function renderPageHeader(content, extraContent, prefixedClassName) {
if (!content && !extraContent) {
return null;
}
return _createVNode("div", {
"class": "".concat(prefixedClassName, "-detail")
}, [_createVNode("div", {
"class": "".concat(prefixedClassName, "-main")
}, [_createVNode("div", {
"class": "".concat(prefixedClassName, "-row")
}, [content && _createVNode("div", {
"class": "".concat(prefixedClassName, "-content")
}, [
// @ts-ignore
typeof content === 'function' && content() || content]), extraContent && _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 = _objectWithoutProperties(props, _excluded);
var value = useRouteContext();
if (pageHeaderRender === false) {
return null;
}
if (pageHeaderRender) {
return pageHeaderRender(_objectSpread({}, props));
}
var pageHeaderTitle = title;
if (!title && title !== false) {
pageHeaderTitle = value.title;
}
var unrefBreadcrumb = unref(value.breadcrumb || {});
var breadcrumb = props.breadcrumb || _objectSpread(_objectSpread({}, unrefBreadcrumb), {}, {
routes: unrefBreadcrumb.routes,
itemRender: unrefBreadcrumb.itemRender
});
var backProps = {};
if (showBack) {
// @ts-ignore
backProps.backIcon = _createVNode(Button, null, {
default: function _default() {
return [_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 _createVNode("div", {
"class": "".concat(prefixedClassName, "-wrap")
}, [_createVNode(PageHeader, _objectSpread(_objectSpread(_objectSpread({}, backProps), restProps), {}, {
"title": pageHeaderTitle,
"breadcrumb": breadcrumb,
"footer": renderFooter(_objectSpread(_objectSpread({}, restProps), {}, {
tabList: tabList,
tabActiveKey: tabActiveKey
})),
"prefixCls": prefixCls
}), {
default: function _default() {
return [header || renderPageHeader(content, extraContent, prefixedClassName)];
}
})]);
};
var PageContainer = defineComponent({
name: 'JPageContainer',
inheritAttrs: false,
props: pageContainerProps,
setup: function setup(props, _ref) {
var slots = _ref.slots,
attrs = _ref.attrs;
var _toRefs = toRefs(props),
loading = _toRefs.loading,
affixProps = _toRefs.affixProps,
ghost = _toRefs.ghost,
childrenFullHeight = _toRefs.childrenFullHeight;
var value = useRouteContext();
var getPrefixCls = value.getPrefixCls;
var prefixCls = props.prefixCls || getPrefixCls();
var prefixedClassName = computed(function () {
return "".concat(prefixCls, "-page-container");
});
var classNames = computed(function () {
var _ref2;
return _ref2 = {}, _defineProperty(_ref2, prefixedClassName.value, true), _defineProperty(_ref2, "".concat(prefixCls, "-page-container-ghost"), ghost.value), _ref2;
});
var headerDom = computed(function () {
// const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
var headerContent = getSlotVNode(slots, props, 'content');
var extra = getSlotVNode(slots, props, 'extra');
var extraContent = getSlotVNode(slots, props, 'extraContent');
var subTitle = getSlotVNode(slots, props, 'subTitle');
var title = getSlotVNode(slots, props, 'title');
// @ts-ignore
return _createVNode(ProPageHeader, _objectSpread(_objectSpread({}, 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 _createVNode(_Fragment, null, [pure ? _createVNode("div", {
"class": classNames.value
}, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]) : _createVNode("div", {
"class": classNames.value,
"style": _objectSpread({}, attrs.style || {})
}, [fixedHeader && headerDom.value ? _createVNode(Affix, _objectSpread(_objectSpread({}, affixProps.value), {}, {
"offsetTop": value.hasHeader && value.fixedHeader ? value.headerHeight : 0
}), {
default: function _default() {
return [headerDom.value];
}
}) : headerDom.value, _createVNode("div", {
"class": "".concat(prefixedClassName.value, "-grid-content")
}, [loading.value ? _createVNode(Spin, null, null) : slots.default ? _createVNode("div", null, [_createVNode("div", {
"class": "".concat(prefixedClassName.value, "-children-content ").concat(childrenFullHeight.value ? 'children-full-height' : ''),
"style": _objectSpread({}, props.contentStyle || {})
}, [slots.default()]), value.hasFooterToolbar && _createVNode("div", {
"style": {
height: 48,
marginTop: 24
}
}, null)]) : null])])]);
};
}
});
export default withInstall(PageContainer, 'JPageContainer');