Col.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import _typeof from 'babel-runtime/helpers/typeof';
  4. import PropTypes from '../_util/vue-types';
  5. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  6. import { getListeners } from '../_util/props-util';
  7. var stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
  8. export var ColSize = PropTypes.shape({
  9. span: stringOrNumber,
  10. order: stringOrNumber,
  11. offset: stringOrNumber,
  12. push: stringOrNumber,
  13. pull: stringOrNumber
  14. }).loose;
  15. var objectOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number, ColSize]);
  16. export var ColProps = {
  17. span: stringOrNumber,
  18. order: stringOrNumber,
  19. offset: stringOrNumber,
  20. push: stringOrNumber,
  21. pull: stringOrNumber,
  22. xs: objectOrNumber,
  23. sm: objectOrNumber,
  24. md: objectOrNumber,
  25. lg: objectOrNumber,
  26. xl: objectOrNumber,
  27. xxl: objectOrNumber,
  28. prefixCls: PropTypes.string,
  29. flex: stringOrNumber
  30. };
  31. export default {
  32. name: 'ACol',
  33. props: ColProps,
  34. inject: {
  35. configProvider: { 'default': function _default() {
  36. return ConfigConsumerProps;
  37. } },
  38. rowContext: {
  39. 'default': function _default() {
  40. return null;
  41. }
  42. }
  43. },
  44. methods: {
  45. parseFlex: function parseFlex(flex) {
  46. if (typeof flex === 'number') {
  47. return flex + ' ' + flex + ' auto';
  48. }
  49. if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
  50. return '0 0 ' + flex;
  51. }
  52. return flex;
  53. }
  54. },
  55. render: function render() {
  56. var _this = this,
  57. _extends3;
  58. var h = arguments[0];
  59. var span = this.span,
  60. order = this.order,
  61. offset = this.offset,
  62. push = this.push,
  63. pull = this.pull,
  64. flex = this.flex,
  65. customizePrefixCls = this.prefixCls,
  66. $slots = this.$slots,
  67. rowContext = this.rowContext;
  68. var getPrefixCls = this.configProvider.getPrefixCls;
  69. var prefixCls = getPrefixCls('col', customizePrefixCls);
  70. var sizeClassObj = {};
  71. ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(function (size) {
  72. var _extends2;
  73. var sizeProps = {};
  74. var propSize = _this[size];
  75. if (typeof propSize === 'number') {
  76. sizeProps.span = propSize;
  77. } else if ((typeof propSize === 'undefined' ? 'undefined' : _typeof(propSize)) === 'object') {
  78. sizeProps = propSize || {};
  79. }
  80. sizeClassObj = _extends({}, sizeClassObj, (_extends2 = {}, _defineProperty(_extends2, prefixCls + '-' + size + '-' + sizeProps.span, sizeProps.span !== undefined), _defineProperty(_extends2, prefixCls + '-' + size + '-order-' + sizeProps.order, sizeProps.order || sizeProps.order === 0), _defineProperty(_extends2, prefixCls + '-' + size + '-offset-' + sizeProps.offset, sizeProps.offset || sizeProps.offset === 0), _defineProperty(_extends2, prefixCls + '-' + size + '-push-' + sizeProps.push, sizeProps.push || sizeProps.push === 0), _defineProperty(_extends2, prefixCls + '-' + size + '-pull-' + sizeProps.pull, sizeProps.pull || sizeProps.pull === 0), _extends2));
  81. });
  82. var classes = _extends((_extends3 = {}, _defineProperty(_extends3, '' + prefixCls, true), _defineProperty(_extends3, prefixCls + '-' + span, span !== undefined), _defineProperty(_extends3, prefixCls + '-order-' + order, order), _defineProperty(_extends3, prefixCls + '-offset-' + offset, offset), _defineProperty(_extends3, prefixCls + '-push-' + push, push), _defineProperty(_extends3, prefixCls + '-pull-' + pull, pull), _extends3), sizeClassObj);
  83. var divProps = {
  84. on: getListeners(this),
  85. 'class': classes,
  86. style: {}
  87. };
  88. if (rowContext) {
  89. var gutter = rowContext.getGutter();
  90. if (gutter) {
  91. divProps.style = _extends({}, gutter[0] > 0 ? {
  92. paddingLeft: gutter[0] / 2 + 'px',
  93. paddingRight: gutter[0] / 2 + 'px'
  94. } : {}, gutter[1] > 0 ? {
  95. paddingTop: gutter[1] / 2 + 'px',
  96. paddingBottom: gutter[1] / 2 + 'px'
  97. } : {});
  98. }
  99. }
  100. if (flex) {
  101. divProps.style.flex = this.parseFlex(flex);
  102. }
  103. return h(
  104. 'div',
  105. divProps,
  106. [$slots['default']]
  107. );
  108. }
  109. };