组件更新

src/form/button.js

@@ -21,7 +21,7 @@ class Button extends Component {
           this.cacheIcon = this.icon
           this.icon = 'loading'
         } else {
-          this.icon = this.cacheIcon || ''
+          this.icon = this.cacheIcon === void 0 ? this.icon : this.cacheIcon
         }
       }
     },
@@ -244,8 +244,6 @@ class Button extends Component {
 
   mounted() {
     if (this.autofocus) {
-      this.$refs.btn.setAttribute('autofocus', '')
-      // 需要focus()才能聚焦成功
       nextTick(_ => this.$refs.btn.focus())
     }
   }

src/form/link.js

@@ -5,6 +5,7 @@
  */
 
 import { css, html, Component, bind, unbind, nextTick } from '@bd/core'
+
 class Link extends Component {
   static props = {
     type: 'primary',
@@ -109,8 +110,6 @@ class Link extends Component {
     this.stamp = 0
 
     if (this.autofocus) {
-      this.$refs.a.setAttribute('autofocus', '')
-      // 需要focus()才能聚焦成功
       nextTick(_ => this.$refs.a.focus())
     }
 

src/form/passwd.js

@@ -196,8 +196,6 @@ class Passwd extends Component {
 
   mounted() {
     if (this.autofocus) {
-      this.$refs.input.setAttribute('autofocus', '')
-      // 需要focus()才能聚焦成功
       nextTick(_ => this.$refs.input.focus())
     }
   }

src/form/radio.js

@@ -6,4 +6,290 @@
 
 import { nextTick, css, html, Component } from '@bd/core'
 
-class Radio extends Component {}
+class Radio extends Component {
+  static props = {
+    value: {
+      type: String,
+      default: '',
+      attribute: false,
+      observer() {
+        // this.#updateChildrenStat()
+      }
+    },
+    disabled: false,
+    readonly: false
+  }
+
+  mounted() {
+    this.$on('child-change', ev => {
+      console.log(ev)
+      this.value = ev.value
+    })
+  }
+
+  #updateChildrenStat(checkAll) {
+    Array.from(this.children).forEach(it => {
+      if (it.tagName === 'WC-RADIO') {
+        if (it.root) {
+          if (checkAll) {
+            it.disabled = this.disabled
+            it.readOnly = this.readOnly
+          }
+
+          if (it.value === this.value) {
+            it.checked = true
+          } else {
+            it.checked = false
+          }
+        }
+      } else {
+        it.remove()
+      }
+    })
+  }
+
+  render() {
+    return html`<label>
+      <span class="dot"></span>
+      <slot></slot>
+    </label>`
+  }
+}
+
+class RadioItem extends Component {
+  static props = {
+    value: {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    checked: false,
+    disabled: false,
+    readonly: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        line-height: 1;
+        font-size: 14px;
+        cursor: pointer;
+
+        label {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-width: 32px;
+          padding-right: 16px;
+          line-height: 1;
+          -moz-user-select: none;
+          user-select: none;
+          white-space: nowrap;
+          cursor: inherit;
+          outline: none;
+          color: var(--color-dark-1);
+        }
+
+        .dot {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 16px;
+          height: 16px;
+          margin-right: 4px;
+          border: 1px solid var(--color-dark-1);
+          border-radius: 50%;
+          background: #fff;
+          transition: box-shadow 0.15s linear;
+
+          &::after {
+            display: block;
+            visibility: hidden;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: var(--color-dark-1);
+            content: '';
+            transform: scale(0);
+            transition: transform 0.15s linear;
+          }
+        }
+        &:host([checked]) .dot::after {
+          visibility: visible;
+          transform: scale(1);
+        }
+      }
+    `,
+
+    css`
+      :host(:focus-within) .dot {
+        box-shadow: 0 0 0 2px var(--color-plain-a);
+      }
+    `,
+    // 尺寸
+    css`
+      @use 'sass:map';
+      $sizes: (
+        s: (
+          w: 52px,
+          h: 20px,
+          f: 12px
+        ),
+        m: (
+          w: 72px,
+          h: 24px,
+          f: 12px
+        ),
+        l: (
+          w: 108px,
+          h: 32px,
+          f: 14px
+        ),
+        xl: (
+          w: 132px,
+          h: 36px,
+          f: 14px
+        ),
+        xxl: (
+          w: 160px,
+          h: 44px,
+          f: 14px
+        ),
+        xxxl: (
+          w: 192px,
+          h: 52px,
+          f: 16px
+        ),
+        xxxxl: (
+          w: 212px,
+          h: 64px,
+          f: 18px
+        )
+      );
+
+      @loop $s, $v in $sizes {
+        :host([size='#{$s}']) {
+          min-width: map.get($v, 'w');
+          height: map.get($v, 'h');
+          font-size: map.get($v, 'f');
+
+          .icon {
+            --size: #{map.get($v, 'f')};
+          }
+        }
+        :host([size='#{$s}'][circle]) {
+          width: map.get($v, 'h');
+          height: map.get($v, 'h');
+        }
+      }
+
+      :host([dashed]) button {
+        border-style: dashed;
+      }
+
+      :host([round]) {
+        border-radius: 32px;
+      }
+      :host([circle]) {
+        min-width: 0;
+        border-radius: 50%;
+        button {
+          padding: 0;
+        }
+        .icon {
+          margin-right: 0;
+        }
+
+        slot {
+          display: none;
+        }
+      }
+    `,
+    // 配色
+    css`
+      $colors: (
+        primary: 'teal',
+        info: 'blue',
+        success: 'green',
+        warning: 'orange',
+        danger: 'red',
+        secondary: 'dark',
+        help: 'grey'
+      );
+
+      @loop $t, $c in $colors {
+        :host([type='#{$t}']) {
+          label {
+            color: var(--color-#{$c}-2);
+          }
+
+          .dot {
+            border-color: var(--color-#{$c}-2);
+
+            &::after {
+              background: var(--color-#{$c}-2);
+            }
+          }
+
+          &:host(:focus-within) .dot {
+            box-shadow: 0 0 0 2px var(--color-#{$c}-a);
+          }
+        }
+      }
+    `,
+    // 状态
+    css`
+      :host([loading]),
+      :host([disabled]) {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    `
+  ]
+
+  toggleCheck(ev) {
+    if (this.disabled || this.readOnly || this.checked) {
+      return
+    }
+
+    ev.stopPropagation()
+
+    this.checked = true
+
+    if (this.inGroup) {
+      this.parentNode.$emit('child-change', { value: this.value })
+    } else {
+      this.$emit('change')
+    }
+  }
+
+  handleClick(ev) {
+    if (ev.type === 'click' || ev.keyCode === 32) {
+      this.toggleCheck(ev)
+    }
+  }
+
+  mounted() {
+    console.log(this.value)
+    if (this.parentNode?.tagName === 'WC-RADIO-GROUP') {
+      this.inGroup = true
+    }
+  }
+
+  render() {
+    console.log('render', this.value)
+    return html`<label
+      tabindex="0"
+      @click=${this.handleClick}
+      @keydown=${this.handleClick}
+    >
+      <span class="dot"></span>
+      <slot></slot>
+    </label>`
+  }
+}
+
+Radio.reg('radio-group')
+RadioItem.reg('radio')

src/icon/index.js

@@ -29,8 +29,8 @@ class Icon extends Component {
   static styles = css`
     :host {
       display: inline-flex;
-      width: var(--size, 36px);
+      width: var(--size, 32px);
-      height: var(--size, 36px);
+      height: var(--size, 32px);
     }
     :host(:not([name])) {
       display: none;