@base-framework/ui 0.0.5 → 0.0.6

package/dist/types/components/organisms/panel.d.ts

@@ -8,9 +8,11 @@
  */
 export class Panel extends Component {
     /**
+     * This will set the class.
      * @member {string} class
+     * @default ''
      */
-    class: any;
+    class: string;
     /**
      * This will render the component.
      *

package/dist/types/components/organisms/tabs/tab-group.d.ts

@@ -20,8 +20,8 @@ export class TabGroup extends Component {
      */
     class: string;
     /**
-     * This will set the on select call back.
-     * @member {function} onSelect
+     * This will set the select call back.
+     * @member {function} callBack
      */
     onSelect: any;
     /**

package/dist/types/components/organisms/tabs/tab-navigation.d.ts

@@ -19,8 +19,8 @@ export class TabNavigation extends Component {
      */
     class: string;
     /**
-     * This will set the on select call back.
-     * @member {function} onSelect
+     * This will set the select call back.
+     * @member {function} callBack
      */
     onSelect: any;
     links: any[];

package/dist/types/components/pages/page.d.ts

@@ -9,7 +9,9 @@
  */
 export class Page extends Component {
     /**
+     * This will set the class.
      * @member {string} class
+     * @default ''
      */
     class: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {

package/dist/mobile-nav-wrapper-7Qul1-mt.js

@@ -1,578 +0,0 @@
-var w = Object.defineProperty;
-var S = (t, s, e) => s in t ? w(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var l = (t, s, e) => S(t, typeof s != "symbol" ? s + "" : s, e);
-import { I as N, Label as B, Span as L, Ul as r, H4 as C, Nav as h, Div as o, Header as y, H1 as I, H3 as f, OnState as $ } from "@base-framework/atoms";
-import { Component as i, Atom as c, NavLink as H, router as p } from "@base-framework/base";
-import { I as x, B as m } from "./icon-B9QUT2NY.js";
-import { Icons as u } from "./icons.es.js";
-class M extends i {
-  constructor() {
-    super(...arguments);
-    /**
-     * This will set the class.
-     * @member {string} class
-     * @default ''
-     */
-    l(this, "class", "");
-    /**
-     * This will set the check callback.
-     * @member {function} checkCallBack
-     * @default null
-     */
-    l(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 a = e.active ? this : null;
-        this.checkCallBack(a);
-      },
-      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 O = c(({ options: t, click: s }, e) => ({
-  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${t ? " sub" : ""}`,
-    click: s
-  },
-  children: e
-})), z = (t, s = null, e = !1) => [
-  s && N({
-    class: "icon w-12 rounded-md flex items-center justify-center",
-    onState: ["selected", {
-      selected: !0
-    }],
-    html: s
-  }),
-  B({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, t),
-  e && L(
-    {
-      class: "flex justify-center items-center px-1 transition-all text-muted-foreground mr-2",
-      onState: [
-        ["selected", {
-          rotate: !0
-        }],
-        ["active", {
-          rotate: !0
-        }]
-      ]
-    },
-    [
-      x({ size: "xs" }, u.chevron.single.down)
-    ]
-  )
-];
-class g extends i {
-  constructor() {
-    super(...arguments);
-    /**
-     * This will set the label.
-     * @member {string} label
-     * @default ''
-     */
-    l(this, "label", "");
-    /**
-     * This will set the icon.
-     * @member {string} icon
-     * @default null
-     */
-    l(this, "icon", null);
-    /**
-     * This will set the href.
-     * @member {string} href
-     * @default null
-     */
-    l(this, "href", null);
-    /**
-     * This will set the exact.
-     * @member {boolean} exact
-     * @default false
-     */
-    l(this, "exact", !1);
-    /**
-     * This will set the options.
-     * @member {array} options
-     */
-    l(this, "options", []);
-    /**
-     * This will set the content.
-     * @member {array} content
-     * @default null
-     */
-    l(this, "content", null);
-    /**
-     * This will set the call back.
-     * @member {function} callBack
-     */
-    l(this, "callBack", null);
-    /**
-     * This will set the check call back.
-     * @member {function} checkCallBack
-     */
-    l(this, "checkCallBack", null);
-    /**
-     * This will set the link.
-     * @member {object} link
-     */
-    l(this, "link", null);
-  }
-  /**
-   * This will render the component.
-   *
-   * @override
-   * @returns {object}
-   */
-  render() {
-    const e = !this.options && this.callBack;
-    return O(
-      { options: this.options, click: e },
-      [
-        this.addLink()
-      ]
-    );
-  }
-  /**
-   * This will add the link.
-   *
-   * @returns {object}
-   * @protected
-   */
-  addLink() {
-    const e = this.options && this.options.length > 0, a = this.content || z(this.label, this.icon, e);
-    return this.href ? new H(
-      {
-        class: "flex flex-auto flex-row",
-        cache: "link",
-        href: this.href,
-        activeClass: "selected",
-        exact: this.exact || !1
-      },
-      a
-    ) : new M({
-      class: "flex flex-auto flex-row",
-      cache: "link",
-      checkCallBack: this.checkCallBack
-    }, a);
-  }
-  /**
-   * This will check if the link is selected.
-   *
-   * @returns {boolean}
-   */
-  isSelected() {
-    return this.link.state.get("selected");
-  }
-  update(e) {
-    this.link.update(e);
-  }
-}
-const E = c(({ map: t }, s) => r({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: t }, [
-  C({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, s)
-]));
-class P extends i {
-  constructor() {
-    super(...arguments);
-    /**
-     * This will set the options.
-     * @member {array} options
-     */
-    l(this, "options", []);
-    /**
-     * This will set the class.
-     * @member {string} class
-     */
-    l(this, "class", "");
-    /**
-     * This will set the mobile border.
-     * @member {boolean} mobileBorder
-     * @default false
-     */
-    l(this, "mobileBorder", !1);
-  }
-  /**
-   * This will render the component.
-   *
-   * @returns {object}
-   */
-  render() {
-    const e = this.mapOptions(this.options), a = this.class || "", n = this.mobileBorder ? "border md:border-0 rounded-md" : "";
-    return h({ class: `navigation flex flex-auto flex-col ${a}` }, [
-      r({
-        class: `relative group flex flex-col gap-2 py-2 px-2 list-none m-0 ${n}`,
-        map: e
-      }),
-      ...this.addSubs()
-    ]);
-  }
-  /**
-   * This will get the options.
-   *
-   * @param {array} options
-   * @returns {array}
-   */
-  mapOptions(e = []) {
-    return [e.map((n) => n.group ? this.addGroup(n) : this.addLink(n)), (n) => n];
-  }
-  /**
-   * This will get the subs.
-   *
-   * @returns {array}
-   */
-  addSubs() {
-    return [];
-  }
-  /**
-   * This will add a group.
-   *
-   * @param {object} option
-   * @returns {object}
-   */
-  addGroup(e) {
-    const a = this.mapOptions(e.options);
-    return E({ map: a }, e.group);
-  }
-  /**
-   * This will add a link.
-   *
-   * @param {object} option
-   * @returns {object}
-   */
-  addLink(e) {
-    return new g(e);
-  }
-}
-class d extends P {
-  onCreated() {
-    this.links = [];
-  }
-  /**
-   * This will set up the sub nav.
-   *
-   * @param {object} link
-   * @returns {object}
-   */
-  setupSubNav(s) {
-    return new G(
-      {
-        parentLink: s,
-        options: s.options
-      }
-    );
-  }
-  /**
-   * This will add a sub navigation.
-   *
-   * @param {object} link
-   * @returns {object}
-   */
-  addSubNav(s) {
-    const e = this.setupSubNav(s);
-    return s.sub = e, e;
-  }
-  /**
-   * This will add a link.
-   *
-   * @param {object} option
-   * @returns {object}
-   */
-  addLink(s) {
-    const e = new g(s);
-    if (this.links.push(e), !e.options)
-      return e;
-    const a = this.addSubNav(e);
-    return {
-      class: "child-group",
-      link: e,
-      sub: a
-    };
-  }
-}
-const T = (t, s) => new RegExp(`${t}($|/|\\.).*`).test(s), A = (t, s) => {
-  const e = t.link.panel.pathname;
-  return !e && t.isSelected() ? !0 : t.exact ? s === e : T(e, s);
-};
-class G extends d {
-  constructor() {
-    super(...arguments);
-    /**
-     * This will set the parent link.
-     * @member {object} parentLink
-     * @default null
-     */
-    l(this, "parentLink", null);
-    /**
-     * This will set the main class name.
-     * @member {string} mainClassName
-     * @default ''
-     */
-    l(this, "mainClassName", "");
-  }
-  /**
-   * This will render the component.
-   *
-   * @returns {object}
-   */
-  render() {
-    const e = `navigation flex flex-auto flex-col sub ${this.mainClassName || ""}`, a = this.mapOptions(this.options);
-    return h({ class: e, onState: this.onState() }, [
-      r({ class: "relative group flex flex-col gap-2 py-2 px-0 list-none m-0" }, [...a, ...this.addSubs(), this.addWatcher()])
-    ]);
-  }
-  /**
-   * This will add awatcher to update the links
-   * when the path changes.
-   *
-   * @returns {object}
-   */
-  addWatcher() {
-    return {
-      watch: {
-        value: ["[[path]]", p.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 = p.data.get("path");
-    this.updateLinks(e);
-  }
-  /**
-   * This will update the links.
-   *
-   * @param {string} value
-   * @returns {void}
-   */
-  updateLinks(e) {
-    let a = !1;
-    for (const n of this.links)
-      if (n.rendered && (a = A(n, e), a === !0))
-        break;
-    this.parentLink.update(a);
-  }
-}
-const V = ({ title: t, options: s, class: e = "", mobileBorder: a = !1, sticky: n = !1 }) => o({ class: `pb-12 p-4 pt-0 lg:p-6 lg:border-r w-full lg:max-w-[300px] h-full ${e}` }, [
-  t && y({ class: "pb-4 md:pb-2 px-6 flex flex-col" }, [
-    I({ class: "scroll-m-20 text-3xl lg:text-2xl font-bold tracking-tight" }, t)
-  ]),
-  new d({ options: s, mobileBorder: a, class: n ? "sticky top-0" : "" })
-]), W = (t) => f({ class: "text-lg ml-2" }, t), j = (t) => o({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
-  m({
-    variant: "icon",
-    class: "m-2",
-    click: (s, { state: e }) => e.toggle("open"),
-    icon: u.arrows.left
-  }),
-  t.title && W(t.title)
-]), Y = () => o({
-  class: `
-            absolute inset-0 bg-black/40 z-[-1] fadeIn
-            transition-opacity duration-200
-        `,
-  click: (t, { state: s }) => s.open = !1
-});
-class D extends i {
-  constructor() {
-    super(...arguments);
-    /**
-     * This will set the title.
-     * @member {string} title
-     */
-    l(this, "title", "");
-  }
-  /**
-  * This will render the modal component.
-  *
-  * @returns {object}
-  */
-  render() {
-    return o({
-      class: "fixed inset-0 z-50",
-      style: "[[typeClass]]"
-    }, [
-      Y(),
-      // Popover Content
-      o({
-        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"]]
-      }, [
-        o({ class: "flex flex-auto flex-col w-full h-full overflow-y-auto max-h-[85vh] rounded-md bg-popover border" }, [
-          j({ title: this.title }),
-          o({ class: "flex flex-auto flex-col" }, this.children)
-        ])
-      ])
-    ]);
-  }
-  /**
-   * This will setup the states.
-   *
-   * @returns {object}
-   */
-  setupStates() {
-    return {
-      open: {
-        id: this.parent.getId(),
-        callBack: (n) => {
-          n === !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 k = (t) => m({ class: "m-2", variant: "ghost", addState() {
-  return {
-    open: !1
-  };
-}, click: (s, { state: e }) => e.toggle("open") }, [
-  x(u.bar.three)
-]), R = (t) => f({ class: "text-lg ml-2" }, t), U = (t) => o({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
-  k(),
-  t.title && R(t.title)
-]), v = (t, s) => {
-  t.forEach((e) => {
-    if (e.options) {
-      v(e.options, s);
-      return;
-    }
-    e.callBack = s;
-  });
-}, b = (t) => {
-  const s = (e, { parent: a }) => a.parent.state.open = !1;
-  return v(t.options, s), o({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
-    $(
-      "open",
-      (e) => e ? [
-        new D({ title: t.title }, [
-          new d(
-            {
-              options: t.options
-            }
-          )
-        ])
-      ] : null
-    )
-  ]);
-}, X = c((t) => o({ cache: "mobileNav", class: "inline-flex relative lg:hidden" }, [
-  o([
-    k(),
-    b(t)
-  ])
-])), Z = c((t) => o({ cache: "mobileNav", class: "flex flex-auto flex-col w-full relative lg:hidden" }, [
-  o({ class: "flex flex-auto flex-col w-full" }, [
-    U(t),
-    b(t)
-  ])
-]));
-export {
-  Y as B,
-  d as I,
-  g as M,
-  M as N,
-  j as P,
-  G as S,
-  U as T,
-  E as a,
-  P as b,
-  V as c,
-  X as d,
-  Z as e,
-  D as f,
-  k as g
-};