use-carousel.js 8.3 KB

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