增加步骤条组件; 更新开发计划表

Readme.md

@@ -13,7 +13,7 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (29/43)
+### 开发进度 && 计划 (29/54)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件
@@ -58,6 +58,17 @@
 - [x] `wc-notify` 通知组件
 - [ ] `wc-loading` 加载组件
 - [x] `wc-tabs` 选项卡组件
+- [ ] `wc-steps` 步骤条组件
+- [ ] `wc-timeline` 时间线组件
+- [ ] `wc-layout` 布局组件
+- [ ] `wc-tag` 标签组件
+- [ ] `wc-tooltip` 文字提示组件
+- [ ] `wc-popconfirm` 气泡确认框组件
+- [ ] `wc-chatbox` 聊天气泡组件
+- [ ] `wc-divider` 分割线组件
+- [ ] `wc-table` 表格组件
+- [ ] `wc-result` 结果反馈组件
+- [ ] `wc-empty` 空状态组件
 
 ### 测试预览
 

src/steps/index.js

@@ -0,0 +1,127 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/04/18 09:38:01
+ */
+
+import { css, html, Component, bind, styleMap, classMap } from '@bd/core'
+import '../icon/index.js'
+
+class Steps extends Component {
+  static props = {
+    active: 1,
+    vertical: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      :host([vertical]) {
+        flex-direction: column;
+      }
+    `
+  ]
+
+  mounted() {
+    ;[...this.children].forEach((it, i) => {
+      if (it.tagName === 'WC-STEP') {
+        it.index = i + 1
+        it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
+        it.vertical = this.vertical
+      } else {
+        it.remove()
+      }
+    })
+  }
+}
+
+class Step extends Component {
+  static props = {
+    title: '',
+    description: '',
+    index: { type: Number, default: 1, attribute: false },
+    status: { type: Number, default: 0, attribute: false },
+    vertical: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        font-size: 14px;
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px;
+        color: var(--color-dark-1);
+        user-select: none;
+
+        &[status='2'] {
+          color: var(--color-teal-1);
+
+          .num {
+            border-color: var(--color-teal-1);
+          }
+        }
+        &[status='0'] {
+          opacity: 0.6;
+        }
+      }
+
+      :host([vertical]) {
+        .container {
+          flex-direction: row;
+        }
+        .group {
+          align-items: flex-start;
+          margin-left: 12px;
+        }
+      }
+
+      .num {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: 1px solid var(--color-grey-1);
+        border-radius: 50%;
+      }
+      .group {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      .title {
+        line-height: 2;
+      }
+      .description {
+        line-height: 1.5;
+        font-size: 12px;
+      }
+    `
+  ]
+
+  render() {
+    return html`
+      <label class="container" status=${this.status}>
+        <span class="num">${this.index}</span>
+        <div class="group">
+          <strong class="title">${this.title}</strong>
+          <cite class="description">${this.description}</cite>
+        </div>
+      </label>
+    `
+  }
+}
+
+Steps.reg('steps')
+Step.reg('step')