重构input组件;优化button,icon;优化编译脚本

build.dev.js

@@ -99,7 +99,7 @@ function mkWCFile({ style, html, js }) {
     .replace('unmount()', 'disconnectedCallback()')
     .replace(
       'watch() {',
-      'attributeChangedCallback(name, old, val) {\nif (val === null || old === val) {return}'
+      'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
     )
     .replace('adopted()', 'adoptedCallback()')
 

build.prod.js

@@ -114,7 +114,7 @@ function mkWCFile({ style, html, js }) {
     .replace('unmount()', 'disconnectedCallback()')
     .replace(
       'watch() {',
-      'attributeChangedCallback(name, old, val) {\nif (val === null || old === val) {return}'
+      'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
     )
     .replace('adopted()', 'adoptedCallback()')
 

src/css/reset-basic.css

@@ -17,62 +17,65 @@
  * 
  */
 
-
+* {margin: 0;padding: 0;vertical-align: baseline;box-sizing: border-box;}
-* {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
+::before, ::after {box-sizing: border-box;}
-::before,::after {box-sizing:border-box;}
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,content {display: block;}
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,content {display: block;}
-img {border:0;display:inline-block;}
+img {border: 0;display: inline-block;}
-ol, ul {list-style: none;}
+ol,ul {list-style: none;}
 blockquote, q {quotes: none;}
-blockquote::before, blockquote::after,
+blockquote::before, blockquote::after, q::before, q::after {content: '';content: none;}
-q::before, q::after {content: '';content: none;}
 table {border-collapse: collapse;border-spacing: 0;}
-a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;}
+a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline: none;}
-::-moz-focus-inner {
+::-moz-focus-inner {border: none;outline: none;}
-  border:none;outline:none;
-}
-body {font-family:"Helvetica Neue", Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
-code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
-[anot],[\:repeat],[\:if] {visibility:hidden;}
 
+body {font-family: 'Helvetica Neue', Arial, 'WenQuanYi Micro Hei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
+code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;}
+[anot],[\:repeat],[\:if] {visibility: hidden;}
 
 .noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
-.noselect img, .noselect a {-webkit-user-drag:none;}
+.noselect img, .noselect a {-webkit-user-drag: none;}
-.text-ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
+.text-ell {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
 .text-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
 
-
 :root {
   /* primary */
+  --color-teal-a: rgba(72, 201, 176, 0.5);
   --color-teal-1: rgb(72, 201, 176);
   --color-teal-2: rgb(26, 188, 156);
   --color-teal-3: rgb(22, 160, 133);
   /* sucess */
+  --color-green-a: rgba(88, 214, 141, 0.5);
   --color-green-1: rgb(88, 214, 141);
   --color-green-2: rgb(46, 204, 113);
   --color-green-3: rgb(39, 173, 96);
   /* info */
+  --color-blue-a: rgba(100, 181, 246, 0.5);
   --color-blue-1: rgb(100, 181, 246);
   --color-blue-2: rgb(66, 165, 245);
   --color-blue-3: rgb(33, 150, 243);
   /* danger */
+  --color-red-a: rgba(255, 107, 129, 0.5);
   --color-red-1: rgb(255, 107, 129);
   --color-red-2: rgb(255, 71, 87);
   --color-red-3: rgb(230, 52, 67);
   /* warning */
+  --color-orange-a: rgba(244, 211, 19, 0.5);
   --color-orange-1: rgb(244, 211, 19);
   --color-orange-2: rgb(241, 196, 15);
   --color-orange-3: rgb(205, 167, 13);
   /* default1 */
+  --color-plain-a: rgba(242, 245, 252, 0.5);
   --color-plain-1: rgb(242, 245, 252);
   --color-plain-2: rgb(232, 235, 244);
   --color-plain-3: rgb(218, 225, 233);
   /* default2 */
+  --color-grey-a: rgba(206, 214, 224, 0.5);
   --color-grey-1: rgb(206, 214, 224);
   --color-grey-2: rgb(164, 176, 190);
   --color-grey-3: rgb(134, 144, 155);
   /* inverse */
+  --color-dark-a: rgba(65, 91, 118, 0.5);
   --color-dark-1: rgb(65, 91, 118);
   --color-dark-2: rgb(52, 73, 94);
   --color-dark-3: rgb(44, 62, 80);

src/form/button.wc

@@ -146,7 +146,7 @@
   }
 }
 :host(:focus-within:not([link])) {
-  box-shadow: 0 0 0 2px rgba(242, 245, 252, 0.5);
+  box-shadow: 0 0 0 2px var(--color-plain-a);
 }
 
 // -------------
@@ -165,7 +165,7 @@
   }
 }
 :host([type='danger']:focus-within:not([link])) {
-  box-shadow: 0 0 0 2px rgba(255, 107, 129, 0.5);
+  box-shadow: 0 0 0 2px var(--color-red-a);
 }
 
 // -------------
