flexiselect-js
Version:
Advanced TomSelect wrapper with groups, checkboxes, images
79 lines (78 loc) • 3.19 kB
JavaScript
function a(p) {
return {
...p,
render: {
optgroup_header: (e, o) => `
<div class="fs-optgroup-header">
<input type="checkbox" class="fs-group-checkbox" data-group="${o(
e.label
)}" />
<span>${o(e.label)}</span>
</div>
`,
item: (e, o) => e.isGroup ? `
<div class="fs-item-with-group">
${o(e.text)}
</div>
` : `<div>${o(e.text)}</div>`
},
onInitialize() {
const e = this;
e.on("dropdown_open", () => {
console.log("[GroupCheckbox] Dropdown opened"), e.dropdown.addEventListener("click", (o) => {
const s = o.target;
if (!s.classList.contains("fs-group-checkbox")) return;
o.stopPropagation();
const r = s, c = r.getAttribute("data-group"), t = r.checked;
if (!c) return;
const i = r.closest(".optgroup");
if (!i) return;
const n = i.querySelectorAll(".option"), l = Array.from(n).map((u) => u.getAttribute("data-value")).filter(Boolean);
console.log(
`[GroupCheckbox] Clicked group=${c}, checked=${t}, children=`,
l
), t ? (e.addItems(l, !0), console.log(`[GroupCheckbox] ${c} → SELECT ALL`, l)) : (l.forEach((u) => e.removeItem(u, !0)), console.log(`[GroupCheckbox] ${c} → UNSELECT ALL`, l)), e.refreshOptions(!1), console.log(
"[FlexiSelect] Current selected after group click:",
e.getValue()
);
});
}), e.on("change", () => {
const o = e.getValue();
console.log("[FlexiSelect] Change fired, current selected:", o), Object.keys(e.optgroups).forEach((s) => {
const r = e.optgroups[s], t = Object.values(e.options).filter(
(l) => l.optgroup === s
).map((l) => l.value), i = t.filter((l) => e.items.includes(l));
console.log(
`[Sync] Group=${r.label}, selected=${i.length}/${t.length}`
);
const n = `__group_${r.label}`;
i.length === t.length && t.length > 0 ? (console.log(
`[Collapse] Collapsing ${r.label} into pill (${t.length})`
), t.forEach((l) => e.removeItem(l, !0)), e.updateOption(n, {
value: n,
text: `${r.label} (${t.length})`,
isGroup: !0
}), e.items.includes(n) || e.addItem(n, !0)) : e.items.includes(n) && (console.log(`[Expand] Removing pill for ${r.label}`), e.removeItem(n, !0));
}), console.log("[FlexiSelect] After change, items:", e.getValue());
}), e.on("item_remove", (o) => {
if (o.startsWith("__group_")) {
const s = o.replace("__group_", ""), r = Object.entries(e.optgroups).find(
([, t]) => t.label === s
), c = r ? r[0] : null;
if (c) {
const i = Object.values(e.options).filter(
(n) => n.optgroup === c
).map((n) => n.value);
e.addItems(i, !0), console.log(
`[Expand] Group pill ${s} removed → restored children`,
i
);
}
}
});
}
};
}
export {
a as withGroupCheckboxes
};