From 36c2deb81b1bff19d4acc652076bab67a2b4737f Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Thu, 27 Apr 2023 18:43:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96button=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=A4=84=E7=90=86;=E5=A2=9E=E5=8A=A0Divider=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/divider/index.js | 67 ++++++++++++++++++++++++++++++++++++++++++++
 src/form/button.js   | 17 +++++------
 2 files changed, 74 insertions(+), 10 deletions(-)
 create mode 100644 src/divider/index.js

diff --git a/src/divider/index.js b/src/divider/index.js
new file mode 100644
index 0000000..2dd901f
--- /dev/null
+++ b/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')
diff --git a/src/form/button.js b/src/form/button.js
index e645e9e..f1430d4 100644
--- a/src/form/button.js
+++ b/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>
     `