@tarojs/components 3.7.0-canary.6 → 3.8.0-canary.1

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,7 +22,8 @@ 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();
@@ -42,19 +60,19 @@ export class Swiper {
     };
     this.handleSwiperLoopDebounce = debounce(this.handleSwiperLoop, 50);
     this.handleSwiperSizeDebounce = debounce(() => {
-      if (this.swiper && !this.circular) {
+      if (this.swiper && this.swiper.$wrapperEl && !this.circular) {
         this.swiper.updateSlides();
       }
     }, 50);
     this.swiperWrapper = undefined;
     this.swiper = undefined;
     this.isWillLoadCalled = false;
-    this.source = '';
     this.indicatorDots = false;
     this.indicatorColor = 'rgba(0, 0, 0, .3)';
     this.indicatorActiveColor = '#000000';
     this.autoplay = false;
     this.current = 0;
+    this.currentItemId = '';
     this.interval = 5000;
     this.duration = 500;
     this.circular = false;
@@ -69,7 +87,7 @@ export class Swiper {
     this.observerLast = undefined;
   }
   watchCurrent(newVal) {
-    if (!this.isWillLoadCalled)
+    if (this.currentItemId || !this.isWillLoadCalled)
       return;
     const n = parseInt(newVal, 10);
     if (isNaN(n))
@@ -83,6 +101,25 @@ export class Swiper {
       this.swiper.slideTo(n); // 更新下标
     }
   }
+  watchCurrentItemId(newVal) {
+    var _a;
+    const wrapper = (_a = this.swiper.$wrapperEl) === null || _a === void 0 ? void 0 : _a[0];
+    let itemIdIndex = 0;
+    wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => {
+      // @ts-ignore
+      if (swiperItem.itemId && swiperItem.itemId === newVal) {
+        itemIdIndex = index;
+      }
+    });
+    if (this.circular) {
+      if (!this.swiper.isBeginning && !this.swiper.isEnd) {
+        this.swiper.slideToLoop(itemIdIndex); // 更新下标
+      }
+    }
+    else {
+      this.swiper.slideTo(itemIdIndex); // 更新下标
+    }
+  }
   watchAutoplay(newVal) {
     if (!this.isWillLoadCalled || !this.swiper)
       return;
@@ -170,7 +207,9 @@ 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();
@@ -185,15 +224,26 @@ export class Swiper {
     (_f = (_e = this.observerLast) === null || _e === void 0 ? void 0 : _e.disconnect) === null || _f === void 0 ? void 0 : _f.call(_e);
   }
   handleInit() {
-    const { autoplay, circular, current, displayMultipleItems, duration, interval, vertical } = this;
+    const { autoplay, circular, current, currentItemId, displayMultipleItems, duration, interval, vertical } = this;
+    let initialSlide = circular ? current + 1 : current;
+    if (currentItemId) {
+      let itemIdIndex = 0;
+      this.el.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => {
+        // @ts-ignore
+        if (swiperItem.itemId && swiperItem.itemId === currentItemId) {
+          itemIdIndex = index;
+        }
+      });
+      initialSlide = circular ? itemIdIndex + 1 : itemIdIndex;
+    }
     // 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,
-      initialSlide: circular ? current + 1 : current,
+      initialSlide: initialSlide,
       speed: duration,
       observer: true,
       observeParents: true,
@@ -217,22 +267,22 @@ export class Swiper {
           }
           that.onChange.emit({
             current: this.realIndex,
-            source: that.source
+            source: __classPrivateFieldGet(that, _Swiper_source, "f"),
           });
         },
         touchEnd: () => {
-          that.source = 'touch';
+          __classPrivateFieldSet(that, _Swiper_source, 'touch', "f");
         },
         autoplay() {
-          that.source = 'autoplay';
+          __classPrivateFieldSet(that, _Swiper_source, 'autoplay', "f");
         },
         transitionEnd() {
           setTimeout(() => {
-            that.source = '';
+            __classPrivateFieldSet(that, _Swiper_source, '', "f");
           });
           that.onAnimationFinish.emit({
             current: this.realIndex,
-            source: ''
+            source: __classPrivateFieldGet(that, _Swiper_source, "f"),
           });
         },
         observerUpdate(_swiper, e) {
@@ -258,8 +308,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;
@@ -281,9 +331,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
@@ -392,6 +442,24 @@ export class Swiper {
         "reflect": false,
         "defaultValue": "0"
       },
+      "currentItemId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u5F53\u524D\u6240\u5728\u6ED1\u5757\u7684 item-id"
+        },
+        "attribute": "current-item-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "interval": {
         "type": "number",
         "mutable": false,
@@ -561,7 +629,6 @@ export class Swiper {
       "swiperWrapper": {},
       "swiper": {},
       "isWillLoadCalled": {},
-      "source": {},
       "observer": {},
       "observerFirst": {},
       "observerLast": {}
@@ -605,6 +672,9 @@ export class Swiper {
     return [{
         "propName": "current",
         "methodName": "watchCurrent"
+      }, {
+        "propName": "currentItemId",
+        "methodName": "watchCurrentItemId"
       }, {
         "propName": "autoplay",
         "methodName": "watchAutoplay"
@@ -626,3 +696,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,53 +1 @@
-html,
-body {
-  height: 100%;
-}
-
-:root {
-  --taro-tabbar-height: 50px;
-}
-
-#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: var(--taro-tabbar-height);
-  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;align-items:center;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:50px}#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": "ITabBarConf",
-          "resolved": "ITabBarConf",
+          "original": "Conf",
+          "resolved": "Conf",
           "references": {
-            "ITabBarConf": {
-              "location": "global"
+            "Conf": {
+              "location": "local"
             }
           }
         },

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"
       }];
   }
 }