@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,422 lines (1,421 loc) • 312 kB
JavaScript
import { defineComponent as W, createElementBlock as h, openBlock as d, createElementVNode as g, Fragment as Y, renderList as G, normalizeStyle as Le, normalizeClass as D, computed as E, createCommentVNode as O, renderSlot as L, createBlock as F, ref as z, onMounted as Ee, watch as j, createVNode as N, withCtx as A, createTextVNode as X, toDisplayString as M, unref as C, Transition as et, withDirectives as ee, vShow as Gt, onUnmounted as Co, mergeProps as Fe, vModelCheckbox as tr, inject as Ae, toValue as re, provide as ka, Teleport as Kt, useSlots as ar, vModelRadio as Ve, vModelSelect as Mo, useAttrs as So, normalizeProps as $o, guardReactiveProps as To, withModifiers as ce, resolveDynamicComponent as _o, nextTick as Oo, mergeModels as di, useModel as La, watchEffect as Po } from "vue";
import { FontAwesomeIcon as R } from "@fortawesome/vue-fontawesome";
import { faChevronUp as Ea, faChevronDown as Me, faFileArrowUp as Do, faCircleCheck as rr, faCircleXmark as ci, faTriangleExclamation as fi, faCircleInfo as nr, faXmark as Se, faSortDown as No, faSortUp as Ao, faSort as Io, faCheck as mi, faEllipsisVertical as Lo, faChevronLeft as Eo, faChevronRight as Fo, faCircleExclamation as gi, faEye as zo, faEyeSlash as Ro, faMagnifyingGlass as Wo, faUser as Bo } from "@fortawesome/free-solid-svg-icons";
import { TransitionRoot as hi, Dialog as vi, TransitionChild as He, DialogPanel as pi, Combobox as Yo, ComboboxLabel as Uo, ComboboxInput as qo, ComboboxButton as jo, ComboboxOptions as Vo, ComboboxOption as Ho, Menu as ir, MenuButton as or, MenuItems as sr, MenuItem as Xe, Listbox as Xo, ListboxLabel as Go, ListboxButton as Ko, ListboxOptions as Zo, ListboxOption as Qo, DialogTitle as Jo } from "@headlessui/vue";
import { Tippy as es } from "vue-tippy";
import { v4 as ze } from "uuid";
import { onClickOutside as yi, useOffsetPagination as ts } from "@vueuse/core";
import { uniqBy as Yt, isEqual as lr, range as _r, round as ne } from "lodash-es";
const as = { class: "flex animate-pulse space-x-4" }, rs = { class: "flex-1 space-y-3" }, Fa = /* @__PURE__ */ W({
__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(), h("div", as, [
g("div", rs, [
(d(!0), h(Y, null, G(t.lines, (i) => (d(), h("div", {
key: i,
class: D(`${a[t.size]} rounded bg-gray-300 dark:bg-gray-700`),
style: Le(t.lines > 1 ? `width: ${65 + Math.round(Math.random() * 35)}%` : "")
}, null, 6))), 128))
])
]));
}
}), Or = /* @__PURE__ */ W({
__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 = E(() => a[t.size]), i = E(() => r[t.color]);
return (o, s) => (d(), h("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] = [
g("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),
g("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));
}
}), ns = ["disabled"], is = { class: "flex items-center justify-center" }, os = {
key: 0,
class: "mr-2"
}, ss = {
key: 1,
class: "ml-2"
}, we = /* @__PURE__ */ W({
__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 = E(() => t.loading && t.loadingPosition === "prefix"), s = E(() => t.loading && t.loadingPosition === "suffix");
return (u, l) => (d(), h("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"
}, [
g("div", is, [
u.$slots.prefix || o.value ? (d(), h("div", os, [
o.value ? (d(), F(Or, {
key: 0,
color: n[e.kind],
size: i[e.size]
}, null, 8, ["color", "size"])) : L(u.$slots, "prefix", { key: 1 })
])) : O("", !0),
L(u.$slots, "default"),
u.$slots.suffix || s.value ? (d(), h("div", ss, [
s.value ? (d(), F(Or, {
key: 0,
color: n[e.kind],
size: i[e.size]
}, null, 8, ["color", "size"])) : L(u.$slots, "suffix", { key: 1 })
])) : O("", !0)
])
], 10, ns));
}
}), ls = { class: "text-sm" }, us = {
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"
}, ds = { class: "mt-4" }, _h = /* @__PURE__ */ W({
__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;
}), j(
() => a.isExpanded,
() => {
n.value != a.isExpanded && (n.value = a.isExpanded);
}
);
function i() {
n.value = !n.value, r("setExpanded", n.value);
}
return (o, s) => (d(), h("div", ls, [
g("div", {
class: D(["cursor-pointer", e.fullWidth ? "block" : "inline-block"]),
onClick: i
}, [
L(o.$slots, "trigger", {}, () => [
e.fullWidth ? (d(), h("button", us, [
g("span", null, M(e.label), 1),
N(C(R), {
icon: n.value ? C(Ea) : C(Me),
class: "h-3 w-3",
"aria-hidden": "true"
}, null, 8, ["icon"])
])) : (d(), F(we, {
key: 0,
kind: "tertiary",
size: "sm",
class: "-ml-2"
}, {
suffix: A(() => [
N(C(R), {
icon: n.value ? C(Ea) : C(Me),
class: "h-3 w-3",
"aria-hidden": "true"
}, null, 8, ["icon"])
]),
default: A(() => [
X(" " + M(e.label), 1)
]),
_: 1
}))
])
], 2),
N(et, { name: "slide-down" }, {
default: A(() => [
ee(g("div", ds, [
L(o.$slots, "default")
], 512), [
[Gt, n.value]
])
]),
_: 3
})
]));
}
}), cs = { class: "text-sm" }, fs = {
key: 0,
class: "mb-1 flex justify-between font-medium text-gray-700 dark:text-gray-200"
}, ms = { key: 0 }, gs = /* @__PURE__ */ W({
__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 = E(() => t.progress < 0 ? 0 : t.progress > 100 ? 100 : t.progress);
return (i, o) => (d(), h("div", cs, [
e.label || e.showProgress ? (d(), h("div", fs, [
g("span", null, M(e.label), 1),
e.showProgress ? (d(), h("span", ms, M(n.value) + "%", 1)) : O("", !0)
])) : O("", !0),
g("div", {
class: D(`w-full overflow-hidden rounded-full bg-gray-300 dark:bg-gray-600 ${a[e.size]}`)
}, [
e.indeterminate ? (d(), h("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(), h("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: Le({ 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"
}, Ms = ["accept"], Ss = {
key: 1,
class: "mt-2 text-rose-700 dark:text-rose-400"
}, Oh = /* @__PURE__ */ W({
__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 = E({
get() {
return a.modelValue;
},
set(l) {
r("update:modelValue", l);
}
}), i = E(() => 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 c = [];
if ((v = l.dataTransfer) != null && v.items) {
Object.values(l.dataTransfer.items).forEach((T) => {
T.kind === "file" && c.push(T.getAsFile());
});
const w = c[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, c) => (d(), h("div", hs, [
g("div", {
onChange: o,
onDragover: u,
onDrop: s
}, [
l.label ? (d(), h("label", vs, [
g("span", ps, M(l.label), 1)
])) : O("", !0),
g("div", ys, [
g("label", bs, [
g("div", xs, [
N(C(R), {
icon: C(Do),
class: "mb-4 h-8 w-8"
}, null, 8, ["icon"]),
n.value ? (d(), h("p", Cs, M(i.value), 1)) : (d(), h("div", ks, [
g("p", ws, [
g("span", null, M(l.dropzoneLabel), 1)
]),
L(l.$slots, "default")
]))
]),
g("input", {
class: "hidden",
type: "file",
accept: l.accept
}, null, 8, Ms),
l.showProgress ? (d(), F(gs, {
key: 0,
indeterminate: !l.progress,
progress: l.progress,
class: "w-full px-6 pb-6"
}, null, 8, ["indeterminate", "progress"])) : O("", !0)
])
]),
l.invalidMessage ? (d(), h("p", Ss, M(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" }, Is = /* @__PURE__ */ W({
__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: nr,
warning: fi,
error: ci,
success: rr
}, 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"
}, c = {
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(), h("div", {
class: D(`rounded-md border-l-4 p-4 text-sm ${i[a.kind]}`)
}, [
g("div", $s, [
g("div", Ts, [
N(C(R), {
class: D(`h-4 w-4 ${s[a.kind]}`),
icon: o[a.kind],
"aria-hidden": "true"
}, null, 8, ["class", "icon"])
]),
g("div", _s, [
a.title || x.$slots.title ? (d(), h("h3", {
key: 0,
class: D(`mb-2 font-medium ${u[a.kind]}`)
}, [
L(x.$slots, "title", {}, () => [
X(M(a.title), 1)
])
], 2)) : O("", !0),
a.description || x.$slots.description ? (d(), h("div", {
key: 1,
class: D(`${l[a.kind]}`)
}, [
g("p", null, [
L(x.$slots, "description", {}, () => [
X(M(a.description), 1)
])
])
], 2)) : O("", !0),
x.$slots.details ? (d(), h(Y, { key: 2 }, [
g("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 ${c[a.kind]}`),
onClick: w[0] || (w[0] = (T) => n.value = !n.value)
}, [
g("span", null, M(e.showDetailsLabel), 1),
N(C(R), {
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(() => [
ee(g("div", {
class: D(`mt-2 ${l[a.kind]}`)
}, [
L(x.$slots, "details")
], 2), [
[Gt, n.value]
])
]),
_: 3
})
], 64)) : O("", !0),
e.primaryButtonLabel || e.secondaryButtonLabel ? (d(), h("div", Os, [
g("div", Ps, [
e.primaryButtonLabel ? (d(), h("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 ${c[a.kind]}`),
type: "button",
onClick: w[1] || (w[1] = (T) => r("primaryClick"))
}, M(e.primaryButtonLabel), 3)) : O("", !0),
e.secondaryButtonLabel ? (d(), h("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 ${c[a.kind]}`,
{ "ml-3": e.primaryButtonLabel }
]),
type: "button",
onClick: w[2] || (w[2] = (T) => r("secondaryClick"))
}, M(e.secondaryButtonLabel), 3)) : O("", !0)
])
])) : O("", !0)
]),
a.showCloseButton ? (d(), h("div", Ds, [
g("div", Ns, [
g("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"))
}, [
g("span", As, M(a.closeAriaLabel), 1),
N(C(R), {
icon: C(Se),
class: "h-4 w-4",
"aria-hidden": "true"
}, null, 8, ["icon"])
], 2)
])
])) : O("", !0)
])
], 2));
}
}), bi = /* @__PURE__ */ W({
__name: "NeRoundedIcon",
props: {
kind: {},
customIcon: {},
customForegroundClasses: {},
customBackgroundClasses: {}
},
setup(e) {
const t = e, a = {
info: nr,
warning: fi,
error: ci,
success: rr
}, 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(), h("div", {
class: D([
"flex h-10 w-10 items-center justify-center rounded-full",
o.kind ? r[o.kind] : o.customBackgroundClasses
])
}, [
N(C(R), {
class: D(["h-5 w-5", o.kind ? n[o.kind] : o.customForegroundClasses]),
icon: i(),
"aria-hidden": "true"
}, null, 8, ["class", "icon"])
], 2));
}
}), Ls = { 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" }, Ph = /* @__PURE__ */ W({
__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"],
setup(e, { emit: t }) {
const a = e, r = t;
Ee(() => {
window.addEventListener("keydown", o);
}), Co(() => {
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] = [
g("div", { class: "fixed top-0 right-0 bottom-0 left-0 bg-gray-500/75 dark:bg-gray-700/75" }, null, -1)
])),
_: 1,
__: [0]
}),
g("div", Ls, [
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(() => [
g("div", Es, [
g("button", {
class: "-m-2.5 p-2.5",
type: "button",
onClick: n
}, [
g("span", Fs, M(a.closeAriaLabel), 1),
N(C(R), {
icon: C(Se),
"aria-hidden": "true",
class: "h-6 w-6 text-gray-600 dark:text-white"
}, null, 8, ["icon"])
])
])
]),
_: 1
})),
g("div", zs, [
e.title ? (d(), h("div", Rs, [
g("div", Ws, [
g("div", Bs, M(a.title), 1),
g("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
}, [
g("span", Ys, M(a.closeAriaLabel), 1),
N(C(R), {
icon: C(Se),
"aria-hidden": "true",
class: "h-4 w-4"
}, null, 8, ["icon"])
])
]),
u[1] || (u[1] = g("hr", { class: "my-6 border-gray-200 dark:border-gray-700" }, null, -1))
])) : O("", !0),
g("div", Us, [
L(s.$slots, "default")
])
])
]),
_: 3
})
]),
_: 3
})
])
]),
_: 3
})
]),
_: 3
}, 8, ["show"]));
}
}), qs = {
type: "button",
class: "inline-flex"
}, js = /* @__PURE__ */ W({
__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(es), {
interactive: e.interactive,
placement: e.placement,
trigger: e.triggerEvent,
theme: "tailwind"
}, {
content: A(() => [
L(t.$slots, "content")
]),
default: A(() => [
g("button", qs, [
L(t.$slots, "trigger", {}, () => [
N(C(R), {
icon: C(nr),
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"
}, xi = /* @__PURE__ */ W({
__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 = E(() => {
switch (a.size) {
case "xs":
return "text-xs";
default:
return "text-sm";
}
}), i = E(() => a.label ? a.icon ? a.iconPosition == "left" ? "pl-3 pr-4" : "pl-4 pr-3" : "px-4" : "px-2.5"), o = E(() => a.label ? "gap-x-2" : "gap-x-1"), s = E(() => {
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 = E(() => {
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 (c, v) => (d(), h("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(), h(Y, { key: 0 }, [
e.iconClickable ? (d(), h("button", {
key: 0,
type: "button",
class: D([e.iconPosition == "right" ? "order-1" : "", u.value, "flex", "rounded"]),
onClick: l
}, [
N(C(R), {
icon: e.icon,
class: "h-4 w-4"
}, null, 8, ["icon"])
], 2)) : (d(), F(C(R), {
key: 1,
class: D([[e.iconPosition == "right" ? "order-1" : ""], "h-4 w-4"]),
icon: e.icon
}, null, 8, ["class", "icon"]))
], 64)) : O("", !0),
g("div", null, [
g("p", null, M(e.text), 1),
e.label ? (d(), h("p", Vs, M(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"
}, Dh = /* @__PURE__ */ W({
__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 = E(() => a.id ? a.id : ze()), i = E({
get() {
return a.modelValue;
},
set(o) {
r("update:modelValue", o);
}
});
return (o, s) => (d(), h("div", null, [
g("div", Hs, [
g("div", Xs, [
ee(g("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), [
[tr, i.value]
])
]),
g("div", Ks, [
g("label", {
class: D([
"font-medium text-gray-700 dark:text-gray-50",
{ "cursor-not-allowed opacity-50": e.disabled }
]),
for: e.disableSelectOnLabel ? "" : n.value
}, [
L(o.$slots, "default", {}, () => [
X(M(e.label), 1)
])
], 10, Zs),
o.$slots.tooltip ? (d(), h("span", Qs, [
L(o.$slots, "tooltip")
])) : O("", !0),
o.$slots.description ? (d(), h("div", {
key: 1,
id: n.value + "-description",
class: "text-gray-500 dark:text-gray-400"
}, [
L(o.$slots, "description")
], 8, Js)) : O("", !0)
])
]),
e.invalidMessage ? (d(), h("p", el, M(e.invalidMessage), 1)) : O("", !0)
]));
}
}), tl = /* @__PURE__ */ W({
__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(), h("thead", {
class: D([
"hidden bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50",
a[C(t)]
])
}, [
g("tr", null, [
L(r.$slots, "default")
])
], 2));
}
}), al = ["aria-sort"], rl = /* @__PURE__ */ W({
__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 = E(() => {
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(), h("th", {
scope: "col",
class: "px-6 py-3 font-medium",
"aria-sort": o.value
}, [
e.sortable ? (d(), h("button", {
key: 0,
class: "group flex cursor-pointer items-center gap-2",
onClick: s
}, [
L(u.$slots, "default"),
a.columnKey === C(n) ? (d(), F(C(R), {
key: 0,
icon: C(i) ? C(No) : C(Ao),
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(R), {
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"]))
])) : L(u.$slots, "default", { key: 1 })
], 8, al));
}
}), nl = /* @__PURE__ */ W({
__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(), h("tbody", {
class: D(["block divide-y divide-gray-300 dark:divide-gray-600", a[C(t)]])
}, [
L(r.$slots, "default")
], 2));
}
}), il = /* @__PURE__ */ W({
__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(), h("tr", {
class: D(["grid", a[C(t)]])
}, [
L(r.$slots, "default")
], 2));
}
}), ol = ["data-label"], sl = /* @__PURE__ */ W({
__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(), h("td", {
"data-label": e.dataLabel,
class: D(["grid px-6 py-4", a[C(t)], { "grid-cols-2": e.dataLabel }])
}, [
e.dataLabel ? (d(), h("span", {
key: 0,
class: D(["font-medium text-gray-900 dark:text-gray-50", r[C(t)]])
}, M(e.dataLabel), 3)) : O("", !0),
L(n.$slots, "default")
], 10, ol));
}
}), ll = /* @__PURE__ */ W({
__name: "NeTableSkeleton",
props: {
rows: {
type: Number,
required: !0
},
columns: {
type: Number,
required: !0
},
cardBreakpoint: {
type: String,
default: "md"
}
},
setup(e) {
return (t, a) => (d(), h(Y, null, [
N(tl, { "card-breakpoint": e.cardBreakpoint }, {
default: A(() => [
(d(!0), h(Y, null, G(e.columns, (r) => (d(), F(rl, { key: r }, {
default: A(() => [
N(Fa, { size: "lg" })
]),
_: 2
}, 1024))), 128))
]),
_: 1
}, 8, ["card-breakpoint"]),
N(nl, { "card-breakpoint": e.cardBreakpoint }, {
default: A(() => [
(d(!0), h(Y, null, G(e.rows, (r) => (d(), F(il, {
key: r,
"card-breakpoint": e.cardBreakpoint
}, {
default: A(() => [
(d(!0), h(Y, null, G(e.columns, (n) => (d(), F(sl, {
key: n,
"card-breakpoint": e.cardBreakpoint,
"data-label": ""
}, {
default: A(() => [
N(Fa, { 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 }, Nh = /* @__PURE__ */ W({
__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",
E(() => e.cardBreakpoint)
), ka(
"sortKey",
E(() => e.sortKey)
), ka(
"sortDescending",
E(() => 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(), h("div", ul, [
g("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"])) : L(a.$slots, "default", { key: 1 })
], 10, dl),
a.$slots.paginator ? (d(), h("div", cl, [
L(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", Ah = /* @__PURE__ */ W({
__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: y
});
const i = z(""), o = z(r.multiple ? [] : null), s = z(!1), u = z(null), l = z([]), c = E(() => r.options.concat(l.value)), v = E(() => {
if (!i.value)
return x(c.value);
let f = c.value.filter((p) => (
// search in option label
p.label.trim().toLowerCase().includes(i.value.trim().toLowerCase()) || // search in option description
p.description && p.description.trim().toLowerCase().includes(i.value.trim().toLowerCase())
));
if (r.acceptUserInput && i.value.trim()) {
const p = i.value.trim();
f.find((_) => _.label === p) || f.push({
id: p,
label: p,
description: r.userInputLabel
});
}
return f.length ? (f = x(f), f) : [{ id: "no_results", label: r.noResultsLabel, disabled: !0 }];
});
j(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", "");
}), j(
() => r.options,
() => {
r.multiple ? k() : S();
}
), Ee(() => {
r.multiple ? k() : S();
}), j(
() => r.modelValue,
() => {
r.multiple ? k() : S();
}
);
function x(f) {
if (!f.length && !r.acceptUserInput)
return [{ id: "no_option", label: r.noOptionsLabel, disabled: !0 }];
if (f.length <= r.maxOptionsShown)
return f;
if (f = f.slice(0, r.maxOptionsShown), f.push({ id: "limited_options_hint", label: r.limitedOptionsLabel, disabled: !0 }), r.multiple) {
if (o.value.length)
for (const p of o.value)
f.find(
(_) => _.id === p.id
) || f.unshift(p);
} else
o.value && (f.find(
($) => {
var _;
return $.id === ((_ = o.value) == null ? void 0 : _.id);
}
) || f.unshift(o.value));
return f;
}
function w() {
i.value = "", s.value = !1;
}
function T(f) {
r.multiple || (s.value = !1), r.acceptUserInput && (c.value.find(($) => $.id === f.id) || l.value.push({
id: f.id,
label: f.label,
description: r.userInputLabel
}));
}
function S() {
const f = c.value.find((p) => p.id === r.modelValue);
if (f)
o.value = f;
else if (r.acceptUserInput && r.modelValue) {
const p = {
id: r.modelValue,
label: r.modelValue,
description: r.userInputLabel
};
l.value.push(p), o.value = p;
}
}
function k() {
const f = [];
for (const p of r.modelValue) {
const $ = c.value.find((_) => _.id === p.id);
$ ? f.push($) : r.acceptUserInput && (p.description || (p.description = r.userInputLabel), l.value.push(p), f.push(p));
}
lr(o.value, f) || (o.value = f);
}
function y() {
var f, p;
(p = (f = u.value) == null ? void 0 : f.querySelector("input")) == null || p.focus();
}
function b() {
s.value = !0;
}
function m(f) {
o.value = o.value.filter(
(p) => p.id !== f.id
);
}
return yi(u, () => w()), (f, p) => (d(), h("div", {
ref_key: "comboboxRef",
ref: u
}, [
N(C(Yo), Fe({
modelValue: o.value,
"onUpdate:modelValue": p[1] || (p[1] = ($) => o.value = $),
as: "div",