Skip to content

Commit

Permalink
Fix. Undefined option style.
Browse files Browse the repository at this point in the history 
Remove. Localization props from config.
  • Loading branch information
@afonja14755
afonja14755 committed Aug 15, 2023
1 parent c67a80f commit fcb38e6
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 566 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# UX Select

UX Select — free and lightweight native(vanilla) JavaScript plugin that replace native select elements with customization.
Free and lightweight native(vanilla) JavaScript plugin that replace native select elements with customization.

## Status

Expand Down Expand Up @@ -64,6 +64,6 @@ It can be used **for free** and **without any attribution**, in any personal or

## Future additions

- Documentation
- Images for options and groups
- Focus events
- Group sorting
2 changes: 1 addition & 1 deletion dist/ux-select.min.iife.js
View file

Large diffs are not rendered by default.

78 changes: 39 additions & 39 deletions dist/ux-select.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function M(c) {
const e = new Event("input");
c.dispatchEvent(e);
}
var i, b, k, x, O, g, A, E, z, m, G, S, D, y, B, _, H, L, P, v, j, w, F, C, I;
var i, b, k, x, O, g, G, E, z, m, A, S, D, y, B, _, F, L, H, v, P, w, j, C, I;
class U {
/**
* @param {HTMLSelectElement} element Select element
Expand Down Expand Up @@ -53,16 +53,16 @@ class U {
f(this, "options");
f(this, "groups");
d(this, i, void 0);
this.el = e, this.config = t || {
isSearchable: !1,
isSearchFocus: !0,
isGroupOptions: !1,
optionStyle: "default"
this.el = e, this.config = {
isSearchable: t.isSearchable || !1,
isSearchFocus: t.isSearchFocus || !1,
isGroupOptions: t.isGroupOptions || !1,
optionStyle: t.optionStyle || "default"
}, this.localization = {
placeholder: this.el.dataset.placeholder || this.config.placeholder || "Select an option",
searchText: this.el.dataset.searchText || this.config.searchText || "Search",
clearText: this.el.dataset.clearText || this.config.clearText || "Clear option(s)",
selectedText: this.el.dataset.selectedText || this.config.selectedText || "Selected:"
placeholder: this.el.dataset.placeholder || t.placeholder || "Select an option",
searchText: this.el.dataset.searchText || t.searchText || "Search",
clearText: this.el.dataset.clearText || t.clearText || "Clear option(s)",
selectedText: this.el.dataset.selectedText || t.selectedText || "Selected:"
}, this.state = {
multiple: this.el.multiple,
disabled: this.el.disabled
Expand All @@ -79,7 +79,7 @@ class U {
* @param {Boolean} [isTriggerChange] Skip triggering "change" event
*/
update(e = !0) {
n(this, x, O).call(this), n(this, m, G).call(this), this.el.disabled ? this.disable() : this.enable(), e && $(this.el);
n(this, x, O).call(this), n(this, m, A).call(this), this.el.disabled ? this.disable() : this.enable(), e && $(this.el);
}
clear() {
this.options.forEach((e) => {
Expand All @@ -88,7 +88,7 @@ class U {
const t = l(this, i).querySelector(`[data-value="${e.data.value}"]`);
t && t.classList.remove("-selected"), e.element.removeAttribute("selected");
}
}), n(this, g, A).call(this), $(this.el);
}), n(this, g, G).call(this), $(this.el);
}
destroy() {
l(this, i) && (l(this, i).remove(), this.el.style.display = "");
Expand Down Expand Up @@ -116,7 +116,7 @@ i = new WeakMap(), b = new WeakSet(), k = function() {
element: t
});
}
}, g = new WeakSet(), A = function(e = []) {
}, g = new WeakSet(), G = function(e = []) {
if (l(this, i)) {
const t = l(this, i).querySelector(".ux-select__title");
if (!t)
Expand All @@ -128,35 +128,35 @@ i = new WeakMap(), b = new WeakSet(), k = function() {
const t = [];
this.options.forEach((s) => {
const a = document.createElement("li");
if (a.classList.add("ux-select-group__elem"), a.dataset.value = s.data.value, a.textContent = s.data.text, s.attributes.selected && (a.classList.add("-selected"), t.push(s.data.text !== null ? s.data.text : "")), s.attributes.disabled && a.classList.add("-disabled"), a.addEventListener("click", n(this, v, j).bind(this)), l(this, i)) {
const o = l(this, i).querySelector(
if (a.classList.add("ux-select-group__elem"), a.dataset.value = s.data.value, a.textContent = s.data.text, s.attributes.selected && (a.classList.add("-selected"), t.push(s.data.text !== null ? s.data.text : "")), s.attributes.disabled && a.classList.add("-disabled"), a.addEventListener("click", n(this, v, P).bind(this)), l(this, i)) {
const r = l(this, i).querySelector(
`[data-ux-group="${s.attributes.group}"] .ux-select-group__list`
);
o && o.appendChild(a);
r && r.appendChild(a);
}
}), n(this, g, A).call(this, t), this.config.isGroupOptions ? e(!0) : e(!1);
}), n(this, g, G).call(this, t), this.config.isGroupOptions ? e(!0) : e(!1);
}).then((e) => {
if (e && l(this, i)) {
const t = l(this, i).querySelectorAll(".ux-select-group");
t.length > 0 && t.forEach((s) => {
const a = s.querySelector(".ux-select-group__list");
if (a) {
const o = a.querySelectorAll(".ux-select-group__elem"), r = a.querySelectorAll(".ux-select-group__elem.-disabled");
o.length === r.length ? s.classList.add("-disabled") : s.classList.remove("-disabled");
const r = a.querySelectorAll(".ux-select-group__elem"), o = a.querySelectorAll(".ux-select-group__elem.-disabled");
r.length === o.length ? s.classList.add("-disabled") : s.classList.remove("-disabled");
}
});
}
});
}, m = new WeakSet(), G = function() {
}, m = new WeakSet(), A = function() {
if (l(this, i)) {
const e = l(this, i).querySelector(".ux-select__dropdown");
if (!e)
throw Error("uxSelectList is null");
e.innerHTML = "", this.groups.forEach((t) => {
const s = document.createElement("div");
if (s.classList.add("ux-select__group", "ux-select-group"), t === "empty" && s.classList.add("-empty"), s.dataset.uxGroup = t, t !== "empty") {
const o = document.createElement("div");
o.classList.add("ux-select-group__title"), o.textContent = t, s.appendChild(o);
const r = document.createElement("div");
r.classList.add("ux-select-group__title"), r.textContent = t, s.appendChild(r);
}
const a = document.createElement("ul");
a.classList.add("ux-select-group__list"), s.appendChild(a), e.appendChild(s);
Expand All @@ -177,10 +177,10 @@ i = new WeakMap(), b = new WeakSet(), k = function() {
const p = document.createElement("input");
p.type = "search", p.classList.add("ux-select-search__input"), p.placeholder = this.localization.searchText, u.appendChild(p), a.appendChild(u);
}
const o = document.createElement("div");
o.classList.add("ux-select__dropdown"), a.appendChild(o);
const r = document.createElement("div"), h = ["ux-select", this.el.classList];
this.state.multiple && h.push("-multiple"), this.state.disabled && h.push("-disabled"), this.config.optionStyle !== "default" && h.push(`-${this.config.optionStyle}`), r.className = h.join(" "), r.append(e, a), this.el.insertAdjacentElement("afterend", r), this.el.nextElementSibling && T(this, i, this.el.nextElementSibling), n(this, m, G).call(this);
const r = document.createElement("div");
r.classList.add("ux-select__dropdown"), a.appendChild(r);
const o = document.createElement("div"), h = ["ux-select", this.el.classList];
this.state.multiple && h.push("-multiple"), this.state.disabled && h.push("-disabled"), this.config.optionStyle !== "default" && h.push(`-${this.config.optionStyle}`), o.className = h.join(" "), o.append(e, a), this.el.insertAdjacentElement("afterend", o), this.el.nextElementSibling && T(this, i, this.el.nextElementSibling), n(this, m, A).call(this);
}, y = new WeakSet(), B = function(e) {
e.preventDefault();
const t = e.target;
Expand All @@ -201,14 +201,14 @@ i = new WeakMap(), b = new WeakSet(), k = function() {
a.value = "", a.dispatchEvent(new Event("input")), this.config.isSearchFocus && a.focus();
}
}
}, _ = new WeakSet(), H = function(e) {
}, _ = new WeakSet(), F = function(e) {
const t = e.target;
if (!l(this, i))
throw Error("uxEl is null");
l(this, i).contains(t) || l(this, i).classList.remove("-shown");
}, L = new WeakSet(), P = function(e) {
}, L = new WeakSet(), H = function(e) {
return e.preventDefault(), this.state.disabled ? !1 : this.clear();
}, v = new WeakSet(), j = function(e) {
}, v = new WeakSet(), P = function(e) {
if (e.preventDefault(), e.target !== null) {
const t = e.target;
if (t.classList.contains("-disabled"))
Expand All @@ -227,24 +227,24 @@ i = new WeakMap(), b = new WeakSet(), k = function() {
return !1;
return this.update();
}
}, w = new WeakSet(), F = function(e) {
}, w = new WeakSet(), j = function(e) {
if (e.target !== null && l(this, i)) {
const t = e.target, s = t.value.toLowerCase(), a = l(this, i).querySelectorAll(".ux-select-group");
if (s === "")
l(this, i).querySelectorAll(".ux-select-group__elem").forEach((r) => r.style.display = ""), this.config.isGroupOptions && a.forEach((r) => r.style.display = "");
l(this, i).querySelectorAll(".ux-select-group__elem").forEach((o) => o.style.display = ""), this.config.isGroupOptions && a.forEach((o) => o.style.display = "");
else {
const o = new RegExp(s);
new Promise((r) => {
const r = new RegExp(s);
new Promise((o) => {
this.options.forEach((h) => {
if (!l(this, i))
throw Error("uxEl is null");
const u = o.test(h.data.text.toLowerCase()), p = l(this, i).querySelector(`[data-value="${h.data.value}"]`);
const u = r.test(h.data.text.toLowerCase()), p = l(this, i).querySelector(`[data-value="${h.data.value}"]`);
if (!p)
throw Error("uxOption is null");
p.style.display = u ? "" : "none";
}), this.config.isGroupOptions ? r(!0) : r(!1);
}).then((r) => {
r && a.forEach((h) => {
}), this.config.isGroupOptions ? o(!0) : o(!1);
}).then((o) => {
o && a.forEach((h) => {
const u = h.querySelector(".ux-select-group__list");
h.style.display = "", u && (h.style.display = u.clientHeight !== 0 ? "" : "none");
});
Expand All @@ -256,9 +256,9 @@ i = new WeakMap(), b = new WeakSet(), k = function() {
if (l(this, i)) {
l(this, i).addEventListener("click", n(this, y, B).bind(this));
const e = l(this, i).querySelector(".ux-select__clear");
if (e && e.addEventListener("click", n(this, L, P).bind(this)), window.addEventListener("click", n(this, _, H).bind(this)), this.config.isSearchable) {
if (e && e.addEventListener("click", n(this, L, H).bind(this)), window.addEventListener("click", n(this, _, F).bind(this)), this.config.isSearchable) {
const t = l(this, i).querySelector(".ux-select-search__input");
t && t.addEventListener("input", n(this, w, F).bind(this));
t && t.addEventListener("input", n(this, w, j).bind(this));
}
}
};
Expand Down
2 changes: 1 addition & 1 deletion dist/ux-select.min.umd.cjs
View file

Large diffs are not rendered by default.

Loading

0 comments on commit fcb38e6

Please sign in to comment.