index.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.spaceProps = exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  10. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  11. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  12. var _propsUtil = require("../_util/props-util");
  13. var _type = require("../_util/type");
  14. var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
  15. var _useFlexGapSupport = _interopRequireDefault(require("../_util/hooks/useFlexGapSupport"));
  16. var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
  17. var spaceSize = {
  18. small: 8,
  19. middle: 16,
  20. large: 24
  21. };
  22. var spaceProps = function spaceProps() {
  23. return {
  24. prefixCls: String,
  25. size: {
  26. type: [String, Number, Array]
  27. },
  28. direction: _vueTypes.default.oneOf((0, _type.tuple)('horizontal', 'vertical')).def('horizontal'),
  29. align: _vueTypes.default.oneOf((0, _type.tuple)('start', 'end', 'center', 'baseline')),
  30. wrap: {
  31. type: Boolean,
  32. default: undefined
  33. }
  34. };
  35. };
  36. exports.spaceProps = spaceProps;
  37. function getNumberSize(size) {
  38. return typeof size === 'string' ? spaceSize[size] : size || 0;
  39. }
  40. var Space = (0, _vue.defineComponent)({
  41. compatConfig: {
  42. MODE: 3
  43. },
  44. name: 'ASpace',
  45. props: spaceProps(),
  46. slots: ['split'],
  47. setup: function setup(props, _ref) {
  48. var slots = _ref.slots;
  49. var _useConfigInject = (0, _useConfigInject2.default)('space', props),
  50. prefixCls = _useConfigInject.prefixCls,
  51. space = _useConfigInject.space,
  52. directionConfig = _useConfigInject.direction;
  53. var supportFlexGap = (0, _useFlexGapSupport.default)();
  54. var size = (0, _vue.computed)(function () {
  55. var _ref2, _props$size, _space$value;
  56. return (_ref2 = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : (_space$value = space.value) === null || _space$value === void 0 ? void 0 : _space$value.size) !== null && _ref2 !== void 0 ? _ref2 : 'small';
  57. });
  58. var horizontalSize = (0, _vue.ref)();
  59. var verticalSize = (0, _vue.ref)();
  60. (0, _vue.watch)(size, function () {
  61. var _map = (Array.isArray(size.value) ? size.value : [size.value, size.value]).map(function (item) {
  62. return getNumberSize(item);
  63. });
  64. var _map2 = (0, _slicedToArray2.default)(_map, 2);
  65. horizontalSize.value = _map2[0];
  66. verticalSize.value = _map2[1];
  67. }, {
  68. immediate: true
  69. });
  70. var mergedAlign = (0, _vue.computed)(function () {
  71. return props.align === undefined && props.direction === 'horizontal' ? 'center' : props.align;
  72. });
  73. var cn = (0, _vue.computed)(function () {
  74. var _classNames;
  75. return (0, _classNames2.default)(prefixCls.value, "".concat(prefixCls.value, "-").concat(props.direction), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-rtl"), directionConfig.value === 'rtl'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-align-").concat(mergedAlign.value), mergedAlign.value), _classNames));
  76. });
  77. var marginDirection = (0, _vue.computed)(function () {
  78. return directionConfig.value === 'rtl' ? 'marginLeft' : 'marginRight';
  79. });
  80. var style = (0, _vue.computed)(function () {
  81. var gapStyle = {};
  82. if (supportFlexGap.value) {
  83. gapStyle.columnGap = "".concat(horizontalSize.value, "px");
  84. gapStyle.rowGap = "".concat(verticalSize.value, "px");
  85. }
  86. return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, gapStyle), props.wrap && {
  87. flexWrap: 'wrap',
  88. marginBottom: "".concat(-verticalSize.value, "px")
  89. });
  90. });
  91. return function () {
  92. var _slots$default, _slots$split;
  93. var wrap = props.wrap,
  94. _props$direction = props.direction,
  95. direction = _props$direction === void 0 ? 'horizontal' : _props$direction;
  96. var items = (0, _propsUtil.filterEmpty)((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
  97. var len = items.length;
  98. if (len === 0) {
  99. return null;
  100. }
  101. var split = (_slots$split = slots.split) === null || _slots$split === void 0 ? void 0 : _slots$split.call(slots);
  102. var itemClassName = "".concat(prefixCls.value, "-item");
  103. var horizontalSizeVal = horizontalSize.value;
  104. var latestIndex = len - 1;
  105. return (0, _vue.createVNode)("div", {
  106. "class": cn.value,
  107. "style": style.value
  108. }, [items.map(function (child, index) {
  109. var itemStyle = {};
  110. if (!supportFlexGap.value) {
  111. if (direction === 'vertical') {
  112. if (index < latestIndex) {
  113. itemStyle = {
  114. marginBottom: "".concat(horizontalSizeVal / (split ? 2 : 1), "px")
  115. };
  116. }
  117. } else {
  118. itemStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, index < latestIndex && (0, _defineProperty2.default)({}, marginDirection.value, "".concat(horizontalSizeVal / (split ? 2 : 1), "px"))), wrap && {
  119. paddingBottom: "".concat(verticalSize.value, "px")
  120. });
  121. }
  122. }
  123. return (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("div", {
  124. "class": itemClassName,
  125. "style": itemStyle
  126. }, [child]), index < latestIndex && split && (0, _vue.createVNode)("span", {
  127. "class": "".concat(itemClassName, "-split"),
  128. "style": itemStyle
  129. }, [split])]);
  130. })]);
  131. };
  132. }
  133. });
  134. var _default = (0, _type.withInstall)(Space);
  135. exports.default = _default;