完成单选组件

Readme.md

@@ -29,7 +29,7 @@
 - [x] `wc-passwd`表单组件-文本输入框
 - [ ] `wc-number`表单组件-步进数字输入
 - [ ] `wc-star`表单组件-评分
-- [ ] `wc-radio`表单组件-单选框
+- [x] `wc-radio`表单组件-单选框
 - [ ] `wc-select`表单组件-下拉选择
 - [ ] `wc-cascadar`表单组件-多级联动
 - [ ] `wc-switch`表单组件-开关

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`<label>
-      <span class="dot"></span>
-      <slot></slot>
-    </label>`
-  }
 }
 
 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`<label
-      tabindex="0"
+    return html` <label
+      ref="radio"
+      tabindex=${this.disabled ? 'none' : 0}
       @click=${this.handleClick}
       @keydown=${this.handleClick}
     >