30:[] 2e:{"title":"List / Observable Inputs","cells":[{"id":0,"value":"

List / Observable Inputs

\n\n# Input: List","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"A little utility to combine [Inputs](https://observablehq.com/collection/@observablehq/inputs) into a single list, similar to [Form](https://observablehq.com/@observablehq/input-form) but horizontally. Useful for vector/matrix inputs.","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"```javascript\nimport { list } from \"@stwind/input-list\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"viewof vec3H = list([Inputs.range([0,1], { value: .1, step: .001 }),\n Inputs.range([0,1], { value: .2, step: .001 }),\n Inputs.range([0,1], { value: .3, step: .001 })], \n { columns: 3, label: \"vec3\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"vec3H","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"Or just vertically","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"viewof vec3V = list([Inputs.range([0,1], { value: .1, step: .001 }),\n Inputs.range([0,1], { value: .2, step: .001 }),\n Inputs.range([0,1], { value: .3, step: .001 })], \n { columns: 1, label: \"vec3\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"viewof mat4 = list(d3.range(16).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })), \n { columns: 4, label: \"mat4\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"mat4","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"Can also be combined with forms","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"viewof form = Inputs.form({\n toggles: list([Inputs.toggle({ label: \"Foo\", value: true }),\n Inputs.toggle({ label: \"Bar\", value: false }),\n Inputs.toggle({ label: \"Baz\", value: true })],\n { columns: 3, label: \"toggles\" }),\n mat3: list(d3.range(9).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })), \n { columns: 3, label: \"mat3\" }),\n mat2x3: list(d3.range(6).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })), \n { columns: 2, label: \"mat2x3\" }),\n vec4: list(d3.range(4).map(() => Inputs.range([0,1], { value: Math.random(), step: .001 })), \n { columns: 4, label: \"vec4\" }),\n dates: list([Inputs.date({ value: \"2021-09-21\" }), Inputs.date({ value: \"2022-09-21\" })],\n { columns: 2, label: \"dates\" }),\n colors: list([Inputs.color({ value: \"#628493\" }), Inputs.color({ value: \"#dba4a4\" }), Inputs.color({ value: \"#f09494\" })],\n { columns: 3, label: \"colors\" }),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"form","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"It can even be nested and with different data types to make complex control panes like those in [ImGui](https://github.com/ocornut/imgui).","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"viewof multi = list([list([Inputs.range([0,1], { value: .1, step: .1 }), Inputs.range([0,1], { value: .9, step: .1 })],\n { columns: 2 }),\n list([Inputs.button(\"Button 1\"), Inputs.button(\"Button 2\"), Inputs.button(\"Button 3\")], \n { columns: 3 }),\n Inputs.radio([\"foo\", \"bar\", \"baz\"], { value: \"bar\" }),\n Inputs.checkbox([\"red\", \"green\", \"blue\"], { value: [\"red\"] }),\n list([Inputs.text({ placeholder: \"First Name\" }), Inputs.text({ placeholder: \"Last Name\" })], \n { columns: 2 }),\n list([Inputs.select(new Map([[\"Short\", 8], [\"Tall\", 12], [\"Grande\", 16], [\"Venti\", 20]]), { value: 12 }),\n Inputs.color({ value: \"#a09494\" })],\n { columns: 2 })\n ], { columns: 3, label: \"multi\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"multi","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"list = {\n const NS = Inputs.button().className;\n \n return (inputs, { label = \"\", columns = 1 } = {}) => {\n const value = inputs.map(inp => inp.value);\n const oninput = () => inputs.forEach((inp, i) => value[i] = inp.value);\n\n const style = {\n \"display\": \"grid\",\n \"grid-template-columns\": `repeat(${columns},minmax(auto,calc(var(--input-width) - var(--length2))))`,\n \"column-gap\": \"var(--length2)\"\n };\n const form = htl.html`