Merge branch 'master' of ssh://github.com/bd-js/wcui

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 开源编辑器
@@ -13,7 +17,7 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (34/54)
+### 开发进度 && 计划 (35/54)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件
@@ -56,7 +60,7 @@
 - [ ] `wc-tree` 树形菜单组件
 - [ ] `wc-uploader` 上传组件
 - [x] `wc-notify` 通知组件
-- [ ] `wc-loading` 加载组件
+- [x] `wc-loading` 加载组件
 - [x] `wc-tabs` 选项卡组件
 - [x] `wc-steps` 步骤条组件
 - [x] `wc-timeline` 时间线组件

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bd/ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "",
   "files": [
     "dist/*"

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

src/tabs/index.js

@@ -61,7 +61,6 @@ class Tabs extends Component {
 
       .content {
         flex: 1;
-        padding: 16px 0;
       }
 
       .label {
@@ -71,6 +70,7 @@ class Tabs extends Component {
         justify-content: space-between;
         max-width: 120px;
         margin: 0 16px;
+        padding: 0 6px;
         --size: 16px;
         cursor: pointer;
 
@@ -162,9 +162,6 @@ class Tabs extends Component {
           .navs {
             flex-direction: column;
           }
-          .content {
-            padding: 0 16px;
-          }
           .label {
             margin: 0;
             height: 38px;
@@ -203,10 +200,6 @@ class Tabs extends Component {
     css`
       :host([type='folder']),
       :host([type='card']) {
-        .content {
-          padding: 16px;
-        }
-
         .active-bar {
           display: none;
         }