elbe-ui 0.4.3 → 0.4.7

package/dist/ui/components/error_view.js

@@ -1,24 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useSignal } from "@preact/signals";
+import { icons } from "lucide-react";
 import { route } from "preact-router";
-import { Icons } from "../..";
-import { ifApiError } from "../../service/s_api";
-import { ElbeDialog } from "./dialog";
+import { ElbeDialog, Icon, Icons, toElbeError, } from "../..";
+import { _maybeL10n } from "../util/l10n/_l10n_util";
 export function ErrorView({ error, retry, debug, }) {
-    var _a;
-    const apiError = (_a = ifApiError(error)) !== null && _a !== void 0 ? _a : {
-        code: 0,
-        message: "unknown error",
-        data: error,
-    };
-    return !debug ? (_jsx(PrettyErrorView, { apiError: apiError, retry: retry })) : (_jsxs("div", { class: "column padded card inverse cross-stretch", children: [_jsxs("h3", { style: "margin: 0", children: ["ERROR: ", apiError.code] }), _jsx("p", { children: apiError.message }), _jsx("pre", { children: JSON.stringify(apiError.data, null, 2) })] }));
+    const apiError = toElbeError(error);
+    return !debug ? (_jsx(PrettyErrorView, { error: apiError, retry: retry })) : (_jsxs("div", { class: "column padded card inverse cross-stretch", children: [_jsxs("h3", { style: "margin: 0", children: ["ERROR: ", apiError.code] }), _jsx("p", { children: apiError.message }), _jsx("pre", { children: JSON.stringify(apiError, null, 2) })] }));
 }
