@tarojs/components 3.7.0-alpha.0 → 3.7.0-alpha.10

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,7 +3,6 @@
 }
 
 .rmc-pull-to-refresh-content-wrapper {
-  overflow: hidden;
   min-height: 100vh;
 }
 

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;
+}

package/dist/collection/components/scroll-view/scroll-view.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import classNames from 'classnames';
 import { debounce } from '../../utils';
 function easeOutScroll(from, to, duration = 500, callback) {
@@ -52,6 +52,7 @@ export class ScrollView {
     this.mpScrollTop = undefined;
     this.mpScrollLeft = undefined;
     this.mpScrollIntoView = undefined;
+    this.mpScrollIntoViewAlignment = undefined;
     this.animated = false;
   }
   watchScrollLeft(newVal) {
@@ -111,9 +112,9 @@ export class ScrollView {
     var _a;
     if (typeof selector === 'string' && selector) {
       (_a = document.querySelector(`#${selector}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'start'
+        behavior: this.animated ? 'smooth' : 'auto',
+        block: this.scrollY ? (this.mpScrollIntoViewAlignment || 'center') : 'center',
+        inline: this.scrollX ? (this.mpScrollIntoViewAlignment || 'start') : 'start'
       });
     }
   }
@@ -269,6 +270,23 @@ export class ScrollView {
         "attribute": "scroll-into-view",
         "reflect": true
       },
+      "mpScrollIntoViewAlignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'center' | 'end' | 'nearest'",
+          "resolved": "\"center\" | \"end\" | \"nearest\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "scroll-into-view-alignment",
+        "reflect": false
+      },
       "animated": {
         "type": "boolean",
         "mutable": false,

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

@@ -1,49 +1,48 @@
 import { Host, h } from '@stencil/core';
-function isEqualTag(a, b) {
-  return typeof a.tagName === 'undefined' ? a.nodeType === b.nodeType : a.tagName === b.tagName;
-}
-function parseChildNodes(items, targets, needClean = false) {
-  const list = Array.from(targets.values());
-  for (let i = 0, j = 0; i < list.length; i++) {
-    const target = list[i];
-    if (!target)
-      return;
-    let item = items.item(j);
-    while (item) {
-      if (!isEqualTag(item, target) || needClean) {
-        item.remove();
-        j++;
-        item = items.item(j);
-        continue;
-      }
-      if (target.childNodes.length > 0) {
-        const cleanAll = ['taro-image-core'].includes(target.tagName.toLocaleLowerCase());
-        parseChildNodes(item.childNodes, target.childNodes, cleanAll);
+const nativeCloneNode = Node.prototype.cloneNode;
+function cloneNode(node, deep) {
+  const clonedNode = nativeCloneNode.call(node, false);
+  const srcChildNodes = childNodes(node);
+  if (deep) {
+    for (let i = 0; i < srcChildNodes.length; i++) {
+      const srcNode = srcChildNodes[i];
+      let srcDeep = deep;
+      if (srcNode.nodeType !== 2 && srcNode.nodeType !== 8) {
+        // Note: 没有引用节点（s-cr[reference comment]）的情况下，不复制子节点避免冗余（例如：Image 组件）
+        if (!srcNode['s-cr']) {
+          srcDeep = false;
+        }
+        const childClone = cloneNode(srcNode, srcDeep);
+        clonedNode.appendChild(childClone);
       }
-      break;
     }
-    while (i === list.length - 1 && j < items.length) {
-      j++;
-      item = items.item(j);
-      item === null || item === void 0 ? void 0 : item.remove();
+  }
+  return clonedNode;
+}
+function childNodes(node) {
+  const childNodes = node.childNodes;
+  // check if element is stencil element without shadow dom
+  // and then detect elements that were slotted into the element
+  if (node['s-sc']) {
+    const result = [];
+    for (let i = 0; i < childNodes.length; i++) {
+      const slot = childNodes[i]['s-nr'];
+      if (slot) {
+        result.push(slot);
+      }
     }
+    return result;
   }
+  return Array.from(childNodes);
 }
 export class SwiperItem {
   constructor() {
     this.itemId = undefined;
   }
   componentDidRender() {
-    var _a, _b, _c;
-    const el = this.el;
-    if (el.classList.contains('swiper-slide-duplicate')) {
-      const list = Array
-        .from(((_b = (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.childNodes) === null || _b === void 0 ? void 0 : _b.values()) || [])
-        .filter((e) => e.tagName === 'TARO-SWIPER-ITEM-CORE');
-      if (list.length > 0) {
-        parseChildNodes(el.childNodes, (_c = list[list.indexOf(el) === 0 ? list.length - 2 : 1]) === null || _c === void 0 ? void 0 : _c.childNodes);
-      }
-    }
+    this.el.cloneNode = (deep = false) => {
+      return cloneNode.call(null, this.el, deep);
+    };
   }
   render() {
     return (h(Host, { class: 'swiper-slide', "item-id": this.itemId }));

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

@@ -133,6 +133,7 @@ export class Swiper {
     };
     this.el.addEventListener('DOMNodeInserted', this.handleSwiperSize);
     this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSize);
+    this.el.addEventListener('MutationObserver', this.handleSwiperSize);
   }
   watchCircular() {
     if (this.swiper) {
@@ -176,6 +177,7 @@ export class Swiper {
     var _a, _b, _c, _d, _e, _f;
     this.el.removeEventListener('DOMNodeInserted', this.handleSwiperSize);
     this.el.removeEventListener('DOMNodeRemoved', this.handleSwiperSize);
+    this.el.removeEventListener('MutationObserver', this.handleSwiperSize);
     (_b = (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
     (_d = (_c = this.observerFirst) === null || _c === void 0 ? void 0 : _c.disconnect) === null || _d === void 0 ? void 0 : _d.call(_c);
     (_f = (_e = this.observerLast) === null || _e === void 0 ? void 0 : _e.disconnect) === null || _f === void 0 ? void 0 : _f.call(_e);

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

@@ -1,9 +1,26 @@
 taro-text-core {
   display: inline;
   user-select: none;
-  white-space: pre-wrap;
 }
-
-.taro-text__selectable {
+taro-text-core[selectable=true], taro-text-core[user-select=true] {
+  display: inline-block;
   user-select: text;
+}
+taro-text-core[space] {
+  white-space: pre-wrap;
+}
+taro-text-core[space=ensp] {
+  word-spacing: 0.5em;
+}
+taro-text-core[space=nbsp] {
+  word-spacing: 1em;
+}
+taro-text-core[number-of-lines] {
+  --line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: var(--line-clamp);
 }

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

@@ -1,14 +1,17 @@
 import { h, Host } from '@stencil/core';
-import classNames from 'classnames';
 export class Text {
   constructor() {
     this.selectable = false;
+    this.userSelect = false;
+    this.space = undefined;
+    this.numberOfLines = undefined;
   }
   render() {
-    const cls = classNames({
-      'taro-text__selectable': this.selectable
-    });
-    return (h(Host, { class: cls }, h("slot", null)));
+    const style = {};
+    if (typeof this.numberOfLines === 'number') {
+      style['--line-clamp'] = this.numberOfLines;
+    }
+    return (h(Host, { style: style }, h("slot", null)));
   }
   static get is() { return "taro-text-core"; }
   static get originalStyleUrls() {
@@ -25,7 +28,7 @@ export class Text {
     return {
       "selectable": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -40,6 +43,63 @@ export class 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": true,
+        "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
+      },
+      "numberOfLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "number-of-lines",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/textarea/textarea.js

@@ -96,7 +96,7 @@ export class Textarea {
       numberOfLines = Math.floor(taHeight / taLineHeight);
       return numberOfLines;
     };
-    this.value = undefined;
+    this.value = '';
     this.placeholder = undefined;
     this.disabled = false;
     this.maxlength = 140;
@@ -115,13 +115,6 @@ export class Textarea {
   async focus() {
     this.textareaRef.focus();
   }
-  componentDidLoad() {
-    Object.defineProperty(this.el, 'value', {
-      get: () => this.textareaRef.value,
-      set: value => this.value !== value && (this.value = value),
-      configurable: true
-    });
-  }
   render() {
     const { value, placeholder, disabled, maxlength, autoFocus, autoHeight, name, nativeProps, handleInput, handleFocus, handleBlur, handleChange } = this;
     const otherProps = {};
@@ -164,7 +157,8 @@ export class Textarea {
           "text": ""
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "''"
       },
       "placeholder": {
         "type": "string",
@@ -234,7 +228,7 @@ export class Textarea {
           "text": ""
         },
         "attribute": "focus",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       },
       "autoHeight": {

package/dist/collection/components/video/video.js

@@ -60,7 +60,7 @@ export class Video {
       const { src, videoRef } = this;
       if (isHls(src)) {
         import(
-        /* webpackMode: "weak" */
+        /* webpackExports: ["default"] */
         'hls.js').then(e => {
           const Hls = e.default;
           this.HLS = Hls;