@tarojs/components 3.5.7 → 3.6.0-canary.1

package/dist/collection/components/swiper/swiper.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, Prop, Event, Watch, Host, Element, State } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import classNames from 'classnames';
 import SwiperJS from 'swiper/swiper-bundle.esm.js';
 import { debounce } from '../../utils';
@@ -7,66 +6,13 @@ let INSTANCE_ID = 0;
 export class Swiper {
   constructor() {
     this._id = INSTANCE_ID++;
-    this.isWillLoadCalled = false;
-    /**
-     * 是否显示面板指示点
-     */
-    this.indicatorDots = false;
-    /**
-     * 指示点颜色
-     */
-    this.indicatorColor = 'rgba(0, 0, 0, .3)';
-    /**
-     * 当前选中的指示点颜色
-     */
-    this.indicatorActiveColor = '#000000';
-    /**
-     * 是否自动切换
-     */
-    this.autoplay = false;
-    /**
-     * 当前所在滑块的 index
-     */
-    this.current = 0;
-    /**
-     * 自动切换时间间隔
-     */
-    this.interval = 5000;
-    /**
-     * 滑动动画时长
-     */
-    this.duration = 500;
-    /**
-     * 是否采用衔接滑动
-     */
-    this.circular = false;
-    /**
-     * 滑动方向是否为纵向
-     */
-    this.vertical = false;
-    /**
-     * 前边距，可用于露出前一项的一小部分，接受 px 值
-     */
-    this.previousMargin = '0px';
-    /**
-     * 后边距，可用于露出后一项的一小部分，接受 px 值
-     */
-    this.nextMargin = '0px';
-    /**
-     * 同时显示的滑块数量
-     */
-    this.displayMultipleItems = 1;
-    /**
-     * 给 previewImage API 使用，全屏显示 swiper
-     */
-    this.full = false;
     this.handleSwiperLoopListen = () => {
-      var _a, _b;
+      var _a, _b, _c;
       ((_a = this.observerFirst) === null || _a === void 0 ? void 0 : _a.disconnect) && this.observerFirst.disconnect();
       ((_b = this.observerLast) === null || _b === void 0 ? void 0 : _b.disconnect) && this.observerLast.disconnect();
       this.observerFirst = new MutationObserver(this.handleSwiperLoop);
       this.observerLast = new MutationObserver(this.handleSwiperLoop);
-      const wrapper = this.swiper.$wrapperEl[0];
+      const wrapper = (_c = this.swiper.$wrapperEl) === null || _c === void 0 ? void 0 : _c[0];
       const list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)');
       if (list.length >= 1) {
         this.observerFirst.observe(list[0], {
@@ -92,6 +38,25 @@ export class Swiper {
         this.swiper.updateSlides();
       }
     }, 50);
+    this.swiperWrapper = undefined;
+    this.swiper = undefined;
+    this.isWillLoadCalled = false;
+    this.indicatorDots = false;
+    this.indicatorColor = 'rgba(0, 0, 0, .3)';
+    this.indicatorActiveColor = '#000000';
+    this.autoplay = false;
+    this.current = 0;
+    this.interval = 5000;
+    this.duration = 500;
+    this.circular = false;
+    this.vertical = false;
+    this.previousMargin = '0px';
+    this.nextMargin = '0px';
+    this.displayMultipleItems = 1;
+    this.full = false;
+    this.observer = undefined;
+    this.observerFirst = undefined;
+    this.observerLast = undefined;
   }
   watchCurrent(newVal) {
     if (!this.isWillLoadCalled)
@@ -111,19 +76,22 @@ export class Swiper {
   watchAutoplay(newVal) {
     if (!this.isWillLoadCalled || !this.swiper)
       return;
-    if (this.swiper.autoplay.running === newVal)
-      return;
-    if (newVal) {
-      if (this.swiper.params && typeof this.swiper.params.autoplay === 'object') {
-        if (this.swiper.params.autoplay.disableOnInteraction === true) {
-          this.swiper.params.autoplay.disableOnInteraction = false;
+    const swiperAutoplay = this.swiper.autoplay;
+    if (swiperAutoplay) {
+      if (swiperAutoplay.running === newVal)
+        return;
+      if (newVal) {
+        if (this.swiper.params && typeof this.swiper.params.autoplay === 'object') {
+          if (this.swiper.params.autoplay.disableOnInteraction === true) {
+            this.swiper.params.autoplay.disableOnInteraction = false;
+          }
+          this.swiper.params.autoplay.delay = this.interval;
         }
-        this.swiper.params.autoplay.delay = this.interval;
+        swiperAutoplay.start();
+      }
+      else {
+        swiperAutoplay.stop();
       }
-      this.swiper.autoplay.start();
-    }
-    else {
-      this.swiper.autoplay.stop();
     }
   }
   watchDuration(newVal) {
@@ -168,20 +136,22 @@ export class Swiper {
     this.isWillLoadCalled = true;
   }
   componentDidLoad() {
+    var _a;
     this.handleInit();
     if (!this.swiper || !this.circular)
       return;
-    const wrapper = this.swiper.$wrapperEl[0];
+    const wrapper = (_a = this.swiper.$wrapperEl) === null || _a === void 0 ? void 0 : _a[0];
     this.observer = new MutationObserver(this.handleSwiperLoopListen);
     this.observer.observe(wrapper, {
       childList: true
     });
   }
   componentWillUpdate() {
+    var _a, _b;
     if (!this.swiper)
       return;
-    if (this.autoplay && !this.swiper.autoplay.running) {
-      this.swiper.autoplay.start();
+    if (this.autoplay && !((_a = this.swiper.autoplay) === null || _a === void 0 ? void 0 : _a.running)) {
+      (_b = this.swiper.autoplay) === null || _b === void 0 ? void 0 : _b.start();
     }
     this.swiper.update(); // 更新子元素
   }
@@ -278,319 +248,327 @@ export class Swiper {
       style.marginRight = `${nM}px`;
       style.marginLeft = `${pM}px`;
     }
-    return (h(Host, { class: `taro-swiper-${this._id}`, style: hostStyle },
-      h("div", { class: 'swiper-container', style: style },
-        h("style", { type: 'text/css' }, `
+    return (h(Host, { class: `taro-swiper-${this._id}`, style: hostStyle }, h("div", { class: 'swiper-container', style: style }, h("style", { type: 'text/css' }, `
               .taro-swiper-${this._id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: ${indicatorColor} }
               .taro-swiper-${this._id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: ${indicatorActiveColor} }
-            `),
-        h("div", { class: 'swiper-wrapper' },
-          h("slot", null)),
-        h("div", { class: classNames('swiper-pagination', {
-            'swiper-pagination-hidden': !indicatorDots,
-            'swiper-pagination-bullets': indicatorDots
-          }) }))));
+            `), h("div", { class: 'swiper-wrapper' }, h("slot", null)), h("div", { class: classNames('swiper-pagination', {
+        'swiper-pagination-hidden': !indicatorDots,
+        'swiper-pagination-bullets': indicatorDots
+      }) }))));
   }
   static get is() { return "taro-swiper-core"; }
-  static get originalStyleUrls() { return {
-    "$": ["./style/index.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["./style/index.css"]
-  }; }
-  static get properties() { return {
-    "indicatorDots": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u662F\u5426\u663E\u793A\u9762\u677F\u6307\u793A\u70B9"
-      },
-      "attribute": "indicator-dots",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "indicatorColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u6307\u793A\u70B9\u989C\u8272"
-      },
-      "attribute": "indicator-color",
-      "reflect": false,
-      "defaultValue": "'rgba(0, 0, 0, .3)'"
-    },
-    "indicatorActiveColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u5F53\u524D\u9009\u4E2D\u7684\u6307\u793A\u70B9\u989C\u8272"
-      },
-      "attribute": "indicator-active-color",
-      "reflect": false,
-      "defaultValue": "'#000000'"
-    },
-    "autoplay": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u662F\u5426\u81EA\u52A8\u5207\u6362"
-      },
-      "attribute": "autoplay",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "current": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u5F53\u524D\u6240\u5728\u6ED1\u5757\u7684 index"
-      },
-      "attribute": "current",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "interval": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u81EA\u52A8\u5207\u6362\u65F6\u95F4\u95F4\u9694"
-      },
-      "attribute": "interval",
-      "reflect": false,
-      "defaultValue": "5000"
-    },
-    "duration": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u6ED1\u52A8\u52A8\u753B\u65F6\u957F"
-      },
-      "attribute": "duration",
-      "reflect": false,
-      "defaultValue": "500"
-    },
-    "circular": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u662F\u5426\u91C7\u7528\u8854\u63A5\u6ED1\u52A8"
-      },
-      "attribute": "circular",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "vertical": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["./style/index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["./style/index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "indicatorDots": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u662F\u5426\u663E\u793A\u9762\u677F\u6307\u793A\u70B9"
+        },
+        "attribute": "indicator-dots",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u6ED1\u52A8\u65B9\u5411\u662F\u5426\u4E3A\u7EB5\u5411"
+      "indicatorColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u6307\u793A\u70B9\u989C\u8272"
+        },
+        "attribute": "indicator-color",
+        "reflect": false,
+        "defaultValue": "'rgba(0, 0, 0, .3)'"
       },
