@tarojs/components 4.0.0-beta.1 → 4.0.0-beta.3

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

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const indexCss = "img[src=\"\"]{opacity:0}taro-image-core{display:inline-block;overflow:hidden;position:relative;width:320px;height:240px;font-size:0}.taro-img.taro-img__widthfix{height:100%}.taro-img__mode-scaletofill{width:100%;height:100%}.taro-img__mode-aspectfit{max-width:100%;max-height:100%}.taro-img__mode-aspectfill{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.taro-img__mode-aspectfill--width{min-width:100%;height:100%}.taro-img__mode-aspectfill--height{width:100%;min-height:100%}.taro-img__mode-widthfix{width:100%}.taro-img__mode-heightfix{height:100%}.taro-img__mode-top{width:100%}.taro-img__mode-bottom{position:absolute;bottom:0;width:100%}.taro-img__mode-left{height:100%}.taro-img__mode-right{position:absolute;right:0;height:100%}.taro-img__mode-topright{position:absolute;right:0}.taro-img__mode-bottomleft{position:absolute;bottom:0}.taro-img__mode-bottomright{position:absolute;right:0;bottom:0}";
+const indexCss = "img[src=\"\"]{opacity:0}taro-image-core{width:320px;height:240px;font-size:0;display:inline-block;position:relative;overflow:hidden}.taro-img.taro-img__widthfix{height:100%}.taro-img__mode-scaletofill{width:100%;height:100%}.taro-img__mode-aspectfit{max-width:100%;max-height:100%}.taro-img__mode-aspectfill{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.taro-img__mode-aspectfill--width{min-width:100%;height:100%}.taro-img__mode-aspectfill--height{width:100%;min-height:100%}.taro-img__mode-widthfix{width:100%}.taro-img__mode-heightfix{height:100%}.taro-img__mode-top{width:100%}.taro-img__mode-bottom{width:100%;position:absolute;bottom:0}.taro-img__mode-left{height:100%}.taro-img__mode-right{height:100%;position:absolute;right:0}.taro-img__mode-topright{position:absolute;right:0}.taro-img__mode-bottomleft{position:absolute;bottom:0}.taro-img__mode-bottomright{position:absolute;bottom:0;right:0}";
 
-import('./intersection-observer.js');
 const Image = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -43,14 +42,16 @@ const Image = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.onError.emit(e);
   }
   render() {
-    const { src, mode = 'scaleToFill', lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps, didLoad } = this;
+    const { src, lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps, didLoad } = this;
+    // mode="" 按默认值处理
+    const mode = this.mode || 'scaleToFill';
     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 }, 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))));
