@tarojs/components 3.5.7-alpha.9 → 3.5.8

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

@@ -1,12 +1,30 @@
-import { h, Host } from '@stencil/core';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Prop, Event, State, Watch, Host, Element } 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 || 1;
+      this.totalWidth = this.sliderInsRef.clientWidth;
       this.ogX = e.targetTouches[0].pageX;
       this.ogPercent = this.percent;
     };
@@ -21,12 +39,12 @@ export class Slider {
       const pageX = e.targetTouches[0].pageX;
       const diffX = pageX - ogX;
       let percent = diffX / totalWidth * 100 + ogPercent;
-      percent = this.handleValueUpdate(percent, 0, 100);
+      percent = Math.max(0, Math.min(percent, 100));
       const val = min + percent * 0.01 * (max - min);
       this.updateByStep(val);
       this.onChanging.emit({
         detail: e.detail,
-        value: this.value
+        value: this.val
       });
     };
     this.handleTouchEnd = (e) => {
@@ -36,7 +54,7 @@ export class Slider {
       if (this.percent !== this.ogPercent) {
         this.onChange.emit({
           detail: e.detail,
-          value: this.value
+          value: this.val
         });
       }
       this.touching = false;
@@ -44,39 +62,22 @@ 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(value) {
+  function(newVal) {
     if (!this.isWillLoadCalled)
       return;
     const { max, min } = this;
-    if (value !== null) {
-      const val = this.handleValueUpdate(value, min, max);
+    if (newVal !== null && newVal !== this.val) {
+      const val = Math.max(min, Math.min(newVal, 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 的形式。
@@ -84,10 +85,15 @@ 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;
-    const val = this.handleValueUpdate(value, min, max);
+    if (value === null)
+      return;
+    const val = Math.max(min, Math.min(value, max));
     this.updateByStep(val);
   }
   // 根据步长 step 修改 value
@@ -114,11 +120,11 @@ export class Slider {
       }
     }
     const percent = (value - min) / (max - min) * 100;
-    this.value = value;
+    this.val = value;
     this.percent = percent;
   }
   render() {
-    const { showValue, backgroundColor, activeColor, blockColor, name, percent, value } = this;
+    const { showValue, backgroundColor, activeColor, blockColor, name, percent, val } = this;
     let blockSize = this.blockSize;
     const innerStyles = { backgroundColor };
     const percentage = percent > 100 ? 100 : percent;
@@ -140,264 +146,262 @@ 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: value }))), showValue && h("div", { class: 'weui-slider-box__value' }, value)));
+    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)));
   }
   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"
+  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": {}
       },
-      "max": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "max",
-        "reflect": false,
-        "defaultValue": "100"
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "step": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "step",
-        "reflect": false,
-        "defaultValue": "1"
+      "attribute": "active-color",
+      "reflect": false,
+      "defaultValue": "'#1aad19'"
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
       },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "value": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "0"
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "'#e9e9e9'"
+    },
+    "blockSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
       },
-      "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'"
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "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'"
+      "attribute": "block-size",
+      "reflect": false,
+      "defaultValue": "28"
+    },
+    "blockColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
       },
-      "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"
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "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'"
+      "attribute": "block-color",
+      "reflect": false,
+      "defaultValue": "'#ffffff'"
+    },
+    "showValue": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       },
-      "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"
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "''"
+      "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": {}
       }
-    };
-  }
-  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": {}
-        }
-      }];
-  }
+    }, {
+      "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/slot/slot.js

@@ -1,8 +1,11 @@
-import { h, Host } from '@stencil/core';
+import { Component, h, Host } from '@stencil/core';
+import { notSupport } from '../../utils';
 export class Slot {
+  componentDidLoad() {
+    notSupport('Slot', this);
+  }
   render() {
     return (h(Host, null));
   }
   static get is() { return "taro-slot-core"; }
 }
-//# sourceMappingURL=slot.js.map