Published
Edited
Dec 16, 2020
Importers
19 stars
Insert cell
Insert cell
Changed
function mutableForm(form) { const view = html`<div>${form}`; linkProperties(form, view, ['output'], ['value']); view.form = form; const input = form.input; const setBoxes = (n, v) => { const checked = new Set(v); n.forEach(n => n.checked = checked.has(n.value)); };
-
const isCheckbox = input instanceof RadioNodeList && input[0].type === 'checkbox'; const setValue = isCheckbox ? setBoxes : (n, v) => n.value = v;
+
const setValue = input instanceof RadioNodeList && input[0].type === 'checkbox' ? setBoxes : input instanceof HTMLInputElement && input.type === 'checkbox' ? (n, v) => {n.checked = !!v} : (n, v) => {n.value = v};
Object.defineProperty(view, 'value', { enumerable: true, get: () => form.value, set: v => { setValue(input, v);
-
const name = input instanceof RadioNodeList ? 'change' : 'input';
+
const name = input instanceof RadioNodeList || input instanceof HTMLInputElement && input.type === 'checkbox' ? 'change' : 'input';
form.dispatchEvent(new Event(name, {bubbles: true})); } }); return view; }
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Added
md`Special case: single checkbox.`
Insert cell
Added
viewof test_checkbox_single = mutableForm(checkbox({options:['a']}))
Insert cell
Added
test_checkbox_single
Insert cell
Added
test_checkbox_single_mutate = viewof test_checkbox_single.value = true, viewof test_checkbox_single.value
Insert cell
Added
assert(test_checkbox_single, test_checkbox_single_mutate)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
assert(test_autoSelect, test_autoSelect_mutate)
Insert cell
Insert cell
Insert cell
import {
checkbox, color, date, number, radio, select, slider, text, textarea,
autoSelect
} from '@jashkenas/inputs'
Insert cell
Insert cell