@discue/ui-components
Version:
The themeable open source Vue.js UI component library of discue.io
1,574 lines • 58.1 kB
JavaScript
import { ref as l, createElementBlock as p, openBlock as u, createElementVNode as f, computed as s, onMounted as Je, createBlock as $, Transition as q, withCtx as T, createCommentVNode as R, normalizeClass as k, createVNode as L, unref as U, watchEffect as K, Teleport as Qe, renderSlot as F, toDisplayString as I, Fragment as A, renderList as D, createTextVNode as S, useAttrs as et, getCurrentInstance as ee, reactive as te, resolveDynamicComponent as le, mergeProps as tt, createSlots as nt, withModifiers as X, watch as oe, onBeforeUnmount as lt, withDirectives as ot, vModelDynamic as rt, defineComponent as re } from "vue";
import { useRouter as ae } from "vue-router";
const se = "backToTop.color.default", ue = "formElement.borderSize.default", ie = "formElement.borderColor.default", de = "formElement.borderColor.active", ce = "formElement.borderColor.attention", fe = "formElement.borderRingSize.default", me = "formElement.borderRingColor.default", ve = "formElementLabel.size.default", pe = "formElementLabel.color.default", he = "formElementLabel.color.attention", ge = "formElementLabel.background.default", Ee = "formElementLabel.weight.default", ye = "formElementHint.size.default", be = "formElementHint.color.default", _e = "formElementHint.weight.default", Te = "formElementError.size.default", we = "formElementError.color.default", xe = "formElementError.color.hint", Oe = "formElementError.weight.default", at = "text.size.default", st = "text.size.small", ut = "text.size.large", it = "text.size.xlarge", H = "text.color.default", dt = "text.color.light", ct = "text.color.highlight", ft = "text.weight.default", mt = "text.weight.highlight", Y = "formElementInput.fontWeight.default", J = "formElementInput.textSize.default", Le = "formElementInput.caretColor.default", ke = "formElementInput.textColor.default", Ce = "formElementInput.backgroundColor.default", Re = "formElementInput.placeholderColor.default", Ie = "formElementSelect.fontWeight.default", W = "formElementSelect.textSize.default", Be = "formElementSelect.textColor.default", vt = "formElementRadio.fontWeight.default", $e = "formElementRadio.textSize.default", Z = "formElementRadio.textColor.default", Se = "formElementRadio.textColor.disabled", Ne = "button.background.default", Fe = "button.background.attention", ze = "button.background.secondary", Me = "button.background.inherit", pt = "button.borderColor.default", Ae = "button.borderColor.secondary", De = "button.borderColor.attention", Ue = "button.borderColor.inverted", He = "button.color.default", qe = "button.color.attention", Ve = "button.color.secondary", Pe = "button.color.light", ht = "button.color.highlight", gt = "button.color.inherit", je = "button.size.default", Ge = "button.size.small", We = "button.weight.default", Et = "link.size.default", yt = "link.size.small", bt = "link.size.large", _t = "link.color.default", Tt = "link.color.attention", wt = "link.color.secondary", xt = "link.color.light", Ot = "link.color.highlight", Lt = "link.color.inherit", kt = "link.border.default", Ct = "link.border.attention", Rt = "link.border.secondary", It = "link.weight.default", P = l("text-lg"), j = l("font-medium placeholder:font-normal"), Ze = {
backToTop: {
color: {
default: l("text-gray-900 dark:text-primary-500")
}
},
formElement: {
borderSize: {
default: l("border-2")
},
borderColor: {
default: l("border-gray-500"),
active: l("border-gray-800 dark:border-gray-500"),
attention: l("border-attention-800")
},
borderRingSize: {
default: l("hover:ring-2")
},
borderRingColor: {
default: l("hover:ring-primary-500")
}
},
formElementLabel: {
size: {
default: l("text-md")
},
color: {
default: l("text-gray-800 dark:text-gray-400"),
attention: l("text-attention-800")
},
background: {
default: l("bg-inherit dark:bg-gray-800")
},
weight: {
default: l("font-bold")
}
},
formElementHint: {
size: {
default: l("text-xs")
},
color: {
default: l("text-gray-400")
},
weight: {
default: l("font-medium")
}
},
formElementError: {
size: {
default: l("text-xs")
},
color: {
default: l("text-attention-800"),
hint: l("text-gray-800")
},
weight: {
default: l("font-medium")
}
},
text: {
size: {
default: l("text-md"),
small: l("text-sm"),
large: l("text-lg"),
xlarge: l("text-xl")
},
color: {
default: l("text-gray-900 dark:text-gray-500"),
light: l("text-gray-100 dark:text-gray-900"),
highlight: l("text-gray-900 dark:text-gray-500")
},
weight: {
default: l("font-base"),
highlight: l("font-medium")
}
},
formElementInput: {
fontWeight: {
default: j
},
textSize: {
default: P
},
caretColor: {
default: l("caret-gray-900 dark:text-gray-400")
},
textColor: {
default: l("text-gray-900 dark:text-gray-500")
},
backgroundColor: {
default: l("bg-inherit")
},
placeholderColor: {
default: l("placeholder:text-gray-500 dark:placeholder:text-gray-700")
}
},
formElementSelect: {
fontWeight: {
default: j
},
textSize: {
default: P
},
textColor: {
default: l("text-gray-900 dark:text-gray-400")
}
},
formElementRadio: {
fontWeight: {
default: j
},
textSize: {
default: P
},
textColor: {
default: l("text-gray-900 dark:text-gray-500"),
disabled: l("text-gray-500 dark:text-gray-800")
}
},
button: {
background: {
default: l("bg-gray-900 dark:bg-gray-800"),
attention: l("bg-attention-800"),
secondary: l("bg-gray-500"),
inherit: l("bg-inherit")
},
borderColor: {
default: l(),
secondary: l("hover:border-gray-500"),
attention: l("hover:border-attention-800"),
inverted: l("hover:border-gray-900")
},
color: {
default: l("text-gray-900"),
attention: l("text-attention-800"),
secondary: l("text-gray-500"),
light: l("text-gray-100"),
highlight: l("text-gray-900"),
inherit: l("text-inherit")
},
size: {
default: l("text-xl"),
small: l("text-md")
},
weight: {
default: l("font-bold")
}
},
link: {
size: {
default: l("text-xl"),
small: l("text-md"),
large: l("text-2xl")
},
color: {
default: l("text-gray-900 dark:text-gray-300"),
attention: l("text-attention-800"),
secondary: l("text-gray-500"),
light: l("text-gray-100 dark:text-gray-200"),
highlight: l("text-gray-900"),
inherit: l("text-inherit")
},
border: {
default: l("hover:border-gray-900 dark:hover:border-gray-400"),
attention: l("hover:border-attention-500"),
secondary: l("hover:border-gray-500")
},
weight: {
default: l("font-bold")
}
}
};
function Ke(e) {
return e.split(".").reduce((t, a) => t[a], Ze);
}
const Xe = function(e, n) {
const t = Ke(e);
if (!t)
throw new Error(`Could not find a theme property with key ${e}. Does property exist?`);
t.value = n;
}, Bt = function(e, n) {
n && Object.entries(n).forEach(([t, a]) => {
Xe(t, a);
});
}, r = function(e) {
return Ke(e);
}, $t = function() {
return Ze;
}, St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
BACK_TO_TOP_COLOR_DEFAULT: se,
BUTTON_BACKGROUND_ATTENTION: Fe,
BUTTON_BACKGROUND_DEFAULT: Ne,
BUTTON_BACKGROUND_INHERIT: Me,
BUTTON_BACKGROUND_SECONDARY: ze,
BUTTON_BORDER_COLOR_ATTENTION: De,
BUTTON_BORDER_COLOR_DEFAULT: pt,
BUTTON_BORDER_COLOR_INVERTED: Ue,
BUTTON_BORDER_COLOR_SECONDARY: Ae,
BUTTON_COLOR_ATTENTION: qe,
BUTTON_COLOR_DEFAULT: He,
BUTTON_COLOR_HIGHLIGHT: ht,
BUTTON_COLOR_INHERIT: gt,
BUTTON_COLOR_LIGHT: Pe,
BUTTON_COLOR_SECONDARY: Ve,
BUTTON_SIZE_DEFAULT: je,
BUTTON_SIZE_SMALL: Ge,
BUTTON_WEIGHT_DEFAULT: We,
FORM_ELEMENT_BORDER_COLOR_ACTIVE: de,
FORM_ELEMENT_BORDER_COLOR_ATTENTION: ce,
FORM_ELEMENT_BORDER_COLOR_DEFAULT: ie,
FORM_ELEMENT_BORDER_RING_COLOR_DEFAULT: me,
FORM_ELEMENT_BORDER_RING_SIZE_DEFAULT: fe,
FORM_ELEMENT_BORDER_SIZE_DEFAULT: ue,
FORM_ELEMENT_ERROR_COLOR_DEFAULT: we,
FORM_ELEMENT_ERROR_COLOR_HINT: xe,
FORM_ELEMENT_ERROR_SIZE_DEFAULT: Te,
FORM_ELEMENT_ERROR_WEIGHT_DEFAULT: Oe,
FORM_ELEMENT_HINT_COLOR_DEFAULT: be,
FORM_ELEMENT_HINT_SIZE_DEFAULT: ye,
FORM_ELEMENT_HINT_WEIGHT_DEFAULT: _e,
FORM_ELEMENT_INPUT_BACKGROUND_COLOR_DEFAULT: Ce,
FORM_ELEMENT_INPUT_CARET_COLOR_DEFAULT: Le,
FORM_ELEMENT_INPUT_FONT_WEIGHT_DEFAULT: Y,
FORM_ELEMENT_INPUT_PLACEHOLDER_COLOR_DEFAULT: Re,
FORM_ELEMENT_INPUT_TEXT_COLOR_DEFAULT: ke,
FORM_ELEMENT_INPUT_TEXT_SIZE_DEFAULT: J,
FORM_ELEMENT_LABEL_BACKGROUND_DEFAULT: ge,
FORM_ELEMENT_LABEL_COLOR_ATTENTION: he,
FORM_ELEMENT_LABEL_COLOR_DEFAULT: pe,
FORM_ELEMENT_LABEL_SIZE_DEFAULT: ve,
FORM_ELEMENT_LABEL_WEIGHT_DEFAULT: Ee,
FORM_ELEMENT_RADIO_FONT_WEIGHT_DEFAULT: vt,
FORM_ELEMENT_RADIO_TEXT_COLOR_DEFAULT: Z,
FORM_ELEMENT_RADIO_TEXT_COLOR_DISABLED: Se,
FORM_ELEMENT_RADIO_TEXT_SIZE_DEFAULT: $e,
FORM_ELEMENT_SELECT_FONT_WEIGHT_DEFAULT: Ie,
FORM_ELEMENT_SELECT_TEXT_COLOR_DEFAULT: Be,
FORM_ELEMENT_SELECT_TEXT_SIZE_DEFAULT: W,
LINK_BORDER_ATTENTION: Ct,
LINK_BORDER_DEFAULT: kt,
LINK_BORDER_SECONDARY: Rt,
LINK_COLOR_ATTENTION: Tt,
LINK_COLOR_DEFAULT: _t,
LINK_COLOR_HIGHLIGHT: Ot,
LINK_COLOR_INHERIT: Lt,
LINK_COLOR_LIGHT: xt,
LINK_COLOR_SECONDARY: wt,
LINK_SIZE_DEFAULT: Et,
LINK_SIZE_LARGE: bt,
LINK_SIZE_SMALL: yt,
LINK_WEIGHT_DEFAULT: It,
TEXT_COLOR_DEFAULT: H,
TEXT_COLOR_HIGHLIGHT: ct,
TEXT_COLOR_LIGHT: dt,
TEXT_SIZE_DEFAULT: at,
TEXT_SIZE_LARGE: ut,
TEXT_SIZE_SMALL: st,
TEXT_SIZE_XLARGE: it,
TEXT_WEIGHT_DEFAULT: ft,
TEXT_WEIGHT_HIGHLIGHT: mt,
getTheme: $t,
getThemeProperty: r,
install: Bt,
update: Xe
}, Symbol.toStringTag, { value: "Module" }));
function Nt(e, n) {
return u(), p("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
f("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "m4.5 15.75 7.5-7.5 7.5 7.5"
})
]);
}
function Ft(e, n) {
return u(), p("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
f("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"
})
]);
}
function zt(e, n) {
return u(), p("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
f("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
})
]);
}
function Mt(e, n, t) {
var a, c, i;
t === void 0 && (t = {});
var g = (a = t.isImmediate) != null && a, h = (c = t.callback) != null && c, E = t.maxWait, _ = Date.now(), O = [];
function x() {
if (E !== void 0) {
var d = Date.now() - _;
if (d + n >= E) return E - d;
}
return n;
}
var v = function() {
var d = [].slice.call(arguments), o = this;
return new Promise(function(m, y) {
var C = g && i === void 0;
if (i !== void 0 && clearTimeout(i), i = setTimeout(function() {
if (i = void 0, _ = Date.now(), !g) {
var b = e.apply(o, d);
h && h(b), O.forEach(function(B) {
return (0, B.resolve)(b);
}), O = [];
}
}, x()), C) {
var w = e.apply(o, d);
return h && h(w), m(w);
}
O.push({ resolve: m, reject: y });
});
};
return v.cancel = function(d) {
i !== void 0 && clearTimeout(i), O.forEach(function(o) {
return (0, o.reject)(d);
}), O = [];
}, v;
}
const Mn = {
__name: "back-to-top",
props: {
offset: {
type: Number,
default: 300
}
},
setup(e) {
const n = e, t = s(() => `dsq-back-to-top bg-inherit -m-2 ${r(se).value}`), a = l(0), c = s(() => a.value > n.offset), i = Mt(() => {
a.value = g();
}, 100), g = () => window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, h = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
return Je(() => {
a.value = g(), window.addEventListener("scroll", () => i());
}), (E, _) => (u(), $(q, { name: "dsq-back-to-top" }, {
default: T(() => [
c.value ? (u(), p("button", {
key: 0,
class: k(t.value),
onClick: h
}, [
L(U(Nt), { class: "w-12 h-12" })
], 2)) : R("", !0)
]),
_: 1
}));
}
}, At = { class: "absolute right-4" }, Dt = {
class: "w-6 h-6",
fill: "none",
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
viewBox: "0 0 24 24"
}, An = {
__name: "banner",
props: {
show: {
type: Boolean,
default: !1
},
parent: {
type: String,
required: !0
},
bottom: {
type: Boolean,
default: !1
},
closeButtonTitle: {
type: String,
default: "Close"
}
},
emits: ["open", "close"],
setup(e, { emit: n }) {
const t = n, a = e, c = l(!1), i = s(() => a.show ? !c.value && a.show : !1), g = s(() => {
let E = "pl-3 py-3 pr-12 w-full bg-lime-300 flex items-center justify-center font-medium shadow-sm ";
return a.bottom ? E += "bottom-0 " : E += "top-0 ", a.parent ? E += "fixed z-50" : E += "absolute z-10", E;
}), h = () => {
c.value = !0;
};
return K(() => {
i.value ? t("open") : t("close");
}), (E, _) => (u(), $(Qe, {
class: "w-full relative",
disabled: !e.parent,
to: e.parent
}, [
i.value ? (u(), p("div", {
key: 0,
class: k(["dsq-banner", g.value])
}, [
F(E.$slots, "default"),
f("div", At, [
f("button", {
class: "p-1 rounded-full hover:shadow-sm cursor-pointer flex items-center justify-center text-gray-900 hover:text-lime-300 bg-inherit hover:bg-gray-900",
type: "button",
onClick: h
}, [
(u(), p("svg", Dt, [
f("title", null, I(e.closeButtonTitle), 1),
_[0] || (_[0] = f("path", { d: "M6 18L18 6M6 6l12 12" }, null, -1))
]))
])
])
], 2)) : R("", !0)
], 8, ["disabled", "to"]));
}
};
function Ut(e, n) {
return u(), p("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 16 16",
fill: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
f("path", {
"fill-rule": "evenodd",
d: "M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z",
"clip-rule": "evenodd"
})
]);
}
function Ht(e, n) {
return u(), p("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 16 16",
fill: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
f("path", { d: "M8.543 2.232a.75.75 0 0 0-1.085 0l-5.25 5.5A.75.75 0 0 0 2.75 9H4v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 1 1 2 0v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V9h1.25a.75.75 0 0 0 .543-1.268l-5.25-5.5Z" })
]);
}
function qt(e, n) {
return u(), p("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 16 16",
fill: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
f("path", {
"fill-rule": "evenodd",
d: "M3.05 3.05a7 7 0 1 1 9.9 9.9 7 7 0 0 1-9.9-9.9Zm1.627.566 7.707 7.707a5.501 5.501 0 0 0-7.707-7.707Zm6.646 8.768L3.616 4.677a5.501 5.501 0 0 0 7.707 7.707Z",
"clip-rule": "evenodd"
})
]);
}
const Vt = ["href", "rel", "target"], Pt = {
__name: "nav-link",
props: {
href: {
type: String,
required: !0
},
invert: {
type: Boolean,
default: !1
},
inheritColor: {
type: Boolean,
default: !1
},
small: {
type: Boolean,
default: !1
},
secondary: {
type: Boolean,
default: !1
},
attention: {
type: Boolean,
default: !1
},
target: {
type: String
},
light: {
type: Boolean,
default: !1
},
// window injection for testing only
window: {
type: Object,
__hideInPreview: !0
}
},
setup(e) {
const n = ae(), t = e, a = s(() => t.small ? r("link.size.small").value : r("link.size.default").value), c = s(() => t.inheritColor ? "" : t.invert ? r("link.color.light").value : t.secondary ? r("link.color.secondary").value : t.attention ? r("link.color.attention").value : r("link.color.default").value), i = s(() => t.secondary ? r("link.border.secondary").value : t.attention ? r("link.border.attention").value : r("link.border.default").value), g = s(() => t.invert ? t.secondary ? r("button.background.secondary").value : t.attention ? r("button.background.attention").value : r("button.background.default").value : ""), h = s(() => t.light ? "" : r("link.weight.default").value), E = s(() => t.small ? "hover:border-b-2" : "hover:border-b-4"), _ = s(() => {
const w = ["no-underline!"];
return v.value && w.push("external-link-icon"), t.invert ? w.push(`p-3 ${c.value} ${i.value} ${a.value} ${g.value} ${h.value} hover:shadow-md rounded-lg transform transition-transform hover:-translate-y-1`) : w.push(`${a.value} ${c.value} ${i.value} animate ${h.value} ${E.value} cursor-pointer`), w.join(" ");
}), O = s(() => t.href[0] === "/" || t.href.indexOf(".") === -1), x = s(() => {
const { hostname: w } = (t.window ?? window).location;
return w;
}), v = s(() => {
const w = x.value.split(".").slice(-2).join(".");
return !t.href.includes(w) && !O.value;
}), d = s(() => O.value || t.href.includes(`/${x.value}/`)), o = s(() => t.href.includes("#")), m = s(() => v.value ? "noopener noreferrer" : ""), y = s(() => t.target ? t.target : v.value ? "_blank" : "_self");
function C(w) {
if (o.value && d.value) {
const b = t.href.substring(t.href.indexOf("#")), B = window.document.querySelector(b);
if (B) {
B.scrollTo({ behavior: "smooth" });
return;
}
}
O.value && (w.preventDefault(), w.stopImmediatePropagation(), n.push(t.href));
}
return (w, b) => (u(), p("a", {
class: k(["dsq-nav-link", _.value]),
href: e.href,
rel: m.value,
target: y.value,
onClick: b[0] || (b[0] = (B) => C(B))
}, [
F(w.$slots, "default")
], 10, Vt));
}
}, N = {
__name: "text",
props: {
highlight: {
type: Boolean,
default: !1
},
light: {
type: Boolean,
default: !1
},
small: {
type: Boolean,
default: !1
},
large: {
type: Boolean,
default: !1
},
extraLarge: {
type: Boolean,
default: !1
},
inheritColor: {
type: Boolean,
default: !1
},
inheritFontSize: {
type: Boolean,
default: !1
}
},
setup(e) {
const n = e, t = s(() => n.highlight ? r("text.weight.highlight").value : r("text.weight.default").value), a = s(() => n.inheritColor ? "" : n.light ? r("text.color.light").value : n.highlight ? r("text.color.highlight").value : r("text.color.default").value), c = s(() => n.inheritFontSize ? "" : n.small ? r("text.size.small").value : n.large ? r("text.size.large").value : n.extraLarge ? r("text.size.xlarge").value : r("text.size.default").value), i = s(() => `${c.value} ${t.value} ${a.value}`);
return (g, h) => (u(), p("span", {
class: k(["dsq-text", i.value])
}, [
F(g.$slots, "default")
], 2));
}
}, jt = {
"aria-label": "Breadcrumb",
class: "dsq-breadcrumbs flex bg-inherit"
}, Gt = { class: "inline-flex items-center space-x-1 md:space-x-3 rtl:space-x-reverse" }, Wt = { class: "flex items-center" }, Zt = {
key: 3,
class: "ms-1 md:ms-2 font-medium text-gray-500 dark:text-gray-700"
}, Dn = {
__name: "breadcrumbs",
props: {
crumbs: {
type: Array,
required: !0,
validator(e) {
return e.every(
(n) => typeof n.name == "string" && (n.path === void 0 || n.path.startsWith("/"))
);
}
}
},
setup(e) {
const n = e;
function t(a) {
return a < n.crumbs.length - 1;
}
return (a, c) => (u(), p("nav", jt, [
f("ol", Gt, [
(u(!0), p(A, null, D(e.crumbs, (i, g) => (u(), p("li", {
key: g,
class: "inline-flex items-center"
}, [
f("div", Wt, [
g === 0 ? (u(), $(U(Ht), {
key: 0,
class: "w-5 h-5 mr-1 text-gray-500 dark:text-gray-700 mr-2"
})) : (u(), $(U(Ut), {
key: 1,
class: "w-6 h-6 mr-1 text-gray-500 dark:text-gray-700"
})),
i.path ? (u(), $(Pt, {
key: 2,
class: "ms-1 md:ms-2 text-gray-500 dark:text-gray-700 font-medium",
href: i.path,
"inherit-color": !0,
light: t(g),
small: !0
}, {
default: T(() => [
L(N, {
"inherit-color": !0,
small: !0
}, {
default: T(() => [
S(I(i.name), 1)
]),
_: 2
}, 1024)
]),
_: 2
}, 1032, ["href", "light"])) : (u(), p("span", Zt, [
L(N, {
"inherit-color": !0,
light: t(g),
small: !0
}, {
default: T(() => [
S(I(i.name), 1)
]),
_: 2
}, 1032, ["light"])
]))
])
]))), 128))
])
]));
}
}, Kt = ["id"], Xt = {
key: 0,
class: "component-properties-model-value"
}, Yt = {
key: 1,
class: "component-properties-preview"
}, Jt = { class: "" }, Qt = { class: "grid grid-cols-4 pb-4 pl-4 rounded-t-lg border-b-2 border-stone-300" }, en = ["value", "onInput"], tn = ["value", "onInput"], nn = ["value", "onInput"], ln = {
key: 2,
class: "component-emits-preview"
}, on = { class: "" }, rn = { class: "grid grid-cols-4 pb-4 pl-4 rounded-t-lg border-b-2 border-stone-300" }, Un = {
__name: "dynamic-component-display",
props: {
type: {
type: String,
required: !0
},
name: {
type: String,
required: !0
},
showProperties: {
type: Boolean,
default: !0
},
showEvents: {
type: Boolean,
default: !0
},
initialValue: {
type: String
},
attachVModel: {
type: Boolean,
default: !1
}
},
setup(e) {
const n = et(), t = e, a = l(t.initialValue), c = s(() => t.type.toLocaleLowerCase() + "-preview"), i = s(() => ee().appContext.components[t.type].props);
function g(v, d, o) {
return d[v] != null ? d[v] : o;
}
const h = s(() => {
const v = Object.entries(i.value).reduce((d, [o, m]) => (d[o] = g(o, n, m.default), d), {});
return i.value.name && (v.name = g("name", t, i.value.name.default)), te(v);
}), E = s(() => {
let v = i.value;
return v || (v = {}), Object.entries(v).sort(([d], [o]) => d.localeCompare(o)).reduce((d, [o, m], y) => {
var C, w;
return m.__hideInPreview ? d : Object.assign(d, te({
[o]: {
name: o,
type: ((C = m.type) == null ? void 0 : C.prototype.constructor.name) || "unknown",
allowInput: ((w = m.type) == null ? void 0 : w.prototype.constructor.name) !== "Function" || !1,
default: m.default,
index: y
}
}));
}, {});
}), _ = s(() => ee().appContext.components[t.type].emits), O = s(() => {
var v;
return ((v = _.value) == null ? void 0 : v.length) > 0;
});
function x(v, d) {
const { value: o } = d.target;
v.type === "Boolean" ? o === "false" ? h.value[v.name] = !1 : h.value[v.name] = !!o : v.type === "Array" ? h.value[v.name] = JSON.parse(o) : v.type === "Number" ? h.value[v.name] = Number(o) : h.value[v.name] = o;
}
return (v, d) => (u(), p(A, null, [
f("div", {
id: c.value,
class: "component-preview bg-stone-300 dark:bg-gray-800 shadow-inner rounded-lg my-4 py-4 flex flex-col justify-center items-center w-full"
}, [
(u(), $(le(e.type), tt(h.value, {
modelValue: a.value,
"onUpdate:modelValue": d[0] || (d[0] = (o) => a.value = o)
}), nt({ _: 2 }, [
D(v.$slots, (o, m) => ({
name: m,
fn: T(() => [
F(v.$slots, m)
])
}))
]), 1040, ["modelValue"]))
], 8, Kt),
e.attachVModel ? (u(), p("div", Xt, [
L(N, null, {
default: T(() => [
d[1] || (d[1] = S(" Component Value: ")),
L(N, { highlight: !0 }, {
default: T(() => [
S(I(a.value), 1)
]),
_: 1
})
]),
_: 1
})
])) : R("", !0),
e.showProperties ? (u(), p("div", Yt, [
d[7] || (d[7] = f("h3", { class: "text-xl font-medium inline-block" }, " Properties ", -1)),
f("div", Jt, [
f("div", Qt, [
f("div", null, [
L(N, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: T(() => d[2] || (d[2] = [
S(" Name ")
])),
_: 1
})
]),
f("div", null, [
L(N, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: T(() => d[3] || (d[3] = [
S(" Type ")
])),
_: 1
})
]),
f("div", null, [
L(N, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: T(() => d[4] || (d[4] = [
S(" Default ")
])),
_: 1
})
]),
f("div", null, [
L(N, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: T(() => d[5] || (d[5] = [
S(" Value ")
])),
_: 1
})
])
]),
(u(!0), p(A, null, D(E.value, (o) => (u(), p("div", {
key: o.name,
class: "grid grid-cols-4 border-b-2 border-stone-300 border-solid py-4 pl-4"
}, [
f("div", null, [
L(N, {
class: "",
small: !1
}, {
default: T(() => [
S(I(o.name), 1)
]),
_: 2
}, 1024)
]),
f("div", null, [
L(N, {
class: "",
small: !1
}, {
default: T(() => [
S(I(o.type), 1)
]),
_: 2
}, 1024)
]),
f("div", null, [
L(N, {
class: "",
small: !1
}, {
default: T(() => [
S(I(o.default), 1)
]),
_: 2
}, 1024)
]),
f("div", null, [
o.allowInput && o.type === "Boolean" ? (u(), p("select", {
key: 0,
class: "w-24 text-lg",
value: h.value[o.name],
onInput: (m) => x(o, m)
}, d[6] || (d[6] = [
f("option", { class: "w-24 text-lg" }, " true ", -1),
f("option", { class: "w-24 text-lg" }, " false ", -1)
]), 40, en)) : o.allowInput && o.type === "Array" ? (u(), p("input", {
key: 1,
class: "text-base border-b-2 border-b-solid border-gray-900 w-20",
value: JSON.stringify(h.value[o.name]),
onInput: (m) => x(o, m)
}, null, 40, tn)) : o.allowInput ? (u(), p("input", {
key: 2,
class: "text-base border-b-2 border-b-solid border-gray-900 w-20",
value: h.value[o.name],
onInput: (m) => x(o, m)
}, null, 40, nn)) : R("", !0)
])
]))), 128))
])
])) : R("", !0),
O.value && e.showEvents ? (u(), p("div", ln, [
d[9] || (d[9] = f("h3", { class: "text-xl font-medium inline-block" }, " Emits ", -1)),
f("div", on, [
f("div", rn, [
f("div", null, [
L(N, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: T(() => d[8] || (d[8] = [
S(" Event ")
])),
_: 1
})
])
]),
(u(!0), p(A, null, D(_.value, (o) => (u(), p("div", {
key: o,
class: "grid grid-cols-4 border-b-2 border-stone-300 border-solid py-4 pl-4"
}, [
f("div", null, [
L(N, {
class: "",
small: !1
}, {
default: T(() => [
S(I(o), 1)
]),
_: 2
}, 1024)
])
]))), 128))
])
])) : R("", !0)
], 64));
}
}, an = { class: "flex flex-col" }, Hn = {
__name: "drop-down-menu-banner-item",
props: {
show: {
type: Boolean,
default: !0
}
},
setup(e) {
return (n, t) => e.show ? (u(), p("li", {
key: 0,
class: "dsq-drop-down-menu-banner-item p-3 rounded-t-md border-b border-gray-400 cursor-default",
onClick: t[0] || (t[0] = X(() => {
}, ["prevent"]))
}, [
f("div", an, [
F(n.$slots, "default")
])
])) : R("", !0);
}
}, sn = { class: "flex items-center text-gray-500 group-hover:text-gray-900" }, qn = {
__name: "drop-down-menu-item",
props: {
show: {
type: Boolean,
default: !0
},
label: {
type: String,
required: !0
},
href: {
type: String,
required: !0
}
},
setup(e) {
const n = ae(), t = e;
function a() {
t.href && n.push({ path: t.href });
}
return (c, i) => e.show ? (u(), p("li", {
key: 0,
class: "dsq-drop-down-menu-item flex flex-row items-center hover:bg-gray-300 p-4 font-medium group z-10 cursor-pointer",
onClick: X(a, ["prevent"])
}, [
f("div", sn, [
F(c.$slots, "default")
]),
f("span", null, I(e.label), 1)
])) : R("", !0);
}
}, un = () => function(e, n) {
let t = !1, a = 0, c = 0;
function i() {
t || (t = !0, clearTimeout(c), e.call(), a = setTimeout(() => {
t = !1;
}, n), c = setTimeout(e, n + 5));
}
return i.clear = function() {
clearTimeout(a), clearTimeout(c);
}, i;
}, Ye = (e, n) => {
const t = e.__vccOpts || e;
for (const [a, c] of n)
t[a] = c;
return t;
}, dn = { class: "text-left text-lg" }, ne = "scroll", cn = {
__name: "drop-down-menu",
props: {
show: {
type: Boolean,
default: !0
},
calculatePositionDynamically: {
type: Boolean,
default: !0
}
},
setup(e) {
const n = e, a = un()(E, 50);
let c = !1;
const i = l();
oe([n, i], E), lt(() => {
c && window.removeEventListener(ne, E), a.clear();
});
function g() {
c || (c = !0, window.addEventListener(ne, a, { passive: !0 }));
}
function h() {
c = !1;
}
function E() {
if (n.calculatePositionDynamically)
n.show && i.value ? (_(), g()) : !n.show && c && h();
else return;
}
function _() {
const v = i.value.parentElement.getBoundingClientRect(), { top: d } = v;
if (O(v)) {
const o = i.value;
let m = o.getBoundingClientRect();
o.style.top = `${d}px`;
for (let y = 1; O(m) === !1 && y < 20; y++)
o.style.top = `${d - 20 * y}px`, m = o.getBoundingClientRect();
}
}
function O(x) {
return x.top >= 0 && x.left >= 0 && x.bottom <= (window.innerHeight || document.documentElement.clientHeight) && x.right <= (window.innerWidth || document.documentElement.clientWidth);
}
return (x, v) => (u(), $(q, { name: "modal" }, {
default: T(() => [
e.show ? (u(), p("div", {
key: 0,
ref_key: "menu",
ref: i,
class: "dsq-drop-down-menu bg-gray-50 text-gray-900 fixed shadow-md font-normal rounded-md w-48 border-2 border-gray-200 duration-200 ease-in-out transition"
}, [
f("ul", dn, [
F(x.$slots, "default", {}, void 0, !0)
])
], 512)) : R("", !0)
]),
_: 3
}));
}
}, Vn = /* @__PURE__ */ Ye(cn, [["__scopeId", "data-v-b4d166b1"]]), fn = ["id"], mn = {
__name: "form-element-error-message",
props: {
id: {
type: String,
required: !0
},
invalid: {
type: Boolean,
default: !1
},
showErrorAsHint: {
type: Boolean,
default: !1
},
description: {
type: String
}
},
setup(e) {
const n = e, t = s(() => {
const a = ["dsq-form-element-error-message"];
return n.showErrorAsHint ? a.push(r(xe).value) : a.push(r(we).value), a.push(r(Te).value), a.push(r(Oe).value), a.join(" ");
});
return (a, c) => e.invalid ? (u(), p("span", {
key: 0,
id: e.id,
class: k(t.value)
}, I(e.description), 11, fn)) : R("", !0);
}
}, vn = ["id"], Pn = {
__name: "form-elements-container",
props: {
id: {
type: String,
required: !0
},
class: {
type: String,
required: !0
}
},
setup(e) {
const n = e, t = s(() => `flex flex-col space-y-5 ${n.class}`);
return (a, c) => (u(), p("div", { id: e.id }, [
f("div", {
class: k(t.value)
}, [
F(a.$slots, "default")
], 2)
], 8, vn));
}
}, pn = ["id"], hn = { class: "relative flex bg-inherit" }, gn = ["for"], V = {
__name: "form-element-container-with-label",
props: {
id: {
type: String,
required: !0
},
description: {
type: String
},
label: {
type: String,
required: !0
},
disabled: {
type: Boolean,
default: !1
},
focussed: {
type: Boolean,
default: !1
},
focusInputCallback: {
type: Function,
default: () => {
}
},
forceShowErrorMessage: {
type: Boolean,
default: !1
},
pattern: {
type: String
},
showPatternHint: {
type: Boolean,
default: !0
},
format: {
type: String
},
showFormatHint: {
type: Boolean,
default: !1
},
inputInvalid: {
type: Boolean,
default: !1
}
},
setup(e) {
const n = e, t = l(!1), a = l(!1), c = l(!1), i = s(() => n.forceShowErrorMessage && n.inputInvalid || a.value && n.inputInvalid), g = s(() => `${n.id}ElementContainer`), h = s(() => `${n.id}ElementError`), E = s(() => n.pattern && n.showPatternHint && n.focussed && !_.value), _ = s(() => n.format && n.showFormatHint && n.focussed), O = s(() => t.value || n.focussed), x = s(() => {
const b = ["dsq-form-element-container-with-label border-solid bg-inherit flex flex-col rounded-sm"];
return b.push([r(ue).value]), n.disabled ? b.push("cursor-not-allowed") : b.push("cursor-text"), O.value ? (b.push(r(de).value), b.push(r(fe).value, r(me).value)) : i.value ? b.push(r(ce).value) : b.push(r(ie).value), b.join(" ");
}), v = s(() => [
"w-5",
"top-[0.1rem]"
].join(" ")), d = s(() => {
const b = [
"flex justify-center items-center space-x-1 h-8 px-2 absolute -top-[1.1rem]",
r(ve).value,
r(ge).value,
r(Ee).value
];
return n.disabled ? b.push("cursor-not-allowed", "-left-[1.1rem]") : b.push("cursor-text", "-left-[0.65rem]"), i.value && !O.value ? b.push(r(he).value) : b.push(r(pe).value), b.join(" ");
}), o = s(() => [
"dsq-form-element-hint absolute -top-[.2rem] p-1.5 right-0 leading-7 italic ml-auto transition-opacity duration-200 ease-in",
r(be).value,
r(ye).value,
r(_e).value
].join(" ")), m = K(() => {
t.value ? c.value = !0 : c.value && n.focussed === !1 && (a.value = !0, m());
});
function y() {
t.value = !0;
}
function C() {
t.value = !1;
}
function w(b) {
setTimeout(() => {
n.focusInputCallback(b);
});
}
return (b, B) => (u(), p("div", {
id: g.value,
class: k(x.value),
onFocusin: y,
onFocusout: C,
onMouseleave: C,
onMouseover: y
}, [
f("div", hn, [
f("div", {
class: k(d.value)
}, [
e.disabled ? (u(), $(U(qt), {
key: 0,
class: k(v.value)
}, null, 8, ["class"])) : R("", !0),
f("label", {
for: e.id,
onMousedown: w
}, I(e.label), 41, gn)
], 2),
L(q, { name: "form-element-hint" }, {
default: T(() => [
E.value ? (u(), p("span", {
key: 0,
class: k(o.value),
onMousedown: w
}, "Allowed values: " + I(e.pattern), 35)) : R("", !0)
]),
_: 1
}),
L(q, { name: "form-element-hint" }, {
default: T(() => [
_.value ? (u(), p("span", {
key: 0,
class: k(o.value),
onMousedown: w
}, "Allowed format: " + I(e.format), 35)) : R("", !0)
]),
_: 1
})
]),
f("div", {
class: k([i.value ? "" : "pb-1"])
}, [
F(b.$slots, "default")
], 2),
L(mn, {
id: h.value,
class: "px-3 pb-1",
description: e.description,
invalid: i.value && a.value
}, null, 8, ["id", "description", "invalid"])
], 42, pn));
}
}, En = { class: "relative pl-3 mt-4 mb-1 flex flex-row items-center" }, yn = {
key: 1,
class: "absolute bg-transparent right-0 p-2 text-green-700 outline-hidden",
"click.prevent": ""
}, bn = {
key: 2,
class: "absolute bg-transparent right-0 p-2 text-attention outline-hidden",
"click.prevent": ""
}, jn = {
__name: "form-immutable-text",
props: {
enableCopyToClipboard: {
type: Boolean,
default: !0
},
id: {
type: String,
required: !0
},
label: {
type: String,
required: !0
},
text: {
type: String,
required: !0
}
},
setup(e) {
const n = e, t = l(!1), a = l(!1), c = l(), i = s(() => [r(J).value, r(Y).value]), g = s(() => n.text && // do we have a text?
n.enableCopyToClipboard && // does our parent want us to allow copying?
typeof window.ClipboardItem == "function" && // does the browser allow us to copy?
!t.value && // have we already finished ...
!a.value);
async function h() {
try {
await navigator.clipboard.writeText(n.text), t.value = !0, a.value = !1;
} catch {
t.value = !1, a.value = !0, c.value = "Sorry, we were not able to copy to the clipboard at this time. Please copy the text manually.";
}
}
return (E, _) => (u(), $(V, {
id: e.id,
description: c.value,
disabled: !0,
"focus-input-callback": E.focusInput,
focussed: !1,
"force-show-error-message": !0,
"input-invalid": a.value,
label: e.label,
"show-format-hint": !1,
"show-pattern-hint": !1,
value: E.modelValue
}, {
default: T(() => [
f("div", En, [
f("div", {
class: k(["mr-8", i.value])
}, [
L(N, {
id: e.id,
"inherit-font-size": !0
}, {
default: T(() => [
S(I(e.text), 1)
]),
_: 1
}, 8, ["id"])
], 2),
g.value ? (u(), p("button", {
key: 0,
class: "absolute bg-transparent right-0 pl-2 py-2 pr-3 text-gray-700 cursor-pointer transform transition-transform hover:-translate-y-1 outline-hidden",
onClick: X(h, ["prevent"])
}, [
L(U(zt), { class: "h-6 w-6 stroke-2" })
])) : R("", !0),
t.value ? (u(), p("button", yn, [
L(U(Ft), { class: "h-6 w-6" })
])) : R("", !0),
a.value ? (u(), p("button", bn, _[0] || (_[0] = [
f("svg", {
class: "h-6 w-6",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, [
f("path", {
d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-5 10.5l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0",
"stroke-linecap": "round",
"stroke-linejoin": "round"
})
], -1)
]))) : R("", !0)
])
]),
_: 1
}, 8, ["id", "description", "focus-input-callback", "input-invalid", "label", "value"]));
}
}, _n = { class: "h-0 w-0 invisible absolute" }, Tn = ["id", "checked", "disabled", "name", "required", "value"], wn = ["for"], xn = { class: "flex items-center" }, On = {
class: "stroke-current h-6 w-6",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
}, Ln = {
key: 0,
d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, kn = {
key: 1,
d: "M8 01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, Gn = {
__name: "form-input-radio",
props: {
id: {
type: String,
required: !0
},
name: {
type: String,
required: !0
},
label: {
type: String,
required: !0
},
invalidMessage: {
type: String
},
invalid: {
type: Boolean,
default: !1
},
description: {
type: String
},
required: {
type: Boolean,
default: !0
},
disabled: {
type: Boolean,
default: !1
},
modelValue: {
type: String,
required: !0
},
options: {
type: Array,
default: () => []
},
vertical: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue"],
setup(e, { emit: n }) {
const t = e, a = n, c = l(!1), i = s(() => t.invalidMessage ? t.invalidMessage : t.description), g = s(() => t.options.length === 1), h = s(() => t.disabled || g.value), E = s(() => {
const o = ["flex flex-row items-center w-full space-x-2 px-3 py-1 leading-7", r($e).value];
return h.value ? (o.push("disabled cursor-not-allowed"), g.value ? o.push(`${r(Z).value}`) : o.push(`${r(Se).value}`)) : o.push(`${r(Z).value} cursor-pointer`), o.join(" ");
}), _ = s(() => {
const o = ["dsq-form-input-radio-wrapper pt-4 flex"];
return t.vertical ? o.push("flex-row") : o.push("flex-col"), o.join(" ");
}), O = s(() => {
const o = ["dsq-form-input-radio-option text-gray-100 flex flex-row items-center"];
return h.value || (t.vertical ? o.push("w-1/2") : o.push("w-full")), o.join(" ");
});
function x(o) {
if (h.value) {
o.preventBubbling();
return;
}
const m = o.target.value;
a("update:modelValue", m), v();
}
function v() {
c.value = !0, setTimeout(d, 1e3);
}
function d() {
c.value = !1;
}
return (o, m) => (u(), $(V, {
id: e.id,
description: i.value,
disabled: h.value,
focussed: c.value,
"input-invalid": e.invalid,
label: e.label
}, {
default: T(() => [
f("fieldset", {
class: k(_.value)
}, [
f("legend", _n, I(e.label), 1),
(u(!0), p(A, null, D(e.options, (y) => (u(), p("div", {
key: y.value,
class: k(O.value)
}, [
f("input", {
id: "radio_" + e.id + "_" + y.value + "_id",
autocomplete: "off",
checked: y.default === !0 || e.modelValue == y.value,
class: "hidden peer checked:bg-gray-900 rounded-sm outline-hidden text-gray-100 placeholder:text-gray-300 py-2 px-3 leading-8",
disabled: h.value,
name: e.name,
required: e.required,
type: "radio",
value: y.value,
onInput: m[0] || (m[0] = (C) => x(C))
}, null, 40, Tn),
f("label", {
class: k(E.value),
for: "radio_" + e.id + "_" + y.value + "_id",
onBlur: m[1] || (m[1] = (C) => d()),
onFocus: m[2] || (m[2] = (C) => v()),
onFocusin: m[3] || (m[3] = (C) => v()),
onFocusout: m[4] || (m[4] = (C) => d())
}, [
f("div", xn, [
(u(), p("svg", On, [
e.modelValue == y.value ? (u(), p("path", Ln)) : (u(), p("path", kn))
]))
]),
L(N, {
class: "pb-0.5",
highlight: e.modelValue == y.value,
"inherit-color": !0,
"inherit-font-size": !0
}, {
default: T(() => [
S(I(y.label), 1)
]),
_: 2
}, 1032, ["highlight"])
], 42, wn)
], 2))), 128))
], 2)
]),
_: 1
}, 8, ["id", "description", "disabled", "focussed", "input-invalid", "label"]));
}
}, Cn = ["id", "disabled", "value"], Rn = ["value"], Wn = {
__name: "form-input-select",
props: {
id: {
type: String,
required: !0
},
label: {
type: String,
required: !0
},
disabled: {
type: Boolean,
default: !1
},
description: {
type: String
},
forceShowErrorMessage: {
type: Boolean,
default: !1
},
modelValue: {
type: Number
},
elements: {
type: Array,
default: () => []
},
trackBy: {
type: String,
default: "id"
}
},
emits: ["update:modelValue"],
setup(e, { emit: n }) {
const t = e, a = n, c = l(null), i = l(!1), g = l(!1), h = s(() => t.modelValue === void 0 || t.modelValue === null ? null : Number.isInteger(t.modelValue) ? t.modelValue : typeof t.modelValue == "string" ? t.elements.findIndex((o) => t.modelValue === o[t.trackBy]) : null), E = s(() => [
"dsq-form-input-select px-2 pb-1 pt-4 border-none w-full bg-inherit opacity-100 focus:outline-hidden cursor-pointer",
r(Be).value,
r(W).value,
r(Ie).value
].join(" ")), _ = s(() => [
"w-24",
r(W).value
].join(" "));
function O() {
g.value = !0;
}
function x() {
g.value = !1;
}
function v(o) {
c.value.dispatchEvent(o);
}
function d() {
const o = c.value.value;
a("update:modelValue", parseInt(o));
}
return (o, m) => (u(), $(V, {
id: e.id,
description: e.description,
disabled: e.disabled,
"focus-input-callback": v,
focussed: g.value,
"force-show-error-message": e.forceShowErrorMessage,
"input-invalid": i.value,
label: e.label,
"show-format-hint": !1,
"show-pattern-hint": !1
}, {
default: T(() => [
f("select", {
id: e.id,
ref_key: "select",
ref: c,
class: k(E.value),
disabled: e.disabled,
value: h.value,
onBlur: m[0] || (m[0] = (y) => x()),
onFocus: m[1] || (m[1] = (y) => O()),
onFocusin: m[2] || (m[2] = (y) => O()),
onFocusout: m[3] || (m[3] = (y) => x()),
onInput: d
}, [
(u(!0), p(A,