Compact.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import classNames from '../_util/classNames';
  4. import createContext from '../_util/createContext';
  5. import useConfigInject from '../config-provider/hooks/useConfigInject';
  6. import useStyle from './style';
  7. import { computed, defineComponent } from 'vue';
  8. import PropTypes from '../_util/vue-types';
  9. import { booleanType, tuple } from '../_util/type';
  10. import { isEmpty } from 'lodash-es';
  11. import { flattenChildren } from '../_util/props-util';
  12. export const spaceCompactItemProps = () => ({
  13. compactSize: String,
  14. compactDirection: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
  15. isFirstItem: booleanType(),
  16. isLastItem: booleanType()
  17. });
  18. export const SpaceCompactItemContext = createContext(null);
  19. export const useCompactItemContext = (prefixCls, direction) => {
  20. const compactItemContext = SpaceCompactItemContext.useInject();
  21. const compactItemClassnames = computed(() => {
  22. if (!compactItemContext || isEmpty(compactItemContext)) return '';
  23. const {
  24. compactDirection,
  25. isFirstItem,
  26. isLastItem
  27. } = compactItemContext;
  28. const separator = compactDirection === 'vertical' ? '-vertical-' : '-';
  29. return classNames({
  30. [`${prefixCls.value}-compact${separator}item`]: true,
  31. [`${prefixCls.value}-compact${separator}first-item`]: isFirstItem,
  32. [`${prefixCls.value}-compact${separator}last-item`]: isLastItem,
  33. [`${prefixCls.value}-compact${separator}item-rtl`]: direction.value === 'rtl'
  34. });
  35. });
  36. return {
  37. compactSize: computed(() => compactItemContext === null || compactItemContext === void 0 ? void 0 : compactItemContext.compactSize),
  38. compactDirection: computed(() => compactItemContext === null || compactItemContext === void 0 ? void 0 : compactItemContext.compactDirection),
  39. compactItemClassnames
  40. };
  41. };
  42. export const NoCompactStyle = defineComponent({
  43. name: 'NoCompactStyle',
  44. setup(_, _ref) {
  45. let {
  46. slots
  47. } = _ref;
  48. SpaceCompactItemContext.useProvide(null);
  49. return () => {
  50. var _a;
  51. return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
  52. };
  53. }
  54. });
  55. export const spaceCompactProps = () => ({
  56. prefixCls: String,
  57. size: {
  58. type: String
  59. },
  60. direction: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
  61. align: PropTypes.oneOf(tuple('start', 'end', 'center', 'baseline')),
  62. block: {
  63. type: Boolean,
  64. default: undefined
  65. }
  66. });
  67. const CompactItem = defineComponent({
  68. name: 'CompactItem',
  69. props: spaceCompactItemProps(),
  70. setup(props, _ref2) {
  71. let {
  72. slots
  73. } = _ref2;
  74. SpaceCompactItemContext.useProvide(props);
  75. return () => {
  76. var _a;
  77. return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
  78. };
  79. }
  80. });
  81. const Compact = defineComponent({
  82. name: 'ASpaceCompact',
  83. inheritAttrs: false,
  84. props: spaceCompactProps(),
  85. setup(props, _ref3) {
  86. let {
  87. attrs,
  88. slots
  89. } = _ref3;
  90. const {
  91. prefixCls,
  92. direction: directionConfig
  93. } = useConfigInject('space-compact', props);
  94. const compactItemContext = SpaceCompactItemContext.useInject();
  95. const [wrapSSR, hashId] = useStyle(prefixCls);
  96. const clx = computed(() => {
  97. return classNames(prefixCls.value, hashId.value, {
  98. [`${prefixCls.value}-rtl`]: directionConfig.value === 'rtl',
  99. [`${prefixCls.value}-block`]: props.block,
  100. [`${prefixCls.value}-vertical`]: props.direction === 'vertical'
  101. });
  102. });
  103. return () => {
  104. var _a;
  105. const childNodes = flattenChildren(((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || []);
  106. // =========================== Render ===========================
  107. if (childNodes.length === 0) {
  108. return null;
  109. }
  110. return wrapSSR(_createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  111. "class": [clx.value, attrs.class]
  112. }), [childNodes.map((child, i) => {
  113. var _a;
  114. const key = child && child.key || `${prefixCls.value}-item-${i}`;
  115. const noCompactItemContext = !compactItemContext || isEmpty(compactItemContext);
  116. return _createVNode(CompactItem, {
  117. "key": key,
  118. "compactSize": (_a = props.size) !== null && _a !== void 0 ? _a : 'middle',
  119. "compactDirection": props.direction,
  120. "isFirstItem": i === 0 && (noCompactItemContext || (compactItemContext === null || compactItemContext === void 0 ? void 0 : compactItemContext.isFirstItem)),
  121. "isLastItem": i === childNodes.length - 1 && (noCompactItemContext || (compactItemContext === null || compactItemContext === void 0 ? void 0 : compactItemContext.isLastItem))
  122. }, {
  123. default: () => [child]
  124. });
  125. })]));
  126. };
  127. }
  128. });
  129. export default Compact;