+    return (h(Host, { class: cls }, src ? (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 style() { return indexCss; }
 }, [0, "taro-image-core", {

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const indexCss = "taro-input-core{display:block}input{display:block;overflow:hidden;height:1.4rem;text-overflow:clip;text-align:inherit;white-space:nowrap}";
+const indexCss = ".weui-input{-webkit-appearance:none;font-size:inherit;color:inherit;background-color:transparent;border:0;outline:0;width:100%;height:1.47059em;line-height:1.47059}.weui-input::-webkit-outer-spin-button,.weui-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}taro-input-core{display:block}input{text-overflow:clip;text-align:inherit;white-space:nowrap;height:1.4rem;display:block;overflow:hidden}";
 
 function getTrueType(type, confirmType, password) {
   if (confirmType === 'search')

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const areaCss = "taro-movable-area-core{display:block;position:relative;width:10px;height:10px}";
+const areaCss = "taro-movable-area-core{width:10px;height:10px;display:block;position:relative}";
 
 const MovableArea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const viewCss = "taro-movable-view-core{display:inline-block;position:absolute;left:0;top:0;width:10px;height:10px}";
+const viewCss = "taro-movable-view-core{width:10px;height:10px;display:inline-block;position:absolute;top:0;left:0}";
 
 const MovableView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -145,7 +145,7 @@ function getDayRange(start, end, year, month) {
   return getDateRange(rangeStart, rangeEnd);
 }
 
-const indexCss = ".weui-picker,.weui-picker__hd{font-size:12px}";
+const indexCss = ".weui-mask{z-index:1000;background:rgba(0,0,0,.6);position:fixed;inset:0}.weui-mask_transparent{z-index:1000;position:fixed;inset:0}@-webkit-keyframes weuiSlideUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes weuiSlideUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translate(0,0);transform:translate(0,0)}}.weui-animate-slide-up{-webkit-animation:.3s forwards weuiSlideUp;animation:.3s forwards weuiSlideUp}@-webkit-keyframes weuiSlideDown{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes weuiSlideDown{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.weui-animate-slide-down{-webkit-animation:.3s forwards weuiSlideDown;animation:.3s forwards weuiSlideDown}@-webkit-keyframes weuiFadeIn{0%{opacity:0}to{opacity:1}}@keyframes weuiFadeIn{0%{opacity:0}to{opacity:1}}.weui-animate-fade-in{-webkit-animation:.3s forwards weuiFadeIn;animation:.3s forwards weuiFadeIn}@-webkit-keyframes weuiFadeOut{0%{opacity:1}to{opacity:0}}@keyframes weuiFadeOut{0%{opacity:1}to{opacity:0}}.weui-animate-fade-out{-webkit-animation:.3s forwards weuiFadeOut;animation:.3s forwards weuiFadeOut}.weui-picker{-webkit-box-sizing:border-box;box-sizing:border-box;z-index:5000;background-color:var(--weui-BG-2);padding-left:0;padding-left:constant(safe-area-inset-left);padding-left:env(safe-area-inset-left);padding-right:0;padding-right:constant(safe-area-inset-right);padding-right:env(safe-area-inset-right);-webkit-backface-visibility:hidden;backface-visibility:hidden;width:100%;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;position:fixed;bottom:0;left:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.weui-picker__hd{text-align:center;background-color:#fff;padding:9px 15px;font-size:17px;display:-ms-flexbox;display:flex;position:relative}.weui-picker__hd:after{content:\" \";color:#e5e5e5;-webkit-transform-origin:0 100%;transform-origin:0 100%;border-bottom:1px solid #e5e5e5;height:1px;position:absolute;bottom:0;left:0;right:0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-picker__action{color:#1aad19;-ms-flex:1;flex:1;display:block}.weui-picker__action:first-child{text-align:left;color:#888}.weui-picker__action:last-child{text-align:right}.weui-picker__bd{background-color:#fff;height:238px;display:-ms-flexbox;display:flex;position:relative;overflow:hidden}.weui-picker__group{-ms-flex:1;flex:1;height:100%;position:relative}.weui-picker__mask{z-index:3;background-color:transparent;background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,.95)),to(rgba(255,255,255,.6))),-webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,.6)),to(rgba(255,255,255,.95)));background-image:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.6)),linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.95));background-position:top,bottom;background-repeat:no-repeat;background-size:100% 102px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;width:100%;height:100%;margin:0 auto;position:absolute;top:0;left:0;-webkit-transform:translateZ(0);transform:translateZ(0)}.weui-picker__indicator{z-index:3;width:100%;height:34px;position:absolute;top:102px;left:0}.weui-picker__indicator:before{content:\" \";color:#e5e5e5;-webkit-transform-origin:0 0;transform-origin:0 0;border-top:1px solid #e5e5e5;height:1px;position:absolute;top:0;left:0;right:0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-picker__indicator:after{content:\" \";color:#e5e5e5;-webkit-transform-origin:0 100%;transform-origin:0 100%;border-bottom:1px solid #e5e5e5;height:1px;position:absolute;bottom:0;left:0;right:0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui-picker__content{width:100%;position:absolute;top:0;left:0}.weui-picker__item{text-align:center;color:#000;text-overflow:ellipsis;white-space:nowrap;height:34px;padding:0;line-height:34px;overflow:hidden}.weui-picker__item_disabled{color:#999}.weui-picker,.weui-picker__hd{font-size:12px}";
 
 const Picker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as debounce } from './index3.js';
 
-const columnCss = ".taro-picker-view-column-container{display:-ms-flexbox;display:flex;overflow:scroll;overflow-x:hidden;position:relative;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;text-align:center}.taro-picker-view-column-container::-webkit-scrollbar{display:none}";
+const columnCss = ".taro-picker-view-column-container{text-align:center;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;position:relative;overflow:hidden scroll}.taro-picker-view-column-container::-webkit-scrollbar{display:none}";
 
 const PickerViewColumn = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -12,7 +12,7 @@ function convertStyle(style) {
   }
 }
 
-const indexCss = ".taro-picker-view-container{display:-ms-flexbox;display:flex;position:relative}.taro-picker-view-mask-container{display:-ms-flexbox;display:flex;position:absolute;left:0;right:0;top:0;bottom:0;-ms-flex-direction:column;flex-direction:column;pointer-events:none}.taro-picker-view-mask-indicator{display:-ms-flexbox;display:flex;border-top:1px solid #ddd;border-bottom:1px solid #ddd;height:50px}.taro-picker-view-mask-top{-ms-flex:1;flex:1;background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.6)));background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6))}.taro-picker-view-mask-bottom{-ms-flex:1;flex:1;background:-webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.6)));background:linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6))}";
+const indexCss = ".taro-picker-view-container{display:-ms-flexbox;display:flex;position:relative}.taro-picker-view-mask-container{pointer-events:none;-ms-flex-direction:column;flex-direction:column;display:-ms-flexbox;display:flex;position:absolute;inset:0}.taro-picker-view-mask-indicator{border-top:1px solid #ddd;border-bottom:1px solid #ddd;height:50px;display:-ms-flexbox;display:flex}.taro-picker-view-mask-top{background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,.95)),to(rgba(255,255,255,.6)));background-image:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.6));-ms-flex:1;flex:1}.taro-picker-view-mask-bottom{background:-webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,.6)),to(rgba(255,255,255,.95)));background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.95));-ms-flex:1;flex:1}";
 
 const PickerView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1,5 +1,7 @@
 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 Progress = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -30,6 +32,7 @@ const Progress = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     return (h(Host, { class: 'weui-progress' }, h("div", { class: 'weui-progress__bar', style: pgHeight }, h("div", { class: 'weui-progress__inner-bar', style: pgWidth })), showInfo && (h("div", { class: 'weui-progress__opr', style: { 'font-size': `${fontSize}px` } }, h("span", null, pgPercent, "%")))));
   }
+  static get style() { return indexCss; }
 }, [0, "taro-progress-core", {
     "percent": [2],
     "showInfo": [4, "show-info"],

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import Taro from '@tarojs/taro';
 import { c as classnames } from './index2.js';
 
-const indexCss = ".rmc-pull-to-refresh-content{-webkit-transform-origin:left top 0;transform-origin:left top 0}.rmc-pull-to-refresh-content-wrapper{min-height:100%}.rmc-pull-to-refresh-transition{-webkit-transition:-webkit-transform 0.3s;transition:-webkit-transform 0.3s;transition:transform 0.3s;transition:transform 0.3s, -webkit-transform 0.3s}@-webkit-keyframes rmc-pull-to-refresh-indicator{50%{opacity:0.2}100%{opacity:1}}@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;-webkit-animation:rmc-pull-to-refresh-indicator 0.5s 0s infinite linear;animation:rmc-pull-to-refresh-indicator 0.5s 0s infinite linear;-webkit-animation-fill-mode:both;animation-fill-mode:both}.rmc-pull-to-refresh-indicator>div:nth-child(0){-webkit-animation-delay:-0.1s !important;animation-delay:-0.1s !important}.rmc-pull-to-refresh-indicator>div:nth-child(1){-webkit-animation-delay:-0.2s !important;animation-delay:-0.2s !important}.rmc-pull-to-refresh-indicator>div:nth-child(2){-webkit-animation-delay:-0.3s !important;animation-delay:-0.3s !important}.rmc-pull-to-refresh-down .rmc-pull-to-refresh-indicator{margin-top:-25px}";
+const indexCss = ".rmc-pull-to-refresh-content{-webkit-transform-origin:0 0;transform-origin:0 0}.rmc-pull-to-refresh-content-wrapper{min-height:100%}.rmc-pull-to-refresh-transition{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s}@-webkit-keyframes rmc-pull-to-refresh-indicator{50%{opacity:.2}to{opacity:1}}@keyframes rmc-pull-to-refresh-indicator{50%{opacity:.2}to{opacity:1}}.rmc-pull-to-refresh-indicator{text-align:center;height:30px;line-height:10px}.rmc-pull-to-refresh-indicator>div{background-color:gray;border-radius:100%;width:6px;height:6px;margin:3px;-webkit-animation:.5s linear infinite both rmc-pull-to-refresh-indicator;animation:.5s linear infinite both rmc-pull-to-refresh-indicator;display:inline-block}.rmc-pull-to-refresh-indicator>div:nth-child(0){-webkit-animation-delay:-.1s!important;animation-delay:-.1s!important}.rmc-pull-to-refresh-indicator>div:first-child{-webkit-animation-delay:-.2s!important;animation-delay:-.2s!important}.rmc-pull-to-refresh-indicator>div:nth-child(2){-webkit-animation-delay:-.3s!important;animation-delay:-.3s!important}.rmc-pull-to-refresh-down .rmc-pull-to-refresh-indicator{margin-top:-25px}";
 
 function setTransform(nodeStyle, value) {
   nodeStyle.transform = value;

package/dist/components/taro-rich-text-core.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const indexCss = "taro-rich-text-core{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}taro-rich-text-core[selectable=true],taro-rich-text-core[user-select=true]{display:block;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}taro-rich-text-core[space]{white-space:pre-wrap}taro-rich-text-core[space=ensp]{word-spacing:0.5em}taro-rich-text-core[space=nbsp]{word-spacing:1em}";
+const indexCss = "taro-rich-text-core{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}taro-rich-text-core[selectable=true],taro-rich-text-core[user-select=true]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -3,7 +3,7 @@ import { c as classnames } from './index2.js';
 import { d as debounce } from './index3.js';
 import { h as handleStencilNodes } from './helper.js';
 
-const indexCss = "taro-scroll-view-core{display:block;width:100%;-webkit-overflow-scrolling:auto}taro-scroll-view-core::-webkit-scrollbar{display:none}.taro-scroll-view__scroll-x{overflow-x:scroll;overflow-y:hidden}.taro-scroll-view__scroll-y{overflow-x:hidden;overflow-y:scroll}";
+const indexCss = "taro-scroll-view-core{-webkit-overflow-scrolling:auto;width:100%;display:block}taro-scroll-view-core::-webkit-scrollbar{display:none}.taro-scroll-view__scroll-x{overflow:scroll hidden}.taro-scroll-view__scroll-y{overflow:hidden scroll}";
 
 function easeOutScroll(from, to, duration = 500, callback) {
   if (from === to || typeof from !== 'number') {

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

@@ -1,5 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
+const indexCss = ".weui-slider{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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;-webkit-box-shadow:0 0 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.2)}.weui-slider-box{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.weui-slider-box .weui-slider{-ms-flex:1;flex:1}.weui-slider-box__value{color:#888;text-align:center;min-width:24px;margin-left:.5em;font-size:14px}";
+
 const Slider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -154,6 +156,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get watchers() { return {
     "value": ["function"]
   }; }
+  static get style() { return indexCss; }
 }, [0, "taro-slider-core", {
     "min": [2],
     "max": [2],