elbe-ui 0.4.14 → 0.4.16

package/dist/api/api_worker.d.ts

@@ -15,7 +15,10 @@ export interface PostArgs extends GetArgs {
  */
 export declare class ApiWorker {
     private apiURL;
-    constructor(apiURL: string);
+    private o?;
+    constructor(apiURL: string, o?: {
+        credentials?: "omit" | "include" | "same-origin";
+    } | undefined);
     private _fetch;
     get(path: string, args?: GetArgs): Promise<any>;
     post(path: string, args: PostArgs): Promise<any>;

package/dist/api/api_worker.js

@@ -14,11 +14,13 @@ const _noArgs = {};
  * to use it, you must first call `ApiService.init(apiURL)` with the base URL of your API.
  */
 export class ApiWorker {
-    constructor(apiURL) {
+    constructor(apiURL, o) {
         this.apiURL = apiURL;
+        this.o = o;
     }
     _fetch(p_1, method_1, _a) {
         return __awaiter(this, arguments, void 0, function* (p, method, { path, query, body }) {
+            var _b, _c;
             try {
                 p = path
                     ? p.replace(/:([a-zA-Z0-9_]+)/g, (m, p1) => {
@@ -32,7 +34,7 @@ export class ApiWorker {
                 const queryStr = query != null ? "?" + new URLSearchParams(query).toString() : "";
                 const response = yield fetch(this.apiURL + p + queryStr, {
                     method,
-                    credentials: "include",
+                    credentials: (_c = (_b = this.o) === null || _b === void 0 ? void 0 : _b.credentials) !== null && _c !== void 0 ? _c : "same-origin",
                     headers: { "Content-Type": "application/json" },
                     body: body ? JSON.stringify(body) : undefined,
                 });

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

@@ -1,10 +1,12 @@
-import { ElbeChild, ElbeChildren, HeaderLogos } from "../../..";
+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: ElbeChildren;
+    children: NestedArray<VNode>;
 };
 /**
  * app base is a layout component that provides a side menu and a content area.
@@ -12,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,7 +11,7 @@ import { Menu } from "./menu";
  * that will be displayed in the header of all pages.
  */
 export function AppBase(p) {
-    var _a;
+    var _a, _b;
     const [menuOpen, setMenuOpen] = useState(false);
     return (_jsx(AppBaseContext.Provider, { value: {
             menuOpen: menuOpen,
@@ -26,5 +27,12 @@ export function AppBase(p) {
                 display: "flex",
                 width: "100%",
                 minHeight: "100vh",
-            }, children: [_jsx(Menu, { items: p.menu }), _jsx("div", { style: { flex: 1 }, children: p.children })] }) }));
+            }, 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/menu.js

@@ -1,7 +1,6 @@
 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 { useLocation } from "preact-iso";
 import { useLayoutMode, useTheme, useThemeConfig } from "../../..";
 import { Card, elevatedShadow } from "../base/card";
 import { Button } from "../button/button";
@@ -54,10 +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 selected = useComputed(() => {
-        const log = document.location.pathname;
-        return log.startsWith(`/${item.id}`);
-    });
+    const location = useLocation();
     const appBase = useAppBase();
-    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) }));
+    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.14",
+  "version": "0.4.16",
   "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"
   }