@tarojs/components 4.1.5-beta.7 → 4.1.5-beta.8

package/dist/esm/taro-rich-text-core.entry.js

@@ -1,2 +1,71 @@
-export { R as taro_rich_text_core } from './rich-text-287554f4.js';
-import './index-0004ce39.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+
+const indexCss = "taro-rich-text-core{user-select:none}taro-rich-text-core[selectable=true],taro-rich-text-core[user-select=true]{user-select:text;display:block}taro-rich-text-core[space]{white-space:pre-wrap}taro-rich-text-core[space=ensp]{word-spacing:.5em}taro-rich-text-core[space=nbsp]{word-spacing:1em}";
+
+const RichText = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.renderNode = (node) => {
+      if ('type' in node && node.type === 'text') {
+        // nonsupport Html Entries
+        const content = (node.text || '').replace(/ /g, '\u00A0');
+        return content;
+      }
+      else if ('name' in node && node.name) {
+        const { name, attrs, children } = node;
+        const attributes = {};
+        let childList = [];
+        if (attrs && typeof attrs === 'object') {
+          for (const key in attrs) {
+            const val = attrs[key];
+            if (key === 'style' && typeof val === 'string') {
+              // stencil JSX style props only support object
+              const styles = val
+                .split(';')
+                .map(item => item.trim())
+                .filter(item => item);
+              const styleObj = {};
+              styles.forEach(item => {
+                if (!item)
+                  return;
+                const res = /(.+): *(.+)/g.exec(item);
+                if (!res)
+                  return;
+                const [, name, value] = res;
+                const styleName = name.replace(/-([a-z])/g, (...args) => args[1].toUpperCase());
+                styleObj[styleName] = value;
+              });
+              if (Object.keys(styleObj).length) {
+                attributes.style = styleObj;
+              }
+              continue;
+            }
+            attributes[key] = val;
+          }
+        }
+        if (children && children.length) {
+          childList = children.map(node => this.renderNode(node));
+        }
+        // @ts-ignore
+        return h(name, attributes, childList);
+      }
+      return null;
+    };
+    this.nodes = undefined;
+    this.selectable = false;
+    this.userSelect = false;
+    this.space = undefined;
+  }
+  render() {
+    const { nodes, renderNode } = this;
+    if (Array.isArray(nodes)) {
+      return (h(Host, null, nodes.map(node => renderNode(node))));
+    }
+    else {
+      return h(Host, { innerHTML: nodes });
+    }
+  }
+};
+RichText.style = indexCss;
+
+export { RichText as taro_rich_text_core };

package/dist/esm/taro-root-portal-core.entry.js

@@ -1,4 +1,17 @@
-export { R as taro_root_portal_core } from './root-portal-db801799.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const RootPortal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('RootPortal', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+
+export { RootPortal as taro_root_portal_core };

package/dist/esm/taro-rtc-room-core.entry.js

@@ -1,4 +1,17 @@
-export { R as taro_rtc_room_core } from './rtc-room-bcf23c91.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const RtcRoom = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('RtcRoom', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+
+export { RtcRoom as taro_rtc_room_core };

package/dist/esm/taro-rtc-room-item-core.entry.js

@@ -1,4 +1,17 @@
-export { R as taro_rtc_room_item_core } from './rtc-room-item-052b16d2.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const RtcRoomItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('RtcRoomItem', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+
+export { RtcRoomItem as taro_rtc_room_item_core };

package/dist/esm/taro-scale-gesture-handler-core.entry.js

@@ -1,4 +1,17 @@
-export { S as taro_scale_gesture_handler_core } from './script-4b869172.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const ScaleGestureHandler = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('ScaleGestureHandler', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+
+export { ScaleGestureHandler as taro_scale_gesture_handler_core };

package/dist/esm/taro-script-core.entry.js

@@ -1,4 +1,17 @@
-export { S as taro_script_core } from './script-1b22398f.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const Script = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('Script', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+
+export { Script as taro_script_core };

package/dist/esm/taro-scroll-view-core.entry.js

