From 1e19c033b113aef9695b8a66af623f561b078c73 Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 21 Mar 2023 19:45:09 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/form/button.js | 4 +- src/form/link.js | 3 +- src/form/passwd.js | 2 - src/form/radio.js | 288 ++++++++++++++++++++++++++++++++++++++++++++- src/icon/index.js | 4 +- 5 files changed, 291 insertions(+), 10 deletions(-) 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;