This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化UI样式

old
宇天 2021-03-23 19:53:06 +08:00
parent 2616885a97
commit d57200a239
6 changed files with 547 additions and 63 deletions

View File

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

View File

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

View File

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

View File

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

467
src/form/passwd.wc Normal file
View File

@ -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>

View File

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