index.js 9.1 KB

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