-export function PrettyErrorView({ apiError, retry, labels = {
-    retry: "retry",
-    home: "go home",
-    details: "error details",
+export function PrettyErrorView({ error, retry, labels = {
+    retry: {
+        en: "retry",
+        de: "erneut versuchen",
+        es: "intentar de nuevo",
+        fr: "réessayer",
+        it: "riprovare",
+        pt: "tentar novamente",
+    },
+    home: {
+        en: "go home",
+        de: "zur Startseite",
+        es: "a la página de inicio",
+        fr: "aller à l'accueil",
+        it: "torna alla home",
+        pt: "voltar para a página inicial",
+    },
+    details: {
+        en: "error details",
+        de: "Fehlerdetails",
+        es: "detalles del error",
+        fr: "détails de l'erreur",
+        it: "dettagli dell'errore",
+        pt: "detalhes do erro",
+    },
 }, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
+    const l10n = _maybeL10n();
     const openSig = useSignal(false);
-    return (_jsxs("div", { class: "column padded cross-center", style: "margin: 1rem 0", children: [_jsx(Icons.OctagonAlert, {}), _jsx("h3", { style: "margin: 0", children: apiError.code }), _jsx("span", { class: "pointer", onClick: () => (openSig.value = true), children: apiError.message }), retry && (_jsxs("button", { class: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_a = labels.retry) !== null && _a !== void 0 ? _a : "retry"] })), apiError.code === 404 && (_jsxs("button", { class: "action", onClick: () => route("/"), children: [_jsx(Icons.House, {}), (_b = labels.home) !== null && _b !== void 0 ? _b : "go home"] })), _jsx(ElbeDialog, { title: (_c = labels.details) !== null && _c !== void 0 ? _c : "error details", open: openSig.value, onClose: () => (openSig.value = false), children: _jsx("pre", { class: "card inverse", children: JSON.stringify(apiError.data, null, 2) }) })] }));
+    return (_jsxs("div", { class: "column padded cross-center", style: "margin: 1rem 0", children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx("h4", { style: "margin: 0", children: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx("span", { class: "pointer", onClick: () => (openSig.value = true), children: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "" }), retry && (_jsxs("button", { class: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry"] })), error.code === 404 && (_jsxs("button", { class: "action", onClick: () => route("/"), children: [_jsx(Icons.House, {}), (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _e !== void 0 ? _e : "go home"] })), _jsx(ElbeDialog, { title: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _f !== void 0 ? _f : "error details", open: openSig.value, onClose: () => (openSig.value = false), children: _jsx("pre", { class: "card inverse", children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
 }

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

@@ -5,12 +5,13 @@ export type FooterLink = {
     href: string;
     icon?: IconChild;
 };
-export declare function Footer({ left, right, copyright, version, legal, }: {
-    left: (FooterLink | React.ReactNode)[];
+export declare function Footer({ left, right, copyright, version, legal, marginTop, }: {
+    left?: (FooterLink | React.ReactNode)[];
     right?: (FooterLink | React.ReactNode)[];
     copyright?: string | React.ReactNode;
     version?: string;
     legal?: FooterLink;
+    marginTop?: number;
 }): React.JSX.Element;
 export declare function _WrittenIn({ city, href, }: {
     city?: string;

package/dist/ui/components/footer.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { HeartIcon } from "lucide-react";
-import { Card, Column, FlexSpace, Link, Row } from "../..";
-export function Footer({ left, right, copyright, version, legal, }) {
+import { Card, Column, FlexSpace, Link, Row, useLayoutMode, } from "../..";
+export function Footer({ left, right, copyright, version, legal, marginTop, }) {
+    const layoutMode = useLayoutMode();
     return (_jsx(Card, { scheme: "secondary", sharp: true, role: "contentinfo", ariaLabel: "footer", style: {
             borderLeft: "none",
             borderRight: "none",
             borderBottom: "none",
+            borderTopLeftRadius: layoutMode === "wide" ? "var(--g-radius)" : null,
             color: "color-mix(in srgb, var(--c-context-front) 60%, transparent)",
-        }, children: _jsxs(Column, { gap: 0.5, children: [_jsxs(Row, { main: "space-between", cross: "start", children: [_jsx(Column, { gap: 0.5, flex: 1, cross: "start", children: left.map((item) => (item.label ? _jsx(_Link, Object.assign({}, item)) : item)) }), right && (_jsx(Column, { gap: 0.5, flex: 1, cross: "end", children: right.map((item) => item.label ? _jsx(_Link, Object.assign({}, item)) : item) }))] }), (copyright || version || legal) && _jsx("hr", { style: { opacity: 0.7 } }), (copyright || version || legal) && (_jsxs(Row, { children: [copyright &&
+            marginTop: `${marginTop !== null && marginTop !== void 0 ? marginTop : 0}rem`,
+        }, children: _jsxs(Column, { gap: 0.5, children: [_jsxs(Row, { main: "space-between", cross: "start", children: [left && (_jsx(Column, { gap: 0.5, flex: 1, cross: "start", children: left.map((item) => item.label ? _jsx(_Link, Object.assign({}, item)) : item) })), right && (_jsx(Column, { gap: 0.5, flex: 1, cross: "end", children: right.map((item) => item.label ? _jsx(_Link, Object.assign({}, item)) : item) }))] }), (left || right) && (copyright || version || legal) && (_jsx("hr", { style: { opacity: 0.7 } })), (copyright || version || legal) && (_jsxs(Row, { children: [copyright &&
                             (typeof copyright === "string" ? _jsx("b", { children: copyright }) : copyright), version && _jsx(_Version, { version: version }), _jsx(FlexSpace, {}), legal && _jsx(_Link, Object.assign({}, legal))] }))] }) }));
 }
 function _Version({ version }) {

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

@@ -28,10 +28,10 @@ export function Header(p) {
             borderColor: tConfig.highVis || scroll ? null : "transparent",
             gap: "1rem",
             zIndex: 80,
-        }, children: [p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, p.leading && p.leading !== "back" && p.leading !== "close"
+        }, children: [p.leading && p.leading !== "back" && p.leading !== "close"
                 ? p.leading
                 : appBase &&
-                    layoutMode != "wide" && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon })), _jsx(_Logo, { logo: (_a = p.logo) !== null && _a !== void 0 ? _a : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: (_b = p.logoDark) !== null && _b !== void 0 ? _b : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 }), typeof p.title === "string" ? (_jsx(Text.h3, { style: {
+                    layoutMode != "wide" && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon })), p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, _jsx(_Logo, { logo: (_a = p.logo) !== null && _a !== void 0 ? _a : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: (_b = p.logoDark) !== null && _b !== void 0 ? _b : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 }), typeof p.title === "string" ? (_jsx(Text.h3, { style: {
                     marginLeft: !appBase || layoutMode === "wide" ? ".5rem" : 0,
                 }, align: p.centerTitle ? "center" : "start", flex: 1, v: p.title })) : (_jsx("div", { style: { flex: 1 }, children: p.title })), _jsx(_Toolbar, { actions: [...((_c = p.actions) !== null && _c !== void 0 ? _c : []), ...((_d = appBase === null || appBase === void 0 ? void 0 : appBase.globalActions) !== null && _d !== void 0 ? _d : [])] }), layoutMode === "wide" && (_jsx(_Logo, { logo: (_e = p.endLogo) !== null && _e !== void 0 ? _e : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogo, logoDark: (_f = p.endLogoDark) !== null && _f !== void 0 ? _f : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogoDark, rMargin: 0.5 }))] }));
 }

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

@@ -0,0 +1,30 @@
+import { Maybe } from "../util";
+import { L10nInlinePlain } from "./l10n";
+export type _LocaleID = `${string}_${string}` | `${string}`;
+export type _LocaleIDEasy = `${string}_${string}_easy` | _LocaleID;
+export type _L10nData = {
+    [key: string]: any;
+};
+export declare function _bestMatch(selection: _L10nSelection, locales: _LocaleIDEasy[]): _LocaleIDEasy | null;
+type _Locale = {
+    full: string;
+    lang: string;
+    region: string | null;
+    easy: boolean;
+};
+export declare function _locale(l: string): _Locale;
+export interface _L10nSelection {
+    locale: string;
+    easy: boolean;
+}
+export interface _L10nState<T extends _L10nData> extends _L10nSelection {
+    /** the current locale */
+    c: T;
+    setLocale: (locale: string) => void;
+    setEasyLang: (easyLang: boolean) => void;
+    inline: (value: Maybe<L10nInlinePlain | string>) => string;
+}
+export declare const _L10nContext: import("preact").Context<_L10nState<any> | null>;
+export declare function _maybeL10n<T extends _L10nData>(): _L10nState<T> | null;
+export declare function _useL10n<T extends _L10nData>(): _L10nState<T>;
+export {};

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

@@ -0,0 +1,40 @@
+import { createContext, useContext } from "preact/compat";
+export function _bestMatch(selection, locales) {
+    if (locales.length === 0)
+        return null;
+    const loc = _locale(selection.locale.replaceAll("-", "_"));
+    const asLocales = locales.map((l) => _locale(l));
+    // filter by language
+    const langMatch = asLocales.filter((l) => loc.lang === l.lang);
+    // filter by easy
+    const easyMatch = langMatch.filter((l) => l.easy === selection.easy);
+    // filter by region
+    const regionMatch = easyMatch.filter((l) => l.region === loc.region);
+    if (regionMatch.length > 0)
+        return regionMatch[0].full;
+    if (easyMatch.length > 0)
+        return easyMatch[0].full;
+    if (langMatch.length > 0)
+        return langMatch[0].full;
+    return null;
+}
+export function _locale(l) {
+    const parts = l.split("_");
+    const easy = parts.length > 2 && parts[2] === "easy";
+    const region = parts.length > 1 ? parts[1].toLowerCase() : null;
+    const lang = parts[0].toLowerCase();
+    return { full: l, lang, region, easy };
+}
+export const _L10nContext = createContext(null);
+export function _maybeL10n() {
+    const ctx = useContext(_L10nContext);
+    if (!ctx)
+        return null;
+    return ctx;
+}
+export function _useL10n() {
+    const ctx = useContext(_L10nContext);
+    if (!ctx)
+        throw new Error("useL10n must be used within a L10n");
+    return ctx;
+}

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

@@ -1,18 +1,9 @@
 import React from "preact/compat";
 import { ElbeChildren } from "../types";
-type _LocaleID = `${string}_${string}` | `${string}`;
-type _LocaleIDEasy = `${string}_${string}_easy` | _LocaleID;
-type _L10nData = {
-    [key: string]: any;
+import { _L10nData, _L10nState, _LocaleID, _LocaleIDEasy } from "./_l10n_util";
+export type L10nInlinePlain = {
+    [key: _LocaleIDEasy]: string;
 };
-export interface _L10nState<T extends _L10nData> {
-    /** the current locale */
-    c: T;
-    locale: string;
-    easyLang: boolean;
-    setLocale: (locale: string) => void;
-    setEasyLang: (easyLang: boolean) => void;
-}
 type _L10nProps = {
     children: ElbeChildren;
     initialLocale?: _LocaleID;

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

@@ -1,13 +1,6 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-import { createContext } from "preact";
-import { useContext, useEffect, useState } from "preact/hooks";
-const _L10nContext = createContext(null);
-function _useL10n() {
-    const ctx = useContext(_L10nContext);
-    if (!ctx)
-        throw new Error("useL10n must be used within a L10n");
-    return ctx;
-}
+import { useEffect, useState } from "preact/hooks";
+import { _bestMatch, _L10nContext, _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.
@@ -15,7 +8,7 @@ function _useL10n() {
  * @returns an object with the L10n component and the useL10n hook.
  */
 export function makeL10n(fallback, supported) {
-    if (Object.keys(supported).length === 0) {
+    if (Object.keys(fallback).length === 0) {
         throw new Error("L10nBase: No fallback locales provided");
     }
     const fallbackLocale = Object.keys(fallback)[0];
@@ -24,45 +17,30 @@ export function makeL10n(fallback, supported) {
     const useL10n = (_useL10n);
     const L10n = (p) => {
         var _a, _b;
-        const [loc, setLoc] = useState((_a = p.initialLocale) !== null && _a !== void 0 ? _a : navigator.language);
-        const [easy, setEasy] = useState((_b = p.initialEasyLang) !== null && _b !== void 0 ? _b : false);
+        const [locale, setLocale] = useState({
+            locale: (_a = p.initialLocale) !== null && _a !== void 0 ? _a : navigator.language,
+            easy: (_b = p.initialEasyLang) !== null && _b !== void 0 ? _b : false,
+        });
         const [currentLang, setCurrentLang] = useState(fallbackValue);
         useEffect(() => {
             var _a;
-            const match = _bestMatch(loc, easy, Object.keys(supportedLocales));
+            const match = _bestMatch(locale, Object.keys(supportedLocales));
             setCurrentLang(Object.assign(Object.assign({}, fallbackValue), ((_a = supportedLocales[match !== null && match !== void 0 ? match : ""]) !== null && _a !== void 0 ? _a : {})));
-        }, [loc, easy]);
-        return (_jsx(_L10nContext.Provider, { value: {
-                c: currentLang,
-                locale: loc,
-                easyLang: easy,
-                setLocale: (l) => setLoc(l),
-                setEasyLang: (e) => setEasy(e),
-            }, children: p.children }));
+        }, [locale]);
+        return (_jsx(_L10nContext.Provider, { value: Object.assign(Object.assign({}, locale), { c: currentLang, setLocale: (l) => setLocale(Object.assign(Object.assign({}, locale), { locale: l })), setEasyLang: (e) => setLocale(Object.assign(Object.assign({}, locale), { easy: e })), inline: _l10nInlineResolver(locale) }), children: p.children }));
     };
     return { L10n, useL10n };
 }
-function _locale(l) {
-    const parts = l.split("_");
-    const easy = parts.length > 2 && parts[2] === "easy";
-    const region = parts.length > 1 ? parts[1].toLowerCase() : null;
-    const lang = parts[0].toLowerCase();
-    return { full: l, lang, region, easy };
-}
-function _bestMatch(locale, easy, locales) {
-    const loc = _locale(locale.replaceAll("-", "_"));
-    const asLocales = locales.map((l) => _locale(l));
-    // filter by language
-    const langMatch = asLocales.filter((l) => loc.lang === l.lang);
-    // filter by easy
-    const easyMatch = langMatch.filter((l) => l.easy === easy);
-    // filter by region
-    const regionMatch = easyMatch.filter((l) => l.region === loc.region);
-    if (regionMatch.length > 0)
-        return regionMatch[0].full;
-    if (easyMatch.length > 0)
-        return easyMatch[0].full;
-    if (langMatch.length > 0)
-        return langMatch[0].full;
-    return null;
+function _l10nInlineResolver(locale) {
+    return (value) => {
+        var _a, _b, _c, _d;
+        if (!value)
+            return "";
+        if (typeof value === "string")
+            return value;
+        const locales = Object.keys(value);
+        const bestMatch = _bestMatch(locale, locales);
+        const anyEnglish = (_b = (_a = locales.find((l) => l.startsWith("en"))) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "en";
+        return (_d = (_c = value[bestMatch !== null && bestMatch !== void 0 ? bestMatch : anyEnglish]) !== null && _c !== void 0 ? _c : value[locales[0]]) !== null && _d !== void 0 ? _d : "";
+    };
 }

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

@@ -1,4 +1,6 @@
 import { int } from "../..";
+export type Maybe<T> = T | null | undefined;
+export type PromiseOr<T> = Promise<T> | T;
 export declare function clamp(value: number, min: number, max: number): number;
 export declare function classString(classes: (string | false | null | undefined)[]): string;
 /**

package/package.json

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