ENH: model info display UI

Change-Id: I066c0e7f8ce87ec00b1141a1b44430444a819b42
(cherry picked from commit 05907a1a42da82737090d55046974d401f8af057)

resources/web/include/swiper/vue/get-changed-params.js

@@ -0,0 +1,43 @@
+import { paramsList } from './params-list.js';
+import { isObject } from './utils.js';
+
+function getChangedParams(swiperParams, oldParams, children, oldChildren) {
+  const keys = [];
+  if (!oldParams) return keys;
+
+  const addKey = key => {
+    if (keys.indexOf(key) < 0) keys.push(key);
+  };
+
+  const oldChildrenKeys = oldChildren.map(child => child.props && child.props.key);
+  const childrenKeys = children.map(child => child.props && child.props.key);
+  if (oldChildrenKeys.join('') !== childrenKeys.join('')) keys.push('children');
+  if (oldChildren.length !== children.length) keys.push('children');
+  const watchParams = paramsList.filter(key => key[0] === '_').map(key => key.replace(/_/, ''));
+  watchParams.forEach(key => {
+    if (key in swiperParams && key in oldParams) {
+      if (isObject(swiperParams[key]) && isObject(oldParams[key])) {
+        const newKeys = Object.keys(swiperParams[key]);
+        const oldKeys = Object.keys(oldParams[key]);
+
+        if (newKeys.length !== oldKeys.length) {
+          addKey(key);
+        } else {
+          newKeys.forEach(newKey => {
+            if (swiperParams[key][newKey] !== oldParams[key][newKey]) {
+              addKey(key);
+            }
+          });
+          oldKeys.forEach(oldKey => {
+            if (swiperParams[key][oldKey] !== oldParams[key][oldKey]) addKey(key);
+          });
+        }
+      } else if (swiperParams[key] !== oldParams[key]) {
+        addKey(key);
+      }
+    }
+  });
+  return keys;
+}
+
+export { getChangedParams };

resources/web/include/swiper/vue/get-children.js

@@ -0,0 +1,41 @@
+function getChildren(originalSlots = {}, slidesRef, oldSlidesRef) {
+  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, 'default');
+      } else if (vnode.type && (vnode.type.name === 'SwiperSlide' || vnode.type.name === 'AsyncComponentWrapper')) {
+        slides.push(vnode);
+      } else if (slots[slotName]) {
+        slots[slotName].push(vnode);
+      }
+    });
+  };
+
+  Object.keys(originalSlots).forEach(slotName => {
+    const els = originalSlots[slotName]();
+    getSlidesFromElements(els, slotName);
+  });
+  oldSlidesRef.value = slidesRef.value;
+  slidesRef.value = slides;
+  return {
+    slides,
+    slots
+  };
+}
+
+export { getChildren };

resources/web/include/swiper/vue/get-params.js

@@ -0,0 +1,48 @@
+import Swiper from 'swiper';
+import { isObject, extend } from './utils.js';
+import { paramsList } from './params-list.js';
+
+function getParams(obj = {}) {
+  const params = {
+    on: {}
+  };
+  const passedParams = {};
+  extend(params, Swiper.defaults);
+  extend(params, Swiper.extendedDefaults);
+  params._emitClasses = true;
+  params.init = false;
+  const rest = {};
+  const allowedParams = paramsList.map(key => key.replace(/_/, '')); // Prevent empty Object.keys(obj) array on ios.
+
+  const plainObj = Object.assign({}, obj);
+  Object.keys(plainObj).forEach(key => {
+    if (typeof obj[key] === 'undefined') return;
+
+    if (allowedParams.indexOf(key) >= 0) {
+      if (isObject(obj[key])) {
+        params[key] = {};
+        passedParams[key] = {};
+        extend(params[key], obj[key]);
+        extend(passedParams[key], obj[key]);
+      } else {
+        params[key] = obj[key];
+        passedParams[key] = obj[key];
+      }
+    } else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
+      params.on[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
+    } else {
+      rest[key] = obj[key];
+    }
+  });
+  ['navigation', 'pagination', 'scrollbar'].forEach(key => {
+    if (params[key] === true) params[key] = {};
+    if (params[key] === false) delete params[key];
+  });
+  return {
+    params,
+    passedParams,
+    rest
+  };
+}
+
+export { getParams };

resources/web/include/swiper/vue/init-swiper.js

@@ -0,0 +1,36 @@
+import Swiper from 'swiper';
+import { needsNavigation, needsPagination, needsScrollbar } from './utils.js';
+
+function initSwiper(swiperParams) {
+  return new Swiper(swiperParams);
+}
+
+function mountSwiper({
+  el,
+  nextEl,
+  prevEl,
+  paginationEl,
+  scrollbarEl,
+  swiper
+}, swiperParams) {
+  if (needsNavigation(swiperParams) && nextEl && prevEl) {
+    swiper.params.navigation.nextEl = nextEl;
+    swiper.originalParams.navigation.nextEl = nextEl;
+    swiper.params.navigation.prevEl = prevEl;
+    swiper.originalParams.navigation.prevEl = prevEl;
+  }
+
+  if (needsPagination(swiperParams) && paginationEl) {
+    swiper.params.pagination.el = paginationEl;
+    swiper.originalParams.pagination.el = paginationEl;
+  }
+
+  if (needsScrollbar(swiperParams) && scrollbarEl) {
+    swiper.params.scrollbar.el = scrollbarEl;
+    swiper.originalParams.scrollbar.el = scrollbarEl;
+  }
+
+  swiper.init(el);
+}
+
+export { initSwiper, mountSwiper };

