@tarojs/components 3.8.0-canary.0 → 4.0.0-alpha.2

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

@@ -1,47 +1,50 @@
 import { Host, h } from '@stencil/core';
 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;
+export class SwiperItem {
+  constructor() {
+    this.itemId = undefined;
+    this.deep = false;
+  }
+  handleCloneNode(node, deep) {
+    const clonedNode = nativeCloneNode.call(node, false);
+    const srcChildNodes = this.handleChildNodes(node);
+    if (deep) {
+      for (let i = 0; i < srcChildNodes.length; i++) {
+        const srcNode = srcChildNodes[i];
+        if (!srcNode)
+          break;
+        let srcDeep = deep;
+        if (srcNode.nodeType !== 2 && srcNode.nodeType !== 8) {
+          // Note: 没有引用节点（s-cr[reference comment]）的情况下，不复制子节点避免冗余（例如：Image 组件）
+          if (this.deep !== true && !srcNode['s-cr']) {
+            srcDeep = false;
+          }
+          const childClone = this.handleCloneNode(srcNode, srcDeep);
+          clonedNode.appendChild(childClone);
         }
-        const childClone = cloneNode(srcNode, srcDeep);
-        clonedNode.appendChild(childClone);
       }
     }
+    return clonedNode;
   }
-  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);
+  handleChildNodes(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 result;
-  }
-  return Array.from(childNodes);
-}
-export class SwiperItem {
-  constructor() {
-    this.itemId = undefined;
+    return Array.from(childNodes);
   }
   componentDidRender() {
     this.el.cloneNode = (deep = false) => {
-      return cloneNode.call(null, this.el, deep);
+      return this.handleCloneNode(this.el, deep);
     };
   }
   render() {
@@ -66,6 +69,24 @@ export class SwiperItem {
         },
         "attribute": "item-id",
         "reflect": false
+      },
+      "deep": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "deep",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -1,3 +1,20 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m")
+    throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _Swiper_id, _Swiper_source;
 import { h, Host } from '@stencil/core';
 import classNames from 'classnames';
 import SwiperJS from 'swiper/swiper-bundle.esm.js';
@@ -5,13 +22,14 @@ import { debounce } from '../../utils';
 let INSTANCE_ID = 0;
 export class Swiper {
   constructor() {
-    this._id = INSTANCE_ID++;
+    _Swiper_id.set(this, INSTANCE_ID++);
+    _Swiper_source.set(this, '');
     this.handleSwiperLoopListen = () => {
       var _a, _b, _c;
       ((_a = this.observerFirst) === null || _a === void 0 ? void 0 : _a.disconnect) && this.observerFirst.disconnect();
       ((_b = this.observerLast) === null || _b === void 0 ? void 0 : _b.disconnect) && this.observerLast.disconnect();
-      this.observerFirst = new MutationObserver(this.handleSwiperLoop);
-      this.observerLast = new MutationObserver(this.handleSwiperLoop);
+      this.observerFirst = new MutationObserver(this.handleSwiperLoopDebounce);
+      this.observerLast = new MutationObserver(this.handleSwiperLoopDebounce);
       const wrapper = (_c = this.swiper.$wrapperEl) === null || _c === void 0 ? void 0 : _c[0];
       const list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)');
       if (list.length >= 1) {
@@ -25,23 +43,24 @@ export class Swiper {
         });
       }
     };
-    this.handleSwiperLoop = debounce(() => {
-      var _a;
+    this.handleSwiperLoop = () => {
+      var _a, _b, _c, _d;
       if (!this.swiper || !this.circular)
         return;
       const swiper = this.swiper; // Note: loop 相关的方法 swiper 未声明
       const duplicates = ((_a = this.swiperWrapper) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.swiper-slide-duplicate')) || [];
       if (duplicates.length < 2) {
         // Note: 循环模式下，但是前后垫片未注入
-        swiper.loopDestroy();
-        swiper.loopCreate();
+        (_b = swiper.loopDestroy) === null || _b === void 0 ? void 0 : _b.call(swiper);
+        (_c = swiper.loopCreate) === null || _c === void 0 ? void 0 : _c.call(swiper);
       }
       else {
-        swiper.loopFix();
+        (_d = swiper.loopFix) === null || _d === void 0 ? void 0 : _d.call(swiper);
       }
-    }, 50);
-    this.handleSwiperSize = debounce(() => {
-      if (this.swiper && !this.circular) {
+    };
+    this.handleSwiperLoopDebounce = debounce(this.handleSwiperLoop, 50);
+    this.handleSwiperSizeDebounce = debounce(() => {
+      if (this.swiper && this.swiper.$wrapperEl && !this.circular) {
         this.swiper.updateSlides();
       }
     }, 50);
@@ -131,9 +150,9 @@ export class Swiper {
     this.el.removeChild = (oldChild) => {
       return newVal.removeChild(oldChild);
     };
-    this.el.addEventListener('DOMNodeInserted', this.handleSwiperSize);
-    this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSize);
-    this.el.addEventListener('MutationObserver', this.handleSwiperSize);
+    this.el.addEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce);
+    this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce);
+    this.el.addEventListener('MutationObserver', this.handleSwiperSizeDebounce);
   }
   watchCircular() {
     if (this.swiper) {
@@ -168,16 +187,18 @@ export class Swiper {
     if (this.autoplay && !((_a = this.swiper.autoplay) === null || _a === void 0 ? void 0 : _a.running)) {
       (_b = this.swiper.autoplay) === null || _b === void 0 ? void 0 : _b.start();
     }
-    this.swiper.update(); // 更新子元素
+    if (this.swiper.$el) {
+      this.swiper.update(); // 更新子元素
+    }
   }
   componentDidRender() {
     this.handleSwiperLoop();
   }
   disconnectedCallback() {
     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);
+    this.el.removeEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce);
+    this.el.removeEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce);
+    this.el.removeEventListener('MutationObserver', this.handleSwiperSizeDebounce);
     (_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);
@@ -187,7 +208,7 @@ export class Swiper {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
     const options = {
-      pagination: { el: `.taro-swiper-${this._id} > .swiper-container > .swiper-pagination` },
+      pagination: { el: `.taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container > .swiper-pagination` },
       direction: vertical ? 'vertical' : 'horizontal',
       loop: circular,
       slidesPerView: displayMultipleItems,
@@ -215,13 +236,22 @@ export class Swiper {
           }
           that.onChange.emit({
             current: this.realIndex,
-            source: ''
+            source: __classPrivateFieldGet(that, _Swiper_source, "f"),
           });
         },
+        touchEnd: () => {
+          __classPrivateFieldSet(that, _Swiper_source, 'touch', "f");
+        },
+        autoplay() {
+          __classPrivateFieldSet(that, _Swiper_source, 'autoplay', "f");
+        },
         transitionEnd() {
+          setTimeout(() => {
+            __classPrivateFieldSet(that, _Swiper_source, '', "f");
+          });
           that.onAnimationFinish.emit({
             current: this.realIndex,
-            source: ''
+            source: __classPrivateFieldGet(that, _Swiper_source, "f"),
           });
         },
         observerUpdate(_swiper, e) {
@@ -247,8 +277,8 @@ export class Swiper {
         disableOnInteraction: false
       };
     }
-    this.swiper = new SwiperJS(`.taro-swiper-${this._id} > .swiper-container`, options);
-    this.swiperWrapper = this.el.querySelector(`.taro-swiper-${this._id} > .swiper-container > .swiper-wrapper`);
+    this.swiper = new SwiperJS(`.taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container`, options);
+    this.swiperWrapper = this.el.querySelector(`.taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container > .swiper-wrapper`);
   }
   render() {
     const { vertical, indicatorDots, indicatorColor, indicatorActiveColor } = this;
@@ -270,9 +300,9 @@ export class Swiper {
       style.marginRight = `${nM}px`;
       style.marginLeft = `${pM}px`;
     }
-    return (h(Host, { class: `taro-swiper-${this._id}`, style: hostStyle }, h("div", { class: 'swiper-container', style: style }, h("style", { type: 'text/css' }, `
-              .taro-swiper-${this._id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: ${indicatorColor} }
-              .taro-swiper-${this._id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: ${indicatorActiveColor} }
+    return (h(Host, { class: `taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")}`, style: hostStyle }, h("div", { class: 'swiper-container', style: style }, h("style", { type: 'text/css' }, `
+              .taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: ${indicatorColor} }
+              .taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: ${indicatorActiveColor} }
             `), h("div", { class: 'swiper-wrapper' }, h("slot", null)), h("div", { class: classNames('swiper-pagination', {
         'swiper-pagination-hidden': !indicatorDots,
         'swiper-pagination-bullets': indicatorDots
@@ -614,3 +644,4 @@ export class Swiper {
       }];
   }
 }
+_Swiper_id = new WeakMap(), _Swiper_source = new WeakMap();

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

@@ -1,10 +1 @@
-taro-switch-core {
-  display: inline-block;
-  width: 52px;
-  height: 32px;
-}
-taro-switch-core .weui-switch {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
+.weui-cell_switch{padding-top:6.5px;padding-bottom:6.5px}.weui-switch{appearance:none}.weui-switch,.weui-switch-cp__box{box-sizing:border-box;background-color:#dfdfdf;border:1px solid #dfdfdf;border-radius:16px;outline:0;width:52px;height:32px;transition:background-color .1s,border .1s;position:relative}.weui-switch:before,.weui-switch-cp__box:before{content:" ";background-color:#fdfdfd;border-radius:15px;width:50px;height:30px;transition:transform .35s cubic-bezier(.45,1,.4,1);position:absolute;top:0;left:0}.weui-switch:after,.weui-switch-cp__box:after{content:" ";background-color:#fff;border-radius:15px;width:30px;height:30px;transition:transform .35s cubic-bezier(.4,.4,.25,1.35);position:absolute;top:0;left:0;box-shadow:0 1px 3px rgba(0,0,0,.4)}.weui-switch:checked,.weui-switch-cp__input:checked~.weui-switch-cp__box{background-color:#04be02;border-color:#04be02}.weui-switch:checked:before,.weui-switch-cp__input:checked~.weui-switch-cp__box:before{transform:scale(0)}.weui-switch:checked:after,.weui-switch-cp__input:checked~.weui-switch-cp__box:after{transform:translate(20px)}.weui-switch-cp__input{position:absolute;left:-9999px}.weui-switch-cp__box{display:block}taro-switch-core{width:52px;height:32px;display:inline-block}taro-switch-core .weui-switch{width:100%;height:100%;display:block}

package/dist/collection/components/switch/switch.js

@@ -4,7 +4,7 @@ export class Switch {
     this.switchChange = e => {
       e.stopPropagation();
       const value = e.target.checked;
-      this.isChecked = value;
+      this.checked = value;
       this.onChange.emit({
         value
       });
@@ -15,34 +15,35 @@ export class Switch {
     this.name = undefined;
     this.disabled = false;
     this.nativeProps = {};
-    this.isChecked = undefined;
     this.isWillLoadCalled = false;
   }
-  function(newVal, oldVal) {
+  function(newValue) {
     if (!this.isWillLoadCalled)
       return;
-    if (newVal !== oldVal)
-      this.isChecked = newVal;
+    if (this.inputRef.checked !== newValue) {
+      this.inputRef.checked = newValue;
+    }
   }
   componentWillLoad() {
     this.isWillLoadCalled = true;
-    this.isChecked = this.checked;
   }
   componentDidLoad() {
     Object.defineProperty(this.el, 'value', {
-      get: () => this.isChecked,
+      get: () => this.checked,
       configurable: true
     });
   }
   render() {
-    const { type, color, isChecked, name, disabled, nativeProps } = this;
-    const style = isChecked
+    const { type, color, checked, name, disabled, nativeProps } = this;
+    const style = checked
       ? {
         borderColor: color || '04BE02',
         backgroundColor: color || '04BE02'
       }
       : {};
-    return (h("input", Object.assign({ type: 'checkbox', class: `weui-${type}`, style: style, checked: isChecked, name: name, disabled: disabled, onChange: this.switchChange }, nativeProps)));
+    return (h("input", Object.assign({ ref: input => {
+        this.inputRef = input;
+      }, type: 'checkbox', class: `weui-${type}`, style: style, checked: checked, name: name, disabled: disabled, onChange: this.switchChange }, nativeProps)));
   }
   static get is() { return "taro-switch-core"; }
   static get originalStyleUrls() {
@@ -77,7 +78,7 @@ export class Switch {
       },
       "checked": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -166,7 +167,6 @@ export class Switch {
   }
   static get states() {
     return {
-      "isChecked": {},
       "isWillLoadCalled": {}
     };
   }

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

@@ -1,49 +1 @@
-html,
-body {
-  height: 100%;
-}
-
-#app {
-  height: 100%;
-}
-
-.taro-tabbar__border-white::before {
-  border-top-color: #fff !important;
-}
-.taro-tabbar__container {
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
-  height: 100%;
-}
-.taro-tabbar__panel {
-  overflow: auto;
-  position: relative;
-  flex: 1;
-  -webkit-overflow-scrolling: auto;
-}
-.taro-tabbar__tabbar {
-  position: relative;
-  width: 100%;
-  height: 50px;
-  transition: bottom 0.2s, top 0.2s;
-}
-.taro-tabbar__tabbar-top {
-  top: 0;
-}
-.taro-tabbar__tabbar-bottom {
-  bottom: 0;
-  margin-bottom: constant(safe-area-inset-bottom);
-  margin-bottom: env(safe-area-inset-bottom);
-}
-.taro-tabbar__tabbar-hide {
-  display: none;
-}
-.taro-tabbar__tabbar-slideout {
-  top: -52px;
-  flex: 0 0;
-}
-.taro-tabbar__panel + .taro-tabbar__tabbar-slideout {
-  top: auto;
-  bottom: -52px;
-}
+.weui-tabbar{z-index:500;background-color:#f7f7fa;width:100%;display:flex;position:absolute;bottom:0}.weui-tabbar:before{content:" ";color:#c0bfc4;transform-origin:0 0;border-top:1px solid #c0bfc4;height:1px;position:absolute;top:0;left:0;right:0;transform:scaleY(.5)}.weui-tabbar__item{padding:5px 0;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);color:#999;text-align:center;-webkit-tap-highlight-color:transparent;flex:1;font-size:0;display:block}.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{color:#09bb07}.weui-tabbar__icon{width:27px;height:27px;display:inline-block}.weui-tabbar__icon img{width:100%;height:100%}i.weui-tabbar__icon,.weui-tabbar__icon>i{color:#999;font-size:24px}.weui-tabbar__label{text-align:center;color:#999;font-size:10px;line-height:1.8}.weui-badge{color:#fff;text-align:center;vertical-align:middle;background-color:#f43530;border-radius:18px;min-width:8px;padding:.15em .4em;font-size:12px;line-height:1.2;display:inline-block}.weui-badge_dot{min-width:0;padding:.4em}html,body{height:100%}:root{--taro-tabbar-height:$weuiTabBarHeight}#app{height:100%}.taro-tabbar__border-white:before{border-top-color:#fff!important}.taro-tabbar__container{flex-direction:column;height:100%;display:flex;overflow:hidden}.taro-tabbar__panel{-webkit-overflow-scrolling:auto;flex:1;position:relative;overflow:auto}.taro-tabbar__tabbar{height:var(--taro-tabbar-height);width:100%;transition:bottom .2s,top .2s;position:relative}.taro-tabbar__tabbar-top{top:0}.taro-tabbar__tabbar-bottom{margin-bottom:constant(safe-area-inset-bottom);margin-bottom:env(safe-area-inset-bottom);bottom:0}.taro-tabbar__tabbar-hide{display:none}.taro-tabbar__tabbar-slideout{flex:0 0;top:-52px}.taro-tabbar__panel+.taro-tabbar__tabbar-slideout{top:auto;bottom:-52px}

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

@@ -1,6 +1,6 @@
-import classNames from 'classnames';
 import { h } from '@stencil/core';
 import Taro from '@tarojs/taro';
+import classNames from 'classnames';
 import { isVisible } from '../../utils';
 export const TabbarItem = ({ index, isSelected = false, textColor, iconPath, badgeText, showRedDot = false, pagePath, text, onSelect }) => {
   const className = classNames('weui-tabbar__item', {

package/dist/collection/components/tabbar/tabbar.js

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
+import { addLeadingSlash, getCurrentPage, stripBasename, stripSuffix } from '@tarojs/runtime';
 import Taro from '@tarojs/taro';
-import { addLeadingSlash, getCurrentPage, stripBasename, stripSuffix } from '@tarojs/router/dist/utils';
 import classNames from 'classnames';
 import resolvePathname from 'resolve-pathname';
 import { splitUrl } from '../../utils';
@@ -300,11 +300,11 @@ export class Tabbar {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "Conf",
-          "resolved": "Conf",
+          "original": "ITabBarConf",
+          "resolved": "ITabBarConf",
           "references": {
-            "Conf": {
-              "location": "local"
+            "ITabBarConf": {
+              "location": "global"
             }
           }
         },

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

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

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

@@ -1,22 +1 @@
-taro-textarea-core {
-  display: block;
-  width: 300px;
-}
-
-taro-textarea-core .auto-height {
-  height: auto;
-}
-
-.taro-textarea {
-  display: block;
-  position: relative;
-  border: 0;
-  width: 100%;
-  height: inherit;
-  appearance: none;
-  cursor: auto;
-  line-height: 1.5;
-}
-.taro-textarea:focus {
-  outline: none;
-}
+taro-textarea-core{width:300px;display:block}taro-textarea-core .auto-height{height:auto}.taro-textarea{height:inherit;appearance:none;cursor:auto;border:0;width:100%;line-height:1.5;display:block;position:relative}.taro-textarea:focus{outline:none}

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

@@ -8,6 +8,7 @@ export class Textarea {
       e.stopPropagation();
       this.handleLineChange();
       const value = e.target.value || '';
+      this.value = value;
       this.onInput.emit({
         value,
         cursor: value.length
@@ -112,6 +113,13 @@ export class Textarea {
       (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }
+  watchValue(newValue) {
+    // hack: 在事件回调中，props.value 变化不知为何不会触发 Stencil 更新，因此这里手动更新一下
+    const value = fixControlledValue(newValue);
+    if (this.textareaRef.value !== value) {
+      this.textareaRef.value = value;
+    }
+  }
   async focus() {
     this.textareaRef.focus();
   }
@@ -422,6 +430,9 @@ export class Textarea {
     return [{
         "propName": "autoFocus",
         "methodName": "watchAutoFocus"
+      }, {
+        "propName": "value",
+        "methodName": "watchValue"
       }];
   }
 }