@base-framework/ui 0.0.0

package/dist/sidebar-menu-page-M8hr9onX.js

@@ -0,0 +1,224 @@
+var o = Object.defineProperty;
+var x = (e, t, a) => t in e ? o(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var s = (e, t, a) => x(e, typeof t != "symbol" ? t + "" : t, a);
+import { Div as l, Header as u, H1 as h, P as f } from "@base-framework/atoms";
+import { F as r, A as p } from "./aside-template-D0KANPjh.js";
+import { Component as m, Atom as c } from "@base-framework/base";
+import { c as g, e as P } from "./mobile-nav-wrapper-7Qul1-mt.js";
+class d extends m {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {string} class
+     */
+    s(this, "class", "");
+  }
+}
+class i extends d {
+  /**
+   * This will be called every time the route
+   * is activated.
+   *
+   * @param {object} params
+   */
+  update(t) {
+  }
+}
+class M extends i {
+  /**
+   * This will render the page.
+   *
+   * @returns {object}
+   */
+  render() {
+    return r([
+      l({ class: "flex flex-auto flex-col pt-[80px] sm:pt-0" }, this.children)
+    ]);
+  }
+}
+class v extends i {
+  /**
+   * This will render the page.
+   *
+   * @returns {object}
+   */
+  render() {
+    return r([
+      l({ class: "contained px-4 flex flex-auto flex-col" }, this.children)
+    ]);
+  }
+}
+const n = c((e, t) => (e.class = "basic-page pt-[80px] sm:pt-0 flex flex-auto flex-col " + (e.class || ""), {
+  tag: "section",
+  ...e,
+  children: t
+}));
+class y extends i {
+  /**
+   * This will render the page.
+   *
+   * @returns {object}
+   */
+  render() {
+    return n([
+      r([
+        l({ class: "contained px-4 flex flex-auto flex-col" }, this.children)
+      ])
+    ]);
+  }
+}
+const b = c(({ title: e, description: t }) => u({ class: "sm:py-8 px-6 md:px-5 flex flex-col" }, [
+  h({ class: "scroll-m-20 text-3xl font-bold tracking-tight" }, e),
+  t && f({ class: "text-base text-muted-foreground py-2 max-w-[700px]" }, t)
+]));
+class C extends i {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {string} title
+     */
+    s(this, "title", "");
+    /**
+     * @member {string} description
+     */
+    s(this, "description", "");
+  }
+  /**
+   * This will render the page.
+   *
+   * @returns {object}
+   */
+  render() {
+    return n([
+      b({
+        title: this.title,
+        description: this.description
+      }),
+      r(this.children)
+    ]);
+  }
+}
+class N extends d {
+  /**
+   * This will render the page.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.class ?? "";
+    return l({ class: `flex flex-col flex-auto ${t}` }, this.children);
+  }
+}
+class A extends i {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {array} routes
+     */
+    s(this, "routes", []);
+    /**
+     * @member {array} switch
+     */
+    s(this, "switch", []);
+    /**
+     * @member {array} links
+     */
+    s(this, "links", []);
+    /**
+     * @member {string} title
+     */
+    s(this, "title", "");
+  }
+  /**
+   * This will render the page.
+   *
+   * @returns {object}
+   */
+  render() {
+    return n(
+      {
+        route: this.addRoutes()
+      },
+      [
+        p({
+          left: this.addSidebar(),
+          right: this.addBody()
+        })
+      ]
+    );
+  }
+  /**
+   * This will add the routes.
+   *
+   * @returns {array}
+   */
+  addRoutes() {
+    return this.routes || [];
+  }
+  /**
+   * This will add the sidebar of the page.
+   *
+   * @returns {object}
+   */
+  addSidebar() {
+    return l({ class: "flex flex-auto flex-col" }, this.addNavigation());
+  }
+  /**
+   * This will add the body of the page.
+   *
+   * @returns {object}
+   */
+  addBody() {
+    return l({ class: "flex flex-auto flex-col" }, [
+      {
+        class: "contained",
+        switch: this.addSwitch()
+      }
+    ]);
+  }
+  /**
+   * This will add the switch of the page.
+   *
+   * @returns {array}
+   */
+  addSwitch() {
+    return this.switch || [];
+  }
+  /**
+   * This will add the navigation of the page.
+   *
+   * @returns {object}
+   */
+  addNavigation() {
+    const a = this.getLinks();
+    return [
+      g(
+        {
+          title: this.title,
+          options: a,
+          class: "hidden lg:block"
+        }
+      ),
+      P({ title: this.title, options: a })
+    ];
+  }
+  /**
+   * This will get the links.
+   *
+   * @returns {array}
+   */
+  getLinks() {
+    return this.links || [];
+  }
+}
+export {
+  i as B,
+  v as C,
+  y as F,
+  n as M,
+  d as P,
+  A as S,
+  M as a,
+  C as b,
+  N as c
+};

package/dist/style.css

@@ -0,0 +1 @@
+.modal{animation:popIn .2s;max-height:100vh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);@apply shadow-xl md:rounded-md rounded-md;}.modal:after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1}.modal.sm{max-width:425px;max-height:350px;@apply shadow-xl md:rounded-md rounded-md border;}.modal.sm .modal-body{max-height:300px}.modal.lg,.modal.xl{top:0;bottom:0;max-height:100vh}.modal .modal-header{padding-top:calc(1rem + env(safe-area-inset-top));top:calc(-0px - env(safe-area-inset-top))}.modal .modal-footer{padding-bottom:calc(1rem + env(safe-area-inset-bottom));bottom:calc(-0px - env(safe-area-inset-bottom))}@media (min-width: 1024px){.modal.md{max-height:80vh;padding:0}.modal header button.icon{@apply hidden;}}.modal.right,.modal.left{top:0;bottom:0;max-height:100vh;border-radius:0}.modal.right.md,.modal.left.md{@apply max-w-[640px];}.modal.right{margin-right:0;animation-name:pullRightIn}.modal.left{margin-left:0;animation-name:pullLeftIn}