Col.js 4.3 KB

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