@tarojs/components 3.7.0-alpha.0 → 3.7.0-alpha.10

package/dist/cjs/taro-swiper-core_2.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-e1b469cd.js');
-const index$3 = require('./index-f9d21cc5.js');
+const index$1 = require('./index-e751dfe3.js');
+const index$3 = require('./index-f6805218.js');
 const index$2 = require('./index-dfd8638f.js');
 
 /**
@@ -9991,6 +9991,7 @@ const Swiper = class {
     };
     this.el.addEventListener('DOMNodeInserted', this.handleSwiperSize);
     this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSize);
+    this.el.addEventListener('MutationObserver', this.handleSwiperSize);
   }
   watchCircular() {
     if (this.swiper) {
@@ -10034,6 +10035,7 @@ const Swiper = class {
     var _a, _b, _c, _d, _e, _f;
     this.el.removeEventListener('DOMNodeInserted', this.handleSwiperSize);
     this.el.removeEventListener('DOMNodeRemoved', this.handleSwiperSize);
+    this.el.removeEventListener('MutationObserver', this.handleSwiperSize);
     (_b = (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
     (_d = (_c = this.observerFirst) === null || _c === void 0 ? void 0 : _c.disconnect) === null || _d === void 0 ? void 0 : _d.call(_c);
     (_f = (_e = this.observerLast) === null || _e === void 0 ? void 0 : _e.disconnect) === null || _f === void 0 ? void 0 : _f.call(_e);
@@ -10147,35 +10149,41 @@ const Swiper = class {
 };
 Swiper.style = indexCss;
 
-function isEqualTag(a, b) {
-  return typeof a.tagName === 'undefined' ? a.nodeType === b.nodeType : a.tagName === b.tagName;
-}
-function parseChildNodes(items, targets, needClean = false) {
-  const list = Array.from(targets.values());
-  for (let i = 0, j = 0; i < list.length; i++) {
-    const target = list[i];
-    if (!target)
-      return;
-    let item = items.item(j);
-    while (item) {
-      if (!isEqualTag(item, target) || needClean) {
-        item.remove();
-        j++;
-        item = items.item(j);
-        continue;
-      }
-      if (target.childNodes.length > 0) {
-        const cleanAll = ['taro-image-core'].includes(target.tagName.toLocaleLowerCase());
-        parseChildNodes(item.childNodes, target.childNodes, cleanAll);
+const nativeCloneNode = Node.prototype.cloneNode;
+function cloneNode(node, deep) {
+  const clonedNode = nativeCloneNode.call(node, false);
+  const srcChildNodes = childNodes(node);
+  if (deep) {
+    for (let i = 0; i < srcChildNodes.length; i++) {
+      const srcNode = srcChildNodes[i];
+      let srcDeep = deep;
+      if (srcNode.nodeType !== 2 && srcNode.nodeType !== 8) {
+        // Note: 没有引用节点（s-cr[reference comment]）的情况下，不复制子节点避免冗余（例如：Image 组件）
+        if (!srcNode['s-cr']) {
+          srcDeep = false;
+        }
+        const childClone = cloneNode(srcNode, srcDeep);
+        clonedNode.appendChild(childClone);
       }
-      break;
     }
-    while (i === list.length - 1 && j < items.length) {
-      j++;
-      item = items.item(j);
-      item === null || item === void 0 ? void 0 : item.remove();
+  }
+  return clonedNode;
+}
+function childNodes(node) {
+  const childNodes = node.childNodes;
+  // check if element is stencil element without shadow dom
+  // and then detect elements that were slotted into the element
+  if (node['s-sc']) {
+    const result = [];
+    for (let i = 0; i < childNodes.length; i++) {
+      const slot = childNodes[i]['s-nr'];
+      if (slot) {
+        result.push(slot);
+      }
     }
+    return result;
   }
+  return Array.from(childNodes);
 }
 const SwiperItem = class {
   constructor(hostRef) {
@@ -10183,16 +10191,9 @@ const SwiperItem = class {
     this.itemId = undefined;
   }
   componentDidRender() {
-    var _a, _b, _c;
-    const el = this.el;
-    if (el.classList.contains('swiper-slide-duplicate')) {
-      const list = Array
-        .from(((_b = (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.childNodes) === null || _b === void 0 ? void 0 : _b.values()) || [])
-        .filter((e) => e.tagName === 'TARO-SWIPER-ITEM-CORE');
-      if (list.length > 0) {
-        parseChildNodes(el.childNodes, (_c = list[list.indexOf(el) === 0 ? list.length - 2 : 1]) === null || _c === void 0 ? void 0 : _c.childNodes);
-      }
-    }
+    this.el.cloneNode = (deep = false) => {
+      return cloneNode.call(null, this.el, deep);
+    };
   }
   render() {
     return (index$1.h(index$1.Host, { class: 'swiper-slide', "item-id": this.itemId }));

package/dist/cjs/taro-switch-core.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b469cd.js');
+const index = require('./index-e751dfe3.js');
 
 const indexCss = "taro-switch-core{display:inline-block;width:52px;height:32px}taro-switch-core .weui-switch{display:block;width:100%;height:100%}";
 

package/dist/cjs/taro-tab-item-core.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b469cd.js');
+const index = require('./index-e751dfe3.js');
 const helper = require('./helper-db78e01a.js');
 require('@tarojs/taro');
 

package/dist/cjs/taro-tabbar.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-e1b469cd.js');
+const index$1 = require('./index-e751dfe3.js');
 const Taro = require('@tarojs/taro');
-const index = require('./index-f9d21cc5.js');
+const index = require('./index-f6805218.js');
 const index$2 = require('./index-dfd8638f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/cjs/taro-tabs-core.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b469cd.js');
+const index = require('./index-e751dfe3.js');
 const helper = require('./helper-db78e01a.js');
 require('@tarojs/taro');
 

package/dist/cjs/taro-text-core.cjs.entry.js

@@ -2,21 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b469cd.js');
-const index$1 = require('./index-f9d21cc5.js');
+const index = require('./index-e751dfe3.js');
 
-const indexCss = "taro-text-core{display:inline;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:pre-wrap}.taro-text__selectable{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}";
+const indexCss = "taro-text-core{display:inline;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}taro-text-core[selectable=true],taro-text-core[user-select=true]{display:inline-block;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}taro-text-core[space]{white-space:pre-wrap}taro-text-core[space=ensp]{word-spacing:0.5em}taro-text-core[space=nbsp]{word-spacing:1em}taro-text-core[number-of-lines]{--line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:var(--line-clamp)}";
 
 const Text = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.selectable = false;
+    this.userSelect = false;
+    this.space = undefined;
+    this.numberOfLines = undefined;
   }
   render() {
-    const cls = index$1.classnames({
-      'taro-text__selectable': this.selectable
-    });
-    return (index.h(index.Host, { class: cls }, index.h("slot", null)));
+    const style = {};
+    if (typeof this.numberOfLines === 'number') {
+      style['--line-clamp'] = this.numberOfLines;
+    }
+    return (index.h(index.Host, { style: style }, index.h("slot", null)));
   }
 };
 Text.style = indexCss;

package/dist/cjs/taro-textarea-core.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b469cd.js');
+const index = require('./index-e751dfe3.js');
 
 const indexCss = "taro-textarea-core{display:block;width:300px}taro-textarea-core .auto-height{height:auto}.taro-textarea{display:block;position:relative;border:0;width:100%;height:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:auto;line-height:1.5}.taro-textarea:focus{outline:none}";
 
@@ -111,7 +111,7 @@ const Textarea = class {
       numberOfLines = Math.floor(taHeight / taLineHeight);
       return numberOfLines;
     };
-    this.value = undefined;
+    this.value = '';
     this.placeholder = undefined;
     this.disabled = false;
     this.maxlength = 140;
@@ -130,13 +130,6 @@ const Textarea = class {
   async focus() {
     this.textareaRef.focus();
   }
-  componentDidLoad() {
-    Object.defineProperty(this.el, 'value', {
-      get: () => this.textareaRef.value,
-      set: value => this.value !== value && (this.value = value),
-      configurable: true
-    });
-  }
   render() {
     const { value, placeholder, disabled, maxlength, autoFocus, autoHeight, name, nativeProps, handleInput, handleFocus, handleBlur, handleChange } = this;
     const otherProps = {};

package/dist/cjs/taro-video-control_3.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b469cd.js');
-const index$2 = require('./index-f9d21cc5.js');
+const index = require('./index-e751dfe3.js');
+const index$2 = require('./index-f6805218.js');
 const index$1 = require('./index-dfd8638f.js');
 
 const formatTime = (time) => {
@@ -275,8 +275,8 @@ const Video = class {
       const { src, videoRef } = this;
       if (isHls(src)) {
         Promise.resolve().then(function () { return require(
-        /* webpackMode: "weak" */
-        './hls-67cbc62d.js'); }).then(function (n) { return n.hls; }).then(e => {
+        /* webpackExports: ["default"] */
+        './hls-00fec546.js'); }).then(e => {
           const Hls = e.default;
           this.HLS = Hls;
           if (Hls.isSupported()) {

package/dist/cjs/taro-view-core.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b469cd.js');
-const index$1 = require('./index-f9d21cc5.js');
+const index = require('./index-e751dfe3.js');
+const index$1 = require('./index-f6805218.js');
 
 const indexCss = "body,html{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}taro-view-core{display:block}";
 

package/dist/cjs/taro-voip-room-core.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b469cd.js');
+const index = require('./index-e751dfe3.js');
 const helper = require('./helper-db78e01a.js');
 require('@tarojs/taro');
 

package/dist/cjs/taro-web-view-core.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b469cd.js');
+const index = require('./index-e751dfe3.js');
 
 const indexCss = "iframe{border:none}.taro-webview{position:fixed;top:0;bottom:0;z-index:999;width:100%;height:100%}";
 

package/dist/collection/collection-manifest.json

@@ -85,7 +85,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.2",
+    "version": "2.22.3",
     "typescriptVersion": "4.9.4"
   },
   "collections": [],

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

@@ -102,6 +102,18 @@ taro-button-core[plain][type=primary]:not([disabled]):active {
 taro-button-core[plain][type=primary]::after {
   border-width: 0;
 }
+taro-button-core[plain][type=warn] {
+  border: 1px solid #e64340;
+  color: #e64340;
+}
+taro-button-core[plain][type=warn]:not([disabled]):active {
+  border-color: rgba(230, 67, 64, 0.6);
+  background-color: transparent;
+  color: rgba(230, 67, 64, 0.6);
+}
+taro-button-core[plain][type=warn]::after {
+  border-width: 0;
+}
 taro-button-core[plain], taro-button-core[plain][type=default] {
   border: 1px solid #353535;
   color: #353535;

package/dist/collection/components/checkbox/checkbox.js

@@ -69,11 +69,11 @@ export class Checkbox {
         "reflect": false
       },
       "value": {
-        "type": "string",
-        "mutable": false,
+        "type": "any",
+        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | number",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,

package/dist/collection/components/image/image.js

@@ -8,6 +8,7 @@ export class Image {
     this.lazyLoad = false;
     this.nativeProps = {};
     this.aspectFillMode = 'width';
+    this.didLoad = false;
   }
   componentDidLoad() {
     if (!this.lazyLoad)
@@ -16,7 +17,7 @@ export class Image {
       // 异步 api 关系
       if (entries[entries.length - 1].isIntersecting) {
         lazyImg.unobserve(this.imgRef);
-        this.imgRef.src = this.src;
+        this.didLoad = true;
       }
     }, {
       rootMargin: '300px 0px'
@@ -35,14 +36,14 @@ export class Image {
     this.onError.emit(e);
   }
   render() {
-    const { src, mode = 'scaleToFill', lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps } = this;
+    const { src, mode = 'scaleToFill', lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps, didLoad } = this;
     const cls = classNames({
       'taro-img__widthfix': mode === 'widthFix'
     });
     const imgCls = classNames(`taro-img__mode-${mode.toLowerCase().replace(/\s/g, '')}`, {
       [`taro-img__mode-aspectfill--${aspectFillMode}`]: mode === 'aspectFill'
     });
-    return (h(Host, { class: cls }, lazyLoad ? (h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps))) : (h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, src: src, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps)))));
+    return (h(Host, { class: cls }, h("img", Object.assign({ ref: (img) => (this.imgRef = img), class: imgCls, src: lazyLoad && !didLoad ? undefined : src, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps))));
   }
   static get is() { return "taro-image-core"; }
   static get originalStyleUrls() {
@@ -134,7 +135,8 @@ export class Image {
   }
   static get states() {
     return {
-      "aspectFillMode": {}
+      "aspectFillMode": {},
+      "didLoad": {}
     };
   }
   static get events() {

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

@@ -114,7 +114,7 @@ export class Input {
         this.isOnComposition = true;
       }
     };
-    this.handleBeforeinput = (e) => {
+    this.handleBeforeInput = (e) => {
       if (!e.data)
         return;
       const isNumber = e.data && /[0-9]/.test(e.data);
@@ -127,7 +127,7 @@ export class Input {
         }
       }
     };
-    this.value = undefined;
+    this.value = '';
     this.type = undefined;
     this.password = false;
     this.placeholder = undefined;
@@ -164,14 +164,9 @@ export class Input {
     else {
       (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.addEventListener('compositionstart', this.handleComposition);
       (_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.addEventListener('compositionend', this.handleComposition);
-      (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.addEventListener('beforeinput', this.handleBeforeinput);
-      (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.addEventListener('textInput', this.handleBeforeinput);
+      (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.addEventListener('beforeinput', this.handleBeforeInput);
+      (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.addEventListener('textInput', this.handleBeforeInput);
     }
-    Object.defineProperty(this.el, 'value', {
-      get: () => this.inputRef.value,
-      set: value => this.value !== value && (this.value = value),
-      configurable: true
-    });
   }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e;
@@ -181,8 +176,8 @@ export class Input {
     else {
       (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('compositionstart', this.handleComposition);
       (_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.removeEventListener('compositionend', this.handleComposition);
-      (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.removeEventListener('beforeinput', this.handleBeforeinput);
-      (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.removeEventListener('textInput', this.handleBeforeinput);
+      (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.removeEventListener('beforeinput', this.handleBeforeInput);
+      (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.removeEventListener('textInput', this.handleBeforeInput);
     }
   }
   render() {
@@ -221,7 +216,8 @@ export class Input {
           "text": ""
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "''"
       },
       "type": {
         "type": "string",
@@ -326,7 +322,7 @@ export class Input {
           "text": ""
         },
         "attribute": "focus",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       },
       "confirmType": {

package/dist/collection/components/picker/picker-group.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { TOP, LINE_HEIGHT, MASK_HEIGHT } from './constant';
 export class TaroPickerGroup {
   constructor() {
@@ -8,7 +8,6 @@ export class TaroPickerGroup {
     this.height = undefined;
     this.columnId = undefined;
     this.updateHeight = undefined;
-    this.onColumnChange = undefined;
     this.updateDay = undefined;
     this.startY = undefined;
     this.preY = undefined;
@@ -78,7 +77,7 @@ export class TaroPickerGroup {
     this.updateHeight(newPos, this.columnId);
   }
   async handleMoveEnd(clientY) {
-    const { mode, range, height, updateHeight, onColumnChange, columnId } = this;
+    const { mode, range, height, updateHeight, columnId } = this;
     const max = 0;
     const min = -LINE_HEIGHT * (range.length - 1);
     const endY = clientY;
@@ -129,7 +128,7 @@ export class TaroPickerGroup {
     // 先按公式算出 index, 再用此 index 算出一个整数高度
     const index = Math.round(absoluteHeight / -LINE_HEIGHT);
     const relativeHeight = TOP - LINE_HEIGHT * index;
-    if (this.mode === 'date') {
+    if (this.mode === 'date' && typeof this.updateDay === 'function') {
       if (this.columnId === '0') {
         this.updateDay(+this.range[index].replace(/[^0-9]/gi, ''), 0);
       }
@@ -141,14 +140,16 @@ export class TaroPickerGroup {
       }
     }
     updateHeight(relativeHeight, columnId, mode === 'time');
-    onColumnChange && onColumnChange(relativeHeight, columnId);
+    this.onColumnChange.emit({
+      columnId,
+      height: relativeHeight,
+    });
   }
   onMouseDown(e) {
     this.isMove = true;
     this.handleMoveStart(e.clientY);
   }
   onMouseMove(e) {
-    e.preventDefault();
     if (!this.isMove)
       return;
     this.handleMoving(e.clientY);
@@ -163,7 +164,6 @@ export class TaroPickerGroup {
     this.handleMoveStart(e.changedTouches[0].clientY);
   }
   onTouchMove(e) {
-    e.preventDefault();
     this.handleMoving(e.changedTouches[0].clientY);
   }
   onTouchEnd(e) {
@@ -279,31 +279,16 @@ export class TaroPickerGroup {
           "text": ""
         }
       },
-      "onColumnChange": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(height: number, columnId: string) => void",
-          "resolved": "(height: number, columnId: string) => void",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
       "updateDay": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
           "original": "(value: number, fields: number) => void",
-          "resolved": "(value: number, fields: number) => void",
+          "resolved": "((value: number, fields: number) => void) | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -320,6 +305,24 @@ export class TaroPickerGroup {
       "isMove": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "onColumnChange",
+        "name": "columnChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "handleMoveStart": {
@@ -392,7 +395,7 @@ export class TaroPickerGroup {
         "name": "mousemove",
         "method": "onMouseMove",
         "target": undefined,
-        "capture": false,
+        "capture": true,
         "passive": true
       }, {
         "name": "mouseup",
@@ -416,7 +419,7 @@ export class TaroPickerGroup {
         "name": "touchmove",
         "method": "onTouchMove",
         "target": undefined,
-        "capture": false,
+        "capture": true,
         "passive": true
       }, {
         "name": "touchend",