9 lines
3.3 KiB
JavaScript
9 lines
3.3 KiB
JavaScript
|
import{css as t,html as a,Component as s}from"wkit";import"../base/icon.js";class i extends s{static props={value:{type:Array,default:[],observer(){this.#e()}},disabled:!1,readonly:!1};static styles=t`:host{display:inline-flex;flex-wrap:wrap;align-items:center}`;mounted(){this.$on("child-change",o=>{o.stopPropagation();let e=this.value.indexOf(o.value);e>-1?this.value.splice(e,1):this.value.push(o.value),this.$emit("input",{data:this.value}),this.$emit("change",{data:this.value})}),this.#e(!0)}#e(o){Array.from(this.children).forEach(e=>{e.tagName==="WC-CHECKBOX"?e.root&&(o&&(e.disabled=this.disabled,e.readOnly=this.readOnly),e.checked=this.value.includes(e.value)):e.remove()})}}class l extends s{static props={value:"str!",checked:!1,disabled:!1,readonly:!1};static styles=[t`:host{display:inline-flex;height:32px;cursor:pointer}:host label{display:flex;align-items:center;padding-right:16px;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 .dot{display:flex;justify-content:center;align-items:center;width:14px;height:14px;margin-right:4px;border:1px solid var(--color-dark-1);border-radius:4px;background:#fff;transition:box-shadow .15s linear}:host .dot wc-icon{display:block;visibility:hidden;width:10px;height:10px;transform:scale(0);transition:transform .15s linear}:host:host([checked]) .dot wc-icon{visibility:visible;transform:scale(1)}`,t`:host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-plain-a)}`,t`:host([size=small]){height:24px}:host([size=small]) .dot{width:12px;height:12px}`,t`:host([type=primary]) label{color:var(--color-teal-2)}:host([type=primary]) .dot{border-color:var(--color-teal-2)}:host([type=primary]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]) label{color:var(--color-blue-2)}:host([type=info]) .dot{border-color:var(--color-blue-2)}:host([type=info]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]) label{color:var(--color-green-2)}:host([type=success]) .dot{border-color:var(--color-green-2)}:host([type=success]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-green-a)}:host([type=warning]) label{color:var(--color-orange-2)}:host([type=warning]) .dot{border-color:var(--color-orange-2)}:host([type=warning]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=danger]) label{color:var(--color-red-2)}:host([type=danger]) .dot{border-color:var(--color-red-2)}:host([type=danger]):host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-red-a)}`,t`:host([readonly]),:host([disabled]){opacity:.6}:host([disabled]){cursor:not-allowed}`];#e(o){if(this.disabled||this.readOnly)return;o.stopPropagation(),this.checked=!this.checked;let e={value:this.value,checked:this.checked};this.inGroup?this.parentNode.$emit("child-change",e):(this.$emit("input",e),this.$emit("change",e))}#o(o){(o.type==="click"||o.keyCode===32)&&this.#e(o)}mounted(){this.parentNode?.tagName==="WC-CHECKBOX-GROUP"&&(this.inGroup=!0)}render(){return a`<label
|
||
|
|
tabindex=${this.disabled||this.readOnly?"none":0}
|
||
|
|
@click=${this.#o}
|
||
|
|
@keydown=${this.#o}
|
||
|
|
>
|
||
|
|
<span class="dot"><wc-icon name="get"></wc-icon></span>
|
||
|
|
<slot></slot>
|
||
|
|
</label>`}}i.reg("checkbox-group"),l.reg("checkbox");
|