vue-awesome-swiper.esm.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. /*!
  2. * vue-awesome-swiper v4.1.1
  3. * Copyright (c) Surmon. All rights reserved.
  4. * Released under the MIT License.
  5. * Surmon <https://github.com/surmon-china>
  6. */
  7. import SwiperClass from 'swiper';
  8. import Vue from 'vue';
  9. /**
  10. * @file vue-awesome-swiper
  11. * @module constants
  12. * @author Surmon <https://github.com/surmon-china>
  13. */
  14. var CoreNames;
  15. (function (CoreNames) {
  16. CoreNames["SwiperComponent"] = "Swiper";
  17. CoreNames["SwiperSlideComponent"] = "SwiperSlide";
  18. CoreNames["SwiperDirective"] = "swiper";
  19. CoreNames["SwiperInstance"] = "$swiper";
  20. })(CoreNames || (CoreNames = {}));
  21. var DEFAULT_CLASSES = Object.freeze({
  22. containerClass: 'swiper-container',
  23. wrapperClass: 'swiper-wrapper',
  24. slideClass: 'swiper-slide'
  25. });
  26. var ComponentEvents;
  27. (function (ComponentEvents) {
  28. ComponentEvents["Ready"] = "ready";
  29. ComponentEvents["ClickSlide"] = "clickSlide";
  30. })(ComponentEvents || (ComponentEvents = {}));
  31. var ComponentPropNames;
  32. (function (ComponentPropNames) {
  33. ComponentPropNames["AutoUpdate"] = "autoUpdate";
  34. ComponentPropNames["AutoDestroy"] = "autoDestroy";
  35. ComponentPropNames["DeleteInstanceOnDestroy"] = "deleteInstanceOnDestroy";
  36. ComponentPropNames["CleanupStylesOnDestroy"] = "cleanupStylesOnDestroy";
  37. })(ComponentPropNames || (ComponentPropNames = {}));
  38. // https://swiperjs.com/api/#events
  39. var SWIPER_EVENTS = [
  40. 'init',
  41. 'beforeDestroy',
  42. 'slideChange',
  43. 'slideChangeTransitionStart',
  44. 'slideChangeTransitionEnd',
  45. 'slideNextTransitionStart',
  46. 'slideNextTransitionEnd',
  47. 'slidePrevTransitionStart',
  48. 'slidePrevTransitionEnd',
  49. 'transitionStart',
  50. 'transitionEnd',
  51. 'touchStart',
  52. 'touchMove',
  53. 'touchMoveOpposite',
  54. 'sliderMove',
  55. 'touchEnd',
  56. 'click',
  57. 'tap',
  58. 'doubleTap',
  59. 'imagesReady',
  60. 'progress',
  61. 'reachBeginning',
  62. 'reachEnd',
  63. 'fromEdge',
  64. 'setTranslate',
  65. 'setTransition',
  66. 'resize',
  67. 'observerUpdate',
  68. 'beforeLoopFix',
  69. 'loopFix'
  70. ];
  71. /*! *****************************************************************************
  72. Copyright (c) Microsoft Corporation. All rights reserved.
  73. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  74. this file except in compliance with the License. You may obtain a copy of the
  75. License at http://www.apache.org/licenses/LICENSE-2.0
  76. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  77. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  78. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  79. MERCHANTABLITY OR NON-INFRINGEMENT.
  80. See the Apache Version 2.0 License for specific language governing permissions
  81. and limitations under the License.
  82. ***************************************************************************** */
  83. function __spreadArrays() {
  84. for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
  85. for (var r = Array(s), k = 0, i = 0; i < il; i++)
  86. for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
  87. r[k] = a[j];
  88. return r;
  89. }
  90. /**
  91. * @file vue-awesome-swiper
  92. * @module utils
  93. * @author Surmon <https://github.com/surmon-china>
  94. */
  95. var kebabcase = function (string) {
  96. return string
  97. .replace(/([a-z])([A-Z])/g, '$1-$2')
  98. .replace(/\s+/g, '-')
  99. .toLowerCase();
  100. };
  101. /**
  102. * @file vue-awesome-swiper
  103. * @module event
  104. * @author Surmon <https://github.com/surmon-china>
  105. */
  106. var handleClickSlideEvent = function (swiper, event, emit) {
  107. var _a, _b, _c;
  108. if (swiper && !(swiper.destroyed)) {
  109. var eventPath = ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)) || event.path;
  110. if ((event === null || event === void 0 ? void 0 : event.target) && eventPath) {
  111. var slides_1 = Array.from(swiper.slides);
  112. var paths = Array.from(eventPath);
  113. // Click slide || slide[children]
  114. if (slides_1.includes(event.target) || paths.some(function (item) { return slides_1.includes(item); })) {
  115. var clickedIndex = swiper.clickedIndex;
  116. var reallyIndex = Number((_c = (_b = swiper.clickedSlide) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.swiperSlideIndex);
  117. var reallyIndexValue = Number.isInteger(reallyIndex) ? reallyIndex : null;
  118. emit(ComponentEvents.ClickSlide, clickedIndex, reallyIndexValue);
  119. emit(kebabcase(ComponentEvents.ClickSlide), clickedIndex, reallyIndexValue);
  120. }
  121. }
  122. }
  123. };
  124. var bindSwiperEvents = function (swiper, emit) {
  125. SWIPER_EVENTS.forEach(function (eventName) {
  126. swiper.on(eventName, function () {
  127. var arguments$1 = arguments;
  128. var args = [];
  129. for (var _i = 0; _i < arguments.length; _i++) {
  130. args[_i] = arguments$1[_i];
  131. }
  132. emit.apply(void 0, __spreadArrays([eventName], args));
  133. var kebabcaseName = kebabcase(eventName);
  134. if (kebabcaseName !== eventName) {
  135. emit.apply(void 0, __spreadArrays([kebabcaseName], args));
  136. }
  137. });
  138. });
  139. };
  140. /**
  141. * @file vue-awesome-swiper
  142. * @module directive
  143. * @author Surmon <https://github.com/surmon-china>
  144. */
  145. var INSTANCE_NAME_KEY = 'instanceName';
  146. function getDirective(SwiperClass, globalOptions) {
  147. var getStandardisedOptionByAttrs = function (vnode, key) {
  148. var _a, _b, _c, _d;
  149. var value = (_b = (_a = vnode.data) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[key];
  150. return value !== undefined
  151. ? value
  152. : (_d = (_c = vnode.data) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d[kebabcase(key)];
  153. };
  154. // Get swiper instace name in directive
  155. var getSwiperInstanceName = function (element, binding, vnode) {
  156. return (binding.arg ||
  157. getStandardisedOptionByAttrs(vnode, INSTANCE_NAME_KEY) ||
  158. element.id ||
  159. CoreNames.SwiperInstance);
  160. };
  161. var getSwiperInstance = function (element, binding, vnode) {
  162. var instanceName = getSwiperInstanceName(element, binding, vnode);
  163. return vnode.context[instanceName] || null;
  164. };
  165. var getSwipeOptions = function (binding) {
  166. return binding.value || globalOptions;
  167. };
  168. var getBooleanValueByInput = function (input) {
  169. return [true, undefined, null, ''].includes(input);
  170. };
  171. // Emit event in Vue directive
  172. var getEventEmiter = function (vnode) {
  173. var _a, _b;
  174. var handlers = ((_a = vnode.data) === null || _a === void 0 ? void 0 : _a.on) || ((_b = vnode.componentOptions) === null || _b === void 0 ? void 0 : _b.listeners);
  175. return function (name) {
  176. var arguments$1 = arguments;
  177. var args = [];
  178. for (var _i = 1; _i < arguments.length; _i++) {
  179. args[_i - 1] = arguments$1[_i];
  180. }
  181. var _a;
  182. var handle = (_a = handlers) === null || _a === void 0 ? void 0 : _a[name];
  183. if (handle) {
  184. handle.fns.apply(handle, args);
  185. }
  186. };
  187. };
  188. return {
  189. // Init
  190. bind: function (element, binding, vnode) {
  191. // auto class name
  192. if (element.className.indexOf(DEFAULT_CLASSES.containerClass) === -1) {
  193. element.className += ((element.className ? ' ' : '') + DEFAULT_CLASSES.containerClass);
  194. }
  195. // bind click event
  196. element.addEventListener('click', function (event) {
  197. var emitEvent = getEventEmiter(vnode);
  198. var swiper = getSwiperInstance(element, binding, vnode);
  199. handleClickSlideEvent(swiper, event, emitEvent);
  200. });
  201. },
  202. // DOM inserted
  203. inserted: function (element, binding, vnode) {
  204. var context = vnode.context;
  205. var swiperOptions = getSwipeOptions(binding);
  206. var instanceName = getSwiperInstanceName(element, binding, vnode);
  207. var emitEvent = getEventEmiter(vnode);
  208. var vueContext = context;
  209. var swiper = vueContext === null || vueContext === void 0 ? void 0 : vueContext[instanceName];
  210. // Swiper will destroy but not delete instance, when used <keep-alive>
  211. if (!swiper || swiper.destroyed) {
  212. swiper = new SwiperClass(element, swiperOptions);
  213. vueContext[instanceName] = swiper;
  214. bindSwiperEvents(swiper, emitEvent);
  215. emitEvent(ComponentEvents.Ready, swiper);
  216. // MARK: Reinstance when the nexttick with <keep-alive>
  217. // Vue.nextTick(instancing) | setTimeout(instancing)
  218. }
  219. },
  220. // On options changed or DOM updated
  221. componentUpdated: function (element, binding, vnode) {
  222. var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
  223. var autoUpdate = getStandardisedOptionByAttrs(vnode, ComponentPropNames.AutoUpdate);
  224. if (getBooleanValueByInput(autoUpdate)) {
  225. var swiper = getSwiperInstance(element, binding, vnode);
  226. if (swiper) {
  227. var swiperOptions = getSwipeOptions(binding);
  228. var isLoop = swiperOptions.loop;
  229. if (isLoop) {
  230. (_b = (_a = swiper) === null || _a === void 0 ? void 0 : _a.loopDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
  231. }
  232. (_c = swiper === null || swiper === void 0 ? void 0 : swiper.update) === null || _c === void 0 ? void 0 : _c.call(swiper);
  233. (_e = (_d = swiper.navigation) === null || _d === void 0 ? void 0 : _d.update) === null || _e === void 0 ? void 0 : _e.call(_d);
  234. (_g = (_f = swiper.pagination) === null || _f === void 0 ? void 0 : _f.render) === null || _g === void 0 ? void 0 : _g.call(_f);
  235. (_j = (_h = swiper.pagination) === null || _h === void 0 ? void 0 : _h.update) === null || _j === void 0 ? void 0 : _j.call(_h);
  236. if (isLoop) {
  237. (_l = (_k = swiper) === null || _k === void 0 ? void 0 : _k.loopCreate) === null || _l === void 0 ? void 0 : _l.call(_k);
  238. (_m = swiper === null || swiper === void 0 ? void 0 : swiper.update) === null || _m === void 0 ? void 0 : _m.call(swiper);
  239. }
  240. }
  241. }
  242. },
  243. // Destroy this directive
  244. unbind: function (element, binding, vnode) {
  245. var _a;
  246. var autoDestroy = getStandardisedOptionByAttrs(vnode, ComponentPropNames.AutoDestroy);
  247. if (getBooleanValueByInput(autoDestroy)) {
  248. var swiper = getSwiperInstance(element, binding, vnode);
  249. if (swiper && swiper.initialized) {
  250. (_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)));
  251. }
  252. }
  253. }
  254. };
  255. }
  256. /**
  257. * @file vue-awesome-swiper
  258. * @module SwiperComponent
  259. * @author Surmon <https://github.com/surmon-china>
  260. */
  261. var SlotNames;
  262. (function (SlotNames) {
  263. SlotNames["ParallaxBg"] = "parallax-bg";
  264. SlotNames["Pagination"] = "pagination";
  265. SlotNames["Scrollbar"] = "scrollbar";
  266. SlotNames["PrevButton"] = "button-prev";
  267. SlotNames["NextButton"] = "button-next";
  268. })(SlotNames || (SlotNames = {}));
  269. function getSwiperComponent(SwiperClass) {
  270. var _a;
  271. return Vue.extend({
  272. name: CoreNames.SwiperComponent,
  273. props: (_a = {
  274. defaultOptions: {
  275. type: Object,
  276. required: false,
  277. default: function () { return ({}); }
  278. },
  279. // eslint-disable-next-line vue/require-default-prop
  280. options: {
  281. type: Object,
  282. required: false
  283. }
  284. },
  285. _a[ComponentPropNames.AutoUpdate] = {
  286. type: Boolean,
  287. default: true
  288. },
  289. // https://github.com/surmon-china/vue-awesome-swiper/pull/550/files
  290. _a[ComponentPropNames.AutoDestroy] = {
  291. type: Boolean,
  292. default: true
  293. },
  294. // https://github.com/surmon-china/vue-awesome-swiper/pull/388
  295. _a[ComponentPropNames.DeleteInstanceOnDestroy] = {
  296. type: Boolean,
  297. required: false,
  298. default: true
  299. },
  300. _a[ComponentPropNames.CleanupStylesOnDestroy] = {
  301. type: Boolean,
  302. required: false,
  303. default: true
  304. },
  305. _a),
  306. data: function () {
  307. var _a;
  308. return _a = {},
  309. _a[CoreNames.SwiperInstance] = null,
  310. _a;
  311. },
  312. computed: {
  313. swiperInstance: {
  314. cache: false,
  315. set: function (swiper) {
  316. this[CoreNames.SwiperInstance] = swiper;
  317. },
  318. get: function () {
  319. return this[CoreNames.SwiperInstance];
  320. }
  321. },
  322. swiperOptions: function () {
  323. return this.options || this.defaultOptions;
  324. },
  325. wrapperClass: function () {
  326. return this.swiperOptions.wrapperClass || DEFAULT_CLASSES.wrapperClass;
  327. }
  328. },
  329. methods: {
  330. // Feature: click event
  331. handleSwiperClick: function (event) {
  332. handleClickSlideEvent(this.swiperInstance, event, this.$emit.bind(this));
  333. },
  334. autoReLoopSwiper: function () {
  335. var _a, _b;
  336. if (this.swiperInstance && this.swiperOptions.loop) {
  337. // https://github.com/surmon-china/vue-awesome-swiper/issues/593
  338. // https://github.com/surmon-china/vue-awesome-swiper/issues/544
  339. // https://github.com/surmon-china/vue-awesome-swiper/pull/545/files
  340. var swiper = this.swiperInstance;
  341. (_a = swiper === null || swiper === void 0 ? void 0 : swiper.loopDestroy) === null || _a === void 0 ? void 0 : _a.call(swiper);
  342. (_b = swiper === null || swiper === void 0 ? void 0 : swiper.loopCreate) === null || _b === void 0 ? void 0 : _b.call(swiper);
  343. }
  344. },
  345. updateSwiper: function () {
  346. var _a, _b, _c, _d, _e, _f, _g, _h;
  347. if (this[ComponentPropNames.AutoUpdate] && this.swiperInstance) {
  348. this.autoReLoopSwiper();
  349. (_b = (_a = this.swiperInstance) === null || _a === void 0 ? void 0 : _a.update) === null || _b === void 0 ? void 0 : _b.call(_a);
  350. (_d = (_c = this.swiperInstance.navigation) === null || _c === void 0 ? void 0 : _c.update) === null || _d === void 0 ? void 0 : _d.call(_c);
  351. (_f = (_e = this.swiperInstance.pagination) === null || _e === void 0 ? void 0 : _e.render) === null || _f === void 0 ? void 0 : _f.call(_e);
  352. (_h = (_g = this.swiperInstance.pagination) === null || _g === void 0 ? void 0 : _g.update) === null || _h === void 0 ? void 0 : _h.call(_g);
  353. }
  354. },
  355. destroySwiper: function () {
  356. var _a, _b;
  357. if (this[ComponentPropNames.AutoDestroy] && this.swiperInstance) {
  358. // https://github.com/surmon-china/vue-awesome-swiper/pull/341
  359. // https://github.com/surmon-china/vue-awesome-swiper/issues/340
  360. if (this.swiperInstance.initialized) {
  361. (_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]);
  362. }
  363. }
  364. },
  365. initSwiper: function () {
  366. this.swiperInstance = new SwiperClass(this.$el, this.swiperOptions);
  367. bindSwiperEvents(this.swiperInstance, this.$emit.bind(this));
  368. this.$emit(ComponentEvents.Ready, this.swiperInstance);
  369. }
  370. },
  371. mounted: function () {
  372. if (!this.swiperInstance) {
  373. this.initSwiper();
  374. }
  375. },
  376. // Update swiper when the parent component activated with `keep-alive`.
  377. activated: function () {
  378. this.updateSwiper();
  379. },
  380. updated: function () {
  381. this.updateSwiper();
  382. },
  383. beforeDestroy: function () {
  384. // https://github.com/surmon-china/vue-awesome-swiper/commit/2924a9d4d3d1cf51c0d46076410b1f804b2b8a43#diff-7f4e0261ac562c0f354cb91a1ca8864f
  385. this.$nextTick(this.destroySwiper);
  386. },
  387. render: function (createElement) {
  388. return createElement('div', {
  389. staticClass: DEFAULT_CLASSES.containerClass,
  390. on: {
  391. click: this.handleSwiperClick
  392. }
  393. }, [
  394. this.$slots[SlotNames.ParallaxBg],
  395. createElement('div', {
  396. class: this.wrapperClass
  397. }, this.$slots.default),
  398. this.$slots[SlotNames.Pagination],
  399. this.$slots[SlotNames.PrevButton],
  400. this.$slots[SlotNames.NextButton],
  401. this.$slots[SlotNames.Scrollbar]
  402. ]);
  403. }
  404. });
  405. }
  406. /**
  407. * @file vue-awesome-swiper
  408. * @module SwiperSlideComponent
  409. * @author Surmon <https://github.com/surmon-china>
  410. */
  411. var SwiperSlideComponent = Vue.extend({
  412. name: CoreNames.SwiperSlideComponent,
  413. computed: {
  414. slideClass: function () {
  415. var _a, _b;
  416. return ((_b = (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.swiperOptions) === null || _b === void 0 ? void 0 : _b.slideClass) || DEFAULT_CLASSES.slideClass;
  417. }
  418. },
  419. methods: {
  420. update: function () {
  421. var _a;
  422. var parent = this.$parent;
  423. // https://github.com/surmon-china/vue-awesome-swiper/issues/632
  424. if (parent[ComponentPropNames.AutoUpdate]) {
  425. (_a = parent === null || parent === void 0 ? void 0 : parent.swiperInstance) === null || _a === void 0 ? void 0 : _a.update();
  426. }
  427. }
  428. },
  429. mounted: function () {
  430. this.update();
  431. },
  432. updated: function () {
  433. this.update();
  434. },
  435. render: function (createElement) {
  436. return createElement('div', {
  437. class: this.slideClass
  438. }, this.$slots.default);
  439. }
  440. });
  441. /**
  442. * @file vue-awesome-swiper
  443. * @module exporter
  444. * @author Surmon <https://github.com/surmon-china>
  445. */
  446. var getInstaller = function (SwiperClass) {
  447. var install = function (Vue, globalOptions) {
  448. if (install.installed)
  449. { return; }
  450. var SwiperComponent = getSwiperComponent(SwiperClass);
  451. if (globalOptions) {
  452. SwiperComponent.options.props.defaultOptions.default = function () { return globalOptions; };
  453. }
  454. Vue.component(CoreNames.SwiperComponent, SwiperComponent);
  455. Vue.component(CoreNames.SwiperSlideComponent, SwiperSlideComponent);
  456. Vue.directive(CoreNames.SwiperDirective, getDirective(SwiperClass, globalOptions));
  457. install.installed = true;
  458. };
  459. return install;
  460. };
  461. function exporter(SwiperClass) {
  462. var _a;
  463. return _a = {
  464. version: '4.1.1',
  465. install: getInstaller(SwiperClass),
  466. directive: getDirective(SwiperClass)
  467. },
  468. _a[CoreNames.SwiperComponent] = getSwiperComponent(SwiperClass),
  469. _a[CoreNames.SwiperSlideComponent] = SwiperSlideComponent,
  470. _a;
  471. }
  472. /**
  473. * @file vue-awesome-swiper
  474. * @module default-export
  475. * @author Surmon <https://github.com/surmon-china>
  476. */
  477. var VueAwesomeSwiper = exporter(SwiperClass);
  478. var version = VueAwesomeSwiper.version;
  479. var install = VueAwesomeSwiper.install;
  480. var directive = VueAwesomeSwiper.directive;
  481. var Swiper = VueAwesomeSwiper.Swiper;
  482. var SwiperSlide = VueAwesomeSwiper.SwiperSlide;
  483. export default VueAwesomeSwiper;
  484. export { Swiper, SwiperSlide, directive, install, version };