30:T7d3,searchableTable = (data, { label, value, ...options } = {}) => { const root = html`

`; const search = Inputs.search(data, { label }); search.addEventListener("input", (e) => e.stopPropagation()); root.append(search); const isMultiple = options.multiple !== false; let current = Array.isArray(value) ? [...value] : value != null ? [value] : []; let table; function renderTable() { const visible = search.value; const selectedVisible = visible.filter((v) => current.includes(v)); const tableValue = isMultiple ? selectedVisible : selectedVisible.length ? selectedVisible[0] : undefined; // empty table issue - remove if Inputs 12 const tableOptions = { ...options }; if (visible.length === 0 && tableOptions.sort) { delete tableOptions.sort; } const nextTable = Inputs.table(visible, { value: tableValue, ...tableOptions }); nextTable.addEventListener("input", () => { const rawNext = nextTable.value; const next = Array.isArray(rawNext) ? rawNext : rawNext != null ? [rawNext] : []; const visibleNow = search.value; const visibleSelectedBefore = current.filter((c) => visibleNow.includes(c) ); const added = next.filter((x) => !visibleSelectedBefore.includes(x)); const removed = visibleSelectedBefore.filter((x) => !next.includes(x)); if (added.length || removed.length) { const removedSet = new Set(removed); current = current.filter((x) => !removedSet.has(x)); for (const item of added) { if (!current.includes(item)) current.push(item); } } }); if (table) table.remove(); table = nextTable; root.append(table); } search.addEventListener("input", renderTable); Object.defineProperty(root, "value", { get: () => (isMultiple ? current : current.length ? current[0] : undefined) }); renderTable(); return root; }31:T54b,numberStepper = ({ label, value = 0, step = 1, min, max } = {}) => { let i = Inputs.number({ value, step }); let l = Inputs.button("-"); let r = Inputs.button("+"); const clamp = () => { if (min !== undefined) i.value = Math.max(i.value, min); if (max !== undefined) i.value = Math.min(i.value, max); }; clamp(); l.style.width = r.style.width = "fit-content"; l.onclick = () => { i.value = i.value - step; clamp(); i.dispatchEvent(new Event("input", { bubbles: true })); }; r.onclick = () => { i.value = i.value + step; clamp(); i.dispatchEvent(new Event("input", { bubbles: true })); }; i.addEventListener("input", clamp); const lb = label ? html`${label}` : ""; const o = html`

${lb}${l}${i}${r}

`; Object.defineProperties(o, { value: { get: () => i.value, set(v) { i.value = v; clamp(); i.dispatchEvent(new Event("input", { bubbles: true })); } }, min: { get: () => min, set(v) { min = v; clamp(); } }, max: { get: () => max, set(v) { max = v; clamp(); } } }); return o; }32:[] 2e:{"title":"Inputs","cells":[{"id":0,"value":"# Inputs\n\n\n\nSome custom input elements\n1. Searchable Table\n2. Number Stepper","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}