@nethesis/vue-components
Version:
This library contains: - a collection of Vue 3 components based on [Flowbite](https://flowbite.com/) - a set of utility functions
1,423 lines • 317 kB
JavaScript
import { defineComponent as R, createElementBlock as g, openBlock as d, createElementVNode as m, Fragment as Y, renderList as G, normalizeStyle as Ie, normalizeClass as D, computed as I, createCommentVNode as O, renderSlot as E, createBlock as F, ref as z, onMounted as Ee, watch as U, createVNode as N, withCtx as A, createTextVNode as X, toDisplayString as S, unref as C, Transition as et, withDirectives as te, vShow as Gt, onUnmounted as So, mergeProps as Fe, vModelCheckbox as ar, inject as Ae, toValue as re, provide as ka, Teleport as Kt, useSlots as rr, vModelRadio as Ve, vModelSelect as Mo, useAttrs as $o, normalizeProps as To, guardReactiveProps as _o, withModifiers as ce, resolveDynamicComponent as Oo, nextTick as Po, mergeModels as di, useModel as Ia, watchEffect as Do } from "vue";
import { FontAwesomeIcon as W } from "@fortawesome/vue-fontawesome";
import { faChevronUp as Ea, faChevronDown as Me, faFileArrowUp as No, faCircleCheck as nr, faCircleXmark as ci, faTriangleExclamation as fi, faCircleInfo as ir, faXmark as ye, faSortDown as Ao, faSortUp as Lo, faSort as Io, faCheck as mi, faEllipsisVertical as Eo, faChevronLeft as Fo, faChevronRight as zo, faCircleExclamation as gi, faEye as Ro, faEyeSlash as Wo, faMagnifyingGlass as Bo, faUser as Yo } from "@fortawesome/free-solid-svg-icons";
import { TransitionRoot as hi, Dialog as vi, TransitionChild as He, DialogPanel as pi, Combobox as Uo, ComboboxLabel as qo, ComboboxInput as jo, ComboboxButton as Vo, ComboboxOptions as Ho, ComboboxOption as Xo, Menu as or, MenuButton as sr, MenuItems as lr, MenuItem as Xe, Listbox as Go, ListboxLabel as Ko, ListboxButton as Zo, ListboxOptions as Qo, ListboxOption as Jo, DialogTitle as es } from "@headlessui/vue";
import { Tippy as ts } from "vue-tippy";
import { v4 as ze } from "uuid";
import { onClickOutside as yi, useOffsetPagination as as } from "@vueuse/core";
import { uniqBy as Yt, isEqual as ur, range as Fa, round as ne } from "lodash-es";
const rs = { class: "flex animate-pulse space-x-4" }, ns = { class: "flex-1 space-y-3" }, za = /* @__PURE__ */ R({
__name: "NeSkeleton",
props: {
size: {
type: String,
default: "md"
},
lines: {
type: Number,
default: 1
}
},
setup(e) {
const t = e, a = {
sm: "h-4",
md: "h-5",
lg: "h-6"
};
return (r, n) => (d(), g("div", rs, [
m("div", ns, [
(d(!0), g(Y, null, G(t.lines, (i) => (d(), g("div", {
key: i,
class: D(`${a[t.size]} rounded bg-gray-300 dark:bg-gray-700`),
style: Ie(t.lines > 1 ? `width: ${65 + Math.round(Math.random() * 35)}%` : "")
}, null, 6))), 128))
])
]));
}
}), Or = /* @__PURE__ */ R({
__name: "NeSpinner",
props: {
size: {
type: String,
default: "4"
},
color: {
type: String,
default: "primary"
}
},
setup(e) {
const t = e, a = {
0: "w-0 h-0",
"0.5": "w-0.5 h-0.5",
1: "w-1 h-1",
"1.5": "w-1.5 h-1.5",
10: "w-10 h-10",
11: "w-11 h-11",
12: "w-12 h-12",
2: "w-2 h-2",
"2.5": "w-2.5 h-2.5",
3: "w-3 h-3",
4: "w-4 h-4",
5: "w-5 h-5",
6: "w-6 h-6",
7: "w-7 h-7",
8: "w-8 h-8",
9: "w-9 h-9",
px: "w-px h-px"
}, r = {
primary: "fill-primary-700 dark:fill-primary-500",
blue: "fill-blue-600",
gray: "fill-gray-600 dark:fill-gray-300",
green: "fill-green-500",
pink: "fill-pink-600",
purple: "fill-purple-600",
red: "fill-red-600",
yellow: "fill-yellow-400",
white: "fill-white"
}, n = I(() => a[t.size]), i = I(() => r[t.color]);
return (o, s) => (d(), g("svg", {
class: D(["animate-spin-fast text-gray-300 dark:text-gray-500", [n.value, i.value]]),
fill: "none",
role: "status",
viewBox: "0 0 100 101",
xmlns: "http://www.w3.org/2000/svg"
}, s[0] || (s[0] = [
m("path", {
d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
fill: "currentColor"
}, null, -1),
m("path", {
d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
fill: "currentFill"
}, null, -1)
]), 2));
}
}), is = ["disabled"], os = { class: "flex items-center justify-center" }, ss = {
key: 0,
class: "mr-2"
}, ls = {
key: 1,
class: "ml-2"
}, Ce = /* @__PURE__ */ R({
__name: "NeButton",
props: {
kind: {
type: String,
default: "secondary"
},
size: {
type: String,
default: "md"
},
loading: {
type: Boolean,
default: !1
},
loadingPosition: {
type: String,
default: "prefix"
},
disabled: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = {
xs: "rounded px-2 py-1 text-xs",
sm: "rounded px-2 py-1 text-sm",
md: "rounded-md px-2.5 py-1.5 text-sm",
lg: "rounded-md px-3 py-2 text-sm",
xl: "rounded-md px-3.5 py-2.5 text-sm"
}, r = {
primary: "shadow-sm bg-primary-700 text-white hover:bg-primary-800 focus:ring-offset-white dark:bg-primary-500 dark:text-gray-950 dark:hover:bg-primary-300 dark:focus:ring-offset-primary-950",
secondary: "shadow-sm ring-1 text-primary-700 ring-gray-300 hover:bg-gray-200/70 hover:text-primary-800 focus:ring-offset-white dark:text-primary-500 dark:ring-gray-500 dark:hover:bg-gray-600/30 dark:hover:text-primary-400 dark:focus:ring-offset-primary-950",
tertiary: "text-primary-700 hover:text-primary-800 hover:bg-gray-200/70 focus:ring-offset-white dark:text-primary-500 dark:hover:text-primary-400 dark:hover:bg-gray-600/30 dark:focus:ring-offset-primary-950",
danger: "shadow-sm bg-rose-700 text-white hover:bg-rose-800 focus:ring-offset-white dark:bg-rose-600 dark:text-white dark:hover:bg-rose-500 dark:focus:ring-offset-primary-950"
}, n = {
primary: "white",
secondary: "primary",
tertiary: "primary",
danger: "white"
}, i = {
xs: "2.5",
sm: "3",
md: "4",
lg: "4",
xl: "5"
}, o = I(() => t.loading && t.loadingPosition === "prefix"), s = I(() => t.loading && t.loadingPosition === "suffix");
return (u, l) => (d(), g("button", {
class: D(["focus:ring-primary-500 dark:focus:ring-primary-300 font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", [r[t.kind], a[t.size]]]),
disabled: e.disabled,
type: "button"
}, [
m("div", os, [
u.$slots.prefix || o.value ? (d(), g("div", ss, [
o.value ? (d(), F(Or, {
key: 0,
color: n[e.kind],
size: i[e.size]
}, null, 8, ["color", "size"])) : E(u.$slots, "prefix", { key: 1 })
])) : O("", !0),
E(u.$slots, "default"),
u.$slots.suffix || s.value ? (d(), g("div", ls, [
s.value ? (d(), F(Or, {
key: 0,
color: n[e.kind],
size: i[e.size]
}, null, 8, ["color", "size"])) : E(u.$slots, "suffix", { key: 1 })
])) : O("", !0)
])
], 10, is));
}
}), us = { class: "text-sm" }, ds = {
key: 1,
class: "flex w-full items-center justify-between rounded border-b border-gray-300 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-gray-200 dark:border-gray-500 dark:text-gray-50 dark:hover:bg-gray-700"
}, cs = { class: "mt-4" }, Nh = /* @__PURE__ */ R({
__name: "NeExpandable",
props: {
label: {
type: String,
default: ""
},
isExpanded: {
type: Boolean,
default: !1
},
fullWidth: {
type: Boolean,
default: !1
}
},
emits: ["setExpanded"],
setup(e, { emit: t }) {
const a = e, r = t, n = z(!1);
Ee(() => {
n.value = a.isExpanded;
}), U(
() => a.isExpanded,
() => {
n.value != a.isExpanded && (n.value = a.isExpanded);
}
);
function i() {
n.value = !n.value, r("setExpanded", n.value);
}
return (o, s) => (d(), g("div", us, [
m("div", {
class: D(["cursor-pointer", e.fullWidth ? "block" : "inline-block"]),
onClick: i
}, [
E(o.$slots, "trigger", {}, () => [
e.fullWidth ? (d(), g("button", ds, [
m("span", null, S(e.label), 1),
N(C(W), {
icon: n.value ? C(Ea) : C(Me),
class: "h-3 w-3",
"aria-hidden": "true"
}, null, 8, ["icon"])
])) : (d(), F(Ce, {
key: 0,
kind: "tertiary",
size: "sm",
class: "-ml-2"
}, {
suffix: A(() => [
N(C(W), {
icon: n.value ? C(Ea) : C(Me),
class: "h-3 w-3",
"aria-hidden": "true"
}, null, 8, ["icon"])
]),
default: A(() => [
X(" " + S(e.label), 1)
]),
_: 1
}))
])
], 2),
N(et, { name: "slide-down" }, {
default: A(() => [
te(m("div", cs, [
E(o.$slots, "default")
], 512), [
[Gt, n.value]
])
]),
_: 3
})
]));
}
}), fs = { class: "text-sm" }, ms = {
key: 0,
class: "mb-1 flex justify-between font-medium text-gray-700 dark:text-gray-200"
}, gs = { key: 0 }, bi = /* @__PURE__ */ R({
__name: "NeProgressBar",
props: {
progress: {
type: Number,
required: !0,
validator(e) {
return e >= 0 && e <= 100;
}
},
label: {
type: String,
default: ""
},
showProgress: {
type: Boolean,
default: !1
},
size: {
type: String,
default: "md"
},
color: {
type: String,
default: "primary"
},
customColorClasses: {
type: String,
default: ""
},
indeterminate: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = {
sm: "h-1.5 leading-none",
md: "h-2.5 leading-none",
lg: "h-4 leading-none",
xl: "h-6 leading-tight"
}, r = {
primary: "bg-primary-600 dark:bg-primary-500",
gray: "bg-gray-600 dark:bg-gray-300",
blue: "bg-blue-600 dark:bg-blue-500",
red: "bg-red-600 dark:bg-red-500",
green: "bg-green-600 dark:bg-green-500",
yellow: "bg-yellow-500 dark:bg-yellow-400",
indigo: "bg-indigo-600 dark:bg-indigo-400",
rose: "bg-rose-600 dark:bg-rose-500",
amber: "bg-amber-600 dark:bg-amber-500",
custom: `${t.customColorClasses}`
}, n = I(() => t.progress < 0 ? 0 : t.progress > 100 ? 100 : t.progress);
return (i, o) => (d(), g("div", fs, [
e.label || e.showProgress ? (d(), g("div", ms, [
m("span", null, S(e.label), 1),
e.showProgress ? (d(), g("span", gs, S(n.value) + "%", 1)) : O("", !0)
])) : O("", !0),
m("div", {
class: D(`w-full overflow-hidden rounded-full bg-gray-300 dark:bg-gray-600 ${a[e.size]}`)
}, [
e.indeterminate ? (d(), g("div", {
key: 0,
class: D(`animate-indeterminate-progress-bar h-full w-full origin-[0%_50%] rounded-full ${a[e.size]} ${r[e.color]}`)
}, null, 2)) : (d(), g("div", {
key: 1,
class: D([`${a[e.size]} ${r[e.color]}`, "text-primary-100 rounded-full p-0.5 text-center font-medium duration-300 ease-out"]),
style: Ie({ width: n.value + "%" })
}, null, 6))
], 2)
]));
}
}), hs = { class: "text-sm" }, vs = { key: 0 }, ps = { class: "mb-2 block font-medium text-gray-900 dark:text-white" }, ys = { class: "flex items-center justify-center" }, bs = { class: "flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-100 hover:border-gray-400 hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500 dark:hover:bg-gray-700" }, xs = { class: "flex flex-col items-center justify-center p-6 text-gray-600 dark:text-gray-300" }, ks = { key: 0 }, ws = { class: "-mb-2! font-medium" }, Cs = {
key: 1,
class: "text-gray-900 dark:text-gray-50"
}, Ss = ["accept"], Ms = {
key: 1,
class: "mt-2 text-rose-700 dark:text-rose-400"
}, Ah = /* @__PURE__ */ R({
__name: "NeFileInput",
props: {
modelValue: { default: null },
label: { default: "" },
invalidMessage: { default: "" },
dropzoneLabel: { default: "Drag and drop or click to upload" },
progress: { default: 0 },
showProgress: { type: Boolean, default: !1 },
accept: { default: void 0 }
},
emits: ["update:modelValue", "select"],
setup(e, { emit: t }) {
const a = e, r = t, n = I({
get() {
return a.modelValue;
},
set(l) {
r("update:modelValue", l);
}
}), i = I(() => Array.isArray(a.modelValue) ? a.modelValue.map((l) => l.name).join(", ") : a.modelValue instanceof File && a.modelValue.name || ""), o = (l) => {
var x;
const v = ((x = l.target.files) == null ? void 0 : x[0]) ?? null;
n.value = v, r("select", v);
}, s = (l) => {
var v, x;
l.preventDefault();
const f = [];
if ((v = l.dataTransfer) != null && v.items) {
Object.values(l.dataTransfer.items).forEach((T) => {
T.kind === "file" && f.push(T.getAsFile());
});
const w = f[0];
n.value = w, r("select", w);
} else (x = l.dataTransfer) != null && x.files && Object.values(l.dataTransfer.files).forEach((w) => {
const T = w;
n.value = T, r("select", T);
});
}, u = (l) => {
l.preventDefault();
};
return (l, f) => (d(), g("div", hs, [
m("div", {
onChange: o,
onDragover: u,
onDrop: s
}, [
l.label ? (d(), g("label", vs, [
m("span", ps, S(l.label), 1)
])) : O("", !0),
m("div", ys, [
m("label", bs, [
m("div", xs, [
N(C(W), {
icon: C(No),
class: "mb-4 h-8 w-8"
}, null, 8, ["icon"]),
n.value ? (d(), g("p", Cs, S(i.value), 1)) : (d(), g("div", ks, [
m("p", ws, [
m("span", null, S(l.dropzoneLabel), 1)
]),
E(l.$slots, "default")
]))
]),
m("input", {
class: "hidden",
type: "file",
accept: l.accept
}, null, 8, Ss),
l.showProgress ? (d(), F(bi, {
key: 0,
indeterminate: !l.progress,
progress: l.progress,
class: "w-full px-6 pb-6"
}, null, 8, ["indeterminate", "progress"])) : O("", !0)
])
]),
l.invalidMessage ? (d(), g("p", Ms, S(l.invalidMessage), 1)) : O("", !0)
], 32)
]));
}
}), $s = { class: "flex" }, Ts = { class: "shrink-0" }, _s = { class: "ml-3" }, Os = {
key: 3,
class: "mt-4"
}, Ps = { class: "-mx-2 flex" }, Ds = {
key: 0,
class: "ml-auto pl-3"
}, Ns = { class: "-mx-1.5 -my-1.5" }, As = { class: "sr-only" }, Ls = /* @__PURE__ */ R({
__name: "NeInlineNotification",
props: {
kind: {
type: String,
required: !0
},
title: {
type: String,
default: void 0
},
description: {
type: String,
default: void 0
},
showCloseButton: {
type: Boolean,
default: !1
},
primaryButtonLabel: {
type: String,
default: void 0
},
secondaryButtonLabel: {
type: String,
default: void 0
},
showDetailsLabel: {
type: String,
default: "Show details"
},
closeAriaLabel: { type: String, default: "Dismiss" }
},
emits: ["close", "primaryClick", "secondaryClick"],
setup(e, { emit: t }) {
const a = e, r = t, n = z(!1), i = {
info: "border-indigo-500 bg-indigo-100 dark:border-indigo-300 dark:bg-indigo-900",
warning: "border-amber-500 bg-amber-100 dark:border-amber-300 dark:bg-amber-700",
error: "border-rose-500 bg-rose-100 dark:border-rose-300 dark:bg-rose-900",
success: "border-green-600 bg-green-100 dark:border-green-500 dark:bg-green-900"
}, o = {
info: ir,
warning: fi,
error: ci,
success: nr
}, s = {
info: "text-indigo-700 dark:text-indigo-200",
warning: "text-amber-700 dark:text-amber-100",
error: "text-rose-700 dark:text-rose-200",
success: "text-green-700 dark:text-green-200"
}, u = {
info: "text-indigo-800 dark:text-indigo-100",
warning: "text-amber-800 dark:text-amber-50",
error: "text-rose-800 dark:text-rose-100",
success: "text-green-800 dark:text-green-100"
}, l = {
info: "text-indigo-700 dark:text-indigo-200",
warning: "text-amber-700 dark:text-amber-100",
error: "text-rose-700 dark:text-rose-200",
success: "text-green-700 dark:text-green-200"
}, f = {
info: "ring-indigo-400 dark:ring-indigo-400 bg-indigo-100 text-indigo-800 hover:bg-indigo-200 focus:ring-indigo-600 focus:ring-offset-indigo-100 dark:bg-indigo-900 dark:text-indigo-100 dark:hover:bg-indigo-800 dark:focus:ring-indigo-400 dark:focus:ring-offset-indigo-900",
warning: "ring-amber-500 dark:ring-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200 focus:ring-amber-600 focus:ring-offset-amber-100 dark:bg-amber-700 dark:text-amber-50 dark:hover:bg-amber-600 dark:focus:ring-amber-400 dark:focus:ring-offset-amber-700",
error: "ring-rose-400 dark:ring-rose-300 bg-rose-100 text-rose-800 hover:bg-rose-200 focus:ring-rose-600 focus:ring-offset-rose-100 dark:bg-rose-900 dark:text-rose-100 dark:hover:bg-rose-800 dark:focus:ring-rose-400 dark:focus:ring-offset-rose-900",
success: "ring-green-600 dark:ring-green-600 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-600 focus:ring-offset-green-100 dark:bg-green-900 dark:text-green-100 dark:hover:bg-green-800 dark:focus:ring-green-400 dark:focus:ring-offset-green-900"
}, v = {
info: "text-indigo-700 hover:bg-indigo-200 focus:ring-indigo-600 focus:ring-offset-indigo-100 dark:text-indigo-200 dark:hover:bg-indigo-700 dark:focus:ring-indigo-300 dark:focus:ring-offset-indigo-900",
warning: "text-amber-700 hover:bg-amber-200 focus:ring-amber-600 focus:ring-offset-amber-100 dark:text-amber-100 dark:hover:bg-amber-600 dark:focus:ring-amber-400 dark:focus:ring-offset-amber-700",
error: "text-rose-700 hover:bg-rose-200 focus:ring-rose-600 focus:ring-offset-rose-100 dark:text-rose-200 dark:hover:bg-rose-700 dark:focus:ring-rose-300 dark:focus:ring-offset-rose-900",
success: "text-green-700 hover:bg-green-200 focus:ring-green-600 focus:ring-offset-green-100 dark:text-green-200 dark:hover:bg-green-700 dark:focus:ring-green-300 dark:focus:ring-offset-green-900"
};
return (x, w) => (d(), g("div", {
class: D(`rounded-md border-l-4 p-4 text-sm ${i[a.kind]}`)
}, [
m("div", $s, [
m("div", Ts, [
N(C(W), {
class: D(`h-4 w-4 ${s[a.kind]}`),
icon: o[a.kind],
"aria-hidden": "true"
}, null, 8, ["class", "icon"])
]),
m("div", _s, [
a.title || x.$slots.title ? (d(), g("h3", {
key: 0,
class: D(`mb-2 font-medium ${u[a.kind]}`)
}, [
E(x.$slots, "title", {}, () => [
X(S(a.title), 1)
])
], 2)) : O("", !0),
a.description || x.$slots.description ? (d(), g("div", {
key: 1,
class: D(`${l[a.kind]}`)
}, [
m("p", null, [
E(x.$slots, "description", {}, () => [
X(S(a.description), 1)
])
])
], 2)) : O("", !0),
x.$slots.details ? (d(), g(Y, { key: 2 }, [
m("button", {
class: D(`mt-3 -ml-2 rounded-md px-2 py-1.5 font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-hidden ${f[a.kind]}`),
onClick: w[0] || (w[0] = (T) => n.value = !n.value)
}, [
m("span", null, S(e.showDetailsLabel), 1),
N(C(W), {
icon: n.value ? C(Ea) : C(Me),
"aria-hidden": "true",
class: "ml-2 h-3 w-3"
}, null, 8, ["icon"])
], 2),
N(et, { name: "slide-down" }, {
default: A(() => [
te(m("div", {
class: D(`mt-2 ${l[a.kind]}`)
}, [
E(x.$slots, "details")
], 2), [
[Gt, n.value]
])
]),
_: 3
})
], 64)) : O("", !0),
e.primaryButtonLabel || e.secondaryButtonLabel ? (d(), g("div", Os, [
m("div", Ps, [
e.primaryButtonLabel ? (d(), g("button", {
key: 0,
class: D(`rounded-md px-2 py-1.5 text-sm font-medium ring-1 transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-hidden ${f[a.kind]}`),
type: "button",
onClick: w[1] || (w[1] = (T) => r("primaryClick"))
}, S(e.primaryButtonLabel), 3)) : O("", !0),
e.secondaryButtonLabel ? (d(), g("button", {
key: 1,
class: D([
`rounded-md px-2 py-1.5 text-sm font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-hidden ${f[a.kind]}`,
{ "ml-3": e.primaryButtonLabel }
]),
type: "button",
onClick: w[2] || (w[2] = (T) => r("secondaryClick"))
}, S(e.secondaryButtonLabel), 3)) : O("", !0)
])
])) : O("", !0)
]),
a.showCloseButton ? (d(), g("div", Ds, [
m("div", Ns, [
m("button", {
class: D(`inline-flex rounded-md p-1.5 focus:ring-2 focus:ring-offset-2 focus:outline-hidden ${v[a.kind]}`),
type: "button",
onClick: w[3] || (w[3] = (T) => r("close"))
}, [
m("span", As, S(a.closeAriaLabel), 1),
N(C(W), {
icon: C(ye),
class: "h-4 w-4",
"aria-hidden": "true"
}, null, 8, ["icon"])
], 2)
])
])) : O("", !0)
])
], 2));
}
}), xi = /* @__PURE__ */ R({
__name: "NeRoundedIcon",
props: {
kind: {},
customIcon: {},
customForegroundClasses: {},
customBackgroundClasses: {}
},
setup(e) {
const t = e, a = {
info: ir,
warning: fi,
error: ci,
success: nr
}, r = {
info: "bg-indigo-100 dark:bg-indigo-800",
warning: "bg-amber-100 dark:bg-amber-800",
error: "bg-rose-100 dark:bg-rose-800",
success: "bg-green-100 dark:bg-green-800"
}, n = {
info: "text-indigo-700 dark:text-indigo-50",
warning: "text-amber-700 dark:text-amber-50",
error: "text-rose-700 dark:text-rose-50",
success: "text-green-700 dark:text-green-50"
};
function i() {
return t.kind ? a[t.kind] : t.customIcon ? t.customIcon : [];
}
return (o, s) => (d(), g("div", {
class: D([
"flex h-10 w-10 items-center justify-center rounded-full",
o.kind ? r[o.kind] : o.customBackgroundClasses
])
}, [
N(C(W), {
class: D(["h-5 w-5", o.kind ? n[o.kind] : o.customForegroundClasses]),
icon: i(),
"aria-hidden": "true"
}, null, 8, ["class", "icon"])
], 2));
}
}), Is = { class: "fixed top-0 right-0 bottom-0 flex" }, Es = { class: "absolute top-0 right-full flex w-16 justify-center pt-5" }, Fs = { class: "sr-only" }, zs = { class: "w-full grow p-6" }, Rs = { key: 0 }, Ws = { class: "flex items-center justify-between" }, Bs = { class: "text-lg" }, Ys = { class: "sr-only" }, Us = { class: "pb-6" }, Lh = /* @__PURE__ */ R({
__name: "NeSideDrawer",
props: {
isShown: { type: Boolean, default: !1 },
title: { type: String, default: "" },
closeOnClickOutside: { type: Boolean, default: !1 },
closeAriaLabel: { type: String, default: "Close side drawer" }
},
emits: ["close", "show"],
setup(e, { emit: t }) {
const a = e, r = t;
U(
() => a.isShown,
() => {
a.isShown && r("show");
}
), Ee(() => {
window.addEventListener("keydown", o);
}), So(() => {
window.removeEventListener("keydown", o);
});
function n() {
r("close");
}
function i() {
a.closeOnClickOutside && n();
}
function o(s) {
s.key === "Escape" && n();
}
return (s, u) => (d(), F(C(hi), {
show: e.isShown,
as: "template"
}, {
default: A(() => [
N(C(vi), {
as: "div",
class: "relative z-100",
onClose: i
}, {
default: A(() => [
N(C(He), {
as: "template",
enter: "transition-opacity ease-linear duration-300",
"enter-from": "opacity-0",
"enter-to": "opacity-100",
leave: "transition-opacity ease-linear duration-300",
"leave-from": "opacity-100",
"leave-to": "opacity-0"
}, {
default: A(() => u[0] || (u[0] = [
m("div", { class: "fixed top-0 right-0 bottom-0 left-0 bg-gray-500/75 dark:bg-gray-700/75" }, null, -1)
])),
_: 1,
__: [0]
}),
m("div", Is, [
N(C(He), {
as: "template",
enter: "transition ease-in-out duration-300 transform",
"enter-from": "translate-x-full",
"enter-to": "translate-x-0",
leave: "transition ease-in-out duration-300 transform",
"leave-from": "translate-x-0",
"leave-to": "translate-x-full"
}, {
default: A(() => [
N(C(pi), { class: "3xl:w-[35rem] relative ml-16 flex w-[80vw] flex-1 overflow-y-auto bg-gray-50 text-gray-700 shadow-[0px_20px_40px_0_rgba(0,0,0,0.2)] sm:w-100 lg:w-120 dark:bg-gray-900 dark:text-gray-100 dark:shadow-[0px_20px_40px_0_rgba(0,0,0,0.6)]" }, {
default: A(() => [
e.title ? O("", !0) : (d(), F(C(He), {
key: 0,
as: "template",
enter: "ease-in-out duration-300",
"enter-from": "opacity-0",
"enter-to": "opacity-100",
leave: "ease-in-out duration-300",
"leave-from": "opacity-100",
"leave-to": "opacity-0"
}, {
default: A(() => [
m("div", Es, [
m("button", {
class: "-m-2.5 p-2.5",
type: "button",
onClick: n
}, [
m("span", Fs, S(a.closeAriaLabel), 1),
N(C(W), {
icon: C(ye),
"aria-hidden": "true",
class: "h-6 w-6 text-gray-600 dark:text-white"
}, null, 8, ["icon"])
])
])
]),
_: 1
})),
m("div", zs, [
e.title ? (d(), g("div", Rs, [
m("div", Ws, [
m("div", Bs, S(a.title), 1),
m("button", {
class: "focus:ring-primary-500 dark:focus:ring-primary-300 inline-flex rounded-md p-1.5 text-gray-700 hover:bg-gray-200 focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:outline-hidden dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900",
type: "button",
onClick: n
}, [
m("span", Ys, S(a.closeAriaLabel), 1),
N(C(W), {
icon: C(ye),
"aria-hidden": "true",
class: "h-4 w-4"
}, null, 8, ["icon"])
])
]),
u[1] || (u[1] = m("hr", { class: "my-6 border-gray-200 dark:border-gray-700" }, null, -1))
])) : O("", !0),
m("div", Us, [
E(s.$slots, "default")
])
])
]),
_: 3
})
]),
_: 3
})
])
]),
_: 3
})
]),
_: 3
}, 8, ["show"]));
}
}), qs = {
type: "button",
class: "inline-flex"
}, js = /* @__PURE__ */ R({
__name: "NeTooltip",
props: {
placement: {
type: String,
default: "top"
},
triggerEvent: {
type: String,
default: "click"
},
interactive: {
type: Boolean,
default: !0
}
},
setup(e) {
return (t, a) => (d(), F(C(ts), {
interactive: e.interactive,
placement: e.placement,
trigger: e.triggerEvent,
theme: "tailwind"
}, {
content: A(() => [
E(t.$slots, "content")
]),
default: A(() => [
E(t.$slots, "trigger", {}, () => [
m("button", qs, [
N(C(W), {
icon: C(ir),
class: "h-4 w-4 text-indigo-500 dark:text-indigo-300"
}, null, 8, ["icon"])
])
])
]),
_: 3
}, 8, ["interactive", "placement", "trigger"]));
}
}), Vs = {
key: 0,
class: "text-xs"
}, ki = /* @__PURE__ */ R({
__name: "NeBadge",
props: {
/**
* Size of the badge, can be 'sm' or 'xs', defaults to 'sm'.
*/
size: {
type: String,
default: "sm"
},
/**
* Badge kind, defaults to 'secondary'
*/
kind: {
type: String,
default: "secondary"
},
/**
* Should the component be rounded or not.
*/
rounded: {
type: Boolean,
default: !0
},
/**
* Text to display inside the badge.
*/
text: {
type: String,
required: !0
},
/**
* Label below the text.
*/
label: {
type: String,
required: !1,
default: void 0
},
/**
* Icon to display inside the badge.
*/
icon: {
type: Object,
required: !1,
default: void 0
},
/**
* Should the icon be clickable or not
*/
iconClickable: {
type: Boolean,
default: !1
},
/**
* Position of the icon inside the badge.
*/
iconPosition: {
type: String,
default: "left"
},
/**
* Tailwind color classes to apply if kind = 'custom'. E.g.: 'bg-sky-100 text-sky-700 dark:bg-sky-700 dark:text-sky-50'
*/
customColorClasses: {
type: String,
default: ""
}
},
emits: ["iconClick"],
setup(e, { emit: t }) {
const a = e, r = t, n = I(() => {
switch (a.size) {
case "xs":
return "text-xs";
default:
return "text-sm";
}
}), i = I(() => a.label ? a.icon ? a.iconPosition == "left" ? "pl-3 pr-4" : "pl-4 pr-3" : "px-4" : "px-2.5"), o = I(() => a.label ? "gap-x-2" : "gap-x-1"), s = I(() => {
switch (a.kind) {
case "primary":
return "bg-primary-100 text-primary-800 dark:bg-primary-700 dark:text-primary-100";
case "tertiary":
return "bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100";
case "success":
return "bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-50";
case "warning":
return "bg-amber-100 text-amber-800 dark:bg-amber-700 dark:text-amber-50";
case "error":
return "bg-rose-100 text-rose-800 dark:bg-rose-700 dark:text-rose-100";
case "info":
return "bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100";
case "custom":
return `${a.customColorClasses}`;
default:
return "bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-gray-100";
}
}), u = I(() => {
switch (a.kind) {
case "primary":
return "hover:bg-primary-200 hover:dark:bg-primary-600";
case "tertiary":
return "hover:bg-indigo-200 hover:dark:bg-indigo-500";
case "success":
return "hover:bg-green-200 hover:dark:bg-green-600";
case "warning":
return "hover:bg-amber-200 hover:dark:bg-amber-600";
case "error":
return "hover:bg-rose-200 hover:dark:bg-rose-600";
case "info":
return "hover:bg-blue-200 hover:dark:bg-blue-600";
default:
return "hover:bg-gray-300 hover:dark:bg-gray-500";
}
});
function l() {
r("iconClick");
}
return (f, v) => (d(), g("div", {
class: D([[
n.value,
o.value,
i.value,
s.value,
e.rounded ? "rounded-full" : "rounded"
], "flex w-fit items-center py-0.5 font-medium"])
}, [
e.icon ? (d(), g(Y, { key: 0 }, [
e.iconClickable ? (d(), g("button", {
key: 0,
type: "button",
class: D([e.iconPosition == "right" ? "order-1" : "", u.value, "flex", "rounded"]),
onClick: l
}, [
N(C(W), {
icon: e.icon,
class: "h-4 w-4"
}, null, 8, ["icon"])
], 2)) : (d(), F(C(W), {
key: 1,
class: D([[e.iconPosition == "right" ? "order-1" : ""], "h-4 w-4"]),
icon: e.icon
}, null, 8, ["class", "icon"]))
], 64)) : O("", !0),
m("div", null, [
m("p", null, S(e.text), 1),
e.label ? (d(), g("p", Vs, S(e.label), 1)) : O("", !0)
])
], 2));
}
}), Hs = { class: "relative flex items-start" }, Xs = { class: "flex h-6 items-center" }, Gs = ["id", "aria-describedby", "disabled"], Ks = { class: "ml-3 text-sm leading-6" }, Zs = ["for"], Qs = {
key: 0,
class: "ml-2"
}, Js = ["id"], el = {
key: 0,
class: "mt-2 text-sm text-rose-700 dark:text-rose-400"
}, Ih = /* @__PURE__ */ R({
__name: "NeCheckbox",
props: {
modelValue: {
type: Boolean,
default: !1
},
id: {
type: String,
default: ""
},
label: {
type: String,
default: ""
},
disableSelectOnLabel: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
invalidMessage: {
type: String,
default: ""
}
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const a = e, r = t, n = I(() => a.id ? a.id : ze()), i = I({
get() {
return a.modelValue;
},
set(o) {
r("update:modelValue", o);
}
});
return (o, s) => (d(), g("div", null, [
m("div", Hs, [
m("div", Xs, [
te(m("input", Fe({
id: n.value,
"onUpdate:modelValue": s[0] || (s[0] = (u) => i.value = u),
"aria-describedby": n.value + "-description",
disabled: e.disabled,
class: "text-primary-700 focus:ring-primary-500 dark:text-primary-500 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950 h-5 w-5 rounded border-gray-300 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 sm:h-4 sm:w-4 dark:border-gray-500",
type: "checkbox"
}, o.$attrs), null, 16, Gs), [
[ar, i.value]
])
]),
m("div", Ks, [
m("label", {
class: D([
"font-medium text-gray-700 dark:text-gray-50",
{ "cursor-not-allowed opacity-50": e.disabled }
]),
for: e.disableSelectOnLabel ? "" : n.value
}, [
E(o.$slots, "default", {}, () => [
X(S(e.label), 1)
])
], 10, Zs),
o.$slots.tooltip ? (d(), g("span", Qs, [
E(o.$slots, "tooltip")
])) : O("", !0),
o.$slots.description ? (d(), g("div", {
key: 1,
id: n.value + "-description",
class: "text-gray-500 dark:text-gray-400"
}, [
E(o.$slots, "description")
], 8, Js)) : O("", !0)
])
]),
e.invalidMessage ? (d(), g("p", el, S(e.invalidMessage), 1)) : O("", !0)
]));
}
}), tl = /* @__PURE__ */ R({
__name: "NeTableHead",
setup(e) {
const t = Ae("cardBreakpoint", "md"), a = {
sm: "sm:table-header-group",
md: "md:table-header-group",
lg: "lg:table-header-group",
xl: "xl:table-header-group",
"2xl": "2xl:table-header-group"
};
return (r, n) => (d(), g("thead", {
class: D([
"hidden bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50",
a[C(t)]
])
}, [
m("tr", null, [
E(r.$slots, "default")
])
], 2));
}
}), al = ["aria-sort"], rl = /* @__PURE__ */ R({
__name: "NeTableHeadCell",
props: {
columnKey: {
type: String,
default: ""
},
sortable: {
type: Boolean,
default: !1
}
},
emits: ["sort"],
setup(e, { emit: t }) {
const a = e, r = t, n = Ae("sortKey", ""), i = Ae("sortDescending", !1), o = I(() => {
const u = re(n), l = re(i);
return a.sortable && a.columnKey === u ? l ? "descending" : "ascending" : "none";
}), s = () => {
const u = re(n), l = re(i);
a.columnKey === u ? r("sort", { key: a.columnKey, descending: !l }) : r("sort", { key: a.columnKey, descending: !1 });
};
return (u, l) => (d(), g("th", {
scope: "col",
class: "px-6 py-3 font-medium",
"aria-sort": o.value
}, [
e.sortable ? (d(), g("button", {
key: 0,
class: "group flex cursor-pointer items-center gap-2",
onClick: s
}, [
E(u.$slots, "default"),
a.columnKey === C(n) ? (d(), F(C(W), {
key: 0,
icon: C(i) ? C(Ao) : C(Lo),
class: "h-4 w-4 text-gray-600 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-gray-50",
"aria-hidden": "true"
}, null, 8, ["icon"])) : (d(), F(C(W), {
key: 1,
icon: C(Io),
class: "h-4 w-4 text-gray-600 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-gray-50",
"aria-hidden": "true"
}, null, 8, ["icon"]))
])) : E(u.$slots, "default", { key: 1 })
], 8, al));
}
}), nl = /* @__PURE__ */ R({
__name: "NeTableBody",
setup(e) {
const t = Ae("cardBreakpoint", "md"), a = {
sm: "sm:table-row-group",
md: "md:table-row-group",
lg: "lg:table-row-group",
xl: "xl:table-row-group",
"2xl": "2xl:table-row-group"
};
return (r, n) => (d(), g("tbody", {
class: D(["block divide-y divide-gray-300 dark:divide-gray-600", a[C(t)]])
}, [
E(r.$slots, "default")
], 2));
}
}), il = /* @__PURE__ */ R({
__name: "NeTableRow",
setup(e) {
const t = Ae("cardBreakpoint", "md"), a = {
sm: "sm:table-row",
md: "md:table-row",
lg: "lg:table-row",
xl: "xl:table-row",
"2xl": "2xl:table-row"
};
return (r, n) => (d(), g("tr", {
class: D([
"grid",
"transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800",
a[C(t)]
])
}, [
E(r.$slots, "default")
], 2));
}
}), ol = ["data-label"], sl = /* @__PURE__ */ R({
__name: "NeTableCell",
props: {
dataLabel: {
// this attribute replaces table header in mobile viewport and should always have a value. The only exception is when the cell contains the empty state of the table
type: String,
default: ""
}
},
setup(e) {
const t = Ae("cardBreakpoint", "md"), a = {
sm: "sm:table-cell",
md: "md:table-cell",
lg: "lg:table-cell",
xl: "xl:table-cell",
"2xl": "2xl:table-cell"
}, r = {
sm: "sm:hidden",
md: "md:hidden",
lg: "lg:hidden",
xl: "xl:hidden",
"2xl": "2xl:hidden"
};
return (n, i) => (d(), g("td", {
"data-label": e.dataLabel,
class: D(["grid px-6 py-4", a[C(t)], { "grid-cols-2": e.dataLabel }])
}, [
e.dataLabel ? (d(), g("span", {
key: 0,
class: D(["font-medium text-gray-900 dark:text-gray-50", r[C(t)]])
}, S(e.dataLabel), 3)) : O("", !0),
E(n.$slots, "default")
], 10, ol));
}
}), ll = /* @__PURE__ */ R({
__name: "NeTableSkeleton",
props: {
rows: {
type: Number,
required: !0
},
columns: {
type: Number,
required: !0
},
cardBreakpoint: {
type: String,
default: "md"
}
},
setup(e) {
return (t, a) => (d(), g(Y, null, [
N(tl, { "card-breakpoint": e.cardBreakpoint }, {
default: A(() => [
(d(!0), g(Y, null, G(e.columns, (r) => (d(), F(rl, { key: r }, {
default: A(() => [
N(za, { size: "lg" })
]),
_: 2
}, 1024))), 128))
]),
_: 1
}, 8, ["card-breakpoint"]),
N(nl, { "card-breakpoint": e.cardBreakpoint }, {
default: A(() => [
(d(!0), g(Y, null, G(e.rows, (r) => (d(), F(il, {
key: r,
"card-breakpoint": e.cardBreakpoint
}, {
default: A(() => [
(d(!0), g(Y, null, G(e.columns, (n) => (d(), F(sl, {
key: n,
"card-breakpoint": e.cardBreakpoint,
"data-label": ""
}, {
default: A(() => [
N(za, { size: "lg" })
]),
_: 2
}, 1032, ["card-breakpoint"]))), 128))
]),
_: 2
}, 1032, ["card-breakpoint"]))), 128))
]),
_: 1
}, 8, ["card-breakpoint"])
], 64));
}
}), ul = { class: "overflow-x-auto rounded-lg border border-gray-300 shadow-sm dark:border-gray-600" }, dl = ["aria-label"], cl = { key: 0 }, Eh = /* @__PURE__ */ R({
__name: "NeTable",
props: {
ariaLabel: {},
cardBreakpoint: { default: "md" },
loading: { type: Boolean, default: !1 },
skeletonRows: { default: 8 },
skeletonColumns: { default: 4 },
sortKey: { default: "" },
sortDescending: { type: Boolean, default: !1 }
},
setup(e) {
ka(
"cardBreakpoint",
I(() => e.cardBreakpoint)
), ka(
"sortKey",
I(() => e.sortKey)
), ka(
"sortDescending",
I(() => e.sortDescending)
);
const t = {
sm: "sm:table sm:divide-y sm:divide-gray-300 sm:dark:divide-gray-600",
md: "md:table md:divide-y md:divide-gray-300 md:dark:divide-gray-600",
lg: "lg:table lg:divide-y lg:divide-gray-300 lg:dark:divide-gray-600",
xl: "xl:table xl:divide-y xl:divide-gray-300 xl:dark:divide-gray-600",
"2xl": "2xl:table 2xl:divide-y 2xl:divide-gray-300 2xl:dark:divide-gray-600"
};
return (a, r) => (d(), g("div", ul, [
m("table", {
role: "grid",
"aria-label": a.ariaLabel,
class: D([
"grid w-full table-auto bg-white text-left text-sm font-normal text-gray-700 dark:bg-gray-950 dark:text-gray-200",
t[a.cardBreakpoint]
])
}, [
a.loading ? (d(), F(ll, {
key: 0,
rows: a.skeletonRows,
columns: a.skeletonColumns,
"card-breakpoint": a.cardBreakpoint
}, null, 8, ["rows", "columns", "card-breakpoint"])) : E(a.$slots, "default", { key: 1 })
], 10, dl),
a.$slots.paginator ? (d(), g("div", cl, [
E(a.$slots, "paginator")
])) : O("", !0)
]));
}
}), fl = {
key: 0,
class: "ml-2"
}, ml = {
key: 0,
class: "ml-2 font-normal"
}, gl = { class: "relative" }, hl = { class: "flex items-center truncate" }, vl = {
key: 1,
class: /* @__PURE__ */ D(["ml-2.5 truncate text-gray-500 dark:text-gray-400"])
}, pl = {
key: 0,
class: /* @__PURE__ */ D([
"text-primary-700 dark:text-primary-500 absolute inset-y-0 right-0 flex items-center pr-4"
])
}, yl = {
key: 0,
class: "text-gray-700 dark:text-gray-50"
}, bl = "ring-gray-300 dark:ring-gray-600 focus:ring-primary-500 dark:focus:ring-primary-300", xl = "ring-rose-300 focus:ring-rose-500 ring-rose-700 focus:ring-rose-500", wa = "mt-2 text-sm", Fh = /* @__PURE__ */ R({
__name: "NeCombobox",
props: {
modelValue: {},
options: { default: () => [] },
label: { default: "" },
placeholder: { default: "" },
helperText: { default: "" },
invalidMessage: { default: "" },
maxOptionsShown: { default: 50 },
multiple: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
showOptionsType: { type: Boolean, default: !0 },
optional: { type: Boolean, default: !1 },
selectedLabel: {},
showSelectedLabel: { type: Boolean, default: !0 },
noResultsLabel: {},
limitedOptionsLabel: {},
noOptionsLabel: {},
acceptUserInput: { type: Boolean, default: !1 },
userInputLabel: {},
optionalLabel: {}
},
emits: ["update:modelValue"],
setup(e, { expose: t, emit: a }) {
const r = e, n = a;
t({
focus: b
});
const i = z(""), o = z(r.multiple ? [] : null), s = z(!1), u = z(null), l = z([]), f = I(() => r.options.concat(l.value)), v = I(() => {
if (!i.value)
return x(f.value);
let c = f.value.filter((h) => (
// search in option label
h.label.trim().toLowerCase().includes(i.value.trim().toLowerCase()) || // search in option description
h.description && h.description.trim().toLowerCase().includes(i.value.trim().toLowerCase())
));
if (r.acceptUserInput && i.value.trim()) {
const h = i.value.trim();
c.find((M) => M.label === h) || c.push({
id: h,
label: h,
description: r.userInputLabel
});
}
return c.length ? (c = x(c), c) : [{ id: "no_results", label: r.noResultsLabel, disabled: !0 }];
});
U(o, () => {
r.multiple ? (Yt(o.value, "id").length !== o.value.length && (o.value = Yt(o.value, "id")), n("update:modelValue", o.value)) : o.value ? n("update:modelValue", o.value.id) : n("update:modelValue", "");
}), U(
() => r.options,
() => {
r.multiple ? k() : $();
}
), Ee(() => {
r.multiple ? k() : $();
}), U(
() => r.modelValue,
() => {
r.multiple ? k() : $();
}
);
function x(c) {
if (!c.length && !r.acceptUserInput)
return [{ id: "no_option", label: r.noOptionsLabel, disabled: !0 }];
if (c.length <= r.maxOptionsShown)
return c;
if (c = c.slice(0, r.maxOptionsShown), c.push({ id: "limited_options_hint", label: r.limitedOptionsLabel, disabled: !0 }), r.multiple) {
if (o.value.length)
for (const h of o.value)
c.find(
(M) => M.id === h.id
) || c.unshift(h);
} else
o.value && (c.find(
(_) => {
var M;
return _.id === ((M = o.value) == null ? void 0 : M.id);
}
) || c.unshift(o.value));
return c;
}
function w() {
i.value = "", s.value = !1;
}
function T(c) {
r.multiple || (s.value = !1), r.acceptUserInput && (f.value.find((_) => _.id === c.id) || l.value.push({
id: c.id,
label: c.label,
description: r.userInputLabel
}));
}
function $() {
const c = f.value.find((h) => h.id === r.modelValue);
if (c)
o.value = c;
else if (r.acceptUserInput && r.modelValue) {
const h = {
id: r.modelValue,
label: r.modelValue,
description: r.userInputLabel
};
l.value.push(h), o.value = h;
}
}
function k() {
const c = [];
for (const h of r.modelValue) {
const _ = f.value.find((M) => M.id === h.id);
_ ? c.push(_) : r.acceptUserInput && (h.description || (h.description = r.userInputLabel), l.value.push(h), c.push(h));
}
ur(o.value, c) || (o.value = c);
}
function b() {
var c, h;
(h = (c = u.value) == null ? void 0 : c.querySelector("input")) == null || h.focus();
}
function y() {
s.value = !0;
}
function p(c) {
o.value = o.value.filter(
(h) => h.id !== c.id
);
}
return yi(u, () => w()), (c, h) => (d(