https://portal.godesignguru.com/build/assets/BaseListbox-BuI0rG6W.js

1import { z as D, o as t, i as d, f as w, I as y, a as s, C as i, e as x, u as o, c as r, H as q, b as u, d as O, t as p, T as M, S as P, B as G, F as C, r as A, y as K, s as U, j as H, G as R, g as B } from "./app-yg_pP4S4.js";
2import { _ as J } from "./BaseInput-DrEncIoW.js";
3import { v as E } from "./functions-DLrKIvnr.js";
4import { u as Q } from "./modelWrapper-D0DowOi8.js";
5import { u as X } from "./LoaderIcon-BfI_LFZK.js";
6import { f as Y, G as Z } from "./index-CDyB1Hog.js";
7import { j as ee, A as te, F as N, I as ae } from "./listbox-BVei8WBz.js";
8import { r as le } from "./ChevronDownIcon-DvXuQ_5B.js";
9import { r as re } from "./form-BcDj1t5Y.js";
10import { r as W } from "./CheckIcon-Bb6ppPFl.js";
11const se = ["src", "alt"], oe = { key: 1, class: "block truncate text-gray-500" }, ne = { class: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2" }, ie = { ref: "popoverPanelContainer", class: "base-listbox-portal-options" }, ue = { key: 0, class: "sticky top-0 z-10 border-b bg-white p-3" }, de = { class: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-5" }, ce = { class: "text-md p-3 font-bold capitalize text-gray-900" }, me = ["src", "alt"], fe = { class: "truncate" }, ye = ["src", "alt"], pe = { class: "truncate" }, he = { key: 3, class: "flex h-20 w-full items-center justify-center p-3" }, ge = { class: "text-center" }, be = { key: 0, class: "ml-1" }, qe = { __name: "BaseListbox", props: { modelValue: { type: [String, Number, Array, Object], default: "" }, options: { type: Array, required: true }, multiple: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, searchable: { type: Boolean, default: false }, placeholder: { type: String, default: () => {
12  const { t: a } = H();
13  return a("Select an option");
14} }, hasErrors: { type: [Boolean, String], default: false }, dropdownClasses: { type: [String, Array, Object], default: null }, buttonClasses: { type: [String, Array, Object], default: null }, labelClasses: { type: [String, Array, Object], default: null }, showCheckIcon: { type: Boolean, default: true }, sameWidthDropdown: { type: Boolean, default: false }, fillContainer: { type: Boolean, default: false }, infinite: { type: Boolean, default: false }, groupBy: { type: String, default: null } }, emits: ["update:modelValue", "queryChanged", "load-more"], setup(a, { emit: z }) {
15  const c = a, $ = z, m = Q(c, $), f = R(""), F = Z(() => $("load-more"), 1e3), { trigger: L, popper: I } = X({ placement: "bottom-end", strategy: "fixed", modifiers: [{ name: "sameWidth", enabled: c.sameWidthDropdown, fn: function({ state: e }) {
16    e.styles.popper.width = `${e.rects.reference.width}px`;
17  }, phase: "beforeWrite", requires: ["computeStyles"] }, { name: "infinite", enabled: c.infinite, fn: function() {
18    Y(I.value.$el, () => F(), { distance: 10 });
19  }, phase: "beforeWrite", requires: ["computeStyles"] }] }), S = B(() => f.value === "" ? c.options : c.options.filter((e) => e.label.toLowerCase().includes(f.value.toLowerCase()))), T = B(() => _.groupBy(S.value, c.groupBy)), k = B(() => c.options.filter((e) => Array.isArray(m.value) ? m.value.includes(e.value) : _.isEqual(m.value, e.value)).map((e) => e.label).join(", ")), b = B(() => c.options.find((e) => _.isEqual(m.value, e.value)));
20  return D(f, () => $("queryChanged", f.value)), (e, h) => (t(), d(o(ae), { modelValue: o(m), "onUpdate:modelValue": h[2] || (h[2] = (l) => U(m) ? m.value = l : null), as: "div", multiple: a.multiple, disabled: a.disabled, class: i([{ "h-full w-full": a.fillContainer }, "truncate"]) }, { default: w(() => [y(e.$slots, "label"), s("div", { class: i(["relative", { "mt-1": e.$slots.label }, { "h-full w-full": a.fillContainer }]) }, [s("div", { ref_key: "popoverButton", ref: L, class: i([{ "h-full w-full": a.fillContainer }]) }, [y(e.$slots, "button", { label: k.value, selectedOption: b.value }, () => [x(o(ee), { class: i(o(E)(["relative w-full cursor-pointer rounded-md border py-2 pl-3 pr-10 text-left shadow-sm sm:text-sm [@media(hover:none)]:min-h-11", a.hasErrors ? "border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500" : "border-gray-300", a.disabled ? "cursor-not-allowed bg-gray-100" : "bg-white", a.buttonClasse

20s])) }, { default: w(() => {
21    var _a, _b;
22    return [k.value ? (t(), r("span", { key: 0, class: i(["flex truncate", a.labelClasses]) }, [((_a = b.value) == null ? void 0 : _a.icon) && !a.multiple ? (t(), d(q(b.value.icon), { key: 0, class: "mr-3 h-5 w-5 shrink-0 text-gray-500 group-hover:text-gray-600" })) : ((_b = b.value) == null ? void 0 : _b.image) ? (t(), r("img", { key: 1, src: b.value.image, alt: k.value, class: "mr-3 h-5 w-5 shrink-0 rounded object-cover text-gray-500 group-hover:text-gray-600" }, null, 8, se)) : u("", true), O(" " + p(k.value), 1)], 2)) : (t(), r("span", oe, p(a.placeholder), 1)), s("span", ne, [x(o(le), { class: "h-5 w-5 text-gray-400", "aria-hidden": "true" })])];
23  }), _: 1 }, 8, ["class"])])], 2), (t(), d(M, { to: "body" }, [s("div", ie, [x(o(te), { ref_key: "popoverPanel", ref: I, class: i(o(E)("z-[99] overflow-auto rounded-md bg-white pb-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", { "pt-1": !a.searchable }, a.searchable ? e.$slots.bottomButton ? "max-h-80" : "max-h-72" : "max-h-60", a.dropdownClasses)) }, { default: w(() => [a.searchable ? (t(), r("div", ue, [x(J, { modelValue: f.value, "onUpdate:modelValue": h[0] || (h[0] = (l) => f.value = l), placeholder: e.$t("Search..."), onKeydown: h[1] || (h[1] = P(G(() => {
24  }, ["exact", "stop"]), ["space"])) }, null, 8, ["modelValue", "placeholder"]), s("div", de, [x(o(re), { class: "h-5 w-5 text-gray-400", "aria-hidden": "true" })])])) : u("", true), y(e.$slots, "pre-options"), a.groupBy ? (t(true), r(C, { key: 1 }, A(T.value, (l, v) => (t(), r(C, { key: v }, [s("li", ce, p(v), 1), (t(true), r(C, null, A(l, (n, g) => (t(), d(o(N), { key: g, as: "template", value: n.value }, { default: w(({ active: j, selected: V }) => [y(e.$slots, "option", { option: n, index: g, active: j, selected: V }, () => [s("li", { class: i([{ "bg-gray-100": j }, "relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-700 [@media(hover:none)]:py-3"]) }, [s("div", { class: i([V ? "font-semibold" : "font-normal", "mr-5 flex items-center"]) }, [n.icon ? (t(), d(q(n.icon), { key: 0, class: "mr-3 h-5 w-5 shrink-0 text-gray-500 group-hover:text-gray-600" })) : n.image ? (t(), r("img", { key: 1, src: n.image, alt: n.label, class: "mr-3 h-5 w-5 shrink-0 rounded object-cover text-gray-500 group-hover:text-gray-600" }, null, 8, me)) : u("", true), s("span", fe, p(n.label), 1)], 2), V ? (t(), r("span", { key: 0, class: i([j ? "text-gray-600" : "text-gray-500", "absolute inset-y-0 right-0 flex items-center pr-4"]) }, [a.showCheckIcon ? (t(), d(o(W), { key: 0, class: "h-5 w-5", "aria-hidden": "true" })) : u("", true)], 2)) : u("", true)], 2)])]), _: 2 }, 1032, ["value"]))), 128))], 64))), 128)) : (t(true), r(C, { key: 2 }, A(S.value, (l, v) => (t(), d(o(N), { key: v, as: "template", value: l.value }, { default: w(({ active: n, selected: g }) => [y(e.$slots, "option", { option: l, index: v, active: n, selected: g }, () => [s("li", { class: i([{ "bg-gray-100": n }, "relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-700 [@media(hover:none)]:py-3"]) }, [s("span", { class: i([g ? "font-semibold" : "font-normal", "mr-5 flex items-center"]) }, [l.icon ? (t(), d(q(l.icon), { key: 0, class: "mr-3 h-5 w-5 shrink-0 text-gray-500 group-hover:text-gray-600" })) : l.image ? (t(), r("img", { key: 1, src: l.image, alt: l.label, class: "mr-3 h-5 w-5 shrink-0 rounded object-cover text-gray-500 group-hover:text-gray-600" }, null, 8, ye)) : u("", true), s("span", pe, p(l.label), 1)], 2), g ? (t(), r("span", { key: 0, class: i([n ? "text-gray-600" : "text-gray-500", "absolute inset-y-0 right-0 flex items-center pr-4"]) }, [a.showCheckIcon ? (t(), d(o(W), { key: 0, class: "h-5 w-5", "aria-hidden": "true" })) : u("", true)], 2)) : u("", true)], 2)])]), _: 2 }, 1032, ["value"]))), 128)), o(K.isEmpty)(S.value) ? (t(), r("div", he, [y(e.$slots, "empty", { query: f.value }, () => [s("div", ge, [O(p(e.$t("No entries found.")) + " ", 1), a.searchable ? (t(), r("span", be, p(e.$t("Try a different search term.")), 1)) : u("", true)])])])) : u("", true), y(e.$slots, "bottomButton")]), _: 3 }, 8, ["class"])], 512)]))], 2)]), _: 3 }, 8, ["modelValue", "multiple", "disabled", "class"]));
25} };
26export {
27  qe as _
28};