@tarojs/components 3.4.6 → 3.4.9

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-to-refresh/pull-to-refresh.js

@@ -55,11 +55,11 @@ export class PullToRefresh {
     };
     this.init = () => {
       const ele = this.scrollContainer;
-      const child = this.el.childNodes[this.el.childNodes.length - 1].childNodes[0];
-      this.el.appendChild = child.appendChild.bind(child);
-      this.el.insertBefore = child.insertBefore.bind(child);
-      this.el.replaceChild = child.replaceChild.bind(child);
-      this.el.removeChild = child.removeChild.bind(child);
+      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),
@@ -177,7 +177,8 @@ export class PullToRefresh {
     };
   }
   get scrollContainer() {
-    return document.querySelector('.taro_page_stationed') ||
+    return this.el.parentElement ||
+      document.querySelector('.taro_page_stationed') ||
       document.querySelector('.taro_page') ||
       document.querySelector('.taro_router') ||
       document.querySelector('.taro-tabbar__panel') ||
@@ -246,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-to-refresh/style/index.css

@@ -1,50 +1,53 @@
-.rmc-pull-to-refresh-content {
-  transform-origin: left top 0px;
-}
-.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 {
-  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/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);

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() {
@@ -588,12 +589,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;
+  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 {

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

@@ -1,15 +1,9 @@
 taro-text-core {
   display: inline;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   white-space: pre-wrap;
 }
 
 .taro-text__selectable {
-  -moz-user-select: text;
-  -webkit-user-select: text;
-  -ms-user-select: text;
   user-select: text;
 }

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

@@ -8,13 +8,13 @@ taro-textarea-core .auto-height {
 }
 
 .taro-textarea {
-  -webkit-appearance: none;
-  cursor: auto;
-  width: 100%;
-  height: 150px;
-  border: 0;
   display: block;
   position: relative;
+  border: 0;
+  width: 100%;
+  height: 150px;
+  appearance: none;
+  cursor: auto;
   line-height: 1.5;
 }
 .taro-textarea:focus {