diff --git a/src/form/button.js b/src/form/button.js
index ce6732b..4b261ef 100644
--- a/src/form/button.js
+++ b/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())
}
}
diff --git a/src/form/link.js b/src/form/link.js
index d9d4f98..c7ee49e 100644
--- a/src/form/link.js
+++ b/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())
}
diff --git a/src/form/passwd.js b/src/form/passwd.js
index d179d8b..6c2e167 100644
--- a/src/form/passwd.js
+++ b/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())
}
}
diff --git a/src/form/radio.js b/src/form/radio.js
index 66a5d14..332cde2 100644
--- a/src/form/radio.js
+++ b/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``
+ }
+}
+
+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``
+ }
+}
+
+Radio.reg('radio-group')
+RadioItem.reg('radio')
diff --git a/src/icon/index.js b/src/icon/index.js
index 60493d7..c7df197 100644
--- a/src/icon/index.js
+++ b/src/icon/index.js
@@ -29,8 +29,8 @@ class Icon extends Component {
static styles = css`
:host {
display: inline-flex;
- width: var(--size, 36px);
- height: var(--size, 36px);
+ width: var(--size, 32px);
+ height: var(--size, 32px);
}
:host(:not([name])) {
display: none;