elbe-ui 0.4.11 → 0.4.14

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

@@ -1,9 +1,10 @@
-import { ElbeChild, HeaderLogos } from "../../..";
+import { ElbeChild, ElbeChildren, HeaderLogos } from "../../..";
 import { MenuItem } from "./menu";
 export type AppBaseProps = HeaderLogos & {
     initial?: string;
     menu: MenuItem[];
     globalActions?: ElbeChild[];
+    children: ElbeChildren;
 };
 /**
  * app base is a layout component that provides a side menu and a content area.

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

@@ -10,19 +10,21 @@ 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;
+    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: p.children })] }) }));
 }

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,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useComputed } from "@preact/signals";
 import { MenuIcon } from "lucide-react";
+import { route } from "preact-router";
 import { useLayoutMode, useTheme, useThemeConfig } from "../../..";
 import { Card, elevatedShadow } from "../base/card";
 import { Button } from "../button/button";
@@ -52,8 +54,10 @@ 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 selected = useComputed(() => {
+        const log = document.location.pathname;
+        return log.startsWith(`/${item.id}`);
+    });
     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: selected.value ? "major" : "plain", label: appBase.menuOpen ? item.label : undefined, icon: item.icon, onTap: item.disabled ? undefined : () => route(`/${item.id}`, true) }));
 }

package/dist/ui/theme/theme.js

@@ -36,7 +36,6 @@ export function ElbeTheme(p) {
 function _addTooltip() {
     return useEffect(() => {
         const _gap = 8;
-        console.log("add tooltip");
         const onHover = (e) => {
             var _a;
             const target = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest("[data-tooltip]");
@@ -63,6 +62,15 @@ function _addTooltip() {
                 left = window.innerWidth - tooltip.offsetWidth - _gap;
             tooltip.style.top = `${top}px`;
             tooltip.style.left = `${left}px`;
+            // remove tooltip when target is removed or mouse leaves
+            const observer = new MutationObserver(() => {
+                if (!document.body.contains(target) ||
+                    target === null) {
+                    tooltip.remove();
+                    observer.disconnect();
+                }
+            });
+            observer.observe(document.body, { childList: true, subtree: true });
             target.addEventListener("mouseleave", () => tooltip.remove(), {
                 once: true,
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "0.4.11",
+  "version": "0.4.14",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {