51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
import { $, html } from "sigpro";
|
|
|
|
const getVal = (props, key, def) => {
|
|
const v = props[key];
|
|
if (v === undefined || v === null) return def;
|
|
if (typeof v === "function") {
|
|
try {
|
|
return v();
|
|
} catch {
|
|
return def;
|
|
}
|
|
}
|
|
return v;
|
|
};
|
|
|
|
const toString = (val) => {
|
|
if (val === undefined || val === null) return "";
|
|
return String(val);
|
|
};
|
|
|
|
$.component(
|
|
"c-check",
|
|
(props, { emit }) => {
|
|
const label = toString(getVal(props, "label", ""));
|
|
const disabled = getVal(props, "disabled", false);
|
|
const isToggle = getVal(props, "toggle", false);
|
|
|
|
return html`
|
|
<label class="label cursor-pointer flex gap-2">
|
|
<input
|
|
type="checkbox"
|
|
class="${isToggle ? "toggle" : "checkbox"}"
|
|
?disabled="${disabled}"
|
|
.checked=${() => getVal(props, "checked", false)}
|
|
@change="${(e) => {
|
|
if (disabled) return;
|
|
const val = e.target.checked;
|
|
if (typeof props.checked === "function") props.checked(val);
|
|
emit("change", val);
|
|
}}" />
|
|
${label
|
|
? html`
|
|
<span class="label-text">${label}</span>
|
|
`
|
|
: ""}
|
|
</label>
|
|
`;
|
|
},
|
|
["label", "checked", "disabled", "toggle"],
|
|
);
|