index.js 7.7 KB

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