elbe-ui 2.0.12 → 2.0.16

package/dist/bit/_bit_provider.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Column, ErrorView, Spinner, } from "..";
 import { _isFn } from "./_bit_types";
 function _LoadView({}) {
@@ -16,7 +16,7 @@ function _LoadView({}) {
 }
 export function _makeBitProvider(context, bitP) {
     function _BitProvider(p) {
-        const [streamCancel, setStreamCancel] = useState(null);
+        const streamCancelRef = useRef(null);
         const [state, setState] = useState({
             v: { type: "loading" },
             history: [],
@@ -81,10 +81,14 @@ export function _makeBitProvider(context, bitP) {
                     try {
                         if (!silent)
                             _partCtrl.setLoading();
-                        if (streamCancel)
-                            streamCancel();
+                        const prevCancel = streamCancelRef.current;
+                        streamCancelRef.current = null;
+                        if (prevCancel)
+                            prevCancel();
                         const cancel = _bit.stream(p, _partCtrl);
-                        setStreamCancel(() => cancel);
+                        streamCancelRef.current = () => {
+                            cancel();
+                        };
                         return;
                     }
                     catch (e) {
@@ -107,14 +111,14 @@ export function _makeBitProvider(context, bitP) {
                 if (state.v.type === "data") {
                     return _isFn(onData)
                         ? onData(state.v.value)
-                        : (_a = onData) !== null && _a !== void 0 ? _a : null;
+                        : ((_a = onData) !== null && _a !== void 0 ? _a : null);
                 }
                 if (state.v.type === "error") {
                     return _isFn(onError)
                         ? onError(state.v.value)
-                        : (_b = onError) !== null && _b !== void 0 ? _b : null;
+                        : ((_b = onError) !== null && _b !== void 0 ? _b : null);
                 }
-                return _isFn(onLoading) ? onLoading() : (_c = onLoading) !== null && _c !== void 0 ? _c : null;
+                return _isFn(onLoading) ? onLoading() : ((_c = onLoading) !== null && _c !== void 0 ? _c : null);
             }
             function mapUI(onData, onError, onLoading) {
                 return map((d) => onData(d), (e) => (onError !== null && onError !== void 0 ? onError : ((e) => _jsx(ErrorView, { error: e, retry: () => _reload(false) })))(e), () => (onLoading !== null && onLoading !== void 0 ? onLoading : (() => _jsx(_LoadView, {})))());
@@ -132,8 +136,10 @@ export function _makeBitProvider(context, bitP) {
         useEffect(() => {
             ctrl.reload(true);
             return () => {
-                if (streamCancel)
-                    streamCancel();
+                const cancel = streamCancelRef.current;
+                streamCancelRef.current = null;
+                if (cancel)
+                    cancel();
                 // call dispose if exists
                 const d = ctrl.dispose;
                 if (typeof d !== "function")

package/dist/index.d.ts

@@ -47,7 +47,9 @@ export * from "./ui/components/section_card";
 export * from "./ui/components/spinner";
 export * from "./ui/components/table";
 export * from "./ui/components/text";
+export * from "./ui/components/tooltip";
 export * from "./ui/app/app";
+export * from "./ui/app/app_ctxt";
 export * from "./ui/components/dev/todo";
 export * from "./ui/theme/subthemes/color/colors/colors";
 export * from "./ui/theme/theme";

package/dist/index.js

@@ -49,7 +49,9 @@ export * from "./ui/components/section_card";
 export * from "./ui/components/spinner";
 export * from "./ui/components/table";
 export * from "./ui/components/text";
+export * from "./ui/components/tooltip";
 export * from "./ui/app/app";
+export * from "./ui/app/app_ctxt";
 export * from "./ui/components/dev/todo";
 export * from "./ui/theme/subthemes/color/colors/colors";
 export * from "./ui/theme/theme";

package/dist/ui/app/app.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { Box, DialogsProvider, isMenuRoute, omit, ToastProvider, Wouter, } from "../..";
+import { Box, DialogsProvider, Icons, isMenuRoute, omit, PrettyErrorView, Route, ToastProvider, WithL10nOrDefault, Wouter, } from "../..";
 import { Menu } from "../components/layout/menu";
 import { unwrapFragments } from "../util/_util";
 import { AppContext } from "./app_ctxt";
@@ -91,43 +91,48 @@ function _App(p) {
         const menuItems = _extractMenuItems(children);
         return { children, menuItems };
     }, [p.children]);
-    return (_jsx(p.themeContext.WithTheme, { theme: themeSelected, children: _jsx(AppContext.Provider, { value: {
-                appConfig: p.config,
-                _appThemeContext: p.themeContext,
-                router: {
-                    goBack: (steps = 1) => {
-                        if (history.length === 0)
-                            return;
-                        const targetIndex = Math.max(0, history.length - 1 - steps);
-                        const target = history[targetIndex];
-                        setHistory((h) => h.slice(0, targetIndex + 1));
-                        navigate(target, { replace: true });
+    return (_jsx(p.themeContext.WithTheme, { theme: themeSelected, children: _jsx(WithL10nOrDefault, { children: _jsx(AppContext.Provider, { value: {
+                    appConfig: p.config,
+                    _appThemeContext: p.themeContext,
+                    router: {
+                        goBack: (steps = 1) => {
+                            if (history.length === 0)
+                                return;
+                            const targetIndex = Math.max(0, history.length - 1 - steps);
+                            const target = history[targetIndex];
+                            setHistory((h) => h.slice(0, targetIndex + 1));
+                            navigate(target, { replace: true });
+                        },
+                        go: (p, replace) => {
+                            setHistory((h) => {
+                                if (replace === "all")
+                                    return [p];
+                                const repl = Math.max(0, replace !== null && replace !== void 0 ? replace : 0);
+                                if (repl === 0)
+                                    return [...h, p];
+                                return [...h.slice(0, -repl), p];
+                            });
+                            navigate(p, { replace: (replace !== null && replace !== void 0 ? replace : 0) !== 0 });
+                        },
+                        history: history,
+                        location: location,
                     },
-                    go: (p, replace) => {
-                        setHistory((h) => {
-                            if (replace === "all")
-                                return [p];
-                            const repl = Math.max(0, replace !== null && replace !== void 0 ? replace : 0);
-                            if (repl === 0)
-                                return [...h, p];
-                            return [...h.slice(0, -repl), p];
-                        });
-                        navigate(p, { replace: (replace !== null && replace !== void 0 ? replace : 0) !== 0 });
-                    },
-                    history: history,
-                    location: location,
-                },
-                menu: menuItems.length === 0
-                    ? undefined
-                    : {
-                        isOpen: menuOpen,
-                        setOpen: (s) => setMenuOpen(s),
-                    },
-            }, children: _jsx(ToastProvider, { children: _jsx(DialogsProvider, { children: _jsxs(Box, { typeLabel: "app_base", scheme: "primary", style: {
-                            display: "flex",
-                            width: "100%",
-                            minHeight: "100vh",
-                        }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: { flex: 1, width: "0px" }, children: _jsx(Wouter.Switch, { children: children }) })] }) }) }) }) }));
+                    menu: menuItems.length === 0
+                        ? undefined
+                        : {
+                            isOpen: menuOpen,
+                            setOpen: (s) => setMenuOpen(s),
+                        },
+                }, children: _jsx(ToastProvider, { children: _jsx(DialogsProvider, { children: _jsxs(Box, { typeLabel: "app_base", scheme: "primary", style: {
+                                display: "flex",
+                                width: "100%",
+                                minHeight: "100vh",
+                            }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: {
+                                        flex: 1,
+                                        width: "0px",
+                                        display: "flex",
+                                        flexDirection: "column",
+                                    }, children: _jsxs(Wouter.Switch, { children: [children, ",", _jsx(_404Route, {})] }) })] }) }) }) }) }) }));
 }
 function _extractMenuItems(children) {
     if (!children)
@@ -140,3 +145,14 @@ function _extractMenuItems(children) {
     }
     return items;
 }
+function _404Route() {
+    return (_jsx(Route, { path: "*", children: _jsx(PrettyErrorView, { flex: true, error: {
+                icon: Icons.Frown,
+                code: "404",
+                message: "404 - Not Found",
+                description: "The requested page could not be found.",
+            }, retry: () => {
+                //set browser location to / manuall:
+                window.location.href = "/";
+            } }) }));
+}

package/dist/ui/components/button/icon_button.js

@@ -45,7 +45,7 @@ function _btn(_a) {
                 borderRadius: elbe.sharp ? 0 : "3rem",
                 height: "3rem",
                 width: "3rem",
-            }), { title: elbe.tooltip ? undefined : (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : undefined, onClick: (e) => {
+            }), { title: elbe.tooltip ? undefined : ((_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : undefined), onClick: (e) => {
                     e.stopPropagation();
                     onTap && onTap(e);
                 }, children: _jsx(Icon, { icon: icon }) })) }) }));

