@tarojs/components 3.5.0-canary.0 → 3.5.0-theta.1

package/dist/collection/components/input/input.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Event, Element, State, Watch } from '@stencil/core';
+import { Component, h, Prop, Event, Element, Watch } from '@stencil/core';
 function getTrueType(type, confirmType, password) {
   if (confirmType === 'search')
     type = 'search';
@@ -20,6 +20,7 @@ function fixControlledValue(value) {
 export class Input {
   constructor() {
     this.isOnComposition = false;
+    this.isOnPaste = false;
     this.onInputExcuted = false;
     this.password = false;
     this.disabled = false;
@@ -49,13 +50,19 @@ export class Input {
         //     }
         //   )
         // }
-        this._value = value;
+        this.value = value;
         this.onInput.emit({
           value,
           cursor: value.length
         });
       }
     };
+    this.handlePaste = (e) => {
+      this.isOnPaste = true;
+      this.onPaste.emit({
+        value: e.target.value
+      });
+    };
     this.handleFocus = (e) => {
       this.onInputExcuted = false;
       this.onFocus.emit({
@@ -72,6 +79,14 @@ export class Input {
       this.onChange.emit({
         value: e.target.value
       });
+      if (this.isOnPaste) {
+        this.isOnPaste = false;
+        this.value = e.target.value;
+        this.onInput.emit({
+          value: e.target.value,
+          cursor: e.target.value.length
+        });
+      }
     };
     this.handleKeyDown = (e) => {
       const { value } = e.target;
@@ -90,29 +105,25 @@ export class Input {
         return;
       if (e.type === 'compositionend') {
         this.isOnComposition = false;
-        this.onInput.emit({ value: e.target.value });
+        this.value = e.target.value;
+        this.onInput.emit({
+          value: e.target.value,
+          cursor: e.target.value.length
+        });
       }
       else {
         this.isOnComposition = true;
       }
     };
   }
-  watchHandler(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      this._value = newValue;
-    }
-  }
   watchFocus(newValue, oldValue) {
     var _a;
     if (!oldValue && newValue) {
       (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }
-  componentWillLoad() {
-    this._value = this.value;
-  }
   componentDidLoad() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (this.type === 'file') {
       this.fileListener = () => {
         this.onInput.emit();
@@ -125,12 +136,9 @@ export class Input {
     }
     Object.defineProperty(this.el, 'value', {
       get: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value; },
-      set: value => {
-        this._value = value;
-      },
+      set: value => (this.value = value),
       configurable: true
     });
-    this.autoFocus && ((_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.focus());
   }
   disconnectedCallback() {
     var _a;
@@ -139,10 +147,10 @@ export class Input {
     }
   }
   render() {
-    const { _value, type, password, placeholder, disabled, maxlength, confirmType, name, nativeProps } = this;
+    const { value, type, password, placeholder, autoFocus, disabled, maxlength, confirmType, name, nativeProps } = this;
     return (h("input", Object.assign({ ref: input => {
         this.inputRef = input;
-      }, class: 'weui-input', value: fixControlledValue(_value), type: getTrueType(type, confirmType, password), placeholder: placeholder, disabled: disabled, maxlength: maxlength, name: name, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onKeyDown: this.handleKeyDown }, nativeProps)));
+      }, class: 'weui-input', value: fixControlledValue(value), type: getTrueType(type, confirmType, password), placeholder: placeholder, autoFocus: autoFocus, disabled: disabled, maxlength: maxlength, name: name, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onCompositionStart: this.handleComposition, onCompositionEnd: this.handleComposition }, nativeProps)));
   }
   static get is() { return "taro-input-core"; }
   static get originalStyleUrls() { return {
@@ -327,9 +335,6 @@ export class Input {
       "defaultValue": "{}"
     }
   }; }
-  static get states() { return {
-    "_value": {}
-  }; }
   static get events() { return [{
       "method": "onInput",
       "name": "input",
@@ -345,6 +350,21 @@ export class Input {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "onPaste",
+      "name": "paste",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }, {
       "method": "onFocus",
       "name": "focus",
@@ -423,9 +443,6 @@ export class Input {
     }]; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "value",
-      "methodName": "watchHandler"
-    }, {
       "propName": "autoFocus",
       "methodName": "watchFocus"
     }]; }

package/dist/collection/components/keyboard-accessory/keyboard-accessory.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core';
+export class KeyboardAccessory {
+  componentDidLoad() {
+    console.error('H5 暂不支持 KeyboardAccessory 组件！');
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "taro-keyboard-accessory-core"; }
+}

package/dist/collection/components/live-player/live-player.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core';
+export class LivePlayer {
+  componentDidLoad() {
+    console.error('H5 暂不支持 LivePlayer 组件！');
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "taro-live-player-core"; }
+}

package/dist/collection/components/live-pusher/live-pusher.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core';
+export class LivePusher {
+  componentDidLoad() {
+    console.error('H5 暂不支持 LivePusher 组件！');
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "taro-live-pusher-core"; }
+}

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

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core';
+export class Map {
+  componentDidLoad() {
+    console.error('H5 暂不支持 Map 组件！');
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "taro-map-core"; }
+}

package/dist/collection/components/match-media/match-media.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core';
+export class MatchMedia {
+  componentDidLoad() {
+    console.error('H5 暂不支持 MatchMedia 组件！');
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "taro-match-media-core"; }
+}

package/dist/collection/components/navigation-bar/navigation-bar.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core';
+export class NavigationBar {
+  componentDidLoad() {
+    console.error('H5 暂不支持 NavigationBar 组件！');
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "taro-navigation-bar-core"; }
+}

package/dist/collection/components/navigator/navigator.js

@@ -1,6 +1,6 @@
 import { Component, Prop, h, Host, Listen, Event } from '@stencil/core';
+import Taro from '@tarojs/taro';
 import classNames from 'classnames';
-const Taro = require('@tarojs/taro');
 /**
  * Navigator组件参数
  * @typedef NavigatorProps
@@ -79,10 +79,10 @@ export class Navigator {
   }
   static get is() { return "taro-navigator-core"; }
   static get originalStyleUrls() { return {
-    "$": ["navigator.css"]
+    "$": ["./style/index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["navigator.css"]
+    "$": ["./style/index.css"]
   }; }
   static get properties() { return {
     "hoverClass": {

package/dist/collection/components/navigator/{navigator.css → style/index.css}

@@ -1,3 +1,3 @@
-.navigator-hover {
-  background: #efefef;
-}
+.navigator-hover {
+  background: #efefef;
+}

package/dist/collection/components/official-account/official-account.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core';
+export class OfficialAccount {
+  componentDidLoad() {
+    console.error('H5 暂不支持 OfficialAccount 组件！');
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "taro-official-account-core"; }
+}

package/dist/collection/components/page-container/page-container.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core';
+export class PageContainer {
+  componentDidLoad() {
+    console.error('H5 暂不支持 PageContainer 组件！');
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "taro-page-container-core"; }
+}

package/dist/collection/components/page-meta/page-meta.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core';
+export class PageMeta {
+  componentDidLoad() {
+    console.error('H5 暂不支持 PageMeta 组件！');
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "taro-page-meta-core"; }
+}

package/dist/collection/components/picker/style/index.css

@@ -1,3 +1,4 @@
-.weui-picker, .weui-picker__hd {
+.weui-picker,
+.weui-picker__hd {
   font-size: 12px;
 }

package/dist/collection/components/picker-view/picker-view-column.js

@@ -0,0 +1,225 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host, Listen, Element, Event, Prop, State } from '@stencil/core';
+import { debounce } from '../../utils';
+export class PickerViewColumn {
+  constructor() {
+    // 初始化的选中位置
+    this.initialPosition = '0';
+    // 滑动距离上下留白区域-通过父视图和 indicator 计算而来
+    this.paddingVertical = 0;
+    this.isInit = false;
+    this.isMove = false;
+    // 滚动结束自动回到合适的位置
+    this.handleSelected = debounce(() => {
+      const childList = this.el.childNodes;
+      let sum = 0;
+      let selectedIndex = '0';
+      for (const index in childList) {
+        const item = childList[index];
+        const itemHeight = item.offsetHeight;
+        if (sum + itemHeight / 2.0 > this.el.scrollTop) {
+          selectedIndex = index;
+          break;
+        }
+        sum += itemHeight;
+      }
+      this.el.scrollTo({
+        top: sum,
+        behavior: 'smooth'
+      });
+      this.onChange.emit({
+        curIndex: this.col,
+        selectedIndex: selectedIndex
+      });
+      this.onSelectEnd.emit();
+    }, 500);
+  }
+  onScroll(_event) {
+    if (!this.isMove) {
+      this.isMove = true;
+      this.onSelectStart.emit();
+    }
+    this.handleSelected();
+  }
+  onMouseEnd() {
+    if (!this.isMove)
+      return;
+    this.isMove = false;
+    this.handleSelected();
+  }
+  onTouchEnd() {
+    this.isMove = false;
+    this.handleSelected();
+  }
+  componentDidUpdate() {
+    if (!this.isInit) {
+      this.isInit = true;
+      const childList = this.el.childNodes;
+      let idx = 0;
+      let sum = 0;
+      for (const index in childList) {
+        const item = childList[index];
+        if (this.initialPosition === index || !item || typeof item.offsetHeight !== 'number') {
+          break;
+        }
+        sum += item.offsetHeight;
+        idx++;
+      }
+      this.el.scrollTo({ top: sum });
+      if (idx >= childList.length) {
+        this.onChange.emit({
+          curIndex: this.col,
+          selectedIndex: idx - 1
+        });
+      }
+    }
+  }
+  render() {
+    const { paddingVertical = 0 } = this;
+    return (h(Host, { class: "taro-picker-view-column-container", style: { 'padding-top': `${paddingVertical}px`, 'padding-bottom': `${paddingVertical}px` } }));
+  }
+  static get is() { return "taro-picker-view-column-core"; }
+  static get originalStyleUrls() { return {
+    "$": ["./style/column.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["./style/column.css"]
+  }; }
+  static get properties() { return {
+    "col": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "col",
+      "reflect": false
+    },
+    "initialPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "initial-position",
+      "reflect": false,
+      "defaultValue": "'0'"
+    },
+    "paddingVertical": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "padding-vertical",
+      "reflect": false,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "isInit": {},
+    "isMove": {}
+  }; }
+  static get events() { return [{
+      "method": "onChange",
+      "name": "onselect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "onSelectStart",
+      "name": "onselectstart",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "onSelectEnd",
+      "name": "onselectend",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "scroll",
+      "method": "onScroll",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseup",
+      "method": "onMouseEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseout",
+      "method": "onMouseEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseleave",
+      "method": "onMouseEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "touchend",
+      "method": "onTouchEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }]; }
+}