完成开关的重构

src/form/switch.js

@@ -8,134 +8,110 @@ import { nextTick, css, html, Component, classMap } from 'wkit'
 
 class Switch extends Component {
   static props = {
-    value: {
-      type: Boolean,
-      default: false
-    },
+    value: false,
     inactiveText: '',
     activeText: '',
     inlineText: 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: 0 8px 0 2px;
+          height: 32px;
+          padding-right: 8px;
           line-height: 1;
-          -moz-user-select: none;
-          user-select: none;
+          font-size: 14px;
           white-space: nowrap;
+          color: var(--color-dark-1);
           cursor: inherit;
           outline: none;
-          color: var(--color-dark-1);
-        }
+          -webkit-user-select: none;
+          user-select: none;
 
-        .dot {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          min-width: 36px;
-          height: 18px;
-          padding: 0 4px;
-          margin-right: 5px;
-          line-height: 14px;
-          border-radius: 16px;
-          background: var(--color-plain-3);
-          transition: box-shadow 0.2s ease, background 0.2s ease;
-
-          &::before {
-            display: block;
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: #fff;
-            content: '';
-          }
-
-          &::after {
-            display: flex;
-            padding: 0 2px;
-            font-size: 12px;
-            content: attr(st);
-            color: #fff;
-          }
-
-          &.open {
+          &.open .switch {
             flex-direction: row-reverse;
             background: var(--color-teal-1);
           }
         }
-      }
-    `,
 
-    css`
-      :host(:focus-within) .dot {
+        .switch {
+          display: flex;
+          align-items: center;
+          min-width: 32px;
+          height: 18px;
+          padding: 0 2px;
+          margin-right: 5px;
+          border-radius: 16px;
+          font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
+          font-size: 12px;
+          background: var(--color-plain-3);
+          transition: box-shadow 0.2s ease, background 0.2s ease;
+        }
+        .dot {
+          display: block;
+          width: 14px;
+          height: 14px;
+          border-radius: 50%;
+          background: #fff;
+          content: '';
+        }
+        .text {
+          padding: 0 3px;
+          background: none;
+          color: #fff;
+        }
+      }
+
+      :host(:focus-within) .switch {
         box-shadow: 0 0 0 2px var(--color-plain-a);
       }
     `,
+
     // 尺寸
     css`
       @use 'sass:map';
       @use 'sass:math';
       $sizes: (
+        s: (
+          hd: 14px,
+          h: 20px,
+          f: 10px
+        ),
         m: (
-          w: 72px,
+          hd: 16px,
           h: 24px,
           f: 12px
         ),
-        // l: (
-        //   w: 108px,
-        //   h: 32px,
-        //   f: 14px
-        // ),
-        xl:
-          (
-            w: 132px,
-            h: 36px,
-            f: 14px
-          ),
-        xxl: (
-          w: 160px,
-          h: 44px,
+        xl: (
+          hd: 20px,
+          h: 36px,
           f: 14px
         )
       );
 
-      @function double($n) {
-        $m: math.round($n);
-
-        @if $m % 2 == 0px {
-          @return $m;
-        }
-        @return $m + 1;
-      }
-
       @loop $s, $v in $sizes {
         :host([size='#{$s}']) {
-          height: map.get($v, 'h');
-          font-size: map.get($v, 'f');
+          label {
+            height: map.get($v, 'h');
+            font-size: math.max(map.get($v, 'f'), 12px);
+          }
 
+          .switch {
+            min-width: map.get($v, 'hd') * 2 - 4;
+            height: map.get($v, 'hd');
+            padding: 0 #{math.div((map.get($v, 'hd') - map.get($v, 'f')), 2)};
+          }
           .dot {
-            min-width: #{map.get($v, 'f') * 2.5};
-            height: #{double(map.get($v, 'f') * 1.25)};
-            line-height: #{map.get($v, 'f')};
-
-            &::before {
-              width: #{map.get($v, 'f')};
-              height: #{map.get($v, 'f')};
-            }
+            width: map.get($v, 'f');
+            height: map.get($v, 'f');
           }
         }
       }
@@ -143,7 +119,6 @@ class Switch extends Component {
     // 配色
     css`
       $colors: (
-        primary: 'teal',
         info: 'blue',
         success: 'green',
         warning: 'orange',
@@ -152,11 +127,11 @@ class Switch extends Component {
 
       @loop $t, $c in $colors {
         :host([type='#{$t}']) {
-          .dot.open {
+          .open .switch {
             background: var(--color-#{$c}-1);
           }
 
-          &:host(:focus-within) .dot {
+          &:host(:focus-within) .switch {
             box-shadow: 0 0 0 2px var(--color-#{$c}-a);
           }
         }
@@ -175,7 +150,11 @@ class Switch extends Component {
     `
   ]
 
-  toggleCheck(ev) {
+  get #text() {
+    return this.value ? this.activeText : this.inactiveText
+  }
+
+  #toggleCheck(ev) {
     if (this.disabled || this.readOnly) {
       return
     }
@@ -183,45 +162,31 @@ class Switch extends Component {
     ev.stopPropagation()
 
     this.value = !this.value
-    let data = {
-      value: this.value
-    }
+    let data = { value: this.value }
 
-    this.$emit('input')
+    this.$emit('input', data)
     this.$emit('change', data)
   }
 
-  handleClick(ev) {
+  #click(ev) {
     if (ev.type === 'click' || ev.keyCode === 32) {
       ev.preventDefault()
-      this.toggleCheck(ev)
+      this.#toggleCheck(ev)
     }
   }
 
-  mounted() {}
-
   render() {
-    let classes = classMap({ dot: true, open: this.value })
     return html` <label
+      class=${classMap({ open: this.value })}
       tabindex=${this.disabled || this.readOnly ? 'none' : 0}
-      @click=${this.handleClick}
-      @keydown=${this.handleClick}
+      @click=${this.#click}
+      @keydown=${this.#click}
     >
-      <span
-        class=${classes}
-        st=${this.inlineText
-          ? this.value
-            ? this.activeText
-            : this.inactiveText
-          : ''}
-      ></span>
-      <slot
-        >${!this.inlineText
-          ? this.value
-            ? this.activeText
-            : this.inactiveText
-          : ''}</slot
-      >
+      <span class="switch">
+        <i class="dot"></i>
+        <mark class="text">${this.inlineText ? this.#text : ''}</mark>
+      </span>
+      <slot>${this.inlineText ? '' : this.#text}</slot>
     </label>`
   }
 }