resources/web/include/swiper/vue/loop.js

@@ -0,0 +1,79 @@
+import { h } from 'vue';
+import Swiper from 'swiper';
+
+function calcLoopedSlides(slides, swiperParams) {
+  let slidesPerViewParams = swiperParams.slidesPerView;
+
+  if (swiperParams.breakpoints) {
+    const breakpoint = Swiper.prototype.getBreakpoint(swiperParams.breakpoints);
+    const breakpointOnlyParams = breakpoint in swiperParams.breakpoints ? swiperParams.breakpoints[breakpoint] : undefined;
+
+    if (breakpointOnlyParams && breakpointOnlyParams.slidesPerView) {
+      slidesPerViewParams = breakpointOnlyParams.slidesPerView;
+    }
+  }
+
+  let loopedSlides = Math.ceil(parseFloat(swiperParams.loopedSlides || slidesPerViewParams, 10));
+  loopedSlides += swiperParams.loopAdditionalSlides;
+
+  if (loopedSlides > slides.length) {
+    loopedSlides = slides.length;
+  }
+
+  return loopedSlides;
+}
+
+function renderLoop(swiperRef, slides, swiperParams) {
+  const modifiedSlides = slides.map((child, index) => {
+    if (!child.props) child.props = {};
+    child.props.swiperRef = swiperRef;
+    child.props['data-swiper-slide-index'] = index;
+    return child;
+  });
+
+  function duplicateSlide(child, index, position) {
+    if (!child.props) child.props = {};
+    return h(child.type, { ...child.props,
+      key: `${child.key}-duplicate-${index}-${position}`,
+      class: `${child.props.className || ''} ${swiperParams.slideDuplicateClass} ${child.props.class || ''}`
+    }, child.children);
+  }
+
+  if (swiperParams.loopFillGroupWithBlank) {
+    const blankSlidesNum = swiperParams.slidesPerGroup - modifiedSlides.length % swiperParams.slidesPerGroup;
+
+    if (blankSlidesNum !== swiperParams.slidesPerGroup) {
+      for (let i = 0; i < blankSlidesNum; i += 1) {
+        const blankSlide = h('div', {
+          class: `${swiperParams.slideClass} ${swiperParams.slideBlankClass}`
+        });
+        modifiedSlides.push(blankSlide);
+      }
+    }
+  }
+
+  if (swiperParams.slidesPerView === 'auto' && !swiperParams.loopedSlides) {
+    swiperParams.loopedSlides = modifiedSlides.length;
+  }
+
+  const loopedSlides = calcLoopedSlides(modifiedSlides, swiperParams);
+  const prependSlides = [];
+  const appendSlides = [];
+  modifiedSlides.forEach((child, index) => {
+    if (index < loopedSlides) {
+      appendSlides.push(duplicateSlide(child, index, 'prepend'));
+    }
+
+    if (index < modifiedSlides.length && index >= modifiedSlides.length - loopedSlides) {
+      prependSlides.push(duplicateSlide(child, index, 'append'));
+    }
+  });
+
+  if (swiperRef.value) {
+    swiperRef.value.loopedSlides = loopedSlides;
+  }
+
+  return [...prependSlides, ...modifiedSlides, ...appendSlides];
+}
+
+export { calcLoopedSlides, renderLoop };

resources/web/include/swiper/vue/params-list.js

@@ -0,0 +1,4 @@
+/* underscore in name -> watch for changes */
+const paramsList = ['modules', 'init', '_direction', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', '_spaceBetween', '_slidesPerView', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_preloadImages', 'updateOnImagesReady', '_loop', '_loopAdditionalSlides', '_loopedSlides', '_loopFillGroupWithBlank', 'loopPreventsSlide', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideBlankClass', 'slideActiveClass', 'slideDuplicateActiveClass', 'slideVisibleClass', 'slideDuplicateClass', 'slideNextClass', 'slideDuplicateNextClass', 'slidePrevClass', 'slideDuplicatePrevClass', 'wrapperClass', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren', // modules
+'a11y', 'autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'lazy', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom'];
+export { paramsList };

resources/web/include/swiper/vue/swiper-slide.js

