elbe-ui 0.4.12 → 0.4.15

package/dist/ui/components/layout/app_base.d.ts

@@ -1,9 +1,12 @@
+import { VNode } from "preact";
+import { NestedArray } from "preact-iso";
 import { ElbeChild, HeaderLogos } from "../../..";
 import { MenuItem } from "./menu";
 export type AppBaseProps = HeaderLogos & {
     initial?: string;
     menu: MenuItem[];
     globalActions?: ElbeChild[];
+    children: NestedArray<VNode>;
 };
 /**
  * app base is a layout component that provides a side menu and a content area.
@@ -11,4 +14,8 @@ export type AppBaseProps = HeaderLogos & {
  * used to create a consistent layout for pages. You can also pass global actions
  * that will be displayed in the header of all pages.
  */
-export declare function AppBase(p: AppBaseProps): import("preact/compat").JSX.Element;
+export declare function AppBase(p: AppBaseProps): import("preact").JSX.Element;
+export declare const Redirect: (p: {
+    path: string;
+    to: string;
+}) => null;

package/dist/ui/components/layout/app_base.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useState } from "preact/compat";
+import { Router, useLocation } from "preact-iso";
+import { useEffect, useState } from "preact/compat";
 import { Box } from "../../..";
 import { AppBaseContext } from "./ctx_app_base";
 import { Menu } from "./menu";
@@ -10,19 +11,28 @@ import { Menu } from "./menu";
  * that will be displayed in the header of all pages.
  */
 export function AppBase(p) {
-    var _a, _b, _c, _d, _e, _f;
-    const [state, setState] = useState({
-        menuSelected: (_c = (_a = p.initial) !== null && _a !== void 0 ? _a : (_b = p.menu[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null,
-        menuOpen: false,
-    });
-    return (_jsx(AppBaseContext.Provider, { value: Object.assign(Object.assign({}, state), { icons: {
+    var _a, _b;
+    const [menuOpen, setMenuOpen] = useState(false);
+    return (_jsx(AppBaseContext.Provider, { value: {
+            menuOpen: menuOpen,
+            icons: {
                 logo: p.logo,
                 logoDark: p.logoDark,
                 endLogo: p.endLogo,
                 endLogoDark: p.endLogoDark,
-            }, globalActions: (_d = p.globalActions) !== null && _d !== void 0 ? _d : [], setMenuOpen: (b) => setState(Object.assign(Object.assign({}, state), { menuOpen: b })), setMenuSelected: (s) => setState(Object.assign(Object.assign({}, state), { menuSelected: s })) }), children: _jsxs(Box, { scheme: "primary", style: {
+            },
+            globalActions: (_a = p.globalActions) !== null && _a !== void 0 ? _a : [],
+            setMenuOpen: (b) => setMenuOpen(b),
+        }, children: _jsxs(Box, { scheme: "primary", style: {
                 display: "flex",
                 width: "100%",
                 minHeight: "100vh",
-            }, children: [_jsx(Menu, { items: p.menu }), _jsx("div", { style: { flex: 1 }, children: (_f = (_e = p.menu.find((i) => i.id == state.menuSelected)) === null || _e === void 0 ? void 0 : _e.component) !== null && _f !== void 0 ? _f : _jsx("div", {}) })] }) }));
+            }, children: [_jsx(Menu, { items: p.menu }), _jsx("div", { style: { flex: 1 }, children: _jsxs(Router, { children: [_jsx(Redirect, { path: "/", to: `/${(_b = p.initial) !== null && _b !== void 0 ? _b : p.menu[0].id}` }), p.children] }) })] }) }));
 }
+export const Redirect = (p) => {
+    const location = useLocation();
+    useEffect(() => {
+        location.route(p.to, true);
+    }, [p.to]);
+    return null; // This component doesn't render anything
+};

package/dist/ui/components/layout/ctx_app_base.d.ts

@@ -1,14 +1,12 @@
 import { ElbeChild } from "../../util/types";
 import { HeaderLogos } from "./header";
 export interface _AppBaseState {
-    menuSelected: string | null;
     menuOpen: boolean;
     icons: HeaderLogos;
     globalActions: ElbeChild[];
 }
 interface _AppBaseControl extends _AppBaseState {
     setMenuOpen: (open: boolean) => void;
-    setMenuSelected: (selected: string) => void;
 }
 export declare const AppBaseContext: import("preact").Context<_AppBaseControl | null>;
 export declare function useAppBase(): _AppBaseControl;

package/dist/ui/components/layout/menu.d.ts

@@ -1,11 +1,10 @@
-import { ElbeChild } from "../../..";
 import { IconChild } from "../button/icon_button";
 export type MenuItem = {
     id: string;
     label: string;
     icon?: IconChild;
     bottom?: boolean;
-    component?: ElbeChild;
+    disabled?: boolean;
 };
 export declare function Menu(p: {
     items: MenuItem[];

package/dist/ui/components/layout/menu.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
 import { MenuIcon } from "lucide-react";
+import { useLocation } from "preact-iso";
 import { useLayoutMode, useTheme, useThemeConfig } from "../../..";
 import { Card, elevatedShadow } from "../base/card";
 import { Button } from "../button/button";
@@ -52,8 +53,7 @@ export function Menu(p) {
                             } }), _jsx(Column, { flex: 1, scroll: true, noScrollbar: true, children: topBot.top.map((i) => (_jsx(_MenuItemView, { item: i }))) }), topBot.bottom.map((i) => (_jsx(_MenuItemView, { item: i })))] })) })] }));
 }
 function _MenuItemView({ item }) {
+    const location = useLocation();
     const appBase = useAppBase();
-    return (_jsx(Button, { ariaLabel: item.label, contentAlign: "start", manner: item.id === appBase.menuSelected ? "major" : "plain", label: appBase.menuOpen ? item.label : undefined, icon: item.icon, onTap: item.component != null
-            ? () => appBase.setMenuSelected(item.id)
-            : undefined }));
+    return (_jsx(Button, { ariaLabel: item.label, contentAlign: "start", manner: location.path.startsWith(`/${item.id}`) ? "major" : "plain", label: appBase.menuOpen ? item.label : undefined, icon: item.icon, onTap: item.disabled ? undefined : () => location.route(`/${item.id}`, true) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "0.4.12",
+  "version": "0.4.15",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,7 @@
     "colors-convert": "^1.4.1",
     "lucide-react": "^0.438.0",
     "preact": "^10.24.2",
+    "preact-iso": "^2.9.1",
     "preact-router": "^4.1.2",
     "vite": "^5.4.10"
   }