优化UI样式

src/form/button.wc

@@ -12,7 +12,7 @@
   min-width: 72px;
   width: 128px;
   height: 36px;
-  border-radius: 6px;
+  border-radius: 3px;
   user-select: none;
   -moz-user-select: none;
   color: var(--color-dark-1);
@@ -28,7 +28,7 @@
     height: inherit;
     padding: var(--padding, 0 14px);
     line-height: 1;
-    border: 2px solid var(--color-plain-2);
+    border: 1px solid var(--color-grey-2);
     border-radius: inherit;
     white-space: nowrap;
     background: #fff;
@@ -138,10 +138,10 @@
 
 :host(:not([disabled]):not([loading])) button {
   &:hover {
-    border-color: var(--color-plain-1);
+    border-color: var(--color-grey-1);
   }
   &:active {
-    border-color: var(--color-plain-3);
+    border-color: var(--color-grey-3);
   }
 }
 :host(:focus-within) {
@@ -245,10 +245,10 @@
 }
 
 // -------
-:host([type='default']) button {
+:host([type='help']) button {
   background: var(--color-grey-2);
 }
-:host([type='default']:not([disabled]):not([loading])) button {
+:host([type='help']:not([disabled]):not([loading])) button {
   &:hover {
     background: var(--color-grey-1);
   }
@@ -256,7 +256,7 @@
     background: var(--color-grey-3);
   }
 }
-:host([type='default']:focus-within) {
+:host([type='help']:focus-within) {
   box-shadow: 0 0 0 2px var(--color-grey-a);
 }
 

src/form/checkbox-item.wc

@@ -1,5 +1,5 @@
 <template>
-  <label>
+  <label tabindex="0">
     <wc-icon class="dot" is="checkbox-off"></wc-icon>
     <slot />
   </label>
@@ -156,6 +156,7 @@ export default class Checkbox {
     if ((type === 'boolean' && val) || type !== 'boolean') {
       this.props.disabled = true
       this.setAttribute('disabled', '')
+      this.__SWITCH__.removeAttribute('tabindex')
     } else {
       this.props.disabled = false
       this.removeAttribute('disabled')

src/form/index.js

@@ -1,6 +1,7 @@
 import './button'
 import './link'
 import './input'
+import './passwd'
 import './textarea'
 import './number'
 import './radio'

src/form/input.wc

@@ -2,7 +2,7 @@
   <div class="label">
     <slot class="prepend" name="prepend"></slot>
     <input spellcheck="false" />
-    <wc-icon class="icon"></wc-icon>
+    <wc-icon class="close" is="close"></wc-icon>
     <slot class="append" name="append"></slot>
 
     <div class="suggestion">
@@ -25,7 +25,7 @@ li {
   user-select: none;
   -moz-user-select: none;
   color: var(--color-dark-1);
-  border-radius: 6px;
+  border-radius: 3px;
   cursor: text;
   transition: box-shadow 0.15s linear;
 }
@@ -37,7 +37,7 @@ li {
   align-items: center;
   height: 36px;
   font-size: 14px;
-  border: 2px solid var(--color-grey-2);
+  border: 1px solid var(--color-grey-2);
   border-radius: inherit;
   background: var(--bg-color, #fff);
   color: inherit;
@@ -69,17 +69,17 @@ li {
     justify-content: center;
     align-items: center;
     width: auto;
-    height: 32px;
+    height: 34px;
     padding: 0 10px;
     line-height: 1;
     white-space: nowrap;
   }
   .prepend {
-    border-right: 2px solid var(--color-grey-a);
+    border-right: 1px solid var(--color-grey-a);
     border-radius: 6px 0 0 6px;
   }
   .append {
-    border-left: 2px solid var(--color-grey-a);
+    border-left: 1px solid var(--color-grey-a);
     border-radius: 0 6px 6px 0;
   }
   &[prepend] .prepend,
@@ -91,10 +91,25 @@ li {
     min-width: 64px;
   }
   /* ----- */
-  .icon {
+  .close {
-    --size: 18px;
+    display: none;
+    --size: 16px;
     margin: 0 8px 0 4px;
+    padding: 4px;
+    border-radius: 50%;
     color: var(--color-grey-2);
+    cursor: pointer;
+    transition: background 0.15s linear;
+
+    &:hover {
+      background: var(--color-plain-1);
+    }
+  }
+}
+
+:host([clearable]) {
+  .label .close {
+    display: block;
   }
 }
 
@@ -232,7 +247,7 @@ li {
 
 /* ----- 类型(颜色) ----- */
 :host(:focus-within) {
-  box-shadow: 0 0 0 2px var(--color-grey-a);
+  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);
@@ -327,14 +342,13 @@ import $ from '../utils'
 export default class Input {
   props = {
     value: '',
-    icon: '',
     placeholder: '',
     maxlength: null,
     minlength: null,
+    clearable: false,
     autofocus: false,
     readonly: false,
     disabled: false,
-    passwd: false,
     lazy: 0 // 输入建议并发拦截时间, 单位毫秒
   }
 
@@ -349,7 +363,7 @@ export default class Input {
     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.__CLOSE__ = this.__OUTER__.children[2]
     this.__APPEND__ = this.__OUTER__.children[3]
     this.__LIST__ = this.__OUTER__.children[4]
   }
@@ -472,7 +486,7 @@ export default class Input {
 
     // 键盘事件
     this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
-      let { passwd, minlength, lazy } = this.props
+      let { minlength, lazy } = this.props
       let val = this.value
       let now = Date.now()
 
@@ -481,13 +495,10 @@ export default class Input {
       }
       // up: 38, down: 40
       if (ev.keyCode === 38 || ev.keyCode === 40) {
-        // 仅普通文本表单, 密码和多行文本框不做响应
+        return this._moveSelect(ev)
-        if (!passwd) {
-          return this._moveSelect(ev)
-        }
       }
+
       // 回车触发submit事件
-      // textarea 要按Ctrl Or Cmd键, 才会触发
       if (ev.keyCode === 13) {
         // 如果是输入建议存在,则第1次回车的时候, 不触发提交
         if (this.state.mvidx !== null) {
@@ -514,12 +525,7 @@ export default class Input {
     // 输入状态事件
     this._handleChange = $.bind(this.__INPUT__, 'input', ev => {
       let now = Date.now()
-      let { lazy, passwd } = this.props
+      let { lazy } = this.props
-
-      // 密码类型不触发输入建议
-      if (passwd) {
-        return
-      }
 
       // 并发拦截
       if (lazy && now - this.stamp < lazy) {
@@ -570,6 +576,11 @@ export default class Input {
         this.dispatchEvent(new CustomEvent('input'))
       }
     })
+
+    this._clearFn = $.bind(this.__CLOSE__, 'click', ev => {
+      this.value = ''
+      this.dispatchEvent(new CustomEvent('input'))
+    })
   }
 
   unmount() {
@@ -577,21 +588,12 @@ export default class Input {
     $.unbind(this.__INPUT__, 'input', this._handleChange)
     $.unbind(this.__INPUT__, 'click', this._parseSuggestion)
     $.unbind(this.__LIST__, 'click', this._handleSelect)
+    $.unbind(this.__CLOSE__, 'click', this._clearFn)
     $.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, 才能聚焦
@@ -633,16 +635,6 @@ export default class Input {
         }
         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/passwd.wc

@@ -0,0 +1,467 @@
+<template>
+  <div class="label">
+    <slot class="prepend" name="prepend"></slot>
+    <input spellcheck="false" type="password" />
+    <wc-icon class="icon" is="eye"></wc-icon>
+    <slot class="append" name="append"></slot>
+  </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: 3px;
+  cursor: text;
+  transition: box-shadow 0.15s linear;
+}
+
+.label {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 36px;
+  font-size: 14px;
+  border: 1px solid var(--color-grey-2);
+  border-radius: inherit;
+  background: var(--bg-color, #fff);
+  color: inherit;
+  cursor: inherit;
+
+  input {
+    flex: 1;
+    min-width: 36px;
+    width: 0;
+    height: 100%;
+    padding: 0 8px;
+    border: 0;
+    border-radius: inherit;
+    color: inherit;
+    font: inherit;
+    background: none;
+    outline: none;
+    box-shadow: none;
+    cursor: inherit;
+
+    &::placeholder {
+      color: var(--color-grey-1);
+    }
+  }
+
+  .prepend,
+  .append {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    height: 34px;
+    padding: 0 10px;
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .prepend {
+    border-right: 1px solid var(--color-grey-a);
+    border-radius: 6px 0 0 6px;
+  }
+  .append {
+    border-left: 1px solid var(--color-grey-a);
+    border-radius: 0 6px 6px 0;
+  }
+  &[prepend] .prepend,
+  &[append] .append {
+    display: flex;
+  }
+  &[prepend] input,
+  &[append] input {
+    min-width: 64px;
+  }
+  /* ----- */
+  .icon {
+    --size: 18px;
+    margin: 0 8px 0 4px;
+    color: var(--color-grey-2);
+    cursor: pointer;
+  }
+}
+
+/* 额外样式 */
+:host([round]) {
+  border-radius: 26px;
+
+  .label input {
+    padding: 0 10px;
+    margin: 0 18px;
+  }
+
+  .label[prepend] input,
+  .label[append] input {
+    padding: 0 5px;
+  }
+  .label[prepend] input {
+    margin-left: 0;
+  }
+  .label[append] input {
+    margin-right: 0;
+  }
+
+  .prepend {
+    border-radius: 26px 0 0 26px;
+  }
+  .append {
+    border-radius: 0 26px 26px 0;
+  }
+}
+
+:host([size='large']) {
+  min-width: 234px;
+  .label {
+    height: 52px;
+    font-size: 18px;
+
+    input {
+      padding: 0 16px;
+    }
+  }
+  .prepend,
+  .append {
+    height: 48px;
+    padding: 0 16px;
+  }
+
+  .icon {
+    --size: 24px;
+    margin: 0 20px 0 4px;
+  }
+}
+:host([size='medium']) {
+  min-width: 160px;
+  .label {
+    height: 44px;
+
+    input {
+      padding: 0 10px;
+    }
+  }
+  .prepend,
+  .append {
+    height: 40px;
+  }
+}
+:host([size='small']) {
+  min-width: 96px;
+  .label {
+    height: 32px;
+
+    input {
+      padding: 0 6px;
+    }
+  }
+  .prepend,
+  .append {
+    height: 28px;
+  }
+}
+:host([size='mini']) {
+  min-width: 72px;
+  .label {
+    height: 26px;
+    font-size: 12px;
+  }
+  .icon {
+    --size: 14px;
+  }
+  .prepend,
+  .append {
+    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='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='primary']) .label {
+  border-color: var(--color-teal-2);
+  .prepend,
+  .append {
+    border-color: var(--color-teal-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([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]) {
+  .label {
+    border: 0;
+
+    &[prepend] input {
+      padding-left: 2px;
+    }
+    &[append] input {
+      padding-right: 2px;
+    }
+  }
+  .prepend,
+  .append {
+    border: 0;
+  }
+}
+</style>
+
+<script>
+import '../scroll/index'
+import '../icon/index'
+import $ from '../utils'
+
+export default class Passwd {
+  props = {
+    value: '',
+    placeholder: '',
+    maxlength: null,
+    minlength: null,
+    autofocus: false,
+    readonly: false,
+    disabled: false,
+    lazy: 0 // 输入建议并发拦截时间, 单位毫秒
+  }
+
+  __init__() {
+    /* render */
+
+    this.__OUTER__ = this.root.children[1]
+    this.__PREPEND__ = this.__OUTER__.children[0]
+    this.__INPUT__ = this.__OUTER__.children[1]
+    this.__EYE__ = this.__OUTER__.children[2]
+    this.__APPEND__ = this.__OUTER__.children[3]
+  }
+
+  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
+  }
+
+  mounted() {
+    var prepend = this.__PREPEND__.assignedNodes()
+    var append = this.__APPEND__.assignedNodes()
+
+    this.stamp = 0
+
+    // 相同插槽, 只允许1个
+    while (prepend.length > 1) {
+      this.removeChild(prepend.pop())
+    }
+    while (append.length > 1) {
+      this.removeChild(append.pop())
+    }
+
+    if (prepend.length) {
+      this.__OUTER__.setAttribute('prepend', '')
+    }
+    if (append.length) {
+      this.__OUTER__.setAttribute('append', '')
+    }
+
+    // 键盘事件
+    this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
+      let { minlength, lazy } = this.props
+      let val = this.value
+      let now = Date.now()
+
+      if (this.disabled || this.readOnly) {
+        return
+      }
+
+      // 回车触发submit事件
+      if (ev.keyCode === 13) {
+        // 并发拦截
+        if (lazy && now - this.stamp < lazy) {
+          return
+        }
+
+        // 长度不够,拦截submit
+        if (minlength && minlength > 0) {
+          if (val.length < minlength) {
+            return
+          }
+        }
+
+        this.stamp = now
+        this.dispatchEvent(new CustomEvent('submit', { detail: this.value }))
+      }
+    })
+
+    this._eyeFn = $.bind(this.__EYE__, 'click', ev => {
+      if (this.__INPUT__.type === 'password') {
+        this.__INPUT__.type = 'text'
+        this.__EYE__.is = 'eye-off'
+      } else {
+        this.__INPUT__.type = 'password'
+        this.__EYE__.is = 'eye'
+      }
+    })
+  }
+
+  unmount() {
+    $.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
+    $.unbind(this.__EYE__, 'click', this._eyeFn)
+  }
+
+  watch() {
+    switch (name) {
+      case 'autofocus':
+        this.__INPUT__.setAttribute('autofocus', '')
+        // 辣鸡火狐, 要触发一下focus, 才能聚焦
+        setTimeout(_ => {
+          this.__INPUT__.focus()
+        }, 10)
+
+        break
+
+      case 'placeholder':
+        this.__INPUT__.setAttribute('placeholder', val)
+        break
+
+      case 'value':
+        this.value = val
+        break
+
+      case 'maxlength':
+      case 'minlength':
+        if (val === null) {
+          this.__INPUT__.removeAttribute(name)
+        } else {
+          let n = +val
+          if (n > 0) {
+            this.__INPUT__.setAttribute(name, +val)
+          }
+        }
+        break
+
+      case 'lazy':
+        this.props.lazy = val >> 0
+        break
+
+      case 'readonly':
+      case 'disabled':
+        var k = name
+        if (k === 'readonly') {
+          k = 'readOnly'
+        }
+        this[k] = val !== null
+        break
+    }
+  }
+}
+</script>

src/form/radio-item.wc

@@ -1,5 +1,5 @@
 <template>
-  <label>
+  <label tabindex="0">
     <span class="dot"></span>
     <slot />
   </label>
@@ -23,6 +23,7 @@
     user-select: none;
     white-space: nowrap;
     cursor: inherit;
+    outline: none;
     color: var(--color-dark-1);
 
     &.checked .dot::after {
@@ -37,9 +38,10 @@
     width: 16px;
     height: 16px;
     margin-right: 4px;
-    border: 2px solid var(--color-dark-1);
+    border: 1px solid var(--color-dark-1);
     border-radius: 50%;
     background: #fff;
+    transition: box-shadow 0.15s linear;
 
     &::after {
       display: block;
@@ -53,6 +55,10 @@
   }
 }
 
+:host(:focus-within) .dot {
+  box-shadow: 0 0 0 2px var(--color-plain-a);
+}
+
 :host([type='danger']) label {
   color: var(--color-red-1);
   .dot {
@@ -62,15 +68,8 @@
     background: var(--color-red-1);
   }
 }
-
+:host([type='danger']:focus-within) .dot {
-:host([type='info']) label {
+  box-shadow: 0 0 0 2px var(--color-red-a);
-  color: var(--color-blue-1);
-  .dot {
-    border-color: var(--color-blue-1);
-  }
-  .dot::after {
-    background: var(--color-blue-1);
-  }
 }
 
 :host([type='success']) label {
@@ -82,6 +81,9 @@
     background: var(--color-green-1);
   }
 }
+:host([type='success']:focus-within) .dot {
+  box-shadow: 0 0 0 2px var(--color-green-a);
+}
 
 :host([type='primary']) label {
   color: var(--color-teal-1);
@@ -92,6 +94,9 @@
     background: var(--color-teal-1);
   }
 }
+:host([type='primary']:focus-within) .dot {
+  box-shadow: 0 0 0 2px var(--color-teal-a);
+}
 
 :host([type='warning']) label {
   color: var(--color-orange-1);
@@ -102,6 +107,22 @@
     background: var(--color-orange-1);
   }
 }
+:host([type='warning']:focus-within) .dot {
+  box-shadow: 0 0 0 2px var(--color-orange-a);
+}
+
+:host([type='info']) label {
+  color: var(--color-blue-1);
+  .dot {
+    border-color: var(--color-blue-1);
+  }
+  .dot::after {
+    background: var(--color-blue-1);
+  }
+}
+:host([type='info']:focus-within) .dot {
+  box-shadow: 0 0 0 2px var(--color-blue-a);
+}
 
 :host([readonly]) {
   cursor: default;
@@ -116,6 +137,7 @@
     color: var(--color-grey-2);
     .dot {
       border-color: var(--color-grey-1);
+      box-shadow: none;
     }
     .dot::after {
       background: var(--color-grey-1);
@@ -189,6 +211,7 @@ export default class Radio {
     if ((type === 'boolean' && val) || type !== 'boolean') {
       this.props.disabled = true
       this.setAttribute('disabled', '')
+      this.__SWITCH__.removeAttribute('tabindex')
     } else {
       this.props.disabled = false
       this.removeAttribute('disabled')