@@ -1,6 +1,169 @@
-export { S as taro_scroll_view_core } from './scroll-view-43e9acfc.js';
-import './index-0004ce39.js';
-import './index-b9522531.js';
-import './index-a00a7418.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0004ce39.js';
+import { c as classnames } from './index-b9522531.js';
+import { d as debounce } from './index-a00a7418.js';
+import { h as handleStencilNodes } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const indexCss = "taro-scroll-view-core{-webkit-overflow-scrolling:touch;width:100%;display:block}.taro-scroll-view__scroll-x{overflow:scroll hidden}.taro-scroll-view__scroll-y{overflow:hidden scroll}.taro-scroll--hidebar::-webkit-scrollbar{display:none}";
+
+function easeOutScroll(from, to, duration = 500, callback) {
+  if (from === to || typeof from !== 'number') {
+    return;
+  }
+  const change = to - from;
+  const sTime = Date.now();
+  const isLarger = to >= from;
+  function linear(t, b, c, d) {
+    return c * t / d + b;
+  }
+  function step() {
+    from = linear(Date.now() - sTime, from, change, duration);
+    if ((isLarger && from >= to) || (!isLarger && to >= from)) {
+      callback(to);
+      return;
+    }
+    callback(from);
+    requestAnimationFrame(step);
+  }
+  step();
+}
+const ScrollView = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onScroll = createEvent(this, "scroll", 3);
+    this.onScrollToUpper = createEvent(this, "scrolltoupper", 3);
+    this.onScrollToLower = createEvent(this, "scrolltolower", 3);
+    this._scrollLeft = 0;
+    this._scrollTop = 0;
+    this.upperAndLower = debounce(() => {
+      const { offsetWidth, offsetHeight, scrollLeft, scrollTop, scrollHeight, scrollWidth } = this.el;
+      const lowerThreshold = Number(this.lowerThreshold);
+      const upperThreshold = Number(this.upperThreshold);
+      if (!isNaN(lowerThreshold) &&
+        ((this.scrollY && offsetHeight + scrollTop + lowerThreshold >= scrollHeight) ||
+          (this.scrollX && offsetWidth + scrollLeft + lowerThreshold >= scrollWidth))) {
+        this.onScrollToLower.emit({
+          direction: this.scrollX ? 'right' : (this.scrollY ? 'bottom' : '')
+        });
+      }
+      if (!isNaN(upperThreshold) &&
+        ((this.scrollY && scrollTop <= upperThreshold) ||
+          (this.scrollX && scrollLeft <= upperThreshold))) {
+        this.onScrollToUpper.emit({
+          direction: this.scrollX ? 'left' : (this.scrollY ? 'top' : '')
+        });
+      }
+    }, 200);
+    this.scrollX = false;
+    this.scrollY = false;
+    this.upperThreshold = 50;
+    this.lowerThreshold = 50;
+    this.mpScrollTop = undefined;
+    this.mpScrollLeft = undefined;
+    this.mpScrollIntoView = undefined;
+    this.mpScrollIntoViewAlignment = undefined;
+    this.animated = false;
+    this.enhanced = false;
+    this.showScrollbar = true;
+  }
+  watchScrollLeft(newVal) {
+    const left = Number(newVal);
+    const { animated } = this;
+    this.mpScrollToMethod({
+      left, animated
+    });
+  }
+  watchScrollTop(newVal) {
+    const top = Number(newVal);
+    const { animated } = this;
+    this.mpScrollToMethod({
+      top, animated
+    });
+  }
+  watchScrollIntoView(newVal) {
+    this.mpScrollIntoViewMethod(newVal);
+  }
+  handleScroll(e) {
+    var _a;
+    if (e instanceof CustomEvent)
+      return;
+    e.stopPropagation();
+    (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+    const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = this.el;
+    this._scrollLeft = scrollLeft;
+    this._scrollTop = scrollTop;
+    this.upperAndLower();
+    this.onScroll.emit({
+      scrollLeft,
+      scrollTop,
+      scrollHeight,
+      scrollWidth
+    });
+  }
+  handleTouchMove(e) {
+    if (e instanceof CustomEvent)
+      return;
+    e.stopPropagation();
+  }
+  async mpScrollToMethod(object) {
+    let { top, left, duration, animated = false } = object;
+    if (this.scrollY && typeof top === 'number' && !isNaN(top) && top !== this._scrollTop) {
+      if (animated) {
+        easeOutScroll(this._scrollTop, top, duration, pos => (this.el.scrollTop = pos));
+      }
+      else {
+        this.el.scrollTop = top;
+      }
+      this._scrollTop = top;
+    }
+    if (this.scrollX && typeof left === 'number' && !isNaN(left) && left !== this._scrollLeft) {
+      if (animated) {
+        easeOutScroll(this._scrollLeft, left, duration, pos => (this.el.scrollLeft = pos));
+      }
+      else {
+        this.el.scrollLeft = left;
+      }
+      this._scrollLeft = left;
+    }
+  }
+  async mpScrollIntoViewMethod(selector) {
+    var _a;
+    if (typeof selector === 'string' && selector) {
+      (_a = document.querySelector(`#${selector}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+        behavior: this.animated ? 'smooth' : 'auto',
+        block: this.scrollY ? (this.mpScrollIntoViewAlignment || 'center') : 'center',
+        inline: this.scrollX ? (this.mpScrollIntoViewAlignment || 'start') : 'start'
+      });
+    }
+  }
+  componentDidLoad() {
+    const top = Number(this.mpScrollTop);
+    const left = Number(this.mpScrollLeft);
+    const { animated } = this;
+    this.mpScrollToMethod({
+      top, left, animated
+    });
+  }
+  componentDidRender() {
+    handleStencilNodes(this.el);
+  }
+  render() {
+    const { scrollX, scrollY, enhanced, showScrollbar } = this;
+    const cls = classnames({
+      'taro-scroll-view__scroll-x': scrollX,
+      'taro-scroll-view__scroll-y': scrollY,
+      'taro-scroll--hidebar': enhanced === true && showScrollbar === false,
+      'taro-scroll--enhanced': enhanced === true
+    });
+    return (h(Host, { class: cls }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "mpScrollLeft": ["watchScrollLeft"],
+    "mpScrollTop": ["watchScrollTop"],
+    "mpScrollIntoView": ["watchScrollIntoView"]
+  }; }
+};
+ScrollView.style = indexCss;
+
+export { ScrollView as taro_scroll_view_core };

package/dist/esm/taro-share-element-core.entry.js

@@ -1,4 +1,17 @@
-export { S as taro_share_element_core } from './share-element-4f90ad5b.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const ShareElement = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('ShareElement', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+
+export { ShareElement as taro_share_element_core };

package/dist/esm/taro-slider-core.entry.js

@@ -1,2 +1,161 @@
-export { S as taro_slider_core } from './slider-47bbf797.js';
-import './index-0004ce39.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0004ce39.js';
+
+const indexCss = ".weui-slider{user-select:none;padding:15px 18px}.weui-slider__inner{background-color:#e9e9e9;height:2px;position:relative}.weui-slider__track{background-color:#1aad19;width:0;height:2px}.weui-slider__handler{background-color:#fff;border-radius:50%;width:28px;height:28px;margin-top:-14px;margin-left:-14px;position:absolute;top:50%;left:0;box-shadow:0 0 4px rgba(0,0,0,.2)}.weui-slider-box{align-items:center;display:flex}.weui-slider-box .weui-slider{flex:1}.weui-slider-box__value{color:#888;text-align:center;min-width:24px;margin-left:.5em;font-size:14px}";
+
+const Slider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onChange = createEvent(this, "change", 7);
+    this.onChanging = createEvent(this, "changing", 7);
+    this.handleTouchStart = (e) => {
+      if (this.touching || this.disabled)
+        return;
+      this.touching = true;
+      this.touchId = e.targetTouches[0].identifier;
+      this.totalWidth = this.sliderInsRef.clientWidth || 1;
+      this.ogX = e.targetTouches[0].pageX;
+      this.ogPercent = this.percent;
+    };
+    this.handleTouchMove = (e) => {
+      const { disabled, touching, touchId, totalWidth, max, min, ogX, ogPercent } = this;
+      if (!touching || disabled)
+        return;
+      if (e.targetTouches[0].identifier !== touchId)
+        return;
+      // 阻止默认事件
+      e.preventDefault();
+      const pageX = e.targetTouches[0].pageX;
+      const diffX = pageX - ogX;
+      let percent = diffX / totalWidth * 100 + ogPercent;
+      percent = this.handleValueUpdate(percent, 0, 100);
+      const val = min + percent * 0.01 * (max - min);
+      this.updateByStep(val);
+      this.onChanging.emit({
+        detail: e.detail,
+        value: this.value
+      });
+    };
+    this.handleTouchEnd = (e) => {
+      const { disabled, touching } = this;
+      if (!touching || disabled)
+        return;
+      if (this.percent !== this.ogPercent) {
+        this.onChange.emit({
+          detail: e.detail,
+          value: this.value
+        });
+      }
+      this.touching = false;
+      this.touchId = null;
+      this.ogX = 0;
+      this.ogPercent = 0;
+    };
+    this.handleValueUpdate = (e, min = this.min, max = this.max) => {
+      e = isNaN(e) ? 0 : e;
+      return Math.max(min, Math.min(e, max));
+    };
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.disabled = false;
+    this.value = 0;
+    this.activeColor = '#1aad19';
+    this.backgroundColor = '#e9e9e9';
+    this.blockSize = 28;
+    this.blockColor = '#ffffff';
+    this.showValue = false;
+    this.name = '';
+    this.totalWidth = 1;
+    this.touching = false;
+    this.ogX = 0;
+    this.touchId = null;
+    this.percent = 0;
+    this.ogPercent = undefined;
+    this.isWillLoadCalled = false;
+  }
+  function(value) {
+    if (!this.isWillLoadCalled)
+      return;
+    const { max, min } = this;
+    if (value !== null) {
+      const val = this.handleValueUpdate(value, min, max);
+      this.updateByStep(val);
+    }
+  }
+  componentDidLoad() {
+    // 在自动化测试时，如果通过 JSX 绑定 touch 事件，
+    // 模拟的 touch 事件只会在浏览器的 device mode 下触发，Karma 跑的测试就会跪。
+    // 因此改为 didLoad 后 addEventListener 的形式。
+    this.handler.addEventListener('touchstart', this.handleTouchStart);
+    this.handler.addEventListener('touchmove', this.handleTouchMove);
+    this.handler.addEventListener('touchend', this.handleTouchEnd);
+  }
+  componentWillLoad() {
+    this.isWillLoadCalled = true;
+    const { value, max, min } = this;
+    const val = this.handleValueUpdate(value, min, max);
+    this.updateByStep(val);
+  }
+  // 根据步长 step 修改 value
+  updateByStep(value) {
+    const { max, min, step } = this;
+    const steps = Math.floor((max - min) / step);
+    for (let i = 0; i <= steps; i++) {
+      const current = min + step * i;
+      const next = i === steps ? null : min + step * (i + 1);
+      if (value === current)
+        break;
+      if (!next && value > current) {
+        // step 不能被 max - min 整除
+        value = current;
+      }
+      if (next && value > current && value < next) {
+        if (value - current < step / 2) {
+          value = current;
+        }
+        else {
+          value = next;
+        }
+        break;
+      }
+    }
+    const percent = (value - min) / (max - min) * 100;
+    this.value = value;
+    this.percent = percent;
+  }
+  render() {
+    const { showValue, backgroundColor, activeColor, blockColor, name, percent, value } = this;
+    let blockSize = this.blockSize;
+    const innerStyles = { backgroundColor };
+    const percentage = percent > 100 ? 100 : percent;
+    const trackStyles = {
+      width: `${percentage}%`,
+      backgroundColor: activeColor
+    };
+    if (blockSize < 12) {
+      blockSize = 12;
+    }
+    if (blockSize > 28) {
+      blockSize = 28;
+    }
+    const handlerStyles = {
+      left: `${percentage}%`,
+      width: `${blockSize}px`,
+      height: `${blockSize}px`,
+      backgroundColor: blockColor,
+      marginTop: `-${Math.floor(blockSize / 2)}px`,
+      marginLeft: `-${Math.floor(blockSize / 2)}px`
+    };
+    return (h(Host, { class: 'weui-slider-box' }, h("div", { class: 'weui-slider' }, h("div", { class: 'weui-slider__inner', style: innerStyles, ref: c => (this.sliderInsRef = c) }, h("div", { style: trackStyles, class: 'weui-slider__track' }), h("div", { class: 'weui-slider__handler', ref: dom => {
+        if (dom)
+          this.handler = dom;
+      }, style: handlerStyles }), h("input", { type: 'hidden', name: name, value: value }))), showValue && h("div", { class: 'weui-slider-box__value' }, value)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["function"]
+  }; }
+};
+Slider.style = indexCss;
+
+export { Slider as taro_slider_core };

package/dist/esm/taro-slot-core.entry.js

@@ -1,4 +1,17 @@
-export { S as taro_slot_core } from './slot-71ad33eb.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const Slot = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('Slot', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+
+export { Slot as taro_slot_core };

package/dist/esm/taro-snapshot-core.entry.js

@@ -1,4 +1,17 @@
-export { S as taro_snapshot_core } from './snapshot-42feea7d.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const Snapshot = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('Snapshot', this);
+  }
+  render() {
+    return h(Host, null);
+  }
+};
+
+export { Snapshot as taro_snapshot_core };

package/dist/esm/taro-span-core.entry.js

@@ -1,4 +1,17 @@
-export { S as taro_span_core } from './span-d4b171da.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const Span = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('Span', this);
+  }
+  render() {
+    return h(Host, null);
+  }
+};
+
+export { Span as taro_span_core };

package/dist/esm/taro-sticky-header-core.entry.js

@@ -1,4 +1,17 @@
-export { S as taro_sticky_header_core } from './sticky-header-a99729bc.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const StickyHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('StickyHeader', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+
+export { StickyHeader as taro_sticky_header_core };

package/dist/esm/taro-sticky-section-core.entry.js

@@ -1,4 +1,17 @@
-export { S as taro_sticky_section_core } from './sticky-section-f8d75284.js';
-import './index-0004ce39.js';
-import './helper-8a85bb65.js';
+import { r as registerInstance, h, H as Host } from './index-0004ce39.js';
+import { n as notSupport } from './helper-8a85bb65.js';
 import '@tarojs/taro';
+
+const StickySection = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentDidLoad() {
+    notSupport('StickySection', this);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+
+export { StickySection as taro_sticky_section_core };