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`