优化button默认大小;完成radio的调整

src/form/button.wc

@@ -9,7 +9,8 @@
 :host {
   overflow: hidden;
   display: inline-flex;
-  min-width: 76px;
+  min-width: 72px;
+  width: 128px;
   height: 36px;
   border-radius: 6px;
   user-select: none;
@@ -50,7 +51,7 @@
 }
 
 :host([size='large']) {
-  min-width: 212px;
+  width: 212px;
   height: 52px;
   font-size: 18px;
 
@@ -71,7 +72,7 @@
   }
 }
 :host([size='medium']) {
-  min-width: 128px;
+  width: 160px;
   height: 44px;
 
   button {
@@ -82,13 +83,15 @@
   min-width: 44px;
 }
 :host([size='small']) {
+  width: 96px;
   height: 32px;
 }
 :host([size='small'][circle]) {
   min-width: 32px;
+  width: 32px;
 }
 :host([size='mini']) {
-  min-width: 32px;
+  width: 72px;
   height: 26px;
   font-size: 12px;
 
@@ -102,6 +105,7 @@
 }
 :host([size='mini'][circle]) {
   min-width: 26px;
+  width: 26px;
 }
 
 :host([round]) {

src/form/radio-item.wc

@@ -10,20 +10,20 @@
   display: inline-flex;
   line-height: 1;
   font-size: 14px;
+  cursor: pointer;
 
   label {
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 32px;
-    height: 32px;
     padding: 0 5px;
     line-height: 1;
     -moz-user-select: none;
     user-select: none;
     white-space: nowrap;
     cursor: inherit;
-    color: var(--color-grey-3);
+    color: var(--color-dark-1);
 
     &.checked .dot::after {
       visibility: visible;
@@ -34,80 +34,26 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 18px;
+    width: 14px;
-    height: 18px;
+    height: 14px;
     margin-right: 3px;
-    border: 1px solid var(--color-grey-1);
+    border: 2px solid var(--color-dark-1);
     border-radius: 50%;
     background: #fff;
 
     &::after {
       display: block;
       visibility: hidden;
-      width: 12px;
+      width: 4px;
-      height: 12px;
+      height: 4px;
       border-radius: 50%;
-      background: var(--color-grey-1);
+      background: var(--color-dark-1);
       content: '';
     }
   }
 }
 
-:host([readonly]) {
+:host([type='danger']) label {
-  opacity: 0.8;
-}
-
-:host([disabled]) {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-:host([size='large']) {
-  label {
-    min-width: 58px;
-    height: 32px;
-  }
-  .dot {
-    width: 26px;
-    height: 26px;
-
-    &::after {
-      width: 18px;
-      height: 18px;
-    }
-  }
-}
-:host([size='medium']) {
-  label {
-    min-width: 50px;
-    height: 28px;
-  }
-  .dot {
-    width: 22px;
-    height: 22px;
-
-    &::after {
-      width: 14px;
-      height: 14px;
-    }
-  }
-}
-:host([size='mini']) {
-  label {
-    height: 14px;
-  }
-  .dot {
-    width: 14px;
-    height: 14px;
-
-    &::after {
-      width: 8px;
-      height: 8px;
-    }
-  }
-}
-
-:host([type='danger']) label.checked {
   color: var(--color-red-1);
   .dot {
     border-color: var(--color-red-1);
@@ -117,7 +63,7 @@
   }
 }
 
-:host([type='info']) label.checked {
+:host([type='info']) label {
   color: var(--color-blue-1);
   .dot {
     border-color: var(--color-blue-1);
@@ -127,7 +73,7 @@
   }
 }
 
-:host([type='success']) label.checked {
+:host([type='success']) label {
   color: var(--color-green-1);
   .dot {
     border-color: var(--color-green-1);
@@ -137,7 +83,7 @@
   }
 }
 
-:host([type='primary']) label.checked {
+:host([type='primary']) label {
   color: var(--color-teal-1);
   .dot {
     border-color: var(--color-teal-1);
@@ -147,7 +93,7 @@
   }
 }
 
-:host([type='warning']) label.checked {
+:host([type='warning']) label {
   color: var(--color-orange-1);
   .dot {
     border-color: var(--color-orange-1);
@@ -157,23 +103,23 @@
   }
 }
 
-:host([type='inverse']) label.checked {
+:host([readonly]) {
-  color: var(--color-dark-1);
+  cursor: default;
-  .dot {
+  opacity: 0.8;
-    border-color: var(--color-dark-1);
-  }
-  .dot::after {
-    background: var(--color-dark-1);
-  }
 }
 
-:host([color='purple']) label.checked {
+:host([disabled]) {
-  color: var(--color-purple-1);
+  cursor: not-allowed;
+  opacity: 0.6;
+
+  label {
+    color: var(--color-grey-2);
     .dot {
-    border-color: var(--color-purple-1);
+      border-color: var(--color-grey-1);
     }
     .dot::after {
-    background: var(--color-purple-1);
+      background: var(--color-grey-1);
+    }
   }
 }
 </style>
@@ -181,7 +127,7 @@
 <script>
 import $ from '../utils'
 
-export default class RadioItem {
+export default class Radio {
   props = {
     value: '',
     checked: false,
@@ -259,6 +205,8 @@ export default class RadioItem {
         return
       }
 
+      this.checked = true
+
       this.parentNode.dispatchEvent(
         new CustomEvent('child-picked', { detail: this.value })
       )

src/form/radio.wc

@@ -12,7 +12,7 @@
 import $ from '../utils'
 import './radio-item'
 
-export default class Radio {
+export default class RadioGroup {
   props = {
     value: null
   }
@@ -23,7 +23,7 @@ export default class Radio {
 
   _updateChildrenStat() {
     Array.from(this.children).forEach(it => {
-      if (it.tagName === 'WC-RADIO-ITEM' && it.root) {
+      if (it.tagName === 'WC-RADIO' && it.root) {
         if (it.value === this.props.value) {
           it.checked = true
         } else {
@@ -47,7 +47,6 @@ export default class Radio {
 
   mounted() {
     this._pickedFn = $.bind(this, 'child-picked', ev => {
-      log('radio picked: ', ev.detail)
       this.value = ev.detail
       this.dispatchEvent(new CustomEvent('input'))
     })