完成Badge组件

Readme.md

@@ -1,25 +1,24 @@
 # @bd/wcui
-百搭WCUI组件库, 基于web components开发。面向下一代的UI组件库
 
+百搭 WCUI 组件库, 基于 web components 开发。面向下一代的 UI 组件库
 
 ### 开发环境
 
-  + vscode  开源编辑器
+- vscode 开源编辑器
+
   - `Prettier`插件, 格式化代码用
-    - `string-html-css`, 可高亮显示js中的`html/css`文本, 并支持`emmet`
+  - `string-html-css`, 可高亮显示 js 中的`html/css`文本, 并支持`emmet`
-    - `simple http`, 可快速配置http服务器,支持history路由
+  - `simple http`, 可快速配置 http 服务器,支持 history 路由
   - ...
 
-  + @bd/core  针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发wc组件
+- @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
-
-
 
 ### 开发进度 && 计划
 
 - [x] `wc-card`卡片组件
 - [x] `wc-space`间隔组件
 - [ ] `wc-avatar`头像组件
-- [ ] `wc-badge`徽标组件
+- [x] `wc-badge`徽标组件
 - [ ] `wc-counter`倒计时组件
 - [ ] `wc-drag`拖拽组件
 - [x] `wc-button`表单组件-按钮
@@ -27,7 +26,8 @@
 - [x] `wc-checkbox`表单组件-复选框
 - [ ] `wc-input`表单组件-文本输入框
 - [x] `wc-passwd`表单组件-文本输入框
-- [ ] `wc-number`表单组件-步进数字输入
+- [x] `wc-textarea`表单组件-多行文本输入框
+- [x] `wc-number`表单组件-步进数字输入
 - [ ] `wc-star`表单组件-评分
 - [x] `wc-radio`表单组件-单选框
 - [ ] `wc-select`表单组件-下拉选择
@@ -35,8 +35,8 @@
 - [ ] `wc-switch`表单组件-开关
 - [x] `wc-icon`图标组件
 - [ ] `wc-layer` 弹层组件
-- [x] `wc-markd`markdown组件
+- [x] `wc-markd`markdown 组件
-- [ ] `wc-meditor`md文本编辑器
+- [ ] `wc-meditor`md 文本编辑器
 - [ ] `wc-neditor`富文本编辑器
 - [ ] `wc-pager`分页组件
 - [ ] `wc-colorpicker`颜色选择器
@@ -44,12 +44,11 @@
 - [ ] `wc-timepicker`时间选择器
 - [x] `wc-code`代码高亮插件
 - [x] `wc-scroll`滚动组件
-- [ ] `wc-silder`滑块组件
+- [x] `wc-silder`滑块组件
 - [ ] `wc-progress`进度条组件
 - [ ] `wc-tree`树形菜单组件
 - [ ] `wc-uploader`上传组件
 
-
 ### 测试预览
 
 [测试预览](./develop.md)

src/badge/index.js

@@ -0,0 +1,100 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/03/21 16:14:10
+ */
+
+import { css, html, Component } from '@bd/core'
+
+class Badge extends Component {
+  static props = {
+    value: '',
+    type: 'info',
+    max: {
+      type: Number,
+      default: null
+    },
+    hidden: false,
+    'is-dot': false
+  }
+
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+      .num {
+        z-index: 100;
+        position: absolute;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        left: calc(100% - 9px);
+        top: -10px;
+        height: 18px;
+        padding: 0 6px;
+        border-radius: 10px;
+        font-size: 12px;
+        white-space: nowrap;
+        color: #fff;
+        background: var(--color-blue-3);
+      }
+      :host([is-dot])::after {
+        z-index: 100;
+        position: absolute;
+        height: 8px;
+        width: 8px;
+        top: -4px;
+        left: calc(100% - 4px);
+        background: var(--color-blue-3);
+        border-radius: 50%;
+        content: '';
+      }
+      :host([hidden])::after {
+        display: none;
+        content: '';
+      }
+    `,
+
+    //配色
+    css`
+      $colors: (
+        primary: 'teal',
+        info: 'blue',
+        success: 'green',
+        warning: 'orange',
+        danger: 'red',
+        secondary: 'dark',
+        help: 'grey'
+      );
+
+      @loop $t, $c in $colors {
+        :host([type='#{$t}']) {
+          .num {
+            background-color: var(--color-#{$c}-3);
+          }
+          &::after {
+            background-color: var(--color-#{$c}-3);
+          }
+        }
+      }
+    `
+  ]
+  render() {
+    return html`
+      <div class="badge" ref="bad">
+        <slot></slot>
+        ${!this['is-dot'] && !this.hidden
+          ? html`<div class="num">
+              ${this.max && this.value >= this.max
+                ? this.max + '+'
+                : this.value}
+            </div>`
+          : ''}
+      </div>
+    `
+  }
+}
+
+Badge.reg('badge')