d77ba6963940d69c62e06a6430ee84bb3ba0dc80da66d0fecbb6621045a265c40d7a7c7dbf1e0763533c60d36d476ef6b8ab035f857cd376f20ca3cb4c3fbf 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import { inject, getCurrentInstance, ref, unref, reactive, onBeforeUnmount } from 'vue';
  2. import { carouselContextKey } from './constants.mjs';
  3. import { isUndefined } from '../../../utils/types.mjs';
  4. const useCarouselItem = (props) => {
  5. const carouselContext = inject(carouselContextKey);
  6. const instance = getCurrentInstance();
  7. const carouselItemRef = ref();
  8. const hover = ref(false);
  9. const translate = ref(0);
  10. const scale = ref(1);
  11. const active = ref(false);
  12. const ready = ref(false);
  13. const inStage = ref(false);
  14. const animating = ref(false);
  15. const { isCardType, isVertical, cardScale } = carouselContext;
  16. function processIndex(index, activeIndex, length) {
  17. const lastItemIndex = length - 1;
  18. const prevItemIndex = activeIndex - 1;
  19. const nextItemIndex = activeIndex + 1;
  20. const halfItemIndex = length / 2;
  21. if (activeIndex === 0 && index === lastItemIndex) {
  22. return -1;
  23. } else if (activeIndex === lastItemIndex && index === 0) {
  24. return length;
  25. } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
  26. return length + 1;
  27. } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
  28. return -2;
  29. }
  30. return index;
  31. }
  32. function calcCardTranslate(index, activeIndex) {
  33. var _a, _b;
  34. const parentWidth = unref(isVertical) ? ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetHeight) || 0 : ((_b = carouselContext.root.value) == null ? void 0 : _b.offsetWidth) || 0;
  35. if (inStage.value) {
  36. return parentWidth * ((2 - cardScale) * (index - activeIndex) + 1) / 4;
  37. } else if (index < activeIndex) {
  38. return -(1 + cardScale) * parentWidth / 4;
  39. } else {
  40. return (3 + cardScale) * parentWidth / 4;
  41. }
  42. }
  43. function calcTranslate(index, activeIndex, isVertical2) {
  44. const rootEl = carouselContext.root.value;
  45. if (!rootEl)
  46. return 0;
  47. const distance = (isVertical2 ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
  48. return distance * (index - activeIndex);
  49. }
  50. const translateItem = (index, activeIndex, oldIndex) => {
  51. var _a;
  52. const _isCardType = unref(isCardType);
  53. const carouselItemLength = (_a = carouselContext.items.value.length) != null ? _a : Number.NaN;
  54. const isActive = index === activeIndex;
  55. if (!_isCardType && !isUndefined(oldIndex)) {
  56. animating.value = isActive || index === oldIndex;
  57. }
  58. if (!isActive && carouselItemLength > 2 && carouselContext.loop) {
  59. index = processIndex(index, activeIndex, carouselItemLength);
  60. }
  61. const _isVertical = unref(isVertical);
  62. active.value = isActive;
  63. if (_isCardType) {
  64. inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
  65. translate.value = calcCardTranslate(index, activeIndex);
  66. scale.value = unref(active) ? 1 : cardScale;
  67. } else {
  68. translate.value = calcTranslate(index, activeIndex, _isVertical);
  69. }
  70. ready.value = true;
  71. if (isActive && carouselItemRef.value) {
  72. carouselContext.setContainerHeight(carouselItemRef.value.offsetHeight);
  73. }
  74. };
  75. function handleItemClick() {
  76. if (carouselContext && unref(isCardType)) {
  77. const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
  78. carouselContext.setActiveItem(index);
  79. }
  80. }
  81. const carouselItemContext = {
  82. props,
  83. states: reactive({
  84. hover,
  85. translate,
  86. scale,
  87. active,
  88. ready,
  89. inStage,
  90. animating
  91. }),
  92. uid: instance.uid,
  93. getVnode: () => instance.vnode,
  94. translateItem
  95. };
  96. carouselContext.addItem(carouselItemContext);
  97. onBeforeUnmount(() => {
  98. carouselContext.removeItem(carouselItemContext);
  99. });
  100. return {
  101. carouselItemRef,
  102. active,
  103. animating,
  104. hover,
  105. inStage,
  106. isVertical,
  107. translate,
  108. isCardType,
  109. scale,
  110. ready,
  111. handleItemClick
  112. };
  113. };
  114. export { useCarouselItem };
  115. //# sourceMappingURL=use-carousel-item.mjs.map