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

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

@@ -1,11 +1,225 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, Host } from '@stencil/core';
+import { Component, h, Host, Element, Prop, Event, Listen } from '@stencil/core';
+import classNames from 'classnames';
+import { convertStyle } from '../../utils';
 export class PickerView {
+  onSelect(e) {
+    e.stopPropagation();
+    if (e.target.tagName !== 'TARO-PICKER-VIEW-COLUMN-CORE')
+      return;
+    let _curIndex = +e.detail.curIndex;
+    let _selectedIndex = +e.detail.selectedIndex;
+    this.value[_curIndex] = _selectedIndex;
+    this.onChange.emit({ value: this.value });
+  }
+  onSelectStart(e) {
+    e.stopPropagation();
+    if (e.target.tagName !== 'TARO-PICKER-VIEW-COLUMN-CORE')
+      return;
+    this.onPickStart.emit();
+  }
+  onPickerColEnd(e) {
+    e.stopPropagation();
+    if (e.target.tagName !== 'TARO-PICKER-VIEW-COLUMN-CORE')
+      return;
+    this.onPickEnd.emit();
+  }
   componentDidLoad() {
-    console.error('H5 暂不支持 PickerView 组件！');
+    const childList = this.el.querySelectorAll('taro-picker-view-column-core');
+    childList.forEach((element, index) => {
+      var _a;
+      element.setAttribute('col', `${index}`);
+      let selectIndex = '0';
+      if (!!this.value && this.value.length > index) {
+        selectIndex = `${this.value[index]}`;
+      }
+      const pickerHeight = this.el.getBoundingClientRect().height;
+      const indicatorHeight = ((_a = this.indicator) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+      const paddingVertical = (pickerHeight - indicatorHeight) / 2.0;
+      element.setAttribute('initial-position', `${selectIndex}`);
+      element.setAttribute('padding-vertical', `${paddingVertical}`);
+    });
+  }
+  // 过滤非 PickerViewColumn 组件
+  componentDidRender() {
+    this.el.childNodes.forEach(item => {
+      const childEle = item;
+      if ('TARO-PICKER-VIEW-COLUMN-CORE' !== childEle.tagName &&
+        childEle.className !== 'taro-picker-view-mask-container') {
+        this.el.removeChild(item);
+      }
+    });
   }
   render() {
-    return (h(Host, null));
+    const indicatorCls = classNames('taro-picker-view-mask-indicator', this.indicatorClass);
+    const maskTopCls = classNames('taro-picker-view-mask-top', this.maskClass);
+    const maskBtmCls = classNames('taro-picker-view-mask-bottom', this.maskClass);
+    const indicatorStyle = convertStyle(this.indicatorStyle);
+    const maskTopStyle = convertStyle(this.maskStyle);
+    const maskBottomStyle = convertStyle(this.maskStyle);
+    return (h(Host, { class: "taro-picker-view-container" },
+      h("slot", null),
+      h("div", { class: "taro-picker-view-mask-container" },
+        h("div", { class: maskTopCls, style: maskTopStyle }),
+        h("div", { class: indicatorCls, style: indicatorStyle, ref: indicator => (this.indicator = indicator) }),
+        h("div", { class: maskBtmCls, style: maskBottomStyle }))));
   }
   static get is() { return "taro-picker-view-core"; }
+  static get originalStyleUrls() { return {
+    "$": ["./style/index.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["./style/index.css"]
+  }; }
+  static get properties() { return {
+    "indicatorStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indicator-style",
+      "reflect": false
+    },
+    "indicatorClass": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indicator-class",
+      "reflect": false
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "number[]",
+        "resolved": "number[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "maskStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "mask-style",
+      "reflect": false
+    },
+    "maskClass": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "mask-class",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "onChange",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "onPickStart",
+      "name": "pickstart",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "onPickEnd",
+      "name": "pickend",
+      "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": "onselect",
+      "method": "onSelect",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "onselectstart",
+      "method": "onSelectStart",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "onselectend",
+      "method": "onPickerColEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/picker-view/style/column.css

@@ -0,0 +1,12 @@
+.taro-picker-view-column-container {
+  display: flex;
+  overflow: scroll;
+  overflow-x: hidden;
+  position: relative;
+  flex-direction: column;
+  flex: 1;
+  text-align: center;
+}
+.taro-picker-view-column-container::-webkit-scrollbar {
+  display: none;
+}

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

@@ -0,0 +1,28 @@
+.taro-picker-view-container {
+  display: flex;
+  position: relative;
+}
+.taro-picker-view-mask-container {
+  display: flex;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  flex-direction: column;
+  pointer-events: none;
+}
+.taro-picker-view-mask-indicator {
+  display: flex;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  height: 50px;
+}
+.taro-picker-view-mask-top {
+  flex: 1;
+  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+}
+.taro-picker-view-mask-bottom {
+  flex: 1;
+  background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+}

package/dist/collection/components/{pull-down-refresh → pull-to-refresh}/pull-to-refresh.js

@@ -1,6 +1,6 @@
 import { Component, Prop, h, Host, State, Event, Watch, Element } from '@stencil/core';
+import Taro from '@tarojs/taro';
 import classNames from 'classnames';
-const Taro = require('@tarojs/taro');
 function setTransform(nodeStyle, value) {
   nodeStyle.transform = value;
   nodeStyle.webkitTransform = value;
@@ -55,6 +55,11 @@ export class PullToRefresh {
     };
     this.init = () => {
       const ele = this.scrollContainer;
+      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);
+      this.el.removeChild = child === null || child === void 0 ? void 0 : child.removeChild.bind(child);
       this._to = {
         touchstart: this.onTouchStart.bind(this, ele),
         touchmove: this.onTouchMove.bind(this, ele),
@@ -159,7 +164,7 @@ export class PullToRefresh {
       this.setContentStyle(0);
     };
     this.setContentStyle = (ty) => {
-      // todos: Why sometimes do not have `this.contentRef` ?
+      // TODO: Why sometimes do not have `this.contentRef` ?
       if (this.contentRef) {
         // translate3d 不清理 会影响内部元素 定位
         if (ty) {
@@ -172,7 +177,12 @@ export class PullToRefresh {
     };
   }
   get scrollContainer() {
-    return document.querySelector('.taro-tabbar__panel') || document.body;
+    return this.el.parentElement ||
+      document.querySelector('.taro_page_stationed') ||
+      document.querySelector('.taro_page') ||
+      document.querySelector('.taro_router') ||
+      document.querySelector('.taro-tabbar__panel') ||
+      document.body;
   }
   statusChange() {
     if (this.currSt === 'release') {
@@ -237,7 +247,7 @@ export class PullToRefresh {
   }
   static get is() { return "taro-pull-to-refresh"; }
   static get originalStyleUrls() { return {
-    "$": ["./style/index.css"]
+    "$": ["./style/index.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["./style/index.css"]

package/dist/collection/components/{pull-down-refresh → pull-to-refresh}/style/index.css

@@ -1,49 +1,53 @@
-.rmc-pull-to-refresh-content {
-  transform-origin: left top 0px;
-}
-.rmc-pull-to-refresh-content-wrapper {
-  overflow: hidden;
-}
-
-.rmc-pull-to-refresh-transition {
-  transition: transform 0.3s;
-}
-
-
-@keyframes rmc-pull-to-refresh-indicator {
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.rmc-pull-to-refresh-indicator {
-  text-align: center;
-  height: 30px;
-  line-height: 10px;
-}
-
-.rmc-pull-to-refresh-indicator > div {
-  background-color: grey;
-  width: 6px;
-  height: 6px;
-  border-radius: 100%;
-  margin: 3px;
-  animation-fill-mode: both;
-  display: inline-block;
-  animation: rmc-pull-to-refresh-indicator 0.5s 0s infinite linear;
-}
-.rmc-pull-to-refresh-indicator > div:nth-child(0) {
-  animation-delay: -0.1s !important;
-}
-.rmc-pull-to-refresh-indicator > div:nth-child(1) {
-  animation-delay: -0.2s !important;
-}
-.rmc-pull-to-refresh-indicator > div:nth-child(2) {
-  animation-delay: -0.3s !important;
-}
-.rmc-pull-to-refresh-down .rmc-pull-to-refresh-indicator {
-  margin-top: -25px;
-}
+.rmc-pull-to-refresh-content {
+  transform-origin: left top 0;
+}
+
+.rmc-pull-to-refresh-content-wrapper {
+  overflow: hidden;
+  min-height: 100vh;
+}
+
+.rmc-pull-to-refresh-transition {
+  transition: transform 0.3s;
+}
+
+@keyframes rmc-pull-to-refresh-indicator {
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.rmc-pull-to-refresh-indicator {
+  height: 30px;
+  line-height: 10px;
+  text-align: center;
+}
+
+.rmc-pull-to-refresh-indicator > div {
+  display: inline-block;
+  margin: 3px;
+  border-radius: 100%;
+  width: 6px;
+  height: 6px;
+  background-color: grey;
+  animation: rmc-pull-to-refresh-indicator 0.5s 0s infinite linear;
+  animation-fill-mode: both;
+}
+
+.rmc-pull-to-refresh-indicator > div:nth-child(0) {
+  animation-delay: -0.1s !important;
+}
+
+.rmc-pull-to-refresh-indicator > div:nth-child(1) {
+  animation-delay: -0.2s !important;
+}
+
+.rmc-pull-to-refresh-indicator > div:nth-child(2) {
+  animation-delay: -0.3s !important;
+}
+
+.rmc-pull-to-refresh-down .rmc-pull-to-refresh-indicator {
+  margin-top: -25px;
+}

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

@@ -3,7 +3,7 @@ export class RichText {
   constructor() {
     this.renderNode = (node) => {
       if ('type' in node && node.type === 'text') {
-        // unsupport Html Entries
+        // nonsupport Html Entries
         const content = (node.text || '').replace(/ /g, '\u00A0');
         return content;
       }

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

@@ -1,6 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Component, h, Prop, Event, Watch, Element, Host } from '@stencil/core';
 import classNames from 'classnames';
+import { debounce } from '../../utils';
 function easeOutScroll(from, to, callback) {
   if (from === to || typeof from !== 'number') {
     return;
@@ -23,15 +24,6 @@ function easeOutScroll(from, to, callback) {
   }
   step();
 }
-function debounce(fn, delay) {
-  let timer;
-  return function (...arrs) {
-    clearTimeout(timer);
-    timer = setTimeout(function () {
-      fn(...arrs);
-    }, delay);
-  };
-}
 export class ScrollView {
   constructor() {
     this.scrollX = false;
@@ -45,7 +37,7 @@ export class ScrollView {
       const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = this.el;
       this._scrollLeft = scrollLeft;
       this._scrollTop = scrollTop;
-      this.uperAndLower();
+      this.upperAndLower();
       this.onScroll.emit({
         scrollLeft,
         scrollTop,
@@ -53,7 +45,7 @@ export class ScrollView {
         scrollWidth
       });
     };
-    this.uperAndLower = debounce(() => {
+    this.upperAndLower = debounce(() => {
       const { offsetWidth, offsetHeight, scrollLeft, scrollTop, scrollHeight, scrollWidth } = this.el;
       const lowerThreshold = Number(this.lowerThreshold);
       const upperThreshold = Number(this.upperThreshold);
@@ -296,7 +288,7 @@ export class ScrollView {
   static get events() { return [{
       "method": "onScroll",
       "name": "scroll",
-      "bubbles": true,
+      "bubbles": false,
       "cancelable": true,
       "composed": true,
       "docs": {
@@ -311,7 +303,7 @@ export class ScrollView {
     }, {
       "method": "onScrollToUpper",
       "name": "scrolltoupper",
-      "bubbles": true,
+      "bubbles": false,
       "cancelable": true,
       "composed": true,
       "docs": {
@@ -326,7 +318,7 @@ export class ScrollView {
     }, {
       "method": "onScrollToLower",
       "name": "scrolltolower",
-      "bubbles": true,
+      "bubbles": false,
       "cancelable": true,
       "composed": true,
       "docs": {

package/dist/collection/components/share-element/share-element.js

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

package/dist/collection/components/slot/slot.js

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

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

@@ -1,7 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Component, h, Prop, Event, Watch, Host, Element, State } from '@stencil/core';
-import SwiperJS from 'swiper/swiper-bundle.esm.js';
 import classNames from 'classnames';
+import SwiperJS from 'swiper/swiper-bundle.esm.js';
+import { debounce } from '../../utils';
 let INSTANCE_ID = 0;
 export class Swiper {
   constructor() {
@@ -86,6 +87,11 @@ export class Swiper {
         this.swiper.loopCreate();
       }
     }, 500);
+    this.handleSwiperSize = debounce(() => {
+      if (this.swiper && !this.circular) {
+        this.swiper.updateSlides();
+      }
+    }, 50);
   }
   watchCurrent(newVal) {
     if (!this.isWillLoadCalled)
@@ -149,6 +155,8 @@ export class Swiper {
     this.el.removeChild = (oldChild) => {
       return newVal.removeChild(oldChild);
     };
+    this.el.addEventListener('DOMNodeInserted', this.handleSwiperSize);
+    this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSize);
   }
   watchCircular() {
     if (this.swiper) {
@@ -182,12 +190,14 @@ export class Swiper {
   }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e, _f;
+    this.el.removeEventListener('DOMNodeInserted', this.handleSwiperSize);
+    this.el.removeEventListener('DOMNodeRemoved', 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);
   }
   handleInit() {
-    const { autoplay, current, interval, duration, circular, vertical, displayMultipleItems } = this;
+    const { autoplay, circular, current, displayMultipleItems, duration, interval, vertical } = this;
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
     const options = {
@@ -205,7 +215,7 @@ export class Swiper {
         },
         // slideChange 事件在 swiper.slideTo 改写 current 时不触发，因此用 slideChangeTransitionEnd 事件代替
         slideChangeTransitionEnd(_swiper) {
-          if (circular) {
+          if (that.circular) {
             if (_swiper.isBeginning || _swiper.isEnd) {
               _swiper.slideToLoop(this.realIndex, 0); // 更新下标
               return;
@@ -225,9 +235,14 @@ export class Swiper {
         observerUpdate(_swiper, e) {
           const target = e.target;
           const className = target && typeof target.className === 'string' ? target.className : '';
-          if (className.includes('taro_page') && target.style.display === 'block') {
+          if (className.includes('taro_page') && target.style.display !== 'none') {
             if (that.autoplay && target.contains(_swiper.$el[0])) {
-              _swiper.slideTo(that.current);
+              if (that.circular) {
+                _swiper.slideToLoop(this.realIndex, 0); // 更新下标
+              }
+              else {
+                _swiper.slideTo(this.realIndex);
+              }
             }
           }
         }
@@ -579,12 +594,3 @@ export class Swiper {
       "methodName": "watchCircular"
     }]; }
 }
-function debounce(fn, delay) {
-  let timer;
-  return function (...arrs) {
-    clearTimeout(timer);
-    timer = setTimeout(function () {
-      fn(...arrs);
-    }, delay);
-  };
-}

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

@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -11,20 +12,20 @@ html, body {
 }
 .taro-tabbar__container {
   display: flex;
-  height: 100%;
-  flex-direction: column;
   overflow: hidden;
+  flex-direction: column;
+  height: 100%;
 }
 .taro-tabbar__panel {
-  flex: 1;
-  position: relative;
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  position: relative;
+  flex: 1;
+  -webkit-overflow-scrolling: auto;
 }
 .taro-tabbar__tabbar {
   position: relative;
-  height: 50px;
   width: 100%;
+  height: 50px;
   transition: bottom 0.2s, top 0.2s;
 }
 .taro-tabbar__tabbar-top {
@@ -32,6 +33,8 @@ html, body {
 }
 .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;