2b:null 2c:["$","title",null,{"children":"Inputs in grid | ObeyMyGH | Observable"}] 31:[] 2f:{"id":"598db1c4614900eb","slug":"inputs-in-grid","title":"Inputs in grid","thumbnail":"bcf2606264a517c9b26e97137539af250ddd953a98ad6a4b74641712343c42e0","access_level":"public","create_time":"$D2021-06-11T10:34:34.908Z","update_time":"$D2021-10-10T02:30:26.453Z","view_time":null,"first_public_time":"$D2021-06-13T17:44:00.071Z","fork":{"id":"7dfec509126263f5","slug":"input-groups","title":"Inputs in grid","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"stars":0,"starred":false,"owner":{"type":"team","id":"0354938a5dd10c5f","login":"obey","name":"ObeyMyGH","avatar_url":"https://avatars-next.observableusercontent.com/84c352432ac546e3e3229af582bcc15a3a78ab6da1ca97e8559b916972a1d0f1","tier":"starter_2024"},"version":315,"publish_version":315,"role":null,"authored":false,"authors":[{"type":"individual","id":"440b42ffda60d765","login":"obey","name":"ObeyMyGH","avatar_url":"https://avatars-next.observableusercontent.com/84c352432ac546e3e3229af582bcc15a3a78ab6da1ca97e8559b916972a1d0f1","tier":null}],"members":[{"type":"individual","id":"440b42ffda60d765","login":"obey","name":"ObeyMyGH","avatar_url":"https://avatars-next.observableusercontent.com/84c352432ac546e3e3229af582bcc15a3a78ab6da1ca97e8559b916972a1d0f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Inputs in grid","cells":[{"id":0,"value":"md`# Inputs in grid `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":261,"value":"values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":311,"value":"valuesObjOnly","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":16,"value":"import {slider,select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"