31:[] 2f:{"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"},{"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"},{"id":28,"value":"md`---\n## Examples\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`### Object`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"valueObject","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":111,"value":"md`---\n### Nested object`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"valueNestedObject","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":34,"value":"md`---\n### Array`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"valueArray","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":60,"value":"valueNestedArray","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":174,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {Range} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}