123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222 |
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
- import _typeof from "@babel/runtime/helpers/esm/typeof";
- import { createVNode as _createVNode } from "vue";
- import { onBeforeMount, ref, defineComponent, onBeforeUnmount, provide, toRef, computed } from 'vue';
- import warning from '../_util/warning';
- import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
- import Row from './Row';
- import PropTypes from '../_util/vue-types';
- import { cloneElement } from '../_util/vnode';
- import { flattenChildren } from '../_util/props-util';
- import useConfigInject from '../_util/hooks/useConfigInject';
- export var DescriptionsItemProps = {
- prefixCls: String,
- label: PropTypes.any,
- span: Number
- };
- var descriptionsItemProp = function descriptionsItemProp() {
- return {
- prefixCls: String,
- label: PropTypes.any,
- labelStyle: {
- type: Object,
- default: undefined
- },
- contentStyle: {
- type: Object,
- default: undefined
- },
- span: {
- type: Number,
- default: 1
- }
- };
- };
- export var DescriptionsItem = defineComponent({
- compatConfig: {
- MODE: 3
- },
- name: 'ADescriptionsItem',
- props: descriptionsItemProp(),
- slots: ['label'],
- setup: function setup(_, _ref) {
- var slots = _ref.slots;
- return function () {
- var _slots$default;
- return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
- };
- }
- });
- var DEFAULT_COLUMN_MAP = {
- xxxl: 3,
- xxl: 3,
- xl: 3,
- lg: 3,
- md: 3,
- sm: 2,
- xs: 1
- };
- function getColumn(column, screens) {
- if (typeof column === 'number') {
- return column;
- }
- if (_typeof(column) === 'object') {
- for (var i = 0; i < responsiveArray.length; i++) {
- var breakpoint = responsiveArray[i];
- if (screens[breakpoint] && column[breakpoint] !== undefined) {
- return column[breakpoint] || DEFAULT_COLUMN_MAP[breakpoint];
- }
- }
- }
- return 3;
- }
- function getFilledItem(node, span, rowRestCol) {
- var clone = node;
- if (span === undefined || span > rowRestCol) {
- clone = cloneElement(node, {
- span: rowRestCol
- });
- warning(span === undefined, 'Descriptions', 'Sum of column `span` in a line not match `column` of Descriptions.');
- }
- return clone;
- }
- function getRows(children, column) {
- var childNodes = flattenChildren(children);
- var rows = [];
- var tmpRow = [];
- var rowRestCol = column;
- childNodes.forEach(function (node, index) {
- var _node$props;
- var span = (_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.span;
- var mergedSpan = span || 1;
- // Additional handle last one
- if (index === childNodes.length - 1) {
- tmpRow.push(getFilledItem(node, span, rowRestCol));
- rows.push(tmpRow);
- return;
- }
- if (mergedSpan < rowRestCol) {
- rowRestCol -= mergedSpan;
- tmpRow.push(node);
- } else {
- tmpRow.push(getFilledItem(node, mergedSpan, rowRestCol));
- rows.push(tmpRow);
- rowRestCol = column;
- tmpRow = [];
- }
- });
- return rows;
- }
- export var descriptionsProps = function descriptionsProps() {
- return {
- prefixCls: String,
- bordered: {
- type: Boolean,
- default: undefined
- },
- size: {
- type: String,
- default: 'default'
- },
- title: PropTypes.any,
- extra: PropTypes.any,
- column: {
- type: [Number, Object],
- default: function _default() {
- return DEFAULT_COLUMN_MAP;
- }
- },
- layout: String,
- colon: {
- type: Boolean,
- default: undefined
- },
- labelStyle: {
- type: Object,
- default: undefined
- },
- contentStyle: {
- type: Object,
- default: undefined
- }
- };
- };
- export var descriptionsContext = Symbol('descriptionsContext');
- var Descriptions = defineComponent({
- compatConfig: {
- MODE: 3
- },
- name: 'ADescriptions',
- props: descriptionsProps(),
- slots: ['title', 'extra'],
- Item: DescriptionsItem,
- setup: function setup(props, _ref2) {
- var slots = _ref2.slots;
- var _useConfigInject = useConfigInject('descriptions', props),
- prefixCls = _useConfigInject.prefixCls,
- direction = _useConfigInject.direction;
- var token;
- var screens = ref({});
- onBeforeMount(function () {
- token = ResponsiveObserve.subscribe(function (screen) {
- if (_typeof(props.column) !== 'object') {
- return;
- }
- screens.value = screen;
- });
- });
- onBeforeUnmount(function () {
- ResponsiveObserve.unsubscribe(token);
- });
- provide(descriptionsContext, {
- labelStyle: toRef(props, 'labelStyle'),
- contentStyle: toRef(props, 'contentStyle')
- });
- var mergeColumn = computed(function () {
- return getColumn(props.column, screens.value);
- });
- return function () {
- var _slots$title, _slots$extra, _slots$default2, _ref3;
- var size = props.size,
- _props$bordered = props.bordered,
- bordered = _props$bordered === void 0 ? false : _props$bordered,
- _props$layout = props.layout,
- layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
- _props$colon = props.colon,
- colon = _props$colon === void 0 ? true : _props$colon,
- _props$title = props.title,
- title = _props$title === void 0 ? (_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots) : _props$title,
- _props$extra = props.extra,
- extra = _props$extra === void 0 ? (_slots$extra = slots.extra) === null || _slots$extra === void 0 ? void 0 : _slots$extra.call(slots) : _props$extra;
- var children = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots);
- var rows = getRows(children, mergeColumn.value);
- return _createVNode("div", {
- "class": [prefixCls.value, (_ref3 = {}, _defineProperty(_ref3, "".concat(prefixCls.value, "-").concat(size), size !== 'default'), _defineProperty(_ref3, "".concat(prefixCls.value, "-bordered"), !!bordered), _defineProperty(_ref3, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _ref3)]
- }, [(title || extra) && _createVNode("div", {
- "class": "".concat(prefixCls.value, "-header")
- }, [title && _createVNode("div", {
- "class": "".concat(prefixCls.value, "-title")
- }, [title]), extra && _createVNode("div", {
- "class": "".concat(prefixCls.value, "-extra")
- }, [extra])]), _createVNode("div", {
- "class": "".concat(prefixCls.value, "-view")
- }, [_createVNode("table", null, [_createVNode("tbody", null, [rows.map(function (row, index) {
- return _createVNode(Row, {
- "key": index,
- "index": index,
- "colon": colon,
- "prefixCls": prefixCls.value,
- "vertical": layout === 'vertical',
- "bordered": bordered,
- "row": row
- }, null);
- })])])])]);
- };
- }
- });
- Descriptions.install = function (app) {
- app.component(Descriptions.name, Descriptions);
- app.component(Descriptions.Item.name, Descriptions.Item);
- return app;
- };
- export default Descriptions;
|