增加步骤条组件; 更新开发计划表
parent
a0b8b5e377
commit
a3ed050b70
99
Readme.md
99
Readme.md
|
|
@ -13,51 +13,62 @@
|
|||
|
||||
- @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
|
||||
|
||||
### 开发进度 && 计划 (29/43)
|
||||
### 开发进度 && 计划 (29/54)
|
||||
|
||||
- [x] `wc-card`卡片组件
|
||||
- [x] `wc-space`间隔组件
|
||||
- [ ] `wc-avatar`头像组件
|
||||
- [x] `wc-badge`徽标组件
|
||||
- [x] `wc-drawer`抽屉组件
|
||||
- [x] `wc-collapse`折叠组件
|
||||
- [ ] `wc-dropdown`下拉菜单组件
|
||||
- [ ] `wc-counter`倒计时组件
|
||||
- [ ] `wc-drag`拖拽组件
|
||||
- [x] `wc-image`图片组件
|
||||
- [x] `wc-image-preview`图片预览组件
|
||||
- [x] `wc-button`表单组件-按钮
|
||||
- [x] `wc-link`表单组件-链接按钮
|
||||
- [x] `wc-checkbox`表单组件-复选框
|
||||
- [x] `wc-input`表单组件-文本输入框
|
||||
- [x] `wc-passwd`表单组件-文本输入框
|
||||
- [x] `wc-textarea`表单组件-多行文本输入框
|
||||
- [x] `wc-number`表单组件-步进数字输入
|
||||
- [x] `wc-star`表单组件-评分
|
||||
- [x] `wc-radio`表单组件-单选框
|
||||
- [ ] `wc-select`表单组件-下拉选择
|
||||
- [ ] `wc-cascadar`表单组件-多级联动
|
||||
- [x] `wc-switch`表单组件-开关
|
||||
- [x] `wc-icon`图标组件
|
||||
- [x] `wc-layer` 弹层组件
|
||||
- [x] `wc-markd`markdown 组件
|
||||
- [ ] `wc-meditor`md 文本编辑器
|
||||
- [ ] `wc-neditor`富文本编辑器
|
||||
- [x] `wc-pager`分页组件
|
||||
- [x] `wc-color`颜色选择器
|
||||
- [ ] `wc-datepicker`日期选择器
|
||||
- [ ] `wc-timepicker`时间选择器
|
||||
- [x] `wc-code`代码高亮插件
|
||||
- [x] `wc-scroll`滚动组件
|
||||
- [x] `wc-silder`滑块组件
|
||||
- [x] `wc-swipe`轮播图组件
|
||||
- [x] `wc-breadcrumb` 面包屑组件
|
||||
- [ ] `wc-progress`进度条组件
|
||||
- [ ] `wc-tree`树形菜单组件
|
||||
- [ ] `wc-uploader`上传组件
|
||||
- [x] `wc-notify`通知组件
|
||||
- [ ] `wc-loading`加载组件
|
||||
- [x] `wc-tabs`选项卡组件
|
||||
- [x] `wc-card` 卡片组件
|
||||
- [x] `wc-space` 间隔组件
|
||||
- [ ] `wc-avatar` 头像组件
|
||||
- [x] `wc-badge` 徽标组件
|
||||
- [x] `wc-drawer` 抽屉组件
|
||||
- [x] `wc-collapse` 折叠组件
|
||||
- [ ] `wc-dropdown` 下拉菜单组件
|
||||
- [ ] `wc-counter` 倒计时组件
|
||||
- [ ] `wc-drag` 拖拽组件
|
||||
- [x] `wc-image` 图片组件
|
||||
- [x] `wc-image-preview` 图片预览组件
|
||||
- [x] `wc-button` 表单组件-按钮
|
||||
- [x] `wc-link` 表单组件-链接按钮
|
||||
- [x] `wc-checkbox` 表单组件-复选框
|
||||
- [x] `wc-input` 表单组件-文本输入框
|
||||
- [x] `wc-passwd` 表单组件-文本输入框
|
||||
- [x] `wc-textarea` 表单组件-多行文本输入框
|
||||
- [x] `wc-number` 表单组件-步进数字输入
|
||||
- [x] `wc-star` 表单组件-评分
|
||||
- [x] `wc-radio` 表单组件-单选框
|
||||
- [ ] `wc-select` 表单组件-下拉选择
|
||||
- [ ] `wc-cascadar` 表单组件-多级联动
|
||||
- [x] `wc-switch` 表单组件-开关
|
||||
- [x] `wc-icon` 图标组件
|
||||
- [x] `wc-layer` 弹层组件
|
||||
- [x] `wc-markd` markdown 组件
|
||||
- [ ] `wc-meditor` md 文本编辑器
|
||||
- [ ] `wc-neditor` 富文本编辑器
|
||||
- [x] `wc-pager` 分页组件
|
||||
- [x] `wc-color` 颜色选择器
|
||||
- [ ] `wc-datepicker` 日期选择器
|
||||
- [ ] `wc-timepicker` 时间选择器
|
||||
- [x] `wc-code` 代码高亮插件
|
||||
- [x] `wc-scroll` 滚动组件
|
||||
- [x] `wc-silder` 滑块组件
|
||||
- [x] `wc-swipe` 轮播图组件
|
||||
- [x] `wc-breadcrumb` 面包屑组件
|
||||
- [ ] `wc-progress` 进度条组件
|
||||
- [ ] `wc-tree` 树形菜单组件
|
||||
- [ ] `wc-uploader` 上传组件
|
||||
- [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` 空状态组件
|
||||
|
||||
### 测试预览
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
Loading…
Reference in New Issue