78fcaa474314292921a3fad5fbf1d1ec34df5d228bc0fbf5099abc5b7261a81160299eec93bf9a0d83eb77ad73215f347d9966034c35add2b1ad140d0bde01 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var lodashUnified = require('lodash-unified');
  5. var core = require('@vueuse/core');
  6. var constants = require('./constants.js');
  7. var index = require('../../../hooks/use-ordered-children/index.js');
  8. var shared = require('@vue/shared');
  9. var vnode = require('../../../utils/vue/vnode.js');
  10. var event = require('../../../constants/event.js');
  11. const THROTTLE_TIME = 300;
  12. const useCarousel = (props, emit, componentName) => {
  13. const {
  14. children: items,
  15. addChild: addItem,
  16. removeChild: removeItem,
  17. ChildrenSorter: ItemsSorter
  18. } = index.useOrderedChildren(vue.getCurrentInstance(), constants.CAROUSEL_ITEM_NAME);
  19. const slots = vue.useSlots();
  20. const activeIndex = vue.ref(-1);
  21. const timer = vue.ref(null);
  22. const hover = vue.ref(false);
  23. const root = vue.ref();
  24. const containerHeight = vue.ref(0);
  25. const isItemsTwoLength = vue.ref(true);
  26. const arrowDisplay = vue.computed(() => props.arrow !== "never" && !vue.unref(isVertical));
  27. const hasLabel = vue.computed(() => {
  28. return items.value.some((item) => item.props.label.toString().length > 0);
  29. });
  30. const isCardType = vue.computed(() => props.type === "card");
  31. const isVertical = vue.computed(() => props.direction === "vertical");
  32. const containerStyle = vue.computed(() => {
  33. if (props.height !== "auto") {
  34. return {
  35. height: props.height
  36. };
  37. }
  38. return {
  39. height: `${containerHeight.value}px`,
  40. overflow: "hidden"
  41. };
  42. });
  43. const throttledArrowClick = lodashUnified.throttle((index) => {
  44. setActiveItem(index);
  45. }, THROTTLE_TIME, { trailing: true });
  46. const throttledIndicatorHover = lodashUnified.throttle((index) => {
  47. handleIndicatorHover(index);
  48. }, THROTTLE_TIME);
  49. const isTwoLengthShow = (index) => {
  50. if (!isItemsTwoLength.value)
  51. return true;
  52. return activeIndex.value <= 1 ? index <= 1 : index > 1;
  53. };
  54. function pauseTimer() {
  55. if (timer.value) {
  56. clearInterval(timer.value);
  57. timer.value = null;
  58. }
  59. }
  60. function startTimer() {
  61. if (props.interval <= 0 || !props.autoplay || timer.value)
  62. return;
  63. timer.value = setInterval(() => playSlides(), props.interval);
  64. }
  65. const playSlides = () => {
  66. if (activeIndex.value < items.value.length - 1) {
  67. activeIndex.value = activeIndex.value + 1;
  68. } else if (props.loop) {
  69. activeIndex.value = 0;
  70. }
  71. };
  72. function setActiveItem(index) {
  73. if (shared.isString(index)) {
  74. const filteredItems = items.value.filter((item) => item.props.name === index);
  75. if (filteredItems.length > 0) {
  76. index = items.value.indexOf(filteredItems[0]);
  77. }
  78. }
  79. index = Number(index);
  80. if (Number.isNaN(index) || index !== Math.floor(index)) {
  81. return;
  82. }
  83. const itemCount = items.value.length;
  84. const oldIndex = activeIndex.value;
  85. if (index < 0) {
  86. activeIndex.value = props.loop ? itemCount - 1 : 0;
  87. } else if (index >= itemCount) {
  88. activeIndex.value = props.loop ? 0 : itemCount - 1;
  89. } else {
  90. activeIndex.value = index;
  91. }
  92. if (oldIndex === activeIndex.value) {
  93. resetItemPosition(oldIndex);
  94. }
  95. resetTimer();
  96. }
  97. function resetItemPosition(oldIndex) {
  98. items.value.forEach((item, index) => {
  99. item.translateItem(index, activeIndex.value, oldIndex);
  100. });
  101. }
  102. function itemInStage(item, index) {
  103. var _a, _b, _c, _d;
  104. const _items = vue.unref(items);
  105. const itemCount = _items.length;
  106. if (itemCount === 0 || !item.states.inStage)
  107. return false;
  108. const nextItemIndex = index + 1;
  109. const prevItemIndex = index - 1;
  110. const lastItemIndex = itemCount - 1;
  111. const isLastItemActive = _items[lastItemIndex].states.active;
  112. const isFirstItemActive = _items[0].states.active;
  113. const isNextItemActive = (_b = (_a = _items[nextItemIndex]) == null ? void 0 : _a.states) == null ? void 0 : _b.active;
  114. const isPrevItemActive = (_d = (_c = _items[prevItemIndex]) == null ? void 0 : _c.states) == null ? void 0 : _d.active;
  115. if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
  116. return "left";
  117. } else if (index === 0 && isLastItemActive || isPrevItemActive) {
  118. return "right";
  119. }
  120. return false;
  121. }
  122. function handleMouseEnter() {
  123. hover.value = true;
  124. if (props.pauseOnHover) {
  125. pauseTimer();
  126. }
  127. }
  128. function handleMouseLeave() {
  129. hover.value = false;
  130. startTimer();
  131. }
  132. function handleButtonEnter(arrow) {
  133. if (vue.unref(isVertical))
  134. return;
  135. items.value.forEach((item, index) => {
  136. if (arrow === itemInStage(item, index)) {
  137. item.states.hover = true;
  138. }
  139. });
  140. }
  141. function handleButtonLeave() {
  142. if (vue.unref(isVertical))
  143. return;
  144. items.value.forEach((item) => {
  145. item.states.hover = false;
  146. });
  147. }
  148. function handleIndicatorClick(index) {
  149. activeIndex.value = index;
  150. }
  151. function handleIndicatorHover(index) {
  152. if (props.trigger === "hover" && index !== activeIndex.value) {
  153. activeIndex.value = index;
  154. }
  155. }
  156. function prev() {
  157. setActiveItem(activeIndex.value - 1);
  158. }
  159. function next() {
  160. setActiveItem(activeIndex.value + 1);
  161. }
  162. function resetTimer() {
  163. pauseTimer();
  164. if (!props.pauseOnHover)
  165. startTimer();
  166. }
  167. function setContainerHeight(height) {
  168. if (props.height !== "auto")
  169. return;
  170. containerHeight.value = height;
  171. }
  172. function PlaceholderItem() {
  173. var _a;
  174. const defaultSlots = (_a = slots.default) == null ? void 0 : _a.call(slots);
  175. if (!defaultSlots)
  176. return null;
  177. const flatSlots = vnode.flattedChildren(defaultSlots);
  178. const normalizeSlots = flatSlots.filter((slot) => {
  179. return vue.isVNode(slot) && slot.type.name === constants.CAROUSEL_ITEM_NAME;
  180. });
  181. if ((normalizeSlots == null ? void 0 : normalizeSlots.length) === 2 && props.loop && !isCardType.value) {
  182. isItemsTwoLength.value = true;
  183. return normalizeSlots;
  184. }
  185. isItemsTwoLength.value = false;
  186. return null;
  187. }
  188. vue.watch(() => activeIndex.value, (current, prev2) => {
  189. resetItemPosition(prev2);
  190. if (isItemsTwoLength.value) {
  191. current = current % 2;
  192. prev2 = prev2 % 2;
  193. }
  194. if (prev2 > -1) {
  195. emit(event.CHANGE_EVENT, current, prev2);
  196. }
  197. });
  198. const exposeActiveIndex = vue.computed({
  199. get: () => {
  200. return isItemsTwoLength.value ? activeIndex.value % 2 : activeIndex.value;
  201. },
  202. set: (value) => activeIndex.value = value
  203. });
  204. vue.watch(() => props.autoplay, (autoplay) => {
  205. autoplay ? startTimer() : pauseTimer();
  206. });
  207. vue.watch(() => props.loop, () => {
  208. setActiveItem(activeIndex.value);
  209. });
  210. vue.watch(() => props.interval, () => {
  211. resetTimer();
  212. });
  213. const resizeObserver = vue.shallowRef();
  214. vue.onMounted(() => {
  215. vue.watch(() => items.value, () => {
  216. if (items.value.length > 0)
  217. setActiveItem(props.initialIndex);
  218. }, {
  219. immediate: true
  220. });
  221. resizeObserver.value = core.useResizeObserver(root.value, () => {
  222. resetItemPosition();
  223. });
  224. startTimer();
  225. });
  226. vue.onBeforeUnmount(() => {
  227. pauseTimer();
  228. if (root.value && resizeObserver.value)
  229. resizeObserver.value.stop();
  230. });
  231. vue.provide(constants.carouselContextKey, {
  232. root,
  233. isCardType,
  234. isVertical,
  235. items,
  236. loop: props.loop,
  237. cardScale: props.cardScale,
  238. addItem,
  239. removeItem,
  240. setActiveItem,
  241. setContainerHeight
  242. });
  243. return {
  244. root,
  245. activeIndex,
  246. exposeActiveIndex,
  247. arrowDisplay,
  248. hasLabel,
  249. hover,
  250. isCardType,
  251. items,
  252. isVertical,
  253. containerStyle,
  254. isItemsTwoLength,
  255. handleButtonEnter,
  256. handleButtonLeave,
  257. handleIndicatorClick,
  258. handleMouseEnter,
  259. handleMouseLeave,
  260. setActiveItem,
  261. prev,
  262. next,
  263. PlaceholderItem,
  264. isTwoLengthShow,
  265. ItemsSorter,
  266. throttledArrowClick,
  267. throttledIndicatorHover
  268. };
  269. };
  270. exports.useCarousel = useCarousel;
  271. //# sourceMappingURL=use-carousel.js.map