@@ -0,0 +1,83 @@
+import { h, ref, onMounted, onUpdated, onBeforeUpdate, computed, onBeforeUnmount } from 'vue';
+import { uniqueClasses } from './utils.js';
+const SwiperSlide = {
+  name: 'SwiperSlide',
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    swiperRef: {
+      type: Object,
+      required: false
+    },
+    zoom: {
+      type: Boolean,
+      default: undefined
+    },
+    virtualIndex: {
+      type: [String, Number],
+      default: undefined
+    }
+  },
+
+  setup(props, {
+    slots
+  }) {
+    let eventAttached = false;
+    const {
+      swiperRef
+    } = props;
+    const slideElRef = ref(null);
+    const slideClasses = ref('swiper-slide');
+
+    function updateClasses(swiper, el, classNames) {
+      if (el === slideElRef.value) {
+        slideClasses.value = classNames;
+      }
+    }
+
+    onMounted(() => {
+      if (!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 (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 || slideClasses.value.indexOf('swiper-slide-duplicate-active') >= 0,
+      isVisible: slideClasses.value.indexOf('swiper-slide-visible') >= 0,
+      isDuplicate: slideClasses.value.indexOf('swiper-slide-duplicate') >= 0,
+      isPrev: slideClasses.value.indexOf('swiper-slide-prev') >= 0 || slideClasses.value.indexOf('swiper-slide-duplicate-prev') >= 0,
+      isNext: slideClasses.value.indexOf('swiper-slide-next') >= 0 || slideClasses.value.indexOf('swiper-slide-duplicate-next') >= 0
+    }));
+    return () => {
+      return h(props.tag, {
+        class: uniqueClasses(`${slideClasses.value}`),
+        ref: slideElRef,
+        'data-swiper-slide-index': props.virtualIndex
+      }, props.zoom ? h('div', {
+        class: 'swiper-zoom-container',
+        'data-swiper-zoom': typeof props.zoom === 'number' ? props.zoom : undefined
+      }, slots.default && slots.default(slideData.value)) : slots.default && slots.default(slideData.value));
+    };
+  }
+
+};
+export { SwiperSlide };

resources/web/include/swiper/vue/swiper-vue.d.ts

