kodama-ui/dist/main-ebc8102c.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 B, computed as w, onMounted as K, watch as D, resolveComponent as c, openBlock as t, createElementBlock as i, normalizeClass as T, Fragment as S, renderList as R, createTextVNode as b, toDisplayString as E, createCommentVNode as u, 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 U, v as W, A as G, _ as A, a as $, d as J } from "./main-5627e7fd.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 = U(), n = B("$menu") || (() => []), v = [{ separator: !0 }], k = w(() => [...n(), ...v, ...X]), M = (a) => e.path.indexOf(a.toString()) !== -1, p = (a) => a.auth !== void 0 ? !!a.auth : !0, r = (a) => {
      if (a.auth)
        return a.auth;
      if (a.pages)
        for (let _ = 0; _ < a.pages.length; _++) {
          const m = a.pages[_];
          if (m.auth)
            return m.auth;
          if (m.pages)
            for (let o = 0; o < m.pages.length; o++) {
              const f = m.pages[o];
              if (p(f))
                return !0;
            }
        }
      return !1;
    }, g = () => {
      let a = [];
      k.value.forEach((m) => {
        m.pages && m.pages.forEach((o) => {
          if (o.pages) {
            const f = document.getElementById(
              `k-menu-dropdown-${o.title}`
            ), d = document.getElementById(
              `k-menu-dropdown-${o.title}-body`
            );
            f && d && a.push({
              id: `k-menu-dropdown-${o.title}`,
              triggerEl: f,
              targetEl: d,
              active: !1
            });
          }
        });
      });
      const _ = {
        alwaysOpen: !0,
        activeClasses: "bg-gray-800 text-gray-200",
        inactiveClasses: "text-gray-200"
      };
      new G(a, _);
    };
    return K(() => {
      g();
    }), D(
      k,
      () => {
        setTimeout(() => {
          g();
        }, 500);
      },
      { deep: !0 }
    ), {
      hasActiveChildren: M,
      hasOneAccess: r,
      menu: k,
      version: W,
      checkRoles: p
    };
  }
});
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"
}, ne = {
  key: 1,
  class: "k-menu-title"
}, te = ["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, n, v, k, M, p) {
  const r = c("k-icon"), g = c("router-link"), a = c("k-tooltip");
  return t(), i("ul", {
    class: T(["k-menu", { "k-menu-collapsed": e.collapsed }])
  }, [
    (t(!0), i(S, null, R(e.menu, (_, m) => (t(), i(S, { key: m }, [
      e.checkRoles(_) ? (t(), i(S, { key: 0 }, [
        _.heading && e.hasOneAccess(_) ? (t(), i("li", x, [
          e.collapsed ? u("", !0) : (t(), i(S, { key: 0 }, [
            b(E(_.heading), 1)
          ], 64))
        ])) : _.separator ? (t(), i("li", H)) : u("", !0),
        (t(!0), i(S, null, R(_.pages, (o, f) => (t(), i(S, { key: f }, [
          e.checkRoles(o) ? (t(), i(S, { key: 0 }, [
            o.pages ? e.hasOneAccess(o) ? (t(), 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 ? (t(), i("span", oe, [
                      l(r, {
                        icon: o.icon,
                        type: o.iconType || "fal"
                      }, null, 8, ["icon", "type"])
                    ])) : u("", !0),
                    e.collapsed ? u("", !0) : (t(), i("span", ne, E(o.title), 1)),
                    o.pages && !e.collapsed ? (t(), C(r, {
                      key: 2,
                      icon: "chevron-down",
                      type: "fal",
                      class: "k-menu-chevron"
                    })) : u("", !0)
                  ], 8, ee)
                ]),
                _: 2
              }, 1032, ["content", "disabled"]),
              s("ul", {
                id: `k-menu-dropdown-${o.title}-body`,
                class: "k-menu-sub hidden"
              }, [
                (t(!0), i(S, null, R(o.pages, (d, y) => (t(), i(S, { key: y }, [
                  d.title && e.checkRoles(d) ? (t(), i("li", se, [
                    l(a, {
                      content: d.title,
                      placement: "right",
                      arrow: !1,
                      disabled: !e.collapsed
                    }, {
                      default: h(() => [
                        d.pages ? u("", !0) : (t(), C(g, {
                          key: 0,
                          "active-class": "active",
                          to: d.disabled ? {} : d.route
                        }, {
                          default: h(({
                            href: F,
                            navigate: z,
                            isActive: L
                          }) => [
                            s("button", {
                              class: T(["k-menu-item", {
                                "k-menu-item-active": L,
                                "k-menu-item-disabled": d.disabled
                              }]),
                              "data-href": F,
                              onClick: z
                            }, [
                              d.icon ? (t(), i("span", ae, [
                                l(r, {
                                  icon: d.icon,
                                  type: d.iconType || "fal"
                                }, null, 8, ["icon", "type"])
                              ])) : u("", !0),
                              e.collapsed ? u("", !0) : (t(), i("span", ie, E(d.title), 1))
                            ], 10, le)
                          ]),
                          _: 2
                        }, 1032, ["to"]))
                      ]),
                      _: 2
                    }, 1032, ["content", "disabled"])
                  ])) : u("", !0)
                ], 64))), 128))
              ], 8, te)
            ], 2)) : u("", !0) : (t(), i("li", Q, [
              l(a, {
                hover: o.title,
                placement: "right",
                arrow: !1,
                disabled: !e.collapsed
              }, {
                default: h(() => [
                  o.pages ? u("", !0) : (t(), C(g, {
                    key: 0,
                    "active-class": "active",
                    to: o.disabled ? {} : o.route
                  }, {
                    default: h(({ href: d, navigate: y, isActive: F }) => [
                      s("button", {
                        class: T(["k-menu-item", {
                          "k-menu-item-active": F,
                          "k-menu-item-disabled": o.disabled
                        }]),
                        "data-href": d,
                        onClick: y
                      }, [
                        o.icon ? (t(), i("span", Z, [
                          l(r, {
                            icon: o.icon,
                            type: o.iconType || "fal"
                          }, null, 8, ["icon", "type"])
                        ])) : u("", !0),
                        e.collapsed ? u("", !0) : (t(), i("span", I, E(o.title), 1)),
                        o.pages && !e.collapsed ? (t(), C(r, {
                          key: 2,
                          icon: "chevron-down",
                          type: "fal",
                          class: "k-menu-chevron"
                        })) : u("", !0)
                      ], 10, Y)
                    ]),
                    _: 2
                  }, 1032, ["to"]))
                ]),
                _: 2
              }, 1032, ["hover", "disabled"])
            ]))
          ], 64)) : u("", !0)
        ], 64))), 128))
      ], 64)) : u("", !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 = (p) => typeof j(p) != "string", n = w({
      get() {
        return $().get("aside.collapsed") || !1;
      },
      set(p) {
        $().set("aside.collapsed", p);
      }
    }), v = w(() => $().get("isMobileView") || !1), k = w(() => $().get("menuType") || "default");
    return {
      collapsed: n,
      menuType: k,
      isMobile: v,
      isComponent: e,
      handlerColapsed: (p) => {
        !n.value && k.value === "block" && !v.value || !n.value && k.value === "simple" && !v.value ? n.value = !1 : n.value = p ?? !n.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, n, v, k, M, p) {
  const r = c("k-icon"), g = c("k-title"), a = c("k-logo"), _ = c("k-button"), m = c("k-menu"), o = c("k-aside-footer");
  return t(), 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" ? (t(), i("div", {
        key: 0,
        class: "flex items-center cursor-pointer",
        onClick: n[0] || (n[0] = (f) => e.handlerColapsed(!0))
      }, [
        l(r, {
          icon: "xmark",
          type: "far",
          class: "text-lg mx-2"
        }),
        l(g, { size: 5 }, {
          default: h(() => [
            b("MENU")
          ]),
          _: 1
        })
      ])) : e.collapsed ? (t(), C(a, {
        key: 2,
        dark: "",
        side: !1,
        class: "cursor-pointer max-w-[54px]",
        onClick: n[2] || (n[2] = (f) => e.handlerColapsed(!1))
      })) : (t(), C(a, {
        key: 1,
        dark: "",
        side: "",
        class: "cursor-pointer max-w-[14rem]",
        onClick: n[1] || (n[1] = (f) => e.handlerColapsed(!0))
      })),
      (e.isMobile || e.menuType === "default") && !e.collapsed ? (t(), C(_, {
        key: 3,
        icon: "chevrons-left",
        link: "",
        color: "primary",
        class: "-mr-2",
        onClick: n[3] || (n[3] = (f) => e.handlerColapsed(!0))
      })) : u("", !0)
    ], 2),
    s("div", ue, [
      l(m, { 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"]]), _e = N({
  name: "KUpdater",
  setup() {
    let e = O(!1), n = null;
    const v = () => {
      n && n(!0);
    };
    return K(() => {
      "serviceWorker" in navigator && (n = P({
        onNeedRefresh() {
          e.value = !0;
        },
        onRegistered(k) {
          k && setInterval(() => {
            k.update();
          }, 5e3);
        }
      }));
    }), { update: v, updateAvailable: e };
  }
});
function ge(e, n, v, k, M, p) {
  const r = c("k-button"), g = c("k-tooltip");
  return e.updateAvailable ? (t(), C(g, {
    key: 0,
    content: "🍾 Actualización disponible",
    placement: "left"
  }, {
    default: h(() => [
      l(r, {
        neon: "",
        color: "success",
        icon: "cloud-arrow-down",
        onClick: e.update
      }, null, 8, ["onClick"])
    ]),
    _: 1
  })) : u("", !0);
}
const me = /* @__PURE__ */ A(_e, [["render", ge]]), he = N({
  name: "KDebug",
  setup() {
    const e = $();
    return { debug: w(() => e.get("debug")) };
  }
}), ve = "_debug_54i91_1", ye = {
  debug: ve
}, 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 Ce(e, n, v, k, M, p) {
  return e.debug ? (t(), i("div", {
    key: 0,
    class: T(e.$style.debug)
  }, $e, 2)) : u("", !0);
}
const we = {
  $style: ye
}, Me = /* @__PURE__ */ A(he, [["render", Ce], ["__cssModules", we]]), ze = N({
  name: "KTopbar",
  components: {
    KUpdater: me,
    KDebug: Me
  },
  setup() {
    const e = B("$auth"), n = () => {
      e.logout();
    }, v = w(() => e.getLastName() || "Jhon"), k = w(() => {
      const o = e.getName() || "Jhon", f = e.getLastName() || "Doe";
      return `${o} ${f}`;
    }), M = w({
      get() {
        return $().get("aside.collapsed") || !1;
      },
      set(o) {
        $().set("aside.collapsed", o);
      }
    }), p = w(() => $().get("darkMode")), r = () => {
      const o = $();
      p.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"));
    }, g = w(() => $().get("fontSize") || "medium"), a = (o) => {
      $().set("fontSize", o);
      const d = document.documentElement, y = {
        small: ".8rem",
        medium: ".9rem",
        large: "1rem"
      };
      d.style.setProperty("--font-size-base", y[o]);
    }, _ = (o) => {
      if (o.target.closest("label"))
        return;
      const f = ["small", "medium", "large"], y = (f.indexOf(
        g.value
      ) + 1) % f.length;
      a(f[y]);
    }, m = w(() => $().get("menuType") || "default");
    return {
      //Variables
      firstname: v,
      fullname: k,
      collapsed: M,
      darkMode: p,
      defaultRoutes: J,
      fontSize: g,
      menuType: m,
      // Methods
      logout: n,
      toggleTheme: r,
      setFontSize: a,
      cycleFontSize: _
    };
  }
});
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" }, Be = { class: "flex gap-4 items-center" }, Ke = /* @__PURE__ */ s("br", null, null, -1), Le = { class: "size-list" }, De = ["checked"], je = ["checked"], Oe = ["checked"];
function Ve(e, n, v, k, M, p) {
  const r = c("k-icon"), g = c("k-title"), a = c("k-button"), _ = c("k-toolbar-left"), m = c("k-updater"), o = c("k-toolbar-right"), f = c("k-debug"), d = c("k-avatar"), y = c("k-dropdown-menu"), F = c("k-dropdown");
  return t(), i("header", null, [
    s("nav", Se, [
      s("div", Te, [
        s("div", Ee, [
          e.menuType === "simple" ? (t(), i("div", {
            key: 0,
            class: "flex items-center cursor-pointer",
            onClick: n[0] || (n[0] = (z) => e.collapsed = !1)
          }, [
            l(r, {
              icon: "bars",
              type: "far",
              class: "text-lg mx-2"
            }),
            l(g, { size: 5 }, {
              default: h(() => [
                b("MENU")
              ]),
              _: 1
            })
          ])) : (t(), C(a, {
            key: 1,
            icon: "chevrons-right",
            link: "",
            color: "primary",
            onClick: n[1] || (n[1] = (z) => e.collapsed = !1)
          }))
        ]),
        s("div", Ne, [
          l(_, { collapsed: e.collapsed }, null, 8, ["collapsed"])
        ]),
        Ae,
        s("div", Fe, [
          l(m),
          l(o, { collapsed: e.collapsed }, null, 8, ["collapsed"]),
          e.menuType !== "simple" ? (t(), C(f, { key: 0 })) : u("", !0),
          s("div", Re, [
            l(F, null, {
              header: h(() => [
                s("div", Be, [
                  l(d, {
                    name: e.fullname,
                    size: 40,
                    tooltip: !1
                  }, null, 8, ["name"]),
                  s("div", null, [
                    b(" Bienvenido "),
                    Ke,
                    s("strong", null, E(e.firstname), 1)
                  ])
                ])
              ]),
              content: h(() => [
                l(y, { onClick: e.toggleTheme }, {
                  default: h(() => [
                    l(r, {
                      icon: e.darkMode ? "sun" : "moon",
                      type: "fal",
                      class: "mr-2"
                    }, null, 8, ["icon"]),
                    b(" " + E(e.darkMode ? "Modo claro" : "Modo oscuro"), 1)
                  ]),
                  _: 1
                }, 8, ["onClick"]),
                l(y, {
                  class: "size-config",
                  onClick: e.cycleFontSize
                }, {
                  default: h(() => [
                    l(r, {
                      icon: "text-size",
                      type: "fal",
                      class: "mr-2"
                    }),
                    b(" Tamaño "),
                    s("ul", Le, [
                      s("li", null, [
                        s("label", null, [
                          s("input", {
                            type: "radio",
                            name: "size",
                            value: "small",
                            checked: e.fontSize === "small",
                            onChange: n[2] || (n[2] = (z) => e.setFontSize("small"))
                          }, null, 40, De),
                          b(" SM ")
                        ])
                      ]),
                      s("li", null, [
                        s("label", null, [
                          s("input", {
                            type: "radio",
                            name: "size",
                            value: "medium",
                            checked: e.fontSize === "medium",
                            onChange: n[3] || (n[3] = (z) => e.setFontSize("medium"))
                          }, null, 40, je),
                          b(" MD ")
                        ])
                      ]),
                      s("li", null, [
                        s("label", null, [
                          s("input", {
                            type: "radio",
                            name: "size",
                            value: "large",
                            checked: e.fontSize === "large",
                            onChange: n[4] || (n[4] = (z) => e.setFontSize("large"))
                          }, null, 40, Oe),
                          b(" LG ")
                        ])
                      ])
                    ])
                  ]),
                  _: 1
                }, 8, ["onClick"]),
                e.defaultRoutes.profile ? (t(), C(y, {
                  key: 0,
                  onClick: n[5] || (n[5] = (z) => e.$router.push(e.defaultRoutes.profile))
                }, {
                  default: h(() => [
                    l(r, {
                      icon: "address-card",
                      type: "fal",
                      class: "mr-2"
                    }),
                    b(" Mi Perfil ")
                  ]),
                  _: 1
                })) : u("", !0),
                e.defaultRoutes.configuration ? (t(), C(y, {
                  key: 1,
                  onClick: n[6] || (n[6] = (z) => e.$router.push(
                    e.defaultRoutes.configuration
                  ))
                }, {
                  default: h(() => [
                    l(r, {
                      icon: "gear",
                      type: "fal",
                      class: "mr-2"
                    }),
                    b(" Configuración ")
                  ]),
                  _: 1
                })) : u("", !0)
              ]),
              footer: h(() => [
                s("a", {
                  class: "text-danger cursor-pointer block",
                  onClick: n[7] || (n[7] = (z) => e.logout())
                }, [
                  l(r, {
                    icon: "right-from-bracket",
                    class: "mr-2"
                  }),
                  b(" Cerrar sesión ")
                ])
              ]),
              default: h(() => [
                s("div", null, [
                  l(d, {
                    name: e.fullname,
                    size: 42,
                    tooltip: !1,
                    square: "",
                    class: "cursor-pointer"
                  }, null, 8, ["name"])
                ])
              ]),
              _: 1
            })
          ])
        ])
      ])
    ])
  ]);
}
const Ue = /* @__PURE__ */ A(ze, [["render", Ve]]), We = N({
  name: "KMain",
  components: {
    KAside: ke,
    KTopbar: Ue
  },
  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, n, v, k, M, p) {
  const r = c("k-aside"), g = c("k-topbar"), a = c("router-view");
  return t(), i("div", Ge, [
    l(r),
    s("div", Je, [
      l(g),
      l(a)
    ])
  ]);
}
const He = /* @__PURE__ */ A(We, [["render", Pe]]);
export {
  He as default
};