UNPKG

elenext

Version:

1,503 lines 51.2 kB
import { defineComponent as b, openBlock as u, createElementBlock as m, createElementVNode as f, useSlots as I, normalizeClass as _, createBlock as B, renderSlot as g, createCommentVNode as z, getCurrentInstance as Pe, computed as $, ref as w, toDisplayString as E, unref as v, onMounted as H, watch as X, inject as K, reactive as Te, provide as Y, toValue as Ae, mergeProps as O, cloneVNode as Re, withCtx as C, Fragment as V, toRef as F, Teleport as Le, createVNode as R, Transition as Se, normalizeStyle as P, renderList as j, createSlots as J, resolveComponent as je, createTextVNode as Ne, resolveDynamicComponent as Oe } from "vue"; import { useFocusWithin as He, useElementHover as qe, useEventListener as Ke, onClickOutside as Q, isClient as Ge, useScroll as Ce, useDraggable as Z, useResizeObserver as ee } from "@vueuse/core"; import { useFloating as Fe, offset as De, size as Xe, flip as Ye, shift as We, arrow as Ue, autoUpdate as Je } from "@floating-ui/vue"; import { uid as Qe } from "kotl"; import { Listbox as Ze, ListboxButton as et, ListboxOptions as tt, ListboxOption as nt } from "@headlessui/vue"; const ot = { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, rt = /* @__PURE__ */ f("circle", { opacity: "0.25", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "4" }, null, -1), lt = /* @__PURE__ */ f("path", { opacity: "0.75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }, null, -1), at = [ rt, lt ], st = /* @__PURE__ */ b({ name: "TLoadingIcon", __name: "Loading", setup(e) { return (n, r) => (u(), m("svg", ot, at)); } }), it = ["disabled"], te = /* @__PURE__ */ b({ name: "TButton", __name: "index", props: { variant: { type: String, default: "default" }, color: { type: String, default: "primary" }, size: { type: String, default: "md" }, pill: Boolean, square: Boolean, block: Boolean, loading: Boolean, disabled: Boolean }, emits: ["click"], setup(e, { emit: n }) { const r = n, o = I(), t = e; return (l, s) => (u(), m("button", { type: "button", class: _(["focus-visible:outline-primary-solid inline-flex cursor-pointer appearance-none items-center justify-center whitespace-nowrap text-center font-medium outline-none transition-[color,background-color,text-decoration-color] focus:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50", [ { pure: "", default: "border-input-border text-foreground bg-input-background enabled:hover:bg-input-background-hover border shadow-sm", outline: `border-2 shadow-sm ${{ primary: "enabled:hover:bg-primary-subtle border-primary-border bg-background text-primary-text", success: "enabled:hover:bg-success-subtle border-success-border bg-background text-success-text", warning: "enabled:hover:bg-warning-subtle border-warning-border bg-background text-warning-text", danger: "enabled:hover:bg-danger-subtle border-danger-border bg-background text-danger-text" }[t.color]}`, solid: `shadow-sm ${{ primary: "bg-primary-solid enabled:hover:bg-primary-solid-hover text-white", success: "bg-success-solid enabled:hover:bg-success-solid-hover text-white", warning: "bg-warning-solid enabled:hover:bg-warning-solid-hover text-white", danger: "bg-danger-solid enabled:hover:bg-danger-solid-hover text-white" }[t.color]}`, soft: `shadow-sm ${{ primary: "bg-primary-subtle enabled:hover:bg-primary-subtle-hover text-primary-text", success: "bg-success-subtle enabled:hover:bg-success-subtle-hover text-success-text", warning: "bg-warning-subtle enabled:hover:bg-warning-subtle-hover text-warning-text", danger: "bg-danger-subtle enabled:hover:bg-danger-subtle-hover text-danger-text" }[t.color || "primary"]}`, text: `${{ primary: "enabled:hover:bg-primary-bg-subtle text-primary-text", success: "enabled:hover:bg-success-bg-subtle text-success-text", warning: "enabled:hover:bg-warning-bg-subtle text-warning-text", danger: "enabled:hover:bg-danger-bg-subtle text-danger-text" }[t.color || "primary"]}` }[t.variant], { sm: `h-7 text-xs ${t.square ? "w-7" : "py-1 px-2"}`, md: `h-9 text-sm ${t.square ? "w-9" : "py-1.5 px-3"}`, lg: `h-11 text-base ${t.square ? "w-11" : "py-2 px-4"}` }[t.size], t.pill ? "rounded-full" : "rounded-md", !t.square && t.block ? "w-full" : "" ]]), disabled: e.disabled, onClick: s[0] || (s[0] = (a) => r("click", a)) }, [ e.loading || o.icon ? (u(), m("span", { key: 0, class: _(["[:where(&_>_*)]:h-[1em] [:where(&_>_*)]:w-[1em]", o.default && !e.square ? "mr-1.5" : ""]) }, [ e.loading ? (u(), B(st, { key: 0, class: "animate-spin" })) : g(l.$slots, "icon", { key: 1 }) ], 2)) : z("", !0), !e.square || !e.loading ? g(l.$slots, "default", { key: 1 }) : z("", !0) ], 10, it)); } }); function T(e, n = {}) { const { defaultValue: r, defaultValuePropName: o = "defaultValue", valuePropName: t = "value", onChange: l } = n, s = n.trigger || `update:${t}`, a = Pe(), i = $(() => e[t] !== void 0), c = w(i.value ? e[t] : e[o] || r); return [ $(() => i.value ? e[t] : c.value), function(p) { c.value = p, a == null || a.emit(s, p), l == null || l(p); } ]; } const ct = ["data-disabled"], ut = { key: 0, class: "flex h-full items-center" }, dt = { class: "pl-3" }, mt = ["value", "readonly", "disabled", "placeholder"], ft = { key: 1, class: "z-input_suffix flex h-full items-center" }, pt = { class: "pr-3" }, ne = /* @__PURE__ */ b({ name: "Input", __name: "index", props: { value: [String, Number], status: { type: String, default: "normal" }, prefix: String, suffix: String, placeholder: String, readonly: Boolean, disabled: Boolean, allowClear: Boolean }, emits: ["update:value", "change", "input", "focus", "blur"], setup(e, { expose: n, emit: r }) { const o = r, t = I(), l = e, [s, a] = T(l, { onChange: (d) => { o("change", d); } }), i = (d) => { const p = d.currentTarget; a(p.value), o("input", d); }, c = w(); return n({ focus: () => { var d; return (d = c.value) == null ? void 0 : d.focus(); }, blur: () => { var d; return (d = c.value) == null ? void 0 : d.blur(); } }), (d, p) => (u(), m("div", { class: _(["bg-input-background flex h-9 items-center overflow-hidden rounded-md border shadow-sm focus-within:z-10 focus-within:ring-1 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60", [ { normal: "border-input-border focus-within:border-primary focus-within:ring-primary", success: "border-success focus-within:ring-success", warning: "border-warning focus-within:ring-warning", danger: "border-danger focus-within:ring-danger" }[l.status] ]]), "data-disabled": e.disabled }, [ e.prefix || t.prefix ? (u(), m("span", ut, [ g(d.$slots, "prefix", {}, () => [ f("span", dt, E(e.prefix), 1) ]) ])) : z("", !0), f("input", { ref_key: "inputRef", ref: c, class: _(["placeholder:text-mute-foreground block w-full flex-1 cursor-[inherit] border-0 bg-transparent py-1.5 px-3 text-sm leading-[1.375rem] outline-none focus:outline-none", { "pl-1": e.prefix || t.prefix, "pr-1": e.suffix || t.suffix }]), style: { "box-shadow": "none" }, type: "text", value: v(s), readonly: e.readonly, disabled: e.disabled, placeholder: e.placeholder, autocomplete: "off", onInput: i, onFocus: p[0] || (p[0] = (k) => o("focus", k)), onBlur: p[1] || (p[1] = (k) => o("blur", k)) }, null, 42, mt), e.suffix || t.suffix ? (u(), m("span", ft, [ g(d.$slots, "suffix", {}, () => [ f("span", pt, E(e.suffix), 1) ]) ])) : z("", !0) ], 10, ct)); } }); function ht(e, n) { H(() => { const { focused: r } = He(e); X(r, (o) => n(o)); }); } function oe(e, n, r) { H(() => { const o = qe(e, n); X(o, (t) => r(t)); }); } function gt(e, n) { H(() => { Ke(e, "click", (r) => { n(r); }); }); } const Be = Symbol("popper-tree"); function bt(e) { const n = w([]), r = (l) => { n.value.push(l); }, o = (l) => { n.value = n.value.filter((s) => s.nodeId !== l); }, t = $(() => n.value.some((l) => l.open)); return Y(Be, { nodeId: e, addNode: r, removeNode: o }), { children: n, hasChildrenOpen: t }; } function L(e) { return $(() => { const n = Ae(e); if (n && "nodeType" in n) return n; }); } function vt({ open: e, reference: n, floating: r, floatingArrow: o, placement: t, trigger: l, sizeMode: s, onChange: a }) { const i = `popper-${Qe(6)}`, c = K(Be, null), { hasChildrenOpen: d } = bt(i), p = Fe(n, r, { placement: t, middleware: [ De(8), Xe({ apply: ({ rects: y, elements: h }) => { s.value === "min-width" && Object.assign(h.floating.style, { minWidth: `${y.reference.width}px` }); } }), Ye(), We(), Ue({ element: o }) ].filter(Boolean), whileElementsMounted: Je }), k = $(() => { var N, x; const { placement: y, middlewareData: h } = p, M = y.value.split("-")[0], A = { top: "bottom", right: "left", bottom: "top", left: "right" }[M]; return { position: "absolute", left: ((N = h.value.arrow) == null ? void 0 : N.x) != null ? `${h.value.arrow.x}px` : "", top: ((x = h.value.arrow) == null ? void 0 : x.y) != null ? `${h.value.arrow.y}px` : "", [A]: "-8px" }; }), S = (y, h) => { y !== e.value && (y || !d.value) && a(y, h); }; if (l.value.includes("hover")) { const y = w(!1), h = w(!1), M = () => { const A = y.value || h.value; S(A, "hover"); }; oe(L(n), { delayLeave: 100 }, (A) => { y.value = A, M(); }), oe(L(r), { delayLeave: 100 }, (A) => { h.value = A, M(); }); } return l.value.includes("focus") && (ht(L(n), (y) => { S(y, "focus"); }), Q( r, (y) => { S(!1, "click"); }, { ignore: [L(n)] } )), l.value.includes("click") && (gt(L(n), () => { S(!e.value, "click"); }), Q( r, (y) => { S(!1, "click"); }, { ignore: [L(n)] } )), c == null || c.addNode(Te({ nodeId: i, open: e })), H(() => { c == null || c.removeNode(i); }), { open: e, nodeId: i, arrowStyle: k, ...p }; } const yt = /* @__PURE__ */ b({ name: "ElSlot", __name: "ElSlot", emits: ["load"], setup(e, { emit: n }) { const r = n; function o(s) { return s ? s.flatMap((a) => a.type === V ? o(a.children) : [a]) : []; } const t = b({ name: "PrimitiveSlot", inheritAttrs: !1, setup(s, { attrs: a, slots: i }) { return () => { var k, S; if (!i.default) return null; const c = o(i.default()), [d, ...p] = c; if (d && Object.keys(a).length > 0) { (k = d == null ? void 0 : d.props) == null || delete k.ref; const y = O(a, d.props ?? {}); a.class && ((S = d.props) != null && S.class) && delete d.props.class; const h = Re(d, y); for (const M in y) M.startsWith("on") && (h.props || (h.props = {}), h.props[M] = y[M]); return c.length === 1 ? h : [h, ...p]; } return c; }; } }), l = (s) => { const a = ["#text", "#comment"].includes(s == null ? void 0 : s.$el.nodeName) ? ( // @ts-expect-error s == null ? void 0 : s.$el.nextElementSibling ) : ( // @ts-expect-error (s == null ? void 0 : s.$el) || s ); r("load", a); }; return (s, a) => (u(), B(v(t), { ref: l }, { default: C(() => [ g(s.$slots, "default") ]), _: 3 })); } }), W = /* @__PURE__ */ b({ name: "Popper", __name: "Popper", props: { open: { type: Boolean, default: void 0 }, reference: Object, trigger: { type: [String, Array], default: "hover" }, arrow: Boolean, sizeMode: String, placement: { type: String, default: "bottom" } }, emits: ["update:open", "change"], setup(e, { expose: n, emit: r }) { const o = e, t = r, l = w(!!o.reference), s = w(), a = $(() => l.value ? o.reference : s.value), i = w(), c = w(), [d, p] = T(o, { valuePropName: "open", onChange: (h) => t("change", h) }), { floatingStyles: k, arrowStyle: S } = vt({ open: d, reference: a, floating: i, floatingArrow: c, placement: F(o, "placement"), trigger: $(() => Array.isArray(o.trigger) ? o.trigger : [o.trigger]), sizeMode: F(o, "sizeMode"), onChange: (h, M) => p(h) }), y = (h) => { s.value = h; }; return n({ open: d, toggle: () => p(!d.value) }), (h, M) => (u(), m(V, null, [ l.value ? z("", !0) : (u(), B(yt, { key: 0, onLoad: y }, { default: C(() => [ g(h.$slots, "default") ]), _: 3 })), (u(), B(Le, { to: "body" }, [ R(Se, { "leave-active-class": "transition duration-100 ease-in ", "leave-from-class": "opacity-100", "leave-to-class": "opacity-0" }, { default: C(() => [ v(d) ? (u(), m("div", { key: 0, ref_key: "floating", ref: i, class: "z-[99]", style: P(v(k)) }, [ g(h.$slots, "content"), e.arrow ? (u(), m("div", { key: 0, ref_key: "floatingArrow", ref: c, class: "h-2 w-2 bg-red-500", style: P(v(S)) }, null, 4)) : z("", !0) ], 4)) : z("", !0) ]), _: 3 }) ])) ], 64)); } }), xt = ["data-disabled"], wt = { class: "flex w-full items-center py-1.5 px-2" }, kt = { class: "flex-1 overflow-hidden text-ellipsis text-nowrap" }, re = /* @__PURE__ */ b({ name: "ListBoxItem", __name: "ListBoxItem", props: { item: { type: Object, required: !0 }, active: Boolean }, emits: ["click"], setup(e, { emit: n }) { const r = n; return (o, t) => (u(), m("div", { "data-disabled": e.item.disabled, onClick: t[0] || (t[0] = (l) => r("click", e.item)), class: "hover:bg-input-background-hover relative w-full cursor-pointer items-center overflow-hidden rounded text-sm transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50" }, [ g(o.$slots, "default", { item: e.item }, () => [ f("div", wt, [ f("span", kt, E(e.item.label), 1) ]) ]) ], 8, xt)); } }); function _t(e) { return "type" in e && e.type === "divider"; } function $t(e) { return "type" in e && e.type === "group"; } const St = { class: "space-y-1 p-1 text-sm" }, Ct = { class: "text-mute-foreground py-1 px-2 font-medium" }, Bt = { class: "mt-1 space-y-1" }, le = /* @__PURE__ */ b({ name: "ListBox", __name: "ListBox", props: { items: Array, size: { type: String, default: "md" }, indexKey: { type: String, default: "key" } }, emits: ["click"], setup(e, { emit: n }) { const r = n, o = I(), t = e; return (l, s) => (u(), m("div", St, [ (u(!0), m(V, null, j(t.items, (a, i) => (u(), m(V, null, [ v(_t)(a) ? (u(), m("div", { class: "bg-line -mx-1 my-1 h-px", key: a.type + i })) : v($t)(a) ? (u(), m("div", { class: "border-line -mx-1 my-1 border-t border-b p-1", key: a.label }, [ g(l.$slots, "group", { item: a }, () => [ f("div", Ct, E(a.label), 1) ]), f("div", Bt, [ (u(!0), m(V, null, j(a.children, (c) => (u(), B(re, { key: c[e.indexKey], item: c, onClick: (d) => r("click", c) }, J({ _: 2 }, [ o.item ? { name: "default", fn: C((d) => [ g(l.$slots, "item", O({ ref_for: !0 }, d)) ]), key: "0" } : void 0 ]), 1032, ["item", "onClick"]))), 128)) ]) ])) : (u(), B(re, { item: a, onClick: (c) => r("click", a), key: a[e.indexKey] }, J({ _: 2 }, [ o.item ? { name: "default", fn: C((c) => [ g(l.$slots, "item", O({ ref_for: !0 }, c)) ]), key: "0" } : void 0 ]), 1032, ["item", "onClick"])) ], 64))), 256)) ])); } }), zt = /* @__PURE__ */ b({ name: "IndentList", __name: "IndentList", props: { items: Array, deep: { type: Number, default: 0 } }, setup(e) { return I(), (n, r) => { const o = je("IndentList", !0); return u(), m("ul", null, [ (u(!0), m(V, null, j(e.items, (t) => (u(), m("li", { key: t.key }, [ g(n.$slots, "item", { item: t, deep: e.deep }), t.children && t.children.length > 0 ? (u(), B(o, { key: 0, items: t.children, deep: e.deep + 1 }, { item: C((l) => [ g(n.$slots, "item", O({ ref_for: !0 }, l)) ]), _: 2 }, 1032, ["items", "deep"])) : z("", !0) ]))), 128)) ]); }; } }), Et = { class: "z-popover bg-background ring-line rounded-md ring-1 shadow-lg" }, It = { class: "px-2" }, ae = /* @__PURE__ */ b({ name: "Popover", __name: "index", props: { content: String, trigger: { type: String, default: "click" }, placement: { type: String, default: "top" }, sizeMode: String }, emits: ["update:open", "change"], setup(e, { expose: n, emit: r }) { const o = r, t = w(); return n({ toggle: () => { var l; return (l = t.value) == null ? void 0 : l.toggle(); } }), (l, s) => (u(), B(v(W), { trigger: e.trigger, sizeMode: e.sizeMode, placement: e.placement, ref_key: "popperRef", ref: t, onChange: s[0] || (s[0] = (a) => o("change", a)) }, { content: C(() => [ f("div", Et, [ g(l.$slots, "content", {}, () => [ f("div", It, E(e.content), 1) ]) ]) ]), default: C(() => [ g(l.$slots, "default") ]), _: 3 }, 8, ["trigger", "sizeMode", "placement"])); } }), Mt = { class: "t-space-compact flex items-center rounded-md *:rounded-none [&>:first-child]:rounded-l-md [&>:last-child]:rounded-r-md" }, se = /* @__PURE__ */ b({ name: "SpaceCompact", __name: "SpaceCompact", props: {}, emits: ["click"], setup(e, { emit: n }) { return I(), (r, o) => (u(), m("div", Mt, [ g(r.$slots, "default") ])); } }), Vt = { class: "z-tooltip ring-line ring-opacity-50 rounded bg-white ring-1 shadow-md" }, Pt = { class: "px-2" }, ie = /* @__PURE__ */ b({ name: "Tooltip", __name: "index", props: { content: String, placement: { type: String, default: "top" } }, setup(e) { return (n, r) => (u(), B(v(W), { trigger: "hover", placement: e.placement }, { content: C(() => [ f("div", Vt, [ g(n.$slots, "content", {}, () => [ f("div", Pt, E(e.content), 1) ]) ]) ]), default: C(() => [ g(n.$slots, "default") ]), _: 3 }, 8, ["placement"])); } }); function ze(e) { const n = []; function r(o) { for (const t of o) n.push(t), t.children && t.children.length > 0 && r(t.children); } return r(e), n; } const Tt = (e, n = "") => n ? ze(e).findIndex((o) => o.id === n) : -1; function Rn(e, n = {}) { const { offset: r = 135, defaultValue: o = "" } = n, t = $(() => ze(e.value).map((i) => ({ el: document.getElementById(i.id), item: i })).filter(Boolean)), l = w(""); function s() { var i, c; const a = t.value.findIndex((d) => d.el ? d.el.getBoundingClientRect().top > r : !1); a == -1 ? l.value = o || "" : a == 0 ? l.value = (i = t.value[a]) == null ? void 0 : i.item.id : l.value = (c = t.value[a - 1]) == null ? void 0 : c.item.id; } return H(() => { s(); }), Ge && Ce(window, { onScroll: s, throttle: 300 }), { current: l, headers: e }; } const At = { class: "relative" }, Rt = ["onClick"], Lt = ["data-active", "href", "target"], ce = /* @__PURE__ */ b({ name: "Anchor", __name: "Anchor", props: { current: String, items: { type: Array, default: () => [] } }, emits: ["change"], setup(e, { emit: n }) { const r = n, o = e, t = (s, a) => { r("change", s, a); }, l = $(() => { const s = Tt(o.items, o.current); return s >= 0 ? `calc(${s} * 1.75rem)` : ""; }); return (s, a) => (u(), m("div", At, [ R(v(zt), { class: "border-line border-l-2 text-sm leading-6", items: e.items, current: e.current }, { item: C(({ item: i, deep: c }) => [ f("div", { class: "group cursor-pointer py-1", style: P({ paddingLeft: c + 1 + "rem" }), onClick: (d) => t(i, c) }, [ f("a", { class: "hover:text-foreground-dark data-[active=true]:text-primary block text-sm no-underline data-[active=true]:font-medium", "data-active": e.current === i.id, href: i.link, target: i.target }, E(i.title || i.id), 9, Lt) ], 12, Rt) ]), _: 1 }, 8, ["items", "current"]), l.value ? (u(), m("div", { key: 0, class: "bg-primary absolute top-1 left-0 h-5 w-[2px] translate-y-[--ink-offset] rounded-sm transition-all", style: P({ "--ink-offset": l.value }) }, null, 4)) : z("", !0) ])); } }), jt = { class: "bg-input flex h-full w-full items-center justify-center text-center" }, Nt = { key: 0 }, Ot = { key: 1, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", class: "h-7 w-7 bg-transparent" }, Ht = /* @__PURE__ */ f("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }, null, -1), qt = /* @__PURE__ */ f("circle", { cx: "12", cy: "7", r: "4" }, null, -1), Kt = [ Ht, qt ], Gt = ["src"], ue = /* @__PURE__ */ b({ name: "Avatar", __name: "Avatar", props: { src: String, name: String, size: { type: String, default: "md" }, rounded: Boolean, border: Boolean }, emits: ["click"], setup(e, { emit: n }) { I(); const r = e, o = w(!1); return X( () => r.src, () => { o.value = !1; } ), (t, l) => (u(), m("div", { class: _(["relative flex shrink-0 items-center justify-center overflow-hidden", [ r.rounded ? "rounded-full" : "rounded-md", r.border ? "border-line border border-2" : "", { sm: "h-7 w-7", md: "h-9 w-9", lg: "h-11 w-11" }[r.size] ]]) }, [ o.value || !e.src ? g(t.$slots, "fallback", { key: 0 }, () => [ f("div", jt, [ e.name ? (u(), m("span", Nt, E(e.name), 1)) : (u(), m("svg", Ot, Kt)) ]) ]) : (u(), m("img", { key: 1, src: e.src, class: _(["block h-full w-full object-cover select-none", [r.rounded ? "rounded-full" : "rounded", r.border ? "border-2 border-transparent" : ""]]), alt: "avatar", onError: l[0] || (l[0] = (s) => o.value = !0) }, null, 42, Gt)) ], 2)); } }), Ft = { class: "relative inline-flex shrink-0" }, de = /* @__PURE__ */ b({ name: "Badge", __name: "Badge", props: { color: { type: String, default: "default" }, size: { type: String, default: "md" }, placement: { type: String, default: "top-right" }, content: String }, emits: ["click"], setup(e, { emit: n }) { I(); const r = e; return (o, t) => (u(), m("div", Ft, [ g(o.$slots, "default"), f("span", { class: _(["font-regular text-small border-background absolute top-[5%] right-[5%] z-10 box-border flex max-h-5 min-h-3 min-w-3 origin-center -translate-y-1/2 translate-x-1/2 scale-100 flex-wrap place-content-center items-center justify-center whitespace-nowrap rounded-full border-2 px-1 subpixel-antialiased opacity-100 duration-300 select-none data-[invisible=true]:scale-0 data-[invisible=true]:opacity-0", [ { default: "bg-default text-default-fg", primary: "bg-primary text-primary-fg", success: "bg-success text-success-fg", warning: "bg-warning text-warning-fg", danger: "bg-danger text-danger-fg" }[r.color] ]]) }, [ g(o.$slots, "icon", {}, () => [ Ne(E(e.content), 1) ]) ], 2) ])); } }), Ee = Symbol("CheckboxGroupInjectKey"), Dt = { class: "focus-visible:ring-primary focus-visible:ring-offset-background relative block cursor-[inherit] appearance-none rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2" }, Xt = /* @__PURE__ */ f("svg", { viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, [ /* @__PURE__ */ f("path", { d: "M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z" }) ], -1), Yt = [ Xt ], Wt = { class: "relative ml-2 block text-sm font-medium" }, me = /* @__PURE__ */ b({ name: "Checkbox", __name: "Checkbox", props: { value: { type: null, required: !0 }, name: String, disabled: Boolean, checked: { type: Boolean, default: void 0 } }, emits: ["update:checked", "change"], setup(e, { emit: n }) { const r = n, o = e, t = K(Ee, null), [l, s] = T(o, { defaultValue: t ? t.value.value.includes(o.value) : !1, valuePropName: "checked", onChange: (c) => { r("change", c), t && (c ? t.add(o.value) : t.remove(o.value)); } }), a = $(() => t ? t.value.value.includes(o.value) : l.value), i = () => { o.disabled || s(!a.value); }; return (c, d) => (u(), m("span", { class: _(["relative inline-flex items-center", e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"]), onClick: i }, [ f("button", Dt, [ f("span", { class: _(["block h-4 w-4 rounded border transition-colors", [ a.value ? "border-primary bg-primary text-white" : "border-input-border bg-input-background text-transparent" ]]) }, Yt, 2) ]), f("span", Wt, [ g(c.$slots, "default") ]) ], 2)); } }), fe = /* @__PURE__ */ b({ name: "CheckboxGroup", __name: "CheckboxGroup", props: { name: String, value: Array, disabled: Boolean }, emits: ["update:value", "change"], setup(e, { emit: n }) { const r = e, o = n, [t, l] = T(r, { defaultValue: [], onChange: (s) => { o("change", s); } }); return Y(Ee, { value: t, add: (s) => { t.value.indexOf(s) === -1 && l([...t.value, s]); }, remove: (s) => { const a = t.value.indexOf(s); if (a !== -1) { const i = [...t.value]; i.splice(a, 1), l(i); } } }), (s, a) => (u(), m("div", null, [ g(s.$slots, "default") ])); } }), Ut = ["href", "target"], Jt = { class: "flex-1" }, Qt = { key: 0, class: "-mr-1" }, Zt = /* @__PURE__ */ f("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "2", stroke: "currentColor", class: "h-4 w-4" }, [ /* @__PURE__ */ f("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" }) ], -1), en = [ Zt ], tn = { class: "z-popover ring-line ring-opacity-50 bg-background rounded ring-1 shadow-md" }, nn = /* @__PURE__ */ b({ name: "MenuItem", __name: "MenuItem", props: { item: { type: Object, required: !0 }, current: String }, emits: ["click"], setup(e, { emit: n }) { I(); const r = w(); return (o, t) => (u(), m(V, null, [ f("a", { ref_key: "elRef", ref: r, href: e.item.link, target: e.item.target, class: _([ "group inline-flex h-9 items-center justify-start whitespace-nowrap rounded-md px-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50", e.current === e.item.key ? "bg-primary text-white" : "text-default hover:bg-input-background-hover", e.item.disabled ? "" : "cursor-pointer" ]) }, [ (u(), B(Oe(e.item.icon), { class: "mr-2 h-4 w-4" })), f("span", Jt, E(e.item.label), 1), e.item.children && e.item.children.length > 0 ? (u(), m("span", Qt, en)) : z("", !0) ], 10, Ut), r.value && e.item.children && e.item.children.length > 0 ? (u(), B(v(W), { key: 0, trigger: "hover", placement: "right-start", reference: r.value }, { content: C(() => [ f("div", tn, [ R(D, { items: e.item.children }, null, 8, ["items"]) ]) ]), _: 1 }, 8, ["reference"])) : z("", !0) ], 64)); } }); function Ie(e) { return "type" in e && e.type === "divider"; } function Me(e) { return "type" in e && e.type === "title"; } function on(e) { return !Me(e) && !Ie(e); } const rn = { class: "grid gap-1 p-1" }, ln = { key: 0, class: "menu__divider border-line h-[1px] w-full shrink-0 border-b" }, an = { key: 1, class: "menu__title text-mute-foreground px-3 text-xs font-medium leading-6" }, D = /* @__PURE__ */ b({ name: "Menu", __name: "Menu", props: { title: String, current: String, items: { type: Array, default: () => [] } }, emits: ["click"], setup(e, { emit: n }) { return I(), (r, o) => (u(), m("nav", rn, [ (u(!0), m(V, null, j(e.items, (t) => (u(), m(V, { key: t }, [ v(Ie)(t) ? (u(), m("div", ln)) : z("", !0), v(Me)(t) ? (u(), m("div", an, E(t.label), 1)) : z("", !0), v(on)(t) ? (u(), B(nn, { key: 2, class: "menu__item", item: t, current: e.current }, null, 8, ["item", "current"])) : z("", !0) ], 64))), 128)) ])); } }), U = Symbol("CheckboxGroupInjectKey"), sn = { class: "focus-visible:ring-primary focus-visible:ring-offset-background relative block cursor-[inherit] appearance-none overflow-hidden rounded-full transition-[background-color] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2" }, cn = /* @__PURE__ */ f("svg", { viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, [ /* @__PURE__ */ f("circle", { cx: "8", cy: "8", r: "3" }) ], -1), un = [ cn ], dn = { class: "relative ml-2 block text-sm font-medium" }, pe = /* @__PURE__ */ b({ name: "Radio", __name: "Radio", props: { value: { type: null, required: !0 }, name: String, disabled: Boolean, checked: { type: Boolean, default: void 0 } }, emits: ["update:checked", "change"], setup(e, { emit: n }) { const r = n, o = e, t = K(U, null), [l, s] = T(o, { defaultValue: t ? t.value.value === o.value : !1, valuePropName: "checked", onChange: (c) => { r("change", c), t == null || t.select(o.value); } }), a = $(() => t ? t.value.value === o.value : l.value), i = () => { s(!0); }; return (c, d) => (u(), m("label", { class: _(["relative inline-flex items-center", e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"]), onClick: i }, [ f("button", sn, [ f("span", { class: _(["block h-4 w-4 rounded-full border transition-all", [ a.value ? "border-primary bg-primary text-white" : "border-input-border bg-input-background text-transparent" ]]) }, un, 2) ]), f("span", dn, [ g(c.$slots, "default") ]) ], 2)); } }), mn = ["data-checked"], he = /* @__PURE__ */ b({ name: "RadioCard", __name: "RadioCard", props: { value: { type: null, required: !0 }, name: String, disabled: Boolean, checked: { type: Boolean, default: void 0 } }, emits: ["update:checked", "change"], setup(e, { emit: n }) { const r = n, o = e, t = K(U, null), [l, s] = T(o, { defaultValue: t ? t.value.value === o.value : !1, valuePropName: "checked", onChange: (c) => { r("change", c), t == null || t.select(o.value); } }), a = $(() => t ? t.value.value === o.value : l.value), i = () => { s(!0); }; return (c, d) => (u(), m("button", { "data-checked": a.value, class: _(["group focus-visible:ring-primary border-input-border data-[checked=true]:border-primary relative m-0 flex cursor-pointer appearance-none items-center justify-center border-2 text-sm font-medium transition-all focus-visible:ring-2 focus-visible:ring-offset-2 [:where(&)]:rounded-md [button:where(&)]:py-1.5 [button:where(&)]:px-3", [e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"]]), onClick: i }, [ g(c.$slots, "default", { checked: a.value }) ], 10, mn)); } }), ge = /* @__PURE__ */ b({ name: "RadioGroup", __name: "RadioGroup", props: { name: String, value: null, disabled: Boolean, size: { type: String, default: "md" } }, emits: ["update:value", "change"], setup(e, { emit: n }) { const r = n, o = e, [t, l] = T(o, { onChange: (s) => { r("change", s); } }); return Y(U, { size: F(o, "size"), value: t, select: (s) => { l(s); } }), (s, a) => (u(), m("div", null, [ g(s.$slots, "default") ])); } }); function fn(e, [n, r]) { return Math.min(r, Math.max(n, e)); } function Ve(e, n) { return (r) => { if (e[0] === e[1] || n[0] === n[1]) return n[0]; const o = (n[1] - n[0]) / (e[1] - e[0]); return n[0] + o * (r - e[0]); }; } function q(e, n) { const r = n === "vertical" ? "height" : "width", o = pn(e.viewport[r], e.content[r]), t = e.scrollbar.paddingStart + e.scrollbar.paddingEnd, l = (e.scrollbar[r] - t) * o; return Math.max(l, 18); } function pn(e, n) { const r = e / n; return Number.isNaN(r) ? 0 : r; } function be(e, n, r) { const o = r === "vertical" ? "height" : "width", t = q(n, r), l = n.scrollbar.paddingStart + n.scrollbar.paddingEnd, s = n.scrollbar[o] - l, a = n.content[o] - n.viewport[o], i = s - t, d = fn(e, [0, a]); return Ve([0, a], [0, i])(d); } function ve(e, n, r) { const o = r === "vertical" ? "height" : "width", t = q(n, r), l = n.scrollbar.paddingStart, s = n.scrollbar[o] - n.scrollbar.paddingEnd - t, a = n.content[o] - n.viewport[o]; return Ve([l, s], [0, a])(e); } const ye = 'relative flex-1 transition-opacity cursor-pointer rounded-[10px] bg-default-900/30 opacity-0 group-hover:opacity-100 before:absolute before:top-1/2 before:left-1/2 before:h-full before:w-full before:min-h-[44px] before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-[""] hover:bg-default-900/50', xe = /* @__PURE__ */ b({ name: "ScrollArea", __name: "ScrollArea", props: { direction: { type: String, default: "vertical" } }, emits: ["click", "resize"], setup(e, { expose: n, emit: r }) { const o = r; I(); const t = e, l = w(), s = w(), a = w(), i = w(), c = w(), d = w(), p = w({ content: { width: 0, height: 0 }, viewport: { width: 0, height: 0 }, scrollbar: { width: 0, height: 0, paddingStart: 0, paddingEnd: 0 } }), { x: k, y: S } = Ce(l), y = $( () => (t.direction === "horizontal" || t.direction === "all") && p.value.content.width > p.value.viewport.width ), h = $( () => (t.direction === "vertical" || t.direction === "all") && p.value.content.height > p.value.viewport.height ), M = $( () => l.value ? be(k.value, p.value, "horizontal") : 0 ), A = $( () => l.value ? be(S.value, p.value, "vertical") : 0 ), N = () => { var x, G; l.value && (p.value = { content: { width: l.value.scrollWidth ?? 0, height: l.value.scrollHeight ?? 0 }, viewport: { width: l.value.offsetWidth ?? 0, height: l.value.offsetHeight ?? 0 }, scrollbar: { width: ((x = a.value) == null ? void 0 : x.clientWidth) ?? 0, height: ((G = i.value) == null ? void 0 : G.clientHeight) ?? 0, paddingStart: 0, paddingEnd: 0 } }); }; return Z(c, { initialValue: { x: 0, y: 0 }, containerElement: a, axis: "x", onMove(x) { k.value = ve(x.x, p.value, "vertical"); } }), Z(d, { initialValue: { x: 0, y: 0 }, containerElement: i, axis: "y", onMove(x) { S.value = ve(x.y, p.value, "vertical"); } }), ee(l, N), ee(s, (x) => { o("resize", x), N(); }), n({ viewportEl: l, contentEl: s, scrollTo(x) { x && (Array.isArray(x) ? (k.value = x[0], S.value = x[1]) : x === "left" ? k.value = 0 : x === "right" ? k.value = p.value.content.width - p.value.viewport.width : x === "top" ? S.value = 0 : x === "bottom" && (S.value = p.value.content.height - p.value.viewport.height)); } }), (x, G) => (u(), m("div", { class: "group relative overflow-hidden", style: P({ "--thumb-width": p.value ? `${v(q)(p.value, "horizontal")}px` : void 0, "--thumb-height": p.value ? `${v(q)(p.value, "vertical")}px` : void 0 }) }, [ f("div", { ref_key: "viewportEl", ref: l, class: "h-full w-full [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: P({ overflowX: e.direction === "horizontal" || e.direction === "all" ? "scroll" : "hidden", overflowY: e.direction === "vertical" || e.direction === "all" ? "scroll" : "hidden" }) }, [ f("div", { class: "table min-w-full", ref_key: "contentEl", ref: s }, [ g(x.$slots, "default") ], 512) ], 4), f("div", { ref_key: "scrollbarXEl", ref: a, class: _(["absolute bottom-0 left-0 right-0 flex touch-none select-none flex-col overflow-hidden py-[2px]", [y.value ? "block" : "hidden"]]) }, [ f("div", { ref_key: "thumbXEl", ref: c, class: _([ye, "h-[6px] w-[--thumb-width]"]), style: P({ transform: `translate3d(${M.value}px, 0px, 0px)` }) }, null, 6) ], 2), f("div", { ref_key: "scrollbarYEl", ref: i, class: _(["absolute bottom-0 right-0 top-0 flex touch-none select-none overflow-hidden px-[2px]", [h.value ? "block" : "hidden"]]) }, [ f("div", { ref_key: "thumbYEl", ref: d, class: _([ye, "h-[--thumb-height] w-[6px]"]), style: P({ transform: `translate3d(0px, ${A.value}px, 0px)` }) }, null, 6) ], 2) ], 4)); } }), hn = { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, gn = /* @__PURE__ */ f("path", { d: "M20 6 9 17l-5-5" }, null, -1), bn = [ gn ], vn = /* @__PURE__ */ b({ name: "TCheckIcon", __name: "CheckIcon", setup(e) { return (n, r) => (u(), m("svg", hn, bn)); } }), yn = { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, xn = /* @__PURE__ */ f("path", { d: "m6 9 6 6 6-6" }, null, -1), wn = [ xn ], kn = /* @__PURE__ */ b({ name: "TChevronDownIcon", __name: "ChevronDownIcon", setup(e) { return (n, r) => (u(), m("svg", yn, wn)); } }), _n = { class: "flex flex-1 items-center overflow-hidden text-nowrap pl-2" }, $n = { class: "w-full text-ellipsis text-nowrap" }, Sn = { key: 1, class: "text-mute-foreground" }, Cn = { class: "flex flex-1 items-center overflow-hidden text-nowrap pl-2" }, we = /* @__PURE__ */ b({ name: "TSelect", inheritAttrs: !1, __name: "Select", props: { value: [String, Number], options: { type: Array, default: () => [] }, size: String, disabled: Boolean, clearable: Boolean, placeholder: String }, emits: ["update:value", "change", "select"], setup(e, { emit: n }) { const r = n, o = e, [t, l] = T(o, { onChange: (i) => { r("change", i); } }), s = $(() => o.options.find((i) => i.value === t.value)), a = $(() => { var i; return ((i = s.value) == null ? void 0 : i.label) || ""; }); return (i, c) => (u(), B(v(Ze), { "model-value": v(t), "onUpdate:modelValue": v(l) }, { default: C(() => [ f("div", O({ class: "relative" }, i.$attrs), [ R(v(et), { class: "border-input-border focus:border-primary focus:ring-primary bg-input-background flex h-9 w-full cursor-pointer items-center gap-1 rounded-md border px-1 text-left text-sm shadow-sm outline-none focus:z-10 focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50", disabled: e.disabled }, { default: C(() => [ f("div", _n, [ a.value ? g(i.$slots, "label", { key: 0, selected: !1, item: s.value, placeholder: e.placeholder }, () => [ f("span", $n, E(a.value), 1) ]) : (u(), m("span", Sn, E(e.placeholder), 1)) ]), R(kn, { class: "mr-1 h-4 w-4 shrink-0" }) ]), _: 3 }, 8, ["disabled"]), R(Se, { "leave-active-class": "transition duration-100 ease-in", "leave-from-class": "opacity-100", "leave-to-class": "opacity-0" }, { default: C(() => [ R(v(tt), { class: "bg-background ring-line absolute z-[999] mt-1 max-h-60 w-full space-y-1 overflow-auto rounded-md p-1 text-sm ring-1 shadow-lg focus:outline-none" }, { default: C(() => [ (u(!0), m(V, null, j(e.options, (d) => (u(), B(v(nt), { key: d.value, value: d.value, disabled: d.disabled, as: "template" }, { default: C(({ active: p, selected: k, disabled: S }) => [ f("div", { class: _(["relative flex min-h-9 w-full cursor-pointer items-center gap-1 overflow-hidden rounded transition-colors", [S ? "pointer-events-none opacity-50" : "", p ? "bg-input-background-hover" : ""]]) }, [ f("div", Cn, [ g(i.$slots, "label", { selected: k, item: d }, () => [ f("span", { class: _(["w-full text-ellipsis text-nowrap", [k ? "font-medium" : ""]]) }, E(d.label), 3) ]) ]), k ? (u(), B(vn, { key: 0, class: "mr-2 h-4 w-4 shrink-0" })) : z("", !0) ], 2) ]), _: 2 }, 1032, ["value", "disabled"]))), 128)) ]), _: 3 }) ]), _: 3 }) ], 16) ]), _: 3 }, 8, ["model-value", "onUpdate:modelValue"])); } }), Bn = ["data-checked", "disabled", "name"], zn = ["data-checked"], ke = /* @__PURE__ */ b({ name: "Switch", __name: "Switch", props: { value: { type: Boolean, default: void 0 }, name: String, disabled: Boolean }, emits: ["update:value", "change"], setup(e, { emit: n }) { const r = n; I(); const o = e, [t, l] = T(o, { onChange: (a) => { r("change", a); } }), s = () => { l(!t.value); }; return (a, i) => (u(), m("button", { type: "button", class: "data-[checked=true]:bg-primary focus-visible:ring-primary bg-input-accent focus-visible:ring-offset-background relative inline-flex h-6 w-11 rounded-full border-2 border-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "data-checked": !!v(t), disabled: e.disabled, name: e.name, onClick: s }, [ f("span", { "data-checked": !!v(t), class: "bg-background pointer-events-none relative inline-block h-5 w-5 transform rounded-full ring-0 shadow transition duration-200 ease-in-out data-[checked=true]:translate-x-5 data-[state=unchecked]:translate-x-0" }, null, 8, zn) ], 8, Bn)); } }), En = ["data-active", "onClick"], _e = /* @__PURE__ */ b({ name: "Tabs", __name: "Tabs", props: { current: { type: String, default: "" }, items: { type: Array, default: () => [] }, type: { type: String, default: "card" } }, emits: ["change"], setup(e, { emit: n }) { const r = n; I(); const o = e, t = $(() => o.items.map((a) => a.key)), l = w(t.value.includes(o.current) ? o.current : t.value[0]), s = (a) => { l.value !== a && (l.value = a, r("change", a)); }; return (a, i) => (u(), m("nav", { class: "bg-default-subtle-hover text-default-subtle-text grid h-9 w-full items-center justify-center rounded-lg p-1", style: P({ gridTemplateColumns: `repeat(${t.value.length}, minmax(0, 1fr))` }) }, [ (u(!0), m(V, null, j(o.items, (c) => (u(), m("button", { key: c.key, type: "button", role: "tab", "data-active": l.value === c.key, class: "data-[active=true]:bg-default-subtle data-[active=true]:text-default dark:data-[active=true]:bg-default-subtle relative inline-flex items-center justify-center whitespace-nowrap rounded-md py-1 px-3 text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 data-[active=true]:shadow", tabindex: "-1", onClick: (d) => s(c.key) }, E(c.label), 9, En))), 128)) ], 4)); } }), In = ["rows", "value", "readonly", "disabled", "placeholder", "autocomplete"], $e = /* @__PURE__ */ b({ name: "Textarea", __name: "Textarea", props: { value: String, status: { type: String, default: "normal" }, placeholder: String, readonly: Boolean, disabled: Boolean, noBorder: Boolean, rows: { type: Number, default: 3 }, resize: { type: String, default: "none" }, autocomplete: { type: String, default: "off" } }, emits: ["update:value", "change", "input", "focus", "blur", "keydown", "keyup", "keypress", "paste", "contextmenu"], setup(e, { emit: n }) { const r = n; I(); const o = e, [t, l] = T(o, { onChange: (a) => { r("change", a); } }), s = (a) => { const i = a.currentTarget; l(i.value), r("input", a); }; return (a, i) => (u(), m("textarea", { class: _(["scrollbar placeholder:text-mute-foreground bg-input-background relative flex w-full appearance-none overflow-y-scroll rounded-md border py-1.5 pr-0 pl-3 text-sm leading-[1.375rem] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50", [ e.noBorder ? "border-transparent dark:border-transparent" : "focus:ring-1", !e.noBorder && { normal: "border-input-border focus:border-primary focus:ring-primary", success: "border-success focus:border-success focus:ring-success", warning: "border-warning focus:border-warning focus:ring-warning", danger: "border-danger focus:border-danger focus:ring-danger" }[o.status] ]]), style: P({ resize: e.resize }), type: "text", rows: e.rows, value: v(t), readonly: e.readonly, disabled: e.disabled, placeholder: e.placeholder, autocomplete: e.autocomplete, onInput: s, onKeypress: i[0] || (i[0] = (c) => r("keypress", c)), onKeydown: i[1] || (i[1] = (c) => r("keydown", c)), onKeyup: i[2] || (i[2] = (c)