11 lines
3.3 KiB
JavaScript
11 lines
3.3 KiB
JavaScript
/**
|
|
*
|
|
* @authors yutent (yutent.io@gmail.com)
|
|
* @date 2022-06-23 15:46:28
|
|
* @version v1.0.6
|
|
*
|
|
*/
|
|
|
|
var l=Object.defineProperty;var d=(i,t,e)=>t in i?l(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var a=(i,t,e)=>(d(i,typeof t!="symbol"?t+"":t,e),e);import c from"../utils.js";class o extends HTMLElement{constructor(){super();a(this,"props",{"active-text":null,"inactive-text":null,checked:!1,disabled:!1});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{display:inline-flex;align-items:center}:host section{display:flex;justify-content:center;align-items:center;line-height:1;white-space:nowrap}:host label{display:flex;align-items:center;width:32px;height:18px;padding:3px;margin:5px;border-radius:21px;background:var(--color-plain-3);cursor:inherit}:host label.checked{flex-direction:row-reverse;background:var(--color-grey-3)}:host .dot{width:12px;height:12px;border-radius:50%;background:#fff}:host([disabled]){cursor:not-allowed;opacity:.6}:host([size=large]) label{width:46px;height:26px;padding:3px 5px}:host([size=large]) .dot{width:18px;height:18px}:host([size=medium]) label{width:38px;height:22px;padding:3px 4px}:host([size=medium]) .dot{width:16px;height:16px}:host([size=mini]) label{width:22px;height:14px;padding:2px}:host([size=mini]) .dot{width:10px;height:10px}:host([type=danger]) label.checked{background:var(--color-red-1)}:host([type=info]) label.checked{background:var(--color-blue-1)}:host([type=success]) label.checked{background:var(--color-green-1)}:host([type=primary]) label.checked{background:var(--color-teal-1)}:host([type=warning]) label.checked{background:var(--color-orange-1)}:host([type=inverse]) label.checked{background:var(--color-dark-1)}:host([color=purple]) label.checked{background:var(--color-purple-1)}</style> <section> <label> <span class="dot"></span> </label> <slot></slot> </section> ',this.__SWITCH__=this.root.lastElementChild.firstElementChild}static get observedAttributes(){return["active-text","inactive-text","checked","disabled"]}get value(){return this.props.checked}set value(e){this.checked=e}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e,this.__SWITCH__.classList.toggle("checked",this.props.checked)}get disabled(){return this.props.disabled}set disabled(e){var s=typeof e;e!==this.props.disabled&&(s==="boolean"&&e||s!=="boolean"?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}_updateStat(){this.checked?this.props["active-text"]!==null&&(this.textContent=this.props["active-text"]):this.props["inactive-text"]!==null&&(this.textContent=this.props["inactive-text"])}connectedCallback(){this._handleClick=c.bind(this,"click",e=>{this.disabled||(this.checked=!this.checked,this._updateStat(),this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){c.unbind(this,"click",this._handleClick)}attributeChangedCallback(e,s,r){if(s!==r)switch(e){case"checked":case"disabled":this[e]=r!==null;break;case"active-text":case"inactive-text":this.props[e]=r+"",this._updateStat();break}}}customElements.get("wc-switch")||customElements.define("wc-switch",o);export{o as default};
|
|
|