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.
900 lines (899 loc) • 35.9 kB
JavaScript
import { defineComponent as g, computed as y, openBlock as a, createElementBlock as d, mergeProps as w, renderSlot as h, createTextVNode as V, ref as B, onMounted as j, createBlock as R, Teleport as W, Fragment as I, createElementVNode as n, createCommentVNode as _, onBeforeMount as D, normalizeClass as N, unref as E, createVNode as Z, renderList as S, withModifiers as M, toDisplayString as x, watch as A, nextTick as L, normalizeStyle as P, withDirectives as K, withKeys as z, vModelText as U } from "vue";
const O = ["href"], G = /* @__PURE__ */ g({
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(s) {
const t = s, o = y(() => {
let e = "min-w-[80px] px-2 flex justify-center items-center font-medium disabled:cursor-default hover:cursor-pointer";
switch (t.size) {
case "xs":
e += " h-[40px] sm:h-[32px] text-sm";
break;
case "sm":
e += " h-[44px] sm:h-[36px] text-sm";
break;
case "md":
e += " h-[44px] sm:h-[40px] text-base";
break;
case "lg":
e += " h-[48px] text-base";
break;
case "xl":
e += " h-[52px] text-base";
break;
}
if (t.outline)
switch (t.color) {
case "primary":
e += " bg-white border border-primary hover:bg-primary hover:text-white text-primary disabled:border-gray-400 disabled:bg-white disabled:text-gray-400 dark:bg-dark-surface dark:border-primary dark:text-primary dark:hover:bg-primary dark:hover:text-white dark:disabled:border-dark-border dark:disabled:bg-dark-surface dark:disabled:text-dark-muted";
break;
case "secondary":
e += " bg-white border border-secondary hover:bg-secondary text-secondary hover:text-white disabled:border-gray-400 disabled:bg-white disabled:text-gray-400 dark:bg-dark-surface dark:border-secondary dark:text-secondary dark:hover:bg-secondary dark:hover:text-white dark:disabled:border-dark-border dark:disabled:bg-dark-surface dark:disabled:text-dark-muted";
break;
case "success":
e += " bg-white border border-success hover:bg-success text-success hover:text-white disabled:border-gray-400 disabled:bg-white disabled:text-gray-400 dark:bg-dark-surface dark:border-success dark:text-success dark:hover:bg-success dark:hover:text-white dark:disabled:border-dark-border dark:disabled:bg-dark-surface dark:disabled:text-dark-muted";
break;
case "danger":
e += " bg-white border border-danger hover:bg-danger hover:text-white text-danger disabled:border-gray-400 disabled:bg-white disabled:text-gray-400 dark:bg-dark-surface dark:border-danger dark:text-danger dark:hover:bg-danger dark:hover:text-white dark:disabled:border-dark-border dark:disabled:bg-dark-surface dark:disabled:text-dark-muted";
break;
case "gray":
e += " 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 dark:bg-dark-surface dark:border-dark-border dark:text-dark-text dark:hover:bg-dark-surface2 dark:disabled:border-dark-border dark:disabled:bg-dark-surface dark:disabled:text-dark-muted";
break;
}
else if (t.textonly)
switch (t.color) {
case "primary":
e += " text-primary dark:text-primary";
break;
case "secondary":
e += " text-secondary dark:text-secondary";
break;
case "success":
e += " text-success dark:text-success";
break;
case "danger":
e += " text-danger dark:text-danger";
break;
case "gray":
e += " text-gray dark:text-gray";
break;
}
else
switch (t.color) {
case "primary":
e += " bg-primary hover:bg-primary-hover text-white disabled:bg-gray-200 disabled:text-black dark:disabled:bg-dark-surface2 dark:disabled:text-dark-muted";
break;
case "secondary":
e += " bg-secondary hover:bg-secondary-hover text-white disabled:bg-gray-200 disabled:text-black dark:disabled:bg-dark-surface2 dark:disabled:text-dark-muted";
break;
case "success":
e += " bg-success hover:bg-success-hover text-white disabled:bg-gray-200 disabled:text-black dark:disabled:bg-dark-surface2 dark:disabled:text-dark-muted";
break;
case "danger":
e += " bg-danger hover:bg-danger-hover text-white disabled:bg-gray-200 disabled:text-black dark:disabled:bg-dark-surface2 dark:disabled:text-dark-muted";
break;
case "gray":
e += " bg-gray hover:bg-gray-second text-black disabled:bg-gray-200 disabled:text-black dark:disabled:bg-dark-surface2 dark:disabled:text-dark-muted";
break;
case "none":
e += " bg-white border-black";
break;
}
switch (t.rounded) {
case "none":
e += " rounded-none";
break;
case "sm":
e += " rounded-[3px]";
break;
case "md":
e += " rounded-[5px]";
break;
case "lg":
e += " rounded-[8px]";
break;
case "full":
e += " rounded-full";
break;
}
return e;
});
return (e, r) => e.href === "" ? (a(), d("button", w({
key: 0,
class: o.value
}, e.$attrs), [
h(e.$slots, "default", {}, () => [
r[0] || (r[0] = V("Button"))
])
], 16)) : (a(), d("a", w({
key: 1,
class: o.value,
href: e.href
}, e.$attrs), [
h(e.$slots, "default", {}, () => [
r[1] || (r[1] = V("Button"))
])
], 16, O));
}
}), J = { class: "relative bg-white rounded-lg shadow-sm h-full w-full dark:bg-dark-surface dark:text-dark-text" }, Q = {
key: 0,
class: "flex items-center justify-between py-2 lg:py-4 px-4 border-b border-gray-200 rounded-t dark:border-dark-border"
}, X = { class: "grow p-6 space-y-6" }, Y = {
key: 1,
class: "flex items-center px-6 py-3 space-x-2 border-t border-gray-200 rounded-b dark:border-dark-border"
}, ee = /* @__PURE__ */ g({
inheritAttrs: !1,
__name: "Modal",
props: {
isShow: { type: Boolean, default: !1 },
size: { default: "md" }
},
emits: ["close"],
setup(s) {
const t = s, o = () => {
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;
}, e = B("");
return j(() => {
e.value = o();
}), (r, c) => (a(), R(W, { to: "body" }, [
r.isShow ? (a(), d(I, { key: 0 }, [
n("section", w(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]",
e.value
]
}), [
n("div", J, [
r.$slots.header ? (a(), d("div", Q, [
h(r.$slots, "header"),
n("button", {
type: "button",
onClick: c[0] || (c[0] = (l) => 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 dark:text-dark-muted dark:hover:bg-dark-surface2 dark:hover:text-dark-text"
}, c[1] || (c[1] = [
n("svg", {
class: "w-3 h-3",
"aria-hidden": "true",
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 14 14"
}, [
n("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),
n("span", { class: "sr-only" }, "Close modal", -1)
]))
])) : _("", !0),
n("div", X, [
h(r.$slots, "body")
]),
r.$slots.footer ? (a(), d("div", Y, [
h(r.$slots, "footer")
])) : _("", !0)
])
], 16),
c[2] || (c[2] = n("div", { class: "h-[100svh] w-[100svw] bg-[#000000]/40 fixed top-0 left-0 z-[50]" }, null, -1))
], 64)) : _("", !0)
]));
}
}), re = ["height", "width"], q = /* @__PURE__ */ g({
__name: "Spinner",
props: {
size: { default: "8" },
color: { default: "secondary" },
fillClass: { default: "" }
},
setup(s) {
const t = s, o = (u) => {
switch (u) {
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";
}
}, e = B(""), r = () => {
e.value = o(t.size);
};
D(() => {
r();
});
const c = {
primary: "fill-primary",
secondary: "fill-secondary",
success: "fill-success",
danger: "fill-danger",
gray: "fill-gray",
black: "fill-black",
white: "fill-white"
}, l = y(() => t.fillClass ? t.fillClass : c[t.color ?? "secondary"] ?? "fill-secondary");
return (u, f) => (a(), d("output", null, [
(a(), d("svg", {
"aria-hidden": "true",
height: e.value,
width: e.value,
class: N([
"text-gray-200 animate-spin dark:text-dark-border",
l.value
]),
viewBox: "0 0 100 101",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, f[0] || (f[0] = [
n("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),
n("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)
]), 10, re)),
f[1] || (f[1] = n("span", { class: "sr-only" }, "Loading...", -1))
]));
}
}), te = { class: "relative" }, ae = ["value"], se = {
key: 0,
class: "absolute inset-y-0 flex items-center right-0 pe-3"
}, de = {
key: 1,
class: "absolute inset-y-0 flex items-center right-0 pe-3"
}, oe = {
key: 2,
class: "absolute w-full bg-white border border-gray-300 rounded z-20 shadow-sm font-normal dark:bg-dark-surface dark:border-dark-border dark:text-dark-text"
}, le = { class: "divide-y max-h-62.5 overflow-y-auto dark:divide-dark-border" }, ne = ["onMousedown"], ie = {
key: 1,
class: "pl-3 py-2"
}, ue = {
key: 0,
class: "text-xs text-danger font-medium mt-1"
}, ce = /* @__PURE__ */ g({
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(s, { emit: t }) {
const o = s, e = t, r = y(() => {
let i = "";
return i += ` ${u()}`, i;
}), c = B(!1), l = B(null), u = () => {
switch (o.size) {
case "sm":
return "text-sm h-[40px] sm:h-[36px]";
case "lg":
return "text-lg h-[48px]";
default:
return "text-base h-[44px]";
}
}, f = (i) => {
e("update:modelValue", i), e("selected", i), l.value?.blur();
};
function m(i, v) {
let b = null;
return function(...p) {
b !== null && clearTimeout(b), b = setTimeout(() => {
i(...p);
}, v);
};
}
const k = m((i) => {
e("update:modelValue", i), e("completed");
}, 300), $ = () => {
setTimeout(() => {
c.value = !1;
}, 100);
};
return (i, v) => (a(), d(I, null, [
n("div", te, [
n("input", w({
ref_key: "input",
ref: l
}, i.$attrs, {
value: typeof i.modelValue == "object" ? i.modelValue?.[i.optionLabel] ?? "" : i.modelValue,
onFocus: v[0] || (v[0] = (b) => c.value = !0),
onBlur: $,
onInput: v[1] || (v[1] = (b) => E(k)(b.target.value)),
class: [
r.value,
i.isLinked || i.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 dark:bg-dark-surface dark:border-dark-border dark:text-dark-text dark:placeholder:text-dark-muted dark:disabled:bg-dark-surface2 dark:disabled:text-dark-muted"
]
}), null, 16, ae),
i.isRequesting ? (a(), d("div", se, [
Z(q, { size: "5" })
])) : i.isLinked ? (a(), d("div", de, [
h(i.$slots, "default", {}, () => [
v[2] || (v[2] = n("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
class: "bi bi-link-45deg",
viewBox: "0 0 16 16"
}, [
n("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" }),
n("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),
c.value && i.modelValue !== "" ? (a(), d("div", oe, [
n("ul", le, [
i.data.length > 0 ? (a(!0), d(I, { key: 0 }, S(i.data, (b, p) => (a(), d("li", {
key: p,
onMousedown: M((C) => f(b), ["prevent"]),
class: "pl-3 py-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-dark-surface2"
}, x(typeof b == "object" ? b?.[i.optionLabel] ?? "" : b), 41, ne))), 128)) : (a(), d("li", ie, x(i.noDataMessage), 1))
])
])) : _("", !0)
]),
i.errorMessage !== "" ? (a(), d("div", ue, x(i.errorMessage), 1)) : _("", !0)
], 64));
}
}), be = { class: "inline-flex items-center gap-2 cursor-pointer" }, me = ["checked", "disabled"], pe = {
key: 0,
class: "text-xs text-danger font-medium mt-1"
}, ke = /* @__PURE__ */ g({
inheritAttrs: !1,
__name: "CheckboxInput",
props: {
modelValue: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
errorMessage: { default: "" },
size: { default: "md" }
},
emits: ["update:modelValue"],
setup(s, { emit: t }) {
const o = s, e = t;
function r(l) {
const u = l.target;
u && e("update:modelValue", u.checked);
}
const c = y(() => {
switch (o.size) {
case "sm":
return "w-4 h-4 sm:w-3.5 sm:h-3.5 text-sm";
case "lg":
return "w-5 h-5 text-lg";
default:
return "w-5 h-5 sm:w-4 sm:h-4 text-base";
}
});
return (l, u) => (a(), d("div", null, [
n("label", be, [
n("input", w({ type: "checkbox" }, l.$attrs, {
checked: l.modelValue,
disabled: l.disabled,
class: [c.value, "accent-primary rounded"],
onChange: r
}), null, 16, me),
h(l.$slots, "default")
]),
l.errorMessage ? (a(), d("div", pe, x(l.errorMessage), 1)) : _("", !0)
]));
}
}), fe = ["value"], ge = /* @__PURE__ */ g({
inheritAttrs: !1,
__name: "TextArea",
props: {
modelValue: { default: "" }
},
emits: ["update:modelValue"],
setup(s) {
return (t, o) => (a(), d("textarea", w({ 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 dark:bg-dark-surface dark:border-dark-border dark:text-dark-text dark:placeholder:text-dark-muted dark:disabled:bg-dark-surface2 dark:disabled:text-dark-muted" }, t.$attrs, {
onInput: o[0] || (o[0] = (e) => t.$emit("update:modelValue", e.target.value)),
value: t.modelValue
}), null, 16, fe));
}
}), he = { class: "relative" }, xe = ["value"], ye = {
key: 1,
class: "text-xs text-danger font-medium mt-1"
}, ve = /* @__PURE__ */ g({
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"],
setup(s, { emit: t }) {
const o = s, e = t;
function r(m) {
return m.replaceAll(/\D/g, "").replace(/^0+(?!$)/, "");
}
function c(m) {
const k = r(m);
return k ? k.replaceAll(/\B(?=(\d{3})+(?!\d))/g, ",") : "";
}
function l(m) {
const k = m.target;
if (!k) return;
const $ = k.value;
let i;
o.isCurrency ? i = c($) : o.isNumber ? i = r($) : i = $, i !== $ && (k.value = i), e("update:modelValue", i);
}
const u = y(() => o.hasIcon ? o.iconPosition === "left" ? "pl-9" : "pr-9" : ""), f = y(() => {
switch (o.size) {
case "sm":
return "text-sm h-[40px] sm:h-[36px]";
case "lg":
return "text-lg h-[48px]";
default:
return "text-base h-[44px]";
}
});
return (m, k) => (a(), d("div", he, [
n("input", w(m.$attrs, {
value: m.modelValue,
class: [
u.value,
f.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 dark:bg-dark-surface dark:border-dark-border dark:text-dark-text dark:placeholder:text-dark-muted dark:disabled:bg-dark-surface2 dark:disabled:text-dark-muted"
],
onInput: l
}), null, 16, xe),
m.hasIcon ? (a(), d("div", {
key: 0,
class: N(["absolute inset-y-0 flex items-center text-black dark:text-dark-text", m.iconPosition === "left" ? "left-0 ps-3" : "right-0 pe-3"]),
onClick: k[0] || (k[0] = ($) => m.$emit("iconClick"))
}, [
h(m.$slots, "default")
], 2)) : _("", !0),
m.errorMessage ? (a(), d("div", ye, x(m.errorMessage), 1)) : _("", !0)
]));
}
}), we = { class: "block font-medium text-sm text-gray-700 dark:text-dark-text" }, $e = { key: 0 }, Ce = { key: 1 }, _e = {
key: 2,
class: "text-red-500"
}, Be = /* @__PURE__ */ g({
inheritAttrs: !1,
__name: "InputLabel",
props: {
value: { default: "" },
required: { type: Boolean, default: !1 }
},
setup(s) {
return (t, o) => (a(), d("label", we, [
t.value ? (a(), d("span", $e, x(t.value), 1)) : (a(), d("span", Ce, [
h(t.$slots, "default")
])),
t.required ? (a(), d("span", _e, "*")) : _("", !0)
]));
}
}), Ie = { 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 dark:bg-dark-surface dark:border-dark-border dark:text-dark-text" }, Te = { class: "flex flex-wrap items-center gap-2 min-h-[30px]" }, ze = ["onClick"], Ve = ["disabled", "placeholder"], Me = /* @__PURE__ */ g({
__name: "TagInput",
props: {
modelValue: { default: () => [] },
limit: { default: -1 },
bgColor: { default: "#f66b0e" },
textColor: { default: "" },
placeholder: { default: "Add a tag" }
},
emits: ["update:modelValue"],
setup(s, { emit: t }) {
const o = s, e = t, r = B(""), c = B(10), l = B(o.modelValue), u = B(null), f = (b) => {
const p = Number(o.limit);
(p === -1 || p !== -1 && l.value.length < p) && (l.value.push(b), r.value = "");
}, m = (b) => {
l.value.splice(b, 1);
}, k = () => {
u.value !== null && (c.value = u.value.clientWidth + 15, u.value.scrollTo(u.value.scrollWidth, 0));
};
A(l, () => L(k), { deep: !0 });
const $ = y(() => {
if (o.textColor)
return o.textColor;
const b = i(o.bgColor).replace("#", ""), p = Number.parseInt(b.substring(0, 2), 16), C = Number.parseInt(b.substring(2, 4), 16), T = Number.parseInt(b.substring(4, 6), 16);
return (p * 299 + C * 587 + T * 114) / 1e3 >= 128 || o.bgColor === "#f66b0e" ? "white" : "black";
}), i = (b) => {
const p = document.createElement("canvas").getContext("2d");
return p ? (p.fillStyle = b, p.fillStyle) : "#000000";
}, v = () => {
u.value !== null && (c.value = u.value.clientWidth + 15, u.value.scrollTo(u.value.scrollWidth, 0), e("update:modelValue", l.value));
};
return A(l, () => L(v), { deep: !0 }), j(() => {
v(), k();
}), (b, p) => (a(), d("div", Ie, [
n("div", Te, [
(a(!0), d(I, null, S(l.value, (C, T) => (a(), d("span", {
key: C,
class: "px-2 py-1 rounded whitespace-nowrap transition-colors duration-100 flex items-center text-sm",
style: P({ color: $.value, background: b.bgColor })
}, [
V(x(C) + " ", 1),
n("button", {
class: "bg-transparent outline-none border-none cursor-pointer ml-1",
style: P({ color: $.value }),
onClick: (H) => m(T)
}, " x ", 12, ze)
], 4))), 128)),
K(n("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 dark:text-dark-text dark:placeholder:text-dark-muted dark:disabled:bg-dark-surface2 dark:disabled:text-dark-muted",
"onUpdate:modelValue": p[0] || (p[0] = (C) => r.value = C),
disabled: l.value.length >= Number(b.limit) && Number(b.limit) !== -1,
onKeydown: [
p[1] || (p[1] = z(M((C) => f(r.value), ["prevent"]), ["enter"])),
p[2] || (p[2] = z(M((C) => f(r.value), ["prevent"]), ["tab"])),
p[3] || (p[3] = z((C) => r.value.length || m(l.value.length - 1), ["delete"]))
],
type: "text",
enterkeyhint: "enter",
placeholder: b.placeholder
}, null, 40, Ve), [
[U, r.value]
])
])
]));
}
}), Ne = ["value", "disabled"], Se = /* @__PURE__ */ g({
__name: "SelectInput",
props: {
modelValue: { default: void 0 },
size: { default: "md" },
small: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 }
},
emits: ["update:modelValue"],
setup(s) {
const t = s, o = y(() => {
switch (t.size === "md" ? t.small ? "sm" : "md" : t.size) {
case "sm":
return "h-[42px] sm:h-[36px]";
case "lg":
return "h-[48px]";
default:
return "h-[48px] sm:h-[42px]";
}
});
return (e, r) => (a(), d("select", w(e.$attrs, {
value: e.modelValue,
onInput: r[0] || (r[0] = (c) => e.$emit("update:modelValue", c.target?.value)),
disabled: e.disabled,
class: [
"yozora-select 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 dark:bg-dark-surface dark:border-dark-border dark:text-dark-text dark:disabled:bg-dark-surface2 dark:disabled:text-dark-muted",
o.value
]
}), [
h(e.$slots, "default", {}, void 0, !0)
], 16, Ne));
}
}), F = (s, t) => {
const o = s.__vccOpts || s;
for (const [e, r] of t)
o[e] = r;
return o;
}, Ae = /* @__PURE__ */ F(Se, [["__scopeId", "data-v-ed67f119"]]), Le = {}, Pe = {
class: "flex",
"aria-label": "Breadcrumb"
}, je = { class: "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse" };
function De(s, t) {
return a(), d("nav", Pe, [
n("ol", je, [
h(s.$slots, "default")
])
]);
}
const qe = /* @__PURE__ */ F(Le, [["render", De]]), Fe = { key: 0 }, He = { class: "flex items-center" }, Re = ["href"], We = {
key: 0,
"aria-current": "page"
}, Ee = { class: "flex items-center" }, Ze = { class: "hover:cursor-default ms-1 font-bold text-sm md:ms-2 dark:text-dark-muted" }, Ke = { key: 1 }, Ue = { class: "flex items-center" }, Oe = ["href"], Ge = /* @__PURE__ */ g({
__name: "BreadcrumbItem",
props: {
title: { default: "" },
href: { default: "" },
current: { type: Boolean, default: !1 },
first: { type: Boolean, default: !1 }
},
emits: ["redirect"],
setup(s, { emit: t }) {
const o = t;
return (e, r) => e.first ? (a(), d("li", Fe, [
n("div", He, [
e.href ? (a(), d("a", {
key: 0,
href: e.href,
class: "hover:cursor-pointer text-sm font-medium text-gray-700 hover:text-primary dark:text-dark-text dark:hover:text-primary"
}, x(e.title), 9, Re)) : (a(), d("div", {
key: 1,
onClick: r[0] || (r[0] = (c) => o("redirect")),
class: "cursor-pointer text-sm font-medium text-gray-700 hover:text-primary dark:text-dark-text dark:hover:text-primary"
}, x(e.title), 1))
])
])) : (a(), d(I, { key: 1 }, [
e.current ? (a(), d("li", We, [
n("div", Ee, [
r[2] || (r[2] = n("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"
}, [
n("path", {
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "m1 9 4-4-4-4"
})
], -1)),
n("span", Ze, x(e.title), 1)
])
])) : (a(), d("li", Ke, [
n("div", Ue, [
r[3] || (r[3] = n("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"
}, [
n("path", {
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "m1 9 4-4-4-4"
})
], -1)),
e.href ? (a(), d("a", {
key: 0,
href: e.href,
class: "hover:cursor-pointer ms-1 text-sm font-medium text-gray-700 hover:text-primary md:ms-2 dark:text-dark-muted dark:hover:text-dark-text"
}, x(e.title), 9, Oe)) : (a(), d("div", {
key: 1,
onClick: r[1] || (r[1] = (c) => o("redirect")),
class: "cursor-pointer ms-1 text-sm font-medium text-gray-700 hover:text-primary md:ms-2 dark:text-dark-muted dark:hover:text-dark-text"
}, x(e.title), 1))
])
]))
], 64));
}
}), Je = /* @__PURE__ */ g({
__name: "Table",
props: {
fixed: { type: Boolean, default: !1 }
},
setup(s) {
const t = s, o = B("");
return D(() => {
t.fixed && (o.value = "table-fixed");
}), (e, r) => (a(), d("table", w(e.$attrs, { class: o.value }), [
h(e.$slots, "default")
], 16));
}
}), Qe = /* @__PURE__ */ g({
__name: "TableHeader",
props: {
width: { default: "" },
borderless: { type: Boolean, default: !1 },
bgColor: { default: "secondary" },
textColor: { default: "" },
textPosition: { default: "center" }
},
emits: ["sort"],
setup(s) {
const t = s;
function o(l) {
const u = l.replace("#", "").trim();
let f = 0, m = 0, k = 0;
return u.length === 3 ? (f = Number.parseInt(u[0] + u[0], 16), m = Number.parseInt(u[1] + u[1], 16), k = Number.parseInt(u[2] + u[2], 16)) : u.length === 6 && (f = Number.parseInt(u.substring(0, 2), 16), m = Number.parseInt(u.substring(2, 4), 16), k = Number.parseInt(u.substring(4, 6), 16)), [f, m, k].some(isNaN) ? "white" : (f * 299 + m * 587 + k * 114) / 1e3 >= 128 ? "black" : "white";
}
const e = y(() => t.textColor ? t.textColor : o(t.bgColor)), r = y(() => {
let l = "px-4 py-1";
return t.width !== "" && (l += ` w-[${t.width}]`), t.borderless || (l += " border-l border-t border-gray-700 text-center last:border-r dark:border-dark-border"), l;
}), c = y(() => ({
background: t.bgColor,
color: e.value,
textAlign: t.textPosition || "center"
}));
return (l, u) => (a(), d("th", w({
scope: "col",
onClick: u[0] || (u[0] = (f) => l.$emit("sort"))
}, l.$attrs, {
class: r.value,
style: c.value
}), [
h(l.$slots, "default")
], 16));
}
}), Xe = /* @__PURE__ */ g({
__name: "TableData",
props: {
width: { default: "" },
borderless: { type: Boolean, default: !1 }
},
setup(s) {
const t = s, o = y(() => {
let e = "px-4 py-2";
return t.width !== "" && (e += ` w-[${t.width}]`), t.borderless || (e += " border-l border-b last:border-r border-gray-700 dark:border-dark-border"), e;
});
return (e, r) => (a(), d("td", w(e.$attrs, { class: o.value }), [
h(e.$slots, "default")
], 16));
}
}), Ye = {
class: "lg:w-auto pb-2 lg:pb-0 w-full",
"aria-label": "Page navigation example"
}, er = { class: "flex flex-wrap lg:flex-nowrap items-center -space-x-px h-8 text-xs lg:text-sm" }, rr = ["onClick"], tr = {
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 dark:bg-dark-surface dark:border-dark-border dark:text-dark-muted dark:hover:bg-dark-surface2 dark:hover:text-dark-text"
}, ar = {
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 dark:bg-dark-surface dark:border-dark-border dark:text-dark-muted dark:hover:bg-dark-surface2 dark:hover:text-dark-text"
}, sr = /* @__PURE__ */ g({
__name: "Pagination",
props: {
pagination: { default: () => [{ label: "", url: "" }] },
currentPage: { default: 1 }
},
emits: ["changePage"],
setup(s, { emit: t }) {
const o = t, e = (r, c) => {
o("changePage", r, c);
};
return (r, c) => (a(), d("nav", Ye, [
n("ul", er, [
(a(!0), d(I, null, S(r.pagination, (l) => (a(), d("li", {
class: "cursor-pointer",
onClick: (u) => e(l.label, l.url)
}, [
l.label.toLowerCase().includes("next") ? (a(), d("div", tr, c[0] || (c[0] = [
n("span", { class: "sr-only" }, "Next", -1),
n("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"
}, [
n("path", {
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "m1 9 4-4-4-4"
})
], -1)
]))) : l.label.toLowerCase().includes("previous") ? (a(), d("div", ar, c[1] || (c[1] = [
n("span", { class: "sr-only" }, "Previous", -1),
n("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"
}, [
n("path", {
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M5 1 1 5l4 4"
})
], -1)
]))) : (a(), d("div", {
key: 2,
class: N([
"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 dark:border-dark-border dark:hover:bg-dark-surface2 dark:hover:text-dark-text",
r.currentPage.toString() === l.label ? "bg-primary text-white dark:bg-primary dark:text-white" : "bg-white dark:bg-dark-surface dark:text-dark-text"
])
}, x(l.label), 3))
], 8, rr))), 256))
])
]));
}
}), or = {
install(s) {
s.component("Button", G), s.component("TextArea", ge), s.component("TextInput", ve), s.component("InputLabel", Be), s.component("TagInput", Me), s.component("Table", Je), s.component("TableHeader", Qe), s.component("TableData", Xe), s.component("Pagination", sr), s.component("SelectInput", Ae), s.component("Breadcrumb", qe), s.component("BreadcrumbItem", Ge), s.component("Modal", ee), s.component("Spinner", q), s.component("AutoCompleteInput", ce), s.component("CheckboxInput", ke);
}
};
export {
ce as AutoCompleteInput,
qe as Breadcrumb,
Ge as BreadcrumbItem,
G as Button,
ke as CheckboxInput,
Be as InputLabel,
ee as Modal,
sr as Pagination,
Ae as SelectInput,
q as Spinner,
Je as Table,
Xe as TableData,
Qe as TableHeader,
Me as TagInput,
ge as TextArea,
ve as TextInput,
or as default
};