@tarojs/components 4.0.0-canary.9 → 4.0.1-alpha.0

package/dist/components/taro-movable-area-core.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as isElement } from './index3.js';
 
 const areaCss = "taro-movable-area-core{width:10px;height:10px;display:block;position:relative}";
 
@@ -36,7 +37,7 @@ const MovableArea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           if (!(e = e.parentNode)) {
             return false;
           }
-          return (!(e instanceof HTMLElement) || e !== document.body) && (e === t || e === t.element || e.element === t || loop(e, t));
+          return (!isElement(e) || e !== document.body) && (e === t || e === t.element || e.element === t || loop(e, t));
         };
         for (let i = 0; i < views.length; i++) {
           const view = views[i];

package/dist/components/taro-movable-view-core.js

@@ -166,7 +166,9 @@ const MovableView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (this.disabled || !this.element || this.scaling || !this.touching || touches.length > 1) {
         return;
       }
-      e.preventDefault();
+      if (this.direction !== "horizontal") {
+        e.preventDefault();
+      }
       const touch = touches[0];
       const x = touch.screenX - this.origin.x;
       const y = touch.screenY - this.origin.y;

package/dist/components/taro-nested-scroll-body-core.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TaroNestedScrollBodyCore extends Components.TaroNestedScrollBodyCore, HTMLElement {}
+export const TaroNestedScrollBodyCore: {
+  prototype: TaroNestedScrollBodyCore;
+  new (): TaroNestedScrollBodyCore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/taro-nested-scroll-body-core.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { n as notSupport } from './helper.js';
+
+const NestedScrollBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  componentDidLoad() {
+    notSupport('NestedScrollBody', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+}, [0, "taro-nested-scroll-body-core"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["taro-nested-scroll-body-core"];
+  components.forEach(tagName => { switch (tagName) {
+    case "taro-nested-scroll-body-core":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, NestedScrollBody);
+      }
+      break;
+  } });
+}
+
+const TaroNestedScrollBodyCore = NestedScrollBody;
+const defineCustomElement = defineCustomElement$1;
+
+export { TaroNestedScrollBodyCore, defineCustomElement };

package/dist/components/taro-nested-scroll-header-core.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TaroNestedScrollHeaderCore extends Components.TaroNestedScrollHeaderCore, HTMLElement {}
+export const TaroNestedScrollHeaderCore: {
+  prototype: TaroNestedScrollHeaderCore;
+  new (): TaroNestedScrollHeaderCore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/taro-nested-scroll-header-core.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { n as notSupport } from './helper.js';
+
+const NestedScrollHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  componentDidLoad() {
+    notSupport('NestedScrollHeader', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+}, [0, "taro-nested-scroll-header-core"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["taro-nested-scroll-header-core"];
+  components.forEach(tagName => { switch (tagName) {
+    case "taro-nested-scroll-header-core":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, NestedScrollHeader);
+      }
+      break;
+  } });
+}
+
+const TaroNestedScrollHeaderCore = NestedScrollHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { TaroNestedScrollHeaderCore, defineCustomElement };

package/dist/components/taro-open-container-core.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TaroOpenContainerCore extends Components.TaroOpenContainerCore, HTMLElement {}
+export const TaroOpenContainerCore: {
+  prototype: TaroOpenContainerCore;
+  new (): TaroOpenContainerCore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/taro-open-container-core.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { n as notSupport } from './helper.js';
+
+const OpenContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  componentDidLoad() {
+    notSupport('OpenContainer', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+}, [0, "taro-open-container-core"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["taro-open-container-core"];
+  components.forEach(tagName => { switch (tagName) {
+    case "taro-open-container-core":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, OpenContainer);
+      }
+      break;
+  } });
+}
+
+const TaroOpenContainerCore = OpenContainer;
+const defineCustomElement = defineCustomElement$1;
+
+export { TaroOpenContainerCore, defineCustomElement };

package/dist/components/taro-progress-core.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const indexCss = ".weui-progress{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}";
+const indexCss = ".weui-progress{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.weui-progress__bar{background-color:#ebebeb;-ms-flex:1;flex:1;height:3px}.weui-progress__inner-bar{background-color:#09bb07;width:0;height:100%}.weui-progress__opr{margin-left:15px;font-size:0;display:block}";
 
 const Progress = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/taro-pull-to-refresh-core.js

@@ -71,6 +71,9 @@ const PullToRefresh = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       });
     };
     this.destroy = () => {
+      // fix 频繁切换页面，可能会导致 this._to 为空造成报错
+      if (!this._to)
+        return;
       const ele = this.scrollContainer;
       Object.keys(this._to).forEach(key => {
         ele.removeEventListener(key, this._to[key]);

package/dist/components/taro-span-core.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TaroSpanCore extends Components.TaroSpanCore, HTMLElement {}
+export const TaroSpanCore: {
+  prototype: TaroSpanCore;
+  new (): TaroSpanCore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/taro-span-core.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { n as notSupport } from './helper.js';
+
+const Span = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  componentDidLoad() {
+    notSupport('Span', this);
+  }
+  render() {
+    return h(Host, null);
+  }
+}, [0, "taro-span-core"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["taro-span-core"];
+  components.forEach(tagName => { switch (tagName) {
+    case "taro-span-core":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Span);
+      }
+      break;
+  } });
+}
+
+const TaroSpanCore = Span;
+const defineCustomElement = defineCustomElement$1;
+
+export { TaroSpanCore, defineCustomElement };

package/dist/components/taro-swiper-core.js

@@ -67,7 +67,7 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.handleSwiperLoopDebounce = debounce(this.handleSwiperLoop, 50);
     this.handleSwiperSizeDebounce = debounce(() => {
-      if (this.swiper && !this.circular) {
+      if (this.swiper && this.swiper.$wrapperEl && !this.circular) {
         this.swiper.updateSlides();
       }
     }, 50);
@@ -79,6 +79,7 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.indicatorActiveColor = '#000000';
     this.autoplay = false;
     this.current = 0;
+    this.currentItemId = '';
     this.interval = 5000;
     this.duration = 500;
     this.circular = false;
@@ -93,7 +94,7 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.observerLast = undefined;
   }
   watchCurrent(newVal) {
-    if (!this.isWillLoadCalled)
+    if (this.currentItemId || !this.isWillLoadCalled)
       return;
     const n = parseInt(newVal, 10);
     if (isNaN(n))
@@ -107,6 +108,25 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.swiper.slideTo(n); // 更新下标
     }
   }
