@gingersnap/toolbox
Version:
A comprehensive Vue 3 component library with Tailwind CSS integration, built with JavaScript
998 lines (997 loc) • 35.6 kB
JavaScript
import { computed as f, openBlock as o, createBlock as y, unref as n, withCtx as g, createVNode as h, normalizeClass as w, createElementBlock as p, renderSlot as B, createTextVNode as z, toDisplayString as v, createCommentVNode as x, createElementVNode as m, Fragment as U, renderList as I, resolveDynamicComponent as $, ref as X, reactive as K } from "vue";
import { DialogRoot as G, DialogPortal as J, DialogOverlay as Q, DialogContent as W, DialogTitle as Y, DialogDescription as Z, SelectRoot as _, SelectTrigger as ee, SelectValue as te, SelectIcon as ae, SelectContent as se, SelectScrollUpButton as oe, SelectViewport as re, SelectItem as ne, SelectScrollDownButton as le, ToastProvider as ie, ToastRoot as ce, ToastTitle as de, ToastDescription as ue, ToastClose as fe, ToastViewport as me } from "reka-ui";
import { X as L, ChevronDown as H, ChevronUp as M, Check as F, ChevronRight as O, Home as P, Info as A, CheckCircle as R, AlertCircle as E, AlertTriangle as j, ChevronLeft as ge, ChevronsDown as pe, ChevronsUp as ye, ArrowLeft as he, ArrowRight as ve, ArrowUp as be, ArrowDown as xe, Plus as we, Minus as Ce, Edit as ke, Trash2 as Te, SquarePlus as ze, Copy as Se, Save as $e, RefreshCw as Be, XCircle as De, Lock as Ve, Unlock as Ae, Search as Ue, Filter as je, Download as He, Upload as Ie, Menu as Le, MoreVertical as Me, MoreHorizontal as Fe, Settings as Oe, Focus as Pe, Locate as Re, FileText as Ee, Folder as Ne, Calendar as qe, Clock as Xe, User as Ke, Heart as Ge, Star as Je, Bell as Qe } from "lucide-vue-next";
import { AlertCircle as qt, ArrowDown as Xt, ArrowLeft as Kt, ArrowRight as Gt, ArrowUp as Jt, Bell as Qt, Calendar as Wt, Check as Yt, CheckCircle as Zt, ChevronDown as _t, ChevronLeft as ea, ChevronRight as ta, ChevronUp as aa, ChevronsDown as sa, ChevronsUp as oa, Clock as ra, Copy as na, Download as la, Edit as ia, FileText as ca, Filter as da, Focus as ua, Folder as fa, Heart as ma, Home as ga, Info as pa, Locate as ya, Lock as ha, Menu as va, Minus as ba, MoreHorizontal as xa, MoreVertical as wa, Plus as Ca, RefreshCw as ka, Save as Ta, Search as za, Settings as Sa, SquarePlus as $a, Star as Ba, Trash2 as Da, Unlock as Va, Upload as Aa, User as Ua, X as ja, XCircle as Ha } from "lucide-vue-next";
const We = { class: "px-6 py-4 flex-1 min-h-0 overflow-y-auto" }, Ye = {
key: 1,
class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 px-6 py-4 border-t border-gray-100 flex-shrink-0 gap-2"
}, Ze = {
__name: "TbModal",
props: {
show: {
type: Boolean,
default: !1
},
allowClose: {
type: Boolean,
default: !0
},
closeOnOverlayClick: {
type: Boolean,
default: !0
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg", "xl", "full"].includes(e)
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "destructive"].includes(e)
},
title: {
type: String,
default: ""
},
description: {
type: String,
default: ""
},
animation: {
type: String,
default: "scale",
validator: (e) => ["scale", "slide", "fade"].includes(e)
},
persistent: {
type: Boolean,
default: !1
}
},
emits: ["update:show", "close", "open"],
setup(e, { emit: d }) {
const s = e, i = d, b = (t) => {
i("update:show", t), i(t ? "open" : "close");
}, k = f(() => ({
sm: "max-w-md",
md: "max-w-2xl",
lg: "max-w-4xl",
xl: "max-w-6xl",
full: "max-w-full mx-4"
})[s.size]), T = f(() => ({
default: "bg-white border-gray-200",
destructive: "bg-white border-danger-muted"
})[s.variant]), C = f(() => ({
scale: [
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]"
].join(" "),
slide: [
"data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full"
].join(" "),
fade: [
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
].join(" ")
})[s.animation]), l = f(() => !s.allowClose || s.persistent || !s.closeOnOverlayClick && s.allowClose), u = f(() => s.variant === "destructive" ? "border-danger-light bg-danger-light/30" : "border-gray-100"), c = f(() => s.variant === "destructive" ? "text-danger" : "text-gray-900");
return (t, r) => (o(), y(n(G), {
open: e.show,
"onUpdate:open": b
}, {
default: g(() => [
h(n(J), null, {
default: g(() => [
h(n(Q), { class: "fixed inset-0 z-[9999] bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-200" }),
h(n(W), {
class: w([
k.value,
T.value,
C.value,
"tb-modal-content w-full max-h-[90vh] rounded-base shadow-xl flex flex-col",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"duration-200 border"
]),
"trap-focus": !0,
"disable-outside-pointer-events": l.value,
onPointerDownOutside: r[1] || (r[1] = (a) => l.value && a.preventDefault()),
onEscapeKeyDown: r[2] || (r[2] = (a) => (!e.allowClose || e.persistent) && a.preventDefault()),
role: "dialog",
"aria-labelledby": e.title ? "modal-title" : void 0,
"aria-describedby": e.description ? "modal-description" : void 0
}, {
default: g(() => [
e.title || e.description || t.$slots.header || t.$slots.title || t.$slots.description ? (o(), p("header", {
key: 0,
class: w([
"flex flex-col space-y-1.5 text-center sm:text-left px-6 py-4 border-b flex-shrink-0 relative",
u.value
])
}, [
e.title || t.$slots.title || t.$slots.header ? (o(), y(n(Y), {
key: 0,
class: w([
"text-lg font-semibold leading-none tracking-tight",
c.value
]),
id: "modal-title"
}, {
default: g(() => [
B(t.$slots, "title", {}, () => [
B(t.$slots, "header", {}, () => [
z(v(e.title), 1)
])
])
]),
_: 3
}, 8, ["class"])) : x("", !0),
e.description || t.$slots.description ? (o(), y(n(Z), {
key: 1,
class: "text-sm text-gray-600",
id: "modal-description"
}, {
default: g(() => [
B(t.$slots, "description", {}, () => [
z(v(e.description), 1)
])
]),
_: 3
})) : x("", !0),
e.allowClose && !e.persistent ? (o(), p("button", {
key: 2,
onClick: r[0] || (r[0] = (a) => b(!1)),
class: "absolute right-4 top-4 w-8 h-8 flex items-center justify-center text-gray-400 hover:text-gray-600 rounded-base hover:bg-gray-50 transition-colors opacity-70 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-muted",
"aria-label": "Close dialog",
type: "button"
}, [
h(n(L), { size: 16 })
])) : x("", !0)
], 2)) : x("", !0),
m("div", We, [
B(t.$slots, "default"),
B(t.$slots, "body")
]),
t.$slots.footer || t.$slots.actions ? (o(), p("footer", Ye, [
B(t.$slots, "actions", {}, () => [
B(t.$slots, "footer")
])
])) : x("", !0)
]),
_: 3
}, 8, ["class", "disable-outside-pointer-events", "aria-labelledby", "aria-describedby"])
]),
_: 3
})
]),
_: 3
}, 8, ["open"]));
}
}, _e = { class: "flex items-center gap-1 ml-2 flex-shrink-0" }, et = {
key: 1,
class: "w-4 h-4 border-2 border-gray-300 border-t-primary rounded-full animate-spin",
"aria-label": "Loading"
}, tt = { class: "truncate pr-6" }, at = {
key: 0,
class: "absolute right-3 flex items-center text-primary"
}, Ht = {
__name: "TbSelect",
props: {
modelValue: {
type: [String, Number],
default: null
},
placeholder: {
type: String,
default: "Select an option..."
},
options: {
type: Array,
required: !0
// Expected format: [{ value: 'val', label: 'Label', disabled?: boolean }]
},
disabled: {
type: Boolean,
default: !1
},
error: {
type: Boolean,
default: !1
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "ghost", "outline"].includes(e)
},
loading: {
type: Boolean,
default: !1
},
clearable: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue", "change", "clear"],
setup(e, { emit: d }) {
const s = e, i = d, b = (t) => {
if (t === null) return;
const r = s.options.find((a) => a.value === t) || null;
i("update:modelValue", t), i("change", t, r);
}, k = (t) => {
t.stopPropagation(), i("update:modelValue", null), i("change", null, null), i("clear");
}, T = f(() => s.options.find((t) => t.value === s.modelValue)), C = f(() => {
var t;
return ((t = T.value) == null ? void 0 : t.label) || s.placeholder;
}), l = f(() => ({
sm: "px-2 py-1 text-xs",
md: "px-3 py-2 text-sm",
lg: "px-4 py-3 text-base"
})[s.size]), u = f(() => ({
default: "bg-white border-gray-300 hover:border-gray-400",
ghost: "bg-transparent border-transparent hover:bg-gray-50",
outline: "bg-transparent border-gray-300 hover:border-primary"
})[s.variant]), c = f(() => [
"w-full border rounded-base focus:ring-2 transition-colors",
"flex items-center justify-between",
"data-[placeholder]:text-gray-500 text-left",
"focus-visible:outline-none focus-visible:ring-2",
l.value,
u.value,
s.error ? "border-danger focus:border-danger focus:ring-danger-muted focus-visible:ring-danger-muted" : "focus:border-primary focus:ring-primary-muted focus-visible:ring-primary-muted",
s.disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
s.loading ? "cursor-wait" : ""
].filter(Boolean).join(" "));
return (t, r) => (o(), y(n(_), {
"model-value": e.modelValue,
"onUpdate:modelValue": b,
disabled: e.disabled || e.loading
}, {
default: g(() => [
h(n(ee), {
class: w(c.value)
}, {
default: g(() => [
h(n(te), {
placeholder: e.placeholder,
class: "text-left truncate flex-1"
}, {
default: g(() => [
z(v(C.value), 1)
]),
_: 1
}, 8, ["placeholder"]),
m("div", _e, [
e.clearable && e.modelValue && !e.disabled && !e.loading ? (o(), p("button", {
key: 0,
type: "button",
onClick: k,
class: "flex items-center justify-center w-4 h-4 text-gray-400 hover:text-gray-600 rounded-sm hover:bg-gray-100 transition-colors",
"aria-label": "Clear selection"
}, r[0] || (r[0] = [
m("svg", {
width: "12",
height: "12",
viewBox: "0 0 12 12",
fill: "currentColor"
}, [
m("path", {
d: "M9 3L3 9M3 3l6 6",
stroke: "currentColor",
"stroke-width": "1.5",
"stroke-linecap": "round"
})
], -1)
]))) : x("", !0),
e.loading ? (o(), p("div", et)) : (o(), y(n(ae), { key: 2 }, {
default: g(() => [
h(n(H), {
size: 16,
class: "text-gray-400 transition-transform duration-200 data-[state=open]:rotate-180"
})
]),
_: 1
}))
])
]),
_: 1
}, 8, ["class"]),
h(n(se), {
position: "popper",
side: "bottom",
align: "start",
"side-offset": 4,
class: "bg-white border border-gray-200 rounded-base shadow-base z-50 overflow-hidden min-w-[var(--reka-select-trigger-width)]",
style: { width: "var(--reka-select-trigger-width)", maxHeight: "var(--reka-select-content-available-height)" }
}, {
default: g(() => [
h(n(oe), { class: "flex items-center justify-center h-6 bg-white text-gray-400 hover:text-gray-600 cursor-default" }, {
default: g(() => [
h(n(M), { size: 12 })
]),
_: 1
}),
h(n(re), { class: "max-h-60" }, {
default: g(() => [
(o(!0), p(U, null, I(e.options, (a) => (o(), y(n(ne), {
key: a.value,
value: a.value,
disabled: a.disabled,
class: "relative flex items-center px-3 py-2 text-sm cursor-pointer outline-none select-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[highlighted]:bg-primary-light data-[highlighted]:text-primary data-[state=checked]:bg-primary-light data-[state=checked]:text-primary data-[state=checked]:font-medium hover:bg-gray-50 transition-colors"
}, {
default: g(() => [
m("span", tt, v(a.label), 1),
a.value === e.modelValue ? (o(), p("span", at, [
h(n(F), { size: 14 })
])) : x("", !0)
]),
_: 2
}, 1032, ["value", "disabled"]))), 128))
]),
_: 1
}),
h(n(le), { class: "flex items-center justify-center h-6 bg-white text-gray-400 hover:text-gray-600 cursor-default" }, {
default: g(() => [
h(n(H), { size: 12 })
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["model-value", "disabled"]));
}
}, N = (e, d) => {
const s = e.__vccOpts || e;
for (const [i, b] of d)
s[i] = b;
return s;
}, st = { class: "flex items-center space-x-2" }, ot = { key: 0 }, rt = {
key: 0,
class: "flex items-center",
"aria-hidden": "true"
}, nt = {
key: 1,
class: "text-gray-400 mx-2"
}, lt = { class: "flex items-center" }, it = { class: "flex items-center gap-1" }, ct = ["onClick", "aria-current"], dt = { class: "flex items-center gap-1" }, ut = ["aria-current"], ft = { class: "flex items-center gap-1" }, mt = {
__name: "TbBreadcrumb",
props: {
items: {
type: Array,
required: !0
// Expected format: [{ label: 'Label', href?: string, to?: string|object, active?: boolean, onClick?: function, icon?: component }]
},
separator: {
type: String,
default: "chevron",
validator: (e) => ["chevron", "slash", "dash"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
showHome: {
type: Boolean,
default: !0
},
homeHref: {
type: String,
default: "/"
},
homeTo: {
type: [String, Object],
default: null
},
background: {
type: Boolean,
default: !0
}
},
emits: ["click", "home-click"],
setup(e, { emit: d }) {
const s = e, i = d, b = (t, r) => {
t.onClick && t.onClick(), i("click", t, r);
}, k = () => {
i("home-click");
}, T = f(() => ({
sm: "text-xs px-3 py-1.5",
md: "text-sm px-4 py-2",
lg: "text-base px-4 py-3"
})[s.size]), C = f(() => s.separator === "chevron" ? O : null), l = f(() => ({
slash: "/",
dash: "—"
})[s.separator]), u = f(() => [
"breadcrumb-nav",
s.background ? "bg-gray-50 border-b border-gray-200" : "",
T.value
].filter(Boolean).join(" ")), c = f(() => ({
sm: 14,
md: 16,
lg: 18
})[s.size]);
return (t, r) => (o(), p("nav", {
class: w(u.value),
"aria-label": "Breadcrumb"
}, [
m("ol", st, [
e.showHome ? (o(), p("li", ot, [
(o(), y($(e.homeTo ? "router-link" : "a"), {
to: e.homeTo,
href: e.homeTo ? void 0 : e.homeHref,
class: "text-gray-500 hover:text-gray-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-muted rounded-sm",
onClick: k,
"aria-label": "Home"
}, {
default: g(() => [
h(n(P), { size: c.value }, null, 8, ["size"])
]),
_: 1
}, 8, ["to", "href"]))
])) : x("", !0),
(o(!0), p(U, null, I(e.items, (a, V) => (o(), p(U, { key: V }, [
e.showHome || V > 0 ? (o(), p("li", rt, [
C.value ? (o(), y($(C.value), {
key: 0,
size: c.value,
class: "text-gray-400 mx-1"
}, null, 8, ["size"])) : (o(), p("span", nt, v(l.value), 1))
])) : x("", !0),
m("li", lt, [
a.href || a.to ? (o(), y($(a.to ? "router-link" : "a"), {
key: 0,
to: a.to,
href: a.to ? void 0 : a.href,
class: w([
"transition-colors focus:outline-none focus:ring-2 focus:ring-primary-muted rounded-sm",
a.active ? "text-gray-900 font-medium cursor-default" : "text-gray-600 hover:text-gray-800 font-medium"
]),
onClick: (q) => !a.active && b(a, V),
"aria-current": a.active ? "page" : void 0
}, {
default: g(() => [
m("div", it, [
a.icon ? (o(), y($(a.icon), {
key: 0,
size: c.value,
class: "flex-shrink-0"
}, null, 8, ["size"])) : x("", !0),
z(" " + v(a.label), 1)
])
]),
_: 2
}, 1032, ["to", "href", "class", "onClick", "aria-current"])) : a.onClick ? (o(), p("button", {
key: 1,
type: "button",
class: w([
"transition-colors focus:outline-none focus:ring-2 focus:ring-primary-muted rounded-sm",
a.active ? "text-gray-900 font-medium cursor-default" : "text-gray-600 hover:text-gray-800 font-medium"
]),
onClick: (q) => !a.active && b(a, V),
"aria-current": a.active ? "page" : void 0
}, [
m("div", dt, [
a.icon ? (o(), y($(a.icon), {
key: 0,
size: c.value,
class: "flex-shrink-0"
}, null, 8, ["size"])) : x("", !0),
z(" " + v(a.label), 1)
])
], 10, ct)) : (o(), p("span", {
key: 2,
class: w([
a.active ? "text-gray-900 font-medium" : "text-gray-600 font-medium"
]),
"aria-current": a.active ? "page" : void 0
}, [
m("div", ft, [
a.icon ? (o(), y($(a.icon), {
key: 0,
size: c.value,
class: "flex-shrink-0"
}, null, 8, ["size"])) : x("", !0),
z(" " + v(a.label), 1)
])
], 10, ut))
])
], 64))), 128))
])
], 2));
}
}, It = /* @__PURE__ */ N(mt, [["__scopeId", "data-v-ea141ab9"]]), D = X([]);
let gt = 1;
const pt = {
success: 4e3,
danger: 6e3,
primary: 4e3,
secondary: 4e3
}, S = () => {
const e = (l) => {
const u = `toast-${gt++}`, c = l.duration ?? pt[l.type] ?? 4e3, t = {
id: u,
type: l.type,
title: l.title,
message: l.message,
duration: c,
createdAt: Date.now(),
persistent: l.persistent ?? !1
};
return D.value.push(t), c > 0 && !t.persistent && setTimeout(() => {
d(u);
}, c), u;
}, d = (l) => {
const u = D.value.findIndex((c) => c.id === l);
u > -1 && D.value.splice(u, 1);
}, s = () => {
D.value = [];
}, i = (l, u = {}) => e({
type: "success",
message: l,
...u
}), b = (l, u = {}) => e({
type: "danger",
message: l,
...u
}), k = (l, u = {}) => e({
type: "primary",
message: l,
...u
}), T = (l, u = {}) => e({
type: "secondary",
message: l,
...u
}), C = (l) => e({
type: "primary",
...l
});
return K({
toasts: D.value,
addToast: e,
removeToast: d,
clearAll: s,
success: i,
danger: b,
primary: k,
secondary: T,
show: C
});
}, Lt = {
success: (e, d = {}) => S().success(e, d),
danger: (e, d = {}) => S().danger(e, d),
primary: (e, d = {}) => S().primary(e, d),
secondary: (e, d = {}) => S().secondary(e, d),
show: (e) => S().show(e),
remove: (e) => S().removeToast(e),
clear: () => S().clearAll()
}, yt = { class: "flex items-start space-x-3" }, ht = { class: "flex-1 min-w-0" }, vt = {
__name: "TbToast",
props: {
position: {
type: String,
default: "bottom-right",
validator: (e) => ["top-right", "top-left", "bottom-right", "bottom-left", "top-center", "bottom-center"].includes(e)
},
maxToasts: {
type: Number,
default: 5
},
closeButton: {
type: Boolean,
default: !0
},
pauseOnHover: {
type: Boolean,
default: !0
}
},
setup(e) {
const d = e, { toasts: s, removeToast: i } = S(), b = (c) => ({
success: R,
danger: E,
primary: A,
secondary: A
})[c] || A, k = (c) => {
const t = "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-base border p-4 pr-8 shadow-base transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", r = {
success: "border-success-muted bg-success-light text-success",
danger: "border-danger-muted bg-danger-light text-danger",
primary: "border-primary-muted bg-primary-light text-primary",
secondary: "border-secondary-muted bg-secondary-light text-secondary"
};
return `${t} ${r[c] || r.primary}`;
}, T = (c) => {
const t = {
success: "text-success",
danger: "text-danger",
primary: "text-primary",
secondary: "text-secondary"
};
return t[c] || t.primary;
}, C = f(() => ({
"top-right": "fixed top-0 right-0 flex max-h-screen w-full flex-col p-4 md:max-w-[420px]",
"top-left": "fixed top-0 left-0 flex max-h-screen w-full flex-col p-4 md:max-w-[420px]",
"bottom-right": "fixed bottom-0 right-0 flex max-h-screen w-full flex-col-reverse p-4 md:max-w-[420px]",
"bottom-left": "fixed bottom-0 left-0 flex max-h-screen w-full flex-col-reverse p-4 md:max-w-[420px]",
"top-center": "fixed top-0 left-1/2 -translate-x-1/2 flex max-h-screen w-full flex-col p-4 md:max-w-[420px]",
"bottom-center": "fixed bottom-0 left-1/2 -translate-x-1/2 flex max-h-screen w-full flex-col-reverse p-4 md:max-w-[420px]"
})[d.position]), l = f(() => s.slice(0, d.maxToasts)), u = f(() => d.position.includes("left") ? "left" : "right");
return (c, t) => (o(), y(n(ie), {
duration: 0,
"swipe-direction": u.value
}, {
default: g(() => [
(o(!0), p(U, null, I(l.value, (r) => (o(), y(n(ce), {
key: r.id,
open: !0,
type: r.type === "danger" ? "foreground" : "background",
class: w([
k(r.type),
e.pauseOnHover ? "hover:pause" : ""
]),
"onUpdate:open": (a) => !a && n(i)(r.id)
}, {
default: g(() => [
m("div", yt, [
(o(), y($(b(r.type)), {
size: 20,
class: w([T(r.type), "flex-shrink-0 mt-0.5"])
}, null, 8, ["class"])),
m("div", ht, [
r.title ? (o(), y(n(de), {
key: 0,
class: "text-sm font-medium mb-1 text-gray-900"
}, {
default: g(() => [
z(v(r.title), 1)
]),
_: 2
}, 1024)) : x("", !0),
h(n(ue), { class: "text-sm opacity-90 text-gray-700" }, {
default: g(() => [
z(v(r.message), 1)
]),
_: 2
}, 1024)
])
]),
e.closeButton ? (o(), y(n(fe), {
key: 0,
class: "absolute right-2 top-2 rounded-base p-1 text-current hover:bg-current hover:bg-opacity-10 opacity-70 hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-current focus-visible:ring-2 focus-visible:ring-current group-hover:opacity-100 transition-all",
onClick: (a) => n(i)(r.id),
"aria-label": "Close notification"
}, {
default: g(() => [
h(n(L), { size: 14 })
]),
_: 2
}, 1032, ["onClick"])) : x("", !0)
]),
_: 2
}, 1032, ["type", "class", "onUpdate:open"]))), 128)),
h(n(me), {
class: w(["z-[10000]", C.value])
}, null, 8, ["class"])
]),
_: 1
}, 8, ["swipe-direction"]));
}
}, Mt = /* @__PURE__ */ N(vt, [["__scopeId", "data-v-baf5368d"]]), bt = { class: "space-y-4" }, xt = { class: "flex items-start space-x-3" }, wt = { class: "flex-1 min-w-0" }, Ct = { class: "text-gray-900 text-sm leading-5" }, kt = {
key: 0,
class: "text-sm text-danger mt-2"
}, Tt = {
key: 1,
class: "text-sm text-yellow-700 mt-2"
}, zt = {
key: 2,
class: "text-sm text-gray-600 mt-2"
}, St = { class: "flex justify-end gap-3 w-full" }, $t = ["disabled"], Bt = ["disabled"], Dt = {
key: 0,
class: "flex items-center"
}, Vt = { key: 1 }, Ft = {
__name: "TbConfirmModal",
props: {
show: {
type: Boolean,
required: !0
},
title: {
type: String,
default: "Confirm Action"
},
message: {
type: String,
default: "Are you sure you want to proceed?"
},
confirmText: {
type: String,
default: "Confirm"
},
cancelText: {
type: String,
default: "Cancel"
},
variant: {
type: String,
default: "danger",
validator: (e) => ["danger", "warning", "info"].includes(e)
},
loading: {
type: Boolean,
default: !1
},
icon: {
type: Object,
default: null
},
size: {
type: String,
default: "sm",
validator: (e) => ["sm", "md", "lg"].includes(e)
}
},
emits: ["update:show", "confirm", "cancel"],
setup(e, { emit: d }) {
const s = e, i = d, b = (r) => {
i("update:show", r), r || i("cancel");
}, k = () => {
i("confirm");
}, T = () => {
i("update:show", !1), i("cancel");
}, C = f(() => s.variant === "danger" ? "destructive" : "default"), l = f(() => s.icon ? s.icon : {
danger: j,
warning: j,
info: j
}[s.variant]), u = f(() => ({
danger: "text-danger",
warning: "text-yellow-600",
info: "text-primary"
})[s.variant]), c = f(() => [
"px-4 py-2 text-sm font-medium text-white rounded-base transition-colors",
"focus:outline-none focus:ring-2 focus:ring-offset-2",
"disabled:opacity-50 disabled:cursor-not-allowed",
{
danger: "bg-danger hover:bg-danger-hover focus:bg-danger-focus",
warning: "bg-yellow-600 hover:bg-yellow-700 focus:bg-yellow-500",
info: "bg-primary hover:bg-primary-hover focus:bg-primary-focus"
}[s.variant],
s.variant === "danger" ? "focus:ring-danger-muted" : s.variant === "warning" ? "focus:ring-yellow-300" : "focus:ring-primary-muted"
].join(" ")), t = f(() => ({
danger: "This action cannot be undone.",
warning: "Please proceed with caution.",
info: "This will make changes to your data."
})[s.variant]);
return (r, a) => (o(), y(Ze, {
show: e.show,
"onUpdate:show": b,
size: e.size,
variant: C.value,
title: e.title,
persistent: e.loading,
"allow-close": !e.loading
}, {
actions: g(() => [
m("div", St, [
m("button", {
type: "button",
onClick: T,
disabled: e.loading,
class: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-base hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
}, v(e.cancelText), 9, $t),
m("button", {
type: "button",
onClick: k,
disabled: e.loading,
class: w(c.value)
}, [
e.loading ? (o(), p("span", Dt, a[0] || (a[0] = [
m("svg", {
class: "animate-spin -ml-1 mr-2 h-4 w-4 text-white",
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24"
}, [
m("circle", {
class: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
"stroke-width": "4"
}),
m("path", {
class: "opacity-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"
})
], -1),
z(" Processing... ")
]))) : (o(), p("span", Vt, v(e.confirmText), 1))
], 10, Bt)
])
]),
default: g(() => [
m("div", bt, [
m("div", xt, [
m("div", {
class: w([
"flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center",
e.variant === "danger" ? "bg-danger-light" : e.variant === "warning" ? "bg-yellow-100" : "bg-primary-light"
])
}, [
(o(), y($(l.value), {
size: 20,
class: w(u.value)
}, null, 8, ["class"]))
], 2),
m("div", wt, [
m("p", Ct, v(e.message), 1),
e.variant === "danger" ? (o(), p("p", kt, v(t.value), 1)) : e.variant === "warning" ? (o(), p("p", Tt, v(t.value), 1)) : (o(), p("p", zt, v(t.value), 1))
])
])
])
]),
_: 1
}, 8, ["show", "size", "variant", "title", "persistent", "allow-close"]));
}
}, Ot = {
// Navigation
ChevronDown: H,
ChevronUp: M,
ChevronLeft: ge,
ChevronRight: O,
ChevronsDown: pe,
ChevronsUp: ye,
ArrowLeft: he,
ArrowRight: ve,
ArrowUp: be,
ArrowDown: xe,
// Actions
X: L,
Plus: we,
Minus: Ce,
Edit: ke,
Trash2: Te,
SquarePlus: ze,
Copy: Se,
Save: $e,
RefreshCw: Be,
// Status
Check: F,
CheckCircle: R,
XCircle: De,
AlertCircle: E,
Info: A,
Lock: Ve,
Unlock: Ae,
// Utility
Search: Ue,
Filter: je,
Download: He,
Upload: Ie,
// Menu & Layout
Menu: Le,
MoreVertical: Me,
MoreHorizontal: Fe,
Settings: Oe,
Focus: Pe,
Locate: Re,
// Content
Home: P,
FileText: Ee,
Folder: Ne,
Calendar: qe,
Clock: Xe,
User: Ke,
Heart: Ge,
Star: Je,
Bell: Qe
}, Pt = {
theme: {
extend: {
fontFamily: {
inter: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"]
},
colors: {
primary: {
DEFAULT: "var(--color-primary)",
hover: "var(--color-primary-hover)",
focus: "var(--color-primary-focus)",
light: "var(--color-primary-light)",
muted: "var(--color-primary-muted)"
},
secondary: {
DEFAULT: "var(--color-secondary)",
hover: "var(--color-secondary-hover)",
focus: "var(--color-secondary-focus)",
light: "var(--color-secondary-light)",
muted: "var(--color-secondary-muted)"
},
success: {
DEFAULT: "var(--color-success)",
hover: "var(--color-success-hover)",
focus: "var(--color-success-focus)",
light: "var(--color-success-light)",
muted: "var(--color-success-muted)"
},
danger: {
DEFAULT: "var(--color-danger)",
hover: "var(--color-danger-hover)",
focus: "var(--color-danger-focus)",
light: "var(--color-danger-light)",
muted: "var(--color-danger-muted)"
}
},
borderRadius: {
base: "var(--radius-base)"
},
boxShadow: {
base: "var(--shadow-base)"
}
}
},
plugins: []
}, Rt = "0.1.0";
export {
qt as AlertCircle,
Xt as ArrowDown,
Kt as ArrowLeft,
Gt as ArrowRight,
Jt as ArrowUp,
Qt as Bell,
Wt as Calendar,
Yt as Check,
Zt as CheckCircle,
_t as ChevronDown,
ea as ChevronLeft,
ta as ChevronRight,
aa as ChevronUp,
sa as ChevronsDown,
oa as ChevronsUp,
ra as Clock,
na as Copy,
la as Download,
ia as Edit,
ca as FileText,
da as Filter,
ua as Focus,
fa as Folder,
ma as Heart,
ga as Home,
pa as Info,
ya as Locate,
ha as Lock,
va as Menu,
ba as Minus,
xa as MoreHorizontal,
wa as MoreVertical,
Ca as Plus,
ka as RefreshCw,
Ta as Save,
za as Search,
Sa as Settings,
$a as SquarePlus,
Ba as Star,
It as TbBreadcrumb,
Ft as TbConfirmModal,
Ze as TbModal,
Ht as TbSelect,
Mt as TbToast,
Da as Trash2,
Va as Unlock,
Aa as Upload,
Ua as User,
ja as X,
Ha as XCircle,
Ot as icons,
Pt as tailwindPreset,
Lt as toast,
S as useToast,
Rt as version
};
//# sourceMappingURL=toolbox.js.map