@base-framework/ui 0.0.5 → 0.0.6

package/dist/index.es.js

@@ -5,9 +5,9 @@ import { V as w, a as U } from "./veil-B9GQfH0d.js";
 import { Icons as R } from "./icons.es.js";
 import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ca, p as Ta, q as ca, S as Da, n as Ia, o as ba, T as Sa, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-D1Y_SgzE.js";
 import { A as Na, b as va, C as fa, D as xa, a as ha, F as ya, M as Wa, P as La, c as Aa, g as Ha, p as wa } from "./calendar-DR_svCOR.js";
-import { B as Oa, m as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, p as Xa, n as Ya, o as Za, T as $a, k as as, U as ss, W as es, f as os, h as ts, i as rs, c as ns, d as is, b as ls, e as ps, a as us, g as ms } from "./tab-C_dZb2qH.js";
-import { B as gs, I as Cs, M as Ts, d as cs, e as Ds, g as Is, N as bs, b as Ss, a as Bs, f as Ps, P as Fs, c as Ms, S as ks, T as Ns } from "./mobile-nav-wrapper-7Qul1-mt.js";
-import { B as fs, a as xs, C as hs, F as ys, b as Ws, c as Ls, M as As, P as Hs, S as ws } from "./sidebar-menu-page-M8hr9onX.js";
+import { B as Oa, m as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, p as Xa, n as Ya, o as Za, T as $a, k as as, U as ss, W as es, f as os, h as ts, i as rs, c as ns, d as is, b as ls, e as ps, a as us, g as ms } from "./tab-DE7bmr2y.js";
+import { B as gs, I as Cs, M as Ts, d as cs, e as Ds, g as Is, N as bs, b as Ss, a as Bs, f as Ps, P as Fs, c as Ms, S as ks, T as Ns } from "./mobile-nav-wrapper-BS9uUekR.js";
+import { B as fs, a as xs, C as hs, F as ys, b as Ws, c as Ls, M as As, P as Hs, S as ws } from "./sidebar-menu-page-DN5qYk-Y.js";
 import { A as Os, F as Rs, M as Es, a as Gs, T as Vs } from "./aside-template-D0KANPjh.js";
 import { B as qs } from "./bside-template-CDbINL4X.js";
 export {

package/dist/mobile-nav-wrapper-BS9uUekR.js

@@ -0,0 +1,505 @@
+import { I as b, Label as w, Span as S, Ul as o, H4 as N, Nav as u, Div as l, Header as B, H1 as L, H3 as p, OnState as C } from "@base-framework/atoms";
+import { Component as n, Atom as i, NavLink as y, router as d } from "@base-framework/base";
+import { I as h, B as f } from "./icon-B9QUT2NY.js";
+import { Icons as r } from "./icons.es.js";
+class I extends n {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.class = "", this.checkCallBack = null;
+  }
+  /**
+   * This will render the component.
+   *
+   * @override
+   * @returns {object}
+   */
+  render() {
+    const e = this.state;
+    return {
+      class: this.class || "",
+      onState: [
+        ["selected", {
+          selected: !0
+        }],
+        ["active", {
+          active: !0
+        }]
+      ],
+      click: () => {
+        if (e.toggle("active"), !this.checkCallBack)
+          return;
+        const t = e.active ? this : null;
+        this.checkCallBack(t);
+      },
+      children: this.children
+    };
+  }
+  /**
+   * This will set up the states.
+   *
+   * @override
+   * @protected
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      selected: !1,
+      active: !1
+    };
+  }
+  /**
+   * This will update the states.
+   *
+   * @param {object} selected
+   * @returns {void}
+   */
+  update(e) {
+    this.state.set({
+      selected: e,
+      active: e
+    });
+  }
+}
+const P = i(({ options: s, click: e }, t) => ({
+  tag: "li",
+  ...{
+    class: `relative flex flex-row w-auto text-left p-0 overflow-hidden transition-all cursor-pointer min-w-[48px] rounded-md option${s ? " sub" : ""}`,
+    click: e
+  },
+  children: t
+})), $ = (s, e = null, t = !1) => [
+  e && b({
+    class: "icon w-12 rounded-md flex items-center justify-center",
+    onState: ["selected", {
+      selected: !0
+    }],
+    html: e
+  }),
+  w({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, s),
+  t && S(
+    {
+      class: "flex justify-center items-center px-1 transition-all text-muted-foreground mr-2",
+      onState: [
+        ["selected", {
+          rotate: !0
+        }],
+        ["active", {
+          rotate: !0
+        }]
+      ]
+    },
+    [
+      h({ size: "xs" }, r.chevron.single.down)
+    ]
+  )
+];
+class x extends n {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.label = "", this.icon = null, this.href = null, this.exact = !1, this.options = [], this.content = null, this.callBack = null, this.checkCallBack = null, this.link = null;
+  }
+  /**
+   * This will render the component.
+   *
+   * @override
+   * @returns {object}
+   */
+  render() {
+    const e = !this.options && this.callBack;
+    return P(
+      { options: this.options, click: e },
+      [
+        this.addLink()
+      ]
+    );
+  }
+  /**
+   * This will add the link.
+   *
+   * @returns {object}
+   * @protected
+   */
+  addLink() {
+    const e = this.options && this.options.length > 0, t = this.content || $(this.label, this.icon, e);
+    return this.href ? new y(
+      {
+        class: "flex flex-auto flex-row",
+        cache: "link",
+        href: this.href,
+        activeClass: "selected",
+        exact: this.exact || !1
+      },
+      t
+    ) : new I({
+      class: "flex flex-auto flex-row",
+      cache: "link",
+      checkCallBack: this.checkCallBack
+    }, t);
+  }
+  /**
+   * This will check if the link is selected.
+   *
+   * @returns {boolean}
+   */
+  isSelected() {
+    return this.link.state.get("selected");
+  }
+  update(e) {
+    this.link.update(e);
+  }
+}
+const H = i(({ map: s }, e) => o({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: s }, [
+  N({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, e)
+]));
+class M extends n {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.mobileBorder = !1;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.mapOptions(this.options), t = this.class || "", a = this.mobileBorder ? "border md:border-0 rounded-md" : "";
+    return u({ class: `navigation flex flex-auto flex-col ${t}` }, [
+      o({
+        class: `relative group flex flex-col gap-2 py-2 px-2 list-none m-0 ${a}`,
+        map: e
+      }),
+      ...this.addSubs()
+    ]);
+  }
+  /**
+   * This will get the options.
+   *
+   * @param {array} options
+   * @returns {array}
+   */
+  mapOptions(e = []) {
+    return [e.map((a) => a.group ? this.addGroup(a) : this.addLink(a)), (a) => a];
+  }
+  /**
+   * This will get the subs.
+   *
+   * @returns {array}
+   */
+  addSubs() {
+    return [];
+  }
+  /**
+   * This will add a group.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addGroup(e) {
+    const t = this.mapOptions(e.options);
+    return H({ map: t }, e.group);
+  }
+  /**
+   * This will add a link.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addLink(e) {
+    return new x(e);
+  }
+}
+class c extends M {
+  onCreated() {
+    this.links = [];
+  }
+  /**
+   * This will set up the sub nav.
+   *
+   * @param {object} link
+   * @returns {object}
+   */
+  setupSubNav(e) {
+    return new E(
+      {
+        parentLink: e,
+        options: e.options
+      }
+    );
+  }
+  /**
+   * This will add a sub navigation.
+   *
+   * @param {object} link
+   * @returns {object}
+   */
+  addSubNav(e) {
+    const t = this.setupSubNav(e);
+    return e.sub = t, t;
+  }
+  /**
+   * This will add a link.
+   *
+   * @param {object} option
+   * @returns {object}
+   */
+  addLink(e) {
+    const t = new x(e);
+    if (this.links.push(t), !t.options)
+      return t;
+    const a = this.addSubNav(t);
+    return {
+      class: "child-group",
+      link: t,
+      sub: a
+    };
+  }
+}
+const O = (s, e) => new RegExp(`${s}($|/|\\.).*`).test(e), z = (s, e) => {
+  const t = s.link.panel.pathname;
+  return !t && s.isSelected() ? !0 : s.exact ? e === t : O(t, e);
+};
+class E extends c {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.parentLink = null, this.mainClassName = "";
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = `navigation flex flex-auto flex-col sub ${this.mainClassName || ""}`, t = this.mapOptions(this.options);
+    return u({ class: e, onState: this.onState() }, [
+      o({ class: "relative group flex flex-col gap-2 py-2 px-0 list-none m-0" }, [...t, ...this.addSubs(), this.addWatcher()])
+    ]);
+  }
+  /**
+   * This will add awatcher to update the links
+   * when the path changes.
+   *
+   * @returns {object}
+   */
+  addWatcher() {
+    return {
+      watch: {
+        value: ["[[path]]", d.data],
+        callBack: this.updateLinks.bind(this)
+      }
+    };
+  }
+  /**
+   * This will set up the on state.
+   *
+   * @returns {array}
+   */
+  onState() {
+    return [
+      ["selected", { active: !0 }],
+      ["active", { active: !0 }]
+    ];
+  }
+  /**
+   * This will set up the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      remotes: [
+        {
+          /**
+           * This will link the state to the parent link.
+           */
+          id: this.parentLink.link.getId(),
+          selected: null,
+          active: null
+        }
+      ]
+    };
+  }
+  /**
+   * This will update the links after setup.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const e = d.data.get("path");
+    this.updateLinks(e);
+  }
+  /**
+   * This will update the links.
+   *
+   * @param {string} value
+   * @returns {void}
+   */
+  updateLinks(e) {
+    let t = !1;
+    for (const a of this.links)
+      if (a.rendered && (t = z(a, e), t === !0))
+        break;
+    this.parentLink.update(t);
+  }
+}
+const F = ({ title: s, options: e, class: t = "", mobileBorder: a = !1, sticky: v = !1 }) => l({ class: `pb-12 p-4 pt-0 lg:p-6 lg:border-r w-full lg:max-w-[300px] h-full ${t}` }, [
+  s && B({ class: "pb-4 md:pb-2 px-6 flex flex-col" }, [
+    L({ class: "scroll-m-20 text-3xl lg:text-2xl font-bold tracking-tight" }, s)
+  ]),
+  new c({ options: e, mobileBorder: a, class: v ? "sticky top-0" : "" })
+]), T = (s) => p({ class: "text-lg ml-2" }, s), A = (s) => l({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
+  f({
+    variant: "icon",
+    class: "m-2",
+    click: (e, { state: t }) => t.toggle("open"),
+    icon: r.arrows.left
+  }),
+  s.title && T(s.title)
+]), G = () => l({
+  class: `
+            absolute inset-0 bg-black/40 z-[-1] fadeIn
+            transition-opacity duration-200
+        `,
+  click: (s, { state: e }) => e.open = !1
+});
+class W extends n {
+  /**
+  * This will declare the props for the compiler.
+  *
+  * @returns {void}
+  */
+  declareProps() {
+    this.title = "";
+  }
+  /**
+  * This will render the modal component.
+  *
+  * @returns {object}
+  */
+  render() {
+    return l({
+      class: "fixed inset-0 z-50",
+      style: "[[typeClass]]"
+    }, [
+      G(),
+      // Popover Content
+      l({
+        class: `
+                    absolute popIn w-auto p-0 bg-popover m-auto shadow-lg rounded-md top-0 bottom-0 left-2 right-2 max-h-[85vh] text-inherit block
+                `,
+        dataSet: ["open", ["expanded", !0, "true"]]
+      }, [
+        l({ class: "flex flex-auto flex-col w-full h-full overflow-y-auto max-h-[85vh] rounded-md bg-popover border" }, [
+          A({ title: this.title }),
+          l({ class: "flex flex-auto flex-col" }, this.children)
+        ])
+      ])
+    ]);
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: {
+        id: this.parent.getId(),
+        callBack: (a) => {
+          a === !1 && (document.documentElement.style.overflowY = "auto", this.destroy());
+        }
+      }
+    };
+  }
+  /**
+   * This will add the body scroll lock.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    document.documentElement.style.overflowY = "hidden";
+  }
+  /**
+      * This will override the set up to use the body.
+      *
+      * @param {object} container
+      */
+  setContainer(e) {
+    this.container = app.root;
+  }
+}
+const m = (s) => f({ class: "m-2", variant: "ghost", addState() {
+  return {
+    open: !1
+  };
+}, click: (e, { state: t }) => t.toggle("open") }, [
+  h(r.bar.three)
+]), j = (s) => p({ class: "text-lg ml-2" }, s), Y = (s) => l({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
+  m(),
+  s.title && j(s.title)
+]), g = (s, e) => {
+  s.forEach((t) => {
+    if (t.options) {
+      g(t.options, e);
+      return;
+    }
+    t.callBack = e;
+  });
+}, k = (s) => {
+  const e = (t, { parent: a }) => a.parent.state.open = !1;
+  return g(s.options, e), l({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
+    C(
+      "open",
+      (t) => t ? [
+        new W({ title: s.title }, [
+          new c(
+            {
+              options: s.options
+            }
+          )
+        ])
+      ] : null
+    )
+  ]);
+}, J = i((s) => l({ cache: "mobileNav", class: "inline-flex relative lg:hidden" }, [
+  l([
+    m(),
+    k(s)
+  ])
+])), K = i((s) => l({ cache: "mobileNav", class: "flex flex-auto flex-col w-full relative lg:hidden" }, [
+  l({ class: "flex flex-auto flex-col w-full" }, [
+    Y(s),
+    k(s)
+  ])
+]));
+export {
+  G as B,
+  c as I,
+  x as M,
+  I as N,
+  A as P,
+  E as S,
+  Y as T,
+  H as a,
+  M as b,
+  F as c,
+  J as d,
+  K as e,
+  W as f,
+  m as g
+};

