index.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _typeof from "@babel/runtime/helpers/esm/typeof";
  3. import { createVNode as _createVNode } from "vue";
  4. import { onBeforeMount, ref, defineComponent, onBeforeUnmount, provide, toRef, computed } from 'vue';
  5. import warning from '../_util/warning';
  6. import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
  7. import Row from './Row';
  8. import PropTypes from '../_util/vue-types';
  9. import { cloneElement } from '../_util/vnode';
  10. import { flattenChildren } from '../_util/props-util';
  11. import useConfigInject from '../_util/hooks/useConfigInject';
  12. export var DescriptionsItemProps = {
  13. prefixCls: String,
  14. label: PropTypes.any,
  15. span: Number
  16. };
  17. var descriptionsItemProp = function descriptionsItemProp() {
  18. return {
  19. prefixCls: String,
  20. label: PropTypes.any,
  21. labelStyle: {
  22. type: Object,
  23. default: undefined
  24. },
  25. contentStyle: {
  26. type: Object,
  27. default: undefined
  28. },
  29. span: {
  30. type: Number,
  31. default: 1
  32. }
  33. };
  34. };
  35. export var DescriptionsItem = defineComponent({
  36. compatConfig: {
  37. MODE: 3
  38. },
  39. name: 'ADescriptionsItem',
  40. props: descriptionsItemProp(),
  41. slots: ['label'],
  42. setup: function setup(_, _ref) {
  43. var slots = _ref.slots;
  44. return function () {
  45. var _slots$default;
  46. return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
  47. };
  48. }
  49. });
  50. var DEFAULT_COLUMN_MAP = {
  51. xxxl: 3,
  52. xxl: 3,
  53. xl: 3,
  54. lg: 3,
  55. md: 3,
  56. sm: 2,
  57. xs: 1
  58. };
  59. function getColumn(column, screens) {
  60. if (typeof column === 'number') {
  61. return column;
  62. }
  63. if (_typeof(column) === 'object') {
  64. for (var i = 0; i < responsiveArray.length; i++) {
  65. var breakpoint = responsiveArray[i];
  66. if (screens[breakpoint] && column[breakpoint] !== undefined) {
  67. return column[breakpoint] || DEFAULT_COLUMN_MAP[breakpoint];
  68. }
  69. }
  70. }
  71. return 3;
  72. }
  73. function getFilledItem(node, span, rowRestCol) {
  74. var clone = node;
  75. if (span === undefined || span > rowRestCol) {
  76. clone = cloneElement(node, {
  77. span: rowRestCol
  78. });
  79. warning(span === undefined, 'Descriptions', 'Sum of column `span` in a line not match `column` of Descriptions.');
  80. }
  81. return clone;
  82. }
  83. function getRows(children, column) {
  84. var childNodes = flattenChildren(children);
  85. var rows = [];
  86. var tmpRow = [];
  87. var rowRestCol = column;
  88. childNodes.forEach(function (node, index) {
  89. var _node$props;
  90. var span = (_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.span;
  91. var mergedSpan = span || 1;
  92. // Additional handle last one
  93. if (index === childNodes.length - 1) {
  94. tmpRow.push(getFilledItem(node, span, rowRestCol));
  95. rows.push(tmpRow);
  96. return;
  97. }
  98. if (mergedSpan < rowRestCol) {
  99. rowRestCol -= mergedSpan;
  100. tmpRow.push(node);
  101. } else {
  102. tmpRow.push(getFilledItem(node, mergedSpan, rowRestCol));
  103. rows.push(tmpRow);
  104. rowRestCol = column;
  105. tmpRow = [];
  106. }
  107. });
  108. return rows;
  109. }
  110. export var descriptionsProps = function descriptionsProps() {
  111. return {
  112. prefixCls: String,
  113. bordered: {
  114. type: Boolean,
  115. default: undefined
  116. },
  117. size: {
  118. type: String,
  119. default: 'default'
  120. },
  121. title: PropTypes.any,
  122. extra: PropTypes.any,
  123. column: {
  124. type: [Number, Object],
  125. default: function _default() {
  126. return DEFAULT_COLUMN_MAP;
  127. }
  128. },
  129. layout: String,
  130. colon: {
  131. type: Boolean,
  132. default: undefined
  133. },
  134. labelStyle: {
  135. type: Object,
  136. default: undefined
  137. },
  138. contentStyle: {
  139. type: Object,
  140. default: undefined
  141. }
  142. };
  143. };
  144. export var descriptionsContext = Symbol('descriptionsContext');
  145. var Descriptions = defineComponent({
  146. compatConfig: {
  147. MODE: 3
  148. },
  149. name: 'ADescriptions',
  150. props: descriptionsProps(),
  151. slots: ['title', 'extra'],
  152. Item: DescriptionsItem,
  153. setup: function setup(props, _ref2) {
  154. var slots = _ref2.slots;
  155. var _useConfigInject = useConfigInject('descriptions', props),
  156. prefixCls = _useConfigInject.prefixCls,
  157. direction = _useConfigInject.direction;
  158. var token;
  159. var screens = ref({});
  160. onBeforeMount(function () {
  161. token = ResponsiveObserve.subscribe(function (screen) {
  162. if (_typeof(props.column) !== 'object') {
  163. return;
  164. }
  165. screens.value = screen;
  166. });
  167. });
  168. onBeforeUnmount(function () {
  169. ResponsiveObserve.unsubscribe(token);
  170. });
  171. provide(descriptionsContext, {
  172. labelStyle: toRef(props, 'labelStyle'),
  173. contentStyle: toRef(props, 'contentStyle')
  174. });
  175. var mergeColumn = computed(function () {
  176. return getColumn(props.column, screens.value);
  177. });
  178. return function () {
  179. var _slots$title, _slots$extra, _slots$default2, _ref3;
  180. var size = props.size,
  181. _props$bordered = props.bordered,
  182. bordered = _props$bordered === void 0 ? false : _props$bordered,
  183. _props$layout = props.layout,
  184. layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
  185. _props$colon = props.colon,
  186. colon = _props$colon === void 0 ? true : _props$colon,
  187. _props$title = props.title,
  188. title = _props$title === void 0 ? (_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots) : _props$title,
  189. _props$extra = props.extra,
  190. extra = _props$extra === void 0 ? (_slots$extra = slots.extra) === null || _slots$extra === void 0 ? void 0 : _slots$extra.call(slots) : _props$extra;
  191. var children = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots);
  192. var rows = getRows(children, mergeColumn.value);
  193. return _createVNode("div", {
  194. "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)]
  195. }, [(title || extra) && _createVNode("div", {
  196. "class": "".concat(prefixCls.value, "-header")
  197. }, [title && _createVNode("div", {
  198. "class": "".concat(prefixCls.value, "-title")
  199. }, [title]), extra && _createVNode("div", {
  200. "class": "".concat(prefixCls.value, "-extra")
  201. }, [extra])]), _createVNode("div", {
  202. "class": "".concat(prefixCls.value, "-view")
  203. }, [_createVNode("table", null, [_createVNode("tbody", null, [rows.map(function (row, index) {
  204. return _createVNode(Row, {
  205. "key": index,
  206. "index": index,
  207. "colon": colon,
  208. "prefixCls": prefixCls.value,
  209. "vertical": layout === 'vertical',
  210. "bordered": bordered,
  211. "row": row
  212. }, null);
  213. })])])])]);
  214. };
  215. }
  216. });
  217. Descriptions.install = function (app) {
  218. app.component(Descriptions.name, Descriptions);
  219. app.component(Descriptions.Item.name, Descriptions.Item);
  220. return app;
  221. };
  222. export default Descriptions;