修复number组件;优化button,input组件

src/form/button.wc

@@ -115,6 +115,7 @@
 }
 :host([circle]) {
   min-width: 36px;
+  width: 36px;
   border-radius: 50%;
   button {
     padding: 0;

src/form/input.wc

@@ -339,6 +339,7 @@ export default class Input {
   }
 
   state = {
+    list: [], // 补全列表
     mvidx: null //下拉列表光标的索引ID
   }
 
@@ -406,7 +407,7 @@ export default class Input {
 
   // 移动光标选择下拉选项
   _moveSelect(ev) {
-    var { list } = this.props
+    var { list } = this.state
     if (list && list.length) {
       ev.preventDefault()
       var step = ev.keyCode === 38 ? -1 : 1
@@ -436,7 +437,7 @@ export default class Input {
 
   // 触发列表选择
   _fetchSelect(idx, ev) {
-    var item = this.props.list[idx]
+    var item = this.state.list[idx]
     this.value = item.value
     this.dispatchEvent(
       new CustomEvent('select', {
@@ -471,7 +472,8 @@ export default class Input {
 
     // 键盘事件
     this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
-      let { passwd } = this.props
+      let { passwd, minlength } = this.props
+      let val = this.value
       let now = Date.now()
 
       if (this.disabled || this.readOnly) {
@@ -497,6 +499,13 @@ export default class Input {
           return
         }
 
+        // 长度不够,拦截submit
+        if (minlength && minlength > 0) {
+          if (val.length < minlength) {
+            return
+          }
+        }
+
         this.stamp = now
         this.dispatchEvent(new CustomEvent('submit', { detail: this.value }))
       }
@@ -524,7 +533,7 @@ export default class Input {
           detail: {
             value: this.value,
             send: list => {
-              this.props.list = list
+              this.state.list = list
               this._parseSuggestion()
             }
           }
@@ -534,7 +543,7 @@ export default class Input {
 
     // 渲染建议列表
     this._parseSuggestion = $.bind(this.__INPUT__, 'click', ev => {
-      var { list } = this.props
+      var { list } = this.state
       let { x, y, width, height } = this.getBoundingClientRect()
       if (list && list.length) {
         var html = list
@@ -566,6 +575,7 @@ export default class Input {
   unmount() {
     $.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
     $.unbind(this.__INPUT__, 'input', this._handleChange)
+    $.unbind(this.__INPUT__, 'click', this._parseSuggestion)
     $.unbind(this.__LIST__, 'click', this._handleSelect)
     $.clearOutside(this._inactiveFn)
   }

src/form/number.wc

@@ -27,7 +27,7 @@
   margin: 0 auto;
   line-height: 1;
   font-size: 14px;
-  border: 2px solid var(--color-plain-2);
+  border: 2px solid var(--color-grey-2);
   border-radius: inherit;
   background: var(--bg-color, #fff);
   color: inherit;
@@ -44,11 +44,11 @@
 
     &:first-child {
       border-radius: 4px 0 0 4px;
-      border-right: 2px solid var(--color-plain-1);
+      border-right: 2px solid var(--color-grey-a);
     }
     &:last-child {
       border-radius: 0 4px 4px 0;
-      border-left: 2px solid var(--color-plain-1);
+      border-left: 2px solid var(--color-grey-a);
     }
 
     &.disabled {
@@ -158,14 +158,11 @@
 }
 //
 :host(:focus-within) {
-  box-shadow: 0 0 0 2px var(--color-plain-a);
+  box-shadow: 0 0 0 2px var(--color-grey-a);
 }
 :host([type='primary']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-teal-a);
 }
-:host([type='default']:focus-within) {
-  box-shadow: 0 0 0 2px var(--color-grey-a);
-}
 :host([type='info']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-blue-a);
 }
@@ -178,21 +175,12 @@
 :host([type='warning']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-orange-a);
 }
-:host([type='inverse']:focus-within) {
-  box-shadow: 0 0 0 2px var(--color-dark-a);
-}
 :host([type='primary']) .label {
   border-color: var(--color-teal-2);
   span {
     border-color: var(--color-teal-a);
   }
 }
-:host([type='default']) .label {
-  border-color: var(--color-grey-2);
-  span {
-    border-color: var(--color-grey-a);
-  }
-}
 :host([type='info']) .label {
   border-color: var(--color-blue-2);
   span {
@@ -217,17 +205,9 @@
     border-color: var(--color-orange-a);
   }
 }
-:host([type='inverse']) .label {
-  border-color: var(--color-dark-2);
-  span {
-    border-color: var(--color-dark-a);
-  }
-}
 </style>
 
 <script>
-import '../scroll/index'
-import '../icon/index'
 import $ from '../utils'
 
 export default class Number {
@@ -305,6 +285,7 @@ export default class Number {
     this.__INPUT__.value = val
 
     this._checkActionEnable()
+    this.dispatchEvent(new CustomEvent('input'))
   }
 
   _checkActionEnable() {
@@ -326,7 +307,6 @@ export default class Number {
     if (n !== value) {
       this.props.value = n
       this.__INPUT__.value = n
-      this.dispatchEvent(new CustomEvent('input'))
     }
   }
 
@@ -372,34 +352,28 @@ export default class Number {
       }
     })
 
-    this._handleChange = $.catch(this.__INPUT__, 'change', ev => {
+    this._handleChange = $.bind(this.__INPUT__, 'change', ev => {
       if (isFinite(this.__INPUT__.value)) {
-        this.props.value = +this.__INPUT__.value
+        this.value = this.__INPUT__.value
-        if (!this.__INPUT__.value.endsWith('.')) {
-          this.__INPUT__.value = this.props.value
-        }
       } else {
-        this.__INPUT__.value = this.props.value = 0
+        this.value = 0
       }
-      this.dispatchEvent(new CustomEvent('input'))
     })
 
     this._handleAction = $.bind(this.__OUTER__, 'click', ev => {
       if (this.disabled || this.readOnly) {
         return
       }
-      var target = ev.target
 
-      if (target.tagName === 'SPAN' || target.parentNode === 'SPAN') {
+      if (ev.target.tagName === 'SPAN') {
-        var act = target.dataset.act || target.parentNode.dataset.act
+        this._updateValue(ev.target.dataset.act)
-
-        this._updateValue(act)
       }
     })
   }
 
   unmount() {
     $.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
+    $.unbind(this.__OUTER__, 'click', this._handleAction)
   }
 
   watch() {