2023-06-13 01:16:27 +02:00
|
|
|
const { dom } = require("../js/misc");
|
2023-06-10 13:08:08 +02:00
|
|
|
const { View } = require("./view");
|
|
|
|
|
|
|
|
class CustomCheckbox extends View {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
const isChecked = this.hasAttribute("checked") && (this.getAttribute("checked").length == 0 || this.getAttribute("checked") === "true");
|
|
|
|
const label = this.hasAttribute("label") ? this.getAttribute("label") : "";
|
|
|
|
const abbr = this.hasAttribute("abbr") ? this.getAttribute("abbr") : "";
|
|
|
|
this.innerHTML = /*html*/ `
|
|
|
|
<label class="inline-flex items-center gap-x-1 cursor-pointer">
|
|
|
|
<input x-id="checkbox" x-change type="checkbox" ${isChecked ? "checked" : ""} class="hidden peer">
|
|
|
|
<svg class="h-2 w-2 stroke-gray-600 fill-gray-100 peer-checked:fill-gray-600" viewBox="0 0 6 6">
|
|
|
|
<circle cx="3" cy="3" r="2" />
|
|
|
|
</svg>
|
|
|
|
${this.hasAttribute("abbr") ? `<abbr title="${abbr}">${label}</abbr>` : label}
|
|
|
|
</label>
|
|
|
|
`;
|
|
|
|
this.classList.add("customcheckbox");
|
2023-06-11 02:37:35 +02:00
|
|
|
this._checkbox = View.elements(this).checkbox;
|
2023-06-10 13:08:08 +02:00
|
|
|
this.setupEventHandlers();
|
|
|
|
}
|
|
|
|
|
|
|
|
get checkbox() {
|
|
|
|
return this._checkbox;
|
|
|
|
}
|
|
|
|
|
|
|
|
get checked() {
|
|
|
|
return this._checkbox.checked;
|
|
|
|
}
|
|
|
|
|
|
|
|
set checked(value) {
|
|
|
|
this._checkbox.checked = value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define("custom-checkbox", CustomCheckbox);
|