@tarojs/components 3.3.14 → 3.5.0-canary.0

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

@@ -1,11 +1,173 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, Host } from '@stencil/core';
+import { Component, Prop, h, Host, Listen, State, Event } from '@stencil/core';
+import classNames from 'classnames';
 export class CoverView {
-  componentDidLoad() {
-    console.error('H5 暂不支持 CoverView 组件！');
+  constructor() {
+    this.hoverStartTime = 50;
+    this.hoverStayTime = 400;
+    this.hover = false;
+    this.touch = false;
+    this.startTime = 0;
+  }
+  onTouchStart() {
+    if (this.hoverClass) {
+      this.touch = true;
+      setTimeout(() => {
+        if (this.touch) {
+          this.hover = true;
+        }
+      }, this.hoverStartTime);
+    }
+    this.timeoutEvent = setTimeout(() => {
+      this.onLongPress.emit();
+    }, 350);
+    this.startTime = Date.now();
+  }
+  onTouchMove() {
+    clearTimeout(this.timeoutEvent);
+  }
+  onTouchEnd() {
+    const spanTime = Date.now() - this.startTime;
+    if (spanTime < 350) {
+      clearTimeout(this.timeoutEvent);
+    }
+    if (this.hoverClass) {
+      this.touch = false;
+      setTimeout(() => {
+        if (!this.touch) {
+          this.hover = false;
+        }
+      }, this.hoverStayTime);
+    }
   }
   render() {
-    return (h(Host, null));
+    const cls = classNames({
+      [`${this.hoverClass}`]: this.hover
+    });
+    let attr = {};
+    if (!!this.animation) {
+      attr['animation'] = this.animation;
+      attr['data-animation'] = this.animation;
+    }
+    return (h(Host, Object.assign({ class: cls }, attr),
+      h("slot", null)));
   }
   static get is() { return "taro-cover-view-core"; }
+  static get originalStyleUrls() { return {
+    "$": ["./style/cover-view.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["./style/cover-view.css"]
+  }; }
+  static get properties() { return {
+    "animation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "animation",
+      "reflect": false
+    },
+    "hoverClass": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hover-class",
+      "reflect": false
+    },
+    "hoverStartTime": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hover-start-time",
+      "reflect": false,
+      "defaultValue": "50"
+    },
+    "hoverStayTime": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hover-stay-time",
+      "reflect": false,
+      "defaultValue": "400"
+    }
+  }; }
+  static get states() { return {
+    "hover": {},
+    "touch": {}
+  }; }
+  static get events() { return [{
+      "method": "onLongPress",
+      "name": "longpress",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get listeners() { return [{
+      "name": "touchstart",
+      "method": "onTouchStart",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "touchmove",
+      "method": "onTouchMove",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "touchend",
+      "method": "onTouchEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }]; }
 }

package/dist/collection/components/cover-view/style/cover-view.css

@@ -0,0 +1,3 @@
+taro-cover-view-core {
+  display: block;
+}

package/dist/collection/components/input/input.js

@@ -112,7 +112,7 @@ export class Input {
     this._value = this.value;
   }
   componentDidLoad() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (this.type === 'file') {
       this.fileListener = () => {
         this.onInput.emit();
@@ -130,6 +130,7 @@ export class Input {
       },
       configurable: true
     });
+    this.autoFocus && ((_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.focus());
   }
   disconnectedCallback() {
     var _a;
@@ -138,11 +139,10 @@ export class Input {
     }
   }
   render() {
-    const { _value, type, password, placeholder, disabled, maxlength, autoFocus, confirmType, name, nativeProps } = this;
+    const { _value, type, password, placeholder, disabled, maxlength, confirmType, name, nativeProps } = this;
     return (h("input", Object.assign({ ref: input => {
         this.inputRef = input;
-        autoFocus && (input === null || input === void 0 ? void 0 : input.focus());
-      }, class: 'weui-input', value: fixControlledValue(_value), type: getTrueType(type, confirmType, password), placeholder: placeholder, disabled: disabled, maxlength: maxlength, autofocus: autoFocus, name: name, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onKeyDown: this.handleKeyDown }, nativeProps)));
+      }, class: 'weui-input', value: fixControlledValue(_value), type: getTrueType(type, confirmType, password), placeholder: placeholder, disabled: disabled, maxlength: maxlength, name: name, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onKeyDown: this.handleKeyDown }, nativeProps)));
   }
   static get is() { return "taro-input-core"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/tabbar/tabbar.js

@@ -25,18 +25,18 @@ export class Tabbar {
     this.status = STATUS_SHOW;
     this.getOriginUrl = (url) => {
       const customRoute = this.customRoutes.filter(([, customUrl]) => {
-        const patha = splitUrl(customUrl).path;
-        const pathb = splitUrl(url).path;
-        return patha === pathb;
+        const pathA = splitUrl(customUrl).path;
+        const pathB = splitUrl(url).path;
+        return pathA === pathB;
       });
       return customRoute.length ? customRoute[0][0] : url;
     };
     this.getSelectedIndex = (url) => {
       let foundIndex = -1;
       this.list.forEach(({ pagePath }, idx) => {
-        const patha = splitUrl(url).path;
-        const pathb = splitUrl(pagePath).path;
-        if (patha === pathb) {
+        const pathA = splitUrl(url).path;
+        const pathB = splitUrl(pagePath).path;
+        if (pathA === pathB) {
           foundIndex = idx;
         }
       });
@@ -79,23 +79,27 @@ export class Tabbar {
       }
       this.selectedIndex = this.getSelectedIndex(this.getOriginUrl(currentPage));
     };
-    this.setTabBarBadgeHandler = ({ index, text, errorHandler }) => {
-      const list = this.list;
+    this.setTabBarBadgeHandler = ({ index, text, successHandler, errorHandler }) => {
+      const list = [...this.list];
       if (index in list) {
-        this.list[index].showRedDot = false;
-        this.list[index].badgeText = text;
+        list[index].showRedDot = false;
+        list[index].badgeText = text;
+        successHandler({
+          errMsg: 'setTabBarBadge:ok'
+        });
       }
       else {
         errorHandler({
           errMsg: 'setTabBarBadge:fail tabbar item not found'
         });
       }
+      this.list = list;
     };
     this.removeTabBarBadgeHandler = ({ index, successHandler, errorHandler }) => {
-      const list = this.list;
+      const list = [...this.list];
       if (index in list) {
-        this.list[index].badgeText = null;
-        this.list[index].badgeText = null;
+        list[index].badgeText = null;
+        list[index].badgeText = null;
         successHandler({
           errMsg: 'removeTabBarBadge:ok'
         });
@@ -105,9 +109,10 @@ export class Tabbar {
           errMsg: 'removeTabBarBadge:fail tabbar item not found'
         });
       }
+      this.list = list;
     };
     this.showTabBarRedDotHandler = ({ index, successHandler, errorHandler }) => {
-      const list = this.list;
+      const list = [...this.list];
       if (index in list) {
         list[index].badgeText = null;
         list[index].showRedDot = true;
@@ -120,9 +125,10 @@ export class Tabbar {
           errMsg: 'showTabBarRedDot:fail tabbar item not found'
         });
       }
+      this.list = list;
     };
     this.hideTabBarRedDotHandler = ({ index, successHandler, errorHandler }) => {
-      const list = this.list;
+      const list = [...this.list];
       if (index in list) {
         list[index].showRedDot = false;
         successHandler({
@@ -134,6 +140,7 @@ export class Tabbar {
           errMsg: 'hideTabBarRedDot:fail tabbar item not found'
         });
       }
+      this.list = list;
     };
     this.showTabBarHandler = ({ successHandler }) => {
       this.status = STATUS_SHOW;
@@ -147,6 +154,39 @@ export class Tabbar {
         errMsg: 'hideTabBar:ok'
       });
     };
+    this.setTabBarStyleHandler = ({ color, selectedColor, backgroundColor, borderStyle, successHandler }) => {
+      if (backgroundColor)
+        this.backgroundColor = backgroundColor;
+      if (borderStyle)
+        this.borderStyle = borderStyle;
+      if (color)
+        this.color = color;
+      if (selectedColor)
+        this.selectedColor = selectedColor;
+      successHandler({
+        errMsg: 'setTabBarStyle:ok'
+      });
+    };
+    this.setTabBarItemHandler = ({ index, iconPath, selectedIconPath, text, successHandler, errorHandler }) => {
+      const list = [...this.list];
+      if (index in list) {
+        if (iconPath)
+          list[index].iconPath = iconPath;
+        if (selectedIconPath)
+          list[index].selectedIconPath = selectedIconPath;
+        if (text)
+          list[index].text = text;
+        successHandler({
+          errMsg: 'setTabBarItem:ok'
+        });
+      }
+      else {
+        errorHandler({
+          errMsg: 'setTabBarItem:fail tabbar item not found'
+        });
+      }
+      this.list = list;
+    };
     const list = this.conf.list;
     const customRoutes = this.conf.customRoutes;
     if (Object.prototype.toString.call(list) !== '[object Array]' ||
@@ -164,6 +204,10 @@ export class Tabbar {
       }
     });
     this.list = list;
+    this.borderStyle = this.conf.borderStyle;
+    this.backgroundColor = this.conf.backgroundColor;
+    this.color = this.conf.color;
+    this.selectedColor = this.conf.selectedColor;
   }
   getCurrentUrl() {
     const routerMode = this.conf.mode;
@@ -191,6 +235,8 @@ export class Tabbar {
     Taro.eventCenter.on('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler);
     Taro.eventCenter.on('__taroShowTabBar', this.showTabBarHandler);
     Taro.eventCenter.on('__taroHideTabBar', this.hideTabBarHandler);
+    Taro.eventCenter.on('__taroSetTabBarStyle', this.setTabBarStyleHandler);
+    Taro.eventCenter.on('__taroSetTabBarItem', this.setTabBarItemHandler);
   }
   removeEvent() {
     Taro.eventCenter.off('__taroRouterChange', this.routerChangeHandler);
@@ -201,6 +247,8 @@ export class Tabbar {
     Taro.eventCenter.off('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler);
     Taro.eventCenter.off('__taroShowTabBar', this.showTabBarHandler);
     Taro.eventCenter.off('__taroHideTabBar', this.hideTabBarHandler);
+    Taro.eventCenter.off('__taroSetTabBarStyle', this.setTabBarStyleHandler);
+    Taro.eventCenter.off('__taroSetTabBarItem', this.setTabBarItemHandler);
   }
   componentDidLoad() {
     this.tabbarPos = this.tabbar.nextElementSibling ? 'top' : 'bottom';
@@ -211,10 +259,10 @@ export class Tabbar {
     this.removeEvent();
   }
   render() {
-    const { conf, tabbarPos = 'bottom' } = this;
+    const { tabbarPos = 'bottom' } = this;
     const status = this.status;
     const containerCls = classNames('weui-tabbar', {
-      [`taro-tabbar__border-${conf.borderStyle || 'black'}`]: true
+      [`taro-tabbar__border-${this.borderStyle || 'black'}`]: true
     });
     const shouldHideTabBar = this.selectedIndex === -1 || status === STATUS_HIDE;
     const shouldSlideout = status === STATUS_SLIDEOUT;
@@ -223,17 +271,17 @@ export class Tabbar {
         [hideTabBarWithAnimationClassName]: shouldSlideout
       }) },
       h("div", { class: containerCls, style: {
-          backgroundColor: conf.backgroundColor || ''
+          backgroundColor: this.backgroundColor || ''
         } }, this.list.map((item, index) => {
         const isSelected = this.selectedIndex === index;
         let textColor;
         let iconPath;
         if (isSelected) {
-          textColor = conf.selectedColor;
+          textColor = this.selectedColor || '';
           iconPath = item.selectedIconPath;
         }
         else {
-          textColor = conf.color || '';
+          textColor = this.color || '';
           iconPath = item.iconPath;
         }
         return (h(TabbarItem, { index: index, onSelect: this.switchTab.bind(this), isSelected: isSelected, textColor: textColor, iconPath: iconPath, text: item.text, badgeText: item.badgeText, showRedDot: item.showRedDot }));
@@ -269,6 +317,10 @@ export class Tabbar {
   }; }
   static get states() { return {
     "list": {},
+    "borderStyle": {},
+    "backgroundColor": {},
+    "color": {},
+    "selectedColor": {},
     "selectedIndex": {},
     "status": {}
   }; }

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

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

package/dist/collection/components/textarea/textarea.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, Prop, Event, Element } from '@stencil/core';
+import { Component, h, Prop, State, Event, Element } from '@stencil/core';
 function fixControlledValue(value) {
   return value !== null && value !== void 0 ? value : '';
 }
@@ -8,9 +8,12 @@ export class Textarea {
     this.disabled = false;
     this.maxlength = 140;
     this.autoFocus = false;
+    this.autoHeight = false;
     this.nativeProps = {};
+    this.line = 1;
     this.hanldeInput = (e) => {
       e.stopPropagation();
+      this.handleLineChange();
       this.onInput.emit({
         value: e.target.value,
         cursor: e.target.value.length
@@ -32,6 +35,58 @@ export class Textarea {
         value: e.target.value
       });
     };
+    this.handleLineChange = () => {
+      const line = this.getNumberOfLines();
+      if (line !== this.line) {
+        this.line = line;
+        this.onLineChange.emit({
+          height: this.textareaRef.clientHeight,
+          lineCount: this.line
+        });
+      }
+    };
+    this.calculateContentHeight = (ta, scanAmount) => {
+      let origHeight = ta.style.height, height = ta.offsetHeight, scrollHeight = ta.scrollHeight, overflow = ta.style.overflow;
+      /// only bother if the ta is bigger than content
+      if (height >= scrollHeight) {
+        /// check that our browser supports changing dimension
+        /// calculations mid-way through a function call...
+        ta.style.height = height + scanAmount + 'px';
+        /// because the scrollbar can cause calculation problems
+        ta.style.overflow = 'hidden';
+        /// by checking that scrollHeight has updated
+        if (scrollHeight < ta.scrollHeight) {
+          /// now try and scan the ta's height downwards
+          /// until scrollHeight becomes larger than height
+          while (ta.offsetHeight >= ta.scrollHeight) {
+            ta.style.height = (height -= scanAmount) + 'px';
+          }
+          /// be more specific to get the exact height
+          while (ta.offsetHeight < ta.scrollHeight) {
+            ta.style.height = height++ + 'px';
+          }
+          /// reset the ta back to it's original height
+          ta.style.height = origHeight;
+          /// put the overflow back
+          ta.style.overflow = overflow;
+          return height;
+        }
+      }
+      else {
+        return scrollHeight;
+      }
+    };
+    this.getNumberOfLines = () => {
+      const ta = this.textareaRef, style = window.getComputedStyle ? window.getComputedStyle(ta) : ta.style, 
+      // This will get the line-height only if it is set in the css,
+      // otherwise it's "normal"
+      taLineHeight = parseInt(style.lineHeight, 10), 
+      // Get the scroll height of the textarea
+      taHeight = this.calculateContentHeight(ta, taLineHeight), 
+      // calculate the number of lines
+      numberOfLines = Math.floor(taHeight / taLineHeight);
+      return numberOfLines;
+    };
   }
   componentDidLoad() {
     Object.defineProperty(this.el, 'value', {
@@ -42,12 +97,16 @@ export class Textarea {
     this.autoFocus && this.textareaRef.focus();
   }
   render() {
-    const { value, placeholder, disabled, maxlength, autoFocus, name, nativeProps, hanldeInput, handleFocus, handleBlur, handleChange } = this;
+    const { value, placeholder, disabled, maxlength, autoFocus, autoHeight, name, nativeProps, hanldeInput, handleFocus, handleBlur, handleChange } = this;
+    const otherProps = {};
+    if (autoHeight) {
+      otherProps.rows = this.line;
+    }
     return (h("textarea", Object.assign({ ref: input => {
         if (input) {
           this.textareaRef = input;
         }
-      }, class: 'taro-textarea', value: fixControlledValue(value), placeholder: placeholder, name: name, disabled: disabled, maxlength: maxlength, autofocus: autoFocus, onInput: hanldeInput, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange }, nativeProps)));
+      }, class: `taro-textarea ${autoHeight ? 'auto-height' : ''}`, value: fixControlledValue(value), placeholder: placeholder, name: name, disabled: disabled, maxlength: maxlength, autofocus: autoFocus, onInput: hanldeInput, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange }, nativeProps, otherProps)));
   }
   static get is() { return "taro-textarea-core"; }
   static get originalStyleUrls() { return {
@@ -145,6 +204,24 @@ export class Textarea {
       "reflect": false,
       "defaultValue": "false"
     },
+    "autoHeight": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "auto-height",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "name": {
       "type": "string",
       "mutable": false,
@@ -179,6 +256,9 @@ export class Textarea {
       "defaultValue": "{}"
     }
   }; }
+  static get states() { return {
+    "line": {}
+  }; }
   static get events() { return [{
       "method": "onInput",
       "name": "input",
@@ -239,6 +319,21 @@ export class Textarea {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "onLineChange",
+      "name": "linechange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/video/video-control.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+    function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+    function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Component, h, Prop, Host, Element, Listen, Method } from '@stencil/core';
 import { formatTime } from './utils';
@@ -42,32 +51,40 @@ export class VideoControl {
     this.seekFunc(this.percentage * this.duration);
     this.toggleVisibility(true);
   }
-  async setProgressBall(percentage) {
-    if (this.progressBallRef) {
-      this.progressBallRef.style.left = `${percentage * 100}%`;
-    }
+  setProgressBall(percentage) {
+    return __awaiter(this, void 0, void 0, function* () {
+      if (this.progressBallRef) {
+        this.progressBallRef.style.left = `${percentage * 100}%`;
+      }
+    });
   }
-  async toggleVisibility(nextVisible) {
-    const visible = nextVisible === undefined ? !this.visible : nextVisible;
-    if (visible) {
-      this.hideControlsTimer && clearTimeout(this.hideControlsTimer);
-      if (this.isPlaying) {
-        this.hideControlsTimer = setTimeout(() => {
-          this.toggleVisibility(false);
-        }, 2000);
+  toggleVisibility(nextVisible) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const visible = nextVisible === undefined ? !this.visible : nextVisible;
+      if (visible) {
+        this.hideControlsTimer && clearTimeout(this.hideControlsTimer);
+        if (this.isPlaying) {
+          this.hideControlsTimer = setTimeout(() => {
+            this.toggleVisibility(false);
+          }, 2000);
+        }
+        this.controlsRef.style.visibility = 'visible';
       }
-      this.controlsRef.style.visibility = 'visible';
-    }
-    else {
-      this.controlsRef.style.visibility = 'hidden';
-    }
-    this.visible = !!visible;
+      else {
+        this.controlsRef.style.visibility = 'hidden';
+      }
+      this.visible = !!visible;
+    });
   }
-  async getIsDraggingProgressBall() {
-    return this.isDraggingProgressBall;
+  getIsDraggingProgressBall() {
+    return __awaiter(this, void 0, void 0, function* () {
+      return this.isDraggingProgressBall;
+    });
   }
-  async setCurrentTime(time) {
-    this.currentTimeRef.innerHTML = formatTime(time);
+  setCurrentTime(time) {
+    return __awaiter(this, void 0, void 0, function* () {
+      this.currentTimeRef.innerHTML = formatTime(time);
+    });
   }
   render() {
     const { controls, currentTime, duration, isPlaying, pauseFunc, playFunc, showPlayBtn, showProgress } = this;