From 38fe3bb126a1215da81bacf5d3349dde3fa5f83b Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 26 Apr 2023 18:10:21 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E6=9D=A1=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 4 +- src/loading/index.js | 95 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 src/loading/index.js diff --git a/Readme.md b/Readme.md index 04f7ab4..f591c8e 100644 --- a/Readme.md +++ b/Readme.md @@ -13,7 +13,7 @@ - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件 -### 开发进度 && 计划 (34/54) +### 开发进度 && 计划 (35/54) - [x] `wc-card` 卡片组件 - [x] `wc-space` 间隔组件 @@ -56,7 +56,7 @@ - [ ] `wc-tree` 树形菜单组件 - [ ] `wc-uploader` 上传组件 - [x] `wc-notify` 通知组件 -- [ ] `wc-loading` 加载组件 +- [x] `wc-loading` 加载组件 - [x] `wc-tabs` 选项卡组件 - [x] `wc-steps` 步骤条组件 - [x] `wc-timeline` 时间线组件 diff --git a/src/loading/index.js b/src/loading/index.js new file mode 100644 index 0000000..69e9875 --- /dev/null +++ b/src/loading/index.js @@ -0,0 +1,95 @@ +/** + * {加载条} + * @author yutent + * @date 2023/04/26 15:20:28 + */ + +import { html, css, Component, styleMap, nextTick } from '@bd/core' + +class Loading extends Component { + static props = { + value: { + type: Boolean, + default: false, + observer(v) { + if (v && this.loading) { + this.#start = void 0 + this.value = false + this.#progress = 0 + requestAnimationFrame(this.loading) + } + } + }, + duration: 3000 + } + + static styles = [ + css` + :host { + position: fixed; + top: 0; + left: 0; + z-index: 65535; + display: flex; + width: 100vw; + height: 0; + } + + .thumb { + width: 0; + height: 1px; + background: var(--color-teal-1); + box-shadow: 0 0 5px var(--color-teal-1); + } + ` + ] + + #force2end = false + #start = 0 + #progress = 0 + + end() { + this.#force2end = true + } + + mounted() { + this.loading = timestamp => { + if (this.#force2end) { + if (this.#progress === 100) { + this.#force2end = false + this.#progress = 0 + this.$requestUpdate() + return + } + this.#progress = 100 + this.$requestUpdate() + } else { + if (this.#start === void 0) { + this.#start = timestamp + } + + let _time = timestamp - this.#start + + let tmp = ~~(_time / (this.duration / 100)) + if (tmp !== this.#progress) { + this.#progress = tmp + this.$requestUpdate() + } + + if (_time > this.duration) { + this.#progress = 0 + return + } + } + + requestAnimationFrame(this.loading) + } + } + + render() { + let pc = styleMap({ width: this.#progress + '%' }) + return html` ` + } +} + +Loading.reg('loading') From a8c5181601ea27ed71e9377cd058990b8e256f55 Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 26 Apr 2023 18:15:22 +0800 Subject: [PATCH 2/5] =?UTF-8?q?readme=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Readme.md b/Readme.md index f591c8e..59a89c2 100644 --- a/Readme.md +++ b/Readme.md @@ -2,6 +2,10 @@ 百搭 UI 组件库, 基于 web components 开发。面向下一代的 UI 组件库 + +![downloads](https://img.shields.io/npm/dt/@bd/ui.svg) +![version](https://img.shields.io/npm/v/@bd/ui.svg) + ### 开发环境 - vscode 开源编辑器 From ff2fc92a1834df73783bf92f1dcd79caa1c9cb78 Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 26 Apr 2023 18:32:19 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E5=BE=AE=E8=B0=83tabs=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tabs/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/tabs/index.js b/src/tabs/index.js index be04c54..5156459 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -71,6 +71,7 @@ class Tabs extends Component { justify-content: space-between; max-width: 120px; margin: 0 16px; + padding: 0 3px; --size: 16px; cursor: pointer; From c50b7414efe4d3bb060c55a1d465eb4f298098dd Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 26 Apr 2023 18:32:33 +0800 Subject: [PATCH 4/5] 0.1.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 980e3fe..25e7bcf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bd/ui", - "version": "0.1.6", + "version": "0.1.7", "description": "", "files": [ "dist/*" From 4a91c3978eccae96e8ec70cf45facf71f4603320 Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 27 Apr 2023 09:18:47 +0800 Subject: [PATCH 5/5] =?UTF-8?q?tabs=E7=BB=84=E4=BB=B6=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E5=86=85=E8=BE=B9=E8=B7=9D,=E4=BA=A4=E7=94=B1=E5=A4=96?= =?UTF-8?q?=E9=83=A8=E8=87=AA=E8=A1=8C=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tabs/index.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/tabs/index.js b/src/tabs/index.js index 5156459..3438ca4 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -61,7 +61,6 @@ class Tabs extends Component { .content { flex: 1; - padding: 16px 0; } .label { @@ -71,7 +70,7 @@ class Tabs extends Component { justify-content: space-between; max-width: 120px; margin: 0 16px; - padding: 0 3px; + padding: 0 6px; --size: 16px; cursor: pointer; @@ -163,9 +162,6 @@ class Tabs extends Component { .navs { flex-direction: column; } - .content { - padding: 0 16px; - } .label { margin: 0; height: 38px; @@ -204,10 +200,6 @@ class Tabs extends Component { css` :host([type='folder']), :host([type='card']) { - .content { - padding: 16px; - } - .active-bar { display: none; }