index.js 6.1 KB

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