@tarojs/components 3.4.5 → 3.5.0-alpha.0

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

@@ -246,7 +246,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/tabbar/tabbar.js

@@ -6,9 +6,10 @@ import { splitUrl } from '../../utils';
 import { TabbarItem } from './tabbar-item';
 // const removeLeadingSlash = str => str.replace(/^\.?\//, '')
 // const removeTrailingSearch = str => str.replace(/\?[\s\S]*$/, '')
-const addLeadingSlash = str => str[0] === '/' ? str : `/${str}`;
-const hasBasename = (path, prefix) => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path);
-const stripBasename = (path, prefix) => hasBasename(path, prefix) ? path.substr(prefix.length) : path;
+const addLeadingSlash = (str = '') => str[0] === '/' ? str : `/${str}`;
+const hasBasename = (path = '', prefix = '') => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path);
+const stripBasename = (path = '', prefix = '') => hasBasename(path, prefix) ? path.substr(prefix.length) : path;
+const stripSuffix = (path = '', suffix = '') => path.includes(suffix) ? path.substring(0, path.length - suffix.length) : path;
 const STATUS_SHOW = 0;
 const STATUS_HIDE = 1;
 const STATUS_SLIDEOUT = 2;
@@ -28,7 +29,7 @@ export class Tabbar {
         const pathB = splitUrl(url).path;
         return pathA === pathB;
       });
-      return customRoute.length ? customRoute[0][0] : url;
+      return stripSuffix(customRoute.length ? customRoute[0][0] : url, '.html');
     };
     this.getSelectedIndex = (url) => {
       let foundIndex = -1;
@@ -64,14 +65,12 @@ export class Tabbar {
       }
     };
     this.routerChangeHandler = (options) => {
-      let toLocation;
+      var _a;
+      const to = (_a = options === null || options === void 0 ? void 0 : options.toLocation) === null || _a === void 0 ? void 0 : _a.path;
       let currentPage;
-      if (options) {
-        toLocation = options.toLocation;
-      }
-      if (toLocation && toLocation.path) {
-        const tmpPath = addLeadingSlash(toLocation.path);
-        currentPage = stripBasename(tmpPath === '/' ? this.homePage : tmpPath, this.conf.basename || '/');
+      if (typeof to === 'string') {
+        const routerBasename = this.conf.basename || '/';
+        currentPage = stripBasename(addLeadingSlash(to || this.homePage), routerBasename);
       }
       else {
         currentPage = this.getCurrentUrl();
@@ -230,7 +229,7 @@ export class Tabbar {
       url = location.pathname;
     }
     const processedUrl = addLeadingSlash(stripBasename(url, routerBasename));
-    return processedUrl === '/' ? this.homePage : processedUrl;
+    return decodeURI(processedUrl === '/' ? this.homePage : processedUrl);
   }
   bindEvent() {
     Taro.eventCenter.on('__taroRouterChange', this.routerChangeHandler);

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 {