async function newUI(options = {}) {
let { classes = "" } = options;
classes = classes.split(/\s+/).filter((_) => !!_);
await UIkit;
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`<style>
#${id} tr>:first-of-type {
padding-left: 1em;
}
</style>
`;
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
};
}