完成switch组件;优化input输入建议

src/form/input.wc

@@ -324,26 +324,29 @@ export default class Input {
 
   // 移动光标选择下拉选项
   _moveSelect(ev) {
-    ev.preventDefault()
-    var step = ev.keyCode === 38 ? -1 : 1
-    var items = Array.from(this.__LIST__.firstElementChild.children)
-    if (this.props.mvidx === null) {
-      this.props.mvidx = 0
-    } else {
-      this.props.mvidx += step
-    }
-    if (this.props.mvidx < 0) {
-      this.props.mvidx = 0
-    } else if (this.props.mvidx > items.length - 1) {
-      this.props.mvidx = items.length - 1
-    }
-    items.forEach((it, i) => {
-      if (i === this.props.mvidx) {
-        it.setAttribute('focus', '')
+    var { list } = this.props
+    if (list && list.length) {
+      ev.preventDefault()
+      var step = ev.keyCode === 38 ? -1 : 1
+      var items = Array.from(this.__LIST__.firstElementChild.children)
+      if (this.props.mvidx === null) {
+        this.props.mvidx = 0
       } else {
-        it.removeAttribute('focus')
+        this.props.mvidx += step
       }
-    })
+      if (this.props.mvidx < 0) {
+        this.props.mvidx = 0
+      } else if (this.props.mvidx > items.length - 1) {
+        this.props.mvidx = items.length - 1
+      }
+      items.forEach((it, i) => {
+        if (i === this.props.mvidx) {
+          it.setAttribute('focus', '')
+        } else {
+          it.removeAttribute('focus')
+        }
+      })
+    }
   }
 
   // 触发列表选择
@@ -466,7 +469,7 @@ export default class Input {
     if (type === 'text') {
       this.__INPUT__.addEventListener('input', this._handleChange, false)
       this.__INPUT__.addEventListener('focus', this._parseSuggestion, false)
-      // this.__INPUT__.addEventListener('blur', this._handleBlur, false)
+      this.__INPUT__.addEventListener('blur', this._handleBlur, false)
       this.__LIST__.addEventListener('click', this._handleSelect, false)
     }
   }

src/form/next.js

@@ -1,57 +0,0 @@
-/**
- * 未来版表单组件
- * @author yutent<yutent@doui.cc>
- * @date 2019/07/04 12:03:09
- */
-
-'use strict'
-
-export default class DoInput extends HTMLElement {
-  constructor() {
-    super()
-
-    console.log('0000')
-    this.root = this.attachShadow({ mode: 'open' })
-    this.root.innerHTML = `
-    <style>
-    :host {
-      box-sizing: border-box;
-      display:flex;
-      border: 1px solid #e7e8eb;
-      border-radius: 4px;
-    }
-    input {flex:1;padding:0 8px;border: 0;border-radius: 4px;outline:none}
-    </style>
-    <input type="text">
-    `
-  }
-
-  static get observedAttributes() {
-    return ['type']
-  }
-
-  get value() {
-    return this.__INPUT__.value
-  }
-
-  set value(val) {
-    this.__INPUT__.value = val
-  }
-
-  set type(val) {
-    // console.log('type', val)
-    this.__INPUT__.setAttribute('type', val)
-    this.setAttribute('type', val)
-  }
-
-  connectedCallback() {
-    // console.log('----------', this, this.root.children)
-    this.__INPUT__ = this.root.children[1]
-  }
-
-  attributeChangedCallback(...args) {
-    // console.log('======', args)
-  }
-}
-
-customElements.define('do-input', DoInput)

src/form/switch.wc

@@ -0,0 +1,174 @@
+<template>
+  <label>
+    <span class="dot"></span>
+  </label>
+</template>
+
+<style lang="scss">
+:host {
+  display: inline-block;
+
+  label {
+    display: flex;
+    width: 38px;
+    height: 22px;
+    padding: 3px;
+    margin: 5px;
+    border-radius: 21px;
+    background: nth($cp, 3);
+    cursor: inherit;
+
+    &.checked {
+      flex-direction: row-reverse;
+      background: nth($cgr, 3);
+    }
+  }
+  .dot {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #fff;
+  }
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+:host([size='large']) {
+  label {
+    width: 58px;
+    height: 32px;
+  }
+  .dot {
+    width: 26px;
+    height: 26px;
+  }
+}
+:host([size='medium']) {
+  label {
+    width: 50px;
+    height: 28px;
+  }
+  .dot {
+    width: 22px;
+    height: 22px;
+  }
+}
+:host([size='mini']) {
+  label {
+    width: 22px;
+    height: 14px;
+    padding: 2px;
+  }
+  .dot {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+:host([color='red']) label.checked {
+  background: nth($cr, 1);
+}
+
+:host([color='blue']) label.checked {
+  background: nth($cb, 1);
+}
+
+:host([color='green']) label.checked {
+  background: nth($cg, 1);
+}
+
+:host([color='teal']) label.checked {
+  background: nth($ct, 1);
+}
+
+:host([color='orange']) label.checked {
+  background: nth($co, 1);
+}
+
+:host([color='dark']) label.checked {
+  background: nth($cd, 1);
+}
+
+:host([color='purple']) label.checked {
+  background: nth($cpp, 1);
+}
+</style>
+
+<script>
+export default class Switch {
+  props = {
+    checked: false,
+    disabled: false
+  }
+  constructor() {
+    /* render */
+
+    this.__SWITCH__ = this.root.lastElementChild
+  }
+
+  get type() {
+    return 'radio'
+  }
+
+  get checked() {
+    return this.props.checked
+  }
+
+  set checked(val) {
+    this.props.checked = !!val
+    this.__SWITCH__.classList.toggle('checked', this.props.checked)
+  }
+
+  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', '')
+    } else {
+      this.props.disabled = false
+      this.removeAttribute('disabled')
+    }
+  }
+
+  mounted() {
+    this.__SWITCH__.addEventListener(
+      'click',
+      ev => {
+        ev.preventDefault()
+        if (!this.disabled) {
+          this.checked = !this.checked
+        }
+      },
+      false
+    )
+  }
+
+  watch(name, old, val) {
+    if (old === val) {
+      return
+    }
+    switch (name) {
+      case 'checked':
+        this.checked = !!val
+        break
+
+      case 'disabled':
+        if (val === '') {
+          this.disabled = true
+        }
+        break
+    }
+  }
+}
+</script>

src/icon/index.wc

@@ -39,35 +39,35 @@
   height: 20px;
 }
 :host([color='red']) {
-  color: nth($cr, 2);
+  color: nth($cr, 1);
 }
 
 :host([color='blue']) {
-  color: nth($cb, 2);
+  color: nth($cb, 1);
 }
 
 :host([color='green']) {
-  color: nth($cg, 2);
+  color: nth($cg, 1);
 }
 
 :host([color='teal']) {
-  color: nth($ct, 2);
+  color: nth($ct, 1);
 }
 
 :host([color='orange']) {
-  color: nth($co, 2);
+  color: nth($co, 1);
 }
 
 :host([color='dark']) {
-  color: nth($cd, 2);
+  color: nth($cd, 1);
 }
 
 :host([color='purple']) {
-  color: nth($cpp, 2);
+  color: nth($cpp, 1);
 }
 
 :host([color='grey']) {
-  color: nth($cgr, 2);
+  color: nth($cgr, 1);
 }
 
 @keyframes circle {