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>
|
2023-06-21 01:28:38 +02:00
|
|
|
${
|
|
|
|
this.hasAttribute("abbr")
|
|
|
|
? `<abbr x-id="label" title="${abbr}"><span x-id="label">${label}</span></abbr>`
|
|
|
|
: `<span x-id="label">${label}</span>`
|
|
|
|
}
|
2023-06-10 13:08:08 +02:00
|
|
|
</label>
|
|
|
|
`;
|
|
|
|
this.classList.add("customcheckbox");
|
2023-06-11 02:37:35 +02:00
|
|
|
this._checkbox = View.elements(this).checkbox;
|
2023-06-21 01:28:38 +02:00
|
|
|
this._checkbox.addEventListener("change", (event) => {
|
|
|
|
event.stopPropagation();
|
|
|
|
this.fireChangeEvent();
|
|
|
|
});
|
2023-06-10 13:08:08 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
get checkbox() {
|
|
|
|
return this._checkbox;
|
|
|
|
}
|
|
|
|
|
|
|
|
get checked() {
|
|
|
|
return this._checkbox.checked;
|
|
|
|
}
|
|
|
|
|
|
|
|
set checked(value) {
|
|
|
|
this._checkbox.checked = value;
|
|
|
|
}
|
2023-06-21 01:28:38 +02:00
|
|
|
|
|
|
|
set label(value) {
|
|
|
|
this.elements.label.innerText = value;
|
|
|
|
}
|
2023-06-10 13:08:08 +02:00
|
|
|
}
|
|
|
|
customElements.define("custom-checkbox", CustomCheckbox);
|