11 lines
6.5 KiB
JavaScript
11 lines
6.5 KiB
JavaScript
/**
|
|
*
|
|
* @authors yutent (yutent.io@gmail.com)
|
|
* @date 2022-06-23 15:46:28
|
|
* @version v1.0.6
|
|
*
|
|
*/
|
|
|
|
var h=Object.defineProperty;var c=(r,e,o)=>e in r?h(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o;var a=(r,e,o)=>(c(r,typeof e!="symbol"?e+"":e,o),o);import"../icon/index.js";import d from"../utils.js";class l extends HTMLElement{constructor(){super();a(this,"props",{icon:"",autofocus:"",loading:!1,disabled:!1,lazy:0});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML='<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}: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 .15s linear}:host 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 .15s linear}:host button::-moz-focus-inner{border:none}:host .icon{--size: var(--icon-size, 18px)}:host([size=large]){min-width:212px;height:52px;font-size:18px}:host([size=large]) button{padding:0 24px}:host([size=large]) .icon{--size: 26px}:host([size=large][circle]){min-width:52px;width:52px;height:52px}:host([size=large][circle]) button{padding:0}:host([size=medium]){min-width:160px;height:44px}:host([size=medium]) 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}:host([size=mini]) button{padding:0 6px}:host([size=mini]) .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%}:host([circle]) button{padding:0}:host([circle]) .icon{margin-right:0}:host([circle]) slot{display:none}:host([type]){color:#fff}:host([type]) button{border:0}:host(:not([disabled]):not([loading])) button:hover{border-color:var(--color-grey-1)}:host(:not([disabled]):not([loading])) button:active{border-color:var(--color-grey-3)}:host(:focus-within){box-shadow:0 0 0 2px var(--color-plain-a)}:host([type=danger]) button{background:var(--color-red-2)}:host([type=danger]:not([disabled]):not([loading])) button:hover{background:var(--color-red-1)}:host([type=danger]:not([disabled]):not([loading])) button:active{background:var(--color-red-3)}:host([type=danger]:focus-within){box-shadow:0 0 0 2px var(--color-red-a)}:host([type=info]) button{background:var(--color-blue-2)}:host([type=info]:not([disabled]):not([loading])) button:hover{background:var(--color-blue-1)}:host([type=info]:not([disabled]):not([loading])) button:active{background:var(--color-blue-3)}:host([type=info]:focus-within){box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]) button{background:var(--color-green-2)}:host([type=success]:not([disabled]):not([loading])) button:hover{background:var(--color-green-1)}:host([type=success]:not([disabled]):not([loading])) button:active{background:var(--color-green-3)}:host([type=success]:focus-within){box-shadow:0 0 0 2px var(--color-green-a)}:host([type=primary]) button{background:var(--color-teal-2)}:host([type=primary]:not([disabled]):not([loading])) button:hover{background:var(--color-teal-1)}:host([type=primary]:not([disabled]):not([loading])) button:active{background:var(--color-teal-3)}:host([type=primary]:focus-within){box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=warning]) button{background:var(--color-orange-2)}:host([type=warning]:not([disabled]):not([loading])) button:hover{background:var(--color-orange-1)}:host([type=warning]:not([disabled]):not([loading])) button:active{background:var(--color-orange-3)}:host([type=warning]:focus-within){box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=inverse]) button{background:var(--color-dark-2)}:host([type=inverse]:not([disabled]):not([loading])) button:hover{background:var(--color-dark-1)}:host([type=inverse]:not([disabled]):not([loading])) button:active{background:var(--color-dark-3)}:host([type=inverse]:focus-within){box-shadow:0 0 0 2px var(--color-dark-a)}:host([type=help]) button{background:var(--color-grey-2)}:host([type=help]:not([disabled]):not([loading])) button:hover{background:var(--color-grey-1)}:host([type=help]:not([disabled]):not([loading])) button:active{background:var(--color-grey-3)}:host([type=help]:focus-within){box-shadow:0 0 0 2px var(--color-grey-a)}:host([loading]),:host([disabled]){cursor:not-allowed;opacity:.6}</style> <button> <wc-icon class="icon"></wc-icon> <slot /> </button> ',this.hasAttribute("circle")&&(this.textContent=""),this.__BTN__=this.root.children[1],this.__ICO__=this.__BTN__.children[0]}static get observedAttributes(){return["icon","autofocus","loading","disabled","lazy"]}get loading(){return this.props.loading}set loading(o){var t=typeof o;o!==this.props.loading&&(t==="boolean"&&o||t!=="boolean"?(this.props.loading=!0,this.__BTN__.disabled=!0,this.__ICO__.setAttribute("is","loading"),this.setAttribute("loading","")):(this.props.loading=!1,this.__BTN__.disabled=!1,this.__ICO__.setAttribute("is",this.props.icon),this.removeAttribute("loading")))}get disabled(){return this.props.disabled}set disabled(o){var t=typeof o;o!==this.props.disabled&&(t==="boolean"&&o||t!=="boolean"?(this.props.disabled=!0,this.__BTN__.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.__BTN__.disabled=!1,this.removeAttribute("disabled")))}connectedCallback(){this.stamp=0,this._handleClick=d.bind(this,"click",o=>{var{loading:t,disabled:i,lazy:s}=this.props,n=Date.now();if(t||i||s&&n-this.stamp<s)return o.stopPropagation();this.stamp=n},!0)}disconnectedCallback(){d.unbind(this,"click",this._handleClick)}attributeChangedCallback(o,t,i){if(t!==i)switch(o){case"icon":this.props.icon=i,i?this.props.loading||this.__ICO__.setAttribute("is",i):(this.removeAttribute("icon"),this.__ICO__.removeAttribute("is"));break;case"autofocus":this.__BTN__.setAttribute("autofocus",""),setTimeout(s=>this.__BTN__.focus(),10);break;case"lazy":this.props.lazy=i>>0;break;case"loading":case"disabled":this[o]=i!==null;break}}}customElements.get("wc-button")||customElements.define("wc-button",l);export{l as default};
|
|
|