Col.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.colProps = void 0;
  7. var _vue = require("vue");
  8. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  9. var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  10. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  11. var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
  12. var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
  13. var _context = require("./context");
  14. function parseFlex(flex) {
  15. if (typeof flex === 'number') {
  16. return "".concat(flex, " ").concat(flex, " auto");
  17. }
  18. if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
  19. return "0 0 ".concat(flex);
  20. }
  21. return flex;
  22. }
  23. var colProps = function colProps() {
  24. return {
  25. span: [String, Number],
  26. order: [String, Number],
  27. offset: [String, Number],
  28. push: [String, Number],
  29. pull: [String, Number],
  30. xs: {
  31. type: [String, Number, Object],
  32. default: undefined
  33. },
  34. sm: {
  35. type: [String, Number, Object],
  36. default: undefined
  37. },
  38. md: {
  39. type: [String, Number, Object],
  40. default: undefined
  41. },
  42. lg: {
  43. type: [String, Number, Object],
  44. default: undefined
  45. },
  46. xl: {
  47. type: [String, Number, Object],
  48. default: undefined
  49. },
  50. xxl: {
  51. type: [String, Number, Object],
  52. default: undefined
  53. },
  54. xxxl: {
  55. type: [String, Number, Object],
  56. default: undefined
  57. },
  58. prefixCls: String,
  59. flex: [String, Number]
  60. };
  61. };
  62. exports.colProps = colProps;
  63. var _default = (0, _vue.defineComponent)({
  64. compatConfig: {
  65. MODE: 3
  66. },
  67. name: 'ACol',
  68. props: colProps(),
  69. setup: function setup(props, _ref) {
  70. var slots = _ref.slots;
  71. var _useInjectRow = (0, _context.useInjectRow)(),
  72. gutter = _useInjectRow.gutter,
  73. supportFlexGap = _useInjectRow.supportFlexGap,
  74. wrap = _useInjectRow.wrap;
  75. var _useConfigInject = (0, _useConfigInject2.default)('col', props),
  76. prefixCls = _useConfigInject.prefixCls,
  77. direction = _useConfigInject.direction;
  78. var classes = (0, _vue.computed)(function () {
  79. var _classNames;
  80. var span = props.span,
  81. order = props.order,
  82. offset = props.offset,
  83. push = props.push,
  84. pull = props.pull;
  85. var pre = prefixCls.value;
  86. var sizeClassObj = {};
  87. ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'].forEach(function (size) {
  88. var _objectSpread2;
  89. var sizeProps = {};
  90. var propSize = props[size];
  91. if (typeof propSize === 'number') {
  92. sizeProps.span = propSize;
  93. } else if ((0, _typeof2.default)(propSize) === 'object') {
  94. sizeProps = propSize || {};
  95. }
  96. sizeClassObj = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, sizeClassObj), {}, (_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, "".concat(pre, "-").concat(size, "-").concat(sizeProps.span), sizeProps.span !== undefined), (0, _defineProperty2.default)(_objectSpread2, "".concat(pre, "-").concat(size, "-order-").concat(sizeProps.order), sizeProps.order || sizeProps.order === 0), (0, _defineProperty2.default)(_objectSpread2, "".concat(pre, "-").concat(size, "-offset-").concat(sizeProps.offset), sizeProps.offset || sizeProps.offset === 0), (0, _defineProperty2.default)(_objectSpread2, "".concat(pre, "-").concat(size, "-push-").concat(sizeProps.push), sizeProps.push || sizeProps.push === 0), (0, _defineProperty2.default)(_objectSpread2, "".concat(pre, "-").concat(size, "-pull-").concat(sizeProps.pull), sizeProps.pull || sizeProps.pull === 0), (0, _defineProperty2.default)(_objectSpread2, "".concat(pre, "-rtl"), direction.value === 'rtl'), _objectSpread2));
  97. });
  98. return (0, _classNames2.default)(pre, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(pre, "-").concat(span), span !== undefined), (0, _defineProperty2.default)(_classNames, "".concat(pre, "-order-").concat(order), order), (0, _defineProperty2.default)(_classNames, "".concat(pre, "-offset-").concat(offset), offset), (0, _defineProperty2.default)(_classNames, "".concat(pre, "-push-").concat(push), push), (0, _defineProperty2.default)(_classNames, "".concat(pre, "-pull-").concat(pull), pull), _classNames), sizeClassObj);
  99. });
  100. var mergedStyle = (0, _vue.computed)(function () {
  101. var flex = props.flex;
  102. var gutterVal = gutter.value;
  103. var style = {};
  104. // Horizontal gutter use padding
  105. if (gutterVal && gutterVal[0] > 0) {
  106. var horizontalGutter = "".concat(gutterVal[0] / 2, "px");
  107. style.paddingLeft = horizontalGutter;
  108. style.paddingRight = horizontalGutter;
  109. }
  110. // Vertical gutter use padding when gap not support
  111. if (gutterVal && gutterVal[1] > 0 && !supportFlexGap.value) {
  112. var verticalGutter = "".concat(gutterVal[1] / 2, "px");
  113. style.paddingTop = verticalGutter;
  114. style.paddingBottom = verticalGutter;
  115. }
  116. if (flex) {
  117. style.flex = parseFlex(flex);
  118. // Hack for Firefox to avoid size issue
  119. // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
  120. if (wrap.value === false && !style.minWidth) {
  121. style.minWidth = 0;
  122. }
  123. }
  124. return style;
  125. });
  126. return function () {
  127. var _slots$default;
  128. return (0, _vue.createVNode)("div", {
  129. "class": classes.value,
  130. "style": mergedStyle.value
  131. }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
  132. };
  133. }
  134. });
  135. exports.default = _default;