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

Readme.md

@@ -17,7 +17,7 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (35/54)
+### 开发进度 && 计划 (36/54)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件
@@ -69,7 +69,7 @@
 - [ ] `wc-tooltip` 文字提示组件
 - [ ] `wc-popconfirm` 气泡确认框组件
 - [ ] `wc-chatbox` 聊天气泡组件
-- [ ] `wc-divider` 分割线组件
+- [x] `wc-divider` 分割线组件
 - [ ] `wc-table` 表格组件
 - [ ] `wc-result` 结果反馈组件
 - [ ] `wc-empty` 空状态组件

package.json

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

src/divider/index.js

@@ -0,0 +1,67 @@
+/**
+ * {分割线}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/04/26 15:20:28
+ */
+
+import { html, css, Component, styleMap, nextTick } from '@bd/core'
+
+class Divider extends Component {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      fieldset {
+        width: 100%;
+        height: 1px;
+        margin: 16px 0;
+        border: 0;
+        border-top: 1px dashed var(--color-grey-1);
+        user-select: none;
+
+        legend {
+          padding: 0 8px;
+          font-size: 12px;
+          text-align: center;
+          color: var(--color-grey-2);
+        }
+      }
+
+      :host([align='left']) {
+        fieldset {
+          padding-left: 16px;
+
+          legend {
+            text-align: left;
+          }
+        }
+      }
+      :host([align='right']) {
+        fieldset {
+          padding-right: 16px;
+
+          legend {
+            text-align: right;
+          }
+        }
+      }
+
+      :host(:empty) {
+        fieldset legend {
+          padding: 0;
+        }
+      }
+    `
+  ]
+
+  render() {
+    return html`<fieldset>
+      <legend><slot></slot></legend>
+    </fieldset> `
+  }
+}
+
+Divider.reg('divider')

src/form/button.js

@@ -70,12 +70,18 @@ class Button extends Component {
         }
 
         .icon {
+          margin-right: 4px;
           --size: var(--icon-size, 14px);
         }
       }
       :host(:focus-within) {
         box-shadow: 0 0 0 2px var(--color-plain-a);
       }
+      :host(:empty) {
+        button .icon {
+          margin-right: 0;
+        }
+      }
     `,
     // 尺寸
     css`
@@ -219,13 +225,6 @@ class Button extends Component {
     `
   ]
 
-  #empty = true
-
-  fixStyle() {
-    this.#empty = this.$refs.cont?.assignedNodes().length === 0
-    this.$requestUpdate()
-  }
-
   created() {
     this.stamp = 0
 
@@ -252,14 +251,12 @@ class Button extends Component {
     if (this.autofocus) {
       nextTick(_ => this.$refs.btn.focus())
     }
-    nextTick(_ => this.fixStyle())
   }
 
   render() {
-    let style = styleMap({ 'margin-right': this.#empty ? 0 : '4px' })
     return html`
       <button ref="btn" disabled=${this.disabled || this.loading}>
-        <wc-icon class="icon" name=${this.icon} style=${style}></wc-icon>
+        <wc-icon class="icon" name=${this.icon}></wc-icon>
         <slot ref="cont"></slot>
       </button>
     `

src/tabs/index.js

@@ -48,6 +48,7 @@ class Tabs extends Component {
 
       .header {
         position: relative;
+        flex-shrink: 0;
         display: flex;
         width: 100%;
         height: 38px;
@@ -60,6 +61,7 @@ class Tabs extends Component {
       }
 
       .content {
+        overflow: hidden;
         flex: 1;
       }