1 | import { h, ref, onMounted, onUpdated, onBeforeUnmount, watch } from 'vue';
|
2 | import { getParams } from './get-params';
|
3 | import { initSwiper, mountSwiper } from './init-swiper';
|
4 | import { needsScrollbar, needsNavigation, needsPagination, uniqueClasses, extend } from './utils';
|
5 | import { renderLoop, calcLoopedSlides } from './loop';
|
6 | import { getChangedParams } from './get-changed-params';
|
7 | import { getChildren } from './get-children';
|
8 | import { updateSwiper } from './update-swiper';
|
9 | import { renderVirtual, updateOnVirtualData } from './virtual';
|
10 | var Swiper = {
|
11 | name: 'Swiper',
|
12 | props: {
|
13 | tag: {
|
14 | type: String,
|
15 | default: 'div'
|
16 | },
|
17 | wrapperTag: {
|
18 | type: String,
|
19 | default: 'div'
|
20 | },
|
21 | init: {
|
22 | type: Boolean,
|
23 | default: undefined
|
24 | },
|
25 | direction: {
|
26 | type: String,
|
27 | default: undefined
|
28 | },
|
29 | touchEventsTarget: {
|
30 | type: String,
|
31 | default: undefined
|
32 | },
|
33 | initialSlide: {
|
34 | type: Number,
|
35 | default: undefined
|
36 | },
|
37 | speed: {
|
38 | type: Number,
|
39 | default: undefined
|
40 | },
|
41 | cssMode: {
|
42 | type: Boolean,
|
43 | default: undefined
|
44 | },
|
45 | updateOnWindowResize: {
|
46 | type: Boolean,
|
47 | default: undefined
|
48 | },
|
49 | nested: {
|
50 | type: Boolean,
|
51 | default: undefined
|
52 | },
|
53 | width: {
|
54 | type: Number,
|
55 | default: undefined
|
56 | },
|
57 | height: {
|
58 | type: Number,
|
59 | default: undefined
|
60 | },
|
61 | preventInteractionOnTransition: {
|
62 | type: Boolean,
|
63 | default: undefined
|
64 | },
|
65 | userAgent: {
|
66 | type: String,
|
67 | default: undefined
|
68 | },
|
69 | url: {
|
70 | type: String,
|
71 | default: undefined
|
72 | },
|
73 | edgeSwipeDetection: {
|
74 | type: [Boolean, String],
|
75 | default: undefined
|
76 | },
|
77 | edgeSwipeThreshold: {
|
78 | type: Number,
|
79 | default: undefined
|
80 | },
|
81 | freeMode: {
|
82 | type: Boolean,
|
83 | default: undefined
|
84 | },
|
85 | freeModeMomentum: {
|
86 | type: Boolean,
|
87 | default: undefined
|
88 | },
|
89 | freeModeMomentumRatio: {
|
90 | type: Number,
|
91 | default: undefined
|
92 | },
|
93 | freeModeMomentumBounce: {
|
94 | type: Boolean,
|
95 | default: undefined
|
96 | },
|
97 | freeModeMomentumBounceRatio: {
|
98 | type: Number,
|
99 | default: undefined
|
100 | },
|
101 | freeModeMomentumVelocityRatio: {
|
102 | type: Number,
|
103 | default: undefined
|
104 | },
|
105 | freeModeSticky: {
|
106 | type: Boolean,
|
107 | default: undefined
|
108 | },
|
109 | freeModeMinimumVelocity: {
|
110 | type: Number,
|
111 | default: undefined
|
112 | },
|
113 | autoHeight: {
|
114 | type: Boolean,
|
115 | default: undefined
|
116 | },
|
117 | setWrapperSize: {
|
118 | type: Boolean,
|
119 | default: undefined
|
120 | },
|
121 | virtualTranslate: {
|
122 | type: Boolean,
|
123 | default: undefined
|
124 | },
|
125 | effect: {
|
126 | type: String,
|
127 | default: undefined
|
128 | },
|
129 | breakpoints: {
|
130 | type: Object,
|
131 | default: undefined
|
132 | },
|
133 | spaceBetween: {
|
134 | type: Number,
|
135 | default: undefined
|
136 | },
|
137 | slidesPerView: {
|
138 | type: [Number, String],
|
139 | default: undefined
|
140 | },
|
141 | slidesPerColumn: {
|
142 | type: Number,
|
143 | default: undefined
|
144 | },
|
145 | slidesPerColumnFill: {
|
146 | type: String,
|
147 | default: undefined
|
148 | },
|
149 | slidesPerGroup: {
|
150 | type: Number,
|
151 | default: undefined
|
152 | },
|
153 | slidesPerGroupSkip: {
|
154 | type: Number,
|
155 | default: undefined
|
156 | },
|
157 | centeredSlides: {
|
158 | type: Boolean,
|
159 | default: undefined
|
160 | },
|
161 | centeredSlidesBounds: {
|
162 | type: Boolean,
|
163 | default: undefined
|
164 | },
|
165 | slidesOffsetBefore: {
|
166 | type: Number,
|
167 | default: undefined
|
168 | },
|
169 | slidesOffsetAfter: {
|
170 | type: Number,
|
171 | default: undefined
|
172 | },
|
173 | normalizeSlideIndex: {
|
174 | type: Boolean,
|
175 | default: undefined
|
176 | },
|
177 | centerInsufficientSlides: {
|
178 | type: Boolean,
|
179 | default: undefined
|
180 | },
|
181 | watchOverflow: {
|
182 | type: Boolean,
|
183 | default: undefined
|
184 | },
|
185 | roundLengths: {
|
186 | type: Boolean,
|
187 | default: undefined
|
188 | },
|
189 | touchRatio: {
|
190 | type: Number,
|
191 | default: undefined
|
192 | },
|
193 | touchAngle: {
|
194 | type: Number,
|
195 | default: undefined
|
196 | },
|
197 | simulateTouch: {
|
198 | type: Boolean,
|
199 | default: undefined
|
200 | },
|
201 | shortSwipes: {
|
202 | type: Boolean,
|
203 | default: undefined
|
204 | },
|
205 | longSwipes: {
|
206 | type: Boolean,
|
207 | default: undefined
|
208 | },
|
209 | longSwipesRatio: {
|
210 | type: Number,
|
211 | default: undefined
|
212 | },
|
213 | longSwipesMs: {
|
214 | type: Number,
|
215 | default: undefined
|
216 | },
|
217 | followFinger: {
|
218 | type: Boolean,
|
219 | default: undefined
|
220 | },
|
221 | allowTouchMove: {
|
222 | type: Boolean,
|
223 | default: undefined
|
224 | },
|
225 | threshold: {
|
226 | type: Number,
|
227 | default: undefined
|
228 | },
|
229 | touchMoveStopPropagation: {
|
230 | type: Boolean,
|
231 | default: undefined
|
232 | },
|
233 | touchStartPreventDefault: {
|
234 | type: Boolean,
|
235 | default: undefined
|
236 | },
|
237 | touchStartForcePreventDefault: {
|
238 | type: Boolean,
|
239 | default: undefined
|
240 | },
|
241 | touchReleaseOnEdges: {
|
242 | type: Boolean,
|
243 | default: undefined
|
244 | },
|
245 | uniqueNavElements: {
|
246 | type: Boolean,
|
247 | default: undefined
|
248 | },
|
249 | resistance: {
|
250 | type: Boolean,
|
251 | default: undefined
|
252 | },
|
253 | resistanceRatio: {
|
254 | type: Number,
|
255 | default: undefined
|
256 | },
|
257 | watchSlidesProgress: {
|
258 | type: Boolean,
|
259 | default: undefined
|
260 | },
|
261 | watchSlidesVisibility: {
|
262 | type: Boolean,
|
263 | default: undefined
|
264 | },
|
265 | grabCursor: {
|
266 | type: Boolean,
|
267 | default: undefined
|
268 | },
|
269 | preventClicks: {
|
270 | type: Boolean,
|
271 | default: undefined
|
272 | },
|
273 | preventClicksPropagation: {
|
274 | type: Boolean,
|
275 | default: undefined
|
276 | },
|
277 | slideToClickedSlide: {
|
278 | type: Boolean,
|
279 | default: undefined
|
280 | },
|
281 | preloadImages: {
|
282 | type: Boolean,
|
283 | default: undefined
|
284 | },
|
285 | updateOnImagesReady: {
|
286 | type: Boolean,
|
287 | default: undefined
|
288 | },
|
289 | loop: {
|
290 | type: Boolean,
|
291 | default: undefined
|
292 | },
|
293 | loopAdditionalSlides: {
|
294 | type: Number,
|
295 | default: undefined
|
296 | },
|
297 | loopedSlides: {
|
298 | type: Number,
|
299 | default: undefined
|
300 | },
|
301 | loopFillGroupWithBlank: {
|
302 | type: Boolean,
|
303 | default: undefined
|
304 | },
|
305 | loopPreventsSlide: {
|
306 | type: Boolean,
|
307 | default: undefined
|
308 | },
|
309 | allowSlidePrev: {
|
310 | type: Boolean,
|
311 | default: undefined
|
312 | },
|
313 | allowSlideNext: {
|
314 | type: Boolean,
|
315 | default: undefined
|
316 | },
|
317 | swipeHandler: {
|
318 | type: Boolean,
|
319 | default: undefined
|
320 | },
|
321 | noSwiping: {
|
322 | type: Boolean,
|
323 | default: undefined
|
324 | },
|
325 | noSwipingClass: {
|
326 | type: String,
|
327 | default: undefined
|
328 | },
|
329 | noSwipingSelector: {
|
330 | type: String,
|
331 | default: undefined
|
332 | },
|
333 | passiveListeners: {
|
334 | type: Boolean,
|
335 | default: undefined
|
336 | },
|
337 | containerModifierClass: {
|
338 | type: String,
|
339 | default: undefined
|
340 | },
|
341 | slideClass: {
|
342 | type: String,
|
343 | default: undefined
|
344 | },
|
345 | slideBlankClass: {
|
346 | type: String,
|
347 | default: undefined
|
348 | },
|
349 | slideActiveClass: {
|
350 | type: String,
|
351 | default: undefined
|
352 | },
|
353 | slideDuplicateActiveClass: {
|
354 | type: String,
|
355 | default: undefined
|
356 | },
|
357 | slideVisibleClass: {
|
358 | type: String,
|
359 | default: undefined
|
360 | },
|
361 | slideDuplicateClass: {
|
362 | type: String,
|
363 | default: undefined
|
364 | },
|
365 | slideNextClass: {
|
366 | type: String,
|
367 | default: undefined
|
368 | },
|
369 | slideDuplicateNextClass: {
|
370 | type: String,
|
371 | default: undefined
|
372 | },
|
373 | slidePrevClass: {
|
374 | type: String,
|
375 | default: undefined
|
376 | },
|
377 | slideDuplicatePrevClass: {
|
378 | type: String,
|
379 | default: undefined
|
380 | },
|
381 | wrapperClass: {
|
382 | type: String,
|
383 | default: undefined
|
384 | },
|
385 | runCallbacksOnInit: {
|
386 | type: Boolean,
|
387 | default: undefined
|
388 | },
|
389 | a11y: {
|
390 | type: [Boolean, Object],
|
391 | default: undefined
|
392 | },
|
393 | autoplay: {
|
394 | type: [Boolean, Object],
|
395 | default: undefined
|
396 | },
|
397 | controller: {
|
398 | type: Object,
|
399 | default: undefined
|
400 | },
|
401 | coverflowEffect: {
|
402 | type: Object,
|
403 | default: undefined
|
404 | },
|
405 | cubeEffect: {
|
406 | type: Object,
|
407 | default: undefined
|
408 | },
|
409 | fadeEffect: {
|
410 | type: Object,
|
411 | default: undefined
|
412 | },
|
413 | flipEffect: {
|
414 | type: Object,
|
415 | default: undefined
|
416 | },
|
417 | hashNavigation: {
|
418 | type: [Boolean, Object],
|
419 | default: undefined
|
420 | },
|
421 | history: {
|
422 | type: [Boolean, Object],
|
423 | default: undefined
|
424 | },
|
425 | keyboard: {
|
426 | type: [Boolean, Object],
|
427 | default: undefined
|
428 | },
|
429 | lazy: {
|
430 | type: [Boolean, Object],
|
431 | default: undefined
|
432 | },
|
433 | mousewheel: {
|
434 | type: [Boolean, Object],
|
435 | default: undefined
|
436 | },
|
437 | navigation: {
|
438 | type: [Boolean, Object],
|
439 | default: undefined
|
440 | },
|
441 | pagination: {
|
442 | type: [Boolean, Object],
|
443 | default: undefined
|
444 | },
|
445 | parallax: {
|
446 | type: [Boolean, Object],
|
447 | default: undefined
|
448 | },
|
449 | scrollbar: {
|
450 | type: [Boolean, Object],
|
451 | default: undefined
|
452 | },
|
453 | thumbs: {
|
454 | type: Object,
|
455 | default: undefined
|
456 | },
|
457 | virtual: {
|
458 | type: [Boolean, Object],
|
459 | default: undefined
|
460 | },
|
461 | zoom: {
|
462 | type: [Boolean, Object],
|
463 | default: undefined
|
464 | }
|
465 | },
|
466 | emits: ['_beforeBreakpoint', '_containerClasses', '_slideClass', '_slideClasses', '_swiper', 'activeIndexChange', 'afterInit', 'autoplay', 'autoplayStart', 'autoplayStop', 'beforeDestroy', 'beforeInit', 'beforeLoopFix', 'beforeResize', 'beforeSlideChangeStart', 'beforeTransitionStart', 'breakpoint', 'changeDirection', 'click', 'doubleTap', 'doubleClick', 'destroy', 'fromEdge', 'hashChange', 'hashSet', 'imagesReady', 'init', 'keyPress', 'lazyImageLoad', 'lazyImageReady', 'loopFix', 'momentumBounce', 'navigationHide', 'navigationShow', 'observerUpdate', 'orientationchange', 'paginationHide', 'paginationRender', 'paginationShow', 'paginationUpdate', 'progress', 'reachBeginning', 'reachEnd', 'realIndexChange', 'resize', 'scroll', 'scrollbarDragEnd', 'scrollbarDragMove', 'scrollbarDragStart', 'setTransition', 'setTranslate', 'slideChange', 'slideChangeTransitionEnd', 'slideChangeTransitionStart', 'slideNextTransitionEnd', 'slideNextTransitionStart', 'slidePrevTransitionEnd', 'slidePrevTransitionStart', 'slideResetTransitionStart', 'slideResetTransitionEnd', 'sliderMove', 'sliderFirstMove', 'slidesLengthChange', 'slidesGridLengthChange', 'snapGridLengthChange', 'snapIndexChange', 'swiper', 'tap', 'toEdge', 'touchEnd', 'touchMove', 'touchMoveOpposite', 'touchStart', 'transitionEnd', 'transitionStart', 'update', 'zoomChange'],
|
467 | setup: function setup(props, _ref) {
|
468 | var originalSlots = _ref.slots,
|
469 | emit = _ref.emit;
|
470 | var Tag = props.tag,
|
471 | WrapperTag = props.wrapperTag;
|
472 | var containerClasses = ref('swiper-container');
|
473 | var virtualData = ref(null);
|
474 | var breakpointChanged = ref(false);
|
475 | var initializedRef = ref(false);
|
476 | var swiperElRef = ref(null);
|
477 | var swiperRef = ref(null);
|
478 | var oldPassedParamsRef = ref(null);
|
479 | var slidesRef = {
|
480 | value: []
|
481 | };
|
482 | var oldSlidesRef = {
|
483 | value: []
|
484 | };
|
485 | var nextElRef = ref(null);
|
486 | var prevElRef = ref(null);
|
487 | var paginationElRef = ref(null);
|
488 | var scrollbarElRef = ref(null);
|
489 |
|
490 | var _getParams = getParams(props),
|
491 | swiperParams = _getParams.params,
|
492 | passedParams = _getParams.passedParams;
|
493 |
|
494 | getChildren(originalSlots, slidesRef, oldSlidesRef);
|
495 | oldPassedParamsRef.value = passedParams;
|
496 | oldSlidesRef.value = slidesRef.value;
|
497 |
|
498 | var onBeforeBreakpoint = function onBeforeBreakpoint() {
|
499 | getChildren(originalSlots, slidesRef, oldSlidesRef);
|
500 | breakpointChanged.value = true;
|
501 | };
|
502 |
|
503 | swiperParams.onAny = function (event) {
|
504 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
505 | args[_key - 1] = arguments[_key];
|
506 | }
|
507 |
|
508 | emit.apply(void 0, [event].concat(args));
|
509 | };
|
510 |
|
511 | Object.assign(swiperParams.on, {
|
512 | _beforeBreakpoint: onBeforeBreakpoint,
|
513 | _containerClasses: function _containerClasses(swiper, classes) {
|
514 | containerClasses.value = classes;
|
515 | }
|
516 | });
|
517 |
|
518 | swiperRef.value = initSwiper(swiperParams);
|
519 |
|
520 | swiperRef.value.loopCreate = function () {};
|
521 |
|
522 | swiperRef.value.loopDestroy = function () {};
|
523 |
|
524 | if (swiperParams.loop) {
|
525 | swiperRef.value.loopedSlides = calcLoopedSlides(slidesRef.value, swiperParams);
|
526 | }
|
527 |
|
528 | if (swiperRef.value.virtual && swiperRef.value.params.virtual.enabled) {
|
529 | swiperRef.value.virtual.slides = slidesRef.value;
|
530 | var extendWith = {
|
531 | cache: false,
|
532 | renderExternal: function renderExternal(data) {
|
533 | virtualData.value = data;
|
534 | },
|
535 | renderExternalUpdate: false
|
536 | };
|
537 | extend(swiperRef.value.params.virtual, extendWith);
|
538 | extend(swiperRef.value.originalParams.virtual, extendWith);
|
539 | }
|
540 |
|
541 | onUpdated(function () {
|
542 |
|
543 | if (!initializedRef.value && swiperRef.value) {
|
544 | swiperRef.value.emitSlidesClasses();
|
545 | initializedRef.value = true;
|
546 | }
|
547 |
|
548 |
|
549 | var _getParams2 = getParams(props),
|
550 | newPassedParams = _getParams2.passedParams;
|
551 |
|
552 | var changedParams = getChangedParams(newPassedParams, oldPassedParamsRef.value, slidesRef.value, oldSlidesRef.value);
|
553 | oldPassedParamsRef.value = newPassedParams;
|
554 |
|
555 | if ((changedParams.length || breakpointChanged.value) && swiperRef.value && !swiperRef.value.destroyed) {
|
556 | updateSwiper(swiperRef.value, slidesRef.value, newPassedParams, changedParams);
|
557 | }
|
558 |
|
559 | breakpointChanged.value = false;
|
560 | });
|
561 |
|
562 | watch(function () {
|
563 | return virtualData;
|
564 | }, function () {
|
565 | updateOnVirtualData(swiperRef.value);
|
566 | });
|
567 |
|
568 | onMounted(function () {
|
569 | if (!swiperElRef.value) return;
|
570 | mountSwiper({
|
571 | el: swiperElRef.value,
|
572 | nextEl: nextElRef.value,
|
573 | prevEl: prevElRef.value,
|
574 | paginationEl: paginationElRef.value,
|
575 | scrollbarEl: scrollbarElRef.value,
|
576 | swiper: swiperRef.value
|
577 | }, swiperParams);
|
578 | emit('swiper', swiperRef.value);
|
579 | });
|
580 | onBeforeUnmount(function () {
|
581 | if (swiperRef.value && !swiperRef.value.destroyed) {
|
582 | swiperRef.value.destroy(true, false);
|
583 | }
|
584 | });
|
585 |
|
586 | function renderSlides(slides) {
|
587 | if (swiperParams.virtual) {
|
588 | return renderVirtual(swiperRef, slides, virtualData.value);
|
589 | }
|
590 |
|
591 | if (!swiperParams.loop || swiperRef.value && swiperRef.value.destroyed) {
|
592 | slides.forEach(function (slide) {
|
593 | if (!slide.props) slide.props = {};
|
594 | slide.props.swiperRef = swiperRef;
|
595 | });
|
596 | return slides;
|
597 | }
|
598 |
|
599 | return renderLoop(swiperRef, slides, swiperParams);
|
600 | }
|
601 |
|
602 | return function () {
|
603 | var _getChildren = getChildren(originalSlots, slidesRef, oldSlidesRef),
|
604 | slides = _getChildren.slides,
|
605 | slots = _getChildren.slots;
|
606 |
|
607 | return h(Tag, {
|
608 | ref: swiperElRef,
|
609 | class: uniqueClasses(containerClasses.value)
|
610 | }, [slots['container-start'], needsNavigation(props) && [h('div', {
|
611 | ref: prevElRef,
|
612 | class: 'swiper-button-prev'
|
613 | }), h('div', {
|
614 | ref: nextElRef,
|
615 | class: 'swiper-button-next'
|
616 | })], needsScrollbar(props) && h('div', {
|
617 | ref: scrollbarElRef,
|
618 | class: 'swiper-scrollbar'
|
619 | }), needsPagination(props) && h('div', {
|
620 | ref: paginationElRef,
|
621 | class: 'swiper-pagination'
|
622 | }), h(WrapperTag, {
|
623 | class: 'swiper-wrapper'
|
624 | }, [slots['wrapper-start'], renderSlides(slides), slots['wrapper-end']]), slots['container-end']]);
|
625 | };
|
626 | }
|
627 | };
|
628 | export { Swiper }; |
\ | No newline at end of file |