package/dist/organisms.es.js

@@ -1,6 +1,6 @@
-import { B as s, m as o, C as t, j as r, D as n, l, H as i, I as d, N as b, O as v, P as p, S as N, p as g, n as k, o as u, T as C, k as D, U as M, W as T, f as c, h as B, i as m, c as y, d as W, b as h, e as H, a as P, g as f } from "./tab-C_dZb2qH.js";
+import { B as s, m as o, C as t, j as r, D as n, l, H as i, I as d, N as b, O as v, P as p, S as N, p as g, n as k, o as u, T as C, k as D, U as M, W as T, f as c, h as B, i as m, c as y, d as W, b as h, e as H, a as P, g as f } from "./tab-DE7bmr2y.js";
 import { b as I, C as S, D as L, a as O, F, M as U, c as G, p as j } from "./calendar-DR_svCOR.js";
-import { B as q, I as z, M as A, d as E, e as J, g as K, N as Q, b as R, a as V, f as X, P as Y, c as Z, S as _, T as $ } from "./mobile-nav-wrapper-7Qul1-mt.js";
+import { B as q, I as z, M as A, d as E, e as J, g as K, N as Q, b as R, a as V, f as X, P as Y, c as Z, S as _, T as $ } from "./mobile-nav-wrapper-BS9uUekR.js";
 export {
   s as BackButton,
   q as Backdrop,

package/dist/pages.es.js

@@ -1,4 +1,4 @@
-import { B as s, a as P, C as g, F as n, b as l, c as i, M as r, P as c, S as o } from "./sidebar-menu-page-M8hr9onX.js";
+import { B as s, a as P, C as g, F as n, b as l, c as i, M as r, P as c, S as o } from "./sidebar-menu-page-DN5qYk-Y.js";
 export {
   s as BasicPage,
   P as BlankPage,