13 lines
2.7 KiB
JavaScript
13 lines
2.7 KiB
JavaScript
|
import{css as e,html as i,Component as o,classMap as a}from"wkit";class n extends o{static props={value:!1,inactiveText:"",activeText:"",inlineText:!1,disabled:!1,readOnly:!1};static styles=[e`:host{display:inline-flex;cursor:pointer}:host label{display:flex;align-items:center;height:32px;padding-right:8px;line-height:1;font-size:14px;white-space:nowrap;color:var(--color-dark-1);cursor:inherit;outline:none;-webkit-user-select:none;user-select:none}:host label.open .switch{flex-direction:row-reverse;background:var(--color-grey-3)}:host .switch{display:flex;align-items:center;min-width:32px;height:18px;padding:0 2px;margin-right:5px;border-radius:16px;font-family:Tahoma,Verdana,Helvetica,Arial,sans-serif;font-size:12px;background:var(--color-plain-3);transition:box-shadow .2s ease,background .2s ease}:host .dot{display:block;width:14px;height:14px;border-radius:50%;background:#fff;content:""}:host .text{padding:0 3px;background:none;color:#fff}:host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-plain-a)}`,e`:host([size=small]) label{height:24px;font-size:12px}:host([size=small]) .switch{min-width:28px;height:16px;padding:0 2px}:host([size=small]) .dot{width:12px;height:12px}`,e`:host([type=primay]) .open .switch{background:var(--color-teal-1)}:host([type=primay]):host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]) .open .switch{background:var(--color-blue-1)}:host([type=info]):host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]) .open .switch{background:var(--color-green-1)}:host([type=success]):host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-green-a)}:host([type=warning]) .open .switch{background:var(--color-orange-1)}:host([type=warning]):host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=danger]) .open .switch{background:var(--color-red-1)}:host([type=danger]):host(:focus-within) .switch{box-shadow:0 0 0 2px var(--color-red-a)}`,e`:host([readonly]),:host([disabled]){opacity:.6}:host([disabled]){cursor:not-allowed}`];get#t(){return this.value?this.activeText:this.inactiveText}#s(t){if(this.disabled||this.readOnly)return;t.stopPropagation(),this.value=!this.value;let s={value:this.value};this.$emit("input",s),this.$emit("change",s)}#e(t){(t.type==="click"||t.keyCode===32)&&(t.preventDefault(),this.#s(t))}render(){return i` <label
|
||
|
|
class=${a({open:this.value})}
|
||
|
|
tabindex=${this.disabled||this.readOnly?"none":0}
|
||
|
|
@click=${this.#e}
|
||
|
|
@keydown=${this.#e}
|
||
|
|
>
|
||
|
|
<span class="switch">
|
||
|
|
<i class="dot"></i>
|
||
|
|
<mark class="text">${this.inlineText?this.#t:""}</mark>
|
||
|
|
</span>
|
||
|
|
<slot>${this.inlineText?"":this.#t}</slot>
|
||
|
|
</label>`}}n.reg("switch");
|