@discue/ui-components
Version:
The themeable open source Vue.js UI component library of discue.io
1,616 lines • 54.8 kB
JavaScript
import { ref as l, createElementBlock as g, openBlock as i, createElementVNode as m, computed as s, onMounted as Je, createBlock as F, Transition as H, withCtx as x, createCommentVNode as C, normalizeClass as L, createVNode as k, unref as q, watchEffect as Z, Teleport as Qe, renderSlot as B, toDisplayString as I, useAttrs as et, getCurrentInstance as ee, reactive as te, Fragment as A, resolveDynamicComponent as le, mergeProps as tt, createSlots as nt, renderList as D, createTextVNode as S, 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", be = "formElementHint.size.default", ye = "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", U = "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", Se = "formElementRadio.textSize.default", K = "formElementRadio.textColor.default", Ne = "formElementRadio.textColor.disabled", Fe = "button.background.default", $e = "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", bt = "link.size.small", yt = "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"), Ke = {
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 Ze(e) {
return e.split(".").reduce((t, a) => t[a], Ke);
}
const Xe = function(e, n) {
const t = Ze(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 Ze(e);
}, St = function() {
return Ke;
}, Nt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
BACK_TO_TOP_COLOR_DEFAULT: se,
BUTTON_BACKGROUND_ATTENTION: $e,
BUTTON_BACKGROUND_DEFAULT: Fe,
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: ye,
FORM_ELEMENT_HINT_SIZE_DEFAULT: be,
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: K,
FORM_ELEMENT_RADIO_TEXT_COLOR_DISABLED: Ne,
FORM_ELEMENT_RADIO_TEXT_SIZE_DEFAULT: Se,
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: yt,
LINK_SIZE_SMALL: bt,
LINK_WEIGHT_DEFAULT: It,
TEXT_COLOR_DEFAULT: U,
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: St,
getThemeProperty: r,
install: Bt,
update: Xe
}, Symbol.toStringTag, { value: "Module" }));
function Ft(e, n) {
return i(), g("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 $t(e, n) {
return i(), g("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 zt(e, n) {
return i(), g("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 Mt(e, n, t) {
var a, d, c;
t === void 0 && (t = {});
var E = (a = t.isImmediate) != null && a, p = (d = t.callback) != null && d, h = t.maxWait, y = Date.now(), O = [];
function w() {
if (h !== void 0) {
var u = Date.now() - y;
if (u + n >= h) return h - u;
}
return n;
}
var v = function() {
var u = [].slice.call(arguments), o = this;
return new Promise(function(f, b) {
var _ = E && c === void 0;
if (c !== void 0 && clearTimeout(c), c = setTimeout(function() {
if (c = void 0, y = Date.now(), !E) {
var T = e.apply(o, u);
p && p(T), O.forEach(function($) {
return (0, $.resolve)(T);
}), O = [];
}
}, w()), _) {
var R = e.apply(o, u);
return p && p(R), f(R);
}
O.push({ resolve: f, reject: b });
});
};
return v.cancel = function(u) {
c !== void 0 && clearTimeout(c), O.forEach(function(o) {
return (0, o.reject)(u);
}), O = [];
}, v;
}
const In = {
__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), d = s(() => a.value > n.offset), c = Mt(() => {
a.value = E();
}, 100), E = () => window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, p = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
return Je(() => {
a.value = E(), window.addEventListener("scroll", () => c());
}), (h, y) => (i(), F(H, { name: "dsq-back-to-top" }, {
default: x(() => [
d.value ? (i(), g("button", {
key: 0,
class: L(t.value),
onClick: p
}, [
k(q(Ft), { class: "w-12 h-12" })
], 2)) : C("", !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"
}, Bn = {
__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, d = l(!1), c = s(() => a.show ? !d.value && a.show : !1), E = s(() => {
let h = "pl-3 py-3 pr-12 w-full bg-lime-300 flex items-center justify-center font-medium shadow-sm ";
return a.bottom ? h += "bottom-0 " : h += "top-0 ", a.parent ? h += "fixed z-50" : h += "absolute z-10", h;
}), p = () => {
d.value = !0;
};
return Z(() => {
c.value ? t("open") : t("close");
}), (h, y) => (i(), F(Qe, {
class: "w-full relative",
disabled: !e.parent,
to: e.parent
}, [
c.value ? (i(), g("div", {
key: 0,
class: L(["dsq-banner", E.value])
}, [
B(h.$slots, "default"),
m("div", At, [
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
}, [
(i(), g("svg", Dt, [
m("title", null, I(e.closeButtonTitle), 1),
y[0] || (y[0] = m("path", { d: "M6 18L18 6M6 6l12 12" }, null, -1))
]))
])
])
], 2)) : C("", !0)
], 8, ["disabled", "to"]));
}
}, 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), d = 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), c = s(() => `${d.value} ${t.value} ${a.value}`);
return (E, p) => (i(), g("span", {
class: L(["dsq-text", c.value])
}, [
B(E.$slots, "default")
], 2));
}
}, Ut = ["id"], Ht = {
key: 0,
class: "component-properties-model-value"
}, qt = {
key: 1,
class: "component-properties-preview"
}, Vt = { class: "" }, Pt = { class: "grid grid-cols-4 pb-4 pl-4 rounded-t-lg border-b-2 border-stone-300" }, jt = ["value", "onInput"], Gt = ["value", "onInput"], Wt = ["value", "onInput"], Kt = {
key: 2,
class: "component-emits-preview"
}, Zt = { class: "" }, Xt = { class: "grid grid-cols-4 pb-4 pl-4 rounded-t-lg border-b-2 border-stone-300" }, Sn = {
__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), d = s(() => t.type.toLocaleLowerCase() + "-preview"), c = s(() => ee().appContext.components[t.type].props);
function E(v, u, o) {
return u[v] != null ? u[v] : o;
}
const p = s(() => {
const v = Object.entries(c.value).reduce((u, [o, f]) => (u[o] = E(o, n, f.default), u), {});
return c.value.name && (v.name = E("name", t, c.value.name.default)), te(v);
}), h = s(() => {
let v = c.value;
return v || (v = {}), Object.entries(v).sort(([u], [o]) => u.localeCompare(o)).reduce((u, [o, f], b) => {
var _, R;
return f.__hideInPreview ? u : Object.assign(u, te({
[o]: {
name: o,
type: ((_ = f.type) == null ? void 0 : _.prototype.constructor.name) || "unknown",
allowInput: ((R = f.type) == null ? void 0 : R.prototype.constructor.name) !== "Function" || !1,
default: f.default,
index: b
}
}));
}, {});
}), y = s(() => ee().appContext.components[t.type].emits), O = s(() => {
var v;
return ((v = y.value) == null ? void 0 : v.length) > 0;
});
function w(v, u) {
const { value: o } = u.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, u) => (i(), g(A, null, [
m("div", {
id: d.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"
}, [
(i(), F(le(e.type), tt(p.value, {
modelValue: a.value,
"onUpdate:modelValue": u[0] || (u[0] = (o) => a.value = o)
}), nt({ _: 2 }, [
D(v.$slots, (o, f) => ({
name: f,
fn: x(() => [
B(v.$slots, f)
])
}))
]), 1040, ["modelValue"]))
], 8, Ut),
e.attachVModel ? (i(), g("div", Ht, [
k(N, null, {
default: x(() => [
u[1] || (u[1] = S(" Component Value: ")),
k(N, { highlight: !0 }, {
default: x(() => [
S(I(a.value), 1)
]),
_: 1
})
]),
_: 1
})
])) : C("", !0),
e.showProperties ? (i(), g("div", qt, [
u[7] || (u[7] = m("h3", { class: "text-xl font-medium inline-block" }, " Properties ", -1)),
m("div", Vt, [
m("div", Pt, [
m("div", null, [
k(N, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: x(() => u[2] || (u[2] = [
S(" Name ")
])),
_: 1
})
]),
m("div", null, [
k(N, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: x(() => u[3] || (u[3] = [
S(" Type ")
])),
_: 1
})
]),
m("div", null, [
k(N, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: x(() => u[4] || (u[4] = [
S(" Default ")
])),
_: 1
})
]),
m("div", null, [
k(N, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: x(() => u[5] || (u[5] = [
S(" Value ")
])),
_: 1
})
])
]),
(i(!0), g(A, null, D(h.value, (o) => (i(), g("div", {
key: o.name,
class: "grid grid-cols-4 border-b-2 border-stone-300 border-solid py-4 pl-4"
}, [
m("div", null, [
k(N, {
class: "",
small: !1
}, {
default: x(() => [
S(I(o.name), 1)
]),
_: 2
}, 1024)
]),
m("div", null, [
k(N, {
class: "",
small: !1
}, {
default: x(() => [
S(I(o.type), 1)
]),
_: 2
}, 1024)
]),
m("div", null, [
k(N, {
class: "",
small: !1
}, {
default: x(() => [
S(I(o.default), 1)
]),
_: 2
}, 1024)
]),
m("div", null, [
o.allowInput && o.type === "Boolean" ? (i(), g("select", {
key: 0,
class: "w-24 text-lg",
value: p.value[o.name],
onInput: (f) => w(o, f)
}, u[6] || (u[6] = [
m("option", { class: "w-24 text-lg" }, " true ", -1),
m("option", { class: "w-24 text-lg" }, " false ", -1)
]), 40, jt)) : o.allowInput && o.type === "Array" ? (i(), g("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, Gt)) : o.allowInput ? (i(), g("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, Wt)) : C("", !0)
])
]))), 128))
])
])) : C("", !0),
O.value && e.showEvents ? (i(), g("div", Kt, [
u[9] || (u[9] = m("h3", { class: "text-xl font-medium inline-block" }, " Emits ", -1)),
m("div", Zt, [
m("div", Xt, [
m("div", null, [
k(N, {
class: "uppercase",
highlight: !0,
small: !0
}, {
default: x(() => u[8] || (u[8] = [
S(" Event ")
])),
_: 1
})
])
]),
(i(!0), g(A, null, D(y.value, (o) => (i(), g("div", {
key: o,
class: "grid grid-cols-4 border-b-2 border-stone-300 border-solid py-4 pl-4"
}, [
m("div", null, [
k(N, {
class: "",
small: !1
}, {
default: x(() => [
S(I(o), 1)
]),
_: 2
}, 1024)
])
]))), 128))
])
])) : C("", !0)
], 64));
}
}, Yt = { class: "flex flex-col" }, Nn = {
__name: "drop-down-menu-banner-item",
props: {
show: {
type: Boolean,
default: !0
}
},
setup(e) {
return (n, t) => e.show ? (i(), g("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"]))
}, [
m("div", Yt, [
B(n.$slots, "default")
])
])) : C("", !0);
}
}, Jt = { class: "flex items-center text-gray-500 group-hover:text-gray-900" }, Fn = {
__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 (d, c) => e.show ? (i(), g("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"])
}, [
m("div", Jt, [
B(d.$slots, "default")
]),
m("span", null, I(e.label), 1)
])) : C("", !0);
}
}, Qt = () => function(e, n) {
let t = !1, a = 0, d = 0;
function c() {
t || (t = !0, clearTimeout(d), e.call(), a = setTimeout(() => {
t = !1;
}, n), d = setTimeout(e, n + 5));
}
return c.clear = function() {
clearTimeout(a), clearTimeout(d);
}, c;
}, Ye = (e, n) => {
const t = e.__vccOpts || e;
for (const [a, d] of n)
t[a] = d;
return t;
}, en = { class: "text-left text-lg" }, ne = "scroll", tn = {
__name: "drop-down-menu",
props: {
show: {
type: Boolean,
default: !0
},
calculatePositionDynamically: {
type: Boolean,
default: !0
}
},
setup(e) {
const n = e, a = Qt()(h, 50);
let d = !1;
const c = l();
oe([n, c], h), lt(() => {
d && window.removeEventListener(ne, h), a.clear();
});
function E() {
d || (d = !0, window.addEventListener(ne, a, { passive: !0 }));
}
function p() {
d = !1;
}
function h() {
if (n.calculatePositionDynamically)
n.show && c.value ? (y(), E()) : !n.show && d && p();
else return;
}
function y() {
const v = c.value.parentElement.getBoundingClientRect(), { top: u } = v;
if (O(v)) {
const o = c.value;
let f = o.getBoundingClientRect();
o.style.top = `${u}px`;
for (let b = 1; O(f) === !1 && b < 20; b++)
o.style.top = `${u - 20 * b}px`, f = o.getBoundingClientRect();
}
}
function O(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) => (i(), F(H, { name: "modal" }, {
default: x(() => [
e.show ? (i(), g("div", {
key: 0,
ref_key: "menu",
ref: c,
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", en, [
B(w.$slots, "default", {}, void 0, !0)
])
], 512)) : C("", !0)
]),
_: 3
}));
}
}, $n = /* @__PURE__ */ Ye(tn, [["__scopeId", "data-v-b4d166b1"]]), nn = ["id"], ln = {
__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, d) => e.invalid ? (i(), g("span", {
key: 0,
id: e.id,
class: L(t.value)
}, I(e.description), 11, nn)) : C("", !0);
}
}, on = ["id"], zn = {
__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, d) => (i(), g("div", { id: e.id }, [
m("div", {
class: L(t.value)
}, [
B(a.$slots, "default")
], 2)
], 8, on));
}
};
function rn(e, n) {
return i(), g("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 an = ["id"], sn = { class: "relative flex bg-inherit" }, un = ["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), d = l(!1), c = s(() => n.forceShowErrorMessage && n.inputInvalid || a.value && n.inputInvalid), E = s(() => `${n.id}ElementContainer`), p = s(() => `${n.id}ElementError`), h = s(() => n.pattern && n.showPatternHint && n.focussed && !y.value), y = s(() => n.format && n.showFormatHint && n.focussed), O = s(() => t.value || n.focussed), w = s(() => {
const T = ["dsq-form-element-container-with-label border-solid bg-inherit flex flex-col rounded-sm"];
return T.push([r(ue).value]), n.disabled ? T.push("cursor-not-allowed") : T.push("cursor-text"), O.value ? (T.push(r(de).value), T.push(r(fe).value, r(me).value)) : c.value ? T.push(r(ce).value) : T.push(r(ie).value), T.join(" ");
}), v = s(() => [
"w-5",
"top-[0.1rem]"
].join(" ")), u = s(() => {
const T = [
"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 ? T.push("cursor-not-allowed", "-left-[1.1rem]") : T.push("cursor-text", "-left-[0.65rem]"), c.value && !O.value ? T.push(r(he).value) : T.push(r(pe).value), T.join(" ");
}), o = s(() => [
"absolute -top-2 p-1.5 right-0 leading-7 italic ml-auto transition-opacity duration-200 ease-in",
r(ye).value,
r(be).value,
r(_e).value
].join(" ")), f = Z(() => {
t.value ? d.value = !0 : d.value && n.focussed === !1 && (a.value = !0, f());
});
function b() {
t.value = !0;
}
function _() {
t.value = !1;
}
function R(T) {
setTimeout(() => {
n.focusInputCallback(T);
});
}
return (T, $) => (i(), g("div", {
id: E.value,
class: L(w.value),
onFocusin: b,
onFocusout: _,
onMouseleave: _,
onMouseover: b
}, [
m("div", sn, [
m("div", {
class: L(u.value)
}, [
e.disabled ? (i(), F(q(rn), {
key: 0,
class: L(v.value)
}, null, 8, ["class"])) : C("", !0),
m("label", {
for: e.id,
onMousedown: R
}, I(e.label), 41, un)
], 2),
k(H, { name: "form-element-hint" }, {
default: x(() => [
h.value ? (i(), g("span", {
key: 0,
class: L(o.value),
onMousedown: R
}, "Allowed values: " + I(e.pattern), 35)) : C("", !0)
]),
_: 1
}),
k(H, { name: "form-element-hint" }, {
default: x(() => [
y.value ? (i(), g("span", {
key: 0,
class: L(o.value),
onMousedown: R
}, "Allowed format: " + I(e.format), 35)) : C("", !0)
]),
_: 1
})
]),
m("div", {
class: L([c.value ? "" : "pb-1"])
}, [
B(T.$slots, "default")
], 2),
k(ln, {
id: p.value,
class: "px-3 pb-1",
description: e.description,
invalid: c.value && a.value
}, null, 8, ["id", "description", "invalid"])
], 42, an));
}
}, dn = { class: "relative pl-3 mt-4 mb-1 flex flex-row items-center" }, cn = {
key: 1,
class: "absolute bg-transparent right-0 p-2 text-green-700 outline-hidden",
"click.prevent": ""
}, fn = {
key: 2,
class: "absolute bg-transparent right-0 p-2 text-attention outline-hidden",
"click.prevent": ""
}, Mn = {
__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), d = l(), c = s(() => [r(J).value, r(Y).value]), E = 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, d.value = "Sorry, we were not able to copy to the clipboard at this time. Please copy the text manually.";
}
}
return (h, y) => (i(), F(V, {
id: e.id,
description: d.value,
disabled: !0,
"focus-input-callback": h.focusInput,
focussed: !1,
"force-show-error-message": !0,
"input-invalid": a.value,
label: e.label,
"show-format-hint": !1,
"show-pattern-hint": !1,
value: h.modelValue
}, {
default: x(() => [
m("div", dn, [
m("div", {
class: L(["mr-8", c.value])
}, [
k(N, {
id: e.id,
"inherit-font-size": !0
}, {
default: x(() => [
S(I(e.text), 1)
]),
_: 1
}, 8, ["id"])
], 2),
E.value ? (i(), g("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(p, ["prevent"])
}, [
k(q(zt), { class: "h-6 w-6 stroke-2" })
])) : C("", !0),
t.value ? (i(), g("button", cn, [
k(q($t), { class: "h-6 w-6" })
])) : C("", !0),
a.value ? (i(), g("button", fn, y[0] || (y[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)
]))) : C("", !0)
])
]),
_: 1
}, 8, ["id", "description", "focus-input-callback", "input-invalid", "label", "value"]));
}
}, mn = { class: "h-0 w-0 invisible absolute" }, vn = ["id", "checked", "disabled", "name", "required", "value"], pn = ["for"], hn = { class: "flex items-center" }, gn = {
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"
}, En = {
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"
}, bn = {
key: 1,
d: "M8 01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, An = {
__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, d = l(!1), c = s(() => t.invalidMessage ? t.invalidMessage : t.description), E = s(() => t.options.length === 1), p = s(() => t.disabled || E.value), h = s(() => {
const o = ["flex flex-row items-center w-full space-x-2 px-3 py-1 leading-7", r(Se).value];
return p.value ? (o.push("disabled cursor-not-allowed"), E.value ? o.push(`${r(K).value}`) : o.push(`${r(Ne).value}`)) : o.push(`${r(K).value} cursor-pointer`), o.join(" ");
}), y = 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 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() {
d.value = !0, setTimeout(u, 1e3);
}
function u() {
d.value = !1;
}
return (o, f) => (i(), F(V, {
id: e.id,
description: c.value,
disabled: p.value,
focussed: d.value,
"input-invalid": e.invalid,
label: e.label
}, {
default: x(() => [
m("fieldset", {
class: L(y.value)
}, [
m("legend", mn, I(e.label), 1),
(i(!0), g(A, null, D(e.options, (b) => (i(), g("div", {
key: b.value,
class: L(O.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] = (_) => w(_))
}, null, 40, vn),
m("label", {
class: L(h.value),
for: "radio_" + e.id + "_" + b.value + "_id",
onBlur: f[1] || (f[1] = (_) => u()),
onFocus: f[2] || (f[2] = (_) => v()),
onFocusin: f[3] || (f[3] = (_) => v()),
onFocusout: f[4] || (f[4] = (_) => u())
}, [
m("div", hn, [
(i(), g("svg", gn, [
e.modelValue == b.value ? (i(), g("path", En)) : (i(), g("path", bn))
]))
]),
k(N, {
class: "pb-0.5",
highlight: e.modelValue == b.value,
"inherit-color": !0,
"inherit-font-size": !0
}, {
default: x(() => [
S(I(b.label), 1)
]),
_: 2
}, 1032, ["highlight"])
], 42, pn)
], 2))), 128))
], 2)
]),
_: 1
}, 8, ["id", "description", "disabled", "focussed", "input-invalid", "label"]));
}
}, yn = ["id", "disabled", "value"], _n = ["value"], Dn = {
__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, d = l(null), c = l(!1), E = 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), h = 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(" ")), y = s(() => [
"w-24",
r(W).value
].join(" "));
function O() {
E.value = !0;
}
function w() {
E.value = !1;
}
function v(o) {
d.value.dispatchEvent(o);
}
function u() {
const o = d.value.value;
a("update:modelValue", parseInt(o));
}
return (o, f) => (i(), F(V, {
id: e.id,
description: e.description,
disabled: e.disabled,
"focus-input-callback": v,
focussed: E.value,
"force-show-error-message": e.forceShowErrorMessage,
"input-invalid": c.value,
label: e.label,
"show-format-hint": !1,
"show-pattern-hint": !1
}, {
default: x(() => [
m("select", {
id: e.id,
ref_key: "select",
ref: d,
class: L(h.value),
disabled: e.disabled,
value: p.value,
onBlur: f[0] || (f[0] = (b) => w()),
onFocus: f[1] || (f[1] = (b) => O()),
onFocusin: f[2] || (f[2] = (b) => O()),
onFocusout: f[3] || (f[3] = (b) => w()),
onInput: u
}, [
(i(!0), g(A, null, D(e.elements, (b, _) => (i(), g("option", {
key: b.id,
class: L(y.value),
value: _
}, I(b.name || b.alias), 11, _n))), 128))
], 42, yn)
]),
_: 1
}, 8, ["id", "description", "disabled", "focussed", "force-show-error-message", "input-invalid", "label"]));
}
}, Tn = ["id", "disabled", "name", "pattern", "placeholder", "required", "type"], wn = {
__name: "form-input",
props: {
id: {
type: String,
required: !0
},
name: {
type: String,
required: !0
},
disabled: {
type: Boolean,
default: !1
},
type: {
type: String,
default: "text"
},
modelValue: {
type: String
},
label: {
type: String,
required: !0
},
invalidMessage: {
type: String
},
invalid: {
type: Boolean
},
placeholder: {
type: String
},
description: {
type: String
},
required: {
type: Boolean,
default: !0
},
pattern: {
type: String,
default: ".*"
},
patternUnicode: {
type: Boolean,
default: !1
},
showPatternHint: {
type: Boolean,
default: !0
},
format: {
type: String
},
showFormatHint: {
type: Boolean,
default: !1
},
allowedCharactersSupersetPattern: {
type: String
}
},
emits: ["update:modelValue"],
setup(e, { emit: n }) {
const t = e, a = n, d = l(null), c = l(!1), E = l(!1), p = l(!1), h = l(""), y = l(), O = s(() => new RegExp(t.pattern, "u"));
Z(() => {
y.value = t.modelValue;
}), oe(y, ($) => {
if (!t.disabled) {
if (t.pattern) {
if (O.value.test($))
h.value = "", E.value = !1, p.value = !1;
else if (E.value = !0, f.value) {
const M = $.match(f.value, "gu"), Q = [...new Set(M)];
Q.length && (p.value = !0), h.value = Q.join(", ");
}
}
E.value === !1 && a("update:modelValue", $);
}
});
const w = s(() => t.invalidMessage || o.value || t.description), v = s(() => E.value || t.invalid), u = s(() => t.invalid || p.value), o = s(() => h.value ? `Sorry, the following characters are not allowed here: ${h.value}` : ""), f = s(() => t.allowedCharactersSupersetPattern ? new RegExp(`[^(${t.allowedCharactersSupersetPattern})]`, "gu") : null), b = s(() => {
const $ = [
"dsq-form-input mt-4 outline-hidden px-3 leading-8 placeholder:italic",
r(Le).value,
r(Ce).value,
r(Re).value,
r(J).value,
r(ke).value,
r(Y).value
];
return t.disabled ? $.push("cursor-not-allowed") : $.push("cursor-text"), $.join(" ");
});
function _() {
d.value.focus();
}
function R() {
c.value = !1;
}
function T() {
c.value = !0;
}
return ($, z) => (i(), F(V, {
id: e.id,
description: w.value,
disabled: e.disabled,
"focus-input-callback": _,
focussed: c.value,
"force-show-error-message": u.value,
format: e.format,
"input-invalid": v.value,
label: e.label,
pattern: e.pattern,
"show-format-hint": e.showFormatHint,
"show-pattern-hint": e.showPatternHint,
value: e.modelValue
}, {
default: x(() => [
ot(m("input", {
id: e.id,
ref_key: "input",
ref: d,
"onUpdate:modelValue": z[0] || (z[0] = (M) => y.value = M),
autocomplete: "off",
class: L(b.value),
disabled: e.disabled,
name: e.name,
pattern: e.pattern,
placeholder: e.placeholder,
required: e.required,
type: e.type,
onBlur: z[1] || (z[1] = (M) => R()),
onFocus: z[2] || (z[2] = (M) => T()),
onFocusin: z[3] || (z[3] = (M) => T()),
onFocusout: z[4] || (z[4] = (M) => R())
}, null, 42, Tn), [
[rt, y.value]
])
]),
_: 1
}, 8, ["id", "description", "disabled", "focussed", "force-show-error-message", "format", "input-invalid", "label", "pattern", "show-format-hint", "show-pattern-hint", "value"]));
}
}, Un = /* @__PURE__ */ Ye(wn, [["__scopeId", "data-v-2d9f65d2"]]), xn = { class: "dsq-headline" }, G = /* @__PURE__ */ re({
__name: "headline",
props: {
level: {
type: Number,
default: 1,
validator: (e) => e > 0 && e < 4
}
},
setup(e) {
const n = e, t = s(() => `h${n.level}`), a = s(() => {
switch (n.level) {
case 1:
return d();
case 2:
return c();
case 3:
return E();
default:
throw new Error(`There was not specification for a headline with level ${n.level}`, JSON.stringify(n));
}
}), d = () => `text-3xl tracking-tight leading-snug font-bold ${r(U).value}`, c = () => `text-2xl leading-relaxed font-medium ${r(U).value}`, E = () => `text-xl leading-relaxed font-medium ${r(U).value}`;
return (p, h) => (i(), g("div", xn, [
(i(), F(le(t.value), {
class: L(a.value)
}, {
default: x(() => [
B(p.$slots, "default")
]),
_: 3
}, 8, ["class"]))
]));
}
}), On = { class: "dsq-headlines flex flex-col justify-between" }, Hn = /* @__PURE__ */ re({
__name: "headlines",
props: {
showHeadline: {
type: Boolean,
default: !0
},
showSubline: {
type: Boolean,
default: !0
},
showSubSubline: {
type: Boolean,
default: !0
}
},
setup(e) {
return (n, t) => (i(), g("div", On, [
e.showHeadline && n.$slots.headline ? (i(), F(G, {
key: 0,
level: 1
}, {
default: x(() => [
B(n.$slots, "headline")
]),
_: 3
})) : C("", !0),
e.showSubline && n.$slots.