2e:null 2f:["$","title",null,{"children":"Inputs feature request: Proxy values | Fabian Iwand | Observable"}] 34:[] 32:{"id":"f3bc3f9ea45b9f73","slug":"observablehq-inputs-feature-73","title":"Inputs feature request: Proxy values","thumbnail":"e75a3721269ac777b28a903c0740ff9ae55e1ab33ecdf9df82891a87744e69b9","access_level":"public","create_time":"$D2021-02-07T00:28:01.115Z","update_time":"$D2022-01-13T14:02:25.740Z","view_time":null,"first_public_time":"$D2021-02-07T17:08:45.600Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":191,"publish_version":191,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[{"id":"d0eeddb8ed765210","reply_to_id":null,"content":"These would be very useful.","create_time":"$D2021-02-08T00:39:45.206Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"399483b51800a77d","slug":"graveyard","title":"Graveyard","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Inputs feature request: Proxy values","cells":[{"id":0,"value":"md`# Inputs feature request: Proxy values\n\n

\n**Update: This has been implemented as [Inputs.form()](https://github.com/observablehq/inputs#inputsforminputs-options).**\n

\n\nA helper function that defines proxy properties for multiple inputs.\n\nFeature request: [observablehq/inputs #73](https://github.com/observablehq/inputs/issues/73)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function mergeInputs(inputs, target = {}) {\n const props = Object.fromEntries(Object.entries(inputs).map(([key, input]) => [key, {\n enumerable: true,\n configurable: true,\n get: () => input.value,\n set: value => input.value = value,\n }]));\n return Object.defineProperties(target, props);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`---\n## Examples\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`### Object`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"valueObject","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof valueObject = {\n const inputs = {\n n: Range([1, 30], {value: 19, step: 1, label: \"size\" }),\n a: Range([0, 45], {value: 27.5, step:.1, label: \"angle\" }),\n x: Range([-100, 100], {value: 0, step: 1, label: \"x offset\" }),\n y: Range([-100, 100], {value: 0, step: 1, label: \"y offset\" }),\n };\n const view = html`

${Object.values(inputs)}`;\n view.value = mergeInputs(inputs);\n return view;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`---\n### Nested object`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"valueNestedObject","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"viewof valueNestedObject = {\n const group1 = {\n n: Range([1, 30], {value: 19, step: 1, label: \"size\" }),\n a: Range([0, 45], {value: 27.5, step:.1, label: \"angle\" }),\n };\n const group2 = {\n x: Range([-100, 100], {value: 0, step: 1, label: \"x offset\" }),\n y: Range([-100, 100], {value: 0, step: 1, label: \"y offset\" }),\n };\n \n const fieldset = (l, c) => html`

${l}${c}`;\n const view = html`

\n ${fieldset('Group 1', Object.values(group1))}\n ${fieldset('Group 2', Object.values(group2))}\n `;\n \n view.value = mergeInputs({\n group1: {value: mergeInputs(group1)},\n group2: {value: mergeInputs(group2)},\n });\n return view;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`---\n### Array`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"valueArray","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof valueArray = {\n const inputs = [\n Range([1, 30], {value: 19, step: 1}),\n Range([0, 45], {value: 27.5, step:.1}),\n Range([-100, 100], {value: 0, step: 1}),\n ];\n const view = html`

${inputs}`;\n view.value = mergeInputs(inputs, []);\n return view;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`---\n### Nested array\n\nLimitation: Setting a nested value from outside does not work.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"valueNestedArray","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof valueNestedArray = {\n const inputs = [\n [\n Num([1, 30], {value: 1, step: 1}),\n Num([1, 30], {value: 2, step: 1}),\n ],\n [\n Num([1, 30], {value: 3, step: 1}),\n Num([1, 30], {value: 4, step: 1}),\n ]\n ];\n const view = html`

${inputs[0]}
${inputs[1]}`;\n view.value = mergeInputs(inputs.map(arr => ({value: mergeInputs(arr, [])})), []);\n return view;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {Range} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"Num = (...args) => {\n const n = Range.apply(null, args);\n n.style.cssText += '--input-width:5em;display:inline-block;margin-right:5px';\n n.querySelector('input[type=\"range\"]').remove();\n return n;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"