@tarojs/components 3.5.10 → 3.6.0-beta.0

package/dist/collection/components/slider/slider.js

@@ -1,30 +1,12 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, Prop, Event, State, Watch, Host, Element } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class Slider {
   constructor() {
-    this.min = 0;
-    this.max = 100;
-    this.step = 1;
-    this.disabled = false;
-    this.value = 0;
-    this.activeColor = '#1aad19';
-    this.backgroundColor = '#e9e9e9';
-    this.blockSize = 28;
-    this.blockColor = '#ffffff';
-    this.showValue = false;
-    this.name = '';
-    this.totalWidth = 0;
-    this.touching = false;
-    this.ogX = 0;
-    this.touchId = null;
-    this.percent = 0;
-    this.isWillLoadCalled = false;
     this.handleTouchStart = (e) => {
       if (this.touching || this.disabled)
         return;
       this.touching = true;
       this.touchId = e.targetTouches[0].identifier;
-      this.totalWidth = this.sliderInsRef.clientWidth;
+      this.totalWidth = this.sliderInsRef.clientWidth || 1;
       this.ogX = e.targetTouches[0].pageX;
       this.ogPercent = this.percent;
     };
@@ -39,12 +21,12 @@ export class Slider {
       const pageX = e.targetTouches[0].pageX;
       const diffX = pageX - ogX;
       let percent = diffX / totalWidth * 100 + ogPercent;
-      percent = Math.max(0, Math.min(percent, 100));
+      percent = this.handleValueUpdate(percent, 0, 100);
       const val = min + percent * 0.01 * (max - min);
       this.updateByStep(val);
       this.onChanging.emit({
         detail: e.detail,
-        value: this.val
+        value: this.value
       });
     };
     this.handleTouchEnd = (e) => {
@@ -54,7 +36,7 @@ export class Slider {
       if (this.percent !== this.ogPercent) {
         this.onChange.emit({
           detail: e.detail,
-          value: this.val
+          value: this.value
         });
       }
       this.touching = false;
@@ -62,22 +44,39 @@ export class Slider {
       this.ogX = 0;
       this.ogPercent = 0;
     };
+    this.handleValueUpdate = (e, min = this.min, max = this.max) => {
+      e = isNaN(e) ? 0 : e;
+      return Math.max(min, Math.min(e, max));
+    };
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.disabled = false;
+    this.value = 0;
+    this.activeColor = '#1aad19';
+    this.backgroundColor = '#e9e9e9';
+    this.blockSize = 28;
+    this.blockColor = '#ffffff';
+    this.showValue = false;
+    this.name = '';
+    this.totalWidth = 1;
+    this.touching = false;
+    this.ogX = 0;
+    this.touchId = null;
+    this.percent = 0;
+    this.ogPercent = undefined;
+    this.isWillLoadCalled = false;
   }
-  function(newVal) {
+  function(value) {
     if (!this.isWillLoadCalled)
       return;
     const { max, min } = this;
-    if (newVal !== null && newVal !== this.val) {
-      const val = Math.max(min, Math.min(newVal, max));
+    if (value !== null) {
+      const val = this.handleValueUpdate(value, min, max);
       this.updateByStep(val);
     }
   }
   componentDidLoad() {
-    Object.defineProperty(this.el, 'value', {
-      get: () => this.val,
-      set: value => (this.value = value),
-      configurable: true
-    });
     // 在自动化测试时，如果通过 JSX 绑定 touch 事件，
     // 模拟的 touch 事件只会在浏览器的 device mode 下触发，Karma 跑的测试就会跪。
     // 因此改为 didLoad 后 addEventListener 的形式。
@@ -85,15 +84,10 @@ export class Slider {
     this.handler.addEventListener('touchmove', this.handleTouchMove);
     this.handler.addEventListener('touchend', this.handleTouchEnd);
   }
-  componentDidUpdate() {
-    this.value = null;
-  }
   componentWillLoad() {
     this.isWillLoadCalled = true;
     const { value, max, min } = this;
-    if (value === null)
-      return;
-    const val = Math.max(min, Math.min(value, max));
+    const val = this.handleValueUpdate(value, min, max);
     this.updateByStep(val);
   }
   // 根据步长 step 修改 value
@@ -120,11 +114,11 @@ export class Slider {
       }
     }
     const percent = (value - min) / (max - min) * 100;
-    this.val = value;
+    this.value = value;
     this.percent = percent;
   }
   render() {
-    const { showValue, backgroundColor, activeColor, blockColor, name, percent, val } = this;
+    const { showValue, backgroundColor, activeColor, blockColor, name, percent, value } = this;
     let blockSize = this.blockSize;
     const innerStyles = { backgroundColor };
     const percentage = percent > 100 ? 100 : percent;
@@ -146,262 +140,264 @@ export class Slider {
       marginTop: `-${Math.floor(blockSize / 2)}px`,
       marginLeft: `-${Math.floor(blockSize / 2)}px`
     };
-    return (h(Host, { class: 'weui-slider-box' },
-      h("div", { class: 'weui-slider' },
-        h("div", { class: 'weui-slider__inner', style: innerStyles, ref: c => (this.sliderInsRef = c) },
-          h("div", { style: trackStyles, class: 'weui-slider__track' }),
-          h("div", { class: 'weui-slider__handler', ref: dom => {
-              if (dom)
-                this.handler = dom;
-            }, style: handlerStyles }),
-          h("input", { type: 'hidden', name: name, value: val }))),
-      showValue && h("div", { class: 'weui-slider-box__value' }, val)));
+    return (h(Host, { class: 'weui-slider-box' }, h("div", { class: 'weui-slider' }, h("div", { class: 'weui-slider__inner', style: innerStyles, ref: c => (this.sliderInsRef = c) }, h("div", { style: trackStyles, class: 'weui-slider__track' }), h("div", { class: 'weui-slider__handler', ref: dom => {
+        if (dom)
+          this.handler = dom;
+      }, style: handlerStyles }), h("input", { type: 'hidden', name: name, value: value }))), showValue && h("div", { class: 'weui-slider-box__value' }, value)));
   }
   static get is() { return "taro-slider-core"; }
-  static get properties() { return {
-    "min": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "min",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "max": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max",
-      "reflect": false,
-      "defaultValue": "100"
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "step",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number | null",
-        "resolved": "null | number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "activeColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get properties() {
+    return {
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "100"
       },
-      "attribute": "active-color",
-      "reflect": false,
-      "defaultValue": "'#1aad19'"
-    },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "1"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "'#e9e9e9'"
-    },
-    "blockSize": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "value": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "activeColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active-color",
+        "reflect": false,
+        "defaultValue": "'#1aad19'"
       },
-      "attribute": "block-size",
-      "reflect": false,
-      "defaultValue": "28"
-    },
-    "blockColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "backgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "background-color",
+        "reflect": false,
+        "defaultValue": "'#e9e9e9'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "blockSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-size",
+        "reflect": false,
+        "defaultValue": "28"
       },
-      "attribute": "block-color",
-      "reflect": false,
-      "defaultValue": "'#ffffff'"
-    },
-    "showValue": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "blockColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-color",
+        "reflect": false,
+        "defaultValue": "'#ffffff'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "showValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-value",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "show-value",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false,
-      "defaultValue": "''"
-    }
-  }; }
-  static get states() { return {
-    "val": {},
-    "totalWidth": {},
-    "touching": {},
-    "ogX": {},
-    "touchId": {},
-    "percent": {},
-    "ogPercent": {},
-    "isWillLoadCalled": {}
-  }; }
-  static get events() { return [{
-      "method": "onChange",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "''"
       }
-    }, {
-      "method": "onChanging",
-      "name": "changing",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "totalWidth": {},
+      "touching": {},
+      "ogX": {},
+      "touchId": {},
+      "percent": {},
+      "ogPercent": {},
+      "isWillLoadCalled": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "onChange",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "onChanging",
+        "name": "changing",
+        "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": "value",
-      "methodName": "function"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "function"
+      }];
+  }
 }