@@ -0,0 +1,859 @@
+import {
+  A11yOptions,
+  AutoplayOptions,
+  ControllerOptions,
+  CoverflowEffectOptions,
+  CubeEffectOptions,
+  FadeEffectOptions,
+  FlipEffectOptions,
+  CreativeEffectOptions,
+  CardsEffectOptions,
+  HashNavigationOptions,
+  HistoryOptions,
+  KeyboardOptions,
+  LazyOptions,
+  MousewheelOptions,
+  NavigationOptions,
+  PaginationOptions,
+  ParallaxOptions,
+  ScrollbarOptions,
+  ThumbsOptions,
+  VirtualOptions,
+  ZoomOptions,
+  FreeModeOptions,
+  GridOptions,
+} from '../types';
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+import { SwiperOptions, Swiper as SwiperClass } from '../types';
+
+declare const Swiper: DefineComponent<
+  {
+    tag: {
+      type: StringConstructor;
+      default: string;
+    };
+    wrapperTag: {
+      type: StringConstructor;
+      default: string;
+    };
+    modules: {
+      type: ArrayConstructor;
+      default: undefined;
+    };
+    init: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    direction: {
+      type: PropType<SwiperOptions['direction']>;
+      default: SwiperOptions['direction'];
+    };
+    touchEventsTarget: {
+      type: PropType<SwiperOptions['touchEventsTarget']>;
+      default: undefined;
+    };
+    initialSlide: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    speed: { type: NumberConstructor; default: undefined };
+    cssMode: { type: BooleanConstructor; default: undefined };
+    updateOnWindowResize: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    resizeObserver: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    nested: { type: BooleanConstructor; default: undefined };
+    focusableElements: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    width: { type: NumberConstructor; default: undefined };
+    height: { type: NumberConstructor; default: undefined };
+    preventInteractionOnTransition: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    userAgent: { type: StringConstructor; default: undefined };
+    url: { type: StringConstructor; default: undefined };
+    edgeSwipeDetection: {
+      type: BooleanConstructor | StringConstructor;
+      default: undefined;
+    };
+    edgeSwipeThreshold: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    autoHeight: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    setWrapperSize: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    virtualTranslate: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    effect: {
+      type: PropType<SwiperOptions['effect']>;
+      default: undefined;
+    };
+    breakpoints: {
+      type: PropType<SwiperOptions['breakpoints']>;
+      default: undefined;
+    };
+    spaceBetween: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    slidesPerView: {
+      type: PropType<SwiperOptions['slidesPerView']>;
+      default: undefined;
+    };
+    slidesPerGroup: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    slidesPerGroupSkip: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    slidesPerGroupAuto: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    centeredSlides: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    centeredSlidesBounds: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    slidesOffsetBefore: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    slidesOffsetAfter: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    normalizeSlideIndex: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    centerInsufficientSlides: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    watchOverflow: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    roundLengths: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    touchRatio: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    touchAngle: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    simulateTouch: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    shortSwipes: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    longSwipes: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    longSwipesRatio: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    longSwipesMs: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    followFinger: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    allowTouchMove: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    threshold: { type: NumberConstructor; default: undefined };
+    touchMoveStopPropagation: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    touchStartPreventDefault: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    touchStartForcePreventDefault: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    touchReleaseOnEdges: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    uniqueNavElements: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    resistance: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    resistanceRatio: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    watchSlidesProgress: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    grabCursor: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    preventClicks: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    preventClicksPropagation: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    slideToClickedSlide: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    preloadImages: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    updateOnImagesReady: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    loop: { type: BooleanConstructor; default: undefined };
+    loopAdditionalSlides: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    loopedSlides: {
+      type: NumberConstructor;
+      default: undefined;
+    };
+    loopFillGroupWithBlank: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    loopPreventsSlide: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    allowSlidePrev: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    allowSlideNext: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    swipeHandler: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    noSwiping: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    noSwipingClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    noSwipingSelector: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    passiveListeners: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    containerModifierClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slideClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slideBlankClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slideActiveClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slideDuplicateActiveClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slideVisibleClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slideDuplicateClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slideNextClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slideDuplicateNextClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slidePrevClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slideDuplicatePrevClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    wrapperClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    runCallbacksOnInit: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    observer: { type: BooleanConstructor; default: undefined };
+    observeParents: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    observeSlideChildren: {
+      type: BooleanConstructor;
+      default: undefined;
+    };
+    a11y: {
+      type: PropType<A11yOptions | boolean>;
+      default: undefined;
+    };
+    autoplay: {
+      type: PropType<AutoplayOptions | boolean>;
+      default: undefined;
+    };
+    controller: {
+      type: PropType<ControllerOptions>;
+      default: undefined;
+    };
+    coverflowEffect: {
+      type: PropType<CoverflowEffectOptions>;
+      default: undefined;
+    };
+    cubeEffect: {
+      type: PropType<CubeEffectOptions>;
+      default: undefined;
+    };
+    fadeEffect: {
+      type: PropType<FadeEffectOptions>;
+      default: undefined;
+    };
+    flipEffect: {
+      type: PropType<FlipEffectOptions>;
+      default: undefined;
+    };
+    creativeEffect: {
+      type: PropType<CreativeEffectOptions>;
+      default: undefined;
+    };
+    cardsEffect: {
+      type: PropType<CardsEffectOptions>;
+      default: undefined;
+    };
+    hashNavigation: {
+      type: PropType<HashNavigationOptions | boolean>;
+      default: undefined;
+    };
+    history: {
+      type: PropType<HistoryOptions | boolean>;
+      default: undefined;
+    };
+    keyboard: {
+      type: PropType<KeyboardOptions | boolean>;
+      default: undefined;
+    };
+    lazy: {
+      type: PropType<LazyOptions | boolean>;
+      default: undefined;
+    };
+    mousewheel: {
+      type: PropType<MousewheelOptions | boolean>;
+      default: undefined;
+    };
+    navigation: {
+      type: PropType<NavigationOptions | boolean>;
+      default: undefined;
+    };
+    pagination: {
+      type: PropType<PaginationOptions | boolean>;
+      default: undefined;
+    };
+    parallax: {
+      type: PropType<ParallaxOptions | boolean>;
+      default: undefined;
+    };
+    scrollbar: {
+      type: PropType<ScrollbarOptions | boolean>;
+      default: undefined;
+    };
+    thumbs: { type: PropType<ThumbsOptions>; default: undefined };
+    virtual: {
+      type: PropType<VirtualOptions | boolean>;
+      default: undefined;
+    };
+    zoom: {
+      type: PropType<ZoomOptions | boolean>;
+      default: undefined;
+    };
+    freeMode: {
+      type: PropType<FreeModeOptions | boolean>;
+      default: undefined;
+    };
+    grid: {
+      type: PropType<GridOptions>;
+      default: undefined;
+    };
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  {
+    swiper: (swiper: SwiperClass) => void;
+    /**
+   * Event will be fired in when autoplay started
+   */
+  autoplayStart: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when autoplay stopped
+   */
+  autoplayStop: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when slide changed with autoplay
+   */
+  autoplay: (swiper: SwiperClass) => void;/**
+   * Event will be fired on window hash change
+   */
+  hashChange: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when swiper updates the hash
+   */
+  hashSet: (swiper: SwiperClass) => void;/**
+   * Event will be fired on mousewheel scroll
+   */
+  scroll: (swiper: SwiperClass, event: WheelEvent) => void;/**
+   * Event will be fired in the beginning of lazy loading of image
+   */
+  lazyImageLoad: (swiper: SwiperClass, slideEl: HTMLElement, imageEl: HTMLElement) => void;
+  /**
+   * Event will be fired when lazy loading image will be loaded
+   */
+  lazyImageReady: (swiper: SwiperClass, slideEl: HTMLElement, imageEl: HTMLElement) => void;/**
+   * Event will be fired on key press
+   */
+  keyPress: (swiper: SwiperClass, keyCode: string) => void;/**
+   * Event will be fired on navigation hide
+   */
+  navigationHide: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired on navigation show
+   */
+  navigationShow: (swiper: SwiperClass) => void;/**
+   * Event will be fired on draggable scrollbar drag start
+   */
+  scrollbarDragStart: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired on draggable scrollbar drag move
+   */
+  scrollbarDragMove: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired on draggable scrollbar drag end
+   */
+  scrollbarDragEnd: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;/**
+   * Event will be fired after pagination rendered
+   */
+  paginationRender: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
+
+  /**
+   * Event will be fired when pagination updated
+   */
+  paginationUpdate: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
+
+  /**
+   * Event will be fired on pagination hide
+   */
+  paginationHide: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired on pagination show
+   */
+  paginationShow: (swiper: SwiperClass) => void;/**
+   * Event will be fired on zoom change
+   */
+  zoomChange: (swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
+    
+  /**
+   * Fired right after Swiper initialization.
+   * @note Note that with `swiper.on('init')` syntax it will
+   * work only in case you set `init: false` parameter.
+   *
+   * @example
+   * ```js
+   * const swiper = new Swiper('.swiper', {
+   *   init: false,
+   *   // other parameters
+   * });
+   * swiper.on('init', function() {
+   *  // do something
+   * });
+   * // init Swiper
+   * swiper.init();
+   * ```
+   *
+   * @example
+   * ```js
+   * // Otherwise use it as the parameter:
+   * const swiper = new Swiper('.swiper', {
+   *   // other parameters
+   *   on: {
+   *     init: function () {
+   *       // do something
+   *     },
+   *   }
+   * });
+   * ```
+   */
+  init: (swiper: SwiperClass) => any;
+
+  /**
+   * Event will be fired right before Swiper destroyed
+   */
+  beforeDestroy: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when currently active slide is changed
+   */
+  slideChange: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired in the beginning of animation to other slide (next or previous).
+   */
+  slideChangeTransitionStart: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired after animation to other slide (next or previous).
+   */
+  slideChangeTransitionEnd: (swiper: SwiperClass) => void;
+
+  /**
+   * Same as "slideChangeTransitionStart" but for "forward" direction only
+   */
+  slideNextTransitionStart: (swiper: SwiperClass) => void;
+
+  /**
+   * Same as "slideChangeTransitionEnd" but for "forward" direction only
+   */
+  slideNextTransitionEnd: (swiper: SwiperClass) => void;
+
+  /**
+   * Same as "slideChangeTransitionStart" but for "backward" direction only
+   */
+  slidePrevTransitionStart: (swiper: SwiperClass) => void;
+
+  /**
+   * Same as "slideChangeTransitionEnd" but for "backward" direction only
+   */
+  slidePrevTransitionEnd: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired in the beginning of transition.
+   */
+  transitionStart: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired after transition.
+   */
+  transitionEnd: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when user touch Swiper. Receives `touchstart` event as an arguments.
+   */
+  touchStart: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user touch and move finger over Swiper. Receives `touchmove` event as an arguments.
+   */
+  touchMove: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives `touchmove` event as an arguments.
+   */
+  touchMoveOpposite: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user touch and move finger over Swiper and move it. Receives `touchmove` event as an arguments.
+   */
+  sliderMove: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user release Swiper. Receives `touchend` event as an arguments.
+   */
+  touchEnd: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user click/tap on Swiper. Receives `touchend` event as an arguments.
+   */
+  click: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user click/tap on Swiper. Receives `touchend` event as an arguments.
+   */
+  tap: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired when user double tap on Swiper's container. Receives `touchend` event as an arguments
+   */
+  doubleTap: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
+  /**
+   * Event will be fired right after all inner images are loaded. updateOnImagesReady should be also enabled
+   */
+  imagesReady: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
+   */
+  progress: (swiper: SwiperClass, progress: number) => void;
+
+  /**
+   * Event will be fired when Swiper reach its beginning (initial position)
+   */
+  reachBeginning: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when Swiper reach last slide
+   */
+  reachEnd: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when Swiper goes to beginning or end position
+   */
+  toEdge: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when Swiper goes from beginning or end position
+   */
+  fromEdge: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments
+   */
+  setTranslate: (swiper: SwiperClass, translate: number) => void;
+
+  /**
+   * Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments
+   */
+  setTransition: (swiper: SwiperClass, transition: number) => void;
+
+  /**
+   * Event will be fired on window resize right before swiper's onresize manipulation
+   */
+  resize: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired if observer is enabled and it detects DOM mutations
+   */
+  observerUpdate: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired right before "loop fix"
+   */
+  beforeLoopFix: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired after "loop fix"
+   */
+  loopFix: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will be fired on breakpoint change
+   */
+  breakpoint: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
+
+  /**
+   * !INTERNAL: Event will fired right before breakpoint change
+   */
+  _beforeBreakpoint: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
+
+  /**
+   * !INTERNAL: Event will fired after setting CSS classes on swiper container element
+   */
+  _containerClasses: (swiper: SwiperClass, classNames: string) => void;
+
+  /**
+   * !INTERNAL: Event will fired after setting CSS classes on swiper slide element
+   */
+  _slideClass: (swiper: SwiperClass, slideEl: HTMLElement, classNames: string) => void;
+
+  /**
+   * !INTERNAL: Event will fired after setting CSS classes on all swiper slides
+   */
+  _slideClasses: (
+    swiper: SwiperClass,
+    slides: { slideEl: HTMLElement; classNames: string; index: number }[],
+  ) => void;
+
+  /**
+   * !INTERNAL: Event will fired as soon as swiper instance available (before init)
+   */
+  _swiper: (swiper: SwiperClass) => void;
+
+  /**
+   * !INTERNAL: Event will be fired on free mode touch end (release) and there will no be momentum
+   */
+  _freeModeNoMomentumRelease: (swiper: SwiperClass) => void;
+
+  /**
+   * Event will fired on active index change
+   */
+  activeIndexChange: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired on snap index change
+   */
+  snapIndexChange: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired on real index change
+   */
+  realIndexChange: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired right after initialization
+   */
+  afterInit: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired right before initialization
+   */
+  beforeInit: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired before resize handler
+   */
+  beforeResize: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired before slide change transition start
+   */
+  beforeSlideChangeStart: (swiper: SwiperClass) => void;
+  /**
+   * Event will fired before transition start
+   */
+  beforeTransitionStart: (swiper: SwiperClass, speed: number, internal: any) => void; // what is internal?
+  /**
+   * Event will fired on direction change
+   */
+  changeDirection: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when user double click/tap on Swiper
+   */
+  doubleClick: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+  /**
+   * Event will be fired on swiper destroy
+   */
+  destroy: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired on momentum bounce
+   */
+  momentumBounce: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired on orientation change (e.g. landscape -> portrait)
+   */
+  orientationchange: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired in the beginning of animation of resetting slide to current one
+   */
+  slideResetTransitionStart: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired in the end of animation of resetting slide to current one
+   */
+  slideResetTransitionEnd: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired with first touch/drag move
+   */
+  sliderFirstMove: (swiper: SwiperClass, event: TouchEvent) => void;
+  /**
+   * Event will be fired when number of slides has changed
+   */
+  slidesLengthChange: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when slides grid has changed
+   */
+  slidesGridLengthChange: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when snap grid has changed
+   */
+  snapGridLengthChange: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired after swiper.update() call
+   */
+  update: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when swiper is locked (when `watchOverflow` enabled)
+   */
+  lock: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired when swiper is unlocked (when `watchOverflow` enabled)
+   */
+  unlock: (swiper: SwiperClass) => void;
+  
+  }
+>;
+
+declare const SwiperSlide: DefineComponent<{
+  tag: {
+    type: StringConstructor;
+    default: string;
+  };
+  swiperRef: { type: PropType<SwiperClass>; required: false };
+  zoom: { type: BooleanConstructor; default: undefined };
+  virtualIndex: {
+    type: StringConstructor | NumberConstructor;
+    default: undefined;
+  };
+}>;
+
+export { Swiper, SwiperSlide };

resources/web/include/swiper/vue/swiper-vue.js

@@ -0,0 +1,15 @@
+/**
+ * Swiper Vue 7.2.0
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2021 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: October 27, 2021
+ */
+
+import { Swiper } from './swiper.js';
+import { SwiperSlide } from './swiper-slide.js';
+export { Swiper, SwiperSlide };

resources/web/include/swiper/vue/swiper.js

@@ -0,0 +1,640 @@
+import { h, ref, onMounted, onUpdated, onBeforeUnmount, watch, nextTick } from 'vue';
+import { getParams } from './get-params.js';
+import { initSwiper, mountSwiper } from './init-swiper.js';
+import { needsScrollbar, needsNavigation, needsPagination, uniqueClasses, extend } from './utils.js';
+import { renderLoop, calcLoopedSlides } from './loop.js';
+import { getChangedParams } from './get-changed-params.js';
+import { getChildren } from './get-children.js';
+import { updateSwiper } from './update-swiper.js';
+import { renderVirtual, updateOnVirtualData } from './virtual.js';
+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
+    },
+    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
+    },
+    spaceBetween: {
+      type: Number,
+      default: undefined
+    },
+    slidesPerView: {
+      type: [Number, String],
+      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
+    },
+    preloadImages: {
+      type: Boolean,
+      default: undefined
+    },
+    updateOnImagesReady: {
+      type: Boolean,
+      default: undefined
+    },
+    loop: {
+      type: Boolean,
+      default: undefined
+    },
+    loopAdditionalSlides: {
+      type: Number,
+      default: undefined
+    },
+    loopedSlides: {
+      type: Number,
+      default: undefined
+    },
+    loopFillGroupWithBlank: {
+      type: Boolean,
+      default: undefined
+    },
+    loopPreventsSlide: {
+      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
+    },
+    slideBlankClass: {
+      type: String,
+      default: undefined
+    },
+    slideActiveClass: {
+      type: String,
+      default: undefined
+    },
+    slideDuplicateActiveClass: {
+      type: String,
+      default: undefined
+    },
+    slideVisibleClass: {
+      type: String,
+      default: undefined
+    },
+    slideDuplicateClass: {
+      type: String,
+      default: undefined
+    },
+    slideNextClass: {
+      type: String,
+      default: undefined
+    },
+    slideDuplicateNextClass: {
+      type: String,
+      default: undefined
+    },
+    slidePrevClass: {
+      type: String,
+      default: undefined
+    },
+    slideDuplicatePrevClass: {
+      type: String,
+      default: undefined
+    },
+    wrapperClass: {
+      type: String,
+      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
+    },
+    lazy: {
+      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
+    }
+  },
+  emits: ['_beforeBreakpoint', '_containerClasses', '_slideClass', '_slideClasses', '_swiper', 'activeIndexChange', 'afterInit', 'autoplay', 'autoplayStart', 'autoplayStop', 'beforeDestroy', 'beforeInit', 'beforeLoopFix', 'beforeResize', 'beforeSlideChangeStart', 'beforeTransitionStart', 'breakpoint', 'changeDirection', 'click', 'disable', 'doubleTap', 'doubleClick', 'destroy', 'enable', 'fromEdge', 'hashChange', 'hashSet', 'imagesReady', 'init', 'keyPress', 'lazyImageLoad', 'lazyImageReady', 'lock', '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', 'unlock', 'update', 'zoomChange'],
+
+  setup(props, {
+    slots: originalSlots,
+    emit
+  }) {
+    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);
+    getChildren(originalSlots, slidesRef, oldSlidesRef);
+    oldPassedParamsRef.value = passedParams;
+    oldSlidesRef.value = slidesRef.value;
+
+    const onBeforeBreakpoint = () => {
+      getChildren(originalSlots, slidesRef, oldSlidesRef);
+      breakpointChanged.value = true;
+    };
+
+    swiperParams.onAny = (event, ...args) => {
+      emit(event, ...args);
+    };
+
+    Object.assign(swiperParams.on, {
+      _beforeBreakpoint: onBeforeBreakpoint,
+
+      _containerClasses(swiper, classes) {
+        containerClasses.value = classes;
+      }
+
+    }); // init Swiper
+
+    swiperRef.value = initSwiper(swiperParams);
+
+    swiperRef.value.loopCreate = () => {};
+
+    swiperRef.value.loopDestroy = () => {};
+
+    if (swiperParams.loop) {
+      swiperRef.value.loopedSlides = calcLoopedSlides(slidesRef.value, swiperParams);
+    }
+
+    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);
+      const changedParams = getChangedParams(newPassedParams, oldPassedParamsRef.value, slidesRef.value, oldSlidesRef.value);
+      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;
+    }); // 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);
+      }
+
+      if (!swiperParams.loop || swiperRef.value && swiperRef.value.destroyed) {
+        slides.forEach(slide => {
+          if (!slide.props) slide.props = {};
+          slide.props.swiperRef = swiperRef;
+        });
+        return slides;
+      }
+
+      return renderLoop(swiperRef, slides, swiperParams);
+    }
+
+    return () => {
+      const {
+        slides,
+        slots
+      } = getChildren(originalSlots, slidesRef, oldSlidesRef);
+      return h(Tag, {
+        ref: swiperElRef,
+        class: uniqueClasses(containerClasses.value)
+      }, [slots['container-start'], 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'
+      }), h(WrapperTag, {
+        class: 'swiper-wrapper'
+      }, [slots['wrapper-start'], renderSlides(slides), slots['wrapper-end']]), slots['container-end']]);
+    };
+  }
+
+};
+export { Swiper };