@@ -184,7 +184,7 @@
   }
 }
 :host([type='info']:focus-within:not([link])) {
-  box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.5);
+  box-shadow: 0 0 0 2px var(--color-blue-a);
 }
 
 // --------
@@ -203,7 +203,7 @@
   }
 }
 :host([type='sucess']:focus-within:not([link])) {
-  box-shadow: 0 0 0 2px rgba(88, 214, 141, 0.5);
+  box-shadow: 0 0 0 2px var(--color-green-a);
 }
 
 // ---------
@@ -222,7 +222,7 @@
   }
 }
 :host([type='primary']:focus-within:not([link])) {
-  box-shadow: 0 0 0 2px rgba(72, 201, 176, 0.5);
+  box-shadow: 0 0 0 2px var(--color-teal-a);
 }
 
 // ----------
@@ -241,7 +241,7 @@
   }
 }
 :host([type='warning']:focus-within:not([link])) {
-  box-shadow: 0 0 0 2px rgba(244, 211, 19, 0.5);
+  box-shadow: 0 0 0 2px var(--color-orange-a);
 }
 
 // -------
@@ -260,7 +260,7 @@
   }
 }
 :host([type='inverse']:focus-within:not([link])) {
-  box-shadow: 0 0 0 2px rgba(65, 91, 118, 0.5);
+  box-shadow: 0 0 0 2px var(--color-dark-a);
 }
 
 // -------
@@ -279,7 +279,7 @@
   }
 }
 :host([type='default']:focus-within:not([link])) {
-  box-shadow: 0 0 0 2px rgba(206, 214, 224, 0.5);
+  box-shadow: 0 0 0 2px var(--color-grey-a);
 }
 
 :host([loading]),
@@ -423,7 +423,7 @@ export default class Button {
 
       case 'loading':
       case 'disabled':
-        this[name] = true
+        this[name] = val !== null
         break
     }
   }

src/form/input.wc

@@ -1,7 +1,7 @@
 <template>
   <div class="label">
     <slot class="prepend" name="prepend"></slot>
-    ${input}
+    <input spellcheck="false" />
     <wc-icon class="icon"></wc-icon>
     <slot class="append" name="append"></slot>
 
