@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.5 kB
JavaScript
import { I as b, Label as w, Span as S, Ul as o, H4 as N, Nav as d, 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 u } from "@base-framework/base";
import { I as h, B as f } from "./buttons-CVEwmPAi.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 = 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 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 d({ 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() {
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 d({ 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 = 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
};