diff --git a/src/form/radio.js b/src/form/radio.js index bd2a8cb..8ad6f3a 100644 --- a/src/form/radio.js +++ b/src/form/radio.js @@ -61,47 +61,41 @@ class Radio extends Component { class RadioItem extends Component { static props = { - value: { - type: String, - default: '', - attribute: false - }, + value: 'str!', checked: false, disabled: false, - readonly: false + readOnly: false } static styles = [ css` :host { display: inline-flex; - align-items: center; - font-size: 14px; cursor: pointer; label { display: flex; - justify-content: center; align-items: center; - min-width: 32px; padding-right: 16px; line-height: 1; - -moz-user-select: none; - user-select: none; white-space: nowrap; + align-items: center; + font-size: 14px; cursor: inherit; outline: none; color: var(--color-dark-1); + -webkit-user-select: none; + user-select: none; } .dot { display: flex; justify-content: center; align-items: center; - width: 16px; - height: 16px; + width: 14px; + height: 14px; margin-right: 4px; - border: 1px solid var(--color-dark-1); + border: 1px solid var(--color-grey-2); border-radius: 50%; background: #fff; transition: box-shadow 0.15s linear; @@ -132,38 +126,35 @@ class RadioItem extends Component { `, // 尺寸 css` + @use 'sass:math'; @use 'sass:map'; $sizes: ( + s: ( + h: 20px, + f: 12px + ), m: ( - w: 72px, h: 24px, f: 12px ), - l: ( - w: 108px, - h: 32px, - f: 14px - ), xl: ( - w: 132px, h: 36px, - f: 14px - ), - xxl: ( - w: 160px, - h: 44px, - f: 14px + f: 16px ) ); @loop $s, $v in $sizes { :host([size='#{$s}']) { height: map.get($v, 'h'); - font-size: map.get($v, 'f'); .dot { - width: #{map.get($v, 'f')}; - height: #{map.get($v, 'f')}; + width: map.get($v, 'f'); + height: map.get($v, 'f'); + + &::after { + width: math.div(map.get($v, 'f'), 2); + height: math.div(map.get($v, 'f'), 2); + } } } } @@ -202,17 +193,17 @@ class RadioItem extends Component { `, // 状态 css` + :host([readonly]), :host([disabled]) { - cursor: not-allowed; opacity: 0.6; } - :host([readonly]) { - cursor: default; + :host([disabled]) { + cursor: not-allowed; } ` ] - toggleCheck(ev) { + #toggleCheck(ev) { if (this.disabled || this.readOnly || this.checked) { return } @@ -228,9 +219,9 @@ class RadioItem extends Component { } } - handleClick(ev) { + #click(ev) { if (ev.type === 'click' || ev.keyCode === 32) { - this.toggleCheck(ev) + this.#toggleCheck(ev) } } @@ -243,8 +234,8 @@ class RadioItem extends Component { render() { return html`