From dc95fc5a66fcb2389d227a207ab79dd3508d6a9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Mon, 1 Mar 2021 11:20:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90checkbox=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E8=B0=83=E6=95=B4;=E4=BC=98=E5=8C=96radio=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/checkbox-item.wc | 93 +++++----------------------------------
 src/form/checkbox.wc      |  2 -
 src/form/radio-item.wc    | 12 ++---
 3 files changed, 17 insertions(+), 90 deletions(-)

diff --git a/src/form/checkbox-item.wc b/src/form/checkbox-item.wc
index 3368737..6993a3e 100644
--- a/src/form/checkbox-item.wc
+++ b/src/form/checkbox-item.wc
@@ -10,6 +10,7 @@
   display: inline-flex;
   line-height: 1;
   font-size: 14px;
+  cursor: pointer;
 
   label {
     display: flex;
@@ -23,120 +24,48 @@
     user-select: none;
     white-space: nowrap;
     cursor: inherit;
-    color: var(--color-grey-3);
+    color: var(--color-dark-1);
   }
 
   .dot {
-    --size: 18px;
+    --size: 20px;
     padding: 2px;
-    margin-right: 3px;
+    margin-right: 4px;
   }
 }
 
 :host([readonly]) {
+  cursor: default;
   opacity: 0.8;
 }
 
 :host([disabled]) {
   cursor: not-allowed;
   opacity: 0.6;
-}
 
-:host([size='large']) {
-  font-size: 16px;
   label {
-    height: 42px;
-  }
-  .dot {
-    --size: 22px;
-  }
-}
-:host([size='medium']) {
-  label {
-    height: 38px;
-  }
-  .dot {
-    --size: 20px;
-  }
-}
-:host([size='mini']) {
-  font-size: 12px;
-  label {
-    height: 20px;
-  }
-  .dot {
-    --size: 14px;
+    color: var(--color-grey-2);
   }
 }
 
-:host([type='danger']) label.checked {
+:host([type='danger']) label {
   color: var(--color-red-1);
-  .dot {
-    border-color: var(--color-red-1);
-  }
-  .dot::after {
-    background: var(--color-red-1);
-  }
 }
 
-:host([type='info']) label.checked {
+:host([type='info']) label {
   color: var(--color-blue-1);
-  .dot {
-    border-color: var(--color-blue-1);
-  }
-  .dot::after {
-    background: var(--color-blue-1);
-  }
 }
 
-:host([type='success']) label.checked {
+:host([type='success']) label {
   color: var(--color-green-1);
-  .dot {
-    border-color: var(--color-green-1);
-  }
-  .dot::after {
-    background: var(--color-green-1);
-  }
 }
 
-:host([type='primary']) label.checked {
+:host([type='primary']) label {
   color: var(--color-teal-1);
-  .dot {
-    border-color: var(--color-teal-1);
-  }
-  .dot::after {
-    background: var(--color-teal-1);
-  }
 }
 
-:host([type='warning']) label.checked {
+:host([type='warning']) label {
   color: var(--color-orange-1);
-  .dot {
-    border-color: var(--color-orange-1);
-  }
-  .dot::after {
-    background: var(--color-orange-1);
-  }
-}
-
-:host([type='inverse']) label.checked {
-  color: var(--color-dark-1);
-  .dot {
-    border-color: var(--color-dark-1);
-  }
-  .dot::after {
-    background: var(--color-dark-1);
-  }
-}
-
-:host([color='purple']) label.checked {
-  color: var(--color-purple-1);
-  .dot {
-    border-color: var(--color-purple-1);
-  }
-  .dot::after {
-    background: var(--color-purple-1);
-  }
 }
 </style>
 
diff --git a/src/form/checkbox.wc b/src/form/checkbox.wc
index d10e568..bb54888 100644
--- a/src/form/checkbox.wc
+++ b/src/form/checkbox.wc
@@ -38,7 +38,6 @@ export default class CheckboxGroup {
   }
 
   set value(val) {
-    console.log(this, val, this.props.value, val === this.props.value)
     if (val === this.props.value) {
       return
     }
@@ -71,7 +70,6 @@ export default class CheckboxGroup {
   watch() {
     switch (name) {
       case 'value':
-        console.log(val)
         if (val) {
           this.value = val.split(/,\s*?/)
         }
diff --git a/src/form/radio-item.wc b/src/form/radio-item.wc
index 0f2aff4..9bbe5b1 100644
--- a/src/form/radio-item.wc
+++ b/src/form/radio-item.wc
@@ -17,7 +17,7 @@
     justify-content: center;
     align-items: center;
     min-width: 32px;
-    padding: 0 5px;
+    padding: 0 6px;
     line-height: 1;
     -moz-user-select: none;
     user-select: none;
@@ -34,9 +34,9 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 14px;
-    height: 14px;
-    margin-right: 3px;
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
     border: 2px solid var(--color-dark-1);
     border-radius: 50%;
     background: #fff;
@@ -44,8 +44,8 @@
     &::after {
       display: block;
       visibility: hidden;
-      width: 4px;
-      height: 4px;
+      width: 6px;
+      height: 6px;
       border-radius: 50%;
       background: var(--color-dark-1);
       content: '';