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

优化单选/复选框的样式及交互

old
宇天 2021-04-06 19:06:24 +08:00
parent e7db91d727
commit 9ca9aa55ea
5 changed files with 183 additions and 49 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<label tabindex="0"> <label tabindex="0">
<wc-icon class="dot" is="checkbox-off"></wc-icon> <span class="dot"><wc-icon is="get"></wc-icon></span>
<slot /> <slot />
</label> </label>
</template> </template>
@ -24,15 +24,112 @@
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 {
background: var(--color-dark-1);
wc-icon {
--size: 14px;
}
}
} }
.dot { .dot {
--size: 20px; display: flex;
padding: 2px; justify-content: center;
align-items: center;
width: 16px;
height: 16px;
margin-right: 4px; margin-right: 4px;
border: 1px solid var(--color-dark-1);
border-radius: 4px;
background: #fff;
color: #fff;
transition: box-shadow 0.15s linear, background 0.15s linear;
wc-icon {
--size: 0px;
transition: width 0.15s linear;
} }
} }
}
:host(:focus-within) .dot {
box-shadow: 0 0 0 2px var(--color-plain-a);
}
:host([type='danger']) label {
color: var(--color-red-1);
.dot {
border-color: var(--color-red-1);
}
&.checked .dot {
background: var(--color-red-1);
}
}
:host([type='danger']:focus-within) .dot {
box-shadow: 0 0 0 2px var(--color-red-a);
}
:host([type='info']) label {
color: var(--color-blue-1);
.dot {
border-color: var(--color-bule-1);
}
&.checked .dot {
background: var(--color-bule-1);
}
}
:host([type='info']:focus-within) .dot {
box-shadow: 0 0 0 2px var(--color-blue-a);
}
:host([type='success']) label {
color: var(--color-green-1);
.dot {
border-color: var(--color-green-1);
}
&.checked .dot {
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);
.dot {
border-color: var(--color-teal-1);
}
&.checked .dot {
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);
.dot {
border-color: var(--color-orange-1);
}
&.checked .dot {
background: var(--color-orange-1);
}
}
:host([type='warning']:focus-within) .dot {
box-shadow: 0 0 0 2px var(--color-orange-a);
}
:host([readonly]) { :host([readonly]) {
cursor: default; cursor: default;
@ -47,26 +144,6 @@
color: var(--color-grey-2); color: var(--color-grey-2);
} }
} }
:host([type='danger']) label {
color: var(--color-red-1);
}
:host([type='info']) label {
color: var(--color-blue-1);
}
:host([type='success']) label {
color: var(--color-green-1);
}
:host([type='primary']) label {
color: var(--color-teal-1);
}
:host([type='warning']) label {
color: var(--color-orange-1);
}
</style> </style>
<script> <script>
@ -163,12 +240,7 @@ export default class Checkbox {
} }
} }
mounted() { _toggleCheck() {
this._checkGroup()
this._handlClick = $.bind(this, 'click', ev => {
ev.preventDefault()
if (this.disabled || this.readOnly) { if (this.disabled || this.readOnly) {
return return
} }
@ -184,11 +256,27 @@ export default class Checkbox {
} else { } else {
this.dispatchEvent(new CustomEvent('input')) this.dispatchEvent(new CustomEvent('input'))
} }
}
mounted() {
this._checkGroup()
this._handlClick = $.bind(this, 'click', ev => {
ev.preventDefault()
this._toggleCheck()
})
this._handlKeydown = $.bind(this, 'keydown', ev => {
// 空格交互
if (ev.keyCode === 32) {
this._toggleCheck()
}
}) })
} }
unmount() { unmount() {
$.unbind(this, 'click', this._handlClick) $.unbind(this, 'click', this._handlClick)
$.unbind(this, 'keydown', this._handlKeydown)
} }
watch() { watch() {

View File

@ -14,7 +14,9 @@ import './checkbox-item'
export default class CheckboxGroup { export default class CheckboxGroup {
props = { props = {
value: [] value: '',
disabled: false,
readonly: false
} }
__init__() { __init__() {
@ -71,9 +73,22 @@ export default class CheckboxGroup {
switch (name) { switch (name) {
case 'value': case 'value':
if (val) { if (val) {
this.value = val.split(/,\s*?/) this.value = val.split(',').map(it => it.trim())
} }
break break
case 'readonly':
case 'disabled':
Array.from(this.children).forEach(it => {
if (it.tagName === 'WC-CHECKBOX' && it.root) {
if (val === null) {
it.removeAttribute(name)
} else {
it.setAttribute(name, '')
}
}
})
break
} }
} }
} }

View File

@ -28,6 +28,7 @@
&.checked .dot::after { &.checked .dot::after {
visibility: visible; visibility: visible;
transform: scale(1);
} }
} }
@ -51,6 +52,8 @@
border-radius: 50%; border-radius: 50%;
background: var(--color-dark-1); background: var(--color-dark-1);
content: ''; content: '';
transform: scale(0);
transition: transform 0.15s linear;
} }
} }
} }
@ -218,12 +221,7 @@ export default class Radio {
} }
} }
mounted() { _toggleCheck() {
if (this.value === this.parentNode.value) {
this.checked = true
}
this._handleClick = $.catch(this, 'click', ev => {
if (this.disabled || this.readOnly || this.checked) { if (this.disabled || this.readOnly || this.checked) {
return return
} }
@ -233,11 +231,29 @@ export default class Radio {
this.parentNode.dispatchEvent( this.parentNode.dispatchEvent(
new CustomEvent('child-picked', { detail: this.value }) new CustomEvent('child-picked', { detail: this.value })
) )
}
mounted() {
if (this.value === this.parentNode.value) {
this.checked = true
}
this._handleClick = $.catch(this, 'click', ev => {
ev.preventDefault()
this._toggleCheck()
})
this._handlKeydown = $.bind(this, 'keydown', ev => {
// 空格交互
if (ev.keyCode === 32) {
this._toggleCheck()
}
}) })
} }
unmount() { unmount() {
$.unbind(this, 'click', this._handleClick) $.unbind(this, 'click', this._handleClick)
$.unbind(this, 'keydown', this._handlKeydown)
} }
watch() { watch() {

View File

@ -14,7 +14,9 @@ import './radio-item'
export default class RadioGroup { export default class RadioGroup {
props = { props = {
value: null value: null,
disabled: false,
readonly: false
} }
__init__() { __init__() {
@ -61,6 +63,19 @@ export default class RadioGroup {
case 'value': case 'value':
this.value = val this.value = val
break break
case 'readonly':
case 'disabled':
Array.from(this.children).forEach(it => {
if (it.tagName === 'WC-RADIO' && it.root) {
if (val === null) {
it.removeAttribute(name)
} else {
it.setAttribute(name, '')
}
}
})
break
} }
} }
} }

View File

@ -345,7 +345,7 @@
} }
:host([readonly]) { :host([readonly]) {
opacity: 0.6; opacity: 0.8;
.toolbar { .toolbar {
span:hover { span:hover {