+//# sourceMappingURL=slider.js.map

package/dist/collection/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAKxH,MAAM,OAAO,MAAM;;IA+DjB,qBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;MACnC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAM;MAE1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;MACpB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU,CAAA;MAC5C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,IAAI,CAAC,CAAA;MACpD,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;MACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAA;IAC/B,CAAC,CAAA;IAED,oBAAe,GAAG,CAAC,CAAa,EAAE,EAAE;MAClC,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,UAAU,EACV,GAAG,EACH,GAAG,EACH,GAAG,EACH,SAAS,EACV,GAAG,IAAI,CAAA;MACR,IAAI,CAAC,QAAQ,IAAI,QAAQ;QAAE,OAAM;MACjC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU,KAAK,OAAO;QAAE,OAAM;MAErD,SAAS;MACT,CAAC,CAAC,cAAc,EAAE,CAAA;MAElB,MAAM,KAAK,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;MACtC,MAAM,KAAK,GAAG,KAAK,GAAG,GAAG,CAAA;MAEzB,IAAI,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,GAAG,GAAG,SAAS,CAAA;MAClD,OAAO,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC,EAAE,GAAG,CAAC,CAAA;MACjD,MAAM,GAAG,GAAG,GAAG,GAAG,OAAO,GAAG,IAAI,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;MAE9C,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;MAEtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,MAAM,EAAE,CAAC,CAAC,MAAM;QAChB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,mBAAc,GAAG,CAAC,CAAa,EAAE,EAAE;MACjC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;MACnC,IAAI,CAAC,QAAQ,IAAI,QAAQ;QAAE,OAAM;MAEjC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,SAAS,EAAE;QACnC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,MAAM,EAAE,CAAC,CAAC,MAAM;UAChB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAA;OACH;MAED,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;MACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;MACnB,IAAI,CAAC,GAAG,GAAG,CAAC,CAAA;MACZ,IAAI,CAAC,SAAS,GAAG,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,sBAAiB,GAAG,CAAC,CAAS,EAAE,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,EAAE;MAChE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;MACpB,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAA;IACxC,CAAC,CAAA;eAvHa,CAAC;eACD,GAAG;gBACF,CAAC;oBACG,KAAK;iBACgC,CAAC;uBACnC,SAAS;2BACL,SAAS;qBACf,EAAE;sBACD,SAAS;qBACV,KAAK;gBACV,EAAE;sBAEK,CAAC;oBACH,KAAK;eACV,CAAC;mBACkB,IAAI;mBACnB,CAAC;;4BAEQ,KAAK;;EAGjC,QAAQ,CAAE,KAAK;IACb,IAAI,CAAC,IAAI,CAAC,gBAAgB;MAAE,OAAM;IAClC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;IACzB,IAAI,KAAK,KAAK,IAAI,EAAE;MAClB,MAAM,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;MACnD,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;KACvB;EACH,CAAC;EAED,gBAAgB;IACd,gCAAgC;IAChC,qDAAqD;IACrD,uCAAuC;IACvC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAClE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;IAChE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;EAChE,CAAC;EAYD,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAA;IAC5B,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;IAEhC,MAAM,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;IACnD,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;EACxB,CAAC;EAkED,qBAAqB;EACrB,YAAY,CAAE,KAAa;IACzB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;IAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAA;IAC5C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,EAAE;MAC/B,MAAM,OAAO,GAAG,GAAG,GAAG,IAAI,GAAG,CAAC,CAAA;MAC9B,MAAM,IAAI,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;MAEtD,IAAI,KAAK,KAAK,OAAO;QAAE,MAAK;MAE5B,IAAI,CAAC,IAAI,IAAI,KAAK,GAAG,OAAO,EAAE;QAC5B,wBAAwB;QACxB,KAAK,GAAG,OAAO,CAAA;OAChB;MAED,IAAI,IAAI,IAAI,KAAK,GAAG,OAAO,IAAI,KAAK,GAAG,IAAI,EAAE;QAC3C,IAAI,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,CAAC,EAAE;UAC9B,KAAK,GAAG,OAAO,CAAA;SAChB;aAAM;UACL,KAAK,GAAG,IAAI,CAAA;SACb;QACD,MAAK;OACN;KACF;IAED,MAAM,OAAO,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;IAEjD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;IAClB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;EACxB,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,SAAS,EACT,eAAe,EACf,WAAW,EACX,UAAU,EACV,IAAI,EACJ,OAAO,EACP,KAAK,EACN,GAAG,IAAI,CAAA;IACR,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;IAE9B,MAAM,WAAW,GAAG,EAAE,eAAe,EAAE,CAAA;IACvC,MAAM,UAAU,GAAG,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAA;IAChD,MAAM,WAAW,GAAG;MAClB,KAAK,EAAE,GAAG,UAAU,GAAG;MACvB,eAAe,EAAE,WAAW;KAC7B,CAAA;IAED,IAAI,SAAS,GAAG,EAAE,EAAE;MAClB,SAAS,GAAG,EAAE,CAAA;KACf;IACD,IAAI,SAAS,GAAG,EAAE,EAAE;MAClB,SAAS,GAAG,EAAE,CAAA;KACf;IAED,MAAM,aAAa,GAAG;MACpB,IAAI,EAAE,GAAG,UAAU,GAAG;MACtB,KAAK,EAAE,GAAG,SAAS,IAAI;MACvB,MAAM,EAAE,GAAG,SAAS,IAAI;MACxB,eAAe,EAAE,UAAU;MAC3B,SAAS,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI;MAC5C,UAAU,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI;KAC9C,CAAA;IACD,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB;MAC3B,WAAK,KAAK,EAAC,aAAa;QACtB,WAAK,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAE,CAAC;UACpF,WAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,oBAAoB,GAAG;UACtD,WACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAE,GAAG,CAAC,EAAE;cACT,IAAI,GAAG;gBAAE,IAAI,CAAC,OAAO,GAAG,GAAG,CAAA;YAC7B,CAAC,EACD,KAAK,EAAE,aAAa,GACpB;UACF,aAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAC7C,CACF;MACL,SAAS,IAAI,WAAK,KAAK,EAAC,wBAAwB,IAAE,KAAK,CAAO,CAC1D,CACR,CAAA;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, ComponentInterface, Prop, Event, EventEmitter, State, Watch, Host, Element } from '@stencil/core'\n\n@Component({\n  tag: 'taro-slider-core'\n})\nexport class Slider implements ComponentInterface {\n  private sliderInsRef: HTMLDivElement\n  private handler: HTMLDivElement\n\n  @Element() el: HTMLElement\n\n  @Prop() min = 0\n  @Prop() max = 100\n  @Prop() step = 1\n  @Prop() disabled = false\n  @Prop({ mutable: true, reflect: true }) value: number = 0\n  @Prop() activeColor = '#1aad19'\n  @Prop() backgroundColor = '#e9e9e9'\n  @Prop() blockSize = 28\n  @Prop() blockColor = '#ffffff'\n  @Prop() showValue = false\n  @Prop() name = ''\n\n  @State() totalWidth = 1\n  @State() touching = false\n  @State() ogX = 0\n  @State() touchId: number | null = null\n  @State() percent = 0\n  @State() ogPercent: number\n  @State() isWillLoadCalled = false\n\n  @Watch('value')\n  function (value) {\n    if (!this.isWillLoadCalled) return\n    const { max, min } = this\n    if (value !== null) {\n      const val = this.handleValueUpdate(value, min, max)\n      this.updateByStep(val)\n    }\n  }\n\n  componentDidLoad () {\n    // 在自动化测试时，如果通过 JSX 绑定 touch 事件，\n    // 模拟的 touch 事件只会在浏览器的 device mode 下触发，Karma 跑的测试就会跪。\n    // 因此改为 didLoad 后 addEventListener 的形式。\n    this.handler.addEventListener('touchstart', this.handleTouchStart)\n    this.handler.addEventListener('touchmove', this.handleTouchMove)\n    this.handler.addEventListener('touchend', this.handleTouchEnd)\n  }\n\n  @Event({\n    eventName: 'change'\n  })\n  onChange: EventEmitter\n\n  @Event({\n    eventName: 'changing'\n  })\n  onChanging: EventEmitter\n\n  componentWillLoad () {\n    this.isWillLoadCalled = true\n    const { value, max, min } = this\n\n    const val = this.handleValueUpdate(value, min, max)\n    this.updateByStep(val)\n  }\n\n  handleTouchStart = (e: TouchEvent) => {\n    if (this.touching || this.disabled) return\n\n    this.touching = true\n    this.touchId = e.targetTouches[0].identifier\n    this.totalWidth = this.sliderInsRef.clientWidth || 1\n    this.ogX = e.targetTouches[0].pageX\n    this.ogPercent = this.percent\n  }\n\n  handleTouchMove = (e: TouchEvent) => {\n    const {\n      disabled,\n      touching,\n      touchId,\n      totalWidth,\n      max,\n      min,\n      ogX,\n      ogPercent\n    } = this\n    if (!touching || disabled) return\n    if (e.targetTouches[0].identifier !== touchId) return\n\n    // 阻止默认事件\n    e.preventDefault()\n\n    const pageX = e.targetTouches[0].pageX\n    const diffX = pageX - ogX\n\n    let percent = diffX / totalWidth * 100 + ogPercent\n    percent = this.handleValueUpdate(percent, 0, 100)\n    const val = min + percent * 0.01 * (max - min)\n\n    this.updateByStep(val)\n\n    this.onChanging.emit({\n      detail: e.detail,\n      value: this.value\n    })\n  }\n\n  handleTouchEnd = (e: TouchEvent) => {\n    const { disabled, touching } = this\n    if (!touching || disabled) return\n\n    if (this.percent !== this.ogPercent) {\n      this.onChange.emit({\n        detail: e.detail,\n        value: this.value\n      })\n    }\n\n    this.touching = false\n    this.touchId = null\n    this.ogX = 0\n    this.ogPercent = 0\n  }\n\n  handleValueUpdate = (e: number, min = this.min, max = this.max) => {\n    e = isNaN(e) ? 0 : e\n    return Math.max(min, Math.min(e, max))\n  }\n\n  // 根据步长 step 修改 value\n  updateByStep (value: number) {\n    const { max, min, step } = this\n    const steps = Math.floor((max - min) / step)\n    for (let i = 0; i <= steps; i++) {\n      const current = min + step * i\n      const next = i === steps ? null : min + step * (i + 1)\n\n      if (value === current) break\n\n      if (!next && value > current) {\n        // step 不能被 max - min 整除\n        value = current\n      }\n\n      if (next && value > current && value < next) {\n        if (value - current < step / 2) {\n          value = current\n        } else {\n          value = next\n        }\n        break\n      }\n    }\n\n    const percent = (value - min) / (max - min) * 100\n\n    this.value = value\n    this.percent = percent\n  }\n\n  render () {\n    const {\n      showValue,\n      backgroundColor,\n      activeColor,\n      blockColor,\n      name,\n      percent,\n      value\n    } = this\n    let blockSize = this.blockSize\n\n    const innerStyles = { backgroundColor }\n    const percentage = percent > 100 ? 100 : percent\n    const trackStyles = {\n      width: `${percentage}%`,\n      backgroundColor: activeColor\n    }\n\n    if (blockSize < 12) {\n      blockSize = 12\n    }\n    if (blockSize > 28) {\n      blockSize = 28\n    }\n\n    const handlerStyles = {\n      left: `${percentage}%`,\n      width: `${blockSize}px`,\n      height: `${blockSize}px`,\n      backgroundColor: blockColor,\n      marginTop: `-${Math.floor(blockSize / 2)}px`,\n      marginLeft: `-${Math.floor(blockSize / 2)}px`\n    }\n    return (\n      <Host class='weui-slider-box'>\n        <div class='weui-slider'>\n          <div class='weui-slider__inner' style={innerStyles} ref={c => (this.sliderInsRef = c!)}>\n            <div style={trackStyles} class='weui-slider__track' />\n            <div\n              class='weui-slider__handler'\n              ref={dom => {\n                if (dom) this.handler = dom\n              }}\n              style={handlerStyles}\n            />\n            <input type='hidden' name={name} value={value} />\n          </div>\n        </div>\n        {showValue && <div class='weui-slider-box__value'>{value}</div>}\n      </Host>\n    )\n  }\n}\n"]}