From a3ed050b70f5a1d760995c4c6b6b717427c55635 Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 18 Apr 2023 16:46:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=AD=A5=E9=AA=A4=E6=9D=A1?= =?UTF-8?q?=E7=BB=84=E4=BB=B6;=20=E6=9B=B4=E6=96=B0=E5=BC=80=E5=8F=91?= =?UTF-8?q?=E8=AE=A1=E5=88=92=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 99 +++++++++++++++++++---------------- src/steps/index.js | 127 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 182 insertions(+), 44 deletions(-) create mode 100644 src/steps/index.js diff --git a/Readme.md b/Readme.md index 0c7b913..eb874c4 100644 --- a/Readme.md +++ b/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` 空状态组件 ### 测试预览 diff --git a/src/steps/index.js b/src/steps/index.js new file mode 100644 index 0000000..f4d20c9 --- /dev/null +++ b/src/steps/index.js @@ -0,0 +1,127 @@ +/** + * {} + * @author yutent + * @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` + + ` + } +} + +Steps.reg('steps') +Step.reg('step')