@discue/ui-components
Version:
The themeable open source Vue.js UI component library of discue.io
1,573 lines • 60.9 kB
JavaScript
import { ref as l, createElementBlock as h, openBlock as u, createElementVNode as m, computed as s, onMounted as Qe, createBlock as B, Transition as V, withCtx as T, createCommentVNode as I, normalizeClass as k, createVNode as C, unref as U, watchEffect as P, Teleport as et, renderSlot as N, toDisplayString as R, Fragment as A, renderList as D, createTextVNode as $, useAttrs as tt, getCurrentInstance as re, reactive as ae, resolveDynamicComponent as ue, mergeProps as nt, createSlots as lt, withModifiers as J, watch as ie, onBeforeUnmount as ot, withDirectives as de, vModelText as rt, vModelDynamic as at, defineComponent as ce } from "vue";
import { useRouter as fe } from "vue-router";
const me = "backToTop.color.default", ve = "formElement.borderSize.default", pe = "formElement.borderColor.default", he = "formElement.borderColor.active", ge = "formElement.borderColor.attention", ye = "formElement.borderRingSize.default", be = "formElement.borderRingColor.default", Ee = "formElementLabel.size.default", _e = "formElementLabel.color.default", Te = "formElementLabel.color.attention", we = "formElementLabel.background.default", xe = "formElementLabel.weight.default", Oe = "formElementHint.size.default", Le = "formElementHint.color.default", ke = "formElementHint.weight.default", Ce = "formElementError.size.default", Ie = "formElementError.color.default", Re = "formElementError.color.hint", Be = "formElementError.weight.default", st = "text.size.default", ut = "text.size.small", it = "text.size.large", dt = "text.size.xlarge", H = "text.color.default", ct = "text.color.light", ft = "text.color.highlight", mt = "text.weight.default", vt = "text.weight.highlight", j = "formElementInput.fontWeight.default", G = "formElementInput.textSize.default", Q = "formElementInput.caretColor.default", ee = "formElementInput.textColor.default", te = "formElementInput.backgroundColor.default", ne = "formElementInput.placeholderColor.default", Se = "formElementSelect.fontWeight.default", X = "formElementSelect.textSize.default", $e = "formElementSelect.textColor.default", pt = "formElementRadio.fontWeight.default", Fe = "formElementRadio.textSize.default", Y = "formElementRadio.textColor.default", Ne = "formElementRadio.textColor.disabled", ze = "button.background.default", Me = "button.background.attention", Ae = "button.background.secondary", De = "button.background.inherit", ht = "button.borderColor.default", Ue = "button.borderColor.secondary", qe = "button.borderColor.attention", He = "button.borderColor.inverted", Ve = "button.color.default", Pe = "button.color.attention", je = "button.color.secondary", Ge = "button.color.light", gt = "button.color.highlight", yt = "button.color.inherit", We = "button.size.default", Ze = "button.size.small", Ke = "button.weight.default", bt = "link.size.default", Et = "link.size.small", _t = "link.size.large", Tt = "link.color.default", wt = "link.color.attention", xt = "link.color.secondary", Ot = "link.color.light", Lt = "link.color.highlight", kt = "link.color.inherit", Ct = "link.border.default", It = "link.border.attention", Rt = "link.border.secondary", Bt = "link.weight.default", W = l("text-lg"), Z = l("font-medium placeholder:font-normal"), Xe = {
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: Z
},
textSize: {
default: W
},
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: Z
},
textSize: {
default: W
},
textColor: {
default: l("text-gray-900 dark:text-gray-400")
}
},
formElementRadio: {
fontWeight: {
default: Z
},
textSize: {
default: W
},
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 Ye(e) {
return e.split(".").reduce((t, a) => t[a], Xe);
}
const Je = function(e, n) {
const t = Ye(e);
if (!t)
throw new Error(`Could not find a theme property with key ${e}. Does property exist?`);
t.value = n;
}, St = function(e, n) {
n && Object.entries(n).forEach(([t, a]) => {
Je(t, a);
});
}, r = function(e) {
return Ye(e);
}, $t = function() {
return Xe;
}, Ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
BACK_TO_TOP_COLOR_DEFAULT: me,
BUTTON_BACKGROUND_ATTENTION: Me,
BUTTON_BACKGROUND_DEFAULT: ze,
BUTTON_BACKGROUND_INHERIT: De,
BUTTON_BACKGROUND_SECONDARY: Ae,
BUTTON_BORDER_COLOR_ATTENTION: qe,
BUTTON_BORDER_COLOR_DEFAULT: ht,
BUTTON_BORDER_COLOR_INVERTED: He,
BUTTON_BORDER_COLOR_SECONDARY: Ue,
BUTTON_COLOR_ATTENTION: Pe,
BUTTON_COLOR_DEFAULT: Ve,
BUTTON_COLOR_HIGHLIGHT: gt,
BUTTON_COLOR_INHERIT: yt,
BUTTON_COLOR_LIGHT: Ge,
BUTTON_COLOR_SECONDARY: je,
BUTTON_SIZE_DEFAULT: We,
BUTTON_SIZE_SMALL: Ze,
BUTTON_WEIGHT_DEFAULT: Ke,
FORM_ELEMENT_BORDER_COLOR_ACTIVE: he,
FORM_ELEMENT_BORDER_COLOR_ATTENTION: ge,
FORM_ELEMENT_BORDER_COLOR_DEFAULT: pe,
FORM_ELEMENT_BORDER_RING_COLOR_DEFAULT: be,
FORM_ELEMENT_BORDER_RING_SIZE_DEFAULT: ye,
FORM_ELEMENT_BORDER_SIZE_DEFAULT: ve,
FORM_ELEMENT_ERROR_COLOR_DEFAULT: Ie,
FORM_ELEMENT_ERROR_COLOR_HINT: Re,
FORM_ELEMENT_ERROR_SIZE_DEFAULT: Ce,
FORM_ELEMENT_ERROR_WEIGHT_DEFAULT: Be,
FORM_ELEMENT_HINT_COLOR_DEFAULT: Le,
FORM_ELEMENT_HINT_SIZE_DEFAULT: Oe,
FORM_ELEMENT_HINT_WEIGHT_DEFAULT: ke,
FORM_ELEMENT_INPUT_BACKGROUND_COLOR_DEFAULT: te,
FORM_ELEMENT_INPUT_CARET_COLOR_DEFAULT: Q,
FORM_ELEMENT_INPUT_FONT_WEIGHT_DEFAULT: j,
FORM_ELEMENT_INPUT_PLACEHOLDER_COLOR_DEFAULT: ne,
FORM_ELEMENT_INPUT_TEXT_COLOR_DEFAULT: ee,
FORM_ELEMENT_INPUT_TEXT_SIZE_DEFAULT: G,
FORM_ELEMENT_LABEL_BACKGROUND_DEFAULT: we,
FORM_ELEMENT_LABEL_COLOR_ATTENTION: Te,
FORM_ELEMENT_LABEL_COLOR_DEFAULT: _e,
FORM_ELEMENT_LABEL_SIZE_DEFAULT: Ee,
FORM_ELEMENT_LABEL_WEIGHT_DEFAULT: xe,
FORM_ELEMENT_RADIO_FONT_WEIGHT_DEFAULT: pt,
FORM_ELEMENT_RADIO_TEXT_COLOR_DEFAULT: Y,
FORM_ELEMENT_RADIO_TEXT_COLOR_DISABLED: Ne,
FORM_ELEMENT_RADIO_TEXT_SIZE_DEFAULT: Fe,
FORM_ELEMENT_SELECT_FONT_WEIGHT_DEFAULT: Se,
FORM_ELEMENT_SELECT_TEXT_COLOR_DEFAULT: $e,
FORM_ELEMENT_SELECT_TEXT_SIZE_DEFAULT: X,
LINK_BORDER_ATTENTION: It,
LINK_BORDER_DEFAULT: Ct,
LINK_BORDER_SECONDARY: Rt,
LINK_COLOR_ATTENTION: wt,
LINK_COLOR_DEFAULT: Tt,
LINK_COLOR_HIGHLIGHT: Lt,
LINK_COLOR_INHERIT: kt,
LINK_COLOR_LIGHT: Ot,
LINK_COLOR_SECONDARY: xt,
LINK_SIZE_DEFAULT: bt,
LINK_SIZE_LARGE: _t,
LINK_SIZE_SMALL: Et,
LINK_WEIGHT_DEFAULT: Bt,
TEXT_COLOR_DEFAULT: H,
TEXT_COLOR_HIGHLIGHT: ft,
TEXT_COLOR_LIGHT: ct,
TEXT_SIZE_DEFAULT: st,
TEXT_SIZE_LARGE: it,
TEXT_SIZE_SMALL: ut,
TEXT_SIZE_XLARGE: dt,
TEXT_WEIGHT_DEFAULT: mt,
TEXT_WEIGHT_HIGHLIGHT: vt,
getTheme: $t,
getThemeProperty: r,
install: St,
update: Je
}, Symbol.toStringTag, { value: "Module" }));
function Nt(e, n) {
return u(), h("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"
}, [
m("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "m4.5 15.75 7.5-7.5 7.5 7.5"
})
]);
}
function zt(e, n) {
return u(), h("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"
}, [
m("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 Mt(e, n) {
return u(), h("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"
}, [
m("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 At(e, n, t) {
var a, c, i;
t === void 0 && (t = {});
var g = (a = t.isImmediate) != null && a, p = (c = t.callback) != null && c, y = t.maxWait, E = Date.now(), x = [];
function w() {
if (y !== void 0) {
var d = Date.now() - E;
if (d + n >= y) return y - d;
}
return n;
}
var v = function() {
var d = [].slice.call(arguments), o = this;
return new Promise(function(f, b) {
var L = g && i === void 0;
if (i !== void 0 && clearTimeout(i), i = setTimeout(function() {
if (i = void 0, E = Date.now(), !g) {
var _ = e.apply(o, d);
p && p(_), x.forEach(function(S) {
return (0, S.resolve)(_);
}), x = [];
}
}, w()), L) {
var O = e.apply(o, d);
return p && p(O), f(O);
}
x.push({ resolve: f, reject: b });
});
};
return v.cancel = function(d) {
i !== void 0 && clearTimeout(i), x.forEach(function(o) {
return (0, o.reject)(d);
}), x = [];
}, v;
}
const Un = {
__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(me).value}`), a = l(0), c = s(() => a.value > n.offset), i = At(() => {
a.value = g();
}, 100), g = () => window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, p = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
return Qe(() => {
a.value = g(), window.addEventListener("scroll", () => i());
}), (y, E) => (u(), B(V, { name: "dsq-back-to-top" }, {
default: T(() => [
c.value ? (u(), h("button", {
key: 0,
class: k(t.value),
onClick: p
}, [
C(U(Nt), { class: "w-12 h-12" })
], 2)) : I("", !0)
]),
_: 1
}));
}
}, Dt = { class: "absolute right-4" }, Ut = {
class: "w-6 h-6",
fill: "none",
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
viewBox: "0 0 24 24"
}, qn = {
__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 y = "pl-3 py-3 pr-12 w-full bg-lime-300 flex items-center justify-center font-medium shadow-sm ";
return a.bottom ? y += "bottom-0 " : y += "top-0 ", a.parent ? y += "fixed z-50" : y += "absolute z-10", y;
}), p = () => {
c.value = !0;
};
return P(() => {
i.value ? t("open") : t("close");
}), (y, E) => (u(), B(et, {
class: "w-full relative",
disabled: !e.parent,
to: e.parent
}, [
i.value ? (u(), h("div", {
key: 0,
class: k(["dsq-banner", g.value])
}, [
N(y.$slots, "default"),
m("div", Dt, [
m("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: p
}, [
(u(), h("svg", Ut, [
m("title", null, R(e.closeButtonTitle), 1),
E[0] || (E[0] = m("path", { d: "M6 18L18 6M6 6l12 12" }, null, -1))
]))
])
])
], 2)) : I("", !0)
], 8, ["disabled", "to"]));
}
};
function qt(e, n) {
return u(), h("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 16 16",
fill: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
m("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(), h("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 16 16",
fill: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
m("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 Vt(e, n) {
return u(), h("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 16 16",
fill: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
m("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 Pt = ["href", "rel", "target"], jt = {
__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 = fe(), 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 : ""), p = s(() => t.light ? "" : r("link.weight.default").value), y = s(() => t.small ? "hover:border-b-2" : "hover:border-b-4"), E = s(() => {
const O = ["no-underline!"];
return v.value && O.push("external-link-icon"), t.invert ? O.push(`p-3 ${c.value} ${i.value} ${a.value} ${g.value} ${p.value} hover:shadow-md rounded-lg transform transition-transform hover:-translate-y-1`) : O.push(`${a.value} ${c.value} ${i.value} animate ${p.value} ${y.value} cursor-pointer`), O.join(" ");
}), x = s(() => t.href[0] === "/" || t.href.indexOf(".") === -1), w = s(() => {
const { hostname: O } = (t.window ?? window).location;
return O;
}), v = s(() => {
const O = w.value.split(".").slice(-2).join(".");
return !t.href.includes(O) && !x.value;
}), d = s(() => x.value || t.href.includes(`/${w.value}/`)), o = s(() => t.href.includes("#")), f = s(() => v.value ? "noopener noreferrer" : ""), b = s(() => t.target ? t.target : v.value ? "_blank" : "_self");
function L(O) {
if (o.value && d.value) {
const _ = t.href.substring(t.href.indexOf("#")), S = window.document.querySelector(_);
if (S) {
S.scrollTo({ behavior: "smooth" });
return;
}
}
x.value && (O.preventDefault(), O.stopImmediatePropagation(), n.push(t.href));
}
return (O, _) => (u(), h("a", {
class: k(["dsq-nav-link", E.value]),
href: e.href,
rel: f.value,
target: b.value,
onClick: _[0] || (_[0] = (S) => L(S))
}, [
N(O.$slots, "default")
], 10, Pt));
}
}, F = {
__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, p) => (u(), h("span", {
class: k(["dsq-text", i.value])
}, [
N(g.$slots, "default")
], 2));
}
}, Gt = {
"aria-label": "Breadcrumb",
class: "dsq-breadcrumbs flex bg-inherit"
}, Wt = { class: "inline-flex items-center space-x-1 md:space-x-3 rtl:space-x-reverse" }, Zt = { class: "flex items-center" }, Kt = {
key: 3,
class: "ms-1 md:ms-2 font-medium text-gray-500 dark:text-gray-700"
}, Hn = {
__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(), h("nav", Gt, [
m("ol", Wt, [
(u(!0), h(A, null, D(e.crumbs, (i, g) => (u(), h("li", {
key: g,
class: "inline-flex items-center"
}, [
m("div", Zt, [
g === 0 ? (u(), B(U(Ht), {
key: 0,
class: "w-5 h-5 mr-1 text-gray-500 dark:text-gray-700 mr-2"
})) : (u(), B(U(qt), {
key: 1,
class: "w-6 h-6 mr-1 text-gray-500 dark:text-gray-700"
})),
i.path ? (u(), B(jt, {
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(() => [
C(F, {
"inherit-color": !0,
small: !0
}, {
default: T(() => [
$(R(i.name), 1)
]),
_: 2
}, 1024)
]),
_: 2
}, 1032, ["href", "light"])) : (u(), h("span", Kt, [
C(F, {
"inherit-color": !0,
light: t(g),
small: !0
}, {
default: T(() => [
$(R(i.name), 1)
]),
_: 2
}, 1032, ["light"])
]))
])
]))), 128))
])
]));
}
}, Xt = ["id"], Yt = {
key: 0,
class: "component-properties-model-value"
}, Jt = {
key: 1,
class: "component-properties-preview"
}, Qt = { class: "" }, en = { class: "grid grid-cols-4 pb-4 pl-4 rounded-t-lg border-b-2 border-stone-300" }, tn = ["value", "onInput"], nn = ["value", "onInput"], ln = ["value", "onInput"], on = {
key: 2,
class: "component-emits-preview"
}, rn = { class: "" }, an = { class: "grid grid-cols-4 pb-4 pl-4 rounded-t-lg border-b-2 border-stone-300" }, Vn = {
__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 = tt(), t = e, a = l(t.initialValue), c = s(() => t.type.toLocaleLowerCase() + "-preview"), i = s(() => re().appContext.components[t.type].props);
function g(v, d, o) {
return d[v] != null ? d[v] : o;
}
const p = s(() => {
const v = Object.entries(i.value).reduce((d, [o, f]) => (d[o] = g(o, n, f.default), d), {});
return i.value.name && (v.name = g("name", t, i.value.name.default)), ae(v);
}), y = s(() => {
let v = i.value;
return v || (v = {}), Object.entries(v).sort(([d], [o]) => d.localeCompare(o)).reduce((d, [o, f], b) => {
var L, O;
return f.__hideInPreview ? d : Object.assign(d, ae({
[o]: {
name: o,
type: ((L = f.type) == null ? void 0 : L.prototype.constructor.name) || "unknown",
allowInput: ((O = f.type) == null ? void 0 : O.prototype.constructor.name) !== "Function" || !1,
default: f.default,
index: b
}
}));
}, {});
}), E = s(() => re().appContext.components[t.type].emits), x = s(() => {
var v;
return ((v = E.value) == null ? void 0 : v.length) > 0;
});
function w(v, d) {
const { value: o } = d.target;
v.type === "Boolean" ? o === "false" ? p.value[v.name] = !1 : p.value[v.name] = !!o : v.type === "Array" ? p.value[v.name] = JSON.parse(o) : v.type === "Number" ? p.value[v.name] = Number(o) : p.value[v.name] = o;
}
return (v, d) => (u(), h(A, null, [
m("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(), B(ue(e.type), nt(p.value, {
modelValue: a.value,
"onUpdate:modelValue": d[0] || (d[0] = (o) => a.value = o)
}), lt({ _: 2 }, [
D(v.$slots, (o, f) => ({
name: f,
fn: T(() => [
N(v.$slots, f)
])
}))
]), 1040, ["modelValue"]))
], 8, Xt),
e.attachVModel ? (u(), h("div", Yt, [
C(F, null, {
default: T(() => [
d[1] || (d[1] = $(" Component Value: ")),
C(F, { highlight: !0 }, {
default: T(() => [
$(R(a.value), 1)
]),
_: 1
})
]),
_: 1
})
])) : I("", !0),
e.showProperties ? (u(), h("div", Jt, [
d[7] || (d[7] = m("h3", { class: "text-xl font-medium inline-block" }, " Properties ", -1)),
m("div", Qt, [
m("div", en, [
m("div", null, [
C(F, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: T(() => d[2] || (d[2] = [
$(" Name ")
])),
_: 1
})
]),
m("div", null, [
C(F, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: T(() => d[3] || (d[3] = [
$(" Type ")
])),
_: 1
})
]),
m("div", null, [
C(F, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: T(() => d[4] || (d[4] = [
$(" Default ")
])),
_: 1
})
]),
m("div", null, [
C(F, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: T(() => d[5] || (d[5] = [
$(" Value ")
])),
_: 1
})
])
]),
(u(!0), h(A, null, D(y.value, (o) => (u(), h("div", {
key: o.name,
class: "grid grid-cols-4 border-b-2 border-stone-300 border-solid py-4 pl-4"
}, [
m("div", null, [
C(F, {
class: "",
small: !1
}, {
default: T(() => [
$(R(o.name), 1)
]),
_: 2
}, 1024)
]),
m("div", null, [
C(F, {
class: "",
small: !1
}, {
default: T(() => [
$(R(o.type), 1)
]),
_: 2
}, 1024)
]),
m("div", null, [
C(F, {
class: "",
small: !1
}, {
default: T(() => [
$(R(o.default), 1)
]),
_: 2
}, 1024)
]),
m("div", null, [
o.allowInput && o.type === "Boolean" ? (u(), h("select", {
key: 0,
class: "w-24 text-lg",
value: p.value[o.name],
onInput: (f) => w(o, f)
}, d[6] || (d[6] = [
m("option", { class: "w-24 text-lg" }, " true ", -1),
m("option", { class: "w-24 text-lg" }, " false ", -1)
]), 40, tn)) : o.allowInput && o.type === "Array" ? (u(), h("input", {
key: 1,
class: "text-base border-b-2 border-b-solid border-gray-900 w-20",
value: JSON.stringify(p.value[o.name]),
onInput: (f) => w(o, f)
}, null, 40, nn)) : o.allowInput ? (u(), h("input", {
key: 2,
class: "text-base border-b-2 border-b-solid border-gray-900 w-20",
value: p.value[o.name],
onInput: (f) => w(o, f)
}, null, 40, ln)) : I("", !0)
])
]))), 128))
])
])) : I("", !0),
x.value && e.showEvents ? (u(), h("div", on, [
d[9] || (d[9] = m("h3", { class: "text-xl font-medium inline-block" }, " Emits ", -1)),
m("div", rn, [
m("div", an, [
m("div", null, [
C(F, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: T(() => d[8] || (d[8] = [
$(" Event ")
])),
_: 1
})
])
]),
(u(!0), h(A, null, D(E.value, (o) => (u(), h("div", {
key: o,
class: "grid grid-cols-4 border-b-2 border-stone-300 border-solid py-4 pl-4"
}, [
m("div", null, [
C(F, {
class: "",
small: !1
}, {
default: T(() => [
$(R(o), 1)
]),
_: 2
}, 1024)
])
]))), 128))
])
])) : I("", !0)
], 64));
}
}, sn = { class: "flex flex-col" }, Pn = {
__name: "drop-down-menu-banner-item",
props: {
show: {
type: Boolean,
default: !0
}
},
setup(e) {
return (n, t) => e.show ? (u(), h("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] = J(() => {
}, ["prevent"]))
}, [
m("div", sn, [
N(n.$slots, "default")
])
])) : I("", !0);
}
}, un = { class: "flex items-center text-gray-500 group-hover:text-gray-900" }, jn = {
__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 = fe(), t = e;
function a() {
t.href && n.push({ path: t.href });
}
return (c, i) => e.show ? (u(), h("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: J(a, ["prevent"])
}, [
m("div", un, [
N(c.$slots, "default")
]),
m("span", null, R(e.label), 1)
])) : I("", !0);
}
}, dn = () => 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;
}, le = (e, n) => {
const t = e.__vccOpts || e;
for (const [a, c] of n)
t[a] = c;
return t;
}, cn = { class: "text-left text-lg" }, se = "scroll", fn = {
__name: "drop-down-menu",
props: {
show: {
type: Boolean,
default: !0
},
calculatePositionDynamically: {
type: Boolean,
default: !0
}
},
setup(e) {
const n = e, a = dn()(y, 50);
let c = !1;
const i = l();
ie([n, i], y), ot(() => {
c && window.removeEventListener(se, y), a.clear();
});
function g() {
c || (c = !0, window.addEventListener(se, a, { passive: !0 }));
}
function p() {
c = !1;
}
function y() {
if (n.calculatePositionDynamically)
n.show && i.value ? (E(), g()) : !n.show && c && p();
else return;
}
function E() {
const v = i.value.parentElement.getBoundingClientRect(), { top: d } = v;
if (x(v)) {
const o = i.value;
let f = o.getBoundingClientRect();
o.style.top = `${d}px`;
for (let b = 1; x(f) === !1 && b < 20; b++)
o.style.top = `${d - 20 * b}px`, f = o.getBoundingClientRect();
}
}
function x(w) {
return w.top >= 0 && w.left >= 0 && w.bottom <= (window.innerHeight || document.documentElement.clientHeight) && w.right <= (window.innerWidth || document.documentElement.clientWidth);
}
return (w, v) => (u(), B(V, { name: "modal" }, {
default: T(() => [
e.show ? (u(), h("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"
}, [
m("ul", cn, [
N(w.$slots, "default", {}, void 0, !0)
])
], 512)) : I("", !0)
]),
_: 3
}));
}
}, Gn = /* @__PURE__ */ le(fn, [["__scopeId", "data-v-b4d166b1"]]), mn = ["id"], vn = {
__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(Re).value) : a.push(r(Ie).value), a.push(r(Ce).value), a.push(r(Be).value), a.join(" ");
});
return (a, c) => e.invalid ? (u(), h("span", {
key: 0,
id: e.id,
class: k(t.value)
}, R(e.description), 11, mn)) : I("", !0);
}
}, pn = ["id"], Wn = {
__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(), h("div", { id: e.id }, [
m("div", {
class: k(t.value)
}, [
N(a.$slots, "default")
], 2)
], 8, pn));
}
}, hn = ["id"], gn = { class: "relative flex bg-inherit" }, yn = ["for"], q = {
__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`), p = s(() => `${n.id}ElementError`), y = s(() => n.pattern && n.showPatternHint && n.focussed && !E.value), E = s(() => n.format && n.showFormatHint && n.focussed), x = s(() => t.value || n.focussed), w = s(() => {
const _ = ["dsq-form-element-container-with-label border-solid bg-inherit flex flex-col rounded-sm"];
return _.push([r(ve).value]), n.disabled ? _.push("cursor-not-allowed") : _.push("cursor-text"), x.value ? (_.push(r(he).value), _.push(r(ye).value, r(be).value)) : i.value ? _.push(r(ge).value) : _.push(r(pe).value), _.join(" ");
}), v = s(() => [
"w-5",
"top-[0.1rem]"
].join(" ")), d = s(() => {
const _ = [
"flex justify-center items-center space-x-1 h-8 px-2 absolute -top-[1.1rem]",
r(Ee).value,
r(we).value,
r(xe).value
];
return n.disabled ? _.push("cursor-not-allowed", "-left-[1.1rem]") : _.push("cursor-text", "-left-[0.65rem]"), i.value && !x.value ? _.push(r(Te).value) : _.push(r(_e).value), _.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(Le).value,
r(Oe).value,
r(ke).value
].join(" ")), f = P(() => {
t.value ? c.value = !0 : c.value && n.focussed === !1 && (a.value = !0, f());
});
function b() {
t.value = !0;
}
function L() {
t.value = !1;
}
function O(_) {
setTimeout(() => {
n.focusInputCallback(_);
});
}
return (_, S) => (u(), h("div", {
id: g.value,
class: k(w.value),
onFocusin: b,
onFocusout: L,
onMouseleave: L,
onMouseover: b
}, [
m("div", gn, [
m("div", {
class: k(d.value)
}, [
e.disabled ? (u(), B(U(Vt), {
key: 0,
class: k(v.value)
}, null, 8, ["class"])) : I("", !0),
m("label", {
for: e.id,
onMousedown: O
}, R(e.label), 41, yn)
], 2),
C(V, { name: "form-element-hint" }, {
default: T(() => [
y.value ? (u(), h("span", {
key: 0,
class: k(o.value),
onMousedown: O
}, "Allowed values: " + R(e.pattern), 35)) : I("", !0)
]),
_: 1
}),
C(V, { name: "form-element-hint" }, {
default: T(() => [
E.value ? (u(), h("span", {
key: 0,
class: k(o.value),
onMousedown: O
}, "Allowed format: " + R(e.format), 35)) : I("", !0)
]),
_: 1
})
]),
m("div", {
class: k(["flex", [i.value ? "" : "pb-1"]])
}, [
N(_.$slots, "default")
], 2),
C(vn, {
id: p.value,
class: "px-3 pb-1",
description: e.description,
invalid: i.value && a.value
}, null, 8, ["id", "description", "invalid"])
], 42, hn));
}
}, bn = { class: "relative pl-3 mt-4 mb-1 flex flex-row items-center" }, En = {
key: 1,
class: "absolute bg-transparent right-0 p-2 text-green-700 outline-hidden",
"click.prevent": ""
}, _n = {
key: 2,
class: "absolute bg-transparent right-0 p-2 text-attention outline-hidden",
"click.prevent": ""
}, Zn = {
__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(G).value, r(j).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 p() {
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 (y, E) => (u(), B(q, {
id: e.id,
description: c.value,
disabled: !0,
"focus-input-callback": y.focusInput,
focussed: !1,
"force-show-error-message": !0,
"input-invalid": a.value,
label: e.label,
"show-format-hint": !1,
"show-pattern-hint": !1,
value: y.modelValue
}, {
default: T(() => [
m("div", bn, [
m("div", {
class: k(["mr-8", i.value])
}, [
C(F, {
id: e.id,
"inherit-font-size": !0
}, {
default: T(() => [
$(R(e.text), 1)
]),
_: 1
}, 8, ["id"])
], 2),
g.value ? (u(), h("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: J(p, ["prevent"])
}, [
C(U(Mt), { class: "h-6 w-6 stroke-2" })
])) : I("", !0),
t.value ? (u(), h("button", En, [
C(U(zt), { class: "h-6 w-6" })
])) : I("", !0),
a.value ? (u(), h("button", _n, E[0] || (E[0] = [
m("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"
}, [
m("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)
]))) : I("", !0)
])
]),
_: 1
}, 8, ["id", "description", "focus-input-callback", "input-invalid", "label", "value"]));
}
}, Tn = { class: "h-0 w-0 invisible absolute" }, wn = ["id", "checked", "disabled", "name", "required", "value"], xn = ["for"], On = { class: "flex items-center" }, Ln = {
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"
}, kn = {
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"
}, Cn = {
key: 1,
d: "M8 01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, Kn = {
__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), p = s(() => t.disabled || g.value), y = s(() => {
const o = ["flex flex-row items-center w-full space-x-2 px-3 py-1 leading-7", r(Fe).value];
return p.value ? (o.push("disabled cursor-not-allowed"), g.value ? o.push(`${r(Y).value}`) : o.push(`${r(Ne).value}`)) : o.push(`${r(Y).value} cursor-pointer`), o.join(" ");
}), E = s(() => {
const o = ["dsq-form-input-radio-wrapper pt-4 flex"];
return t.vertical ? o.push("flex-row") : o.push("flex-col"), o.join(" ");
}), x = s(() => {
const o = ["dsq-form-input-radio-option text-gray-100 flex flex-row items-center"];
return p.value || (t.vertical ? o.push("w-1/2") : o.push("w-full")), o.join(" ");
});
function w(o) {
if (p.value) {
o.preventBubbling();
return;
}
const f = o.target.value;
a("update:modelValue", f), v();
}
function v() {
c.value = !0, setTimeout(d, 1e3);
}
function d() {
c.value = !1;
}
return (o, f) => (u(), B(q, {
id: e.id,
description: i.value,
disabled: p.value,
focussed: c.value,
"input-invalid": e.invalid,
label: e.label
}, {
default: T(() => [
m("fieldset", {
class: k(E.value)
}, [
m("legend", Tn, R(e.label), 1),
(u(!0), h(A, null, D(e.options, (b) => (u(), h("div", {
key: b.value,
class: k(x.value)
}, [
m("input", {
id: "radio_" + e.id + "_" + b.value + "_id",
autocomplete: "off",
checked: b.default === !0 || e.modelValue == b.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: p.value,
name: e.name,
required: e.required,
type: "radio",
value: b.value,
onInput: f[0] || (f[0] = (L) => w(L))
}, null, 40, wn),
m("label", {
class: k(y.value),
for: "radio_" + e.id + "_" + b.value + "_id",
onBlur: f[1] || (f[1] = (L) => d()),
onFocus: f[2] || (f[2] = (L) => v()),
onFocusin: f[3] || (f[3] = (L) => v()),
onFocusout: f[4] || (f[4] = (L) => d())
}, [
m("div", On, [
(u(), h("svg", Ln, [
e.modelValue == b.value ? (u(), h("path", kn)) : (u(), h("path", Cn))
]))
]),
C(F, {
class: "pb-0.5",
highlight: e.modelValue == b.value,
"inherit-color": !0,
"inherit-font-size": !0
}, {
default: T(() => [
$(R(b.label), 1)
]),
_: 2
}, 1032, ["highlight"])
], 42, xn)
], 2))), 128))
], 2)
]),
_: 1
}, 8, ["id", "description", "disabled", "focussed", "input-invalid", "label"]));
}
}, In = ["id", "disabled", "value"], Rn = ["value"], Xn = {
__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), p = 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), y = 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($e).value,
r(X).value,
r(Se).value
].join(" ")), E = s(() => [
"w-24",
r(X).value
].join(" "));
function x() {
g.value = !0;
}
function w() {
g.value = !1;
}
function v(o) {
c.value.dispatchEvent(o);
}
function d() {
const o = c.value.value;
a("update:modelValue", parseInt(o));
}
return (o, f) => (u(), B(q, {
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(() => [
m("select", {
id: e.id,
ref_key: "select",
ref: c,
class: k(y.value),
disabled: e.disabled,
value: p.value,
onBlur: f[0] || (f[0] = (b) => w()),
onFocus: f[1] || (f[1] = (b) => x()),
onFocusin: f[2] || (f[2] = (b) => x()),
onFocusout: f[3] || (f[3] = (b) => w()),
onInput: d
},