完成 tag组件的重构

src/icon/index.js

@@ -4,7 +4,7 @@
  * @date 2023/03/06 15:17:25
  */
 
-import { css, svg, html, Component } from 'wkit'
+import { css, svg, html, Component, classMap } from 'wkit'
 
 import SVG_DICT from './svg.js'
 
@@ -35,7 +35,7 @@ class Icon extends Component {
     :host(:not([name])) {
       display: none;
     }
-    .icon {
+    .svg {
       display: block;
       width: 100%;
       height: 100%;
@@ -91,11 +91,11 @@ class Icon extends Component {
   render() {
     return html`
       <svg
-        class="icon ${this.name === 'loading' ? 'loading' : ''}"
+        class=${classMap({ svg: true, loading: this.name === 'loading' })}
         viewBox="0 0 1024 1024"
       >
         ${this.name === 'loading'
-          ? svg`<circle class="circle" cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
+          ? svg`<circle cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
           : svg`<path d="${dict[this.name]}" />`}
       </svg>
     `

src/tag/index.js

@@ -4,65 +4,48 @@
  * @date 2023/04/28 16:14:10
  */
 
-import { css, html, Component, styleMap } from 'wkit'
+import { css, html, Component } from 'wkit'
 import '../icon/index.js'
 
-const ANIMATION = {
+const ANIMATION = { type: 'scale' }
-  duration: 100,
-  custom: [{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }]
-}
 
 class Tag extends Component {
   static props = {
-    type: {
+    closable: false
-      type: String,
-      default: 'default'
-    },
-    closable: {
-      type: Boolean,
-      default: false
-    },
-    hit: {
-      type: Boolean,
-      default: false
-    },
-    color: '',
-    size: {
-      type: String,
-      default: 'xl'
-    },
-    effect: {
-      type: String,
-      default: 'light' // dark / light / plain
-    }
   }
 
   static styles = [
     css`
       :host {
-        position: relative;
+        display: inline-flex;
-        display: inline-block;
-        text-align: center;
-        box-sizing: border-box;
       }
 
-      .tag {
+      .container {
-        display: inline-block;
+        display: flex;
-        box-sizing: border-box;
+        align-items: center;
-        width: 100%;
+        width: auto;
-        font-size: 12px;
+        height: 32px;
-        border-radius: 4px;
+        padding: 0 10px;
+        gap: 3px;
+        font-size: var(--wc-tag-font, 12px);
+        border: 1px solid var(--wc-tag-border-color, var(--color-grey-1));
+        border-radius: 3px;
+        background: var(--wc-tag-background, var(--color-plain-1));
         white-space: nowrap;
+        -webkit-user-select: none;
+        user-select: none;
       }
-      .close-btn {
+      .close {
-        padding: 4px;
+        padding: 3px;
-        display: inline-block;
+        display: inline-flex;
-        line-height: 0;
+        --wc-icon-size: 8px;
+        line-height: 1;
         border-radius: 50%;
-        vertical-align: middle;
-        &:hover {
-          background: pink;
         cursor: pointer;
+
+        &:hover {
+          background: var(--color-grey-2);
+          color: #fff;
         }
       }
     `,
@@ -72,143 +55,80 @@ class Tag extends Component {
       $sizes: (
         s: (
           h: 20px,
-          p: 0 5px,
+          p: 0 6px
-          s: 0.7
         ),
         m: (
           h: 24px,
-          p: 0 8px,
+          p: 0 8px
-          s: 0.8
-        ),
-        l: (
-          h: 28px,
-          p: 0 10px,
-          s: 0.8
-        ),
-        xl: (
-          h: 32px,
-          p: 0 10px,
-          s: 1
         )
       );
 
       @loop $s, $v in $sizes {
         :host([size='#{$s}']) {
+          .container {
             height: map.get($v, 'h');
-          .tag {
             padding: map.get($v, 'p');
-            line-height: calc(map.get($v, 'h') - 2px);
-          }
-          .close-btn {
-            --wc-icon-size: 10px;
-            transform: scale(map.get($v, 's'));
           }
         }
       }
     `,
     // 配色
     css`
+      @use 'sass:map';
       $colors: (
-        default: 'plain',
+        primary: (
-        info: 'grey',
+          c: 'teal',
-        success: 'green',
+          b: #ecf5ff
-        warning: 'orange',
+        ),
-        danger: 'red'
+        info: (
+          c: 'blue',
+          b: #ecf5ff
+        ),
+        success: (
+          c: 'green',
+          b: #f0f9eb
+        ),
+        warning: (
+          c: 'orange',
+          b: #fdf6ec
+        ),
+        danger: (
+          c: 'red',
+          b: #fef0f0
+        )
       );
 
-      @loop $t, $c in $colors {
+      @loop $t, $v in $colors {
         :host([type='#{$t}']) {
-          &:host([effect='light']) {
+          .container {
-            .tag {
+            border-color: var(--color-#{map.get($v, 'c')}-a);
-              background-color: var(--color-#{$c}-a);
+            background: #{map.get($v, 'b')};
-              border: 1px solid transparent;
+            color: var(--color-#{map.get($v, 'c')}-3);
-              @if $t == 'default' {
-                color: var(--color-blue-3);
-              } @else {
-                color: var(--color-#{$c}-3);
           }
-            }
+          .close:hover {
-            .close-btn:hover {
             color: #fff;
-              @if $t == 'default' {
+            background: var(--color-#{map.get($v, 'c')}-1);
-                background-color: var(--color-blue-2);
-              } @else {
-                background-color: var(--color-#{$c}-2);
-              }
-            }
-          }
-
-          &:host([effect='dark']) {
-            .tag {
-              @if $t == 'default' {
-                background-color: var(--color-blue-3);
-                border: 1px solid var(--color-blue-3);
-              } @else {
-                background-color: var(--color-#{$c}-3);
-                border: 1px solid var(--color-#{$c}-3);
-              }
-              color: #fff;
-            }
-            .close-btn:hover {
-              @if $t == 'default' {
-                background-color: var(--color-blue-1);
-              } @else {
-                background-color: var(--color-#{$c}-1);
-              }
-            }
-          }
-
-          &:host([effect='plain']) {
-            .tag {
-              @if $t == 'default' {
-                color: var(--color-blue-3);
-              } @else {
-                color: var(--color-#{$c}-3);
-              }
-              background-color: #fff;
-              border: 1px solid var(--color-#{$c}-a);
-            }
-            .close-btn:hover {
-              color: #fff;
-              @if $t == 'default' {
-                background-color: var(--color-blue-1);
-              } @else {
-                background-color: var(--color-#{$c}-1);
-              }
-            }
-          }
-
-          &:host([hit]) .tag {
-            @if $t == 'default' {
-              border: 1px solid var(--color-blue-3);
-            } @else {
-              border: 1px solid var(--color-#{$c}-3);
-            }
           }
         }
       }
     `
   ]
 
-  handleClose() {
+  #close() {
-    this.$refs.tag.$animate(true).then(() => this.$emit('close'))
+    this.$refs.tag.$animate(true).then(_ => this.remove())
+    this.$emit('close')
   }
 
   render() {
     return html`
-      <span
+      <main class="container" ref="tag" #animation=${ANIMATION}>
-        class="tag"
-        #animation=${ANIMATION}
-        ref="tag"
-        style=${styleMap({ 'background-color': this.color })}
-      >
         <slot></slot>
         ${this.closable
-          ? html`<div class="close-btn" @click=${this.handleClose}>
+          ? html`<span class="close" @click=${this.#close}
-              <wc-icon name="close"></wc-icon>
+              ><wc-icon name="close"></wc-icon
-            </div>`
+            ></span>`
           : ''}
-      </span>
+      </main>
     `
   }
 }