@@ -20,35 +20,35 @@ li {
 }
 :host {
   overflow: hidden;
-  display: inline-block;
+  display: inline-flex;
+  min-width: 128px;
   user-select: none;
   -moz-user-select: none;
   color: var(--color-dark-1);
-  border-radius: 2px;
+  border-radius: 6px;
   cursor: text;
+  transition: box-shadow 0.15s linear;
 }
 
 .label {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-width: 64px;
-  width: 100%;
   height: 32px;
   font-size: 14px;
-  border: 1px solid var(--color-plain-3);
+  border: 2px solid var(--color-plain-2);
   border-radius: inherit;
   background: var(--bg-color, #fff);
   color: inherit;
   cursor: inherit;
 
-  input,
+  input {
-  textarea {
     flex: 1;
     min-width: 32px;
     width: 0;
     height: 100%;
-    padding: 0 5px;
+    padding: 0 6px;
     border: 0;
     border-radius: inherit;
     color: inherit;
@@ -62,29 +62,26 @@ li {
       color: var(--color-grey-1);
     }
   }
-  textarea {
+
-    padding: 5px 8px;
-    resize: none;
-  }
   .prepend,
   .append {
     display: none;
     justify-content: center;
     align-items: center;
     width: auto;
-    height: 30px;
+    height: 28px;
     padding: 0 10px;
     line-height: 1;
     background: var(--bg-color, --color-plain-1);
     white-space: nowrap;
   }
   .prepend {
-    border-right: 1px solid var(--color-plain-3);
+    border-right: 2px solid var(--color-plain-a);
-    border-radius: 2px 0 0 2px;
+    border-radius: 6px 0 0 6px;
   }
   .append {
-    border-left: 1px solid var(--color-plain-3);
+    border-left: 2px solid var(--color-plain-a);
-    border-radius: 0 2px 2px 0;
+    border-radius: 0 6px 6px 0;
   }
   &[prepend] .prepend,
   &[append] .append {
@@ -96,9 +93,8 @@ li {
   }
   /* ----- */
   .icon {
-    --size: 20px;
+    --size: 18px;
-    padding: 0 5px;
+    margin: 0 8px 0 4px;
-    margin: 0 5px;
     color: var(--color-grey-2);
   }
 }
@@ -154,44 +150,6 @@ li {
   }
 }
 
-/* --- */
-:host([auto-border]) .label {
-  border-color: transparent;
-}
-:host([disabled]) {
-  cursor: not-allowed;
-
-  .label {
-    background: var(--color-plain-1);
-    opacity: 0.6;
-  }
-}
-:host([readonly]) {
-  cursor: default;
-}
-:host(:focus-within) {
-  @include focus1;
-  .label {
-    border-color: var(--color-plain-3);
-  }
-}
-:host(:focus-within[readonly]) {
-  @include focus2;
-}
-
-:host([type='textarea']) {
-  display: flex;
-  height: 80px;
-  .label {
-    width: 100%;
-    height: 100%;
-  }
-  .icon,
-  .suggestion {
-    display: none;
-  }
-}
-
 /* 额外样式 */
 :host([round]) {
   border-radius: 21px;
@@ -214,39 +172,147 @@ li {
 }
 
 :host([size='large']) {
+  min-width: 212px;
   .label {
-    height: 42px;
+    height: 52px;
-    font-size: 16px;
+    font-size: 18px;
+
+    input {
+      padding: 0 16px;
+    }
   }
   .prepend,
   .append {
-    height: 40px;
+    height: 48px;
+  }
+
+  .icon {
+    --size: 24px;
+    margin: 0 20px 0 4px;
   }
 }
-
 :host([size='medium']) {
+  min-width: 160px;
   .label {
     height: 36px;
+
+    input {
+      padding: 0 10px;
+    }
   }
   .prepend,
   .append {
-    height: 34px;
+    height: 32px;
   }
 }
 :host([size='mini']) {
+  min-width: 72px;
   .label {
-    height: 24px;
+    height: 26px;
     font-size: 12px;
   }
   .icon {
-    --size: 16px;
+    --size: 14px;
   }
   .prepend,
   .append {
-    height: 18px;
+    height: 22px;
   }
 }
 
+/* ----- 类型(颜色) ----- */
+:host(:focus-within) {
+  box-shadow: 0 0 0 2px var(--color-plain-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);
+}
+:host([type='success']:focus-within) {
+  box-shadow: 0 0 0 2px var(--color-green-a);
+}
+:host([type='danger']:focus-within) {
+  box-shadow: 0 0 0 2px var(--color-red-a);
+}
+: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);
+  .prepend,
+  .append {
+    border-color: var(--color-teal-a);
+  }
+}
+:host([type='default']) .label {
+  border-color: var(--color-grey-2);
+  .prepend,
+  .append {
+    border-color: var(--color-grey-a);
+  }
+}
+:host([type='info']) .label {
+  border-color: var(--color-blue-2);
+  .prepend,
+  .append {
+    border-color: var(--color-blue-a);
+  }
+}
+:host([type='success']) .label {
+  border-color: var(--color-green-2);
+  .prepend,
+  .append {
+    border-color: var(--color-green-a);
+  }
+}
+:host([type='danger']) .label {
+  border-color: var(--color-red-2);
+  .prepend,
+  .append {
+    border-color: var(--color-red-a);
+  }
+}
+:host([type='warning']) .label {
+  border-color: var(--color-orange-2);
+  .prepend,
+  .append {
+    border-color: var(--color-orange-a);
+  }
+}
+:host([type='inverse']) .label {
+  border-color: var(--color-dark-2);
+  .prepend,
+  .append {
+    border-color: var(--color-dark-a);
+  }
+}
+
+/* --- */
+:host([auto-border]) .label {
+  border-color: transparent;
+}
+:host([disabled]) {
+  cursor: not-allowed;
+
+  .label {
+    border-color: var(--color-grey-1);
+    background: var(--color-plain-1);
+    opacity: 0.6;
+  }
+}
+:host([readonly]) {
+  cursor: default;
+}
+
 :host([no-border]),
 :host(:focus-within[no-border]) {
   box-shadow: none;
@@ -266,23 +332,17 @@ import '../scroll/index'
 import '../icon/index'
 import $ from '../utils'
 
-const TYPES = ['text', 'textarea', 'password']
-const INPUTS = {
-  text: '<input spellcheck="false">',
-  textarea: '<textarea spellcheck="false"></textarea>'
-}
-
 export default class Input {
   props = {
     value: '',
     icon: '',
-    type: 'text',
     placeholder: '',
     maxlength: null,
     minlength: null,
     autofocus: false,
     readonly: false,
-    disabled: false
+    disabled: false,
+    passwd: false
   }
 
   state = {
@@ -290,19 +350,8 @@ export default class Input {
   }
 
   __init__() {
-    var type = this.getAttribute('type')
-    var input = ''
-
-    if (type !== 'textarea') {
-      type = 'text'
-    }
-
-    input = INPUTS[type]
-
     /* render */
 
-    this.props.type = type
-
     this.__OUTER__ = this.root.children[1]
     this.__PREPEND__ = this.__OUTER__.children[0]
     this.__INPUT__ = this.__OUTER__.children[1]
@@ -362,16 +411,6 @@ export default class Input {
     this.__INPUT__.value = val
   }
 
-  get type() {
-    return this.__INPUT__.type
-  }
-
-  set type(val) {
-    if (val !== 'textarea') {
-      this.__INPUT__.type = val
-    }
-  }
-
   // 移动光标选择下拉选项
   _moveSelect(ev) {
     var { list } = this.props
@@ -434,7 +473,7 @@ export default class Input {
   mounted() {
     var prepend = this.__PREPEND__.assignedNodes()
     var append = this.__APPEND__.assignedNodes()
-    var { type } = this.props
+    var { passwd } = this.props
 
     // 相同插槽, 只允许1个
     while (prepend.length > 1) {
@@ -444,10 +483,10 @@ export default class Input {
       this.removeChild(append.pop())
     }
 
-    if (prepend.length && type !== 'textarea') {
+    if (prepend.length) {
       this.__OUTER__.setAttribute('prepend', '')
     }
-    if (append.length && type !== 'textarea') {
+    if (append.length) {
       this.__OUTER__.setAttribute('append', '')
     }
 
@@ -461,7 +500,7 @@ export default class Input {
       // up: 38, down: 40
       if (ev.keyCode === 38 || ev.keyCode === 40) {
         // 仅普通文本表单, 密码和多行文本框不做响应
-        if (type === 'text') {
+        if (!passwd) {
           return this._moveSelect(ev)
         }
       }
@@ -469,72 +508,58 @@ export default class Input {
       // textarea 要按Ctrl Or Cmd键, 才会触发
       if (ev.keyCode === 13) {
         // 如果是输入建议存在,则第1次回车的时候, 不触发提交
-        if (type === 'text' && this.state.mvidx !== null) {
+        if (this.state.mvidx !== null) {
           return this._fetchSelect(this.state.mvidx, ev)
         }
 
-        if (
+        this.dispatchEvent(new CustomEvent('submit', { detail: this.value }))
-          type === 'text' ||
-          (type === 'textarea' && (ev.ctrlKey || ev.metaKey))
-        ) {
-          this.dispatchEvent(
-            new CustomEvent('submit', {
-              detail: this.value
-            })
-          )
-        }
       }
     })
 
-    // 非textarea, 可做输入建议功能
+    // 输入状态事件
-    if (type === 'text') {
+    this._handleChange = $.bind(this.__INPUT__, 'input', ev => {
-      // 输入状态事件
+      ev.preventDefault()
-      this._handleChange = $.bind(this.__INPUT__, 'input', ev => {
+      this.dispatchEvent(
-        ev.preventDefault()
+        new CustomEvent('fetch-suggest', {
-        this.dispatchEvent(
+          detail: {
-          new CustomEvent('fetch-suggest', {
+            value: this.value,
-            detail: {
+            send: list => {
-              value: this.value,
+              this.props.list = list
-              send: list => {
+              this._parseSuggestion()
-                this.props.list = list
-                this._parseSuggestion()
-              }
             }
-          })
+          }
-        )
+        })
-      })
+      )
+    })
 
-      // 渲染建议列表
+    // 渲染建议列表
-      this._parseSuggestion = $.bind(this.__INPUT__, 'click', ev => {
+    this._parseSuggestion = $.bind(this.__INPUT__, 'click', ev => {
-        var { list } = this.props
+      var { list } = this.props
-        let { x, y, width } = this.getBoundingClientRect()
+      let { x, y, width } = this.getBoundingClientRect()
-        if (list && list.length) {
+      if (list && list.length) {
-          var html = list
+        var html = list
-            .map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
+          .map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
-            .join('')
+          .join('')
-          this.__LIST__.firstElementChild.firstElementChild.innerHTML = html
+        this.__LIST__.firstElementChild.firstElementChild.innerHTML = html
-          this.__LIST__.classList.toggle('show', true)
+        this.__LIST__.classList.toggle('show', true)
-          this.__LIST__.style.cssText = `left:${x}px;top:${y +
+        this.__LIST__.style.cssText = `left:${x}px;top:${y +
-            50}px;width:${width}px;`
+          50}px;width:${width}px;`
-        } else {
+      } else {
-          this.__LIST__.classList.toggle('show', false)
+        this.__LIST__.classList.toggle('show', false)
-        }
+      }
-      })
+    })
 
-      this._inactiveFn = $.outside(this, ev => {
+    this._inactiveFn = $.outside(this, ev => {
-        this.__LIST__.classList.remove('show')
+      this.__LIST__.classList.remove('show')
-      })
+    })
 
-      // 选择建议
+    // 选择建议
-      this._handleSelect = $.bind(this.__LIST__, 'click', ev => {
+    this._handleSelect = $.bind(this.__LIST__, 'click', ev => {
-        if (ev.target.tagName === 'LI') {
+      if (ev.target.tagName === 'LI') {
-          this._fetchSelect(ev.target.dataset.idx, ev)
+        this._fetchSelect(ev.target.dataset.idx, ev)
-          this.dispatchEvent(new CustomEvent('input'))
+        this.dispatchEvent(new CustomEvent('input'))
-        }
+      }
-      })
+    })
-    } else {
-      this._handleWheel = $.catch(this.__INPUT__, 'wheel')
-    }
   }
 
   unmount() {
@@ -570,14 +595,6 @@ export default class Input {
         this.__INPUT__.setAttribute('placeholder', val)
         break
 
-      case 'type':
-        if (~TYPES.indexOf(val)) {
-          this.type = val
-        } else {
-          this.type = 'text'
-        }
-        break
-
       case 'value':
         this.value = val
         break
@@ -594,7 +611,17 @@ export default class Input {
         if (k === 'readonly') {
           k = 'readOnly'
         }
-        this[k] = true
+        this[k] = val !== null
+        break
+
+      case 'passwd':
+        if (val === null) {
+          this.props.passwd = false
+          this.__INPUT__.type = 'text'
+        } else {
+          this.props.passwd = true
+          this.__INPUT__.type = 'password'
+        }
         break
     }
   }

src/form/textarea.wc

@@ -0,0 +1,602 @@
+<template>
+  <div class="label">
+    <slot class="prepend" name="prepend"></slot>
+    ${input}
+    <wc-icon class="icon"></wc-icon>
+    <slot class="append" name="append"></slot>
+
+    <div class="suggestion">
+      <wc-scroll>
+        <ul class="list"></ul>
+      </wc-scroll>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+ul,
+li {
+  list-style: none;
+}
+:host {
+  overflow: hidden;
+  display: inline-flex;
+  min-width: 128px;
+  user-select: none;
+  -moz-user-select: none;
+  color: var(--color-dark-1);
+  border-radius: 6px;
+  cursor: text;
+}
+
+.label {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
+  font-size: 14px;
+  border: 2px solid var(--color-plain-2);
+  border-radius: inherit;
+  background: var(--bg-color, #fff);
+  color: inherit;
+  cursor: inherit;
+
+  input,
+  textarea {
+    flex: 1;
+    min-width: 32px;
+    width: 0;
+    height: 100%;
+    padding: 0 5px;
+    border: 0;
+    border-radius: inherit;
+    color: inherit;
+    font: inherit;
+    background: none;
+    outline: none;
+    box-shadow: none;
+    cursor: inherit;
+
+    &::placeholder {
+      color: var(--color-grey-1);
+    }
+  }
+  textarea {
+    padding: 5px 8px;
+    resize: none;
+  }
+  .prepend,
+  .append {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    height: 30px;
+    padding: 0 10px;
+    line-height: 1;
+    background: var(--bg-color, --color-plain-1);
+    white-space: nowrap;
+  }
+  .prepend {
+    border-right: 1px solid var(--color-plain-3);
+    border-radius: 2px 0 0 2px;
+  }
+  .append {
+    border-left: 1px solid var(--color-plain-3);
+    border-radius: 0 2px 2px 0;
+  }
+  &[prepend] .prepend,
+  &[append] .append {
+    display: flex;
+  }
+  &[prepend] input,
+  &[append] input {
+    min-width: 64px;
+  }
+  /* ----- */
+  .icon {
+    --size: 20px;
+    padding: 0 5px;
+    margin: 0 5px;
+    color: var(--color-grey-2);
+  }
+}
+
+.suggestion {
+  display: none;
+  position: fixed;
+  z-index: 10240;
+  left: 0;
+  top: 0;
+  width: 200px;
+  height: auto;
+  max-height: 200px;
+  min-height: 46px;
+  padding: 8px 0;
+  border-radius: 2px;
+  background: #fff;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
+
+  .list {
+    width: 100%;
+  }
+
+  &::after {
+    position: absolute;
+    left: 30px;
+    top: -4px;
+    width: 8px;
+    height: 8px;
+    background: #fff;
+    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
+    transform: rotate(45deg);
+    content: '';
+  }
+  &.show {
+    display: flex;
+  }
+
+  li {
+    overflow: hidden;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover,
+    &[focus] {
+      background: var(--color-plain-1);
+    }
+  }
+}
+
+/* --- */
+:host([auto-border]) .label {
+  border-color: transparent;
+}
+:host([disabled]) {
+  cursor: not-allowed;
+
+  .label {
+    background: var(--color-plain-1);
+    opacity: 0.6;
+  }
+}
+:host([readonly]) {
+  cursor: default;
+}
+:host(:focus-within) {
+  // @include focus1;
+  .label {
+    border-color: var(--color-plain-3);
+  }
+}
+:host(:focus-within[readonly]) {
+  // @include focus2;
+}
+
+:host([type='textarea']) {
+  display: flex;
+  height: 80px;
+  .label {
+    width: 100%;
+    height: 100%;
+  }
+  .icon,
+  .suggestion {
+    display: none;
+  }
+}
+
+/* 额外样式 */
+:host([round]) {
+  border-radius: 21px;
+
+  .label input {
+    padding: 0 10px;
+  }
+
+  .label[prepend] input,
+  .label[append] input {
+    padding: 0 5px;
+  }
+
+  .prepend {
+    border-radius: 21px 0 0 21px;
+  }
+  .append {
+    border-radius: 0 21px 21px 0;
+  }
+}
+
+:host([size='large']) {
+  .label {
+    height: 42px;
+    font-size: 16px;
+  }
+  .prepend,
+  .append {
+    height: 40px;
+  }
+}
+
+:host([size='medium']) {
+  .label {
+    height: 36px;
+  }
+  .prepend,
+  .append {
+    height: 34px;
+  }
+}
+:host([size='mini']) {
+  .label {
+    height: 24px;
+    font-size: 12px;
+  }
+  .icon {
+    --size: 16px;
+  }
+  .prepend,
+  .append {
+    height: 18px;
+  }
+}
+
+:host([no-border]),
+:host(:focus-within[no-border]) {
+  box-shadow: none;
+  .label {
+    border: 0;
+  }
+}
+:host([transparent]) {
+  .label {
+    background: transparent;
+  }
+}
+</style>
+
+<script>
+import '../scroll/index'
+import '../icon/index'
+import $ from '../utils'
+
+const TYPES = ['text', 'textarea', 'password']
+const INPUTS = {
+  text: '<input spellcheck="false">',
+  textarea: '<textarea spellcheck="false"></textarea>'
+}
+
+export default class Input {
+  props = {
+    value: '',
+    icon: '',
+    type: 'text',
+    placeholder: '',
+    maxlength: null,
+    minlength: null,
+    autofocus: false,
+    readonly: false,
+    disabled: false
+  }
+
+  state = {
+    mvidx: null //下拉列表光标的索引ID
+  }
+
+  __init__() {
+    var type = this.getAttribute('type')
+    var input = ''
+
+    if (type !== 'textarea') {
+      type = 'text'
+    }
+
+    input = INPUTS[type]
+
+    /* render */
+
+    this.props.type = type
+
+    this.__OUTER__ = this.root.children[1]
+    this.__PREPEND__ = this.__OUTER__.children[0]
+    this.__INPUT__ = this.__OUTER__.children[1]
+    this.__ICO__ = this.__OUTER__.children[2]
+    this.__APPEND__ = this.__OUTER__.children[3]
+    this.__LIST__ = this.__OUTER__.children[4]
+  }
+
+  get readOnly() {
+    return this.props.readonly
+  }
+
+  set readOnly(val) {
+    var type = typeof val
+
+    if (val === this.props.readonly) {
+      return
+    }
+
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.readonly = true
+      this.setAttribute('readonly', '')
+      this.__INPUT__.setAttribute('readonly', '')
+    } else {
+      this.props.readonly = false
+      this.removeAttribute('readonly')
+      this.__INPUT__.removeAttribute('readonly')
+    }
+  }
+
+  get disabled() {
+    return this.props.disabled
+  }
+
+  set disabled(val) {
+    var type = typeof val
+
+    if (val === this.props.disabled) {
+      return
+    }
+    if ((type === 'boolean' && val) || type !== 'boolean') {
+      this.props.disabled = true
+      this.setAttribute('disabled', '')
+      this.__INPUT__.setAttribute('disabled', '')
+    } else {
+      this.props.disabled = false
+      this.removeAttribute('disabled')
+      this.__INPUT__.removeAttribute('disabled')
+    }
+  }
+
+  get value() {
+    return this.__INPUT__.value
+  }
+
+  set value(val) {
+    this.__INPUT__.value = val
+  }
+
+  get type() {
+    return this.__INPUT__.type
+  }
+
+  set type(val) {
+    if (val !== 'textarea') {
+      this.__INPUT__.type = val
+    }
+  }
+
+  // 移动光标选择下拉选项
+  _moveSelect(ev) {
+    var { list } = this.props
+    if (list && list.length) {
+      ev.preventDefault()
+      var step = ev.keyCode === 38 ? -1 : 1
+      var items = Array.from(
+        this.__LIST__.firstElementChild.firstElementChild.children
+      )
+      if (this.state.mvidx === null) {
+        this.state.mvidx = 0
+      } else {
+        this.state.mvidx += step
+      }
+      if (this.state.mvidx < 0) {
+        this.state.mvidx = 0
+      } else if (this.state.mvidx > items.length - 1) {
+        this.state.mvidx = items.length - 1
+      }
+      items.forEach((it, i) => {
+        if (i === this.state.mvidx) {
+          this.__LIST__.firstElementChild.scrollTop = it.offsetTop - 150
+          it.setAttribute('focus', '')
+        } else {
+          it.removeAttribute('focus')
+        }
+      })
+    }
+  }
+
+  // 触发列表选择
+  _fetchSelect(idx, ev) {
+    var item = this.props.list[idx]
+    this.value = item.value
+    this.dispatchEvent(
+      new CustomEvent('select', {
+        detail: item
+      })
+    )
+    this._handleChange(ev)
+    this.__LIST__.classList.remove('show')
+    this.state.mvidx = null
+  }
+
+  _updateAttr() {
+    var { maxlength, minlength } = this.props
+
+    if (maxlength && maxlength > 0) {
+      this.__INPUT__.setAttribute('maxlength', maxlength)
+    } else {
+      this.__INPUT__.removeAttribute('maxlength')
+    }
+    if (minlength && minlength > 0) {
+      this.__INPUT__.setAttribute('minlength', minlength)
+    } else {
+      this.__INPUT__.removeAttribute('minlength')
+    }
+  }
+
+  mounted() {
+    var prepend = this.__PREPEND__.assignedNodes()
+    var append = this.__APPEND__.assignedNodes()
+    var { type } = this.props
+
+    // 相同插槽, 只允许1个
+    while (prepend.length > 1) {
+      this.removeChild(prepend.pop())
+    }
+    while (append.length > 1) {
+      this.removeChild(append.pop())
+    }
+
+    if (prepend.length && type !== 'textarea') {
+      this.__OUTER__.setAttribute('prepend', '')
+    }
+    if (append.length && type !== 'textarea') {
+      this.__OUTER__.setAttribute('append', '')
+    }
+
+    this._updateAttr()
+
+    // 键盘事件
+    this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
+      if (this.disabled || this.readOnly) {
+        return
+      }
+      // up: 38, down: 40
+      if (ev.keyCode === 38 || ev.keyCode === 40) {
+        // 仅普通文本表单, 密码和多行文本框不做响应
+        if (type === 'text') {
+          return this._moveSelect(ev)
+        }
+      }
+      // 回车触发submit事件
+      // textarea 要按Ctrl Or Cmd键, 才会触发
+      if (ev.keyCode === 13) {
+        // 如果是输入建议存在,则第1次回车的时候, 不触发提交
+        if (type === 'text' && this.state.mvidx !== null) {
+          return this._fetchSelect(this.state.mvidx, ev)
+        }
+
+        if (
+          type === 'text' ||
+          (type === 'textarea' && (ev.ctrlKey || ev.metaKey))
+        ) {
+          this.dispatchEvent(
+            new CustomEvent('submit', {
+              detail: this.value
+            })
+          )
+        }
+      }
+    })
+
+    // 非textarea, 可做输入建议功能
+    if (type === 'text') {
+      // 输入状态事件
+      this._handleChange = $.bind(this.__INPUT__, 'input', ev => {
+        ev.preventDefault()
+        this.dispatchEvent(
+          new CustomEvent('fetch-suggest', {
+            detail: {
+              value: this.value,
+              send: list => {
+                this.props.list = list
+                this._parseSuggestion()
+              }
+            }
+          })
+        )
+      })
+
+      // 渲染建议列表
+      this._parseSuggestion = $.bind(this.__INPUT__, 'click', ev => {
+        var { list } = this.props
+        let { x, y, width } = this.getBoundingClientRect()
+        if (list && list.length) {
+          var html = list
+            .map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
+            .join('')
+          this.__LIST__.firstElementChild.firstElementChild.innerHTML = html
+          this.__LIST__.classList.toggle('show', true)
+          this.__LIST__.style.cssText = `left:${x}px;top:${y +
+            50}px;width:${width}px;`
+        } else {
+          this.__LIST__.classList.toggle('show', false)
+        }
+      })
+
+      this._inactiveFn = $.outside(this, ev => {
+        this.__LIST__.classList.remove('show')
+      })
+
+      // 选择建议
+      this._handleSelect = $.bind(this.__LIST__, 'click', ev => {
+        if (ev.target.tagName === 'LI') {
+          this._fetchSelect(ev.target.dataset.idx, ev)
+          this.dispatchEvent(new CustomEvent('input'))
+        }
+      })
+    } else {
+      this._handleWheel = $.catch(this.__INPUT__, 'wheel')
+    }
+  }
+
+  unmount() {
+    $.unbind(this.__INPUT__, 'wheel', this._handleWheel)
+    $.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
+    $.unbind(this.__INPUT__, 'input', this._handleChange)
+    $.unbind(this.__LIST__, 'click', this._handleSelect)
+    $.clearOutside(this._inactiveFn)
+  }
+
+  watch() {
+    switch (name) {
+      case 'icon':
+        this.props.icon = val
+        if (val) {
+          this.__ICO__.setAttribute('is', val)
+        } else {
+          this.removeAttribute('icon')
+          this.__ICO__.removeAttribute('is')
+        }
+        break
+
+      case 'autofocus':
+        this.__INPUT__.setAttribute('autofocus', '')
+        // 辣鸡火狐, 要触发一下focus, 才能聚焦
+        setTimeout(_ => {
+          this.__INPUT__.focus()
+        }, 10)
+
+        break
+
+      case 'placeholder':
+        this.__INPUT__.setAttribute('placeholder', val)
+        break
+
+      case 'type':
+        if (~TYPES.indexOf(val)) {
+          this.type = val
+        } else {
+          this.type = 'text'
+        }
+        break
+
+      case 'value':
+        this.value = val
+        break
+
+      case 'maxlength':
+      case 'minlength':
+        this.props[name] = val
+        this._updateAttr()
+        break
+
+      case 'readonly':
+      case 'disabled':
+        var k = name
+        if (k === 'readonly') {
+          k = 'readOnly'
+        }
+        this[k] = true
+        break
+    }
+  }
+}
+</script>

src/icon/index.wc

@@ -26,44 +26,41 @@
   }
 }
 
-:host([size='large']) .icon {
+:host([size='large']) {
   width: 52px;
   height: 52px;
 }
-:host([size='medium']) .icon {
+:host([size='medium']) {
   width: 36px;
   height: 36px;
 }
-:host([size='mini']) .icon {
+:host([size='mini']) {
   width: 26px;
   height: 26px;
 }
-:host([type='danger']) {
+
+:host([red]) {
   color: var(--color-red-1);
 }
 
-:host([type='info']) {
+:host([blue]) {
   color: var(--color-blue-1);
 }
 
-:host([type='success']) {
+:host([green]) {
   color: var(--color-green-1);
 }
 
-:host([type='primary']) {
+:host([orange]) {
-  color: var(--color-teal-1);
-}
-
-:host([type='warning']) {
   color: var(--color-orange-1);
 }
 
-:host([type='inverse']) {
+:host([grey]) {
-  color: var(--color-dark-1);
+  color: var(--color-grey-1);
 }
 
-:host([type='default']) {
+:host([dark]) {
-  color: var(--color-grey-1);
+  color: var(--color-dark-1);
 }
 
 @keyframes circle {

src/pager/index.wc

@@ -66,6 +66,10 @@
   background: var(--color-orange-1);
 }
 
+:host([grey]) .curr {
+  background: var(--color-grey-1);
+}
+
 :host([dark]) .curr {
   background: var(--color-dark-1);
 }