优化button和link组件

src/form/button.js

@@ -15,10 +15,10 @@ class Button extends Component {
       type: Boolean,
       observer(val) {
         if (val) {
-          this.cacheIcon = this.icon
+          this.#cacheIcon = this.icon
           this.icon = 'loading'
         } else {
-          this.icon = this.cacheIcon === void 0 ? this.icon : this.cacheIcon
+          this.icon = this.#cacheIcon === void 0 ? this.icon : this.#cacheIcon
         }
       }
     },
@@ -51,6 +51,7 @@ class Button extends Component {
           min-width: 1px;
           height: inherit;
           padding: var(--wc-button-padding, 0 4px);
+          gap: 4px;
           line-height: 1;
           border: 1px solid var(--wc-button-border-color, var(--color-grey-2));
           border-radius: inherit;
@@ -95,7 +96,6 @@ class Button extends Component {
         }
 
         .icon {
-          margin-right: 4px;
           --wc-icon-size: var(--wc-button-icon-size, 14px);
         }
       }
@@ -120,11 +120,6 @@ class Button extends Component {
       :host(:focus-within) {
         box-shadow: 0 0 0 2px var(--color-plain-a);
       }
-      :host(:empty) {
-        button .icon {
-          margin-right: 0;
-        }
-      }
     `,
     // 尺寸
     css`
@@ -185,9 +180,6 @@ class Button extends Component {
         button {
           padding: 0;
         }
-        .icon {
-          margin-right: 0;
-        }
 
         slot {
           display: none;
@@ -259,6 +251,8 @@ class Button extends Component {
     `
   ]
 
+  #cacheIcon
+
   created() {
     this.stamp = 0
 
@@ -283,7 +277,7 @@ class Button extends Component {
 
   mounted() {
     if (this.autofocus) {
-      nextTick(_ => this.$refs.btn.focus())
+      this.$refs.btn.focus()
     }
   }
 
@@ -291,7 +285,7 @@ class Button extends Component {
     return html`
       <button ref="btn" disabled=${this.disabled || this.loading}>
         <wc-icon class="icon" name=${this.icon}></wc-icon>
-        <slot ref="cont"></slot>
+        <slot></slot>
       </button>
     `
   }

src/form/link.js

@@ -8,7 +8,6 @@ import { css, html, Component, bind, nextTick } from 'wkit'
 
 class Link extends Component {
   static props = {
-    type: 'primary',
     to: '',
     autofocus: false,
     disabled: false,
@@ -31,13 +30,11 @@ class Link extends Component {
           justify-content: center;
           align-items: center;
           width: 100%;
-          padding: var(--padding, 0 2px);
+          padding: var(--wc-link-padding, 0 2px);
           line-height: 1;
-          font-size: inherit;
-          font-family: inherit;
-          outline: none;
           color: inherit;
           cursor: inherit;
+          outline: none;
           text-decoration: none;
           transition: color 0.15s linear;
           -webkit-user-select: none;
@@ -54,7 +51,7 @@ class Link extends Component {
           left: 0;
           width: 100%;
           height: 1px;
-          border-bottom: 1px dashed transparent;
+          border-bottom: 1px dashed var(--color-grey-1);
           content: '';
           opacity: 0;
           transition: opacity 0.15s linear;
@@ -68,9 +65,7 @@ class Link extends Component {
         info: 'blue',
         success: 'green',
         warning: 'orange',
-        danger: 'red',
+        danger: 'red'
-        secondary: 'dark',
-        help: 'grey'
       );
 
       @loop $t, $c in $colors {