| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501 |
- /*!
- * vue-awesome-swiper v4.1.1
- * Copyright (c) Surmon. All rights reserved.
- * Released under the MIT License.
- * Surmon <https://github.com/surmon-china>
- */
- import SwiperClass from 'swiper';
- import Vue from 'vue';
- /**
- * @file vue-awesome-swiper
- * @module constants
- * @author Surmon <https://github.com/surmon-china>
- */
- var CoreNames;
- (function (CoreNames) {
- CoreNames["SwiperComponent"] = "Swiper";
- CoreNames["SwiperSlideComponent"] = "SwiperSlide";
- CoreNames["SwiperDirective"] = "swiper";
- CoreNames["SwiperInstance"] = "$swiper";
- })(CoreNames || (CoreNames = {}));
- var DEFAULT_CLASSES = Object.freeze({
- containerClass: 'swiper-container',
- wrapperClass: 'swiper-wrapper',
- slideClass: 'swiper-slide'
- });
- var ComponentEvents;
- (function (ComponentEvents) {
- ComponentEvents["Ready"] = "ready";
- ComponentEvents["ClickSlide"] = "clickSlide";
- })(ComponentEvents || (ComponentEvents = {}));
- var ComponentPropNames;
- (function (ComponentPropNames) {
- ComponentPropNames["AutoUpdate"] = "autoUpdate";
- ComponentPropNames["AutoDestroy"] = "autoDestroy";
- ComponentPropNames["DeleteInstanceOnDestroy"] = "deleteInstanceOnDestroy";
- ComponentPropNames["CleanupStylesOnDestroy"] = "cleanupStylesOnDestroy";
- })(ComponentPropNames || (ComponentPropNames = {}));
- // https://swiperjs.com/api/#events
- var SWIPER_EVENTS = [
- 'init',
- 'beforeDestroy',
- 'slideChange',
- 'slideChangeTransitionStart',
- 'slideChangeTransitionEnd',
- 'slideNextTransitionStart',
- 'slideNextTransitionEnd',
- 'slidePrevTransitionStart',
- 'slidePrevTransitionEnd',
- 'transitionStart',
- 'transitionEnd',
- 'touchStart',
- 'touchMove',
- 'touchMoveOpposite',
- 'sliderMove',
- 'touchEnd',
- 'click',
- 'tap',
- 'doubleTap',
- 'imagesReady',
- 'progress',
- 'reachBeginning',
- 'reachEnd',
- 'fromEdge',
- 'setTranslate',
- 'setTransition',
- 'resize',
- 'observerUpdate',
- 'beforeLoopFix',
- 'loopFix'
- ];
- /*! *****************************************************************************
- Copyright (c) Microsoft Corporation. All rights reserved.
- Licensed under the Apache License, Version 2.0 (the "License"); you may not use
- this file except in compliance with the License. You may obtain a copy of the
- License at http://www.apache.org/licenses/LICENSE-2.0
- THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
- WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
- MERCHANTABLITY OR NON-INFRINGEMENT.
- See the Apache Version 2.0 License for specific language governing permissions
- and limitations under the License.
- ***************************************************************************** */
- function __spreadArrays() {
- for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
- for (var r = Array(s), k = 0, i = 0; i < il; i++)
- for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
- r[k] = a[j];
- return r;
- }
- /**
- * @file vue-awesome-swiper
- * @module utils
- * @author Surmon <https://github.com/surmon-china>
- */
- var kebabcase = function (string) {
- return string
- .replace(/([a-z])([A-Z])/g, '$1-$2')
- .replace(/\s+/g, '-')
- .toLowerCase();
- };
- /**
- * @file vue-awesome-swiper
- * @module event
- * @author Surmon <https://github.com/surmon-china>
- */
- var handleClickSlideEvent = function (swiper, event, emit) {
- var _a, _b, _c;
- if (swiper && !(swiper.destroyed)) {
- var eventPath = ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)) || event.path;
- if ((event === null || event === void 0 ? void 0 : event.target) && eventPath) {
- var slides_1 = Array.from(swiper.slides);
- var paths = Array.from(eventPath);
- // Click slide || slide[children]
- if (slides_1.includes(event.target) || paths.some(function (item) { return slides_1.includes(item); })) {
- var clickedIndex = swiper.clickedIndex;
- var reallyIndex = Number((_c = (_b = swiper.clickedSlide) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.swiperSlideIndex);
- var reallyIndexValue = Number.isInteger(reallyIndex) ? reallyIndex : null;
- emit(ComponentEvents.ClickSlide, clickedIndex, reallyIndexValue);
- emit(kebabcase(ComponentEvents.ClickSlide), clickedIndex, reallyIndexValue);
- }
- }
- }
- };
- var bindSwiperEvents = function (swiper, emit) {
- SWIPER_EVENTS.forEach(function (eventName) {
- swiper.on(eventName, function () {
- var arguments$1 = arguments;
- var args = [];
- for (var _i = 0; _i < arguments.length; _i++) {
- args[_i] = arguments$1[_i];
- }
- emit.apply(void 0, __spreadArrays([eventName], args));
- var kebabcaseName = kebabcase(eventName);
- if (kebabcaseName !== eventName) {
- emit.apply(void 0, __spreadArrays([kebabcaseName], args));
- }
- });
- });
- };
- /**
- * @file vue-awesome-swiper
- * @module directive
- * @author Surmon <https://github.com/surmon-china>
- */
- var INSTANCE_NAME_KEY = 'instanceName';
- function getDirective(SwiperClass, globalOptions) {
- var getStandardisedOptionByAttrs = function (vnode, key) {
- var _a, _b, _c, _d;
- var value = (_b = (_a = vnode.data) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[key];
- return value !== undefined
- ? value
- : (_d = (_c = vnode.data) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d[kebabcase(key)];
- };
- // Get swiper instace name in directive
- var getSwiperInstanceName = function (element, binding, vnode) {
- return (binding.arg ||
- getStandardisedOptionByAttrs(vnode, INSTANCE_NAME_KEY) ||
- element.id ||
- CoreNames.SwiperInstance);
- };
- var getSwiperInstance = function (element, binding, vnode) {
- var instanceName = getSwiperInstanceName(element, binding, vnode);
- return vnode.context[instanceName] || null;
- };
- var getSwipeOptions = function (binding) {
- return binding.value || globalOptions;
- };
- var getBooleanValueByInput = function (input) {
- return [true, undefined, null, ''].includes(input);
- };
- // Emit event in Vue directive
- var getEventEmiter = function (vnode) {
- var _a, _b;
- var handlers = ((_a = vnode.data) === null || _a === void 0 ? void 0 : _a.on) || ((_b = vnode.componentOptions) === null || _b === void 0 ? void 0 : _b.listeners);
- return function (name) {
- var arguments$1 = arguments;
- var args = [];
- for (var _i = 1; _i < arguments.length; _i++) {
- args[_i - 1] = arguments$1[_i];
- }
- var _a;
- var handle = (_a = handlers) === null || _a === void 0 ? void 0 : _a[name];
- if (handle) {
- handle.fns.apply(handle, args);
- }
- };
- };
- return {
- // Init
- bind: function (element, binding, vnode) {
- // auto class name
- if (element.className.indexOf(DEFAULT_CLASSES.containerClass) === -1) {
- element.className += ((element.className ? ' ' : '') + DEFAULT_CLASSES.containerClass);
- }
- // bind click event
- element.addEventListener('click', function (event) {
- var emitEvent = getEventEmiter(vnode);
- var swiper = getSwiperInstance(element, binding, vnode);
- handleClickSlideEvent(swiper, event, emitEvent);
- });
- },
- // DOM inserted
- inserted: function (element, binding, vnode) {
- var context = vnode.context;
- var swiperOptions = getSwipeOptions(binding);
- var instanceName = getSwiperInstanceName(element, binding, vnode);
- var emitEvent = getEventEmiter(vnode);
- var vueContext = context;
- var swiper = vueContext === null || vueContext === void 0 ? void 0 : vueContext[instanceName];
- // Swiper will destroy but not delete instance, when used <keep-alive>
- if (!swiper || swiper.destroyed) {
- swiper = new SwiperClass(element, swiperOptions);
- vueContext[instanceName] = swiper;
- bindSwiperEvents(swiper, emitEvent);
- emitEvent(ComponentEvents.Ready, swiper);
- // MARK: Reinstance when the nexttick with <keep-alive>
- // Vue.nextTick(instancing) | setTimeout(instancing)
- }
- },
- // On options changed or DOM updated
- componentUpdated: function (element, binding, vnode) {
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
- var autoUpdate = getStandardisedOptionByAttrs(vnode, ComponentPropNames.AutoUpdate);
- if (getBooleanValueByInput(autoUpdate)) {
- var swiper = getSwiperInstance(element, binding, vnode);
- if (swiper) {
- var swiperOptions = getSwipeOptions(binding);
- var isLoop = swiperOptions.loop;
- if (isLoop) {
- (_b = (_a = swiper) === null || _a === void 0 ? void 0 : _a.loopDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
- }
- (_c = swiper === null || swiper === void 0 ? void 0 : swiper.update) === null || _c === void 0 ? void 0 : _c.call(swiper);
- (_e = (_d = swiper.navigation) === null || _d === void 0 ? void 0 : _d.update) === null || _e === void 0 ? void 0 : _e.call(_d);
- (_g = (_f = swiper.pagination) === null || _f === void 0 ? void 0 : _f.render) === null || _g === void 0 ? void 0 : _g.call(_f);
- (_j = (_h = swiper.pagination) === null || _h === void 0 ? void 0 : _h.update) === null || _j === void 0 ? void 0 : _j.call(_h);
- if (isLoop) {
- (_l = (_k = swiper) === null || _k === void 0 ? void 0 : _k.loopCreate) === null || _l === void 0 ? void 0 : _l.call(_k);
- (_m = swiper === null || swiper === void 0 ? void 0 : swiper.update) === null || _m === void 0 ? void 0 : _m.call(swiper);
- }
- }
- }
- },
- // Destroy this directive
- unbind: function (element, binding, vnode) {
- var _a;
- var autoDestroy = getStandardisedOptionByAttrs(vnode, ComponentPropNames.AutoDestroy);
- if (getBooleanValueByInput(autoDestroy)) {
- var swiper = getSwiperInstance(element, binding, vnode);
- if (swiper && swiper.initialized) {
- (_a = swiper === null || swiper === void 0 ? void 0 : swiper.destroy) === null || _a === void 0 ? void 0 : _a.call(swiper, getBooleanValueByInput(getStandardisedOptionByAttrs(vnode, ComponentPropNames.DeleteInstanceOnDestroy)), getBooleanValueByInput(getStandardisedOptionByAttrs(vnode, ComponentPropNames.CleanupStylesOnDestroy)));
- }
- }
- }
- };
- }
- /**
- * @file vue-awesome-swiper
- * @module SwiperComponent
- * @author Surmon <https://github.com/surmon-china>
- */
- var SlotNames;
- (function (SlotNames) {
- SlotNames["ParallaxBg"] = "parallax-bg";
- SlotNames["Pagination"] = "pagination";
- SlotNames["Scrollbar"] = "scrollbar";
- SlotNames["PrevButton"] = "button-prev";
- SlotNames["NextButton"] = "button-next";
- })(SlotNames || (SlotNames = {}));
- function getSwiperComponent(SwiperClass) {
- var _a;
- return Vue.extend({
- name: CoreNames.SwiperComponent,
- props: (_a = {
- defaultOptions: {
- type: Object,
- required: false,
- default: function () { return ({}); }
- },
- // eslint-disable-next-line vue/require-default-prop
- options: {
- type: Object,
- required: false
- }
- },
- _a[ComponentPropNames.AutoUpdate] = {
- type: Boolean,
- default: true
- },
- // https://github.com/surmon-china/vue-awesome-swiper/pull/550/files
- _a[ComponentPropNames.AutoDestroy] = {
- type: Boolean,
- default: true
- },
- // https://github.com/surmon-china/vue-awesome-swiper/pull/388
- _a[ComponentPropNames.DeleteInstanceOnDestroy] = {
- type: Boolean,
- required: false,
- default: true
- },
- _a[ComponentPropNames.CleanupStylesOnDestroy] = {
- type: Boolean,
- required: false,
- default: true
- },
- _a),
- data: function () {
- var _a;
- return _a = {},
- _a[CoreNames.SwiperInstance] = null,
- _a;
- },
- computed: {
- swiperInstance: {
- cache: false,
- set: function (swiper) {
- this[CoreNames.SwiperInstance] = swiper;
- },
- get: function () {
- return this[CoreNames.SwiperInstance];
- }
- },
- swiperOptions: function () {
- return this.options || this.defaultOptions;
- },
- wrapperClass: function () {
- return this.swiperOptions.wrapperClass || DEFAULT_CLASSES.wrapperClass;
- }
- },
- methods: {
- // Feature: click event
- handleSwiperClick: function (event) {
- handleClickSlideEvent(this.swiperInstance, event, this.$emit.bind(this));
- },
- autoReLoopSwiper: function () {
- var _a, _b;
- if (this.swiperInstance && this.swiperOptions.loop) {
- // https://github.com/surmon-china/vue-awesome-swiper/issues/593
- // https://github.com/surmon-china/vue-awesome-swiper/issues/544
- // https://github.com/surmon-china/vue-awesome-swiper/pull/545/files
- var swiper = this.swiperInstance;
- (_a = swiper === null || swiper === void 0 ? void 0 : swiper.loopDestroy) === null || _a === void 0 ? void 0 : _a.call(swiper);
- (_b = swiper === null || swiper === void 0 ? void 0 : swiper.loopCreate) === null || _b === void 0 ? void 0 : _b.call(swiper);
- }
- },
- updateSwiper: function () {
- var _a, _b, _c, _d, _e, _f, _g, _h;
- if (this[ComponentPropNames.AutoUpdate] && this.swiperInstance) {
- this.autoReLoopSwiper();
- (_b = (_a = this.swiperInstance) === null || _a === void 0 ? void 0 : _a.update) === null || _b === void 0 ? void 0 : _b.call(_a);
- (_d = (_c = this.swiperInstance.navigation) === null || _c === void 0 ? void 0 : _c.update) === null || _d === void 0 ? void 0 : _d.call(_c);
- (_f = (_e = this.swiperInstance.pagination) === null || _e === void 0 ? void 0 : _e.render) === null || _f === void 0 ? void 0 : _f.call(_e);
- (_h = (_g = this.swiperInstance.pagination) === null || _g === void 0 ? void 0 : _g.update) === null || _h === void 0 ? void 0 : _h.call(_g);
- }
- },
- destroySwiper: function () {
- var _a, _b;
- if (this[ComponentPropNames.AutoDestroy] && this.swiperInstance) {
- // https://github.com/surmon-china/vue-awesome-swiper/pull/341
- // https://github.com/surmon-china/vue-awesome-swiper/issues/340
- if (this.swiperInstance.initialized) {
- (_b = (_a = this.swiperInstance) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a, this[ComponentPropNames.DeleteInstanceOnDestroy], this[ComponentPropNames.CleanupStylesOnDestroy]);
- }
- }
- },
- initSwiper: function () {
- this.swiperInstance = new SwiperClass(this.$el, this.swiperOptions);
- bindSwiperEvents(this.swiperInstance, this.$emit.bind(this));
- this.$emit(ComponentEvents.Ready, this.swiperInstance);
- }
- },
- mounted: function () {
- if (!this.swiperInstance) {
- this.initSwiper();
- }
- },
- // Update swiper when the parent component activated with `keep-alive`.
- activated: function () {
- this.updateSwiper();
- },
- updated: function () {
- this.updateSwiper();
- },
- beforeDestroy: function () {
- // https://github.com/surmon-china/vue-awesome-swiper/commit/2924a9d4d3d1cf51c0d46076410b1f804b2b8a43#diff-7f4e0261ac562c0f354cb91a1ca8864f
- this.$nextTick(this.destroySwiper);
- },
- render: function (createElement) {
- return createElement('div', {
- staticClass: DEFAULT_CLASSES.containerClass,
- on: {
- click: this.handleSwiperClick
- }
- }, [
- this.$slots[SlotNames.ParallaxBg],
- createElement('div', {
- class: this.wrapperClass
- }, this.$slots.default),
- this.$slots[SlotNames.Pagination],
- this.$slots[SlotNames.PrevButton],
- this.$slots[SlotNames.NextButton],
- this.$slots[SlotNames.Scrollbar]
- ]);
- }
- });
- }
- /**
- * @file vue-awesome-swiper
- * @module SwiperSlideComponent
- * @author Surmon <https://github.com/surmon-china>
- */
- var SwiperSlideComponent = Vue.extend({
- name: CoreNames.SwiperSlideComponent,
- computed: {
- slideClass: function () {
- var _a, _b;
- return ((_b = (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.swiperOptions) === null || _b === void 0 ? void 0 : _b.slideClass) || DEFAULT_CLASSES.slideClass;
- }
- },
- methods: {
- update: function () {
- var _a;
- var parent = this.$parent;
- // https://github.com/surmon-china/vue-awesome-swiper/issues/632
- if (parent[ComponentPropNames.AutoUpdate]) {
- (_a = parent === null || parent === void 0 ? void 0 : parent.swiperInstance) === null || _a === void 0 ? void 0 : _a.update();
- }
- }
- },
- mounted: function () {
- this.update();
- },
- updated: function () {
- this.update();
- },
- render: function (createElement) {
- return createElement('div', {
- class: this.slideClass
- }, this.$slots.default);
- }
- });
- /**
- * @file vue-awesome-swiper
- * @module exporter
- * @author Surmon <https://github.com/surmon-china>
- */
- var getInstaller = function (SwiperClass) {
- var install = function (Vue, globalOptions) {
- if (install.installed)
- { return; }
- var SwiperComponent = getSwiperComponent(SwiperClass);
- if (globalOptions) {
- SwiperComponent.options.props.defaultOptions.default = function () { return globalOptions; };
- }
- Vue.component(CoreNames.SwiperComponent, SwiperComponent);
- Vue.component(CoreNames.SwiperSlideComponent, SwiperSlideComponent);
- Vue.directive(CoreNames.SwiperDirective, getDirective(SwiperClass, globalOptions));
- install.installed = true;
- };
- return install;
- };
- function exporter(SwiperClass) {
- var _a;
- return _a = {
- version: '4.1.1',
- install: getInstaller(SwiperClass),
- directive: getDirective(SwiperClass)
- },
- _a[CoreNames.SwiperComponent] = getSwiperComponent(SwiperClass),
- _a[CoreNames.SwiperSlideComponent] = SwiperSlideComponent,
- _a;
- }
- /**
- * @file vue-awesome-swiper
- * @module default-export
- * @author Surmon <https://github.com/surmon-china>
- */
- var VueAwesomeSwiper = exporter(SwiperClass);
- var version = VueAwesomeSwiper.version;
- var install = VueAwesomeSwiper.install;
- var directive = VueAwesomeSwiper.directive;
- var Swiper = VueAwesomeSwiper.Swiper;
- var SwiperSlide = VueAwesomeSwiper.SwiperSlide;
- export default VueAwesomeSwiper;
- export { Swiper, SwiperSlide, directive, install, version };
|