resources/web/include/swiper/vue/update-swiper.js

@@ -0,0 +1,131 @@
+import { isObject, extend } from './utils.js';
+
+function updateSwiper({
+  swiper,
+  slides,
+  passedParams,
+  changedParams,
+  nextEl,
+  prevEl,
+  paginationEl,
+  scrollbarEl
+}) {
+  const updateParams = changedParams.filter(key => key !== 'children' && key !== 'direction');
+  const {
+    params: currentParams,
+    pagination,
+    navigation,
+    scrollbar,
+    virtual,
+    thumbs
+  } = swiper;
+  let needThumbsInit;
+  let needControllerInit;
+  let needPaginationInit;
+  let needScrollbarInit;
+  let needNavigationInit;
+
+  if (changedParams.includes('thumbs') && passedParams.thumbs && passedParams.thumbs.swiper && currentParams.thumbs && !currentParams.thumbs.swiper) {
+    needThumbsInit = true;
+  }
+
+  if (changedParams.includes('controller') && passedParams.controller && passedParams.controller.control && currentParams.controller && !currentParams.controller.control) {
+    needControllerInit = true;
+  }
+
+  if (changedParams.includes('pagination') && passedParams.pagination && (passedParams.pagination.el || paginationEl) && (currentParams.pagination || currentParams.pagination === false) && pagination && !pagination.el) {
+    needPaginationInit = true;
+  }
+
+  if (changedParams.includes('scrollbar') && passedParams.scrollbar && (passedParams.scrollbar.el || scrollbarEl) && (currentParams.scrollbar || currentParams.scrollbar === false) && scrollbar && !scrollbar.el) {
+    needScrollbarInit = true;
+  }
+
+  if (changedParams.includes('navigation') && passedParams.navigation && (passedParams.navigation.prevEl || prevEl) && (passedParams.navigation.nextEl || nextEl) && (currentParams.navigation || currentParams.navigation === false) && navigation && !navigation.prevEl && !navigation.nextEl) {
+    needNavigationInit = true;
+  }
+
+  const destroyModule = mod => {
+    if (!swiper[mod]) return;
+    swiper[mod].destroy();
+
+    if (mod === 'navigation') {
+      currentParams[mod].prevEl = undefined;
+      currentParams[mod].nextEl = undefined;
+      swiper[mod].prevEl = undefined;
+      swiper[mod].nextEl = undefined;
+    } else {
+      currentParams[mod].el = undefined;
+      swiper[mod].el = undefined;
+    }
+  };
+
+  updateParams.forEach(key => {
+    if (isObject(currentParams[key]) && isObject(passedParams[key])) {
+      extend(currentParams[key], passedParams[key]);
+    } else {
+      const newValue = passedParams[key];
+
+      if ((newValue === true || newValue === false) && (key === 'navigation' || key === 'pagination' || key === 'scrollbar')) {
+        if (newValue === false) {
+          destroyModule(key);
+        }
+      } else {
+        currentParams[key] = passedParams[key];
+      }
+    }
+  });
+
+  if (changedParams.includes('children') && virtual && currentParams.virtual.enabled) {
+    virtual.slides = slides;
+    virtual.update(true);
+  } else if (changedParams.includes('children') && swiper.lazy && swiper.params.lazy.enabled) {
+    swiper.lazy.load();
+  }
+
+  if (needThumbsInit) {
+    const initialized = thumbs.init();
+    if (initialized) thumbs.update(true);
+  }
+
+  if (needControllerInit) {
+    swiper.controller.control = currentParams.controller.control;
+  }
+
+  if (needPaginationInit) {
+    if (paginationEl) currentParams.pagination.el = paginationEl;
+    pagination.init();
+    pagination.render();
+    pagination.update();
+  }
+
+  if (needScrollbarInit) {
+    if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
+    scrollbar.init();
+    scrollbar.updateSize();
+    scrollbar.setTranslate();
+  }
+
+  if (needNavigationInit) {
+    if (nextEl) currentParams.navigation.nextEl = nextEl;
+    if (prevEl) currentParams.navigation.prevEl = prevEl;
+    navigation.init();
+    navigation.update();
+  }
+
+  if (changedParams.includes('allowSlideNext')) {
+    swiper.allowSlideNext = passedParams.allowSlideNext;
+  }
+
+  if (changedParams.includes('allowSlidePrev')) {
+    swiper.allowSlidePrev = passedParams.allowSlidePrev;
+  }
+
+  if (changedParams.includes('direction')) {
+    swiper.changeDirection(passedParams.direction, false);
+  }
+
+  swiper.update();
+}
+
+export { updateSwiper };

