31:T68f,function persistentSelectImpl(config = {},newKey) { let { value: formValue, title, description, submit, multiple, size, key, options } = Array.isArray(config) ? {options: config} : config; if(!key && !newKey) { throw `Please provide unique key for select persistentSelect({key:"uniqKey",options:[1,2]}) or persistentSelect([1,2],"uniqKey")` }else{ if(newKey){ key = newKey; } } const localValue = localStorage.getItem(key); if(localValue){ formValue = JSON.parse(localValue); } let stringified = false; options = options.map( o => { if(typeof o === "object"){ return o; } stringified = true; return { value: JSON.stringify(o), label: o } } ); // return key const form = input({ type: "select", title, stringified, description, submit, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); localStorage.setItem(key,JSON.stringify(selected)) return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }32:Ta02,function input(config) { let { stringified, form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); let value = getValue ? getValue(form.input) : form.input.value; if(stringified){ if(Array.isArray(value)){ value.forEach(function(d,i,arr){ arr[i] = JSON.parse(d); }) }else{ value = JSON.parse(value); } } if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput"){ form.dispatchEvent(new CustomEvent("input", { bubbles: true })); } }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }33:[] 2f:{"title":"Persistent Select Input","cells":[{"id":0,"value":"md`# Persistent Select Input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`This notebook is an extension over [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs) select component`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`In short, every time value is changed, it is saved in localStorage and after refresh, old value will be set as a default option\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`### Usage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"import {persistentSelect} from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`NOTE FOR SELF - fix default value setting when only string options are used`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`You need to provide key for it, otherwise error will be thrown `","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof d1Error = persistentSelect([\"Spring\", \"Summer\", \"Fall\", \"Winter\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof d2 = persistentSelect([\"Spring\", \"Summer\", \"Fall\", \"Winter\"],'key1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"d2","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"viewof dd2 = persistentSelect({\n key:'3',\n description: \"As a child, which vegetables did you refuse to eat?\",\n options: [\"Spinach\", \"Broccoli\", \"Brussels Sprouts\", \"Cauliflower\", \"Kale\", \"Turnips\", \"Green Beans\", \"Asparagus\"],\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"dd2","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"viewof dd3 = {\n const dd3 = persistentSelect({\n title: \"How are you feeling today?\",\n key:13445,\n options: [\n { label: \"🤷\", value: \"shrug\" },\n { label: \"😂\", value: \"tears-of-joy\" },\n { label: \"😍\", value: \"loving-it\" },\n { label: \"🤔\", value: \"hmmm\" },\n { label: \"😱\", value: \"yikes\" },\n { label: \"😈\", value: \"mischievous\" },\n { label: \"💩\", value: \"poo\" }\n ],\n value: \"hmmm\"\n });\n dd3.input.style.fontSize = \"30px\";\n dd3.input.style.marginTop = \"8px\";\n return dd3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"dd3","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`After refreshing notebook, chosen values will be preserved anyway`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3format = require(\"d3-format@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}