优化按钮组件的焦点获取;完成input组件的开发

build.dev.js

@@ -66,7 +66,7 @@ function mkWCFile({ style, html, js }) {
   let name = ''
   let props = ''
 
-  js = js.replace(/props = (\{[\w\W]*?\})/, function(s, m) {
+  js = js.replace(/props = (\{[\w\W]*?\n\s{2}?\})/, function(s, m) {
     props = m
     var attr = new Function(
       `var props = ${m}, attr = []; for(var i in props){attr.push(i)}; return attr`

build.prod.js

@@ -75,7 +75,7 @@ function mkWCFile({ style, html, js }) {
 
   let name, props
 
-  js = js.replace(/props = (\{[\w\W]*?\})/, function(s, m) {
+  js = js.replace(/props = (\{[\w\W]*?\n\s{2}?\})/, function(s, m) {
     props = m
     var attr = new Function(
       `var props = ${m}, attr = []; for(var i in props){attr.push(i)}; return attr`

src/form/button.wc

@@ -239,6 +239,7 @@
 
 <script>
 import '../icon/index'
+const IS_FIREFOX = !!window.sidebar
 
 export default class Button {
   props = {
@@ -335,9 +336,13 @@ export default class Button {
         break
 
       case 'autofocus':
-        setTimeout(_ => {
-          this.__BTN__.focus()
-        }, 10)
+        this.__BTN__.setAttribute('autofocus', '')
+        // 辣鸡火狐, 要触发一下focus, 才能聚焦
+        if (IS_FIREFOX) {
+          setTimeout(_ => {
+            this.__BTN__.focus()
+          }, 10)
+        }
         break
 
       case 'loading':

src/form/input.wc

@@ -1,21 +1,28 @@
 <template>
-  <label>
+  <div class="label">
     <slot class="prepend" name="prepend"></slot>
     ${input}
     <wc-icon class="icon"></wc-icon>
     <slot class="append" name="append"></slot>
-  </label>
+
+    <ul class="suggestion"></ul>
+  </div>
 </template>
 
 <style lang="scss">
+ul,
+li {
+  list-style: none;
+}
 :host {
   display: inline-block;
   user-select: none;
+  -moz-user-select: none;
   color: nth($cd, 2);
   border-radius: 4px;
 }
 
-label {
+.label {
   position: relative;
   display: flex;
   justify-content: center;
@@ -31,7 +38,7 @@ label {
 
   input,
   textarea {
-    width: 100%;
+    min-width: 0;
     padding: 0 5px;
     border: 0;
     border-radius: inherit;
@@ -41,8 +48,13 @@ label {
     outline: none;
     box-shadow: none;
     cursor: inherit;
+
+    &::placeholder {
+      color: nth($cgr, 1);
+    }
   }
   textarea {
+    width: 100%;
     height: 100%;
     padding: 5px;
     resize: none;
@@ -77,8 +89,54 @@ label {
     --size: 20px;
   }
 }
+
+.suggestion {
+  display: none;
+  position: absolute;
+  z-index: 10240;
+  left: 0;
+  top: 50px;
+  width: 100%;
+  height: auto;
+  min-height: 46px;
+  padding: 8px 0;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+
+  &::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: block;
+  }
+
+  li {
+    overflow: hidden;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover {
+      background: nth($cp, 1);
+    }
+  }
+}
+
 /* --- */
-:host([disabled]) label {
+:host([disabled]) .label {
   background: nth($cp, 1);
   cursor: not-allowed;
   opacity: 0.6;
@@ -86,21 +144,74 @@ label {
 :host(:focus-within) {
   box-shadow: 0 0 3px nth($ct, 1);
 }
+:host(:focus-within[readonly]) {
+  box-shadow: 0 0 3px nth($co, 1);
+}
 
 :host([type='textarea']) {
   display: flex;
   height: 80px;
-  label {
-    overflow: auto;
+  .label {
     width: 100%;
     height: 100%;
   }
+  .icon,
+  .suggestion {
+    display: none;
+  }
+}
+
+/* 额外样式 */
+:host([round]) {
+  border-radius: 21px;
+
+  .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: 20px;
+    font-size: 12px;
+  }
+  .icon {
+    --size: 16px;
+  }
+  .prepend,
+  .append {
+    height: 18px;
+  }
 }
 </style>
 
 <script>
 import '../icon/index'
 
+const IS_FIREFOX = !!window.sidebar
 const TYPES = ['text', 'textarea', 'password']
 const INPUTS = {
   text: '<input spellcheck="false">',
@@ -115,8 +226,10 @@ export default class Input {
     label: '',
     placeholder: '',
     autofocus: false,
+    readonly: false,
     disabled: false
   }
+
   constructor() {
     var type = this.getAttribute('type')
     var input = ''
@@ -134,6 +247,28 @@ export default class Input {
     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() {
@@ -176,6 +311,21 @@ export default class Input {
     }
   }
 
+  _parseSuggestion() {
+    var { list } = this.props
+    if (list && list.length) {
+      var html = list
+        .map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
+        .join('')
+      this.__LIST__.innerHTML = html
+      this.__LIST__.classList.toggle('show', true)
+    } else {
+      this.__LIST__.classList.toggle('show', false)
+    }
+  }
+
+  _moveSelect() {}
+
   mounted() {
     var prepend = this.__PREPEND__.assignedNodes()
     var append = this.__APPEND__.assignedNodes()
@@ -194,6 +344,93 @@ export default class Input {
     if (append.length && this.props.type !== 'textarea') {
       this.__OUTER__.setAttribute('append', '')
     }
+
+    var { type } = this.props
+
+    this._handleSubmit = ev => {
+      if (this.disabled || this.readonly) {
+        ev.cancelBubble = true
+        return
+      }
+      // up: 38, down: 40
+      log(ev.keyCode)
+
+      if (ev.keyCode === 38 || ev.keyCode === 40) {
+        ev.preventDefault()
+        return
+      }
+      // 回车触发submit事件
+      // textarea 要按Ctrl Or Cmd键, 才会触发
+      if (
+        ev.keyCode === 13 &&
+        (type === 'text' || (type === 'textarea' && (ev.ctrlKey || ev.metaKey)))
+      ) {
+        this.dispatchEvent(
+          new CustomEvent('submit', {
+            detail: this.value
+          })
+        )
+      }
+    }
+
+    this._handleChange = ev => {
+      this.dispatchEvent(
+        new CustomEvent('fetch-suggestions', {
+          detail: {
+            value: this.value,
+            send: list => {
+              log('----', list)
+              this.props.list = list
+              this._parseSuggestion()
+            }
+          }
+        })
+      )
+    }
+
+    this.__INPUT__.addEventListener('keydown', this._handleSubmit, false)
+
+    // 非textarea, 可做输入建议功能
+    if (type === 'text') {
+      this.__INPUT__.addEventListener('input', this._handleChange, false)
+      this.__INPUT__.addEventListener(
+        'focus',
+        this._parseSuggestion.bind(this),
+        false
+      )
+      this.__INPUT__.addEventListener(
+        'blur',
+        ev => {
+          setTimeout(() => {
+            this.__LIST__.classList.remove('show')
+          }, 50)
+        },
+        false
+      )
+
+      this.__LIST__.addEventListener(
+        'click',
+        ev => {
+          this.__LIST__.classList.remove('show')
+          if (ev.target.tagName === 'LI') {
+            var idx = ev.target.dataset.idx
+            var item = this.props.list[idx]
+            this.value = item.value
+            this.dispatchEvent(
+              new CustomEvent('select', {
+                detail: item
+              })
+            )
+          }
+        },
+        false
+      )
+    }
+  }
+
+  unmount() {
+    this.__INPUT__.removeEventListener('keydown', this._handleSubmit)
+    this.__INPUT__.removeEventListener('input', this._handleChange)
   }
 
   watch(name, old, val) {
@@ -212,9 +449,13 @@ export default class Input {
         break
 
       case 'autofocus':
-        setTimeout(_ => {
-          this.__INPUT__.focus()
-        }, 10)
+        this.__INPUT__.setAttribute('autofocus', '')
+        // 辣鸡火狐, 要触发一下focus, 才能聚焦
+        if (IS_FIREFOX) {
+          setTimeout(_ => {
+            this.__INPUT__.focus()
+          }, 10)
+        }
         break
 
       // label和placeholder 功能相同
@@ -231,6 +472,7 @@ export default class Input {
         }
         break
 
+      case 'readonly':
       case 'disabled':
         if (val === '') {
           this[name] = true