完成单选组件的重构

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

src/form/switch.js

@@ -38,7 +38,7 @@ class Switch extends Component {
 
           &.open .switch {
             flex-direction: row-reverse;
-            background: var(--color-teal-1);
+            background: var(--color-grey-3);
           }
         }
 
@@ -119,6 +119,7 @@ class Switch extends Component {
     // 配色
     css`
       $colors: (
+        primay: 'teal',
         info: 'blue',
         success: 'green',
         warning: 'orange',
@@ -141,11 +142,10 @@ class Switch extends Component {
     css`
       :host([readonly]),
       :host([disabled]) {
-        cursor: not-allowed;
         opacity: 0.6;
       }
-      :host([readonly]) {
-        cursor: default;
+      :host([disabled]) {
+        cursor: not-allowed;
       }
     `
   ]