完成加载条组件

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` 时间线组件

src/loading/index.js

@@ -0,0 +1,95 @@
+/**
+ * {加载条}
+ * @author yutent<yutent.io@gmail.com>
+ * @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` <span class="thumb" style=${pc}></span> `
+  }
+}
+
+Loading.reg('loading')