一大波组件尺寸调整

src/base/button.js

@@ -123,47 +123,19 @@ class Button extends Component {
     `,
     // 尺寸
     css`
-      @use 'sass:map';
+      :host([size='small']) {
-      $sizes: (
+        min-width: 72px;
-        s: (
+        height: 24px;
-          w: 52px,
+        font-size: 12px;
-          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
-        )
-      );
 
-      @loop $s, $v in $sizes {
+        .icon {
-        :host([size='#{$s}']) {
+          --wc-icon-size: 12px;
-          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');
         }
       }
+      :host([size='small'][circle]) {
+        width: 24px;
+        height: 24px;
+      }
 
       :host([dashed]) button {
         border-style: dashed;

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([name='loading']) svg {
-      :host([size='#{$k}']) {
+      animation: load 1.5s linear infinite;
-        width: $v;
+    }
-        height: $v;
+
-      }
+    :host([size='small']) {
+      width: 24px;
+      height: 24px;
     }
 
     @keyframes circle {
@@ -96,10 +87,7 @@ class Icon extends Component {
 
   render() {
     return html`
-      <svg
+      <svg class=${classMap({ svg: true })} viewBox="0 0 1024 1024">
-        class=${classMap({ svg: true, loading: this.name === 'loading' })}
-        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]}" />`}

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';
+      :host([size='small']) {
-      $sizes: (
+        height: 24px;
-        s: (
-          h: 20px,
-          f: 12px
-        ),
-        m: (
-          h: 24px,
-          f: 12px
-        ),
-        xl: (
-          h: 36px,
-          f: 16px
-        )
-      );
 
-      @loop $s, $v in $sizes {
+        .dot {
-        :host([size='#{$s}']) {
+          width: 12px;
-          height: map.get($v, 'h');
+          height: 12px;
-
-          .dot {
-            width: map.get($v, 'f');
-            height: map.get($v, 'f');
-          }
         }
       }
     `,
@@ -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}

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';
+      :host([size='small']) {
-      @use 'sass:map';
+        height: 24px;
-      $sizes: (
-        s: (
-          h: 20px,
-          f: 12px
-        ),
-        m: (
-          h: 24px,
-          f: 12px
-        ),
-        xl: (
-          h: 36px,
-          f: 16px
-        )
-      );
 
-      @loop $s, $v in $sizes {
+        .dot {
-        :host([size='#{$s}']) {
+          width: 12px;
-          height: map.get($v, 'h');
+          height: 12px;
 
-          .dot {
+          &::after {
-            width: map.get($v, 'f');
+            width: 6px;
-            height: map.get($v, 'f');
+            height: 6px;
-
-            &::after {
-              width: math.div(map.get($v, 'f'), 2);
-              height: math.div(map.get($v, 'f'), 2);
-            }
           }
         }
       }
@@ -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}

src/form/star.js

@@ -63,25 +63,9 @@ class Star extends Component {
     `,
     // 尺寸
     css`
-      @use 'sass:map';
+      :host([size='small']) {
-      $sizes: (
+        --wc-star-size: 24px;
-        s: (
+        font-size: 12px;
-          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');
-        }
       }
     `,
     // 状态