+  watchCurrentItemId(newVal) {
+    var _a;
+    const wrapper = (_a = this.swiper.$wrapperEl) === null || _a === void 0 ? void 0 : _a[0];
+    let itemIdIndex = 0;
+    wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => {
+      // @ts-ignore
+      if (swiperItem.itemId && swiperItem.itemId === newVal) {
+        itemIdIndex = index;
+      }
+    });
+    if (this.circular) {
+      if (!this.swiper.isBeginning && !this.swiper.isEnd) {
+        this.swiper.slideToLoop(itemIdIndex); // 更新下标
+      }
+    }
+    else {
+      this.swiper.slideTo(itemIdIndex); // 更新下标
+    }
+  }
   watchAutoplay(newVal) {
     if (!this.isWillLoadCalled || !this.swiper)
       return;
@@ -194,7 +214,9 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.autoplay && !((_a = this.swiper.autoplay) === null || _a === void 0 ? void 0 : _a.running)) {
       (_b = this.swiper.autoplay) === null || _b === void 0 ? void 0 : _b.start();
     }
-    this.swiper.update(); // 更新子元素
+    if (this.swiper.$el) {
+      this.swiper.update(); // 更新子元素
+    }
   }
   componentDidRender() {
     this.handleSwiperLoop();
@@ -209,7 +231,18 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     (_f = (_e = this.observerLast) === null || _e === void 0 ? void 0 : _e.disconnect) === null || _f === void 0 ? void 0 : _f.call(_e);
   }
   handleInit() {
-    const { autoplay, circular, current, displayMultipleItems, duration, interval, vertical } = this;
+    const { autoplay, circular, current, currentItemId, displayMultipleItems, duration, interval, vertical } = this;
+    let initialSlide = circular ? current + 1 : current;
+    if (currentItemId) {
+      let itemIdIndex = 0;
+      this.el.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => {
+        // @ts-ignore
+        if (swiperItem.itemId && swiperItem.itemId === currentItemId) {
+          itemIdIndex = index;
+        }
+      });
+      initialSlide = circular ? itemIdIndex + 1 : itemIdIndex;
+    }
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
     const options = {
@@ -217,7 +250,7 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       direction: vertical ? 'vertical' : 'horizontal',
       loop: circular,
       slidesPerView: displayMultipleItems,
-      initialSlide: circular ? current + 1 : current,
+      initialSlide: initialSlide,
       speed: duration,
       observer: true,
       observeParents: true,
@@ -316,6 +349,7 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get el() { return this; }
   static get watchers() { return {
     "current": ["watchCurrent"],
+    "currentItemId": ["watchCurrentItemId"],
     "autoplay": ["watchAutoplay"],
     "duration": ["watchDuration"],
     "interval": ["watchInterval"],
@@ -330,6 +364,7 @@ const Swiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "indicatorActiveColor": [1, "indicator-active-color"],
     "autoplay": [4],
     "current": [2],
+    "currentItemId": [1, "current-item-id"],
     "interval": [2],
     "duration": [2],
     "circular": [4],

package/dist/components/taro-tabbar.js

@@ -3,7 +3,7 @@ import { stripSuffix, stripBasename, addLeadingSlash, getCurrentPage } from '@ta
 import Taro from '@tarojs/taro';
 import { c as classnames } from './index2.js';
 import resolvePathname from 'resolve-pathname';
-import { i as isVisible } from './index3.js';
+import { a as isVisible } from './index3.js';
 
 const splitUrl = _url => {
   let url = _url || '';
@@ -56,7 +56,7 @@ const TabbarItem = ({ index, isSelected = false, textColor, iconPath, badgeText,
     h("p", { class: 'weui-tabbar__label', style: { color: textColor } }, text)));
 };
 
-const indexCss = ".weui-tabbar{z-index:500;background-color:#f7f7fa;width:100%;display:-ms-flexbox;display:flex;position:absolute;bottom:0}.weui-tabbar:before{content:\" \";color:#c0bfc4;-webkit-transform-origin:0 0;transform-origin:0 0;border-top:1px solid #c0bfc4;height:1px;position:absolute;top:0;left:0;right:0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-tabbar__item{padding:5px 0;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);color:#999;text-align:center;-webkit-tap-highlight-color:transparent;-ms-flex:1;flex:1;font-size:0;display:block}.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{color:#09bb07}.weui-tabbar__icon{width:27px;height:27px;display:inline-block}.weui-tabbar__icon img{width:100%;height:100%}i.weui-tabbar__icon,.weui-tabbar__icon>i{color:#999;font-size:24px}.weui-tabbar__label{text-align:center;color:#999;font-size:10px;line-height:1.8}.weui-badge{color:#fff;text-align:center;vertical-align:middle;background-color:#f43530;border-radius:18px;min-width:8px;padding:.15em .4em;font-size:12px;line-height:1.2;display:inline-block}.weui-badge_dot{min-width:0;padding:.4em}html,body{height:100%}:root{--taro-tabbar-height:$weuiTabBarHeight}#app{height:100%}.taro-tabbar__border-white:before{border-top-color:#fff!important}.taro-tabbar__container{-ms-flex-direction:column;flex-direction:column;height:100%;display:-ms-flexbox;display:flex;overflow:hidden}.taro-tabbar__panel{-webkit-overflow-scrolling:auto;-ms-flex:1;flex:1;position:relative;overflow:auto}.taro-tabbar__tabbar{height:var(--taro-tabbar-height);width:100%;-webkit-transition:bottom .2s,top .2s;transition:bottom .2s,top .2s;position:relative}.taro-tabbar__tabbar-top{top:0}.taro-tabbar__tabbar-bottom{margin-bottom:constant(safe-area-inset-bottom);margin-bottom:env(safe-area-inset-bottom);bottom:0}.taro-tabbar__tabbar-hide{display:none}.taro-tabbar__tabbar-slideout{-ms-flex:0 0;flex:0 0;top:-52px}.taro-tabbar__panel+.taro-tabbar__tabbar-slideout{top:auto;bottom:-52px}";
+const indexCss = ".weui-tabbar{z-index:500;background-color:#f7f7fa;-ms-flex-align:center;align-items:center;width:100%;display:-ms-flexbox;display:flex;position:absolute;bottom:0}.weui-tabbar:before{content:\" \";color:#c0bfc4;-webkit-transform-origin:0 0;transform-origin:0 0;border-top:1px solid #c0bfc4;height:1px;position:absolute;top:0;left:0;right:0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-tabbar__item{padding:5px 0;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);color:#999;text-align:center;-webkit-tap-highlight-color:transparent;-ms-flex:1;flex:1;font-size:0;display:block}.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{color:#09bb07}.weui-tabbar__icon{width:27px;height:27px;display:inline-block}.weui-tabbar__icon img{width:100%;height:100%}i.weui-tabbar__icon,.weui-tabbar__icon>i{color:#999;font-size:24px}.weui-tabbar__label{text-align:center;color:#999;font-size:10px;line-height:1.8}.weui-badge{color:#fff;text-align:center;vertical-align:middle;background-color:#f43530;border-radius:18px;min-width:8px;padding:.15em .4em;font-size:12px;line-height:1.2;display:inline-block}.weui-badge_dot{min-width:0;padding:.4em}:root{--taro-tabbar-height:50px}#app{height:100%}.taro-tabbar__border-white:before{border-top-color:#fff!important}.taro-tabbar__container{-ms-flex-direction:column;flex-direction:column;height:100%;display:-ms-flexbox;display:flex;overflow:hidden}.taro-tabbar__panel{-webkit-overflow-scrolling:auto;-ms-flex:1;flex:1;position:relative;overflow:auto}.taro-tabbar__tabbar{height:var(--taro-tabbar-height);width:100%;-webkit-transition:bottom .2s,top .2s;transition:bottom .2s,top .2s;position:relative}.taro-tabbar__tabbar-top{top:0}.taro-tabbar__tabbar-bottom{margin-bottom:constant(safe-area-inset-bottom);margin-bottom:env(safe-area-inset-bottom);bottom:0}.taro-tabbar__tabbar-hide{display:none}.taro-tabbar__tabbar-slideout{-ms-flex:0 0;flex:0 0;top:-52px}.taro-tabbar__panel+.taro-tabbar__tabbar-slideout{top:auto;bottom:-52px}";
 
 const STATUS_SHOW = 0;
 const STATUS_HIDE = 1;

package/dist/components/taro-video-core.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import Taro from '@tarojs/taro';
 import { c as classnames } from './index2.js';
 import { t as throttle } from './index3.js';
 import { n as normalizeNumber, i as isHls, s as screenFn, a as scene, f as formatTime, d as defineCustomElement$3, c as calcDist } from './video-control.js';
@@ -225,11 +226,15 @@ const Video = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (this.isFullScreen && !document[screenFn.fullscreenElement]) {
         setTimeout(() => {
           this.videoRef[screenFn.requestFullscreen]({ navigationUI: 'auto' });
+          Taro.eventCenter.trigger('__taroEnterFullScreen', {});
         }, 0);
       }
-      else if (!fromBrowser) {
-        // Note: 全屏后，"退出全屏"是浏览器按钮是浏览器内部按钮，非html按钮，点击"退出全屏"按钮是浏览器内部实现功能。此时再次调用exitFullscreen反而会报错，因此不再调用
-        document[screenFn.exitFullscreen]();
+      else {
+        if (!fromBrowser) {
+          // Note: 全屏后，"退出全屏"是浏览器按钮是浏览器内部按钮，非html按钮，点击"退出全屏"按钮是浏览器内部实现功能。此时再次调用exitFullscreen反而会报错，因此不再调用
+          document[screenFn.exitFullscreen]();
+        }
+        Taro.eventCenter.trigger('__taroExitFullScreen', {});
       }
     };
     this.toggleMute = (e) => {

package/dist/components/taro-view-core.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classnames } from './index2.js';
 import { h as handleStencilNodes } from './helper.js';
 
-const indexCss = "body,html{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}taro-view-core{display:block}";
+const indexCss = "taro-view-core{display:block}";
 
 const View = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {