yozora-vue
Version:
Build beautiful, scalable UIs effortlessly with Yozora, a Vue 3 and Tailwind CSS component library focused on flexibility, responsiveness, and ease of customization. Perfect for developers seeking fast, maintainable, and utility-first design integration.
819 lines (818 loc) • 31.2 kB
JavaScript
import { defineComponent as h, ref as v, onBeforeMount as B, openBlock as a, createElementBlock as o, mergeProps as $, renderSlot as y, createTextVNode as M, onMounted as N, createBlock as R, Teleport as E, Fragment as V, createElementVNode as d, createCommentVNode as _, computed as T, unref as W, createVNode as F, toDisplayString as x, renderList as L, withModifiers as S, watch as P, normalizeClass as D, nextTick as A, normalizeStyle as j, withDirectives as Z, withKeys as I, vModelText as K } from "vue";
const U = ["href"], O = /* @__PURE__ */ h({
inheritAttrs: !1,
__name: "Button",
props: {
size: { default: "md" },
color: { default: "primary" },
rounded: { default: "md" },
outline: { type: Boolean, default: !1 },
textonly: { type: Boolean, default: !1 },
href: { default: "" }
},
setup(l) {
const t = l, e = v(
"min-w-[80px] px-2 flex justify-center items-center font-medium disabled:cursor-default hover:cursor-pointer"
), s = () => {
switch (t.size) {
case "xs":
e.value += " h-[32px] text-xs";
break;
case "sm":
e.value += " h-[36px] text-sm";
break;
case "md":
e.value += " h-[40px] text-base";
break;
case "lg":
e.value += " h-[48px] text-base";
break;
case "xl":
e.value += " h-[52px] text-base";
break;
}
}, r = () => {
if (t.outline)
switch (t.color) {
case "primary":
e.value += " bg-white border border-primary hover:bg-primary hover:text-white text-primary disabled:border-gray-400 disabled:bg-white disabled:text-gray-400";
break;
case "secondary":
e.value += " bg-white border border-secondary hover:bg-secondary text-secondary hover:text-white disabled:border-gray-400 disabled:bg-white disabled:text-gray-400";
break;
case "success":
e.value += " bg-white border border-success hover:bg-success text-success hover:text-white disabled:border-gray-400 disabled:bg-white disabled:text-gray-400";
break;
case "danger":
e.value += " bg-white border border-danger hover:bg-danger hover:text-white text-danger disabled:border-gray-400 disabled:bg-white disabled:text-gray-400";
break;
case "gray":
e.value += " bg-white border border-gray-500 text-gray-500 hover:border-gray-600 hover:bg-blue-50 disabled:border-gray-400 disabled:bg-white disabled:text-gray-400";
break;
}
else if (t.textonly)
switch (t.color) {
case "primary":
e.value += " text-primary";
break;
case "secondary":
e.value += " text-secondary";
break;
case "success":
e.value += " text-success";
break;
case "danger":
e.value += " text-danger";
break;
}
else
switch (t.color) {
case "primary":
e.value += " bg-primary hover:bg-primary-hover text-white disabled:bg-gray-200 disabled:text-black";
break;
case "secondary":
e.value += " bg-secondary hover:bg-secondary-hover text-white disabled:bg-gray-200 disabled:text-black";
break;
case "success":
e.value += " bg-success hover:bg-success-hover text-white disabled:bg-gray-200 disabled:text-black";
break;
case "danger":
e.value += " bg-danger hover:bg-danger-hover text-white disabled:bg-gray-200 disabled:text-black";
break;
case "none":
e.value += " bg-white border-black";
break;
}
}, c = () => {
switch (t.rounded) {
case "none":
e.value += " rounded-none";
break;
case "sm":
e.value += " rounded-[3px]";
break;
case "md":
e.value += " rounded-[5px]";
break;
case "lg":
e.value += " rounded-[8px]";
break;
case "full":
e.value += " rounded-full";
break;
}
};
return B(() => {
r(), s(), c();
}), (i, g) => i.href === "" ? (a(), o("button", $({
key: 0,
class: e.value
}, i.$attrs), [
y(i.$slots, "default", {}, () => [
g[0] || (g[0] = M("Button"))
])
], 16)) : (a(), o("a", $({
key: 1,
class: e.value,
href: i.href
}, i.$attrs), [
y(i.$slots, "default", {}, () => [
g[1] || (g[1] = M("Button"))
])
], 16, U));
}
}), G = { class: "relative bg-white rounded-lg shadow-sm h-full w-full" }, J = {
key: 0,
class: "flex items-center justify-between py-2 lg:py-4 px-4 border-b border-gray-200 rounded-t"
}, Q = { class: "grow p-6 space-y-6" }, X = {
key: 1,
class: "flex items-center px-6 py-3 space-x-2 border-t border-gray-200 rounded-b"
}, Y = /* @__PURE__ */ h({
inheritAttrs: !1,
__name: "Modal",
props: {
isShow: { type: Boolean, default: !1 },
size: { default: "md" }
},
emits: ["close"],
setup(l) {
const t = l, e = () => {
let r = "";
switch (t.size) {
case "xs":
r = "max-w-xs";
break;
case "sm":
r = "max-w-sm";
break;
case "md":
r = "max-w-md";
break;
case "lg":
r = "max-w-lg";
break;
case "xl":
r = "max-w-xl";
break;
case "2xl":
r = "max-w-2xl";
break;
case "3xl":
r = "max-w-3xl";
break;
case "4xl":
r = "max-w-4xl";
break;
}
return r;
}, s = v("");
return N(() => {
s.value = e();
}), (r, c) => (a(), R(E, { to: "body" }, [
r.isShow ? (a(), o(V, { key: 0 }, [
d("section", $(r.$attrs, {
class: [
"fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full z-[100] p-4 overflow-x-hidden overflow-y-auto max-h-[90svh]",
s.value
]
}), [
d("div", G, [
r.$slots.header ? (a(), o("div", J, [
y(r.$slots, "header"),
d("button", {
type: "button",
onClick: c[0] || (c[0] = (i) => r.$emit("close")),
class: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
}, c[1] || (c[1] = [
d("svg", {
class: "w-3 h-3",
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 14 14"
}, [
d("path", {
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
})
], -1),
d("span", { class: "sr-only" }, "Close modal", -1)
]))
])) : _("", !0),
d("div", Q, [
y(r.$slots, "body")
]),
r.$slots.footer ? (a(), o("div", X, [
y(r.$slots, "footer")
])) : _("", !0)
])
], 16),
c[2] || (c[2] = d("div", { class: "h-[100svh] w-[100svw] bg-[#000000]/40 fixed top-0 left-0 z-[50]" }, null, -1))
], 64)) : _("", !0)
]));
}
}), ee = ["height", "width"], q = /* @__PURE__ */ h({
__name: "Spinner",
props: {
size: { default: "8" }
},
setup(l) {
const t = l, e = (c) => {
switch (c) {
case "1":
return "0.25rem";
case "2":
return "0.5rem";
case "3":
return "0.75rem";
case "4":
return "1rem";
case "5":
return "1.25rem";
case "6":
return "1.5rem";
case "7":
return "1.75rem";
case "8":
return "2rem";
case "9":
return "2.25rem";
case "10":
return "2.5rem";
case "11":
return "2.75rem";
case "12":
return "3rem";
case "13":
return "3.25rem";
case "14":
return "3.5rem";
case "15":
return "3.75rem";
case "16":
return "4rem";
case "17":
return "4.25rem";
case "18":
return "4.5rem";
case "19":
return "4.75rem";
case "20":
return "5rem";
default:
return "2rem";
}
}, s = v(""), r = () => {
s.value = e(t.size);
};
return B(() => {
r();
}), (c, i) => (a(), o("output", null, [
(a(), o("svg", {
"aria-hidden": "true",
height: s.value,
width: s.value,
class: "text-gray-200 animate-spin dark:text-gray-600 fill-secondary",
viewBox: "0 0 100 101",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, i[0] || (i[0] = [
d("path", {
d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
fill: "currentColor"
}, null, -1),
d("path", {
d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
fill: "currentFill"
}, null, -1)
]), 8, ee)),
i[1] || (i[1] = d("span", { class: "sr-only" }, "Loading...", -1))
]));
}
}), te = { class: "relative" }, re = ["value"], se = {
key: 0,
class: "absolute inset-y-0 flex items-center right-0 pe-3"
}, ae = {
key: 1,
class: "absolute inset-y-0 flex items-center right-0 pe-3"
}, oe = {
key: 2,
class: "text-xs text-danger font-medium mt-1"
}, le = {
key: 3,
class: "absolute w-full bg-white border border-gray-300 rounded z-20 shadow-sm font-normal"
}, ne = { class: "divide-y max-h-[250px] overflow-y-auto" }, ie = ["onMousedown"], de = {
key: 1,
class: "pl-3 py-2"
}, ue = /* @__PURE__ */ h({
inheritAttrs: !1,
__name: "AutoCompleteInput",
props: {
isRequesting: { type: Boolean, default: !1 },
isLinked: { type: Boolean, default: !1 },
modelValue: { default: "" },
errorMessage: { default: "" },
size: { default: "md" },
noDataMessage: { default: "No results found" },
data: { default: () => [] },
optionLabel: { default: "" }
},
emits: ["update:modelValue", "completed", "selected"],
setup(l, { emit: t }) {
const e = l, s = t, r = T(() => {
let u = "";
return u += ` ${g()}`, u;
}), c = v(!1), i = v(null), g = () => {
let u = "";
return e.size === "sm" ? u = "text-sm h-[36px]" : e.size === "md" ? u = "text-base" : e.size === "lg" && (u = "text-lg"), u;
}, f = (u) => {
s("update:modelValue", u), s("selected", u), i.value?.blur();
};
function n(u, w) {
let p = null;
return function(...b) {
p !== null && clearTimeout(p), p = setTimeout(() => {
u(...b);
}, w);
};
}
const m = n((u) => {
s("update:modelValue", u), s("completed");
}, 300), C = () => {
setTimeout(() => {
c.value = !1;
}, 100);
};
return (u, w) => (a(), o("div", te, [
d("input", $({
ref_key: "input",
ref: i
}, u.$attrs, {
value: typeof u.modelValue == "object" ? u.modelValue?.[u.optionLabel] ?? "" : u.modelValue,
onFocus: w[0] || (w[0] = (p) => c.value = !0),
onBlur: C,
onInput: w[1] || (w[1] = (p) => W(m)(p.target.value)),
class: [
r.value,
u.isLinked || u.isRequesting ? "pr-8 pl-3" : "px-3",
"py-2 border bg-white border-gray-300 focus:!ring-primary focus:!outline-primary font-normal rounded-md shadow-sm block w-full disabled:bg-gray-50 disabled:text-gray-500"
]
}), null, 16, re),
u.isRequesting ? (a(), o("div", se, [
F(q, { size: "5" })
])) : u.isLinked ? (a(), o("div", ae, [
y(u.$slots, "default", {}, () => [
w[2] || (w[2] = d("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
class: "bi bi-link-45deg",
viewBox: "0 0 16 16"
}, [
d("path", { d: "M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z" }),
d("path", { d: "M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z" })
], -1))
])
])) : _("", !0),
u.errorMessage !== "" ? (a(), o("div", oe, x(u.errorMessage), 1)) : _("", !0),
c.value && u.modelValue !== "" ? (a(), o("div", le, [
d("ul", ne, [
u.data.length > 0 ? (a(!0), o(V, { key: 0 }, L(u.data, (p, b) => (a(), o("li", {
key: b,
onMousedown: S((k) => f(p), ["prevent"]),
class: "pl-3 py-2 cursor-pointer hover:bg-slate-50"
}, x(typeof p == "object" ? p?.[u.optionLabel] ?? "" : p), 41, ie))), 128)) : (a(), o("li", de, x(u.noDataMessage), 1))
])
])) : _("", !0)
]));
}
}), ce = ["value"], pe = /* @__PURE__ */ h({
inheritAttrs: !1,
__name: "TextArea",
props: {
modelValue: { default: "" }
},
emits: ["update:modelValue"],
setup(l) {
return (t, e) => (a(), o("textarea", $({ class: "py-2 px-3 border border-gray-300 bg-white focus:!ring-primary focus:!outline-primary font-normal rounded-md shadow-sm block w-full disabled:bg-gray-50 disabled:text-gray-500" }, t.$attrs, {
onInput: e[0] || (e[0] = (s) => t.$emit("update:modelValue", s.target.value)),
value: t.modelValue
}), null, 16, ce));
}
}), me = { class: "relative" }, be = ["value"], ge = {
key: 1,
class: "text-xs text-danger font-medium mt-1"
}, fe = /* @__PURE__ */ h({
inheritAttrs: !1,
__name: "TextInput",
props: {
modelValue: { default: "" },
errorMessage: { default: "" },
isCurrency: { type: Boolean, default: !1 },
isNumber: { type: Boolean, default: !1 },
hasIcon: { type: Boolean, default: !1 },
iconPosition: { default: "right" },
size: { default: "md" }
},
emits: ["update:modelValue", "iconClick", "useDebounce"],
setup(l, { emit: t }) {
const e = l, s = t, r = (n) => {
e.isCurrency ? s("update:modelValue", i(n)) : e.isNumber ? s("update:modelValue", c(n)) : s("update:modelValue", n);
}, c = (n) => n.replace(/\D/g, ""), i = (n) => {
let m = n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return m === "" && (m = "0"), m.length > 1 && m[0] === "0" && (m = m.slice(1)), m;
};
P(
() => e.modelValue,
(n) => {
r(n);
},
{ deep: !0 }
);
const g = T(() => {
let n = "";
return e.hasIcon && e.iconPosition === "left" ? n = "pl-9" : e.hasIcon && e.iconPosition === "right" && (n = "pr-9"), n += ` ${f()}`, n;
}), f = () => {
let n = "";
return e.size === "sm" ? n = "text-sm h-[36px]" : e.size === "md" ? n = "text-base" : e.size === "lg" && (n = "text-lg"), n;
};
return (n, m) => (a(), o("div", me, [
d("input", $(n.$attrs, {
value: n.modelValue,
onInput: m[0] || (m[0] = (C) => n.$emit("update:modelValue", C.target.value)),
class: [
g.value,
"py-2 px-3 bg-white border border-gray-300 focus:!ring-primary focus:!outline-primary font-normal rounded-md shadow-sm block w-full disabled:bg-gray-50 disabled:text-gray-500"
]
}), null, 16, be),
n.hasIcon ? (a(), o("div", {
key: 0,
class: D(["absolute inset-y-0 flex items-center text-black", n.iconPosition === "left" ? "left-0 ps-3" : "right-0 pe-3"]),
onClick: m[1] || (m[1] = (C) => n.$emit("iconClick"))
}, [
y(n.$slots, "default")
], 2)) : _("", !0),
n.errorMessage !== "" ? (a(), o("div", ge, x(n.errorMessage), 1)) : _("", !0)
]));
}
}), he = { class: "block font-medium text-sm text-gray-700" }, ve = { key: 0 }, ye = { key: 1 }, xe = {
key: 2,
class: "text-red-500"
}, we = /* @__PURE__ */ h({
inheritAttrs: !1,
__name: "InputLabel",
props: {
value: { default: "" },
required: { type: Boolean, default: !1 }
},
setup(l) {
return (t, e) => (a(), o("label", he, [
t.value ? (a(), o("span", ve, x(t.value), 1)) : (a(), o("span", ye, [
y(t.$slots, "default")
])),
t.required ? (a(), o("span", xe, "*")) : _("", !0)
]));
}
}), ke = { class: "border border-gray-300 focus-within:ring-primary focus-within:outline-primary font-normal rounded-md shadow-sm w-full px-2 py-2 bg-white" }, $e = { class: "flex flex-wrap items-center gap-2 min-h-[30px]" }, Ce = ["onClick"], _e = ["disabled", "placeholder"], Be = /* @__PURE__ */ h({
__name: "TagInput",
props: {
modelValue: { default: () => [] },
limit: { default: -1 },
bgColor: { default: "#f66b0e" },
textColor: { default: "" },
placeholder: { default: "Add a tag" }
},
emits: ["update:modelValue"],
setup(l, { emit: t }) {
const e = l, s = t, r = v(""), c = v(10), i = v(e.modelValue), g = v(null), f = (p) => {
const b = Number(e.limit);
b !== -1 ? i.value.length < b && (i.value.push(p), r.value = "") : (i.value.push(p), r.value = "");
}, n = (p) => {
i.value.splice(p, 1);
}, m = () => {
g.value !== null && (c.value = g.value.clientWidth + 15, g.value.scrollTo(g.value.scrollWidth, 0));
};
P(i, () => A(m), { deep: !0 });
const C = T(() => {
if (e.textColor)
return e.textColor;
const p = u(e.bgColor).replace("#", ""), b = parseInt(p.substring(0, 2), 16), k = parseInt(p.substring(2, 4), 16), z = parseInt(p.substring(4, 6), 16);
return (b * 299 + k * 587 + z * 114) / 1e3 >= 128 || e.bgColor === "#f66b0e" ? "white" : "black";
}), u = (p) => {
const b = document.createElement("canvas").getContext("2d");
return b ? (b.fillStyle = p, b.fillStyle) : "#000000";
}, w = () => {
g.value !== null && (c.value = g.value.clientWidth + 15, g.value.scrollTo(g.value.scrollWidth, 0), s("update:modelValue", i.value));
};
return P(i, () => A(w), { deep: !0 }), N(() => {
w(), m();
}), (p, b) => (a(), o("div", ke, [
d("div", $e, [
(a(!0), o(V, null, L(i.value, (k, z) => (a(), o("span", {
key: k,
class: "px-2 py-1 rounded whitespace-nowrap transition-colors duration-100 flex items-center text-sm",
style: j({ color: C.value, background: p.bgColor })
}, [
M(x(k) + " ", 1),
d("button", {
class: "bg-transparent outline-none border-none cursor-pointer ml-1",
style: j({ color: C.value }),
onClick: (H) => n(z)
}, " x ", 12, Ce)
], 4))), 128)),
Z(d("input", {
class: "flex-1 min-w-[120px] py-1 px-2 bg-transparent border-none outline-none text-sm disabled:bg-gray-50 disabled:text-gray-500",
"onUpdate:modelValue": b[0] || (b[0] = (k) => r.value = k),
disabled: i.value.length >= Number(p.limit) && Number(p.limit) !== -1,
onKeydown: [
b[1] || (b[1] = I(S((k) => f(r.value), ["prevent"]), ["enter"])),
b[2] || (b[2] = I(S((k) => f(r.value), ["prevent"]), ["tab"])),
b[3] || (b[3] = I((k) => r.value.length || n(i.value.length - 1), ["delete"]))
],
type: "text",
enterkeyhint: "enter",
placeholder: p.placeholder
}, null, 40, _e), [
[K, r.value]
])
])
]));
}
}), Ve = ["value", "disabled"], Te = /* @__PURE__ */ h({
__name: "SelectInput",
props: {
modelValue: { default: void 0 },
small: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 }
},
emits: ["update:modelValue"],
setup(l) {
const e = {
backgroundImage: l.disabled ? `url('data:image/svg+xml;utf8,<svg fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9l-7 7-7-7"></path></svg>')` : `url('data:image/svg+xml;utf8,<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9l-7 7-7-7"></path></svg>')`,
backgroundRepeat: "no-repeat",
backgroundPosition: "right 0.5rem center",
backgroundSize: "1rem"
};
return (s, r) => (a(), o("select", $(s.$attrs, {
value: s.modelValue,
onInput: r[0] || (r[0] = (c) => s.$emit("update:modelValue", c.target?.value)),
disabled: s.disabled,
style: e,
class: [
"appearance-none pr-7 px-2 bg-white text-sm font-normal border border-gray-300 focus:border-primary focus-visible:outline-primary rounded-md block min-w-fit disabled:bg-gray-50 disabled:text-gray-500",
s.small ? "h-[36px]" : "h-[42px]"
]
}), [
y(s.$slots, "default")
], 16, Ve));
}
}), ze = (l, t) => {
const e = l.__vccOpts || l;
for (const [s, r] of t)
e[s] = r;
return e;
}, Ie = {}, Me = {
class: "flex",
"aria-label": "Breadcrumb"
}, Se = { class: "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse" };
function Pe(l, t) {
return a(), o("nav", Me, [
d("ol", Se, [
y(l.$slots, "default")
])
]);
}
const Le = /* @__PURE__ */ ze(Ie, [["render", Pe]]), Ae = { key: 0 }, je = { class: "flex items-center" }, Ne = {
key: 0,
class: "hover:cursor-pointer text-sm font-medium text-gray-700 hover:text-primary"
}, De = ["href"], qe = {
key: 0,
"aria-current": "page"
}, He = { class: "flex items-center" }, Re = { class: "hover:cursor-default ms-1 font-bold text-sm md:ms-2 dark:text-gray-400" }, Ee = { key: 1 }, We = { class: "flex items-center" }, Fe = {
key: 0,
class: "hover:cursor-pointer ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white"
}, Ze = ["href"], Ke = /* @__PURE__ */ h({
__name: "BreadcrumbItem",
props: {
title: { default: "" },
href: { default: "#" },
current: { type: Boolean, default: !1 },
first: { type: Boolean, default: !1 }
},
setup(l) {
return (t, e) => t.first ? (a(), o("li", Ae, [
d("div", je, [
t.href === "#" ? (a(), o("span", Ne, x(t.title), 1)) : (a(), o("a", {
key: 1,
href: t.href,
class: "hover:cursor-pointer text-sm font-medium text-gray-700 hover:text-primary"
}, x(t.title), 9, De))
])
])) : (a(), o(V, { key: 1 }, [
t.current ? (a(), o("li", qe, [
d("div", He, [
e[0] || (e[0] = d("svg", {
class: "rtl:rotate-180 w-3 h-3 text-gray-400 mx-1",
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 6 10"
}, [
d("path", {
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "m1 9 4-4-4-4"
})
], -1)),
d("span", Re, x(t.title), 1)
])
])) : (a(), o("li", Ee, [
d("div", We, [
e[1] || (e[1] = d("svg", {
class: "rtl:rotate-180 w-3 h-3 text-gray-400 mx-1",
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 6 10"
}, [
d("path", {
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "m1 9 4-4-4-4"
})
], -1)),
t.href === "#" ? (a(), o("span", Fe, x(t.title), 1)) : (a(), o("a", {
key: 1,
href: t.href,
class: "hover:cursor-pointer ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white"
}, x(t.title), 9, Ze))
])
]))
], 64));
}
}), Ue = /* @__PURE__ */ h({
__name: "Table",
props: {
fixed: { type: Boolean, default: !1 }
},
setup(l) {
const t = l, e = v("");
return B(() => {
t.fixed && (e.value = "table-fixed");
}), (s, r) => (a(), o("table", $(s.$attrs, { class: e.value }), [
y(s.$slots, "default")
], 16));
}
}), Oe = /* @__PURE__ */ h({
__name: "TableHeader",
props: {
width: { default: "" },
borderless: { type: Boolean, default: !1 },
bgColor: { default: "secondary" },
textColor: { default: "" },
textPosition: { default: "center" }
},
emits: ["sort"],
setup(l) {
const t = l, e = v("px-4 py-1"), s = v({}), r = (f) => {
const n = document.createElement("canvas").getContext("2d");
return n ? (n.fillStyle = f, n.fillStyle) : "#000000";
}, c = T(() => {
if (t.textColor)
return t.textColor;
const f = r(t.bgColor).replace("#", ""), n = parseInt(f.substring(0, 2), 16), m = parseInt(f.substring(2, 4), 16), C = parseInt(f.substring(4, 6), 16);
return (n * 299 + m * 587 + C * 114) / 1e3 >= 128 ? "black" : "white";
}), i = () => {
const f = c.value;
s.value.color = f, s.value.background = t.bgColor;
}, g = () => {
t.borderless || (e.value = e.value + " border-l border-t border-gray-700 text-center last:border-r");
};
return B(() => {
t.width !== "" && (e.value = e.value + ` w-[${t.width}]`), t.textPosition !== "" && (s.value.textAlign = t.textPosition ?? "center"), i(), g();
}), (f, n) => (a(), o("th", $({
scope: "col",
onClick: n[0] || (n[0] = (m) => f.$emit("sort"))
}, f.$attrs, {
class: e.value,
style: { ...s.value }
}), [
y(f.$slots, "default")
], 16));
}
}), Ge = /* @__PURE__ */ h({
__name: "TableData",
props: {
width: { default: "" },
borderless: { type: Boolean, default: !1 }
},
setup(l) {
const t = l, e = () => t.borderless ? "" : " border-l border-b last:border-r border-gray-700", s = v("px-4 py-2");
return B(() => {
t.width === "" && (s.value = s.value + ` w-[${t.width}]`), s.value = s.value + e();
}), (r, c) => (a(), o("td", $(r.$attrs, { class: s.value }), [
y(r.$slots, "default")
], 16));
}
}), Je = {
class: "lg:w-auto pb-2 lg:pb-0 w-full",
"aria-label": "Page navigation example"
}, Qe = { class: "flex flex-wrap lg:flex-nowrap items-center -space-x-px h-8 text-xs lg:text-sm" }, Xe = ["onClick"], Ye = {
key: 0,
class: "flex items-center justify-center px-2 lg:px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700"
}, et = {
key: 1,
class: "flex items-center justify-center px-2 lg:px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700"
}, tt = /* @__PURE__ */ h({
__name: "Pagination",
props: {
pagination: { default: () => [{ label: "", url: "" }] },
currentPage: { default: 1 }
},
emits: ["changePage"],
setup(l, { emit: t }) {
const e = t, s = (r, c) => {
e("changePage", r, c);
};
return (r, c) => (a(), o("nav", Je, [
d("ul", Qe, [
(a(!0), o(V, null, L(r.pagination, (i) => (a(), o("li", {
class: "cursor-pointer",
onClick: (g) => s(i.label, i.url)
}, [
i.label.toLowerCase().includes("next") ? (a(), o("div", Ye, c[0] || (c[0] = [
d("span", { class: "sr-only" }, "Next", -1),
d("svg", {
class: "w-2.5 h-2.5",
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 6 10"
}, [
d("path", {
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "m1 9 4-4-4-4"
})
], -1)
]))) : i.label.toLowerCase().includes("previous") ? (a(), o("div", et, c[1] || (c[1] = [
d("span", { class: "sr-only" }, "Previous", -1),
d("svg", {
class: "w-2.5 h-2.5",
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 6 10"
}, [
d("path", {
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M5 1 1 5l4 4"
})
], -1)
]))) : (a(), o("div", {
key: 2,
class: D([
"z-10 flex items-center justify-center hover:bg-blue-100 px-3 h-8 leading-tight border border-gray-300 hover:text-blue-700",
r.currentPage.toString() === i.label ? "bg-primary text-white" : "bg-white"
])
}, x(i.label), 3))
], 8, Xe))), 256))
])
]));
}
}), st = {
install(l) {
l.component("Button", O), l.component("TextArea", pe), l.component("TextInput", fe), l.component("InputLabel", we), l.component("TagInput", Be), l.component("Table", Ue), l.component("TableHeader", Oe), l.component("TableData", Ge), l.component("Pagination", tt), l.component("SelectInput", Te), l.component("Breadcrumb", Le), l.component("BreadcrumbItem", Ke), l.component("Modal", Y), l.component("Spinner", q), l.component("AutoCompleteInput", ue);
}
};
export {
ue as AutoCompleteInput,
Le as Breadcrumb,
Ke as BreadcrumbItem,
O as Button,
we as InputLabel,
Y as Modal,
tt as Pagination,
Te as SelectInput,
q as Spinner,
Ue as Table,
Ge as TableData,
Oe as TableHeader,
Be as TagInput,
pe as TextArea,
fe as TextInput,
st as default
};