resources/web/include/swiper/vue/utils.js

@@ -0,0 +1,37 @@
+function isObject(o) {
+  return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object';
+}
+
+function extend(target, src) {
+  const noExtend = ['__proto__', 'constructor', 'prototype'];
+  Object.keys(src).filter(key => noExtend.indexOf(key) < 0).forEach(key => {
+    if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
+      if (src[key].__swiper__) target[key] = src[key];else extend(target[key], src[key]);
+    } else {
+      target[key] = src[key];
+    }
+  });
+}
+
+function needsNavigation(props = {}) {
+  return props.navigation && typeof props.navigation.nextEl === 'undefined' && typeof props.navigation.prevEl === 'undefined';
+}
+
+function needsPagination(props = {}) {
+  return props.pagination && typeof props.pagination.el === 'undefined';
+}
+
+function needsScrollbar(props = {}) {
+  return props.scrollbar && typeof props.scrollbar.el === 'undefined';
+}
+
+function uniqueClasses(classNames = '') {
+  const classes = classNames.split(' ').map(c => c.trim()).filter(c => !!c);
+  const unique = [];
+  classes.forEach(c => {
+    if (unique.indexOf(c) < 0) unique.push(c);
+  });
+  return unique.join(' ');
+}
+
+export { isObject, extend, needsNavigation, needsPagination, needsScrollbar, uniqueClasses };

