kodama-ui/dist/main-e41e5fb4.mjs

Kodama UI is a Vue 3 component library that provides a set of components & funcionality to build your application.

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