@tarojs/components 3.5.0-canary.1 → 3.5.0

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

@@ -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,14 +177,23 @@ export class PullToRefresh {
     };
   }
   get scrollContainer() {
-    return document.querySelector('.taro-tabbar__panel') || document.body;
+    return this.el.parentElement ||
+      this.el.closest('.taro_page_stationed') ||
+      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') {
-      const pageEl = this.el.closest('.taro_page');
-      if (pageEl && pageEl.__page) {
-        pageEl.__page.onPullDownRefresh();
-      }
+    var _a, _b, _c, _d;
+    const pageEl = this.scrollContainer;
+    switch (this.currSt) {
+      case 'release':
+        (_b = (_a = pageEl === null || pageEl === void 0 ? void 0 : pageEl.__page) === null || _a === void 0 ? void 0 : _a.onPullDownRefresh) === null || _b === void 0 ? void 0 : _b.call(_a);
+        break;
+      case 'deactivate':
+        (_d = (_c = pageEl === null || pageEl === void 0 ? void 0 : pageEl.__page) === null || _c === void 0 ? void 0 : _c.onPullIntercept) === null || _d === void 0 ? void 0 : _d.call(_c);
     }
   }
   disconnectedCallback() {
@@ -237,7 +251,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,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;
       }