master-page-vue 1.0.0

package/README.md

@@ -0,0 +1,59 @@
+# master-page-vue
+
+Master page layout with Header, Sidebar Menu and Footer for Vue 3, with OIDC authentication via `oidc-client-ts`.
+
+## Install
+
+```bash
+npm install master-page-vue oidc-client-ts
+```
+
+## Usage
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import MasterPagePlugin from 'master-page-vue';
+
+createApp(App)
+  .use(MasterPagePlugin, {
+    oidc: {
+      authority: 'https://identity.example.com',
+      clientId: 'mi-app',
+    },
+    appTitle: 'SISPRO - Mi Aplicación',
+  })
+  .mount('#app');
+```
+
+```vue
+<!-- App.vue -->
+<template>
+  <MasterPage>
+    <RouterView />
+  </MasterPage>
+</template>
+```
+
+## Config options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `oidc.authority` | `string` | Identity server URL |
+| `oidc.clientId` | `string` | OAuth client ID |
+| `oidc.clientSecret` | `string?` | OAuth client secret |
+| `oidc.redirectUri` | `string?` | Redirect URI after login |
+| `oidc.postLogoutRedirectUri` | `string?` | Redirect URI after logout |
+| `oidc.scope` | `string?` | OAuth scopes |
+| `appTitle` | `string?` | Title shown in header |
+| `enableFetchInterceptor` | `boolean?` | Auto-inject bearer token in fetch calls |
+| `registerUrl` | `string?` | Registration URL |
+
+## Composable
+
+```ts
+import { useAuth } from 'master-page-vue';
+
+const { isAuthenticated, userProfile, menuItems, login, logout } = useAuth();
+```

package/dist/components/AppFooter.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/AppHeader.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "menu-toggle": () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    "onMenu-toggle"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/AppMenu.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    isOpen: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/MasterPage.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/composables/useAuth.d.ts

@@ -0,0 +1,46 @@
+import type { MasterPageConfig } from '../models/types';
+export declare function useAuth(): {
+    isAuthenticated: Readonly<import("vue").Ref<boolean, boolean>>;
+    userProfile: Readonly<import("vue").Ref<{
+        readonly firstName: string;
+        readonly middleName: string;
+        readonly lastName: string;
+        readonly secondLastName: string;
+        readonly enterpriseName: string;
+        readonly displayName: string;
+        readonly email?: string | undefined;
+        readonly accessToken: string;
+        readonly rawClaims: {
+            readonly [x: string]: Readonly<unknown>;
+        };
+    } | null, {
+        readonly firstName: string;
+        readonly middleName: string;
+        readonly lastName: string;
+        readonly secondLastName: string;
+        readonly enterpriseName: string;
+        readonly displayName: string;
+        readonly email?: string | undefined;
+        readonly accessToken: string;
+        readonly rawClaims: {
+            readonly [x: string]: Readonly<unknown>;
+        };
+    } | null>>;
+    menuItems: Readonly<import("vue").Ref<readonly {
+        readonly nombre: string;
+        readonly url?: string | undefined;
+        readonly hijos?: readonly /*elided*/ any[] | undefined;
+    }[], readonly {
+        readonly nombre: string;
+        readonly url?: string | undefined;
+        readonly hijos?: readonly /*elided*/ any[] | undefined;
+    }[]>>;
+    isLoading: Readonly<import("vue").Ref<boolean, boolean>>;
+    configure: (cfg: MasterPageConfig) => void;
+    getConfig: () => MasterPageConfig;
+    login: () => void;
+    logout: () => void;
+    openAccountSettings: () => void;
+    getAccessToken: () => Promise<string | null>;
+    destroyFetchInterceptor: () => void;
+};

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import type { App } from 'vue';
+import type { MasterPageConfig } from './models/types';
+import { useAuth } from './composables/useAuth';
+import MasterPage from './components/MasterPage.vue';
+import AppHeader from './components/AppHeader.vue';
+import AppFooter from './components/AppFooter.vue';
+import AppMenu from './components/AppMenu.vue';
+export { MasterPage, AppHeader, AppFooter, AppMenu };
+export { useAuth };
+export type { MasterPageConfig, UserProfile, MenuItemConfig } from './models/types';
+export type { OidcConfig } from './models/types';
+declare const _default: {
+    install(app: App, config: MasterPageConfig): void;
+};
+export default _default;

package/dist/master-page-vue.mjs

@@ -0,0 +1,355 @@
+import { ref as A, readonly as I, defineComponent as x, openBlock as r, createElementBlock as i, createElementVNode as t, unref as p, createCommentVNode as j, toDisplayString as $, createTextVNode as K, normalizeClass as L, Fragment as P, createStaticVNode as W, renderList as O, onUnmounted as q, createVNode as F, renderSlot as J } from "vue";
+import { UserManager as Q } from "oidc-client-ts";
+const M = A(!1), T = A(null), E = A([]), V = A(!0);
+let k, b, y = null;
+function R() {
+  function g(e) {
+    k = e;
+    const o = {
+      authority: e.oidc.authority,
+      client_id: e.oidc.clientId,
+      client_secret: e.oidc.clientSecret,
+      redirect_uri: e.oidc.redirectUri ?? `${window.location.origin}?op=2`,
+      response_type: e.oidc.responseType ?? "code",
+      scope: e.oidc.scope ?? "openid profile email roles offline_access",
+      post_logout_redirect_uri: e.oidc.postLogoutRedirectUri ?? `${window.location.origin}?op=1`
+    };
+    b = new Q(o), a(), C();
+  }
+  function l() {
+    return k;
+  }
+  function n() {
+    b.signinRedirect({ prompt: "login" });
+  }
+  function f() {
+    const e = localStorage.getItem("access_token") ?? "", o = encodeURIComponent(
+      k.oidc.postLogoutRedirectUri ?? `${window.location.origin}?op=1`
+    );
+    window.location.href = `${k.oidc.authority}/connect/logout?id_token_hint=${e}&post_logout_redirect_uri=${o}`;
+  }
+  function u() {
+    window.location.href = `${k.oidc.authority}/Identity/Account/Manage?salir=1`;
+  }
+  async function h() {
+    const e = await b.getUser();
+    return (e == null ? void 0 : e.access_token) ?? null;
+  }
+  function a() {
+    const e = new URLSearchParams(window.location.search).get("op");
+    e === "2" && b.signinRedirectCallback().then(() => {
+      window.location.href = "/";
+    }).catch((o) => console.error("[MasterPage] signin callback error:", o)), e === "1" && b.signoutRedirectCallback().then(() => {
+      b.removeUser(), window.location.href = "/";
+    }).catch((o) => console.error("[MasterPage] signout callback error:", o));
+  }
+  async function C() {
+    try {
+      const e = await b.getUser();
+      e && !e.expired ? (m(e), k.enableFetchInterceptor !== !1 && s(), await v(e)) : (M.value = !1, T.value = null);
+    } catch (e) {
+      console.error("[MasterPage] session check error:", e), M.value = !1;
+    } finally {
+      V.value = !1;
+    }
+  }
+  function m(e) {
+    const o = e.profile;
+    T.value = {
+      firstName: o.UserFirstName ?? "",
+      middleName: o.UserMiddleName ?? "",
+      lastName: o.UserLastName ?? "",
+      secondLastName: o.UserSecondLastName ?? "",
+      enterpriseName: o.EnterpriseName ?? "",
+      displayName: [o.UserFirstName, o.UserMiddleName, o.UserLastName, o.UserSecondLastName].filter(Boolean).join(" ").trim(),
+      email: o.email ?? "",
+      accessToken: e.access_token,
+      rawClaims: o
+    }, localStorage.setItem("access_token", e.access_token), M.value = !0;
+  }
+  async function v(e) {
+    var o;
+    try {
+      const c = await fetch(`${k.oidc.authority}/connect/userinfo`, {
+        headers: { Authorization: `Bearer ${e.access_token}` }
+      });
+      if (!c.ok) return;
+      const w = await c.json();
+      (o = w == null ? void 0 : w.usrAuthorizations) != null && o.aplicaciones && (E.value = w.usrAuthorizations.aplicaciones);
+    } catch (c) {
+      console.error("[MasterPage] Failed to fetch authorizations:", c);
+    }
+  }
+  function s() {
+    if (y) return;
+    y = window.fetch.bind(window);
+    const e = k.oidc.authority;
+    window.fetch = async (o, c = {}) => {
+      if ((typeof o == "string" ? o : o.url).startsWith(e)) return y(o, c);
+      let _ = await b.getUser();
+      _ && !_.expired && (c.headers = { ...c.headers, Authorization: `Bearer ${_.access_token}` });
+      let d = await y(o, c);
+      if (d.status === 401 && _)
+        try {
+          const N = await b.signinSilent();
+          N && (m(N), c.headers = { ...c.headers, Authorization: `Bearer ${N.access_token}` }, d = await y(o, c));
+        } catch {
+          await b.signoutRedirect();
+        }
+      return d;
+    };
+  }
+  function U() {
+    y && (window.fetch = y, y = null);
+  }
+  return {
+    isAuthenticated: I(M),
+    userProfile: I(T),
+    menuItems: I(E),
+    isLoading: I(V),
+    configure: g,
+    getConfig: l,
+    login: n,
+    logout: f,
+    openAccountSettings: u,
+    getAccessToken: h,
+    destroyFetchInterceptor: U
+  };
+}
+const X = { class: "navbar-custom" }, Y = { class: "container-fluid" }, Z = {
+  class: "navbar-brand",
+  href: "#"
+}, ee = ["src"], oe = { class: "brand-text" }, te = { class: "navbar-right" }, ne = {
+  key: 0,
+  class: "nav-item"
+}, se = { class: "user-label" }, ae = /* @__PURE__ */ x({
+  __name: "AppHeader",
+  emits: ["menu-toggle"],
+  setup(g, { emit: l }) {
+    var w;
+    const n = l, { isAuthenticated: f, userProfile: u, login: h, logout: a, openAccountSettings: C, getConfig: m } = R(), v = A(!1), s = m(), U = (s == null ? void 0 : s.appTitle) ?? "SISPRO - Aplicativos Misionales", e = ((w = s == null ? void 0 : s.oidc) == null ? void 0 : w.authority) ?? "";
+    function o(_) {
+      _.stopPropagation(), v.value = !v.value;
+    }
+    function c() {
+      var d;
+      const _ = (d = m()) == null ? void 0 : d.registerUrl;
+      _ && (window.location.href = _);
+    }
+    return (_, d) => {
+      var N, z;
+      return r(), i("nav", X, [
+        t("div", Y, [
+          p(f) ? (r(), i("button", {
+            key: 0,
+            class: "menu-toggle",
+            onClick: d[0] || (d[0] = (S) => n("menu-toggle")),
+            "aria-label": "Toggle menu"
+          }, " ☰ ")) : j("", !0),
+          t("a", Z, [
+            t("img", {
+              src: `${p(e)}/img/logo.svg`,
+              alt: "Logo gov.co"
+            }, null, 8, ee),
+            t("span", oe, $(p(U)), 1)
+          ]),
+          t("div", te, [
+            p(f) ? (r(), i("div", ne, [
+              t("a", {
+                class: "dropdown-user",
+                role: "button",
+                onClick: o
+              }, [
+                t("div", se, [
+                  K($((N = p(u)) == null ? void 0 : N.displayName) + " ", 1),
+                  t("span", null, $((z = p(u)) == null ? void 0 : z.enterpriseName), 1)
+                ]),
+                d[4] || (d[4] = t("button", { class: "user-icon-btn" }, [
+                  t("svg", {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  }, [
+                    t("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+                    t("circle", {
+                      cx: "12",
+                      cy: "7",
+                      r: "4"
+                    })
+                  ])
+                ], -1))
+              ]),
+              t("ul", {
+                class: L(["dropdown-menu", { open: v.value }])
+              }, [
+                t("li", null, [
+                  t("a", {
+                    onClick: d[1] || (d[1] = //@ts-ignore
+                    (...S) => p(C) && p(C)(...S))
+                  }, "Configuración")
+                ]),
+                t("li", null, [
+                  t("a", {
+                    onClick: d[2] || (d[2] = //@ts-ignore
+                    (...S) => p(a) && p(a)(...S))
+                  }, "Cerrar sesión")
+                ])
+              ], 2)
+            ])) : (r(), i(P, { key: 1 }, [
+              t("button", {
+                class: "btn-login",
+                onClick: d[3] || (d[3] = //@ts-ignore
+                (...S) => p(h) && p(h)(...S))
+              }, "Ingresar"),
+              t("button", {
+                class: "btn-register",
+                onClick: c
+              }, "Registrarse")
+            ], 64))
+          ])
+        ])
+      ]);
+    };
+  }
+}), B = (g, l) => {
+  const n = g.__vccOpts || g;
+  for (const [f, u] of l)
+    n[f] = u;
+  return n;
+}, D = /* @__PURE__ */ B(ae, [["__scopeId", "data-v-69067b97"]]), re = { class: "shell-footer" }, ie = { class: "container" }, ce = { class: "row" }, le = { class: "col logos-col" }, ue = ["src"], de = ["src"], fe = /* @__PURE__ */ x({
+  __name: "AppFooter",
+  setup(g) {
+    var f, u;
+    const { getConfig: l } = R(), n = ((u = (f = l()) == null ? void 0 : f.oidc) == null ? void 0 : u.authority) ?? "";
+    return (h, a) => (r(), i("footer", re, [
+      t("div", ie, [
+        t("div", ce, [
+          t("div", le, [
+            t("img", {
+              src: `${p(n)}/img/logo.svg`,
+              alt: "GOV.CO",
+              class: "footer-logo"
+            }, null, 8, ue),
+            t("img", {
+              src: `${p(n)}/img/colombia.png`,
+              alt: "Colombia Potencia de la Vida",
+              class: "footer-logo"
+            }, null, 8, de)
+          ]),
+          a[0] || (a[0] = W('<div class="col border-start" data-v-93fe5bbf><strong data-v-93fe5bbf>SISPRO</strong><p data-v-93fe5bbf> Dirección:<br data-v-93fe5bbf> Carrera 13 # 32–76 (piso 1)<br data-v-93fe5bbf> Cundinamarca, Bogotá D.C.<br data-v-93fe5bbf> Código Postal: 110311 </p><p data-v-93fe5bbf><a href="#" class="footer-link" data-v-93fe5bbf>Horario de atención:</a><br data-v-93fe5bbf> Lunes a viernes 8:00 a.m. a 4:00 p.m. </p></div><div class="col border-start" data-v-93fe5bbf><strong data-v-93fe5bbf>Contacto</strong><p data-v-93fe5bbf> Teléfono conmutador:<br data-v-93fe5bbf> En Bogotá: 601 330 5043 Opción 2<br data-v-93fe5bbf> Resto del país: 018000960020 Opción 2 </p><p data-v-93fe5bbf> Correo de notificaciones judiciales:<br data-v-93fe5bbf><a href="mailto:notificacionesjudiciales@minsalud.gov.co" class="footer-link" data-v-93fe5bbf> notificacionesjudiciales@minsalud.gov.co </a></p><p data-v-93fe5bbf><a href="https://www.minsalud.gov.co/Documents/Ministerio/Terminos%20y%20Condiciones%20de%20uso%20del%20portal%20web_Octubre%202012x.pdf" target="_blank" class="footer-link" data-v-93fe5bbf> Términos y condiciones </a></p></div>', 2))
+        ])
+      ])
+    ]));
+  }
+}), H = /* @__PURE__ */ B(fe, [["__scopeId", "data-v-93fe5bbf"]]), pe = { class: "menu-list" }, ge = ["onClick"], he = ["href"], _e = {
+  key: 2,
+  class: "submenu"
+}, be = ["onClick"], me = ["href"], ve = {
+  key: 2,
+  class: "submenu"
+}, we = ["href"], ke = /* @__PURE__ */ x({
+  __name: "AppMenu",
+  props: {
+    isOpen: { type: Boolean }
+  },
+  setup(g) {
+    const { menuItems: l } = R(), n = A(/* @__PURE__ */ new Set());
+    function f(u) {
+      n.value.has(u) ? n.value.delete(u) : n.value.add(u), n.value = new Set(n.value);
+    }
+    return (u, h) => (r(), i("aside", {
+      class: L(["sidebar-menu", { show: g.isOpen }])
+    }, [
+      t("ul", pe, [
+        (r(!0), i(P, null, O(p(l), (a) => {
+          var C, m, v;
+          return r(), i("li", {
+            key: a.nombre,
+            class: L({ "has-submenu": (C = a.hijos) == null ? void 0 : C.length, open: n.value.has(a) })
+          }, [
+            (m = a.hijos) != null && m.length ? (r(), i("span", {
+              key: 0,
+              class: "has-children",
+              onClick: (s) => f(a)
+            }, $(a.nombre), 9, ge)) : (r(), i("a", {
+              key: 1,
+              href: a.url || "#"
+            }, $(a.nombre), 9, he)),
+            (v = a.hijos) != null && v.length && n.value.has(a) ? (r(), i("ul", _e, [
+              (r(!0), i(P, null, O(a.hijos, (s) => {
+                var U, e, o;
+                return r(), i("li", {
+                  key: s.nombre,
+                  class: L({ "has-submenu": (U = s.hijos) == null ? void 0 : U.length, open: n.value.has(s) })
+                }, [
+                  (e = s.hijos) != null && e.length ? (r(), i("span", {
+                    key: 0,
+                    class: "has-children",
+                    onClick: (c) => f(s)
+                  }, $(s.nombre), 9, be)) : (r(), i("a", {
+                    key: 1,
+                    href: s.url || "#"
+                  }, $(s.nombre), 9, me)),
+                  (o = s.hijos) != null && o.length && n.value.has(s) ? (r(), i("ul", ve, [
+                    (r(!0), i(P, null, O(s.hijos, (c) => (r(), i("li", {
+                      key: c.nombre
+                    }, [
+                      t("a", {
+                        href: c.url || "#"
+                      }, $(c.nombre), 9, we)
+                    ]))), 128))
+                  ])) : j("", !0)
+                ], 2);
+              }), 128))
+            ])) : j("", !0)
+          ], 2);
+        }), 128))
+      ])
+    ], 2));
+  }
+}), G = /* @__PURE__ */ B(ke, [["__scopeId", "data-v-1619503d"]]), ye = { class: "master-page-layout" }, $e = { class: "shell-main" }, Ce = /* @__PURE__ */ x({
+  __name: "MasterPage",
+  setup(g) {
+    const l = A(!1);
+    function n() {
+      l.value = !l.value;
+    }
+    function f() {
+      l.value = !1;
+    }
+    function u(h) {
+      h.key === "Escape" && f();
+    }
+    return window.addEventListener("keydown", u), q(() => window.removeEventListener("keydown", u)), (h, a) => (r(), i("div", ye, [
+      F(D, { onMenuToggle: n }),
+      F(G, { "is-open": l.value }, null, 8, ["is-open"]),
+      l.value ? (r(), i("div", {
+        key: 0,
+        class: "sidebar-backdrop",
+        onClick: f
+      })) : j("", !0),
+      t("main", $e, [
+        J(h.$slots, "default", {}, void 0, !0)
+      ]),
+      F(H)
+    ]));
+  }
+}), Ae = /* @__PURE__ */ B(Ce, [["__scopeId", "data-v-ad151b79"]]), Se = {
+  install(g, l) {
+    const { configure: n } = R();
+    n(l), g.component("MasterPage", Ae), g.component("AppHeader", D), g.component("AppFooter", H), g.component("AppMenu", G);
+  }
+};
+export {
+  H as AppFooter,
+  D as AppHeader,
+  G as AppMenu,
+  Ae as MasterPage,
+  Se as default,
+  R as useAuth
+};

package/dist/master-page-vue.umd.js

@@ -0,0 +1 @@
+(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("oidc-client-ts")):typeof define=="function"&&define.amd?define(["exports","vue","oidc-client-ts"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.MasterPageVue={},m.Vue,m.OidcClientTs))})(this,function(m,e,F){"use strict";const V=e.ref(!1),S=e.ref(null),I=e.ref([]),P=e.ref(!0);let _,p,u=null;function C(){function f(o){_=o;const t={authority:o.oidc.authority,client_id:o.oidc.clientId,client_secret:o.oidc.clientSecret,redirect_uri:o.oidc.redirectUri??`${window.location.origin}?op=2`,response_type:o.oidc.responseType??"code",scope:o.oidc.scope??"openid profile email roles offline_access",post_logout_redirect_uri:o.oidc.postLogoutRedirectUri??`${window.location.origin}?op=1`};p=new F.UserManager(t),s(),y()}function c(){return _}function n(){p.signinRedirect({prompt:"login"})}function d(){const o=localStorage.getItem("access_token")??"",t=encodeURIComponent(_.oidc.postLogoutRedirectUri??`${window.location.origin}?op=1`);window.location.href=`${_.oidc.authority}/connect/logout?id_token_hint=${o}&post_logout_redirect_uri=${t}`}function i(){window.location.href=`${_.oidc.authority}/Identity/Account/Manage?salir=1`}async function g(){const o=await p.getUser();return(o==null?void 0:o.access_token)??null}function s(){const o=new URLSearchParams(window.location.search).get("op");o==="2"&&p.signinRedirectCallback().then(()=>{window.location.href="/"}).catch(t=>console.error("[MasterPage] signin callback error:",t)),o==="1"&&p.signoutRedirectCallback().then(()=>{p.removeUser(),window.location.href="/"}).catch(t=>console.error("[MasterPage] signout callback error:",t))}async function y(){try{const o=await p.getUser();o&&!o.expired?(b(o),_.enableFetchInterceptor!==!1&&a(),await k(o)):(V.value=!1,S.value=null)}catch(o){console.error("[MasterPage] session check error:",o),V.value=!1}finally{P.value=!1}}function b(o){const t=o.profile;S.value={firstName:t.UserFirstName??"",middleName:t.UserMiddleName??"",lastName:t.UserLastName??"",secondLastName:t.UserSecondLastName??"",enterpriseName:t.EnterpriseName??"",displayName:[t.UserFirstName,t.UserMiddleName,t.UserLastName,t.UserSecondLastName].filter(Boolean).join(" ").trim(),email:t.email??"",accessToken:o.access_token,rawClaims:t},localStorage.setItem("access_token",o.access_token),V.value=!0}async function k(o){var t;try{const r=await fetch(`${_.oidc.authority}/connect/userinfo`,{headers:{Authorization:`Bearer ${o.access_token}`}});if(!r.ok)return;const w=await r.json();(t=w==null?void 0:w.usrAuthorizations)!=null&&t.aplicaciones&&(I.value=w.usrAuthorizations.aplicaciones)}catch(r){console.error("[MasterPage] Failed to fetch authorizations:",r)}}function a(){if(u)return;u=window.fetch.bind(window);const o=_.oidc.authority;window.fetch=async(t,r={})=>{if((typeof t=="string"?t:t.url).startsWith(o))return u(t,r);let h=await p.getUser();h&&!h.expired&&(r.headers={...r.headers,Authorization:`Bearer ${h.access_token}`});let l=await u(t,r);if(l.status===401&&h)try{const E=await p.signinSilent();E&&(b(E),r.headers={...r.headers,Authorization:`Bearer ${E.access_token}`},l=await u(t,r))}catch{await p.signoutRedirect()}return l}}function N(){u&&(window.fetch=u,u=null)}return{isAuthenticated:e.readonly(V),userProfile:e.readonly(S),menuItems:e.readonly(I),isLoading:e.readonly(P),configure:f,getConfig:c,login:n,logout:d,openAccountSettings:i,getAccessToken:g,destroyFetchInterceptor:N}}const T={class:"navbar-custom"},O={class:"container-fluid"},R={class:"navbar-brand",href:"#"},D=["src"],z={class:"brand-text"},x={class:"navbar-right"},H={key:0,class:"nav-item"},q={class:"user-label"},G=e.defineComponent({__name:"AppHeader",emits:["menu-toggle"],setup(f,{emit:c}){var w;const n=c,{isAuthenticated:d,userProfile:i,login:g,logout:s,openAccountSettings:y,getConfig:b}=C(),k=e.ref(!1),a=b(),N=(a==null?void 0:a.appTitle)??"SISPRO - Aplicativos Misionales",o=((w=a==null?void 0:a.oidc)==null?void 0:w.authority)??"";function t(h){h.stopPropagation(),k.value=!k.value}function r(){var l;const h=(l=b())==null?void 0:l.registerUrl;h&&(window.location.href=h)}return(h,l)=>{var E,j;return e.openBlock(),e.createElementBlock("nav",T,[e.createElementVNode("div",O,[e.unref(d)?(e.openBlock(),e.createElementBlock("button",{key:0,class:"menu-toggle",onClick:l[0]||(l[0]=B=>n("menu-toggle")),"aria-label":"Toggle menu"}," ☰ ")):e.createCommentVNode("",!0),e.createElementVNode("a",R,[e.createElementVNode("img",{src:`${e.unref(o)}/img/logo.svg`,alt:"Logo gov.co"},null,8,D),e.createElementVNode("span",z,e.toDisplayString(e.unref(N)),1)]),e.createElementVNode("div",x,[e.unref(d)?(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("a",{class:"dropdown-user",role:"button",onClick:t},[e.createElementVNode("div",q,[e.createTextVNode(e.toDisplayString((E=e.unref(i))==null?void 0:E.displayName)+" ",1),e.createElementVNode("span",null,e.toDisplayString((j=e.unref(i))==null?void 0:j.enterpriseName),1)]),l[4]||(l[4]=e.createElementVNode("button",{class:"user-icon-btn"},[e.createElementVNode("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("path",{d:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"}),e.createElementVNode("circle",{cx:"12",cy:"7",r:"4"})])],-1))]),e.createElementVNode("ul",{class:e.normalizeClass(["dropdown-menu",{open:k.value}])},[e.createElementVNode("li",null,[e.createElementVNode("a",{onClick:l[1]||(l[1]=(...B)=>e.unref(y)&&e.unref(y)(...B))},"Configuración")]),e.createElementVNode("li",null,[e.createElementVNode("a",{onClick:l[2]||(l[2]=(...B)=>e.unref(s)&&e.unref(s)(...B))},"Cerrar sesión")])],2)])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("button",{class:"btn-login",onClick:l[3]||(l[3]=(...B)=>e.unref(g)&&e.unref(g)(...B))},"Ingresar"),e.createElementVNode("button",{class:"btn-register",onClick:r},"Registrarse")],64))])])])}}}),$=(f,c)=>{const n=f.__vccOpts||f;for(const[d,i]of c)n[d]=i;return n},A=$(G,[["__scopeId","data-v-69067b97"]]),K={class:"shell-footer"},W={class:"container"},J={class:"row"},Q={class:"col logos-col"},X=["src"],Y=["src"],M=$(e.defineComponent({__name:"AppFooter",setup(f){var d,i;const{getConfig:c}=C(),n=((i=(d=c())==null?void 0:d.oidc)==null?void 0:i.authority)??"";return(g,s)=>(e.openBlock(),e.createElementBlock("footer",K,[e.createElementVNode("div",W,[e.createElementVNode("div",J,[e.createElementVNode("div",Q,[e.createElementVNode("img",{src:`${e.unref(n)}/img/logo.svg`,alt:"GOV.CO",class:"footer-logo"},null,8,X),e.createElementVNode("img",{src:`${e.unref(n)}/img/colombia.png`,alt:"Colombia Potencia de la Vida",class:"footer-logo"},null,8,Y)]),s[0]||(s[0]=e.createStaticVNode('<div class="col border-start" data-v-93fe5bbf><strong data-v-93fe5bbf>SISPRO</strong><p data-v-93fe5bbf> Dirección:<br data-v-93fe5bbf> Carrera 13 # 32–76 (piso 1)<br data-v-93fe5bbf> Cundinamarca, Bogotá D.C.<br data-v-93fe5bbf> Código Postal: 110311 </p><p data-v-93fe5bbf><a href="#" class="footer-link" data-v-93fe5bbf>Horario de atención:</a><br data-v-93fe5bbf> Lunes a viernes 8:00 a.m. a 4:00 p.m. </p></div><div class="col border-start" data-v-93fe5bbf><strong data-v-93fe5bbf>Contacto</strong><p data-v-93fe5bbf> Teléfono conmutador:<br data-v-93fe5bbf> En Bogotá: 601 330 5043 Opción 2<br data-v-93fe5bbf> Resto del país: 018000960020 Opción 2 </p><p data-v-93fe5bbf> Correo de notificaciones judiciales:<br data-v-93fe5bbf><a href="mailto:notificacionesjudiciales@minsalud.gov.co" class="footer-link" data-v-93fe5bbf> notificacionesjudiciales@minsalud.gov.co </a></p><p data-v-93fe5bbf><a href="https://www.minsalud.gov.co/Documents/Ministerio/Terminos%20y%20Condiciones%20de%20uso%20del%20portal%20web_Octubre%202012x.pdf" target="_blank" class="footer-link" data-v-93fe5bbf> Términos y condiciones </a></p></div>',2))])])]))}}),[["__scopeId","data-v-93fe5bbf"]]),Z={class:"menu-list"},v=["onClick"],ee=["href"],oe={key:2,class:"submenu"},te=["onClick"],ne=["href"],ae={key:2,class:"submenu"},se=["href"],U=$(e.defineComponent({__name:"AppMenu",props:{isOpen:{type:Boolean}},setup(f){const{menuItems:c}=C(),n=e.ref(new Set);function d(i){n.value.has(i)?n.value.delete(i):n.value.add(i),n.value=new Set(n.value)}return(i,g)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(["sidebar-menu",{show:f.isOpen}])},[e.createElementVNode("ul",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c),s=>{var y,b,k;return e.openBlock(),e.createElementBlock("li",{key:s.nombre,class:e.normalizeClass({"has-submenu":(y=s.hijos)==null?void 0:y.length,open:n.value.has(s)})},[(b=s.hijos)!=null&&b.length?(e.openBlock(),e.createElementBlock("span",{key:0,class:"has-children",onClick:a=>d(s)},e.toDisplayString(s.nombre),9,v)):(e.openBlock(),e.createElementBlock("a",{key:1,href:s.url||"#"},e.toDisplayString(s.nombre),9,ee)),(k=s.hijos)!=null&&k.length&&n.value.has(s)?(e.openBlock(),e.createElementBlock("ul",oe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.hijos,a=>{var N,o,t;return e.openBlock(),e.createElementBlock("li",{key:a.nombre,class:e.normalizeClass({"has-submenu":(N=a.hijos)==null?void 0:N.length,open:n.value.has(a)})},[(o=a.hijos)!=null&&o.length?(e.openBlock(),e.createElementBlock("span",{key:0,class:"has-children",onClick:r=>d(a)},e.toDisplayString(a.nombre),9,te)):(e.openBlock(),e.createElementBlock("a",{key:1,href:a.url||"#"},e.toDisplayString(a.nombre),9,ne)),(t=a.hijos)!=null&&t.length&&n.value.has(a)?(e.openBlock(),e.createElementBlock("ul",ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.hijos,r=>(e.openBlock(),e.createElementBlock("li",{key:r.nombre},[e.createElementVNode("a",{href:r.url||"#"},e.toDisplayString(r.nombre),9,se)]))),128))])):e.createCommentVNode("",!0)],2)}),128))])):e.createCommentVNode("",!0)],2)}),128))])],2))}}),[["__scopeId","data-v-1619503d"]]),re={class:"master-page-layout"},ce={class:"shell-main"},L=$(e.defineComponent({__name:"MasterPage",setup(f){const c=e.ref(!1);function n(){c.value=!c.value}function d(){c.value=!1}function i(g){g.key==="Escape"&&d()}return window.addEventListener("keydown",i),e.onUnmounted(()=>window.removeEventListener("keydown",i)),(g,s)=>(e.openBlock(),e.createElementBlock("div",re,[e.createVNode(A,{onMenuToggle:n}),e.createVNode(U,{"is-open":c.value},null,8,["is-open"]),c.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"sidebar-backdrop",onClick:d})):e.createCommentVNode("",!0),e.createElementVNode("main",ce,[e.renderSlot(g.$slots,"default",{},void 0,!0)]),e.createVNode(M)]))}}),[["__scopeId","data-v-ad151b79"]]),ie={install(f,c){const{configure:n}=C();n(c),f.component("MasterPage",L),f.component("AppHeader",A),f.component("AppFooter",M),f.component("AppMenu",U)}};m.AppFooter=M,m.AppHeader=A,m.AppMenu=U,m.MasterPage=L,m.default=ie,m.useAuth=C,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/models/types.d.ts

@@ -0,0 +1,32 @@
+export interface OidcConfig {
+    authority: string;
+    clientId: string;
+    clientSecret?: string;
+    redirectUri?: string;
+    postLogoutRedirectUri?: string;
+    scope?: string;
+    responseType?: string;
+}
+export interface MasterPageConfig {
+    oidc: OidcConfig;
+    appTitle?: string;
+    assetsBasePath?: string;
+    enableFetchInterceptor?: boolean;
+    registerUrl?: string;
+}
+export interface UserProfile {
+    firstName: string;
+    middleName: string;
+    lastName: string;
+    secondLastName: string;
+    enterpriseName: string;
+    displayName: string;
+    email?: string;
+    accessToken: string;
+    rawClaims: Record<string, unknown>;
+}
+export interface MenuItemConfig {
+    readonly nombre: string;
+    readonly url?: string;
+    readonly hijos?: readonly MenuItemConfig[];
+}

package/dist/style.css

@@ -0,0 +1 @@
+.navbar-custom[data-v-69067b97]{background-color:#36c;box-shadow:0 4px 10px #0003;position:fixed;width:100%;z-index:1001;height:60px}.container-fluid[data-v-69067b97]{display:flex;align-items:center;width:100%;padding:0 15px}.navbar-brand[data-v-69067b97]{color:#fff;display:flex;align-items:center;gap:10px;text-decoration:none}.navbar-brand img[data-v-69067b97]{height:36px;margin-top:1px}.brand-text[data-v-69067b97]{padding-top:5px}.navbar-right[data-v-69067b97]{display:flex;align-items:center;margin-left:auto}.nav-item[data-v-69067b97]{position:relative}.dropdown-user[data-v-69067b97]{display:flex;align-items:center;gap:.5rem;color:#fff;cursor:pointer;text-decoration:none}.user-label[data-v-69067b97]{text-align:right;font-weight:500;line-height:1.2;color:#fff}.user-label span[data-v-69067b97]{display:block;font-size:.875rem;color:#e0e0e0}.user-icon-btn[data-v-69067b97]{background:transparent;border:none;color:#fff;cursor:pointer;padding:0}.dropdown-menu[data-v-69067b97]{display:none;position:absolute;right:0;top:50px;min-width:200px;background:#fff;border:1px solid #ddd;box-shadow:0 2px 6px #0000001a;border-radius:10px;list-style:none;margin:0;padding:0;z-index:1002}.dropdown-menu.open[data-v-69067b97]{display:block}.dropdown-menu li a[data-v-69067b97]{display:block;padding:10px 15px;color:#333;cursor:pointer;text-decoration:none}.dropdown-menu li a[data-v-69067b97]:hover{background:#f5f5f5}.menu-toggle[data-v-69067b97]{font-size:30px;border:none;background:transparent;color:#fff;cursor:pointer;margin-right:15px;padding:0;line-height:1}.btn-login[data-v-69067b97],.btn-register[data-v-69067b97]{margin-left:10px;border-radius:20px;font-weight:500;border:1px solid white;padding:6px 16px;cursor:pointer}.btn-login[data-v-69067b97]{color:#fff;background:transparent}.btn-register[data-v-69067b97]{color:#36c;background:#fff}@media (max-width: 860px){.navbar-brand[data-v-69067b97]{display:none}}.shell-footer[data-v-93fe5bbf]{background-color:#36c;color:#fff;padding:1.5rem 0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:1em;width:100%}.container[data-v-93fe5bbf]{max-width:1200px;margin:0 auto;padding:0 15px}.row[data-v-93fe5bbf]{display:flex;flex-wrap:wrap;align-items:flex-start}.col[data-v-93fe5bbf]{flex:1;padding:0 15px}.logos-col[data-v-93fe5bbf]{display:flex;align-items:center;justify-content:center;gap:16px}.footer-logo[data-v-93fe5bbf]{max-height:50px}.border-start[data-v-93fe5bbf]{border-left:1px solid rgba(255,255,255,.3)}.footer-link[data-v-93fe5bbf]{color:#fff;text-decoration:underline}strong[data-v-93fe5bbf]{display:block;margin-bottom:.5rem}p[data-v-93fe5bbf]{margin:.25rem 0;line-height:1.5}@media (max-width: 768px){.col[data-v-93fe5bbf]{flex:0 0 100%;margin-bottom:1rem}.border-start[data-v-93fe5bbf]{border-left:none}}.sidebar-menu[data-v-1619503d]{position:fixed;top:0;left:0;height:100vh;width:300px;background-color:#36c;padding-top:60px;transform:translate(-100%);transition:transform .3s ease;z-index:1000;overflow-y:auto}.sidebar-menu.show[data-v-1619503d]{transform:translate(0)}.menu-list[data-v-1619503d],.submenu[data-v-1619503d]{list-style:none;padding:0;margin:0}.submenu[data-v-1619503d]{padding-left:10px}li a[data-v-1619503d],li span[data-v-1619503d]{display:block;padding:10px;color:#fff;text-decoration:none;font-weight:500;cursor:pointer}li a[data-v-1619503d]:hover,li span[data-v-1619503d]:hover{background-color:#2952a3}.has-submenu>span.has-children[data-v-1619503d]:after{content:" ▼";font-size:.8em;float:right}.has-submenu.open>span.has-children[data-v-1619503d]:after{content:" ▲"}.master-page-layout[data-v-ad151b79]{display:flex;flex-direction:column;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.shell-main[data-v-ad151b79]{flex:1;padding-top:65px;min-height:calc(100vh - 260px)}.sidebar-backdrop[data-v-ad151b79]{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;z-index:999;cursor:pointer;transition:opacity .3s ease}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "master-page-vue",
+  "version": "1.0.0",
+  "description": "Master page layout with OIDC auth for Vue 3",
+  "main": "dist/master-page-vue.umd.cjs",
+  "module": "dist/master-page-vue.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/master-page-vue.js",
+      "require": "./dist/master-page-vue.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "dev": "vite"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "oidc-client-ts": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vue": "^3.4.0",
+    "vue-tsc": "^2.0.0"
+  }
+}