vue-autocomplete-plugin
Version:
A simple, powerful, lightweight and customizable autocomplete tool programmed for Vue projects!
865 lines (864 loc) • 40.6 kB
JavaScript
import { defineComponent as Z, createElementBlock as P, openBlock as A, normalizeStyle as O, normalizeClass as M, createElementVNode as X, toDisplayString as x, ref as R, Fragment as ee, createCommentVNode as T, onBeforeUpdate as Ue, renderList as We, computed as qe, shallowRef as ze, watch as Ye, onUnmounted as Ge, onMounted as Je, createVNode as ie, onBeforeMount as Ke, createBlock as Qe } from "vue";
import './index.css';const Xe = ["aria-label"], Ze = /* @__PURE__ */ Z({
__name: "InputLabel",
props: {
inputLabel: { default: "Enter or Search value" },
inputLabelContainerClass: {},
inputLabelContainerStyle: {},
inputLabelClass: {},
inputLabelStyle: {},
ariaInputLabel: {}
},
setup(I) {
const e = I;
return (d, r) => (A(), P("div", {
class: M([
"label-container",
e.inputLabelContainerClass ? e.inputLabelContainerClass : ""
]),
style: O(
e.inputLabelContainerStyle ? e.inputLabelContainerStyle : {}
)
}, [
X("label", {
class: M(["label-value", e.inputLabelClass ? e.inputLabelClass : ""]),
style: O(e.inputLabelStyle ? e.inputLabelStyle : {}),
for: "searchInput",
"aria-label": e != null && e.ariaInputLabel ? e.ariaInputLabel : "Autocomplete search"
}, x(e.inputLabel), 15, Xe)
], 6));
}
}), _e = ["placeholder", "disabled", "aria-label", "role", "aria-roledescription"], xe = /* @__PURE__ */ Z({
__name: "InputField",
props: {
placeHolder: { default: "Select Value." },
isAutoCompleteDisabled: { type: Boolean },
showdropDownArrow: { type: Boolean },
showClearOption: { type: Boolean },
onFocus: {},
onBlur: {},
onInput: {},
clearSearch: {},
handleDropdownClick: {},
inputFieldClass: {},
inputFieldStyle: {},
ariaInputField: {},
ariaRole: {},
ariaRoleDescription: {}
},
setup(I, { expose: e }) {
const d = R(""), r = I;
function L(h) {
var y;
(y = r.onFocus) == null || y.call(r, h);
}
function a(h) {
var y;
(y = r.onBlur) == null || y.call(r, h);
}
function V(h) {
var y;
(y = r.onInput) == null || y.call(r, h);
}
return e({
searchValue: d
}), (h, y) => (A(), P(ee, null, [
X("input", {
tabindex: "0",
ref_key: "searchValue",
ref: d,
id: "searchInput",
name: "searchValue",
type: "text",
class: M(["auto-complete-textfield", r.inputFieldClass ? r.inputFieldClass : ""]),
autocomplete: "off",
placeholder: r.placeHolder,
disabled: r.isAutoCompleteDisabled,
style: O(r.inputFieldStyle ? r.inputFieldStyle : {}),
"aria-label": r != null && r.ariaInputField ? r.ariaInputField : "Enter text to search autocomplete.",
role: r != null && r.ariaRole ? r.ariaRole : "autocomplete",
"aria-roledescription": r != null && r.ariaRoleDescription ? r.ariaRoleDescription : "Autocomplete search",
onFocus: L,
onBlur: a,
onInput: V
}, null, 46, _e),
h.showdropDownArrow ? (A(), P("span", {
key: 0,
tabindex: "0",
class: "arrow down",
onClick: y[0] || (y[0] = (p) => h.handleDropdownClick(p))
})) : T("", !0),
h.showClearOption ? (A(), P("span", {
key: 1,
onClick: y[1] || (y[1] = (p) => h.clearSearch(p)),
class: "auto-complete-remove-selection"
}, "×")) : T("", !0)
], 64));
}
}), et = ["id", "aria-label", "onClick", "aria-disabled"], tt = {
key: 0,
class: "auto-complete-list-spinner"
}, lt = ["aria-label"], at = ["aria-label"], ot = /* @__PURE__ */ Z({
__name: "DropdownList",
props: {
objectProperty: {},
filteredData: { default: [] },
onSelect: { type: Function, default: () => {
} },
disableListFn: { type: Function, default: () => {
} },
disableProperty: {},
customClass: {},
customStyle: {},
isOnFocus: { type: Boolean },
showLoadingSpinner: { type: Boolean },
noSearchResultMessage: { default: "No results found." },
aria: {},
isCustomSpinner: { type: Boolean, default: !1 },
onViewMore: {},
viewMoreText: {},
optViewMoreOnlyForApiCall: { type: Boolean },
isEventEmitted: { type: Boolean },
showSpinner: { type: Boolean },
isApiLoad: { type: Boolean },
displayViewMoreButton: { type: Boolean },
viewMoreRef: {}
},
setup(I, { expose: e }) {
const d = R([]), r = R(), L = (a, V) => {
d.value[V] = a;
};
return Ue(() => {
d.value = [];
}), e({
listElementsRef: d
}), (a, V) => {
var h, y, p;
return a.isOnFocus ? (A(), P(ee, { key: 0 }, [
(A(!0), P(ee, null, We(a.filteredData, (w, g) => {
var H;
return A(), P("li", {
key: g,
id: "autocomplete-li-element-" + g,
tabindex: "0",
class: M(["autocomplete-data-list", [
a.customClass && a.customClass.dropdownListClass ? a.customClass.dropdownListClass : "",
(!a.customClass || !a.customClass.disableListClass) && (a.disableListFn && a.disableListFn(g, w) || a.disableProperty && w[a.disableProperty]) ? "disable-list-element" : "",
a.customClass && a.customClass.disableListClass && (a.disableListFn && a.disableListFn(g, w) || a.disableProperty && w[a.disableProperty]) ? a.customClass.disableListClass : ""
]]),
"aria-label": a.objectProperty ? w[a.objectProperty] + "" : w + "",
onClick: (c) => a.onSelect(g, w, !0),
ref_for: !0,
ref: (c) => L(c, g),
"aria-disabled": a.disableListFn ? a.disableListFn(g, w) : a.disableProperty ? w[a.disableProperty] : !1,
style: O(
(H = a.customStyle) != null && H.dropdownListStyle ? a.customStyle.dropdownListStyle : {}
)
}, x(a.objectProperty ? w[a.objectProperty] : w), 15, et);
}), 128)),
a.showLoadingSpinner && a.showSpinner && !a.isCustomSpinner ? (A(), P("li", tt, V[1] || (V[1] = [
X("span", { class: "autocomplete-plugin-loader" }, null, -1)
]))) : T("", !0),
a.showLoadingSpinner && a.showSpinner && a.isCustomSpinner ? (A(), P("li", {
key: 1,
class: M(["auto-complete-list-spinner", a.customClass && a.customClass.customSpinnerClass]),
style: O((h = a.customStyle) != null && h.customSpinnerStyle ? a.customStyle.customSpinnerStyle : {})
}, null, 6)) : T("", !0),
a.filteredData.length <= 0 && a.isOnFocus ? (A(), P("li", {
key: 2,
class: M([
"autocomplete-data-list noSearchResult",
a.customClass && a.customClass.noResultClass ? a.customClass.noResultClass : ""
]),
"aria-label": (y = a.aria) != null && y.ariaNoSearchResult ? a.aria.ariaNoSearchResult : "No results found.",
style: O(
a.customStyle && a.customStyle.noResultStyle ? a.customStyle.noResultStyle : {}
)
}, x(a.noSearchResultMessage), 15, lt)) : T("", !0),
a.optViewMoreOnlyForApiCall && !a.isEventEmitted && !a.showSpinner && a.isApiLoad && a.displayViewMoreButton ? (A(), P("li", {
key: 3,
class: M([
"autocomplete-data-list view-more",
a.customClass && a.customClass.viewMoreClass ? a.customClass.viewMoreClass : ""
]),
style: O(
a.customStyle && a.customStyle.viewMoreStyle ? a.customStyle.viewMoreStyle : {}
),
"aria-label": (p = a.aria) != null && p.ariaViewMore ? a.aria.ariaViewMore : "View more results",
tabIndex: "0",
onClick: V[0] || (V[0] = (w) => a.onViewMore(w, !0)),
ref_key: "viewMoreRef",
ref: r
}, x(a.viewMoreText), 15, at)) : T("", !0)
], 64)) : T("", !0);
};
}
}), it = ["aria-label"], rt = { id: "list-container" }, st = ["aria-label"], nt = /* @__PURE__ */ Z({
__name: "Core",
props: {
dropdownData: {},
placeHolder: {},
objectProperty: {},
defaultValue: {},
initialVisibleData: {},
scrollThreshold: {},
totalRecords: {},
disableProperty: {},
noSearchResultMessage: {},
isAutoCompleteDisabled: { type: Boolean },
isCustomSpinner: { type: Boolean },
showLoadingSpinner: { type: Boolean },
showdropDownArrow: { type: Boolean },
showClearOption: { type: Boolean },
customClass: {},
customStyle: {},
searchFn: { type: Function },
disableListFn: { type: Function },
isScrollThresholdRequired: { type: Boolean },
inspectAutoCompleteList: { type: Boolean },
viewMoreText: {},
optViewMoreOnlyForApiCall: { type: Boolean },
aria: {},
triggerOnFocusEvent: { type: Function },
triggerBlurEvent: { type: Function },
triggerApiLoadEvent: { type: Function },
broadcastSelectedValue: { type: Function },
triggerClearSelectionEvent: { type: Function },
isApiLoad: { type: Boolean },
loadAllDataAtOnce: { type: Boolean },
additionalData: {}
},
setup(I) {
const e = I, d = qe(() => e.dropdownData || []), r = ze([]), L = R([]), a = R(0), V = R(!1), h = R(!1), y = R(!1), p = R(-1), w = R(!1), g = R(!1), H = R(!1), c = R(""), te = R(), k = R(), D = R(), N = R();
Ye(
() => d.value,
(t, l) => {
var s, n, f;
re(), H.value = !1;
const o = (s = te.value) == null ? void 0 : s.style, i = (f = (n = c.value) == null ? void 0 : n.searchValue) == null ? void 0 : f.clientWidth;
(o == null ? void 0 : o.width) !== i + "px" && _();
},
{ deep: !0 }
);
const j = () => {
var t, l, o, i;
if (typeof e.totalRecords < "u" && d.value.length >= e.totalRecords) {
h.value = !1;
return;
}
if (d.value.length <= 0) {
h.value = !1;
return;
}
if ((l = (t = c.value) == null ? void 0 : t.searchValue) != null && l.value && ((i = (o = c.value) == null ? void 0 : o.searchValue) == null ? void 0 : i.value) !== "" && e.triggerApiLoadEvent && !V.value) {
h.value = !0;
return;
}
if (a.value >= d.value.length) {
h.value = !0;
return;
}
h.value = !1;
};
function re() {
try {
if (!g.value)
return;
setTimeout(() => {
ke();
}, 100);
} catch (t) {
console.log(t);
}
}
function se(t) {
var i, s, n, f, S, C, b, u, v, m, F, E, B, $, ye, be, we, ge, Se, Ce, Le, Ve, De, Fe;
if (r.value.length <= 0 && (t == null ? void 0 : t.keyCode) !== 27)
return;
let l, o;
switch (t == null ? void 0 : t.keyCode) {
case 27:
g.value && (g.value = !1, (s = (i = c.value) == null ? void 0 : i.searchValue) == null || s.blur(), le());
return;
case 13:
if (w.value) {
ce(null, !0), w.value = !1;
return;
}
if ((S = (f = (n = D.value) == null ? void 0 : n.listElementsRef) == null ? void 0 : f[p.value]) != null && S.classList.contains("disable-list-element"))
return;
const oe = r.value[p.value];
oe != null && (fe(p.value, oe, !0), (u = (b = (C = D.value) == null ? void 0 : C.listElementsRef) == null ? void 0 : b[p.value]) == null || u.classList.remove("autocomplete-keydown-background")), (m = (v = c.value) == null ? void 0 : v.searchValue) == null || m.blur();
return;
case 40:
if (p.value + 1 === ((E = (F = D.value) == null ? void 0 : F.listElementsRef) == null ? void 0 : E.length)) {
N.value && ((B = N.value) == null || B.scrollIntoView({
behavior: "smooth",
block: "nearest"
}), ($ = N.value) == null || $.classList.add("autocomplete-keydown-viewmore"), (we = (be = (ye = D.value) == null ? void 0 : ye.listElementsRef) == null ? void 0 : be[p.value]) == null || we.classList.remove("autocomplete-keydown-background"), w.value = !0);
return;
}
if (p.value = p.value + 1, l = (Ce = (Se = (ge = D.value) == null ? void 0 : ge.listElementsRef) == null ? void 0 : Se[p.value]) == null ? void 0 : Ce.id, l == null || !l.includes("autocomplete-li-element-") || (o = Number(l.substring(l.lastIndexOf("-") + 1)), typeof o != "number"))
return;
setTimeout(() => {
var U, W, q, z, Y, G, J, K, Q, Ee, Re, Ae, Pe;
(q = (W = (U = D.value) == null ? void 0 : U.listElementsRef) == null ? void 0 : W[p.value]) == null || q.scrollIntoView({ behavior: "smooth", block: "nearest" }), (G = (Y = (z = D.value) == null ? void 0 : z.listElementsRef) == null ? void 0 : Y[p.value]) == null || G.classList.add("autocomplete-keydown-background"), p.value > 0 && ((Q = (K = (J = D.value) == null ? void 0 : J.listElementsRef) == null ? void 0 : K[p.value - 1]) == null || Q.classList.remove("autocomplete-keydown-background"), p.value + 1 === ((Re = (Ee = D.value) == null ? void 0 : Ee.listElementsRef) == null ? void 0 : Re.length) && h && ((Pe = k.value) == null || Pe.scrollTo(
0,
((Ae = k.value) == null ? void 0 : Ae.scrollHeight) + 10
)));
}, 20);
return;
case 38:
if (p.value <= 0 || (w.value ? ((Le = N.value) == null || Le.classList.remove(
"autocomplete-keydown-viewmore"
), w.value = !1) : p.value = p.value - 1, l = (Fe = (De = (Ve = D.value) == null ? void 0 : Ve.listElementsRef) == null ? void 0 : De[p.value]) == null ? void 0 : Fe.id, l == null) || !l.includes("autocomplete-li-element-") || (o = Number(l.substring(l.lastIndexOf("-") + 1)), typeof o != "number"))
return;
setTimeout(() => {
var U, W, q, z, Y, G, J, K, Q;
(q = (W = (U = D.value) == null ? void 0 : U.listElementsRef) == null ? void 0 : W[p.value]) == null || q.scrollIntoView({ behavior: "smooth", block: "nearest" }), (G = (Y = (z = D.value) == null ? void 0 : z.listElementsRef) == null ? void 0 : Y[p.value]) == null || G.classList.add("autocomplete-keydown-background"), (Q = (K = (J = D.value) == null ? void 0 : J.listElementsRef) == null ? void 0 : K[p.value + 1]) == null || Q.classList.remove("autocomplete-keydown-background");
}, 20);
return;
default:
return;
}
}
function ne() {
_();
}
function ke() {
var l, o, i, s, n, f, S, C;
const t = L.value.length > 0 ? [...L.value] : [...d.value];
if (d.value.length === a.value || L.value.length === a.value) {
if (!V.value && e.isApiLoad && e.triggerApiLoadEvent && typeof e.triggerApiLoadEvent == "function") {
if (e.optViewMoreOnlyForApiCall) {
h.value = !0, setTimeout(() => {
var b;
(b = k.value) == null || b.scrollTo(
0,
k.value.scrollHeight + 10
);
}, 75);
return;
}
e.triggerApiLoadEvent({
dataIndex: d.value.length
}), V.value = !0, e.showLoadingSpinner && (H.value = !0, setTimeout(() => {
var b;
(b = k.value) == null || b.scrollTo(
0,
k.value.scrollHeight + 10
);
}, 75));
}
return;
}
if (t.length > r.value.length) {
if (e.loadAllDataAtOnce) {
r.value = [...t];
return;
}
const b = Math.ceil(
r.value.length / e.scrollThreshold
);
let u;
if (e.isScrollThresholdRequired && b >= e.initialVisibleData) {
const v = [...r.value];
v.splice(0, e.initialVisibleData), u = t.slice(
a.value,
a.value + e.initialVisibleData
), u.length > 0 && (a.value = a.value + u.length, y.value && ((o = (l = c.value) == null ? void 0 : l.searchValue) != null && o.value) && ((s = (i = c.value) == null ? void 0 : i.searchValue) == null ? void 0 : s.value) !== "" && (e.objectProperty ? u = u.filter((m) => {
var F, E, B;
return (B = m[e.objectProperty]) == null ? void 0 : B.toString().toLowerCase().includes((E = (F = e.defaultValue) == null ? void 0 : F.toString()) == null ? void 0 : E.toLowerCase().trim());
}) : u = u.filter(
(m) => {
var F, E;
return m == null ? void 0 : m.toString().toLowerCase().includes((E = (F = e.defaultValue) == null ? void 0 : F.toString()) == null ? void 0 : E.toLowerCase().trim());
}
)), r.value = [...v, ...u]);
} else
u = t.slice(
a.value,
a.value + e.initialVisibleData
), u.length > 0 && (a.value = a.value + u.length, y.value && ((f = (n = c.value) == null ? void 0 : n.searchValue) != null && f.value) && ((C = (S = c.value) == null ? void 0 : S.searchValue) == null ? void 0 : C.value) !== "" && (e.objectProperty ? u = u.filter(
(v) => {
var m, F, E, B, $;
return ($ = v[e.objectProperty]) == null ? void 0 : $.toString().toLowerCase().includes(
(B = (E = (F = (m = c.value) == null ? void 0 : m.searchValue) == null ? void 0 : F.value) == null ? void 0 : E.toString()) == null ? void 0 : B.toLowerCase().trim()
);
}
) : u = u.filter(
(v) => {
var m, F, E, B;
return v == null ? void 0 : v.toString().toLowerCase().includes(
(B = (E = (F = (m = c.value) == null ? void 0 : m.searchValue) == null ? void 0 : F.value) == null ? void 0 : E.toString()) == null ? void 0 : B.toLowerCase().trim()
);
}
)), r.value = [...r.value, ...u]);
setTimeout(() => {
var v;
(v = k.value) == null || v.scrollTo(
0,
Math.ceil(k.value.scrollHeight * 50 / 100)
);
}, 75);
}
}
function ue() {
var t, l, o, i;
try {
const s = [...d.value];
if (e.loadAllDataAtOnce) {
r.value = s, a.value = s.length, j();
return;
}
if (e.initialVisibleData !== void 0 && s.length <= e.initialVisibleData) {
r.value = s, a.value = s.length, j();
return;
}
let n = s.slice(0, e.initialVisibleData);
a.value = n.length, y.value && ((l = (t = c.value) == null ? void 0 : t.searchValue) != null && l.value) && ((i = (o = c.value) == null ? void 0 : o.searchValue) == null ? void 0 : i.value) !== "" && (e.objectProperty ? n = n.filter(
(f) => {
var S, C, b, u, v;
return (v = f[e.objectProperty]) == null ? void 0 : v.toString().toLowerCase().includes(
(u = (b = (C = (S = c.value) == null ? void 0 : S.searchValue) == null ? void 0 : C.value) == null ? void 0 : b.toString()) == null ? void 0 : u.toLowerCase().trim()
);
}
) : n = n.filter(
(f) => {
var S, C, b, u;
return f == null ? void 0 : f.toString().toLowerCase().includes(
(u = (b = (C = (S = c.value) == null ? void 0 : S.searchValue) == null ? void 0 : C.value) == null ? void 0 : b.toString()) == null ? void 0 : u.toLowerCase().trim()
);
}
)), r.value = n, j();
return;
} catch (s) {
console.log(s);
}
}
const Be = (t) => {
var l, o, i, s;
if (!(r.value.length <= 0)) {
if (t.target.offsetHeight + t.target.scrollTop >= t.target.scrollHeight) {
if (e.totalRecords && a.value >= e.totalRecords) {
h.value = !1;
return;
}
re();
} else e.isScrollThresholdRequired && t.target.scrollTop < 10 && r.value.length > e.initialVisibleData && de();
t.target.scrollTop === 0 && (p.value !== -1 && ((i = (o = (l = D.value) == null ? void 0 : l.listElementsRef) == null ? void 0 : o[p.value]) == null || i.classList.remove("autocomplete-keydown-background")), w.value && ((s = N.value) == null || s.classList.remove("autocomplete-keydown-viewmore")), p.value = -1, w.value = !1);
}
}, ce = (t, l) => {
var o, i;
l && e.isApiLoad && !V.value && typeof e.triggerApiLoadEvent == "function" && (e.triggerApiLoadEvent({
dataIndex: d.value.length
}), (i = (o = c.value) == null ? void 0 : o.searchValue) == null || i.focus(), V.value = !0, e.showLoadingSpinner && (H.value = !0));
}, _ = () => {
var o, i;
const t = (o = te.value) == null ? void 0 : o.style, l = (i = document.getElementById("searchInput")) == null ? void 0 : i.clientWidth;
t && l && (t.width = l + "px");
}, Oe = (t) => {
var l, o, i, s, n, f, S, C, b, u, v;
if (window.removeEventListener("keydown", se), !((o = (l = t == null ? void 0 : t.relatedTarget) == null ? void 0 : l.classList) != null && o.contains("arrow"))) {
if ((s = (i = t == null ? void 0 : t.relatedTarget) == null ? void 0 : i.classList) != null && s.contains("unorder-list")) {
(f = (n = c.value) == null ? void 0 : n.searchValue) == null || f.focus();
return;
}
if (!((C = (S = t == null ? void 0 : t.relatedTarget) == null ? void 0 : S.classList) != null && C.contains(
"disable-list-element"
)) && !((u = (b = t == null ? void 0 : t.relatedTarget) == null ? void 0 : b.classList) != null && u.contains(
"autocomplete-data-list"
))) {
if (e.inspectAutoCompleteList) {
console.warn(
"You have turned off blur event in autocomplete module which will not close autocomplete list. Hope you know what you are doing. Update to false after inspect is complete."
);
return;
}
g.value = !1, r.value = [], le(), (v = k.value) == null || v.scrollTo(0, 0), p.value = 0, e.triggerBlurEvent && typeof e.triggerBlurEvent == "function" && e.triggerBlurEvent(t);
}
}
}, Me = (t) => {
var l, o, i;
e.isAutoCompleteDisabled || (g.value = !0, _(), e.triggerOnFocusEvent && typeof e.triggerOnFocusEvent == "function" && e.triggerOnFocusEvent(t), r.value.length <= 0 && (y.value && ((o = (l = c.value) == null ? void 0 : l.searchValue) != null && o.value) && ((i = c.value.searchValue) == null ? void 0 : i.value) !== "" ? pe() : ue()), window.addEventListener("keydown", se));
}, je = (t) => {
e.isAutoCompleteDisabled || (c.value.searchValue.value = "", e.triggerClearSelectionEvent && typeof e.triggerClearSelectionEvent == "function" && e.triggerClearSelectionEvent(t));
}, de = () => {
var l, o;
const t = y.value && L.value.length > 0 && ((o = (l = c.value) == null ? void 0 : l.searchValue) != null && o.value) ? L.value.slice(0, e.initialVisibleData) : d.value.slice(0, e.initialVisibleData);
r.value = t, a.value = t.length;
};
function Te(t) {
return new Promise((l, o) => {
var s, n;
const i = t(
(n = (s = c.value) == null ? void 0 : s.searchValue) == null ? void 0 : n.value,
d.value
);
i && l(i), o([]);
});
}
const pe = (t) => {
var l, o, i, s, n, f, S, C;
try {
if (!((o = (l = c.value) == null ? void 0 : l.searchValue) != null && o.value) || ((s = (i = c.value) == null ? void 0 : i.searchValue) == null ? void 0 : s.value.trim()) === "") {
L.value = [], de(), j(), (n = k.value) == null || n.scrollTo(0, 0);
return;
}
if (y.value || (y.value = !0), a.value = 0, g.value || (g.value = !0), e.searchFn && typeof e.searchFn == "function") {
let u = Te(e.searchFn);
u.then((v) => {
if (v && v.length > 0) {
L.value = v;
const m = v.slice(0, e.initialVisibleData);
a.value = a.value + m.length, r.value = [...m], j();
return;
}
r.value = [], L.value = [], a.value = 0, j();
}), u.catch((v) => {
r.value = [], L.value = [], a.value = 0, j();
});
}
if (e.objectProperty) {
let u;
if (!ae())
u = d.value.filter(
(v) => {
var m, F, E;
return (E = v[e.objectProperty]) == null ? void 0 : E.toString().toLowerCase().includes(
(F = (m = c.value) == null ? void 0 : m.searchValue) == null ? void 0 : F.value.toLowerCase().trim()
);
}
);
else if (typeof ((f = e.additionalData) == null ? void 0 : f.relativeSearch) == "object") {
const v = (S = e.additionalData) == null ? void 0 : S.relativeSearch;
if (typeof v == "object" && Object.prototype.hasOwnProperty.call(v, "customRelativeSearchFunction") && typeof v.customRelativeSearchFunction == "function")
return (C = He()) == null ? void 0 : C.then((m) => {
ve(m);
}).catch((m) => {
console.log(m), r.value = [];
});
}
u = Ne(), ve(u);
return;
}
const b = d.value.filter(
(u) => {
var v, m;
return u == null ? void 0 : u.toString().toLowerCase().includes(
(m = (v = c.value) == null ? void 0 : v.searchValue) == null ? void 0 : m.value.toLowerCase().trim()
);
}
);
if (b.length > 0) {
const u = b.slice(0, e.initialVisibleData);
a.value = a.value + u.length, L.value = b, r.value = u, j();
return;
}
r.value = [];
return;
} catch (b) {
console.log(b);
}
};
function ve(t) {
if (t && t.length > 0) {
const l = t.slice(0, e.initialVisibleData);
a.value = a.value + l.length, L.value = t, r.value = l, j();
return;
}
r.value = [];
}
const Ie = (t) => {
var l, o;
e.isAutoCompleteDisabled || (g.value ? g.value = !1 : (o = (l = c.value) == null ? void 0 : l.searchValue) == null || o.focus());
}, le = () => {
var t, l, o, i;
p.value !== -1 && ((o = (l = (t = D.value) == null ? void 0 : t.listElementsRef) == null ? void 0 : l[p.value]) == null || o.classList.remove("autocomplete-keydown-background")), w.value && ((i = N.value) == null || i.classList.remove("autocomplete-keydown-viewmore")), p.value = -1, w.value = !1, D.value.listElementsRef = [];
}, fe = (t, l, o) => {
if (!o)
return !1;
l != null && (e.disableProperty && l[e.disableProperty] || e.disableListFn !== void 0 && e.disableListFn !== null && e.disableListFn(t, l) || (e.objectProperty ? c.value.searchValue.value = l[e.objectProperty] : c.value.searchValue.value = l, g.value = !1, y.value = !1, r.value = [], L.value = [], h.value = !1, le(), e.broadcastSelectedValue && e.broadcastSelectedValue(l)));
};
Ge(() => {
window.removeEventListener("resize", ne);
});
function ae() {
return !!(e.additionalData && e.additionalData.relativeSearch);
}
function he() {
var t, l;
return typeof ((t = e.additionalData) == null ? void 0 : t.relativeSearch) == "object" && typeof ((l = e.additionalData.relativeSearch) == null ? void 0 : l.setDefaultValueWithACustomFunction) == "function";
}
function me() {
return new Promise((t, l) => {
var i, s, n, f;
const o = (f = (i = e.additionalData) == null ? void 0 : i.relativeSearch) == null ? void 0 : f.setDefaultValueWithACustomFunction((n = (s = c.value) == null ? void 0 : s.searchValue) == null ? void 0 : n.value);
o && t(o), l([]);
});
}
function He() {
var l;
const t = (l = e.additionalData) == null ? void 0 : l.relativeSearch;
if (typeof t == "object" && Object.prototype.hasOwnProperty.call(t, "customRelativeSearchFunction") && typeof t.customRelativeSearchFunction == "function")
return new Promise((o, i) => {
var n, f;
const s = t.customRelativeSearchFunction((f = (n = c.value) == null ? void 0 : n.searchValue) == null ? void 0 : f.value);
s && o(s), i([]);
});
}
function Ne() {
var o, i, s;
const t = (o = e.additionalData) == null ? void 0 : o.relativeSearch;
if (!t)
return [];
let l = [];
if (typeof t == "boolean" && t === !0)
for (const n in d.value[0])
l.push(n);
else if (typeof t == "object" && Object.keys(t).length > 0) {
if (Object.prototype.hasOwnProperty.call(t, "includeOnly") && t.includeOnly.length > 0)
l = [...t.includeOnly];
else
for (const n in d.value[0])
l.push(n);
Object.prototype.hasOwnProperty.call(t, "customRelativeSearchFunction") && t.customRelativeSearchFunction;
}
return l.length > 0 ? $e((s = (i = c.value) == null ? void 0 : i.searchValue) == null ? void 0 : s.value.toLowerCase().trim(), l) : [];
}
function $e(t, l) {
return t ? d.value.filter((o) => l.some((i) => o[i].toString().toLowerCase().includes(t))) : [];
}
return Je(() => {
if (ue(), e.defaultValue)
if (e.objectProperty) {
let t;
if (typeof e.defaultValue == "object")
if (ae()) {
if (!he())
return;
me().then((l) => {
l && (l != null && l[e.objectProperty]) && (c.value.searchValue.value = l[e.objectProperty]);
}).catch((l) => console.log(l));
return;
} else
t = d.value.find(
(l) => {
var o, i, s, n;
return ((i = (o = l[e.objectProperty].toString()) == null ? void 0 : o.toLowerCase()) == null ? void 0 : i.trim()) === ((n = (s = e.defaultValue[e.objectProperty].toString()) == null ? void 0 : s.toLowerCase()) == null ? void 0 : n.trim());
}
);
else if (ae()) {
if (!he())
return;
me().then((l) => {
l && (l != null && l[e.objectProperty]) && (c.value.searchValue.value = l[e.objectProperty]);
}).catch((l) => console.log(l));
return;
} else
t = d.value.find(
(l) => {
var o, i, s, n;
return ((i = (o = l[e.objectProperty].toString()) == null ? void 0 : o.toLowerCase()) == null ? void 0 : i.trim()) === ((n = (s = e.defaultValue.toString()) == null ? void 0 : s.toLowerCase()) == null ? void 0 : n.trim());
}
);
t && (c.value.searchValue.value = t[e.objectProperty]);
} else {
let t;
typeof e.defaultValue == "object" ? t = d.value.find(
(l) => {
var o, i, s, n;
return ((i = (o = l == null ? void 0 : l.toString()) == null ? void 0 : o.toLowerCase()) == null ? void 0 : i.trim()) === ((n = (s = e.defaultValue[e.objectProperty].toString()) == null ? void 0 : s.toLowerCase()) == null ? void 0 : n.trim());
}
) : t = d.value.find(
(l) => {
var o, i, s, n;
return ((i = (o = l.toString()) == null ? void 0 : o.toLowerCase()) == null ? void 0 : i.trim()) === ((n = (s = e.defaultValue.toString()) == null ? void 0 : s.toLowerCase()) == null ? void 0 : n.trim());
}
), t && (c.value.searchValue.value = t);
}
window.addEventListener("resize", ne), _();
}), (t, l) => {
var o, i, s, n, f, S, C;
return A(), P(ee, null, [
ie(xe, {
ref_key: "searchValue",
ref: c,
placeHolder: e.placeHolder,
"is-auto-complete-disabled": e.isAutoCompleteDisabled,
"input-field-class": (o = e.customClass) == null ? void 0 : o.inputFieldClass,
"input-field-style": (i = e.customStyle) == null ? void 0 : i.inputFieldStyle,
"aria-input-field": (s = e.aria) == null ? void 0 : s.ariaInputField,
"aria-role": (n = e.aria) == null ? void 0 : n.ariaRole,
"aria-role-description": (f = e.aria) == null ? void 0 : f.ariaRoleDescription,
"on-focus": Me,
"on-blur": Oe,
"clear-search": je,
"handle-dropdown-click": Ie,
"showdrop-down-arrow": e.showdropDownArrow,
"show-clear-option": e.showClearOption,
"on-input": pe
}, null, 8, ["placeHolder", "is-auto-complete-disabled", "input-field-class", "input-field-style", "aria-input-field", "aria-role", "aria-role-description", "showdrop-down-arrow", "show-clear-option"]),
X("div", {
class: M(["auto-complete-list", [
t.customClass && t.customClass.listContainerClass ? t.customClass.listContainerClass : "",
g.value ? "showDropdown" : ""
]]),
ref_key: "listContainer",
ref: te,
"aria-label": (S = t.aria) != null && S.ariaListContainer ? t.aria.ariaListContainer : "List container",
style: O(
t.customStyle && t.customStyle.listContainerStyle ? t.customStyle.listContainerStyle : {}
)
}, [
X("div", rt, [
g.value ? (A(), P("ul", {
key: 0,
id: "list-id",
class: M([
"unorder-list",
t.customClass && t.customClass.dropdownUnorderedListClass ? t.customClass.dropdownUnorderedListClass : ""
]),
ref_key: "unOrderedList",
ref: k,
onScroll: Be,
"aria-label": (C = t.aria) != null && C.ariaULList ? t.aria.ariaULList : "Parent List",
style: O(
t.customStyle && t.customStyle.dropdownUnorderedListStyle ? t.customStyle.dropdownUnorderedListStyle : {}
)
}, [
ie(ot, {
ref_key: "listElementsRef",
ref: D,
isOnFocus: g.value,
customClass: t.customClass,
customStyle: t.customStyle,
filteredData: r.value,
disableListFn: t.disableListFn,
onSelect: fe,
objectProperty: t.objectProperty,
disableProperty: t.disableProperty,
showLoadingSpinner: t.showLoadingSpinner,
noSearchResultMessage: t.noSearchResultMessage,
aria: t.aria,
isCustomSpinner: t.isCustomSpinner,
onViewMore: ce,
viewMoreText: t.viewMoreText,
isEventEmitted: V.value,
showSpinner: H.value,
isApiLoad: t.isApiLoad,
displayViewMoreButton: h.value,
viewMoreRef: N.value,
optViewMoreOnlyForApiCall: t.optViewMoreOnlyForApiCall
}, null, 8, ["isOnFocus", "customClass", "customStyle", "filteredData", "disableListFn", "objectProperty", "disableProperty", "showLoadingSpinner", "noSearchResultMessage", "aria", "isCustomSpinner", "viewMoreText", "isEventEmitted", "showSpinner", "isApiLoad", "displayViewMoreButton", "viewMoreRef", "optViewMoreOnlyForApiCall"])
], 46, st)) : T("", !0)
])
], 14, it)
], 64);
};
}
}), ct = /* @__PURE__ */ Z({
__name: "Autocomplete",
props: {
dropdownData: {},
inputLabel: { default: "Enter or Search value" },
showInputlabel: { type: Boolean, default: !1 },
placeHolder: {},
objectProperty: {},
defaultValue: {},
initialVisibleData: { default: 1e3 },
scrollThreshold: { default: 3 },
totalRecords: {},
disableProperty: {},
noSearchResultMessage: { default: "No results found." },
isAutoCompleteDisabled: { type: Boolean, default: !1 },
isCustomSpinner: { type: Boolean, default: !1 },
showLoadingSpinner: { type: Boolean, default: !0 },
showdropDownArrow: { type: Boolean, default: !0 },
showClearOption: { type: Boolean, default: !0 },
customClass: {},
customStyle: {},
searchFn: {},
disableListFn: {},
isScrollThresholdRequired: { type: Boolean, default: !0 },
inspectAutoCompleteList: { type: Boolean, default: !1 },
viewMoreText: { default: "View more" },
optViewMoreOnlyForApiCall: { type: Boolean, default: !1 },
aria: {},
triggerOnFocusEvent: {},
triggerBlurEvent: {},
triggerApiLoadEvent: {},
broadcastSelectedValue: {},
triggerClearSelectionEvent: {},
isApiLoad: { type: Boolean, default: !1 },
loadAllDataAtOnce: { type: Boolean, default: !1 },
additionalData: {}
},
setup(I) {
const e = I;
return Ke(() => {
if (!Array.isArray(e.dropdownData) && e.dropdownData !== void 0)
throw Error("Expected dropdownData to be an array.");
if (e.disableProperty && !e.objectProperty)
throw Error(
"Expected objectProperty to be available when disableProperty is set."
);
}), (d, r) => {
var L, a, V, h;
return A(), P("div", {
class: M([
"auto-complete-textfield-container",
d.customClass && d.customClass.parentContainerClass ? d.customClass.parentContainerClass : ""
]),
style: O(
d.customStyle && d.customStyle.parentContainerStyle ? d.customStyle.parentContainerStyle : {}
)
}, [
e.showInputlabel ? (A(), Qe(Ze, {
key: 0,
"input-label": e.inputLabel,
"input-label-container-style": (L = e.customStyle) == null ? void 0 : L.inputLabelContainerStyle,
"input-label-class": (a = e.customClass) == null ? void 0 : a.inputLabelClass,
"input-label-style": (V = e.customStyle) == null ? void 0 : V.inputLabelStyle,
"aria-input-label": (h = e.aria) == null ? void 0 : h.ariaInputLabel
}, null, 8, ["input-label", "input-label-container-style", "input-label-class", "input-label-style", "aria-input-label"])) : T("", !0),
ie(nt, {
"dropdown-data": d.dropdownData,
placeHolder: e.placeHolder,
"object-property": e.objectProperty,
"default-value": e.defaultValue,
"initial-visible-data": e.initialVisibleData,
"scroll-threshold": e.scrollThreshold,
"total-records": e.totalRecords,
"disable-property": e.disableProperty,
"no-search-result-message": e.noSearchResultMessage,
"is-auto-complete-disabled": e.isAutoCompleteDisabled,
"is-custom-spinner": e.isCustomSpinner,
"show-loading-spinner": e.showLoadingSpinner,
"showdrop-down-arrow": e.showdropDownArrow,
"show-clear-option": e.showClearOption,
"custom-class": e.customClass,
"custom-style": e.customStyle,
"search-fn": e.searchFn,
"disable-list-fn": e.disableListFn,
"is-scroll-threshold-required": e.isScrollThresholdRequired,
"inspect-auto-complete-list": e.inspectAutoCompleteList,
"view-more-text": e.viewMoreText,
"opt-view-more-only-for-api-call": e.optViewMoreOnlyForApiCall,
aria: e.aria,
"trigger-on-focus-event": e.triggerOnFocusEvent,
"trigger-blur-event": e.triggerBlurEvent,
"trigger-api-load-event": e.triggerApiLoadEvent,
"trigger-clear-selection-event": e.triggerClearSelectionEvent,
"broadcast-selected-value": e.broadcastSelectedValue,
isApiLoad: e.isApiLoad,
"load-all-data-at-once": e.loadAllDataAtOnce,
"additional-data": e.additionalData
}, null, 8, ["dropdown-data", "placeHolder", "object-property", "default-value", "initial-visible-data", "scroll-threshold", "total-records", "disable-property", "no-search-result-message", "is-auto-complete-disabled", "is-custom-spinner", "show-loading-spinner", "showdrop-down-arrow", "show-clear-option", "custom-class", "custom-style", "search-fn", "disable-list-fn", "is-scroll-threshold-required", "inspect-auto-complete-list", "view-more-text", "opt-view-more-only-for-api-call", "aria", "trigger-on-focus-event", "trigger-blur-event", "trigger-api-load-event", "trigger-clear-selection-event", "broadcast-selected-value", "isApiLoad", "load-all-data-at-once", "additional-data"])
], 6);
};
}
});
export {
ct as Autocomplete
};