-      "attribute": "vertical",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "previousMargin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "indicatorActiveColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u5F53\u524D\u9009\u4E2D\u7684\u6307\u793A\u70B9\u989C\u8272"
+        },
+        "attribute": "indicator-active-color",
+        "reflect": false,
+        "defaultValue": "'#000000'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u524D\u8FB9\u8DDD\uFF0C\u53EF\u7528\u4E8E\u9732\u51FA\u524D\u4E00\u9879\u7684\u4E00\u5C0F\u90E8\u5206\uFF0C\u63A5\u53D7 px \u503C"
+      "autoplay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u662F\u5426\u81EA\u52A8\u5207\u6362"
+        },
+        "attribute": "autoplay",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "previous-margin",
-      "reflect": false,
-      "defaultValue": "'0px'"
-    },
-    "nextMargin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "current": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u5F53\u524D\u6240\u5728\u6ED1\u5757\u7684 index"
+        },
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u540E\u8FB9\u8DDD\uFF0C\u53EF\u7528\u4E8E\u9732\u51FA\u540E\u4E00\u9879\u7684\u4E00\u5C0F\u90E8\u5206\uFF0C\u63A5\u53D7 px \u503C"
+      "interval": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u81EA\u52A8\u5207\u6362\u65F6\u95F4\u95F4\u9694"
+        },
+        "attribute": "interval",
+        "reflect": false,
+        "defaultValue": "5000"
       },
