31:T4d3,32:T48d,

33:T7c0,

34:T187a,async function newUI(options = {}) { let { classes = "" } = options; classes = classes.split(/\s+/).filter((_) => !!_); await UIkit; /* [x] Button - do something when a button is clicked [x] Checkbox - choose any from a set [x] Toggle - toggle between two values (on or off) [x] Radio - choose one from a set [x] Range - choose a numeric value in a range (slider) [x] Select - choose one or many from a set (drop-down menu) [x] Text - freeform single-line text input [x] Textarea - freeform multi-line text input [x] Date - date input [x] File - local file input [x] Search - query a tabular dataset [?] Table - browse a tabular dataset [x] Form - combine multiple inputs [x] Input - a programmatic interface for storing input state [x] bind - synchronize two or more inputs [x] disposal - detect when an input is discarded */ function _cleanup(elm) { [elm, ...elm.querySelectorAll("[class^='oi-']")].forEach((e) => e.setAttribute("class", "") ); elm.classList.add(...classes); return elm; } function _isInline(options) { return options.inline !== false; } function _cls(elm, selector, ...classes) { classes = classes.filter((_) => !!_); [...(elm.querySelectorAll(selector) || [])].forEach((e) => e.classList.add(...classes) ); return elm; } function _spaces(elm, selector) { _cls(elm, selector, "uk-flex-inline"); elm.querySelector(selector).style.gap = "1em"; return elm; } function _label(elm, options) { // _cls(elm, "label:first-child", "uk-margin-right"); elm.classList.add("uk-flex"); if (_isInline(options)) { elm.style.alignItems = "center"; elm.style.gap = "0.5em"; } else { elm.style.alignContent = "stretch"; elm.style.flexDirection = "column"; } return elm; } function button(options) { const elm = _cleanup(Inputs.button(options)); _label(elm, options); elm.querySelector("button").classList.add("uk-button", "uk-button-default"); return elm; } function toggle(options = {}) { const elm = _cleanup(Inputs.toggle(options)); _label(elm, options); _cls( elm, "input[type=checkbox]", "uk-margin-small-right", "uk-checkbox", _isInline(options) ? "" : "uk-display-block" ); return elm; } function radio(values, options = {}) { const elm = _cleanup(Inputs.radio(values, options)); _label(elm, options); _cls(elm, "label > input", "uk-margin-small-right", "uk-radio"); _spaces(elm, "div:last-child"); return elm; } function checkbox(values, options = {}) { const elm = _cleanup(Inputs.checkbox(values, options)); _label(elm, options); _cls(elm, "label > input", "uk-margin-small-right", "uk-checkbox"); _spaces(elm, "div:last-child"); return elm; } function select(values, options = {}) { const elm = _cleanup(Inputs.select(values, options)); _label(elm, options); _cls(elm, "select", "uk-select"); return elm; } function range(range, options = {}) { const elm = _cleanup(Inputs.range(range, options)); _label(elm, options); _cls(elm, "div:last-child", "uk-flex"); _cls(elm, "div:last-child > *", "uk-margin-small-right"); _cls(elm, "input[type=range]", "uk-range"); let len = options.numbersWidth || 0; const num = elm.querySelector("input[type=number]"); if (!len) { num.parentElement.removeChild(num); } else { _cls(elm, "input[type=number]", "uk-input", "uk-form-small"); num.style.width = `${len}em`; } return elm; } function text(options = {}) { const elm = _cleanup(Inputs.text(options)); _label(elm, options); _cls( elm, "div > input", "uk-input", "uk-form-small", "uk-form-width-small" ); return elm; } function textarea(options = {}) { const elm = _cleanup(Inputs.textarea(options)); _label(elm, options); _cls( elm, "div > textarea", "uk-textarea", "uk-width-1-1" // "uk-form-small", // "uk-form-width-small" ); _cls(elm, "div:last-child", "uk-width-1-1"); // _isInline(options) && (elm.style.alignItems = "flex-start"); return elm; } function date(options = {}) { const elm = _cleanup(Inputs.date(options)); _label(elm, options); _cls(elm, "div > input", "uk-input", "uk-form-small"); return elm; } function file(options = {}) { const elm = _cleanup(Inputs.file(options)); _label(elm, options); elm.querySelector("label").classList.add("uk-button", "uk-button-default"); elm.querySelector("div:last-child").style.display = "none"; return elm; } function search(options = {}) { const elm = _cleanup(Inputs.search(options)); _label(elm, options); _cls( elm, "div > input", "uk-input", "uk-form-small", "uk-form-width-small" ); return elm; } function table(...args) { let { id } = DOM.uid(); id = `table-${id}`; const form = Inputs.table(...args); const table = form.querySelector("table"); table.setAttribute("id", id); const style = htl.html` `; form.appendChild(style); return form; // const elm = _cleanup(Inputs.table(...args)); // _cls( // elm, // "table", // "uk-table", // "uk-table-hover", // "uk-table-divider", // "uk-text-center" // ); // _cls(elm, "input[type=checkbox]", "uk-margin-small-right", "uk-checkbox"); // _cls(elm, "input[type=radio]", "uk-margin-small-right", "uk-radio"); // return elm; } function download({ value, name = "untitled", label }) { const elm = _cleanup(DOM.download(value, name, label)); elm.querySelector("button").classList.add("uk-button", "uk-button-default"); return elm; } return { button, radio, range, checkbox, select, text, textarea, toggle, date, file, search, table, form: Inputs.form, input: Inputs.input, bind: Inputs.bind, disposal: Inputs.disposal, download }; }35:[] 2f:{"title":"OK: UIKit","cells":[{"id":0,"value":"# OK: UIKit\n\n* https://github.com/uikit/uikit\n* https://getuikit.com/docs/icon","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"toc({\n headers: \"h2,h3,h4\",\n title: \"\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"## Icons\n","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"

\n \n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":79,"value":"## Accordion","pinned":true,"hidden":false,"mode":"md"},{"id":14,"value":"

\n Item 1\n
\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\n
\n
\n Item 2\n
\n
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
\n
\n
\n Item 3\n
\n
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.
\n
\n

","pinned":true,"hidden":false,"mode":"html"},{"id":18,"value":"// UIkit.accordion(accordionHTML).toggle(3, true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"## Card","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"

\n \n

Title

April 01, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

\n Read more\n

","pinned":true,"hidden":false,"mode":"html"},{"id":60,"value":"## Dialog Box\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"$31","pinned":true,"hidden":false,"mode":"html"},{"id":84,"value":"## Form","pinned":true,"hidden":false,"mode":"md"},{"id":86,"value":"$32","pinned":true,"hidden":false,"mode":"html"},{"id":92,"value":"## Drop (Tooltip)\n\n* https://getuikit.com/docs/drop\n","pinned":true,"hidden":false,"mode":"md"},{"id":94,"value":"

\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

\n\n

\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

","pinned":true,"hidden":false,"mode":"html"},{"id":100,"value":"// UIkit.drop(dropHTML)","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"## Navbar\n\nhttps://getuikit.com/docs/navbar","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"$33","pinned":true,"hidden":false,"mode":"html"},{"id":128,"value":"## Offcanvas (Drawer)\n\nhttps://getuikit.com/docs/offcanvas\n","pinned":true,"hidden":false,"mode":"md"},{"id":130,"value":"

\n \n

Title 123

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

","pinned":true,"hidden":false,"mode":"html"},{"id":167,"value":"## Tabs\n","pinned":true,"hidden":false,"mode":"md"},{"id":169,"value":"

Left
Item
Item
Disabled

","pinned":true,"hidden":false,"mode":"html"},{"id":173,"value":"

Active
Item
\n More \n
\n
- Active
- Item
- Header
- Item
- Item
- Item
\n
\n

","pinned":true,"hidden":false,"mode":"html"},{"id":194,"value":"## Progress Bar","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"viewof restartProgress = Inputs.button(\"Restart progress bar\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"

\n \n

\n","pinned":true,"hidden":false,"mode":"html"},{"id":204,"value":"{\n await restartProgress;\n await new Promise((ready) => UIkit.util.ready(ready));\n const bar = progressBarHTML.querySelector(\"progress\");\n // const bar = viewof x;\n bar.value = 0;\n let stop = false;\n invalidation.then(() => (stop = true));\n while (!stop && bar.value < bar.max) {\n await Promises.delay(1000);\n bar.value += 10;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"## Inputs Wrappers","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"viewof b = ui.button(\"ABC\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"Inputs.button(\"ABC\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"ui.radio([\"First\", \"Second\"], { label: \"Radio Buttons:\", value: \"First\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"ui.checkbox([\"First\", \"Second\"], { label: \"Checkboxes:\", value: [\"Second\"] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"ui.range([1, 100], {\n value: 2,\n step: 1,\n label: \"Values Range:\",\n numbersWidth: 0\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"ui.text({ value: \"\", label: \"Text Input:\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"ui.date({ value: new Date(), label: \"Date Picker:\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"ui.textarea({\n value: \"\",\n placeholder: \"Write something here...\",\n label: \"Text Area:\",\n rows: 10\n // inline: false\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"ui.select([\"a\", \"b\", \"c\"], { label: \"Select:\", multiple: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"ui.toggle({ label: \"Toggle\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"viewof f = ui.file({\n label: htl.html` Select Files...`,\n accept: \".json\",\n inline: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"f && f.json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"data = [\n { firstName: \"John\", lastName: \"Smith\", age: 42 },\n { firstName: \"James\", lastName: \"Bond\", age: 50 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"ui.search(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"ui.table([\n { title: \"Hello\", content: \"World\" },\n { title: \"Abc\", content: \"CDE \" }\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"Inputs.button(\"Hello\", { label: \"Totots\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":726,"value":"Inputs.toggle({ value: false, label: \"Toggle label\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"ui.toggle({ value: false, label: \"Toggle label\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":735,"value":"ui.table(data, { multiple: false })","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"ui = newUI({ classes: \"toto\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"## Imports and Initialization","pinned":true,"hidden":false,"mode":"md"},{"id":7,"value":"UIkit = {\n await appendCssLink(\n \"https://cdn.jsdelivr.net/npm/uikit@3.12.2/dist/css/uikit.min.css\"\n );\n const uiKit = await require(\"uikit@3.12.2/dist/js/uikit.min.js\");\n const uiKitIcons = await require(\"uikit@3.12.2/dist/js/uikit-icons.min.js\");\n uiKit.use(uiKitIcons);\n return uiKit;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"function appendCssLink(css) {\n const head = document.getElementsByTagName(\"head\")[0];\n const link = document.createElement(\"link\");\n link.setAttribute(\"rel\", \"stylesheet\");\n link.setAttribute(\"href\", css);\n head.appendChild(link);\n return () => link.parentElement && link.parentElement.removeChild(link);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"{\n invalidation.then(\n appendCss(\n `.foobar { background: #eee; color: black; font-weight: bold; padding: 0.5em; }`\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"function appendCss(css) {\n const style = document.createElement(\"style\");\n style.innerHTML = css;\n document.body.appendChild(style);\n return () => style.parentElement && style.parentElement.removeChild(style);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":45,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":183,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}

Headline

Title

Title 123