package/dist/ui/components/error_view.d.ts

@@ -11,7 +11,7 @@ export declare function ErrorView({ error, retry, debug, }: {
     retry?: () => any;
     debug?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function PrettyErrorView({ error, retry, labels, }: {
+export declare function PrettyErrorView({ error, retry, labels, flex, }: {
     error: ElbeError;
     retry?: () => any;
     labels?: {
@@ -19,4 +19,5 @@ export declare function PrettyErrorView({ error, retry, labels, }: {
         home?: L10nInlinePlain;
         details: L10nInlinePlain;
     };
+    flex?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/error_view.js

@@ -44,9 +44,9 @@ export function PrettyErrorView({ error, retry, labels = {
         it: "dettagli dell'errore",
         pt: "detalhes do erro",
     },
-}, }) {
+}, flex = false, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const l10n = _maybeL10n();
     const [open, setOpen] = useState(false);
-    return (_jsxs(Column, { cross: "center", style: { margin: "1rem 0", padding: "1rem" }, children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx(Text.h4, { v: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx(Text, { align: "center", v: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "", style: { cursor: "pointer" }, native: { onClick: () => setOpen(true) } }), retry && (_jsx(Button.flat, { ariaLabel: (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry", label: (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _e !== void 0 ? _e : "retry", icon: Icons.RotateCcw, onTap: () => retry() })), error.code === 404 && (_jsx(Button.flat, { ariaLabel: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _f !== void 0 ? _f : "go home", label: (_g = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _g !== void 0 ? _g : "go home", icon: Icons.House, onTap: () => (window.location.href = "/") })), _jsx(Dialog, { title: (_h = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _h !== void 0 ? _h : "error details", open: open, onClose: () => setOpen(false), children: _jsx("pre", { children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
+    return (_jsxs(Column, { cross: "center", main: "center", flex: flex, style: { margin: "1rem 0", padding: "1rem" }, children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx(Text.h4, { v: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx(Text, { align: "center", v: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "", style: { cursor: "pointer" }, native: { onClick: () => setOpen(true) } }), retry && (_jsx(Button.flat, { ariaLabel: (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry", label: (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _e !== void 0 ? _e : "retry", icon: Icons.RotateCcw, onTap: () => retry() })), error.code === 404 && (_jsx(Button.flat, { ariaLabel: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _f !== void 0 ? _f : "go home", label: (_g = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _g !== void 0 ? _g : "go home", icon: Icons.House, onTap: () => (window.location.href = "/") })), _jsx(Dialog, { title: (_h = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _h !== void 0 ? _h : "error details", open: open, onClose: () => setOpen(false), children: _jsx("pre", { children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
 }

package/dist/ui/components/footer.js

@@ -21,7 +21,7 @@ export function Footer({ left, right, copyright, version, legal, marginTop, }) {
             borderLeftStyle: "none",
             borderRightStyle: "none",
             borderBottomStyle: "none",
-            borderTopLeftRadius: layoutMode.isWide
+            borderTopLeftRadius: layoutMode.isWide && !theme.color.isContrast
                 ? `${theme.geometry.radius}rem`
                 : undefined,
             /*color: theme.color.currentColor.front

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

@@ -38,5 +38,7 @@ function _FlexLayout(row, p, elbe, wraps) {
         overflowX: !row ? undefined : p.scroll ? "auto" : undefined,
         overflowY: row ? undefined : p.scroll ? "auto" : undefined,
         flex: ((_c = elbe.flex) !== null && _c !== void 0 ? _c : p.scroll) ? 1 : undefined,
+        minWidth: 0,
+        minHeight: 0,
     }), { children: p.children })));
 }

package/dist/ui/components/section_card.js

@@ -37,7 +37,10 @@ export function SectionCard(p) {
         }, children: [_jsx(Dialog, { title: p.title + " - Info", open: hintOpen, maxWidth: 35, onClose: () => setHintOpen(false), children: typeof p.hint === "string" ? (_jsx("div", { className: "elbe-hint-markdown", children: _jsx(Markdown, { children: p.hint, allowElement: () => true }) })) : (p.hint) }), _jsxs(Column, { children: [_jsxs(Card, { onTap: collapsed === undefined
                             ? undefined
                             : () => setCollapsed(!collapsed), margin: -1, padding: 1, className: collapsed === undefined ? undefined : "hoverable_card", style: {
-                            border: "none",
+                            borderLeftStyle: "none",
+                            borderTopStyle: "none",
+                            borderRightStyle: "none",
+                            borderBottomStyle: "none",
                             display: "flex",
                             alignItems: "center",
                             backgroundColor: "transparent",

package/dist/ui/components/tooltip.d.ts

@@ -1,5 +1,8 @@
 import { ElbeChildren } from "../util/types";
 export declare function WithTooltip(p: {
-    tooltip?: string;
+    tooltip?: string | ElbeChildren;
+    delay?: number;
+    alignHorizontal?: "left" | "center" | "right" | "auto";
+    alignVertical?: "top" | "center" | "bottom" | "auto";
     children?: ElbeChildren;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/tooltip.js

@@ -12,12 +12,38 @@ export function WithTooltip(p) {
     const { theme } = _appThemeContext.useTheme().useWith((c) => ({
         color: Object.assign(Object.assign({}, c.color), { selection: Object.assign(Object.assign({}, c.color.selection), { scheme: "inverse", kind: "accent", manner: "plain", state: "neutral" }) }),
     }), []);
+    const align = useMemo(() => {
+        var _a, _b;
+        let xVals = { xOffset: -12, xTransform: "-100%" };
+        let yVals = { yOffset: -12, yTransform: "-100%" };
+        let xAlign = (_a = p.alignHorizontal) !== null && _a !== void 0 ? _a : "auto";
+        let yAlign = (_b = p.alignVertical) !== null && _b !== void 0 ? _b : "auto";
+        // if center-center, align above cursor to avoid covering it
+        if (xAlign === "center" && yAlign === "center") {
+            console.warn("Center-Center alignment may cause the tooltip" +
+                " to cover the cursor. Aligning to top-center instead.");
+            yAlign = "top";
+        }
+        if (xAlign === "auto")
+            xAlign = coords.left ? "right" : "left";
+        if (yAlign === "auto")
+            yAlign = coords.top ? "bottom" : "top";
+        if (xAlign === "center")
+            xVals = { xOffset: 0, xTransform: "-50%" };
+        if (xAlign === "right")
+            xVals = { xOffset: 12, xTransform: "0%" };
+        if (yAlign === "center")
+            yVals = { yOffset: 0, yTransform: "-50%" };
+        if (yAlign === "bottom")
+            yVals = { yOffset: 12, yTransform: "0%" };
+        return Object.assign(Object.assign({}, xVals), yVals);
+    }, [p.alignHorizontal, coords.left]);
     if (!p.tooltip)
         return _jsx(_Fragment, { children: p.children });
     return (_jsxs("span", { onMouseEnter: () => {
-            timeoutRef.current = window.setTimeout(() => setVisible(true), 1000);
+            var _a;
+            timeoutRef.current = window.setTimeout(() => setVisible(true), (_a = p.delay) !== null && _a !== void 0 ? _a : 1000);
         }, onMouseLeave: () => {
-            console.log("leave");
             if (timeoutRef.current) {
                 clearTimeout(timeoutRef.current);
                 timeoutRef.current = null;
@@ -31,18 +57,14 @@ export function WithTooltip(p) {
                 left: e.clientX > window.innerWidth / 2,
             });
         }, style: { display: "contents" }, children: [p.children, visible &&
-                createPortal(_jsx("div", { role: "tooltip", className: "elbe_tooltip", style: {
-                        position: "fixed",
-                        pointerEvents: "none",
-                        zIndex: 1001,
-                        top: coords.y + (coords.top ? -12 : 12), // offset below cursor
-                        left: coords.x + (coords.left ? -12 : 12), // offset right of cursor
-                        background: theme.color.currentColor.back
-                            .inter(theme.color.currentColor.front, 0.2)
-                            .asCss(),
-                        color: theme.color.currentColor.front.asCss(),
-                        padding: ".125rem .3rem",
-                        borderRadius: ".25rem",
-                        transform: `translate(${coords.left ? "-100%" : "0"}, ${coords.top ? "-100%" : "0"})`,
-                    }, children: p.tooltip }), rootDOM)] }));
+                createPortal(_jsx("div", { role: "tooltip", className: "elbe_tooltip", style: Object.assign({ position: "fixed", pointerEvents: "none", zIndex: 1001, top: coords.y + align.yOffset, left: coords.x + align.xOffset, transform: `translate(${align.xTransform}, ${align.yTransform})` }, (typeof p.tooltip === "string"
+                        ? {
+                            background: theme.color.currentColor.back
+                                .inter(theme.color.currentColor.front, 0.2)
+                                .asCss(),
+                            color: theme.color.currentColor.front.asCss(),
+                            padding: ".125rem .3rem",
+                            borderRadius: ".25rem",
+                        }
+                        : {})), children: p.tooltip }), rootDOM)] }));
 }

package/dist/ui/theme/subthemes/color/_seed.js

@@ -19,7 +19,7 @@ const _makeSecondary = ({ base, seed }) => LayerColor.new({
     border: base.border,
 });
 const _makeInverse = ({ base }) => base.mirrorBrightnessLayer();
-const _makeMajor = ({ style, path }) => {
+const _makeMajor = ({ style }) => {
     return LayerColor.fromBack(style.back, { border: style.back });
 };
 const _makeMinor = ({ base, style }) => {

package/dist/ui/util/l10n/l10n.d.ts

@@ -23,4 +23,7 @@ export declare function makeL10n<T extends _L10nData>(fallback: {
     L10n: React.FunctionComponent<_L10nProps>;
     useL10n: () => _L10nState<T>;
 };
+export declare function WithL10nOrDefault(p: {
+    children: ElbeChildren;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/util/l10n/l10n.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { _bestMatch, _L10nContext, _useL10n, } from "./_l10n_util";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { _bestMatch, _L10nContext, _maybeL10n, _useL10n, } from "./_l10n_util";
 /**
  * L10nBase is a function that creates a localization context provider and a hook to use the localization context.
  * @param fallback this is the fallback locale, which is used if no other locale is found. It is the basis for the locale type and must thus be complete.
@@ -44,3 +44,10 @@ function _l10nInlineResolver(locale) {
         return (_d = (_c = value[bestMatch !== null && bestMatch !== void 0 ? bestMatch : anyEnglish]) !== null && _c !== void 0 ? _c : value[locales[0]]) !== null && _d !== void 0 ? _d : "";
     };
 }
+export function WithL10nOrDefault(p) {
+    const l10n = useMemo(() => makeL10n({ en: {} }, {}), []);
+    const existing = _maybeL10n();
+    if (!!existing)
+        return _jsx(_Fragment, { children: p.children });
+    return _jsx(l10n.L10n, { children: p.children });
+}

package/dist/ui/util/toast/toast_legacy.js

@@ -4,9 +4,9 @@
  */
 export function showToast(message) {
     // find the 'elbe' element
-    const elbe = document.getElementById("elbe-app");
+    const elbe = document.getElementById("elbe_app");
     if (!elbe) {
-        console.warn("could not show legacy toast, no base element with '#elbe-app' found");
+        console.warn("could not show legacy toast, no base element with '#elbe_app' found");
         return;
     }
     const toast = document.createElement("div");

package/package.json

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