From 8ea85ba5625e11301d581006ba638f39c1aed664 Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 16 Mar 2023 13:56:32 +0800 Subject: [PATCH] =?UTF-8?q?core=E5=8D=87=E7=BA=A7=E5=88=B01.4.0=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- develop.md | 2 +- src/form/button.js | 394 +++++++++++++++++++++++++-------------------- 开发规范.md | 2 +- 3 files changed, 217 insertions(+), 181 deletions(-) diff --git a/develop.md b/develop.md index 4f0c8c7..8ee3005 100644 --- a/develop.md +++ b/develop.md @@ -18,7 +18,7 @@ - + diff --git a/src/form/button.js b/src/form/button.js index a43abf2..088c60f 100644 --- a/src/form/button.js +++ b/src/form/button.js @@ -9,202 +9,238 @@ import '../icon/index.js' class Button extends Component { static props = { + type: 'primary', icon: '', - autofocus: '', + size: 'l', + autofocus: false, loading: false, disabled: false, lazy: 0 // 并发拦截时间, 单位毫秒 } - static styles = css` - :host { - overflow: hidden; - display: inline-flex; - min-width: 128px; - height: 36px; - border-radius: 3px; - user-select: none; - -moz-user-select: none; - color: var(--color-dark-1); - font-size: 14px; - cursor: pointer; - transition: box-shadow 0.15s linear; + static styles = [ + // 基础样式 + css` + :host { + overflow: hidden; + display: inline-flex; + border: 0; + border-radius: 3px; + user-select: none; + -moz-user-select: none; + color: var(--color-dark-1); + font-size: 14px; + cursor: pointer; + transition: box-shadow 0.15s linear; - button { - display: flex; - justify-content: space-evenly; - align-items: center; - width: 100%; - height: inherit; - padding: var(--padding, 0 14px); - line-height: 1; - border: 1px solid var(--color-grey-2); - border-radius: inherit; - white-space: nowrap; - background: #fff; - font-size: inherit; - font-family: inherit; - outline: none; - color: inherit; - cursor: inherit; - transition: background 0.15s linear; - - &::-moz-focus-inner { - border: none; - } - } - - .icon { - --size: var(--icon-size, 18px); - } - } - - :host([size='large']) { - min-width: 212px; - height: 52px; - font-size: 18px; - - button { - padding: 0 24px; - } - - .icon { - --size: 26px; - } - } - :host([size='large'][circle]) { - min-width: 52px; - width: 52px; - height: 52px; - - button { - padding: 0; - } - } - :host([size='medium']) { - min-width: 160px; - height: 44px; - - button { - padding: 0 18px; - } - } - :host([size='medium'][circle]) { - min-width: 44px; - width: 44px; - } - :host([size='small']) { - min-width: 96px; - height: 32px; - } - :host([size='small'][circle]) { - min-width: 32px; - width: 32px; - } - :host([size='mini']) { - min-width: 72px; - height: 26px; - font-size: 12px; - - button { - padding: 0 6px; - } - - .icon { - --size: 14px; - } - } - :host([size='mini'][circle]) { - min-width: 26px; - width: 26px; - } - - :host([round]) { - border-radius: 26px; - } - :host([circle]) { - min-width: 36px; - width: 36px; - border-radius: 50%; - button { - padding: 0; - } - .icon { - margin-right: 0; - } - - slot { - display: none; - } - } - - :host(:focus-within) { - box-shadow: 0 0 0 2px var(--color-plain-a); - } - - $colors: ( - primary: 'teal', - info: 'blue', - success: 'green', - warning: 'orange', - danger: 'red', - secondary: 'dark', - help: 'grey' - ); - - @loop $t, $c in $colors { - :host([type='#{$t}']) { button { - color: var(--color-#{$c}-2); - border: 1px solid var(--color-#{$c}-2); + display: flex; + justify-content: center; + align-items: center; + width: 100%; + min-width: 1px; + height: inherit; + padding: var(--button-padding, 0 4px); + line-height: 1; + border: 1px solid transparent; + border-radius: inherit; + white-space: nowrap; + background: #fff; + font-size: inherit; + font-family: inherit; + outline: none; + color: inherit; + cursor: inherit; + transition: background 0.15s linear; - &:hover { - color: var(--color-#{$c}-1); - border-color: var(--color-#{$c}-1); - } - &:active { - color: var(--color-#{$c}-3); - } - &:disabled { - color: var(--color-#{$c}-2); + &::-moz-focus-inner { + border: none; } } - &:host([solid]) button { - border: 0; - color: #fff; - background: var(--color-#{$c}-2); - - &:hover { - background: var(--color-#{$c}-1); - } - &:active { - background: var(--color-#{$c}-3); - } - - &:disabled { - background: var(--color-#{$c}-2); - } - } - - &:host(:focus-within) { - box-shadow: 0 0 0 2px var(--color-#{$c}-a); + .icon { + --size: var(--icon-size, 18px); + margin-right: 4px; } } - } + :host(:focus-within) { + 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 + ) + ); - :host([loading]), - :host([disabled]) { - cursor: not-allowed; - opacity: 0.6; - } - ` + @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'); + + button { + } + } + } + + :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}']) { + button { + color: var(--color-#{$c}-2); + border-color: var(--color-#{$c}-2); + + &:hover { + color: var(--color-#{$c}-1); + border-color: var(--color-#{$c}-1); + } + &:active { + color: var(--color-#{$c}-3); + } + &:disabled { + color: var(--color-#{$c}-2); + } + } + + &:host([solid]) button { + border: 0; + color: #fff; + background: var(--color-#{$c}-2); + + &:hover { + background: var(--color-#{$c}-1); + } + &:active { + background: var(--color-#{$c}-3); + } + + &:disabled { + background: var(--color-#{$c}-2); + } + } + + &:host(:focus-within) { + box-shadow: 0 0 0 2px var(--color-#{$c}-a); + } + } + } + `, + // 状态 + css` + :host([loading]), + :host([disabled]) { + cursor: not-allowed; + opacity: 0.6; + } + ` + ] + + created() { + this.stamp = 0 + + this.$on( + 'click', + ev => { + let { loading, disabled, lazy } = this + let now = Date.now() + + if (loading || disabled) { + return ev.stopPropagation() + } + // 并发拦截 + if (lazy > 0 && now - this.stamp < lazy) { + return ev.stopPropagation() + } + this.stamp = now + }, + true + ) + } render() { - return html`` + return html` + + ` } } diff --git a/开发规范.md b/开发规范.md index 34e61d9..963c1a2 100644 --- a/开发规范.md +++ b/开发规范.md @@ -4,7 +4,7 @@ > 主题功能, 暂时由根样式定义来实现, 所以, 组件内的样式, 尽可能避免过多的私有配色。 2. 组件几种配色样式, 暂时同大多数组件一致 - - `type=primary` 青色 + - `type=primary` 青色 (默认值) - `type=secondary` 暗色 - `type=info` 蓝色 - `type=success` 绿色