增加tag组件

Readme.md

@@ -16,7 +16,7 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (39/55)
+### 开发进度 && 计划 (40/55)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件
@@ -64,7 +64,7 @@
 - [x] `wc-steps` 步骤条组件
 - [x] `wc-timeline` 时间线组件
 - [ ] `wc-layout` 布局组件
-- [ ] `wc-tag` 标签组件
+- [x] `wc-tag` 标签组件
 - [ ] `wc-tooltip` 文字提示组件
 - [x] `wc-popconfirm` 气泡确认框组件
 - [ ] `wc-chatbubble` 聊天气泡组件

src/index.js

@@ -23,3 +23,4 @@ import './tabs/index.js'
 import './timeline/index.js'
 import './result/index.js'
 import './progress/index.js'
+import './tag/index.js'

src/progress/index.js

@@ -4,7 +4,7 @@
  * @date 2023/04/28 16:14:10
  */
 
-import { css, html, Component, styleMap, svg } from '@bd/core'
+import { css, html, Component, styleMap } from '@bd/core'
 
 class Progress extends Component {
   static props = {
@@ -57,12 +57,6 @@ class Progress extends Component {
       default: false,
       attribute: true
     },
-
-    format: {
-      type: Function,
-      default: null,
-      attribute: false
-    },
     'back-color': {
       type: String,
       default: '#ebeef5',
@@ -89,13 +83,14 @@ class Progress extends Component {
       :host([type='line']) {
         width: 100%;
         .progress-text {
-          width: auto;
+          width: 40px;
           margin-left: 5px;
           display: inline-block;
         }
       }
       .progress-bar {
         display: inline-block;
+        width: 100%;
         vertical-align: middle;
       }
       .bar-outer,
@@ -271,7 +266,7 @@ class Progress extends Component {
     }
 
     return html`
-      <div class="progress-bar" style=${`width:${this.width}px`}>
+      <div class="progress-bar">
         <div
           class="bar-outer"
           :style=${styleMap({

src/result/index.js

@@ -4,7 +4,7 @@
  * @date 2023/04/28 16:14:10
  */
 
-import { css, html, Component, styleMap } from '@bd/core'
+import { css, html, Component } from '@bd/core'
 import '../icon/index.js'
 
 class Result extends Component {
@@ -97,9 +97,6 @@ class Result extends Component {
     }
     return this.type
   }
-  mounted() {
-    console.log(this.subTitle)
-  }
 
   render() {
     return html`

src/tag/index.js

@@ -0,0 +1,216 @@
+/**
+ * {标签}
+ * @author chensbox<chensbox@foxmail.com>
+ * @date 2023/04/28 16:14:10
+ */
+
+import { css, html, Component, styleMap } from '@bd/core'
+import '../icon/index.js'
+
+const ANIMATION = {
+  duration: 100,
+  custom: [{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }]
+}
+
+class Tag extends Component {
+  static props = {
+    type: {
+      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-block;
+        text-align: center;
+        box-sizing: border-box;
+      }
+
+      .tag {
+        display: inline-block;
+        box-sizing: border-box;
+        width: 100%;
+        font-size: 12px;
+        border-radius: 4px;
+        white-space: nowrap;
+      }
+      .close-btn {
+        padding: 4px;
+        display: inline-block;
+        line-height: 0;
+        border-radius: 50%;
+        vertical-align: middle;
+        &:hover {
+          background: pink;
+          cursor: pointer;
+        }
+      }
+    `,
+    //尺寸
+    css`
+      @use 'sass:map';
+      $sizes: (
+        s: (
+          h: 20px,
+          p: 0 5px,
+          s: 0.7
+        ),
+        m: (
+          h: 24px,
+          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}']) {
+          height: map.get($v, 'h');
+          .tag {
+            padding: map.get($v, 'p');
+            line-height: calc(map.get($v, 'h') - 2px);
+          }
+          .close-btn {
+            --size: 10px;
+            transform: scale(map.get($v, 's'));
+          }
+        }
+      }
+    `,
+    // 配色
+    css`
+      $colors: (
+        default: 'plain',
+        info: 'grey',
+        success: 'green',
+        warning: 'orange',
+        danger: 'red'
+      );
+
+      @loop $t, $c in $colors {
+        :host([type='#{$t}']) {
+          &:host([effect='light']) {
+            .tag {
+              background-color: var(--color-#{$c}-a);
+              border: 1px solid transparent;
+              @if $t == 'default' {
+                color: var(--color-blue-3);
+              } @else {
+                color: var(--color-#{$c}-3);
+              }
+            }
+            .close-btn:hover {
+              color: #fff;
+              @if $t == 'default' {
+                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() {
+    this.$refs.tag.$animate(true).then(() => this.$emit('close'))
+  }
+
+  render() {
+    return html`
+      <span
+        class="tag"
+        #animation=${ANIMATION}
+        ref="tag"
+        style=${styleMap({ 'background-color': this.color })}
+      >
+        <slot></slot>
+        ${this.closable
+          ? html`<div class="close-btn" @click=${this.handleClose}>
+              <wc-icon name="close"></wc-icon>
+            </div>`
+          : ''}
+      </span>
+    `
+  }
+}
+
+Tag.reg('tag')