kodama-ui
Version:
Kodama UI is a Vue 3 component library that provides a set of components & funcionality to build your application.
701 lines (700 loc) ā¢ 23.6 kB
JavaScript
import { defineComponent as A, inject as B, computed as z, onMounted as K, watch as W, resolveComponent as p, openBlock as n, createElementBlock as u, normalizeClass as T, Fragment as E, renderList as L, createTextVNode as w, toDisplayString as N, createCommentVNode as m, createVNode as i, withCtx as y, createBlock as M, createElementVNode as a, resolveDynamicComponent as D, ref as U, createStaticVNode as x } from "vue";
import { u as R, v as V, A as P, _ as F, a as C, d as G } from "./main-ac44fa27.mjs";
const J = [
// {
// separator: true
// },
// {
// // heading: 'Config',
// // route: '/produccion',
// pages: [
// {
// sectionTitle: 'Changelog v1.0',
// route: '/cupones',
// icon: ['fad', 'fa-file']
// }
// ]
// }
], X = A({
name: "KMenu",
props: {
collapsed: {
type: Boolean,
default: !1
}
},
setup() {
const e = R(), o = B("$menu") || (() => []), _ = [{ separator: !0 }], c = z(() => [...o(), ..._, ...J]), $ = (l) => e.path.indexOf(l.toString()) !== -1, f = (l) => l.auth !== void 0 ? !!l.auth : !0, d = (l) => {
if (l.auth)
return l.auth;
if (l.pages)
for (let k = 0; k < l.pages.length; k++) {
const h = l.pages[k];
if (h.auth)
return h.auth;
if (h.pages)
for (let t = 0; t < h.pages.length; t++) {
const g = h.pages[t];
if (f(g))
return !0;
}
}
return !1;
}, r = () => {
let l = [];
c.value.forEach((h) => {
h.pages && h.pages.forEach((t) => {
if (t.pages) {
const g = document.getElementById(
`k-menu-dropdown-${t.title}`
), s = document.getElementById(
`k-menu-dropdown-${t.title}-body`
);
g && s && l.push({
id: `k-menu-dropdown-${t.title}`,
triggerEl: g,
targetEl: s,
active: !1
});
}
});
});
const k = {
alwaysOpen: !0,
activeClasses: "bg-gray-800 text-gray-200",
inactiveClasses: "text-gray-200"
};
new P(l, k);
};
return K(() => {
r();
}), W(
c,
() => {
setTimeout(() => {
r();
}, 500);
},
{ deep: !0 }
), {
hasActiveChildren: $,
hasOneAccess: d,
menu: c,
version: V,
checkRoles: f
};
}
});
const q = {
key: 0,
class: "k-menu-header"
}, O = {
key: 1,
class: "k-menu-separator"
}, H = { key: 0 }, Q = ["data-href", "onClick"], Y = {
key: 0,
class: "k-menu-icon"
}, Z = {
key: 1,
class: "k-menu-title"
}, I = ["id"], ee = {
key: 0,
class: "k-menu-icon"
}, te = {
key: 1,
class: "k-menu-title"
}, oe = ["id"], ne = { key: 0 }, se = ["data-href", "onClick"], le = {
key: 0,
class: "k-menu-icon"
}, ae = {
key: 1,
class: "k-menu-title"
};
function ie(e, o, _, c, $, f) {
const d = p("k-icon"), r = p("router-link"), l = p("k-tooltip");
return n(), u("ul", {
class: T(["k-menu", { "k-menu-collapsed": e.collapsed }])
}, [
(n(!0), u(E, null, L(e.menu, (k, h) => (n(), u(E, { key: h }, [
e.checkRoles(k) ? (n(), u(E, { key: 0 }, [
k.heading && e.hasOneAccess(k) ? (n(), u("li", q, [
e.collapsed ? m("", !0) : (n(), u(E, { key: 0 }, [
w(N(k.heading), 1)
], 64))
])) : k.separator ? (n(), u("li", O)) : m("", !0),
(n(!0), u(E, null, L(k.pages, (t, g) => (n(), u(E, { key: g }, [
e.checkRoles(t) ? (n(), u(E, { key: 0 }, [
t.pages ? e.hasOneAccess(t) ? (n(), u("li", {
key: 1,
class: T({
show: e.hasActiveChildren(t.route)
})
}, [
i(l, {
content: t.title,
placement: "right",
arrow: !1,
disabled: !e.collapsed
}, {
default: y(() => [
a("button", {
id: `k-menu-dropdown-${t.title}`,
class: "k-menu-item"
}, [
t.icon ? (n(), u("span", ee, [
i(d, {
icon: t.icon,
type: t.iconType || "fal"
}, null, 8, ["icon", "type"])
])) : m("", !0),
e.collapsed ? m("", !0) : (n(), u("span", te, N(t.title), 1)),
t.pages && !e.collapsed ? (n(), M(d, {
key: 2,
icon: "chevron-down",
type: "fal",
class: "k-menu-chevron"
})) : m("", !0)
], 8, I)
]),
_: 2
}, 1032, ["content", "disabled"]),
a("ul", {
id: `k-menu-dropdown-${t.title}-body`,
class: "k-menu-sub hidden"
}, [
(n(!0), u(E, null, L(t.pages, (s, v) => (n(), u(E, { key: v }, [
s.title && e.checkRoles(s) ? (n(), u("li", ne, [
i(l, {
content: s.title,
placement: "right",
arrow: !1,
disabled: !e.collapsed
}, {
default: y(() => [
s.pages ? m("", !0) : (n(), M(r, {
key: 0,
"active-class": "active",
to: s.disabled ? {} : s.route
}, {
default: y(({
href: b,
navigate: S,
isActive: j
}) => [
a("button", {
class: T(["k-menu-item", {
"k-menu-item-active": j,
"k-menu-item-disabled": s.disabled
}]),
"data-href": b,
onClick: S
}, [
s.icon ? (n(), u("span", le, [
i(d, {
icon: s.icon,
type: s.iconType || "fal"
}, null, 8, ["icon", "type"])
])) : m("", !0),
e.collapsed ? m("", !0) : (n(), u("span", ae, N(s.title), 1))
], 10, se)
]),
_: 2
}, 1032, ["to"]))
]),
_: 2
}, 1032, ["content", "disabled"])
])) : m("", !0)
], 64))), 128))
], 8, oe)
], 2)) : m("", !0) : (n(), u("li", H, [
i(l, {
hover: t.title,
placement: "right",
arrow: !1,
disabled: !e.collapsed
}, {
default: y(() => [
t.pages ? m("", !0) : (n(), M(r, {
key: 0,
"active-class": "active",
to: t.disabled ? {} : t.route
}, {
default: y(({ href: s, navigate: v, isActive: b }) => [
a("button", {
class: T(["k-menu-item", {
"k-menu-item-active": b,
"k-menu-item-disabled": t.disabled
}]),
"data-href": s,
onClick: v
}, [
t.icon ? (n(), u("span", Y, [
i(d, {
icon: t.icon,
type: t.iconType || "fal"
}, null, 8, ["icon", "type"])
])) : m("", !0),
e.collapsed ? m("", !0) : (n(), u("span", Z, N(t.title), 1)),
t.pages && !e.collapsed ? (n(), M(d, {
key: 2,
icon: "chevron-down",
type: "fal",
class: "k-menu-chevron"
})) : m("", !0)
], 10, Q)
]),
_: 2
}, 1032, ["to"]))
]),
_: 2
}, 1032, ["hover", "disabled"])
]))
], 64)) : m("", !0)
], 64))), 128))
], 64)) : m("", !0)
], 64))), 128))
], 2);
}
const ce = /* @__PURE__ */ F(X, [["render", ie], ["__scopeId", "data-v-d5790965"]]), re = A({
name: "KAside",
components: {
KMenu: ce
},
setup() {
const e = (f) => typeof D(f) != "string", o = z({
get() {
return C().get("aside.collapsed") || !1;
},
set(f) {
C().set("aside.collapsed", f);
}
}), _ = z(() => C().get("isMobileView") || !1), c = z(() => C().get("menuType") || "default");
return {
collapsed: o,
menuType: c,
isMobile: _,
isComponent: e,
handlerColapsed: (f) => {
!o.value && c.value === "block" && !_.value || !o.value && c.value === "simple" && !_.value ? o.value = !1 : o.value = f ?? !o.value;
}
};
}
});
const de = { class: "overflow-y-auto py-5 px-3 h-full flex-1" }, ue = { class: "justify-center p-4 space-x-4" };
function pe(e, o, _, c, $, f) {
const d = p("k-icon"), r = p("k-title"), l = p("k-logo"), k = p("k-button"), h = p("k-menu"), t = p("k-aside-footer");
return n(), u("aside", {
id: "k-aside",
class: T({ collapsed: e.collapsed })
}, [
a("div", {
class: T(["px-3 pb-5 pt-5 flex relative", e.collapsed ? "justify-center" : "justify-between"])
}, [
e.isMobile && e.menuType === "simple" ? (n(), u("div", {
key: 0,
class: "flex items-center cursor-pointer",
onClick: o[0] || (o[0] = (g) => e.handlerColapsed(!0))
}, [
i(d, {
icon: "xmark",
type: "far",
class: "text-lg mx-2"
}),
i(r, { size: 5 }, {
default: y(() => [
w("MENU")
]),
_: 1
})
])) : e.collapsed ? (n(), M(l, {
key: 2,
dark: "",
side: !1,
class: "cursor-pointer max-w-[54px]",
onClick: o[2] || (o[2] = (g) => e.handlerColapsed(!1))
})) : (n(), M(l, {
key: 1,
dark: "",
side: "",
class: "cursor-pointer max-w-[14rem]",
onClick: o[1] || (o[1] = (g) => e.handlerColapsed(!0))
})),
(e.isMobile || e.menuType === "default") && !e.collapsed ? (n(), M(k, {
key: 3,
icon: "chevrons-left",
link: "",
color: "primary",
class: "-mr-2",
onClick: o[3] || (o[3] = (g) => e.handlerColapsed(!0))
})) : m("", !0)
], 2),
a("div", de, [
i(h, { collapsed: e.collapsed }, null, 8, ["collapsed"])
]),
a("div", ue, [
i(t, { collapsed: e.collapsed }, null, 8, ["collapsed"])
])
], 2);
}
const fe = /* @__PURE__ */ F(re, [["render", pe], ["__scopeId", "data-v-618367f0"]]);
function ke(e = {}) {
const {
immediate: o = !1,
onNeedRefresh: _,
onOfflineReady: c,
onRegistered: $,
onRegisteredSW: f,
onRegisterError: d
} = e;
let r, l, k;
const h = async (g = !0) => {
await l, await (k == null ? void 0 : k());
};
async function t() {
if ("serviceWorker" in navigator) {
const { Workbox: g } = await import("./workbox-window.prod.es5-5e28cea8.mjs");
r = new g("/sw.js", { scope: "/", type: "classic" }), k = async () => {
await (r == null ? void 0 : r.messageSkipWaiting());
};
{
let s = !1;
const v = () => {
s = !0, r == null || r.addEventListener("controlling", (b) => {
b.isUpdate && window.location.reload();
}), _ == null || _();
};
r.addEventListener("installed", (b) => {
typeof b.isUpdate > "u" ? typeof b.isExternal < "u" ? b.isExternal ? v() : !s && (c == null || c()) : b.isExternal ? window.location.reload() : !s && (c == null || c()) : b.isUpdate || c == null || c();
}), r.addEventListener("waiting", v), r.addEventListener("externalwaiting", v);
}
r.register({ immediate: o }).then((s) => {
f ? f("/sw.js", s) : $ == null || $(s);
}).catch((s) => {
d == null || d(s);
});
}
}
return l = t(), h;
}
const ge = A({
name: "KUpdater",
setup() {
let e = U(!1), o = null;
const _ = () => {
o && o(!0);
};
return K(() => {
"serviceWorker" in navigator && (o = ke({
onNeedRefresh() {
e.value = !0;
},
onRegistered(c) {
c && setInterval(() => {
c.update();
}, 6e4);
}
}));
}), { update: _, updateAvailable: e };
}
});
function me(e, o, _, c, $, f) {
const d = p("k-button"), r = p("k-tooltip");
return e.updateAvailable ? (n(), M(r, {
key: 0,
content: "š¾ ActualizaciĆ³n disponible",
placement: "left"
}, {
default: y(() => [
i(d, {
neon: "",
color: "success",
icon: "cloud-arrow-down",
onClick: e.update
}, null, 8, ["onClick"])
]),
_: 1
})) : m("", !0);
}
const _e = /* @__PURE__ */ F(ge, [["render", me]]), he = A({
name: "KDebug",
setup() {
const e = C();
return { debug: z(() => e.get("debug")) };
}
}), ve = "_debug_54i91_1", ye = {
debug: ve
}, $e = /* @__PURE__ */ x('<div class="block sm:hidden">XS</div><div class="hidden sm:block md:hidden">SM</div><div class="hidden md:block lg:hidden">MD</div><div class="hidden lg:block xl:hidden">LG</div><div class="hidden xl:block">XL</div>', 5), be = [
$e
];
function we(e, o, _, c, $, f) {
return e.debug ? (n(), u("div", {
key: 0,
class: T(e.$style.debug)
}, be, 2)) : m("", !0);
}
const Ce = {
$style: ye
}, Me = /* @__PURE__ */ F(he, [["render", we], ["__cssModules", Ce]]), ze = A({
name: "KTopbar",
components: {
KUpdater: _e,
KDebug: Me
},
setup() {
const e = B("$auth"), o = () => {
e.logout();
}, _ = z(() => e.getLastName() || "Jhon"), c = z(() => {
const t = e.getName() || "Jhon", g = e.getLastName() || "Doe";
return `${t} ${g}`;
}), $ = z({
get() {
return C().get("aside.collapsed") || !1;
},
set(t) {
C().set("aside.collapsed", t);
}
}), f = z(() => C().get("darkMode")), d = () => {
const t = C();
f.value ? (t.set("darkMode", !1), document.getElementsByTagName("html")[0].classList.remove("dark"), document.getElementsByTagName("html")[0].classList.add("light")) : (t.set("darkMode", !0), document.getElementsByTagName("html")[0].classList.remove("light"), document.getElementsByTagName("html")[0].classList.add("dark"));
}, r = z(() => C().get("fontSize") || "medium"), l = (t) => {
C().set("fontSize", t);
const s = document.documentElement, v = {
small: ".8rem",
medium: ".9rem",
large: "1rem"
};
s.style.setProperty("--font-size-base", v[t]);
}, k = (t) => {
if (t.target.closest("label"))
return;
const g = ["small", "medium", "large"], v = (g.indexOf(
r.value
) + 1) % g.length;
l(g[v]);
}, h = z(() => C().get("menuType") || "default");
return {
//Variables
firstname: _,
fullname: c,
collapsed: $,
darkMode: f,
defaultRoutes: G,
fontSize: r,
menuType: h,
// Methods
logout: o,
toggleTheme: d,
setFontSize: l,
cycleFontSize: k
};
}
});
const Se = { class: "px-4 lg:px-6 py-2.5 bg-sidebar text-gray-200 select-none" }, Ee = { class: "flex flex-wrap items-center" }, Te = { class: "flex sm:hidden" }, Ne = { class: "hidden sm:flex justify-start items-center" }, Ae = /* @__PURE__ */ a("div", { class: "ml-auto" }, null, -1), Fe = { class: "flex flex-row gap-4 items-center" }, Le = { class: "flex items-center lg:order-2" }, Be = { class: "flex gap-4 items-center" }, Ke = /* @__PURE__ */ a("br", null, null, -1), je = { class: "size-list" }, We = ["checked"], De = ["checked"], Ue = ["checked"];
function xe(e, o, _, c, $, f) {
const d = p("k-icon"), r = p("k-title"), l = p("k-button"), k = p("k-toolbar-left"), h = p("k-updater"), t = p("k-toolbar-right"), g = p("k-debug"), s = p("k-avatar"), v = p("k-dropdown-menu"), b = p("k-dropdown");
return n(), u("header", null, [
a("nav", Se, [
a("div", Ee, [
a("div", Te, [
e.menuType === "simple" ? (n(), u("div", {
key: 0,
class: "flex items-center cursor-pointer",
onClick: o[0] || (o[0] = (S) => e.collapsed = !1)
}, [
i(d, {
icon: "bars",
type: "far",
class: "text-lg mx-2"
}),
i(r, { size: 5 }, {
default: y(() => [
w("MENU")
]),
_: 1
})
])) : (n(), M(l, {
key: 1,
icon: "chevrons-right",
link: "",
color: "primary",
onClick: o[1] || (o[1] = (S) => e.collapsed = !1)
}))
]),
a("div", Ne, [
i(k, { collapsed: e.collapsed }, null, 8, ["collapsed"])
]),
Ae,
a("div", Fe, [
i(h),
i(t, { collapsed: e.collapsed }, null, 8, ["collapsed"]),
e.menuType !== "simple" ? (n(), M(g, { key: 0 })) : m("", !0),
a("div", Le, [
i(b, null, {
header: y(() => [
a("div", Be, [
i(s, {
name: e.fullname,
size: 40,
tooltip: !1
}, null, 8, ["name"]),
a("div", null, [
w(" Bienvenido "),
Ke,
a("strong", null, N(e.firstname), 1)
])
])
]),
content: y(() => [
i(v, { onClick: e.toggleTheme }, {
default: y(() => [
i(d, {
icon: e.darkMode ? "sun" : "moon",
type: "fal",
class: "mr-2"
}, null, 8, ["icon"]),
w(" " + N(e.darkMode ? "Modo claro" : "Modo oscuro"), 1)
]),
_: 1
}, 8, ["onClick"]),
i(v, {
class: "size-config",
onClick: e.cycleFontSize
}, {
default: y(() => [
i(d, {
icon: "text-size",
type: "fal",
class: "mr-2"
}),
w(" TamaƱo "),
a("ul", je, [
a("li", null, [
a("label", null, [
a("input", {
type: "radio",
name: "size",
value: "small",
checked: e.fontSize === "small",
onChange: o[2] || (o[2] = (S) => e.setFontSize("small"))
}, null, 40, We),
w(" SM ")
])
]),
a("li", null, [
a("label", null, [
a("input", {
type: "radio",
name: "size",
value: "medium",
checked: e.fontSize === "medium",
onChange: o[3] || (o[3] = (S) => e.setFontSize("medium"))
}, null, 40, De),
w(" MD ")
])
]),
a("li", null, [
a("label", null, [
a("input", {
type: "radio",
name: "size",
value: "large",
checked: e.fontSize === "large",
onChange: o[4] || (o[4] = (S) => e.setFontSize("large"))
}, null, 40, Ue),
w(" LG ")
])
])
])
]),
_: 1
}, 8, ["onClick"]),
e.defaultRoutes.profile ? (n(), M(v, {
key: 0,
onClick: o[5] || (o[5] = (S) => e.$router.push(e.defaultRoutes.profile))
}, {
default: y(() => [
i(d, {
icon: "address-card",
type: "fal",
class: "mr-2"
}),
w(" Mi Perfil ")
]),
_: 1
})) : m("", !0),
e.defaultRoutes.configuration ? (n(), M(v, {
key: 1,
onClick: o[6] || (o[6] = (S) => e.$router.push(
e.defaultRoutes.configuration
))
}, {
default: y(() => [
i(d, {
icon: "gear",
type: "fal",
class: "mr-2"
}),
w(" ConfiguraciĆ³n ")
]),
_: 1
})) : m("", !0)
]),
footer: y(() => [
a("a", {
class: "text-danger cursor-pointer block",
onClick: o[7] || (o[7] = (S) => e.logout())
}, [
i(d, {
icon: "right-from-bracket",
class: "mr-2"
}),
w(" Cerrar sesiĆ³n ")
])
]),
default: y(() => [
a("div", null, [
i(s, {
name: e.fullname,
size: 42,
tooltip: !1,
square: "",
class: "cursor-pointer"
}, null, 8, ["name"])
])
]),
_: 1
})
])
])
])
])
]);
}
const Re = /* @__PURE__ */ F(ze, [["render", xe]]), Ve = A({
name: "KMain",
components: {
KAside: fe,
KTopbar: Re
},
setup() {
return {};
}
});
const Pe = { class: "flex flex-row bg-white dark:bg-gray-800" }, Ge = {
id: "k-wrapper",
class: "flex flex-col flex-row-fluid w-full bg-gray-100 dark:bg-gray-900 h-screen overflow-y-auto overflow-x-hidden"
};
function Je(e, o, _, c, $, f) {
const d = p("k-aside"), r = p("k-topbar"), l = p("router-view");
return n(), u("div", Pe, [
i(d),
a("div", Ge, [
i(r),
i(l)
])
]);
}
const Oe = /* @__PURE__ */ F(Ve, [["render", Je]]);
export {
Oe as default
};