优化button的样式处理;增加Divider组件

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>
     `