@tarojs/components 3.4.4 → 3.4.7

package/dist/collection/components/picker-view/picker-view-column.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, Listen, Element, Event, Prop, State } from '@stencil/core';
+import { debounce } from '../../utils';
 export class PickerViewColumn {
-  componentDidLoad() {
-    console.error('H5 暂不支持 PickerViewColumn 组件！');
+  constructor() {
+    // 初始化的选中位置
+    this.initialPosition = '0';
+    // 滑动距离上下留白区域-通过父视图和 indicator 计算而来
+    this.paddingVertical = 0;
+    this.isInit = false;
+    this.isMove = false;
+    // 滚动结束自动回到合适的位置
+    this.handleSelected = debounce(() => {
+      const childList = this.el.childNodes;
+      let sum = 0;
+      let selectedIndex = '0';
+      for (const index in childList) {
+        const item = childList[index];
+        const itemHeight = item.offsetHeight;
+        if (sum + itemHeight / 2.0 > this.el.scrollTop) {
+          selectedIndex = index;
+          break;
+        }
+        sum += itemHeight;
+      }
+      this.el.scrollTo({
+        top: sum,
+        behavior: 'smooth'
+      });
+      this.onChange.emit({
+        curIndex: this.col,
+        selectedIndex: selectedIndex
+      });
+      this.onSelectEnd.emit();
+    }, 500);
+  }
+  onScroll(_event) {
+    if (!this.isMove) {
+      this.isMove = true;
+      this.onSelectStart.emit();
+    }
+    this.handleSelected();
+  }
+  onMouseEnd() {
+    if (!this.isMove)
+      return;
+    this.isMove = false;
+    this.handleSelected();
+  }
+  onTouchEnd() {
+    this.isMove = false;
+    this.handleSelected();
+  }
+  componentDidUpdate() {
+    if (!this.isInit) {
+      this.isInit = true;
+      const childList = this.el.childNodes;
+      let idx = 0;
+      let sum = 0;
+      for (const index in childList) {
+        const item = childList[index];
+        if (this.initialPosition === index || !item || typeof item.offsetHeight !== 'number') {
+          break;
+        }
+        sum += item.offsetHeight;
+        idx++;
+      }
+      this.el.scrollTo({ top: sum });
+      if (idx >= childList.length) {
+        this.onChange.emit({
+          curIndex: this.col,
+          selectedIndex: idx - 1
+        });
+      }
+    }
   }
   render() {
-    return (h(Host, null));
+    const { paddingVertical = 0 } = this;
+    return (h(Host, { class: "taro-picker-view-column-container", style: { 'padding-top': `${paddingVertical}px`, 'padding-bottom': `${paddingVertical}px` } }));
   }
   static get is() { return "taro-picker-view-column-core"; }
+  static get originalStyleUrls() { return {
+    "$": ["./style/column.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["./style/column.css"]
+  }; }
+  static get properties() { return {
+    "col": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "col",
+      "reflect": false
+    },
+    "initialPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "initial-position",
+      "reflect": false,
+      "defaultValue": "'0'"
+    },
+    "paddingVertical": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "padding-vertical",
+      "reflect": false,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "isInit": {},
+    "isMove": {}
+  }; }
+  static get events() { return [{
+      "method": "onChange",
+      "name": "onselect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "onSelectStart",
+      "name": "onselectstart",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "onSelectEnd",
+      "name": "onselectend",
+      "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": "scroll",
+      "method": "onScroll",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseup",
+      "method": "onMouseEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseout",
+      "method": "onMouseEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseleave",
+      "method": "onMouseEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "touchend",
+      "method": "onTouchEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }]; }
 }

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);
-  };
-}