@popovandrii/ui-elements
Version:
User interface elements. Color scheme. Elements with complex logic Java Script. Contrasting UI elements.
305 lines (304 loc) • 12.9 kB
JavaScript
var z = Object.defineProperty;
var U = (u) => {
throw TypeError(u);
};
var P = (u, e, s) => e in u ? z(u, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : u[e] = s;
var A = (u, e, s) => P(u, typeof e != "symbol" ? e + "" : e, s), D = (u, e, s) => e.has(u) || U("Cannot " + s);
var x = (u, e, s) => (D(u, e, "read from private field"), s ? s.call(u) : e.get(u)), y = (u, e, s) => e.has(u) ? U("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(u) : e.set(u, s);
var L = (u, e, s) => (D(u, e, "access private method"), s);
var p, E, S, F;
class G {
constructor(e = {}) {
y(this, S);
A(this, "selectors");
A(this, "spinBoxes");
y(this, p, (e, s, i, a = 0, t = 0) => {
e == a || e < a ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1), t !== 0 && (e == t || e > t ? (i.classList.add(this.selectors.disabledBtn), i.disabled = !0) : (i.classList.remove(this.selectors.disabledBtn), i.disabled = !1));
});
y(this, E, (e, s) => {
const i = e.getAttribute(`data-${s}`);
return i === null || i.trim() === "" || isNaN(Number(i)) ? 0 : Number(i);
});
const s = {
main: "UIsp",
btn: "UIsp__btn",
input: "UIsp__input",
disabledBtn: "disabled"
};
this.selectors = { ...s, ...e }, this.spinBoxes = document.querySelectorAll(
`.${this.selectors.main}`
), L(this, S, F).call(this);
}
}
p = new WeakMap(), E = new WeakMap(), S = new WeakSet(), F = function() {
this.spinBoxes.forEach((e) => {
const s = e.querySelectorAll(
`.${this.selectors.btn}`
), i = s[0], a = s[1], t = e.querySelector(
`.${this.selectors.input}`
), d = Number(e.dataset.step), n = Number(e.dataset.min), r = x(this, E).call(this, e, "max"), v = (l) => {
e.setAttribute("aria-valuenow", String(l)), e.setAttribute("aria-valuetext", `${l} items`);
};
Number(t.value) <= n && (t.value = n.toFixed(d)), r !== 0 ? (Number(t.value) >= r && (t.value = r.toFixed(d)), r && e.setAttribute("aria-valuemax", r.toFixed(d))) : t.value = Number(t.value).toFixed(d), n && e.setAttribute("aria-valuemin", n.toFixed(d)), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
let c = null;
const f = (l = 1) => {
t.value = String(Math.abs(Number(t.value)));
let o = parseFloat(t.value) || 0;
o = o + 1 * l / Math.pow(10, d), o > r && r !== 0 && (o = r), t.value = o.toFixed(d), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
}, m = (l = 1) => {
t.value = String(Math.abs(Number(t.value)));
let o = parseFloat(t.value) || 0;
o = o - 1 * l / Math.pow(10, d), o < n && (o = n), t.value = o.toFixed(d), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
}, h = (l, o = 150) => {
c === null && (c = window.setInterval(l, o));
}, b = () => {
c !== null && (clearInterval(c), c = null);
};
a.addEventListener("mousedown", (l) => {
const o = l.shiftKey ? 3 : 1;
h(() => f(o));
}), a.addEventListener("touchstart", () => h(f)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
(l) => {
a.addEventListener(l, b);
}
), a.addEventListener("click", (l) => {
const o = l.shiftKey ? 3 : 1;
c === null && f(o);
}), i.addEventListener("click", (l) => {
const o = l.shiftKey ? 3 : 1;
c === null && m(o);
}), i.addEventListener("mousedown", (l) => {
const o = l.shiftKey ? 3 : 1;
h(() => m(o), 100);
}), i.addEventListener("touchstart", () => h(m, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
(l) => {
i.addEventListener(l, b);
}
), t.addEventListener("keydown", (l) => {
const o = l.key, K = l.shiftKey ? 3 : 1;
if ([
"Backspace",
"Delete",
"ArrowLeft",
"ArrowRight",
"Tab",
"Enter",
"Home",
"End"
].includes(o) || (l.ctrlKey || l.metaKey) && ["a", "c", "v", "x"].includes(o.toLowerCase()))
return;
if (["e", "+", "-"].includes(o)) {
l.preventDefault();
return;
}
if (o === "ArrowUp" || o === "ArrowDown") {
l.preventDefault();
const q = parseFloat(t.value) || 0, N = 1 * K / Math.pow(10, d);
let g = o === "ArrowUp" ? q + N : q - N;
g < n && (g = n), t.value = g.toFixed(d), Number(t.value) < n && (t.value = n.toFixed(d)), Number(t.value) > r && r !== 0 && (t.value = r.toFixed(d)), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
return;
}
const I = o === "," ? "." : o, $ = /^[0-9]$/.test(I), C = I === ".", _ = t.value.includes(".");
(d === 0 && !$ || d > 0 && !($ || C) || C && _) && l.preventDefault();
}), t.addEventListener("change", () => {
Number(t.value) < n && (t.value = n.toFixed(d)), Number(t.value) > r && r !== 0 ? t.value = r.toFixed(d) : t.value = Number(t.value).toFixed(d), x(this, p).call(this, Number(t.value), i, a, n, r);
});
});
};
var k, B;
class T {
constructor(e = {}) {
y(this, k);
A(this, "selectors");
A(this, "main");
const s = {
main: "UIsw",
label: "UIsw-label"
};
this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
`.${this.selectors.main}`
), L(this, k, B).call(this);
}
}
k = new WeakSet(), B = function() {
this.main.forEach((e) => {
const s = e.querySelector(`.${this.selectors.label}`), i = e.querySelector("input");
s && s.id && e.setAttribute("aria-labelledby", s.id), i && (i.checked ? e.setAttribute("aria-checked", "true") : e.setAttribute("aria-checked", "false"), e.addEventListener("click", () => {
i.checked = !i.checked, e.setAttribute("aria-checked", String(i.checked));
}), e.addEventListener("keydown", (t) => {
t.key === "ArrowRight" ? (i.checked = !0, a(String(i.checked)), t.preventDefault()) : t.key === "ArrowLeft" && (i.checked = !1, a(String(i.checked)), t.preventDefault());
}));
const a = (t) => {
e.setAttribute("aria-checked", String(t));
};
});
};
class w {
constructor(e = {}) {
A(this, "selectors");
A(this, "main");
A(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
const s = {
idPrefix: "UI-option-",
main: "UIselect",
selected: "UIselect-selected",
arrow: "UIselect-arrow",
optionsList: "UIselect-options",
search: "UIselect-options__search",
items: "UIselect-options__items",
excludedItems: ["divider", "test"]
// class=""
};
this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
`.${this.selectors.main}`
), this.event(), w.initGlobalListener(this.selectors);
}
filterExcluded(e, s) {
return Array.from(e).filter((i) => !s.some((a) => typeof a == "string" ? i.classList.contains(a) || i.id === a : i === a));
}
filterSearch(e, s) {
const i = s.trim().toLowerCase();
return e.filter((a) => {
var n, r;
const t = ((n = a.dataset.value) == null ? void 0 : n.toLowerCase()) || "", d = ((r = a.textContent) == null ? void 0 : r.toLowerCase()) || "";
return t.includes(i) || d.includes(i);
});
}
event() {
this.main.forEach((e) => {
const s = e.querySelector(
`.${this.selectors.main} input[type='hidden']`
);
try {
if (!s)
throw new Error('<input type="hidden" name="YouUniqueId">');
} catch (f) {
return console.warn("Not found:", f.message);
}
const i = e.querySelector(
`.${this.selectors.selected}`
), a = e.querySelector(
`.${this.selectors.arrow}`
), t = e.querySelector(
`.${this.selectors.optionsList}`
), d = e.querySelector(
`.${this.selectors.search} input`
);
a && a.addEventListener("click", () => {
this.toggle(e, t);
}), i.addEventListener("click", () => {
this.toggle(e, t);
}), e.addEventListener("click", () => {
this.itemsPosition(t);
});
const n = t.querySelectorAll(
`.${this.selectors.items} ul li`
), r = this.filterExcluded(
n,
this.selectors.excludedItems
), v = e.querySelector(
"[aria-selected='true']"
);
v && this.defaultSelect(e, v, i, s);
var c = [];
d && d.addEventListener("input", (f) => {
const h = f.target.value.trim();
i && (c = this.filterSearch(r, h), h ? (n.forEach((b) => b.remove()), c.forEach((b) => {
var l;
(l = t.querySelector(`.${this.selectors.optionsList} ul`)) == null || l.appendChild(b);
})) : n.forEach((b) => {
var l;
(l = t.querySelector(`.${this.selectors.optionsList} ul`)) == null || l.appendChild(b);
}), this.itemArrow(e, t, i, s));
}), this.itemArrow(e, t, i, s), this.items(e, t, r, i, s);
});
}
itemArrow(e, s, i, a) {
if (this.itemArrowInitialized.has(e)) return;
this.itemArrowInitialized.add(e);
let t = -1;
const d = i.textContent ? i.textContent : "", n = e.querySelector(
`.${this.selectors.search} input`
);
e.addEventListener("keydown", (r) => {
n && n.focus();
const v = Array.from(
s.querySelectorAll(`.${this.selectors.optionsList} ul li`)
), c = this.filterExcluded(
v,
this.selectors.excludedItems
), f = c.length;
if (f !== 0)
if (r.key === "ArrowDown") {
r.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, s), t = (t + 1) % f, i.textContent = c[t].textContent, c.forEach((h) => h.removeAttribute("aria-selected")), c[t].setAttribute("aria-selected", "true");
const m = c[t].id || `${this.selectors.idPrefix}${t}`;
e.setAttribute("aria-activedescendant", m), c[t].scrollIntoView({ block: "nearest" });
} else if (r.key === "ArrowUp") {
r.preventDefault(), t = (t - 1 + f) % f, i.textContent = c[t].textContent, c.forEach((h) => h.removeAttribute("aria-selected")), c[t].setAttribute("aria-selected", "true");
const m = c[t].id || `${this.selectors.idPrefix}${t}`;
e.setAttribute("aria-activedescendant", m), c[t].scrollIntoView({ block: "nearest" });
} else if (r.key === "Enter")
if (r.preventDefault(), t >= 0) {
i.textContent = c[t].textContent, c.forEach((h) => h.removeAttribute("aria-selected")), c[t].setAttribute("aria-selected", "true");
const m = c[t].id || `${this.selectors.idPrefix}${t}`;
e.setAttribute("aria-activedescendant", m), a.value = String(c[t].dataset.value), this.costomEvent(e, a.value), this.close(e, s);
} else
this.toggle(e, s);
else r.key === "Escape" && (e.getAttribute("aria-activedescendant") || (i.textContent = d), this.close(e, s));
});
}
itemsPosition(e) {
const s = e.querySelector(
'[aria-selected="true"]'
);
s && s.scrollIntoView({ block: "nearest" });
}
items(e, s, i, a, t) {
i.forEach((d, n) => {
d.addEventListener("click", () => {
const r = i[n];
if (r) {
a.textContent = r.textContent, i.forEach((c) => c.removeAttribute("aria-selected")), r.setAttribute("aria-selected", "true");
const v = r.id || `${this.selectors.idPrefix}${n}`;
e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", v), t.value = String(i[n].dataset.value), this.costomEvent(e, t.value), this.close(e, s);
}
});
});
}
defaultSelect(e, s, i, a) {
s && (a.setAttribute("value", s.dataset.value ?? ""), i.textContent = s.textContent ?? "", e.setAttribute("aria-activedescendant", s.id || ""));
}
costomEvent(e, s) {
e.dispatchEvent(
new CustomEvent("change", {
detail: { val: s },
bubbles: !0
})
);
}
toggle(e, s) {
w.closeAll(this.selectors), s.hidden ? (s.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, s);
}
close(e, s) {
s.hidden = !0, e.setAttribute("aria-expanded", "false");
}
static closeAll(e) {
document.querySelectorAll(`.${e.main}`).forEach((s) => {
const i = s.querySelector(`.${e.optionsList}`);
i.hidden = !0, s.setAttribute("aria-expanded", "false");
});
}
static initGlobalListener(e) {
window.__UIselectGlobalClickInitialized || (document.addEventListener("click", (s) => {
const i = s.target;
[...document.querySelectorAll(`.${e.main}`)].some(
(t) => t.contains(i)
) || w.closeAll(e);
}), window.__UIselectGlobalClickInitialized = !0);
}
}
export {
w as Select,
G as SpinBox,
T as Switch
};