7 lines
7.7 KiB
JavaScript
7 lines
7.7 KiB
JavaScript
|
import{css as r,html as a,Component as s,nextTick as i}from"wkit";import"../icon/index.js";class l extends s{static props={icon:"",autofocus:!1,loading:{type:Boolean,observer(o){o?(this.cacheIcon=this.icon,this.icon="loading"):this.icon=this.cacheIcon===void 0?this.icon:this.cacheIcon}},disabled:!1,lazy:"num!0"};static styles=[r`:host{overflow:hidden;display:inline-flex;min-width:108px;height:32px;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 .15s linear}:host button{display:flex;justify-content:center;align-items:center;width:100%;min-width:1px;height:inherit;padding:var(--wc-button-padding, 0 4px);line-height:1;border:1px solid var(--wc-button-border-color, var(--color-grey-2));border-radius:inherit;white-space:nowrap;background:var(--wc-button-background, #fff);font-size:inherit;font-family:inherit;outline:none;color:var(--wc-button-color, var(--color-dark-1));cursor:inherit;transition:background .15s linear,color .15s linear}:host button::-moz-focus-inner{border:none}:host button:hover{color:var(--wc-button-color-hover, var(--color-grey-3));border-color:var(--wc-button-border-color-hover, var(--color-grey-3));background:var(--wc-button-background-hover, var(--wc-button-background, #fff))}:host button:active{color:var(--wc-button-color-active, var(--color-dark-2));background:var(--wc-button-background-active, var(--wc-button-background, #fff))}:host button:disabled{color:var(--wc-button-color-disabled, var(--color-dark-1));background:var(--wc-button-background-disabled, var(--wc-button-background, #fff))}:host .icon{margin-right:4px;--wc-icon-size: var(--wc-button-icon-size, 14px)}:host([solid]) button{border:0;color:#fff;background:var(--color-dark-1)}:host([solid]) button:hover{background:var(--color-grey-3)}:host([solid]) button:active{background:var(--color-dark-2)}:host([solid]) button:disabled{background:var(--color-dark-1)}:host(:focus-within){box-shadow:0 0 0 2px var(--color-plain-a)}:host(:empty) button .icon{margin-right:0}`,r`:host([size=s]){min-width:52px;height:20px;font-size:12px}:host([size=s]) .icon{--wc-icon-size: var(--wc-button-icon-size, 12px)}:host([size=s][circle]){width:20px;height:20px}:host([size=m]){min-width:72px;height:24px;font-size:12px}:host([size=m]) .icon{--wc-icon-size: var(--wc-button-icon-size, 12px)}:host([size=m][circle]){width:24px;height:24px}:host([size=xl]){min-width:132px;height:36px;font-size:14px}:host([size=xl]) .icon{--wc-icon-size: var(--wc-button-icon-size, 14px)}:host([size=xl][circle]){width:36px;height:36px}:host([size=xxl]){min-width:160px;height:44px;font-size:14px}:host([size=xxl]) .icon{--wc-icon-size: var(--wc-button-icon-size, 14px)}:host([size=xxl][circle]){width:44px;height:44px}:host([dashed]) button{border-style:dashed}:host([round]){border-radius:32px}:host([circle]){min-width:0;width:32px;height:32px;border-radius:50%}:host([circle]) button{padding:0}:host([circle]) .icon{margin-right:0}:host([circle]) slot{display:none}`,r`:host([type=primary]) button{color:var(--color-teal-2);border-color:var(--color-teal-1)}:host([type=primary]) button:hover{color:var(--color-teal-1);border-color:var(--color-teal-2);background:var(--wc-button-background, #fff)}:host([type=primary]) button:active{color:var(--color-teal-3);background:var(--wc-button-background, #fff)}:host([type=primary]) button:disabled{color:var(--color-teal-2);background:var(--wc-button-background, #fff)}:host([type=primary]):host([solid]) button{border:0;color:#fff;background:var(--color-teal-2)}:host([type=primary]):host([solid]) button:hover{background:var(--color-teal-1)}:host([type=primary]):host([solid]) button:active{background:var(--color-teal-3)}:host([type=primary]):host([solid]) button:disabled{background:var(--color-teal-2)}:host([type=primary]):host(:focus-within){box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]) button{color:var(--color-blue-2);border-color:var(--color-blue-1)}:host([type=info]) button:hover{color:var(--color-blue-1);border-color:var(--color-blue-2);background:var
|
||
|
|
<button ref="btn" disabled=${this.disabled||this.loading}>
|
||
|
|
<wc-icon class="icon" name=${this.icon}></wc-icon>
|
||
|
|
<slot ref="cont"></slot>
|
||
|
|
</button>
|
||
|
|
`}}l.reg("button");
|