123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830 |
- /**
- * Swiper Vue 11.1.15
- * Most modern mobile touch slider and framework with hardware accelerated transitions
- * https://swiperjs.com
- *
- * Copyright 2014-2024 Vladimir Kharlampidi
- *
- * Released under the MIT License
- *
- * Released on: November 18, 2024
- */
- import { h, ref, onUpdated, provide, watch, nextTick, onMounted, onBeforeUnmount, onBeforeUpdate, computed, inject } from 'vue';
- import { S as Swiper$1 } from './shared/swiper-core.mjs';
- import { g as getParams, a as getChangedParams, u as updateOnVirtualData, m as mountSwiper } from './shared/update-on-virtual-data.mjs';
- import { e as extend, u as updateSwiper, d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needsScrollbar, a as needsPagination } from './shared/update-swiper.mjs';
- function getChildren(originalSlots, slidesRef, oldSlidesRef) {
- if (originalSlots === void 0) {
- originalSlots = {};
- }
- const slides = [];
- const slots = {
- 'container-start': [],
- 'container-end': [],
- 'wrapper-start': [],
- 'wrapper-end': []
- };
- const getSlidesFromElements = (els, slotName) => {
- if (!Array.isArray(els)) {
- return;
- }
- els.forEach(vnode => {
- const isFragment = typeof vnode.type === 'symbol';
- if (slotName === 'default') slotName = 'container-end';
- if (isFragment && vnode.children) {
- getSlidesFromElements(vnode.children, slotName);
- } else if (vnode.type && (vnode.type.name === 'SwiperSlide' || vnode.type.name === 'AsyncComponentWrapper') || vnode.componentOptions && vnode.componentOptions.tag === 'SwiperSlide') {
- slides.push(vnode);
- } else if (slots[slotName]) {
- slots[slotName].push(vnode);
- }
- });
- };
- Object.keys(originalSlots).forEach(slotName => {
- if (typeof originalSlots[slotName] !== 'function') return;
- const els = originalSlots[slotName]();
- getSlidesFromElements(els, slotName);
- });
- oldSlidesRef.value = slidesRef.value;
- slidesRef.value = slides;
- return {
- slides,
- slots
- };
- }
- function renderVirtual(swiperRef, slides, virtualData) {
- if (!virtualData) return null;
- const getSlideIndex = index => {
- let slideIndex = index;
- if (index < 0) {
- slideIndex = slides.length + index;
- } else if (slideIndex >= slides.length) {
- // eslint-disable-next-line
- slideIndex = slideIndex - slides.length;
- }
- return slideIndex;
- };
- const style = swiperRef.value.isHorizontal() ? {
- [swiperRef.value.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
- } : {
- top: `${virtualData.offset}px`
- };
- const {
- from,
- to
- } = virtualData;
- const loopFrom = swiperRef.value.params.loop ? -slides.length : 0;
- const loopTo = swiperRef.value.params.loop ? slides.length * 2 : slides.length;
- const slidesToRender = [];
- for (let i = loopFrom; i < loopTo; i += 1) {
- if (i >= from && i <= to && slidesToRender.length < slides.length) {
- slidesToRender.push(slides[getSlideIndex(i)]);
- }
- }
- return slidesToRender.map(slide => {
- if (!slide.props) slide.props = {};
- if (!slide.props.style) slide.props.style = {};
- slide.props.swiperRef = swiperRef;
- slide.props.style = style;
- if (slide.type) {
- return h(slide.type, {
- ...slide.props
- }, slide.children);
- } else if (slide.componentOptions) {
- return h(slide.componentOptions.Ctor, {
- ...slide.props
- }, slide.componentOptions.children);
- }
- });
- }
- const Swiper = {
- name: 'Swiper',
- props: {
- tag: {
- type: String,
- default: 'div'
- },
- wrapperTag: {
- type: String,
- default: 'div'
- },
- modules: {
- type: Array,
- default: undefined
- },
- init: {
- type: Boolean,
- default: undefined
- },
- direction: {
- type: String,
- default: undefined
- },
- oneWayMovement: {
- type: Boolean,
- default: undefined
- },
- swiperElementNodeName: {
- type: String,
- default: 'SWIPER-CONTAINER'
- },
- touchEventsTarget: {
- type: String,
- default: undefined
- },
- initialSlide: {
- type: Number,
- default: undefined
- },
- speed: {
- type: Number,
- default: undefined
- },
- cssMode: {
- type: Boolean,
- default: undefined
- },
- updateOnWindowResize: {
- type: Boolean,
- default: undefined
- },
- resizeObserver: {
- type: Boolean,
- default: undefined
- },
- nested: {
- type: Boolean,
- default: undefined
- },
- focusableElements: {
- type: String,
- default: undefined
- },
- width: {
- type: Number,
- default: undefined
- },
- height: {
- type: Number,
- default: undefined
- },
- preventInteractionOnTransition: {
- type: Boolean,
- default: undefined
- },
- userAgent: {
- type: String,
- default: undefined
- },
- url: {
- type: String,
- default: undefined
- },
- edgeSwipeDetection: {
- type: [Boolean, String],
- default: undefined
- },
- edgeSwipeThreshold: {
- type: Number,
- default: undefined
- },
- autoHeight: {
- type: Boolean,
- default: undefined
- },
- setWrapperSize: {
- type: Boolean,
- default: undefined
- },
- virtualTranslate: {
- type: Boolean,
- default: undefined
- },
- effect: {
- type: String,
- default: undefined
- },
- breakpoints: {
- type: Object,
- default: undefined
- },
- breakpointsBase: {
- type: String,
- default: undefined
- },
- spaceBetween: {
- type: [Number, String],
- default: undefined
- },
- slidesPerView: {
- type: [Number, String],
- default: undefined
- },
- maxBackfaceHiddenSlides: {
- type: Number,
- default: undefined
- },
- slidesPerGroup: {
- type: Number,
- default: undefined
- },
- slidesPerGroupSkip: {
- type: Number,
- default: undefined
- },
- slidesPerGroupAuto: {
- type: Boolean,
- default: undefined
- },
- centeredSlides: {
- type: Boolean,
- default: undefined
- },
- centeredSlidesBounds: {
- type: Boolean,
- default: undefined
- },
- slidesOffsetBefore: {
- type: Number,
- default: undefined
- },
- slidesOffsetAfter: {
- type: Number,
- default: undefined
- },
- normalizeSlideIndex: {
- type: Boolean,
- default: undefined
- },
- centerInsufficientSlides: {
- type: Boolean,
- default: undefined
- },
- watchOverflow: {
- type: Boolean,
- default: undefined
- },
- roundLengths: {
- type: Boolean,
- default: undefined
- },
- touchRatio: {
- type: Number,
- default: undefined
- },
- touchAngle: {
- type: Number,
- default: undefined
- },
- simulateTouch: {
- type: Boolean,
- default: undefined
- },
- shortSwipes: {
- type: Boolean,
- default: undefined
- },
- longSwipes: {
- type: Boolean,
- default: undefined
- },
- longSwipesRatio: {
- type: Number,
- default: undefined
- },
- longSwipesMs: {
- type: Number,
- default: undefined
- },
- followFinger: {
- type: Boolean,
- default: undefined
- },
- allowTouchMove: {
- type: Boolean,
- default: undefined
- },
- threshold: {
- type: Number,
- default: undefined
- },
- touchMoveStopPropagation: {
- type: Boolean,
- default: undefined
- },
- touchStartPreventDefault: {
- type: Boolean,
- default: undefined
- },
- touchStartForcePreventDefault: {
- type: Boolean,
- default: undefined
- },
- touchReleaseOnEdges: {
- type: Boolean,
- default: undefined
- },
- uniqueNavElements: {
- type: Boolean,
- default: undefined
- },
- resistance: {
- type: Boolean,
- default: undefined
- },
- resistanceRatio: {
- type: Number,
- default: undefined
- },
- watchSlidesProgress: {
- type: Boolean,
- default: undefined
- },
- grabCursor: {
- type: Boolean,
- default: undefined
- },
- preventClicks: {
- type: Boolean,
- default: undefined
- },
- preventClicksPropagation: {
- type: Boolean,
- default: undefined
- },
- slideToClickedSlide: {
- type: Boolean,
- default: undefined
- },
- loop: {
- type: Boolean,
- default: undefined
- },
- loopedSlides: {
- type: Number,
- default: undefined
- },
- loopPreventsSliding: {
- type: Boolean,
- default: undefined
- },
- rewind: {
- type: Boolean,
- default: undefined
- },
- allowSlidePrev: {
- type: Boolean,
- default: undefined
- },
- allowSlideNext: {
- type: Boolean,
- default: undefined
- },
- swipeHandler: {
- type: Boolean,
- default: undefined
- },
- noSwiping: {
- type: Boolean,
- default: undefined
- },
- noSwipingClass: {
- type: String,
- default: undefined
- },
- noSwipingSelector: {
- type: String,
- default: undefined
- },
- passiveListeners: {
- type: Boolean,
- default: undefined
- },
- containerModifierClass: {
- type: String,
- default: undefined
- },
- slideClass: {
- type: String,
- default: undefined
- },
- slideActiveClass: {
- type: String,
- default: undefined
- },
- slideVisibleClass: {
- type: String,
- default: undefined
- },
- slideFullyVisibleClass: {
- type: String,
- default: undefined
- },
- slideBlankClass: {
- type: String,
- default: undefined
- },
- slideNextClass: {
- type: String,
- default: undefined
- },
- slidePrevClass: {
- type: String,
- default: undefined
- },
- wrapperClass: {
- type: String,
- default: undefined
- },
- lazyPreloaderClass: {
- type: String,
- default: undefined
- },
- lazyPreloadPrevNext: {
- type: Number,
- default: undefined
- },
- runCallbacksOnInit: {
- type: Boolean,
- default: undefined
- },
- observer: {
- type: Boolean,
- default: undefined
- },
- observeParents: {
- type: Boolean,
- default: undefined
- },
- observeSlideChildren: {
- type: Boolean,
- default: undefined
- },
- a11y: {
- type: [Boolean, Object],
- default: undefined
- },
- autoplay: {
- type: [Boolean, Object],
- default: undefined
- },
- controller: {
- type: Object,
- default: undefined
- },
- coverflowEffect: {
- type: Object,
- default: undefined
- },
- cubeEffect: {
- type: Object,
- default: undefined
- },
- fadeEffect: {
- type: Object,
- default: undefined
- },
- flipEffect: {
- type: Object,
- default: undefined
- },
- creativeEffect: {
- type: Object,
- default: undefined
- },
- cardsEffect: {
- type: Object,
- default: undefined
- },
- hashNavigation: {
- type: [Boolean, Object],
- default: undefined
- },
- history: {
- type: [Boolean, Object],
- default: undefined
- },
- keyboard: {
- type: [Boolean, Object],
- default: undefined
- },
- mousewheel: {
- type: [Boolean, Object],
- default: undefined
- },
- navigation: {
- type: [Boolean, Object],
- default: undefined
- },
- pagination: {
- type: [Boolean, Object],
- default: undefined
- },
- parallax: {
- type: [Boolean, Object],
- default: undefined
- },
- scrollbar: {
- type: [Boolean, Object],
- default: undefined
- },
- thumbs: {
- type: Object,
- default: undefined
- },
- virtual: {
- type: [Boolean, Object],
- default: undefined
- },
- zoom: {
- type: [Boolean, Object],
- default: undefined
- },
- grid: {
- type: [Object],
- default: undefined
- },
- freeMode: {
- type: [Boolean, Object],
- default: undefined
- },
- enabled: {
- type: Boolean,
- default: undefined
- }
- },
- emits: ['_beforeBreakpoint', '_containerClasses', '_slideClass', '_slideClasses', '_swiper', '_freeModeNoMomentumRelease', 'activeIndexChange', 'afterInit', 'autoplay', 'autoplayStart', 'autoplayStop', 'autoplayPause', 'autoplayResume', 'autoplayTimeLeft', 'beforeDestroy', 'beforeInit', 'beforeLoopFix', 'beforeResize', 'beforeSlideChangeStart', 'beforeTransitionStart', 'breakpoint', 'changeDirection', 'click', 'disable', 'doubleTap', 'doubleClick', 'destroy', 'enable', 'fromEdge', 'hashChange', 'hashSet', 'init', 'keyPress', 'lock', 'loopFix', 'momentumBounce', 'navigationHide', 'navigationShow', 'navigationPrev', 'navigationNext', 'observerUpdate', 'orientationchange', 'paginationHide', 'paginationRender', 'paginationShow', 'paginationUpdate', 'progress', 'reachBeginning', 'reachEnd', 'realIndexChange', 'resize', 'scroll', 'scrollbarDragEnd', 'scrollbarDragMove', 'scrollbarDragStart', 'setTransition', 'setTranslate', 'slidesUpdated', 'slideChange', 'slideChangeTransitionEnd', 'slideChangeTransitionStart', 'slideNextTransitionEnd', 'slideNextTransitionStart', 'slidePrevTransitionEnd', 'slidePrevTransitionStart', 'slideResetTransitionStart', 'slideResetTransitionEnd', 'sliderMove', 'sliderFirstMove', 'slidesLengthChange', 'slidesGridLengthChange', 'snapGridLengthChange', 'snapIndexChange', 'swiper', 'tap', 'toEdge', 'touchEnd', 'touchMove', 'touchMoveOpposite', 'touchStart', 'transitionEnd', 'transitionStart', 'unlock', 'update', 'virtualUpdate', 'zoomChange'],
- setup(props, _ref) {
- let {
- slots: originalSlots,
- emit
- } = _ref;
- const {
- tag: Tag,
- wrapperTag: WrapperTag
- } = props;
- const containerClasses = ref('swiper');
- const virtualData = ref(null);
- const breakpointChanged = ref(false);
- const initializedRef = ref(false);
- const swiperElRef = ref(null);
- const swiperRef = ref(null);
- const oldPassedParamsRef = ref(null);
- const slidesRef = {
- value: []
- };
- const oldSlidesRef = {
- value: []
- };
- const nextElRef = ref(null);
- const prevElRef = ref(null);
- const paginationElRef = ref(null);
- const scrollbarElRef = ref(null);
- const {
- params: swiperParams,
- passedParams
- } = getParams(props, false);
- getChildren(originalSlots, slidesRef, oldSlidesRef);
- oldPassedParamsRef.value = passedParams;
- oldSlidesRef.value = slidesRef.value;
- const onBeforeBreakpoint = () => {
- getChildren(originalSlots, slidesRef, oldSlidesRef);
- breakpointChanged.value = true;
- };
- swiperParams.onAny = function (event) {
- for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
- emit(event, ...args);
- };
- Object.assign(swiperParams.on, {
- _beforeBreakpoint: onBeforeBreakpoint,
- _containerClasses(swiper, classes) {
- containerClasses.value = classes;
- }
- });
- // init Swiper
- const passParams = {
- ...swiperParams
- };
- delete passParams.wrapperClass;
- swiperRef.value = new Swiper$1(passParams);
- if (swiperRef.value.virtual && swiperRef.value.params.virtual.enabled) {
- swiperRef.value.virtual.slides = slidesRef.value;
- const extendWith = {
- cache: false,
- slides: slidesRef.value,
- renderExternal: data => {
- virtualData.value = data;
- },
- renderExternalUpdate: false
- };
- extend(swiperRef.value.params.virtual, extendWith);
- extend(swiperRef.value.originalParams.virtual, extendWith);
- }
- onUpdated(() => {
- // set initialized flag
- if (!initializedRef.value && swiperRef.value) {
- swiperRef.value.emitSlidesClasses();
- initializedRef.value = true;
- }
- // watch for params change
- const {
- passedParams: newPassedParams
- } = getParams(props, false);
- const changedParams = getChangedParams(newPassedParams, oldPassedParamsRef.value, slidesRef.value, oldSlidesRef.value, c => c.props && c.props.key);
- oldPassedParamsRef.value = newPassedParams;
- if ((changedParams.length || breakpointChanged.value) && swiperRef.value && !swiperRef.value.destroyed) {
- updateSwiper({
- swiper: swiperRef.value,
- slides: slidesRef.value,
- passedParams: newPassedParams,
- changedParams,
- nextEl: nextElRef.value,
- prevEl: prevElRef.value,
- scrollbarEl: scrollbarElRef.value,
- paginationEl: paginationElRef.value
- });
- }
- breakpointChanged.value = false;
- });
- provide('swiper', swiperRef);
- // update on virtual update
- watch(virtualData, () => {
- nextTick(() => {
- updateOnVirtualData(swiperRef.value);
- });
- });
- // mount swiper
- onMounted(() => {
- if (!swiperElRef.value) return;
- mountSwiper({
- el: swiperElRef.value,
- nextEl: nextElRef.value,
- prevEl: prevElRef.value,
- paginationEl: paginationElRef.value,
- scrollbarEl: scrollbarElRef.value,
- swiper: swiperRef.value
- }, swiperParams);
- emit('swiper', swiperRef.value);
- });
- onBeforeUnmount(() => {
- if (swiperRef.value && !swiperRef.value.destroyed) {
- swiperRef.value.destroy(true, false);
- }
- });
- // bypass swiper instance to slides
- function renderSlides(slides) {
- if (swiperParams.virtual) {
- return renderVirtual(swiperRef, slides, virtualData.value);
- }
- slides.forEach((slide, index) => {
- if (!slide.props) slide.props = {};
- slide.props.swiperRef = swiperRef;
- slide.props.swiperSlideIndex = index;
- });
- return slides;
- }
- return () => {
- const {
- slides,
- slots
- } = getChildren(originalSlots, slidesRef, oldSlidesRef);
- return h(Tag, {
- ref: swiperElRef,
- class: uniqueClasses(containerClasses.value)
- }, [slots['container-start'], h(WrapperTag, {
- class: wrapperClass(swiperParams.wrapperClass)
- }, [slots['wrapper-start'], renderSlides(slides), slots['wrapper-end']]), needsNavigation(props) && [h('div', {
- ref: prevElRef,
- class: 'swiper-button-prev'
- }), h('div', {
- ref: nextElRef,
- class: 'swiper-button-next'
- })], needsScrollbar(props) && h('div', {
- ref: scrollbarElRef,
- class: 'swiper-scrollbar'
- }), needsPagination(props) && h('div', {
- ref: paginationElRef,
- class: 'swiper-pagination'
- }), slots['container-end']]);
- };
- }
- };
- const SwiperSlide = {
- name: 'SwiperSlide',
- props: {
- tag: {
- type: String,
- default: 'div'
- },
- swiperRef: {
- type: Object,
- required: false
- },
- swiperSlideIndex: {
- type: Number,
- default: undefined,
- required: false
- },
- zoom: {
- type: Boolean,
- default: undefined,
- required: false
- },
- lazy: {
- type: Boolean,
- default: false,
- required: false
- },
- virtualIndex: {
- type: [String, Number],
- default: undefined
- }
- },
- setup(props, _ref) {
- let {
- slots
- } = _ref;
- let eventAttached = false;
- const {
- swiperRef
- } = props;
- const slideElRef = ref(null);
- const slideClasses = ref('swiper-slide');
- const lazyLoaded = ref(false);
- function updateClasses(swiper, el, classNames) {
- if (el === slideElRef.value) {
- slideClasses.value = classNames;
- }
- }
- onMounted(() => {
- if (!swiperRef || !swiperRef.value) return;
- swiperRef.value.on('_slideClass', updateClasses);
- eventAttached = true;
- });
- onBeforeUpdate(() => {
- if (eventAttached || !swiperRef || !swiperRef.value) return;
- swiperRef.value.on('_slideClass', updateClasses);
- eventAttached = true;
- });
- onUpdated(() => {
- if (!slideElRef.value || !swiperRef || !swiperRef.value) return;
- if (typeof props.swiperSlideIndex !== 'undefined') {
- slideElRef.value.swiperSlideIndex = props.swiperSlideIndex;
- }
- if (swiperRef.value.destroyed) {
- if (slideClasses.value !== 'swiper-slide') {
- slideClasses.value = 'swiper-slide';
- }
- }
- });
- onBeforeUnmount(() => {
- if (!swiperRef || !swiperRef.value) return;
- swiperRef.value.off('_slideClass', updateClasses);
- });
- const slideData = computed(() => ({
- isActive: slideClasses.value.indexOf('swiper-slide-active') >= 0,
- isVisible: slideClasses.value.indexOf('swiper-slide-visible') >= 0,
- isPrev: slideClasses.value.indexOf('swiper-slide-prev') >= 0,
- isNext: slideClasses.value.indexOf('swiper-slide-next') >= 0
- }));
- provide('swiperSlide', slideData);
- const onLoad = () => {
- lazyLoaded.value = true;
- };
- return () => {
- return h(props.tag, {
- class: uniqueClasses(`${slideClasses.value}`),
- ref: slideElRef,
- 'data-swiper-slide-index': typeof props.virtualIndex === 'undefined' && swiperRef && swiperRef.value && swiperRef.value.params.loop ? props.swiperSlideIndex : props.virtualIndex,
- onLoadCapture: onLoad
- }, props.zoom ? h('div', {
- class: 'swiper-zoom-container',
- 'data-swiper-zoom': typeof props.zoom === 'number' ? props.zoom : undefined
- }, [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
- class: 'swiper-lazy-preloader'
- })]) : [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
- class: 'swiper-lazy-preloader'
- })]);
- };
- }
- };
- const useSwiperSlide = () => {
- return inject('swiperSlide');
- };
- const useSwiper = () => {
- return inject('swiper');
- };
- export { Swiper, SwiperSlide, useSwiper, useSwiperSlide };
|