-      "attribute": "next-margin",
-      "reflect": false,
-      "defaultValue": "'0px'"
-    },
-    "displayMultipleItems": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "duration": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u6ED1\u52A8\u52A8\u753B\u65F6\u957F"
+        },
+        "attribute": "duration",
+        "reflect": false,
+        "defaultValue": "500"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u540C\u65F6\u663E\u793A\u7684\u6ED1\u5757\u6570\u91CF"
+      "circular": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u662F\u5426\u91C7\u7528\u8854\u63A5\u6ED1\u52A8"
+        },
+        "attribute": "circular",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "display-multiple-items",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "full": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "vertical": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u6ED1\u52A8\u65B9\u5411\u662F\u5426\u4E3A\u7EB5\u5411"
+        },
+        "attribute": "vertical",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "\u7ED9 previewImage API \u4F7F\u7528\uFF0C\u5168\u5C4F\u663E\u793A swiper"
+      "previousMargin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u524D\u8FB9\u8DDD\uFF0C\u53EF\u7528\u4E8E\u9732\u51FA\u524D\u4E00\u9879\u7684\u4E00\u5C0F\u90E8\u5206\uFF0C\u63A5\u53D7 px \u503C"
+        },
+        "attribute": "previous-margin",
+        "reflect": false,
+        "defaultValue": "'0px'"
       },
-      "attribute": "full",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "swiperWrapper": {},
-    "swiper": {},
-    "isWillLoadCalled": {},
-    "observer": {},
-    "observerFirst": {},
-    "observerLast": {}
-  }; }
-  static get events() { return [{
-      "method": "onChange",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "nextMargin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u540E\u8FB9\u8DDD\uFF0C\u53EF\u7528\u4E8E\u9732\u51FA\u540E\u4E00\u9879\u7684\u4E00\u5C0F\u90E8\u5206\uFF0C\u63A5\u53D7 px \u503C"
+        },
+        "attribute": "next-margin",
+        "reflect": false,
+        "defaultValue": "'0px'"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "onAnimationFinish",
-      "name": "animationfinish",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "displayMultipleItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u540C\u65F6\u663E\u793A\u7684\u6ED1\u5757\u6570\u91CF"
+        },
+        "attribute": "display-multiple-items",
+        "reflect": false,
+        "defaultValue": "1"
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "full": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u7ED9 previewImage API \u4F7F\u7528\uFF0C\u5168\u5C4F\u663E\u793A swiper"
+        },
+        "attribute": "full",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "swiperWrapper": {},
+      "swiper": {},
+      "isWillLoadCalled": {},
+      "observer": {},
+      "observerFirst": {},
+      "observerLast": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "onChange",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "onAnimationFinish",
+        "name": "animationfinish",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "current",
-      "methodName": "watchCurrent"
-    }, {
-      "propName": "autoplay",
-      "methodName": "watchAutoplay"
-    }, {
-      "propName": "duration",
-      "methodName": "watchDuration"
-    }, {
-      "propName": "interval",
-      "methodName": "watchInterval"
-    }, {
-      "propName": "swiperWrapper",
-      "methodName": "watchSwiperWrapper"
-    }, {
-      "propName": "circular",
-      "methodName": "watchCircular"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "current",
+        "methodName": "watchCurrent"
+      }, {
+        "propName": "autoplay",
+        "methodName": "watchAutoplay"
+      }, {
+        "propName": "duration",
+        "methodName": "watchDuration"
+      }, {
+        "propName": "interval",
+        "methodName": "watchInterval"
+      }, {
+        "propName": "swiperWrapper",
+        "methodName": "watchSwiperWrapper"
+      }, {
+        "propName": "circular",
+        "methodName": "watchCircular"
+      }];
+  }
 }
+//# sourceMappingURL=swiper.js.map