@tarojs/components 3.7.0-alpha.2 → 3.7.0-alpha.20

package/dist/cjs/taro-web-view-core.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b469cd.js');
+const index = require('./index-e751dfe3.js');
 
 const indexCss = "iframe{border:none}.taro-webview{position:fixed;top:0;bottom:0;z-index:999;width:100%;height:100%}";
 

package/dist/collection/collection-manifest.json

@@ -66,6 +66,7 @@
     "./components/slider/slider.js",
     "./components/slot/native-slot.js",
     "./components/slot/slot.js",
+    "./components/snapshot/snapshot.js",
     "./components/sticky-header/sticky-header.js",
     "./components/sticky-section/sticky-section.js",
     "./components/swiper/swiper-item.js",
@@ -85,7 +86,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.2",
+    "version": "2.22.3",
     "typescriptVersion": "4.9.4"
   },
   "collections": [],

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

@@ -102,6 +102,18 @@ taro-button-core[plain][type=primary]:not([disabled]):active {
 taro-button-core[plain][type=primary]::after {
   border-width: 0;
 }
+taro-button-core[plain][type=warn] {
+  border: 1px solid #e64340;
+  color: #e64340;
+}
+taro-button-core[plain][type=warn]:not([disabled]):active {
+  border-color: rgba(230, 67, 64, 0.6);
+  background-color: transparent;
+  color: rgba(230, 67, 64, 0.6);
+}
+taro-button-core[plain][type=warn]::after {
+  border-width: 0;
+}
 taro-button-core[plain], taro-button-core[plain][type=default] {
   border: 1px solid #353535;
   color: #353535;

package/dist/collection/components/canvas/canvas.js

@@ -14,14 +14,26 @@ export class Canvas {
       clearTimeout(this.timer);
     };
     this.canvasId = undefined;
+    this.height = undefined;
+    this.width = undefined;
     this.nativeProps = {};
   }
+  componentDidRender() {
+    const [canvas] = this.el.children;
+    if (!this.height || !this.width) {
+      let style = window.getComputedStyle(canvas);
+      this.height || (this.height = style.height);
+      this.width || (this.width = style.width);
+    }
+    canvas.height = parseInt(this.height);
+    canvas.width = parseInt(this.width);
+  }
   render() {
     const { canvasId, nativeProps } = this;
     return (h("canvas", Object.assign({ "canvas-id": canvasId, style: {
         width: '100%',
         height: '100%'
-      }, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, nativeProps)));
+      }, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchCancel: this.onTouchEnd, onTouchEnd: this.onTouchEnd }, nativeProps)));
   }
   static get is() { return "taro-canvas-core"; }
   static get originalStyleUrls() {
@@ -50,9 +62,43 @@ export class Canvas {
           "tags": [],
           "text": ""
         },
-        "attribute": "canvas-id",
+        "attribute": "id",
         "reflect": false
       },
+      "height": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": true
+      },
+      "width": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": true
+      },
       "nativeProps": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/checkbox/checkbox.js

