@base-framework/ui
Version:
This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.
506 lines (505 loc) • 11.6 kB
JavaScript
import { Button as w, I as S, Label as B, Span as N, Ul as o, H4 as L, Nav as p, Div as l, Header as C, H1 as y, H3 as h, OnState as P, UseParent as I } from "@base-framework/atoms";
import { Component as n, Atom as i, NavLink as $, router as u } from "@base-framework/base";
import { I as f, B as x } from "./buttons-b7sffMwX.js";
import { Icons as r } from "./icons.es.js";
class H 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 w({
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);
}
}, 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 M = i(({ options: s, click: e }, t) => ({
tag: "li",
...{
class: `relative flex flex-row w-auto text-left p-0 transition-all cursor-pointer min-w-[48px] option${s ? " sub" : ""}`,
click: e
},
children: t
})), O = (s, e = null, t = !1) => [
e && S({
class: "icon w-12 rounded-md flex items-center justify-center min-w-12",
onState: ["selected", {
selected: !0
}],
html: e
}),
B({ class: "label flex flex-auto text-sm items-center cursor-pointer whitespace-nowrap" }, s),
t && N(
{
class: "flex justify-center items-center px-1 transition-all text-muted-foreground mr-2",
onState: [
["selected", {
rotate: !0
}],
["active", {
rotate: !0
}]
]
},
[
f({ size: "xs" }, r.chevron.single.down)
]
)
];
class m 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 = null, 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 M(
{ 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 || O(this.label, this.icon, e);
return this.href ? new $(
{
class: "flex flex-auto flex-row rounded-md transition-all overflow-x-hidden",
cache: "link",
href: this.href,
activeClass: "selected",
exact: this.exact || !1
},
t
) : new H({
class: "flex flex-auto flex-row rounded-md transition-all overflow-x-hidden",
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 z = i(({ map: s }, e) => o({ class: "navigation-group flex flex-col gap-2 list-none m-0 py-2 px-0", map: s }, [
L({ class: "text-muted-foreground text-sm py-0 px-4 whitespace-nowrap" }, e)
]));
class E 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 p({ 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 z({ map: t }, e.group);
}
/**
* This will add a link.
*
* @param {object} option
* @returns {object}
*/
addLink(e) {
return new m(e);
}
}
class c extends E {
onCreated() {
this.links = [];
}
/**
* This will set up the sub nav.
*
* @param {object} link
* @returns {object}
*/
setupSubNav(e) {
return new G(
{
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 m(e);
if (this.links.push(t), !t.options)
return t;
const a = this.addSubNav(t);
return {
class: "child-group",
link: t,
sub: a
};
}
}
const T = (s, e) => new RegExp(`${s}($|/|\\.).*`).test(e), A = (s, e) => {
const t = s.link.panel.pathname;
return !t && s.isSelected() ? !0 : s.exact ? e === t : T(t, e);
};
class G extends c {
/**
* This will declare the props for the compiler.
*
* @returns {void}
*/
declareProps() {
super.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 p({ 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]]", u.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 = u.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 = A(a, e), t === !0))
break;
this.parentLink.update(t);
}
}
const Q = ({ title: s, options: e, class: t = "", mobileBorder: a = !1, sticky: d = !1, tapNav: b }) => l({ class: `pb-12 p-4 pt-0 lg:p-6 lg:border-r w-full lg:max-w-[300px] h-full ${t}` }, [
b,
s && C({ class: "pb-4 md:pb-2 px-6 flex" }, [
y({ class: "scroll-m-20 text-3xl lg:text-2xl font-bold tracking-tight" }, s)
]),
new c({ options: e, mobileBorder: a, class: d ? "sticky top-0" : "" })
]), W = (s) => h({ class: "text-lg ml-2" }, s), j = (s) => l({ class: "sticky flex flex-row items-center bg-popover lg:hidden top-0 z-10 border-0 border-b" }, [
x({
variant: "icon",
class: "m-2",
click: (e, { state: t }) => t.toggle("open"),
icon: r.arrows.left
}),
s.title && W(s.title)
]), U = () => l({
class: `
absolute inset-0 bg-black/40 z-[-1] fadeIn
transition-opacity duration-200
`,
click: (s, { state: e }) => e.open = !1
});
class Y 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]]"
}, [
U(),
// 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" }, [
j({ 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 v = (s) => x({ class: "m-2", variant: "ghost", addState() {
return {
open: !1
};
}, click: (e, { state: t }) => t.toggle("open") }, [
f(r.bar.three)
]), D = (s) => h({ class: "text-lg ml-2" }, s), R = (s) => l({ class: "flex flex-auto flex-row items-center lg:hidden" }, [
v(),
s.title && D(s.title)
]), g = (s, e) => {
s.forEach((t) => {
if (t.options) {
g(t.options, e);
return;
}
t.callBack = e;
});
}, k = (s) => l({ class: "bg-background flex flex-auto flex-col w-full relative" }, [
P(
"open",
(e) => e ? [
new Y({ title: s.title }, [
I(({ state: t }) => {
const a = (d) => t.open = !1;
return g(s.options, a), new c(
{
options: s.options
}
);
})
])
] : null
)
]), V = i((s) => l({ cache: "mobileNav", class: "inline-flex relative lg:hidden" }, [
l([
v(),
k(s)
])
])), X = 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" }, [
R(s),
k(s)
])
]));
export {
U as B,
c as I,
m as M,
H as N,
j as P,
G as S,
R as T,
z as a,
E as b,
Q as c,
V as d,
X as e,
Y as f,
v as g
};