Col.js 5.1 KB

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