resources/web/include/swiper/vue/virtual.js

@@ -0,0 +1,35 @@
+import { h } from 'vue';
+
+function updateOnVirtualData(swiper) {
+  if (!swiper || swiper.destroyed || !swiper.params.virtual || swiper.params.virtual && !swiper.params.virtual.enabled) return;
+  swiper.updateSlides();
+  swiper.updateProgress();
+  swiper.updateSlidesClasses();
+
+  if (swiper.lazy && swiper.params.lazy.enabled) {
+    swiper.lazy.load();
+  }
+
+  if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
+    swiper.parallax.setTranslate();
+  }
+}
+
+function renderVirtual(swiperRef, slides, virtualData) {
+  if (!virtualData) return null;
+  const style = swiperRef.value.isHorizontal() ? {
+    [swiperRef.value.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
+  } : {
+    top: `${virtualData.offset}px`
+  };
+  return slides.filter((slide, index) => index >= virtualData.from && index <= virtualData.to).map(slide => {
+    if (!slide.props) slide.props = {};
+    if (!slide.props.style) slide.props.style = {};
+    slide.props.swiperRef = swiperRef;
+    slide.props.style = style;
+    return h(slide.type, { ...slide.props
+    }, slide.children);
+  });
+}
+
+export { renderVirtual, updateOnVirtualData };