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` 绿色