bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

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

master
yutent 2023-04-18 16:46:50 +08:00
parent a0b8b5e377
commit a3ed050b70
2 changed files with 182 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
Readme.md
View File

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

127
src/steps/index.js Normal file
View File

@ -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')