@tarojs/components 3.4.5 → 3.5.0-alpha.0

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

@@ -1,63 +1,63 @@
 taro-button-core {
-  position: relative;
   display: block;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
   padding-left: 14px;
   padding-right: 14px;
-  box-sizing: border-box;
-  font-size: 18px;
-  text-align: center;
-  text-decoration: none;
-  color: #000000;
-  background-color: #F8F8F8;
-  line-height: 2.55555556;
+  border-width: 0;
   border-radius: 5px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  overflow: hidden;
   width: 100%;
-  border-width: 0;
+  appearance: none;
   outline: 0;
-  -webkit-appearance: none;
-}
-taro-button-core:not([disabled]):active {
-  color: rgba(0, 0, 0, 0.6);
-  background-color: #DEDEDE;
+  background-color: #f8f8f8;
+  line-height: 2.55555556;
+  text-decoration: none;
+  text-align: center;
+  font-size: 18px;
+  color: #000;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 taro-button-core:focus {
   outline: 0;
 }
-taro-button-core:after {
-  content: " ";
-  width: 200%;
-  height: 200%;
+taro-button-core:not([disabled]):active {
+  background-color: #dedede;
+  color: rgba(0, 0, 0, 0.6);
+}
+taro-button-core::after {
   position: absolute;
-  top: 0;
   left: 0;
+  top: 0;
+  box-sizing: border-box;
   border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  width: 200%;
+  height: 200%;
+  content: " ";
   transform: scale(0.5);
   transform-origin: 0 0;
-  box-sizing: border-box;
-  border-radius: 10px;
 }
 taro-button-core + taro-button-core {
   margin-top: 15px;
 }
 taro-button-core[type=default] {
-  color: #000000;
-  background-color: #F8F8F8;
+  background-color: #f8f8f8;
+  color: #000;
 }
 taro-button-core[type=default]:not([disabled]):visited {
-  color: #000000;
+  color: #000;
 }
 taro-button-core[type=default]:not([disabled]):active {
+  background-color: #dedede;
   color: rgba(0, 0, 0, 0.6);
-  background-color: #DEDEDE;
 }
 taro-button-core[size=mini] {
-  width: auto;
   display: inline-block;
   padding: 0 1.32em;
+  width: auto;
   line-height: 2.3;
   font-size: 13px;
 }
@@ -69,14 +69,14 @@ taro-button-core[disabled] {
   color: rgba(255, 255, 255, 0.6);
 }
 taro-button-core[disabled][type=default] {
+  background-color: #f7f7f7;
   color: rgba(0, 0, 0, 0.3);
-  background-color: #F7F7F7;
 }
 taro-button-core[disabled][type=primary] {
-  background-color: #9ED99D;
+  background-color: #9ed99d;
 }
 taro-button-core[disabled][type=warn] {
-  background-color: #EC8B89;
+  background-color: #ec8b89;
 }
 taro-button-core[loading] .weui-loading {
   margin: -0.2em 0.34em 0 0;
@@ -85,64 +85,64 @@ taro-button-core[loading][type=primary], taro-button-core[loading][type=warn] {
   color: rgba(255, 255, 255, 0.6);
 }
 taro-button-core[loading][type=primary] {
-  background-color: #179B16;
+  background-color: #179b16;
 }
 taro-button-core[loading][type=warn] {
-  background-color: #CE3C39;
+  background-color: #ce3c39;
 }
 taro-button-core[plain][type=primary] {
-  color: #1aad19;
   border: 1px solid #1aad19;
+  color: #1aad19;
 }
 taro-button-core[plain][type=primary]:not([disabled]):active {
-  color: rgba(26, 173, 25, 0.6);
   border-color: rgba(26, 173, 25, 0.6);
   background-color: transparent;
+  color: rgba(26, 173, 25, 0.6);
 }
-taro-button-core[plain][type=primary]:after {
+taro-button-core[plain][type=primary]::after {
   border-width: 0;
 }
 taro-button-core[plain], taro-button-core[plain][type=default] {
-  color: #353535;
   border: 1px solid #353535;
+  color: #353535;
 }
 taro-button-core[plain]:not([disabled]):active, taro-button-core[plain][type=default]:not([disabled]):active {
-  color: rgba(53, 53, 53, 0.6);
   border-color: rgba(53, 53, 53, 0.6);
   background-color: transparent;
+  color: rgba(53, 53, 53, 0.6);
 }
-taro-button-core[plain]:after, taro-button-core[plain][type=default]:after {
+taro-button-core[plain]::after, taro-button-core[plain][type=default]::after {
   border-width: 0;
 }
 taro-button-core[type=primary] {
+  background-color: #1aad19;
   color: #fff;
-  background-color: #1AAD19;
 }
 taro-button-core[type=primary]:not([disabled]):visited {
-  color: #FFFFFF;
+  color: #fff;
 }
 taro-button-core[type=primary]:not([disabled]):active {
+  background-color: #179b16;
   color: rgba(255, 255, 255, 0.6);
-  background-color: #179B16;
 }
 taro-button-core[type=warn] {
+  background-color: #e64340;
   color: #fff;
-  background-color: #E64340;
 }
 taro-button-core[type=warn]:not([disabled]):visited {
-  color: #FFFFFF;
+  color: #fff;
 }
 taro-button-core[type=warn]:not([disabled]):active {
+  background-color: #ce3c39;
   color: rgba(255, 255, 255, 0.6);
-  background-color: #CE3C39;
 }
 taro-button-core[plain][disabled] {
-  color: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(0, 0, 0, 0.2);
-  background-color: #F7F7F7;
+  background-color: #f7f7f7;
+  color: rgba(0, 0, 0, 0.3);
 }
 taro-button-core[plain][disabled][type=primary] {
-  color: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(0, 0, 0, 0.2);
-  background-color: #F7F7F7;
+  background-color: #f7f7f7;
+  color: rgba(0, 0, 0, 0.3);
 }

package/dist/collection/components/canvas/canvas.js

@@ -25,7 +25,7 @@ export class Canvas {
   }
   static get is() { return "taro-canvas-core"; }
   static get originalStyleUrls() { return {
-    "$": ["./style/index.css"]
+    "$": ["./style/index.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["./style/index.css"]

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

@@ -1,6 +1,6 @@
-taro-canvas-core {
-  position: relative;
-  display: block;
-  width: 300px;
-  height: 150px;
-}
+taro-canvas-core {
+  display: block;
+  position: relative;
+  width: 300px;
+  height: 150px;
+}

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

@@ -1,41 +1,40 @@
 @charset "UTF-8";
 .taro-checkbox {
-  position: relative;
   display: inline-block;
+  position: relative;
 }
 .taro-checkbox_checked {
   display: inline-block;
-  min-height: 0;
-  -webkit-appearance: none;
-  appearance: none;
-  outline: 0;
-  font-size: 23px;
+  position: relative;
+  top: 5px;
   border: 1px solid #d1d1d1;
-  background-color: #ffffff;
   border-radius: 3px;
-  color: #1AAD19;
   width: 23px;
   height: 23px;
-  position: relative;
+  min-height: 0;
+  appearance: none;
+  outline: 0;
+  background-color: #fff;
   vertical-align: 0;
-  top: 5px;
+  font-size: 23px;
+  color: #1aad19;
 }
 .taro-checkbox_checked:checked::before {
-  font-family: "weui";
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  text-align: center;
-  speak: none;
   display: inline-block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
   vertical-align: middle;
   text-decoration: inherit;
-  content: "";
-  color: inherit;
+  text-align: center;
+  text-transform: none;
+  font-family: weui;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
   font-size: inherit;
-  position: absolute;
-  top: 50%;
-  left: 50%;
+  color: inherit;
+  content: "";
   transform: translate(-50%, -48%) scale(0.73);
+  speak: none;
 }

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

@@ -6,9 +6,9 @@ taro-image-core {
   display: inline-block;
   overflow: hidden;
   position: relative;
-  font-size: 0;
   width: auto;
   height: auto;
+  font-size: 0;
 }
 
 .taro-img.taro-img__widthfix {
@@ -24,8 +24,8 @@ taro-image-core {
 }
 .taro-img__mode-aspectfill {
   position: absolute;
-  top: 50%;
   left: 50%;
+  top: 50%;
   transform: translate(-50%, -50%);
 }
 .taro-img__mode-aspectfill--width {
@@ -46,17 +46,17 @@ taro-image-core {
   width: 100%;
 }
 .taro-img__mode-bottom {
-  width: 100%;
   position: absolute;
   bottom: 0;
+  width: 100%;
 }
 .taro-img__mode-left {
   height: 100%;
 }
 .taro-img__mode-right {
   position: absolute;
-  height: 100%;
   right: 0;
+  height: 100%;
 }
 .taro-img__mode-topright {
   position: absolute;

package/dist/collection/components/input/index.css

@@ -4,9 +4,9 @@ taro-input-core {
 
 input {
   display: block;
+  overflow: hidden;
   height: 1.4rem;
-  text-align: inherit;
   text-overflow: clip;
-  overflow: hidden;
+  text-align: inherit;
   white-space: nowrap;
 }

package/dist/collection/components/navigator/navigator.js

@@ -79,10 +79,10 @@ export class Navigator {
   }
   static get is() { return "taro-navigator-core"; }
   static get originalStyleUrls() { return {
-    "$": ["navigator.css"]
+    "$": ["./style/index.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["navigator.css"]
+    "$": ["./style/index.css"]
   }; }
   static get properties() { return {
     "hoverClass": {

package/dist/collection/components/navigator/{navigator.css → style/index.css}

@@ -1,3 +1,3 @@
-.navigator-hover {
-  background: #efefef;
-}
+.navigator-hover {
+  background: #efefef;
+}

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

@@ -1,3 +1,4 @@
-.weui-picker, .weui-picker__hd {
+.weui-picker,
+.weui-picker__hd {
   font-size: 12px;
 }

package/dist/collection/components/picker-view/picker-view-column.js

@@ -1,11 +1,225 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, Host } from '@stencil/core';
+import { Component, h, Host, Listen, Element, Event, Prop, State } from '@stencil/core';
+import { debounce } from '../../utils';
 export class PickerViewColumn {
-  componentDidLoad() {
-    console.error('H5 暂不支持 PickerViewColumn 组件！');
+  constructor() {
+    // 初始化的选中位置
+    this.initialPosition = '0';
+    // 滑动距离上下留白区域-通过父视图和 indicator 计算而来
+    this.paddingVertical = 0;
+    this.isInit = false;
+    this.isMove = false;
+    // 滚动结束自动回到合适的位置
+    this.handleSelected = debounce(() => {
+      const childList = this.el.childNodes;
+      let sum = 0;
+      let selectedIndex = '0';
+      for (const index in childList) {
+        const item = childList[index];
+        const itemHeight = item.offsetHeight;
+        if (sum + itemHeight / 2.0 > this.el.scrollTop) {
+          selectedIndex = index;
+          break;
+        }
+        sum += itemHeight;
+      }
+      this.el.scrollTo({
+        top: sum,
+        behavior: 'smooth'
+      });
+      this.onChange.emit({
+        curIndex: this.col,
+        selectedIndex: selectedIndex
+      });
+      this.onSelectEnd.emit();
+    }, 500);
+  }
+  onScroll(_event) {
+    if (!this.isMove) {
+      this.isMove = true;
+      this.onSelectStart.emit();
+    }
+    this.handleSelected();
+  }
+  onMouseEnd() {
+    if (!this.isMove)
+      return;
+    this.isMove = false;
+    this.handleSelected();
+  }
+  onTouchEnd() {
+    this.isMove = false;
+    this.handleSelected();
+  }
+  componentDidUpdate() {
+    if (!this.isInit) {
+      this.isInit = true;
+      const childList = this.el.childNodes;
+      let idx = 0;
+      let sum = 0;
+      for (const index in childList) {
+        const item = childList[index];
+        if (this.initialPosition === index || !item || typeof item.offsetHeight !== 'number') {
+          break;
+        }
+        sum += item.offsetHeight;
+        idx++;
+      }
+      this.el.scrollTo({ top: sum });
+      if (idx >= childList.length) {
+        this.onChange.emit({
+          curIndex: this.col,
+          selectedIndex: idx - 1
+        });
+      }
+    }
   }
   render() {
-    return (h(Host, null));
+    const { paddingVertical = 0 } = this;
+    return (h(Host, { class: "taro-picker-view-column-container", style: { 'padding-top': `${paddingVertical}px`, 'padding-bottom': `${paddingVertical}px` } }));
   }
   static get is() { return "taro-picker-view-column-core"; }
+  static get originalStyleUrls() { return {
+    "$": ["./style/column.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["./style/column.css"]
+  }; }
+  static get properties() { return {
+    "col": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "col",
+      "reflect": false
+    },
+    "initialPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "initial-position",
+      "reflect": false,
+      "defaultValue": "'0'"
+    },
+    "paddingVertical": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "padding-vertical",
+      "reflect": false,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "isInit": {},
+    "isMove": {}
+  }; }
+  static get events() { return [{
+      "method": "onChange",
+      "name": "onselect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "onSelectStart",
+      "name": "onselectstart",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "onSelectEnd",
+      "name": "onselectend",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "scroll",
+      "method": "onScroll",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseup",
+      "method": "onMouseEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseout",
+      "method": "onMouseEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseleave",
+      "method": "onMouseEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "touchend",
+      "method": "onTouchEnd",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }]; }
 }