9 lines
3.6 KiB
JavaScript
9 lines
3.6 KiB
JavaScript
import{css as t,html as s,Component as r}from"wkit";class i extends r{static props={value:{type:String,default:"",attribute:!1,observer(){this.#o()}},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(),this.value=o.value,this.$emit("input",{data:o.value}),this.$emit("change",{data:o.value})}),this.#o(!0)}#o(o){Array.from(this.children).forEach(e=>{e.tagName==="WC-RADIO"?e.root&&(o&&(e.disabled=this.disabled,e.readOnly=this.readOnly),e.value===this.value?e.checked=!0:e.checked=!1):e.remove()})}}class l extends r{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;white-space:nowrap;align-items:center;font-size:14px;cursor:inherit;outline:none;color:var(--color-dark-1);-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-grey-2);border-radius:50%;background:#fff;transition:box-shadow .15s linear}:host .dot::after{display:block;visibility:hidden;width:6px;height:6px;border-radius:50%;background:var(--color-dark-1);content:"";transform:scale(0);transition:transform .15s linear}:host:host([checked]) .dot::after{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}:host([size=small]) .dot::after{width:6px;height:6px}`,t`:host([type=primary]) label{color:var(--color-teal-2)}:host([type=primary]) .dot{border-color:var(--color-teal-2)}:host([type=primary]) .dot::after{background: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]) .dot::after{background: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]) .dot::after{background: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]) .dot::after{background: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]) .dot::after{background: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}`];#o(o){this.disabled||this.readOnly||this.checked||(o.stopPropagation(),this.checked=!0,this.inGroup?this.parentNode.$emit("child-change",{value:this.value}):(this.$emit("input"),this.$emit("change")))}#e(o){(o.type==="click"||o.keyCode===32)&&this.#o(o)}mounted(){this.parentNode?.tagName==="WC-RADIO-GROUP"&&(this.inGroup=!0)}render(){return s`<label
|
|
tabindex=${this.disabled||this.readOnly?"none":0}
|
|
@click=${this.#e}
|
|
@keydown=${this.#e}
|
|
>
|
|
<span class="dot"></span>
|
|
<slot></slot>
|
|
</label>`}}i.reg("radio-group"),l.reg("radio");
|