From 08a6bb043d7bf47511b543b7fb2c2a541f42e9e6 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Wed, 29 Nov 2023 12:21:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E5=A4=A7=E6=B3=A2=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/base/button.js   | 48 +++++++++-----------------------------------
 src/base/icon.js     | 28 ++++++++------------------
 src/form/checkbox.js | 32 +++++++----------------------
 src/form/radio.js    | 38 +++++++++--------------------------
 src/form/star.js     | 22 +++-----------------
 5 files changed, 38 insertions(+), 130 deletions(-)

diff --git a/src/base/button.js b/src/base/button.js
index 088991f..d554f44 100644
--- a/src/base/button.js
+++ b/src/base/button.js
@@ -123,47 +123,19 @@ class Button extends Component {
     `,
     // 尺寸
     css`
-      @use 'sass:map';
-      $sizes: (
-        s: (
-          w: 52px,
-          h: 20px,
-          f: 12px
-        ),
-        m: (
-          w: 72px,
-          h: 24px,
-          f: 12px
-        ),
-        // l 为默认
-        xl:
-          (
-            w: 132px,
-            h: 36px,
-            f: 14px
-          ),
-        xxl: (
-          w: 160px,
-          h: 44px,
-          f: 14px
-        )
-      );
+      :host([size='small']) {
+        min-width: 72px;
+        height: 24px;
+        font-size: 12px;
 
-      @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 {
-            --wc-icon-size: var(--wc-button-icon-size, #{map.get($v, 'f')});
-          }
-        }
-        :host([size='#{$s}'][circle]) {
-          width: map.get($v, 'h');
-          height: map.get($v, 'h');
+        .icon {
+          --wc-icon-size: 12px;
         }
       }
+      :host([size='small'][circle]) {
+        width: 24px;
+        height: 24px;
+      }
 
       :host([dashed]) button {
         border-style: dashed;
diff --git a/src/base/icon.js b/src/base/icon.js
index 589b12c..7b49295 100644
--- a/src/base/icon.js
+++ b/src/base/icon.js
@@ -48,28 +48,19 @@ class Icon extends Component {
       color: inherit;
       fill: currentColor;
 
-      &.loading {
-        animation: load 1.5s linear infinite;
-      }
-
       circle {
         stroke: currentColor;
         animation: circle 1.5s ease-in-out infinite;
       }
     }
-    $gaps: (
-      's': 20px,
-      'm': 24px,
-      'l': 32px,
-      'xl': 36px,
-      'xxl': 44px
-    );
 
-    @loop $k, $v in $gaps {
-      :host([size='#{$k}']) {
-        width: $v;
-        height: $v;
-      }
+    :host([name='loading']) svg {
+      animation: load 1.5s linear infinite;
+    }
+
+    :host([size='small']) {
+      width: 24px;
+      height: 24px;
     }
 
     @keyframes circle {
@@ -96,10 +87,7 @@ class Icon extends Component {
 
   render() {
     return html`
-      <svg
-        class=${classMap({ svg: true, loading: this.name === 'loading' })}
-        viewBox="0 0 1024 1024"
-      >
+      <svg class=${classMap({ svg: true })} viewBox="0 0 1024 1024">
         ${this.name === 'loading'
           ? svg`<circle cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
           : svg`<path d="${dict[this.name]}" />`}
diff --git a/src/form/checkbox.js b/src/form/checkbox.js
index 4c100e9..c6ac6bc 100644
--- a/src/form/checkbox.js
+++ b/src/form/checkbox.js
@@ -74,7 +74,7 @@ class CheckboxItem extends Component {
     css`
       :host {
         display: inline-flex;
-        align-items: center;
+        height: 32px;
         cursor: pointer;
 
         label {
@@ -126,30 +126,12 @@ class CheckboxItem extends Component {
     `,
     // 尺寸
     css`
-      @use 'sass:map';
-      $sizes: (
-        s: (
-          h: 20px,
-          f: 12px
-        ),
-        m: (
-          h: 24px,
-          f: 12px
-        ),
-        xl: (
-          h: 36px,
-          f: 16px
-        )
-      );
+      :host([size='small']) {
+        height: 24px;
 
-      @loop $s, $v in $sizes {
-        :host([size='#{$s}']) {
-          height: map.get($v, 'h');
-
-          .dot {
-            width: map.get($v, 'f');
-            height: map.get($v, 'f');
-          }
+        .dot {
+          width: 12px;
+          height: 12px;
         }
       }
     `,
@@ -225,7 +207,7 @@ class CheckboxItem extends Component {
   }
 
   render() {
-    return html` <label
+    return html`<label
       tabindex=${this.disabled || this.readOnly ? 'none' : 0}
       @click=${this.#click}
       @keydown=${this.#click}
diff --git a/src/form/radio.js b/src/form/radio.js
index 51d7bc4..4ca58dc 100644
--- a/src/form/radio.js
+++ b/src/form/radio.js
@@ -72,6 +72,7 @@ class RadioItem extends Component {
     css`
       :host {
         display: inline-flex;
+        height: 32px;
         cursor: pointer;
 
         label {
@@ -127,35 +128,16 @@ class RadioItem extends Component {
     `,
     // 尺寸
     css`
-      @use 'sass:math';
-      @use 'sass:map';
-      $sizes: (
-        s: (
-          h: 20px,
-          f: 12px
-        ),
-        m: (
-          h: 24px,
-          f: 12px
-        ),
-        xl: (
-          h: 36px,
-          f: 16px
-        )
-      );
+      :host([size='small']) {
+        height: 24px;
 
-      @loop $s, $v in $sizes {
-        :host([size='#{$s}']) {
-          height: map.get($v, 'h');
+        .dot {
+          width: 12px;
+          height: 12px;
 
-          .dot {
-            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);
-            }
+          &::after {
+            width: 6px;
+            height: 6px;
           }
         }
       }
@@ -232,7 +214,7 @@ class RadioItem extends Component {
   }
 
   render() {
-    return html` <label
+    return html`<label
       tabindex=${this.disabled || this.readOnly ? 'none' : 0}
       @click=${this.#click}
       @keydown=${this.#click}
diff --git a/src/form/star.js b/src/form/star.js
index 79f13e2..02d7096 100644
--- a/src/form/star.js
+++ b/src/form/star.js
@@ -63,25 +63,9 @@ class Star extends Component {
     `,
     // 尺寸
     css`
-      @use 'sass:map';
-      $sizes: (
-        s: (
-          w: 52px,
-          h: 20px,
-          f: 12px
-        ),
-        m: (
-          w: 72px,
-          h: 24px,
-          f: 12px
-        )
-      );
-
-      @loop $s, $v in $sizes {
-        :host([size='#{$s}']) {
-          --wc-icon-size: #{map.get($v, 'h')};
-          font-size: map.get($v, 'f');
-        }
+      :host([size='small']) {
+        --wc-star-size: 24px;
+        font-size: 12px;
       }
     `,
     // 状态