@@ -69,11 +69,11 @@ export class Checkbox {
         "reflect": false
       },
       "value": {
-        "type": "string",
-        "mutable": false,
+        "type": "any",
+        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | number",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,

package/dist/collection/components/image/image.js

@@ -8,6 +8,7 @@ export class Image {
     this.lazyLoad = false;
     this.nativeProps = {};
     this.aspectFillMode = 'width';
+    this.didLoad = false;
   }
   componentDidLoad() {
     if (!this.lazyLoad)
@@ -16,7 +17,7 @@ export class Image {
       // 异步 api 关系
       if (entries[entries.length - 1].isIntersecting) {
         lazyImg.unobserve(this.imgRef);
-        this.imgRef.src = this.src;
+        this.didLoad = true;
       }
     }, {
       rootMargin: '300px 0px'
@@ -35,14 +36,14 @@ export class Image {
     this.onError.emit(e);
   }
   render() {
-    const { src, mode = 'scaleToFill', lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps } = this;
+    const { src, mode = 'scaleToFill', lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps, didLoad } = this;
     const cls = classNames({
       'taro-img__widthfix': mode === 'widthFix'
     });
     const imgCls = classNames(`taro-img__mode-${mode.toLowerCase().replace(/\s/g, '')}`, {
       [`taro-img__mode-aspectfill--${aspectFillMode}`]: mode === 'aspectFill'
     });
-    return (h(Host, { class: cls }, lazyLoad ? (h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps))) : (h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, src: src, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps)))));
+    return (h(Host, { class: cls }, h("img", Object.assign({ ref: (img) => (this.imgRef = img), class: imgCls, src: lazyLoad && !didLoad ? undefined : src, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps))));
   }
   static get is() { return "taro-image-core"; }
   static get originalStyleUrls() {
@@ -134,7 +135,8 @@ export class Image {
   }
   static get states() {
     return {
-      "aspectFillMode": {}
+      "aspectFillMode": {},
+      "didLoad": {}
     };
   }
   static get events() {

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

@@ -6,8 +6,8 @@ taro-image-core {
   display: inline-block;
   overflow: hidden;
   position: relative;
-  width: auto;
-  height: auto;
+  width: 320px;
+  height: 240px;
   font-size: 0;
 }
 

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

@@ -114,7 +114,7 @@ export class Input {
         this.isOnComposition = true;
       }
     };
-    this.handleBeforeinput = (e) => {
+    this.handleBeforeInput = (e) => {
       if (!e.data)
         return;
       const isNumber = e.data && /[0-9]/.test(e.data);
@@ -127,7 +127,7 @@ export class Input {
         }
       }
     };
-    this.value = undefined;
+    this.value = '';
     this.type = undefined;
     this.password = false;
     this.placeholder = undefined;
@@ -164,14 +164,9 @@ export class Input {
     else {
       (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.addEventListener('compositionstart', this.handleComposition);
       (_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.addEventListener('compositionend', this.handleComposition);
-      (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.addEventListener('beforeinput', this.handleBeforeinput);
-      (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.addEventListener('textInput', this.handleBeforeinput);
+      (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.addEventListener('beforeinput', this.handleBeforeInput);
+      (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.addEventListener('textInput', this.handleBeforeInput);
     }
-    Object.defineProperty(this.el, 'value', {
-      get: () => this.inputRef.value,
-      set: value => this.value !== value && (this.value = value),
-      configurable: true
-    });
   }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e;
@@ -181,8 +176,8 @@ export class Input {
     else {
       (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('compositionstart', this.handleComposition);
       (_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.removeEventListener('compositionend', this.handleComposition);
-      (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.removeEventListener('beforeinput', this.handleBeforeinput);
-      (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.removeEventListener('textInput', this.handleBeforeinput);
+      (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.removeEventListener('beforeinput', this.handleBeforeInput);
+      (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.removeEventListener('textInput', this.handleBeforeInput);
     }
   }
   render() {
@@ -221,7 +216,8 @@ export class Input {
           "text": ""
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "''"
       },
       "type": {
         "type": "string",
@@ -326,7 +322,7 @@ export class Input {
           "text": ""
         },
         "attribute": "focus",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       },
       "confirmType": {

package/dist/collection/components/picker/picker-group.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { TOP, LINE_HEIGHT, MASK_HEIGHT } from './constant';
 export class TaroPickerGroup {
   constructor() {
@@ -8,7 +8,6 @@ export class TaroPickerGroup {
     this.height = undefined;
     this.columnId = undefined;
     this.updateHeight = undefined;
-    this.onColumnChange = undefined;
     this.updateDay = undefined;
     this.startY = undefined;
     this.preY = undefined;
@@ -78,7 +77,7 @@ export class TaroPickerGroup {
     this.updateHeight(newPos, this.columnId);
   }
   async handleMoveEnd(clientY) {
-    const { mode, range, height, updateHeight, onColumnChange, columnId } = this;
+    const { mode, range, height, updateHeight, columnId } = this;
     const max = 0;
     const min = -LINE_HEIGHT * (range.length - 1);
     const endY = clientY;
@@ -129,7 +128,7 @@ export class TaroPickerGroup {
     // 先按公式算出 index, 再用此 index 算出一个整数高度
     const index = Math.round(absoluteHeight / -LINE_HEIGHT);
     const relativeHeight = TOP - LINE_HEIGHT * index;
-    if (this.mode === 'date') {
+    if (this.mode === 'date' && typeof this.updateDay === 'function') {
       if (this.columnId === '0') {
         this.updateDay(+this.range[index].replace(/[^0-9]/gi, ''), 0);
       }
@@ -141,14 +140,16 @@ export class TaroPickerGroup {
       }
     }
     updateHeight(relativeHeight, columnId, mode === 'time');
-    onColumnChange && onColumnChange(relativeHeight, columnId);
+    this.onColumnChange.emit({
+      columnId,
+      height: relativeHeight,
+    });
   }
   onMouseDown(e) {
     this.isMove = true;
     this.handleMoveStart(e.clientY);
   }
   onMouseMove(e) {
-    e.preventDefault();
     if (!this.isMove)
       return;
     this.handleMoving(e.clientY);
@@ -163,7 +164,6 @@ export class TaroPickerGroup {
     this.handleMoveStart(e.changedTouches[0].clientY);
   }
   onTouchMove(e) {
-    e.preventDefault();
     this.handleMoving(e.changedTouches[0].clientY);
   }
   onTouchEnd(e) {
@@ -279,31 +279,16 @@ export class TaroPickerGroup {
           "text": ""
         }
       },
-      "onColumnChange": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(height: number, columnId: string) => void",
-          "resolved": "(height: number, columnId: string) => void",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
       "updateDay": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
           "original": "(value: number, fields: number) => void",
-          "resolved": "(value: number, fields: number) => void",
+          "resolved": "((value: number, fields: number) => void) | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -320,6 +305,24 @@ export class TaroPickerGroup {
       "isMove": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "onColumnChange",
+        "name": "columnChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "handleMoveStart": {
@@ -392,7 +395,7 @@ export class TaroPickerGroup {
         "name": "mousemove",
         "method": "onMouseMove",
         "target": undefined,
-        "capture": false,
+        "capture": true,
         "passive": true
       }, {
         "name": "mouseup",
@@ -416,7 +419,7 @@ export class TaroPickerGroup {
         "name": "touchmove",
         "method": "onTouchMove",
         "target": undefined,
-        "capture": false,
+        "capture": true,
         "passive": true
       }, {
         "name": "touchend",

package/dist/collection/components/picker/picker.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import classNames from 'classnames';
 import { hoursRange, minutesRange, compareTime, verifyValue, verifyTime, verifyDate, getYearRange, getMonthRange, getDayRange, formatValue } from './utils';
 import { TOP, LINE_HEIGHT } from './constant';
@@ -68,11 +68,19 @@ export class Picker {
         })
           .join('-');
       }
-      this.pickerValue = value;
+      this.value = value;
+      this.pickerValue = this.value;
       this.onChange.emit({
         value
       });
     };
+    this.handleColumnChange = (e) => {
+      const { columnId, height } = e.detail;
+      this.onColumnChange.emit({
+        column: Number(columnId),
+        value: (TOP - height) / LINE_HEIGHT
+      });
+    };
     // 点击取消按钮或蒙层
     this.handleCancel = () => {
       this.hidePicker();
@@ -110,12 +118,6 @@ export class Picker {
         }
       }
     };
-    this.handleColumnChange = (height, columnId) => {
-      this.onColumnChange.emit({
-        column: Number(columnId),
-        value: (TOP - height) / LINE_HEIGHT
-      });
-    };
     this.updateDay = (value, fields) => {
       const { _start, _end, _updateValue } = this.pickerDate;
       _updateValue[fields] = value;
@@ -201,6 +203,7 @@ export class Picker {
     this.end = '';
     this.fields = 'day';
     this.name = '';
+    this.textProps = {};
     this.pickerValue = [];
     this.height = [];
     this.hidden = true;
@@ -212,11 +215,6 @@ export class Picker {
     this.handleProps();
   }
   componentDidLoad() {
-    Object.defineProperty(this.el, 'value', {
-      get: () => this.pickerValue,
-      set: value => this.value !== value && (this.value = value),
-      configurable: true
-    });
     if (this.overlay) {
       document.body.appendChild(this.overlay);
     }
@@ -295,6 +293,9 @@ export class Picker {
         throw new Error('Date Interval Error');
       }
     }
+    else {
+      throw new Error(`Picker not support "${mode}" mode.`);
+    }
     // Prop 变化时，无论是否正在显示弹层，都更新 height 值
     this.height = this.getHeightByIndex();
     // 同步表单 value 值，用于 form submit
@@ -310,6 +311,7 @@ export class Picker {
     }
   }
   render() {
+    var _a, _b;
     const { name, mode, fadeOut, hidden } = this;
     // 选项条
     let pickerGroup;
@@ -334,7 +336,7 @@ export class Picker {
       'weui-animate-slide-down': fadeOut
     });
     const shouldDivHidden = hidden ? { display: 'none' } : {};
-    return (h(Host, null, h("div", { onClick: this.showPicker }, h("slot", null), h("input", { type: 'hidden', name: name, value: formatValue(this.pickerValue) })), h("div", { class: 'weui-picker__overlay', style: shouldDivHidden, ref: el => { this.overlay = el; } }, h("div", { class: clsMask, onClick: this.handleCancel }), h("div", { class: clsSlider }, h("div", { class: 'weui-picker__hd' }, h("div", { class: 'weui-picker__action', onClick: this.handleCancel }, "\u53D6\u6D88"), h("div", { class: 'weui-picker__action', onClick: this.handleChange }, "\u786E\u5B9A")), h("div", { class: 'weui-picker__bd' }, pickerGroup), h("input", { type: 'hidden', name: name, value: formatValue(this.pickerValue) })))));
+    return (h(Host, null, h("div", { onClick: this.showPicker }, h("slot", null), h("input", { type: 'hidden', name: name, value: formatValue(this.pickerValue) })), h("div", { class: 'weui-picker__overlay', style: shouldDivHidden, ref: el => { this.overlay = el; } }, h("div", { class: clsMask, onClick: this.handleCancel }), h("div", { class: clsSlider }, h("div", { class: 'weui-picker__hd' }, h("div", { class: 'weui-picker__action', onClick: this.handleCancel }, (_a = this.textProps.cancelText) !== null && _a !== void 0 ? _a : '取消'), h("div", { class: 'weui-picker__action', onClick: this.handleChange }, (_b = this.textProps.okText) !== null && _b !== void 0 ? _b : '确定')), h("div", { class: 'weui-picker__bd' }, pickerGroup), h("input", { type: 'hidden', name: name, value: formatValue(this.pickerValue) })))));
   }
   static get is() { return "taro-picker-core"; }
   static get originalStyleUrls() {
@@ -426,9 +428,13 @@ export class Picker {
         "type": "any",
         "mutable": true,
         "complexType": {
-          "original": "number | number[] | string",
+          "original": "PickerValue",
           "resolved": "number | number[] | string",
-          "references": {}
+          "references": {
+            "PickerValue": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -514,6 +520,26 @@ export class Picker {
         "attribute": "name",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "textProps": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "PickerText",
+          "resolved": "PickerText",
+          "references": {
+            "PickerText": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{}"
       }
     };
   }

package/dist/collection/components/pull-to-refresh/pull-to-refresh.js

@@ -49,7 +49,7 @@ export class PullToRefresh {
     };
     this.init = () => {
       const ele = this.scrollContainer;
-      const child = this.el.querySelector('rmc-pull-to-refresh-content');
+      const child = this.el.querySelector('.rmc-pull-to-refresh-content');
       this.el.appendChild = child === null || child === void 0 ? void 0 : child.appendChild.bind(child);
       this.el.insertBefore = child === null || child === void 0 ? void 0 : child.insertBefore.bind(child);
       this.el.replaceChild = child === null || child === void 0 ? void 0 : child.replaceChild.bind(child);

package/dist/collection/components/pull-to-refresh/style/index.css

@@ -3,8 +3,7 @@
 }
 
 .rmc-pull-to-refresh-content-wrapper {
-  overflow: hidden;
-  min-height: 100vh;
+  min-height: 100%;
 }
 
 .rmc-pull-to-refresh-transition {

package/dist/collection/components/rich-text/rich-text.js

@@ -48,6 +48,9 @@ export class RichText {
       return null;
     };
     this.nodes = undefined;
+    this.selectable = false;
+    this.userSelect = false;
+    this.space = undefined;
   }
   render() {
     const { nodes, renderNode } = this;
@@ -59,6 +62,16 @@ export class RichText {
     }
   }
   static get is() { return "taro-rich-text-core"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./style/index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["./style/index.css"]
+    };
+  }
   static get properties() {
     return {
       "nodes": {
@@ -81,6 +94,64 @@ export class RichText {
         },
         "attribute": "nodes",
         "reflect": false
+      },
+      "selectable": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selectable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "userSelect": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "user-select",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "space": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "keyof TextProps.TSpace",
+          "resolved": "\"emsp\" | \"ensp\" | \"nbsp\" | undefined",
+          "references": {
+            "TextProps": {
+              "location": "import",
+              "path": "types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "space",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/rich-text/style/index.css

@@ -0,0 +1,16 @@
+taro-rich-text-core {
+  user-select: none;
+}
+taro-rich-text-core[selectable=true], taro-rich-text-core[user-select=true] {
+  display: block;
+  user-select: text;
+}
+taro-rich-text-core[space] {
+  white-space: pre-wrap;
+}
+taro-rich-text-core[space=ensp] {
+  word-spacing: 0.5em;
+}
+taro-rich-text-core[space=nbsp] {
+  word-spacing: 1em;
+}