优化UI样式
parent
2616885a97
commit
d57200a239
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import './button'
|
||||
import './link'
|
||||
import './input'
|
||||
import './passwd'
|
||||
import './textarea'
|
||||
import './number'
|
||||
import './radio'
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
--size: 18px;
|
||||
.close {
|
||||
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) {
|
||||
// 仅普通文本表单, 密码和多行文本框不做响应
|
||||
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
|
||||
|
||||
// 密码类型不触发输入建议
|
||||
if (passwd) {
|
||||
return
|
||||
}
|
||||
let { lazy } = this.props
|
||||
|
||||
// 并发拦截
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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='info']) label {
|
||||
color: var(--color-blue-1);
|
||||
.dot {
|
||||
border-color: var(--color-blue-1);
|
||||
}
|
||||
.dot::after {
|
||||
background: var(--color-blue-1);
|
||||
}
|
||||
:host([type='danger']:focus-within) .dot {
|
||||
box-shadow: 0 0 0 2px var(--color-red-a);
|
||||
}
|
||||
|
||||
: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')
|
||||
|
|
|
|||
Reference in New Issue