diff --git a/Readme.md b/Readme.md index 3f20038..07646e4 100644 --- a/Readme.md +++ b/Readme.md @@ -29,7 +29,7 @@ - [x] `wc-passwd`表单组件-文本输入框 - [ ] `wc-number`表单组件-步进数字输入 - [ ] `wc-star`表单组件-评分 -- [ ] `wc-radio`表单组件-单选框 +- [x] `wc-radio`表单组件-单选框 - [ ] `wc-select`表单组件-下拉选择 - [ ] `wc-cascadar`表单组件-多级联动 - [ ] `wc-switch`表单组件-开关 diff --git a/src/form/radio.js b/src/form/radio.js index 332cde2..bc053aa 100644 --- a/src/form/radio.js +++ b/src/form/radio.js @@ -13,18 +13,27 @@ class Radio extends Component { default: '', attribute: false, observer() { - // this.#updateChildrenStat() + this.#updateChildrenStat() } }, disabled: false, readonly: false } + static styles = css` + :host { + display: inline-flex; + flex-wrap: wrap; + align-items: center; + } + ` + mounted() { this.$on('child-change', ev => { - console.log(ev) this.value = ev.value + this.$emit('change', { data: ev.value }) }) + this.#updateChildrenStat(true) } #updateChildrenStat(checkAll) { @@ -47,13 +56,6 @@ class Radio extends Component { } }) } - - render() { - return html`` - } } class RadioItem extends Component { @@ -132,11 +134,6 @@ class RadioItem extends Component { css` @use 'sass:map'; $sizes: ( - s: ( - w: 52px, - h: 20px, - f: 12px - ), m: ( w: 72px, h: 24px, @@ -161,50 +158,19 @@ class RadioItem extends Component { w: 192px, h: 52px, f: 16px - ), - xxxxl: ( - w: 212px, - h: 64px, - f: 18px ) ); @loop $s, $v in $sizes { :host([size='#{$s}']) { - min-width: map.get($v, 'w'); height: map.get($v, 'h'); font-size: map.get($v, 'f'); - .icon { - --size: #{map.get($v, 'f')}; + .dot { + width: #{map.get($v, 'f')}; + height: #{map.get($v, 'f')}; } } - :host([size='#{$s}'][circle]) { - width: map.get($v, 'h'); - height: map.get($v, 'h'); - } - } - - :host([dashed]) button { - border-style: dashed; - } - - :host([round]) { - border-radius: 32px; - } - :host([circle]) { - min-width: 0; - border-radius: 50%; - button { - padding: 0; - } - .icon { - margin-right: 0; - } - - slot { - display: none; - } } `, // 配色 @@ -241,11 +207,14 @@ class RadioItem extends Component { `, // 状态 css` - :host([loading]), + :host([readonly]), :host([disabled]) { cursor: not-allowed; opacity: 0.6; } + :host([readonly]) { + cursor: default; + } ` ] @@ -272,16 +241,15 @@ class RadioItem extends Component { } mounted() { - console.log(this.value) if (this.parentNode?.tagName === 'WC-RADIO-GROUP') { this.inGroup = true } } render() { - console.log('render', this.value) - return html`