30:[] 2e:{"title":"Inputs in grid","cells":[{"id":0,"value":"md`# Inputs in grid `","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`Just a quick wrapper around [jashkenas/inputs](https://observablehq.com/@jashkenas/inputs) , so it's possible to position inputs in a grid.\n\nDoes not work for all inputs (multi checkboxes and canvas based inputs, like location coordinate picker ) , but it's enough for my needs for now.\n\nWe get result as array, which has additional properties attached for naming convenience (if you pass names array as a second parameter)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"values","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"viewof values = inputsGroup(\n [\n [\n slider({ title: 'test1', description: 'description1' }),\n slider({ title: 'test2', description: 'description2' }),\n slider({ title: 'test3', description: 'description3' })\n ],\n [\n slider({ title: 'test4', description: 'description4' }),\n slider({ title: 'test5', description: 'description5' }),\n slider({ title: 'test6', description: 'description6' })\n ],\n [\n `

`, // Just a trick, to make select element centered\n select(['test', 'name'])\n ]\n ],\n\n [\n ['first-input', 'second-input', 'third-slider'],\n ['4-th', '5-th', '6-th'],\n ['', 'select']\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"valuesObjOnly","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof valuesObjOnly = inputsGroup(\n [\n [\n slider({ title: 'test1', description: 'description1' }),\n slider({ title: 'test2', description: 'description2' }),\n slider({ title: 'test3', description: 'description3' })\n ],\n [\n slider({ title: 'test4', description: 'description4' }),\n slider({ title: 'test5', description: 'description5' }),\n slider({ title: 'test6', description: 'description6' })\n ],\n [\n `

${views.map(\n row =>\n html`

${row.map(\n input =>\n html`

${input}

`\n )}

`;\n\n form.oninput = () => {\n const values = views.map(row => row.map(input => input.value));\n form.value = values;\n\n if (args && args.objOnly) form.value = {};\n if (names) {\n names.forEach((row, i) =>\n row.forEach(\n (c, j) => values[i][j] != null && (form.value[c] = values[i][j])\n )\n );\n }\n };\n form.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {slider,select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}