elbe-ui 0.4.23 → 0.4.24

package/dist/ui/components/footer.js

@@ -7,7 +7,7 @@ export function Footer({ left, right, copyright, version, legal, marginTop, }) {
             borderLeft: "none",
             borderRight: "none",
             borderBottom: "none",
-            borderTopLeftRadius: layoutMode === "wide" ? "var(--g-radius)" : null,
+            borderTopLeftRadius: layoutMode.isWide ? "var(--g-radius)" : null,
             color: "color-mix(in srgb, var(--c-context-front) 60%, transparent)",
             marginTop: `${marginTop !== null && marginTop !== void 0 ? marginTop : 0}rem`,
         }, children: _jsxs(Column, { gap: 0.5, children: [(left || right) && (_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 &&

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

@@ -13,6 +13,13 @@ export type HeaderProps = HeaderLogos & {
     scheme?: ElbeColorSchemes;
 };
 export declare function Header(p: HeaderProps): import("preact").JSX.Element;
+export declare function _Logo(p: {
+    flex?: boolean;
+    logo: string | ElbeChild;
+    logoDark?: string | ElbeChild | null;
+    lMargin?: number;
+    rMargin?: number;
+}): import("preact").JSX.Element | null;
 export declare function BackButton(p: {
     onTap: () => void;
 }): import("preact").JSX.Element;

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

@@ -31,14 +31,15 @@ export function Header(p) {
         }, 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 })), p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, layoutMode !== "mobile" && (_jsx(_Logo, { logo: (_b = p.logo) !== null && _b !== void 0 ? _b : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: (_c = p.logoDark) !== null && _c !== void 0 ? _c : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 })), (!appBase || layoutMode === "wide") && (_jsx("div", { style: { margin: "-1rem", width: "1.5rem" } })), _jsx(_HeaderTitle, { title: p.title, center: (_d = p.centerTitle) !== null && _d !== void 0 ? _d : false }), _jsx(_Toolbar, { actions: [...((_e = p.actions) !== null && _e !== void 0 ? _e : []), ...((_f = appBase === null || appBase === void 0 ? void 0 : appBase.globalActions) !== null && _f !== void 0 ? _f : [])] }), layoutMode === "wide" && (_jsx(_Logo, { logo: (_g = p.endLogo) !== null && _g !== void 0 ? _g : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogo, logoDark: (_h = p.endLogoDark) !== null && _h !== void 0 ? _h : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogoDark, rMargin: 0.5 }))] }));
+                    !layoutMode.isWide && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon })), p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, !layoutMode.isMobile && (_jsx(_Logo, { logo: (_b = p.logo) !== null && _b !== void 0 ? _b : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: (_c = p.logoDark) !== null && _c !== void 0 ? _c : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 })), (!appBase || layoutMode.isWide) && (_jsx("div", { style: { margin: "-1rem", width: "1.5rem" } })), _jsx(_HeaderTitle, { title: p.title, center: (_d = p.centerTitle) !== null && _d !== void 0 ? _d : false }), _jsx(_Toolbar, { actions: [...((_e = p.actions) !== null && _e !== void 0 ? _e : []), ...((_f = appBase === null || appBase === void 0 ? void 0 : appBase.globalActions) !== null && _f !== void 0 ? _f : [])] }), layoutMode.isWide && (_jsx(_Logo, { logo: (_g = p.endLogo) !== null && _g !== void 0 ? _g : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogo, logoDark: (_h = p.endLogoDark) !== null && _h !== void 0 ? _h : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogoDark, rMargin: 0.5 }))] }));
 }
-function _Logo(p) {
+export function _Logo(p) {
     var _a, _b;
     const tConfig = useThemeConfig();
     const [logo, setLogo] = useState(p.logo);
     useEffect(() => { var _a; return setLogo(tConfig.dark ? (_a = p.logoDark) !== null && _a !== void 0 ? _a : p.logo : p.logo); }, [tConfig]);
     return !logo ? null : (_jsx("div", { style: {
+            flex: p.flex ? 1 : null,
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
@@ -57,7 +58,7 @@ export function CloseButton(p) {
 export function _HeaderTitle(p) {
     const layoutMode = useLayoutMode();
     const globalCenter = useMemo(() => {
-        return layoutMode !== "mobile" && p.center;
+        return !layoutMode.isMobile && p.center;
     }, [layoutMode]);
     return (_jsx("div", { style: {
             flex: 1,

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
 import { MenuIcon } from "lucide-react";
 import { useLocation } from "wouter";
-import { useLayoutMode, useTheme, useThemeConfig } from "../../..";
+import { _Logo, useLayoutMode, useTheme, useThemeConfig, } from "../../..";
 import { Card, elevatedShadow } from "../base/card";
 import { Button } from "../button/button";
 import { useAppBase } from "./ctx_app_base";
@@ -18,17 +18,17 @@ export function Menu(p) {
         else
             topBot.top.push(i);
     }
-    const wideOrOpen = () => appBase.menuOpen || layoutMode == "wide";
+    const wideOrOpen = () => appBase.menuOpen || layoutMode.isWide;
     const menuWidth = () => appBase.menuOpen
-        ? layoutMode === "mobile"
+        ? layoutMode.isMobile
             ? "100vw"
             : `${17 + theme.geometry.borderWidth}rem`
-        : layoutMode === "wide"
+        : layoutMode.isWide
             ? `${4 + theme.geometry.borderWidth}rem`
             : "0";
-    return (_jsxs(_Fragment, { children: [layoutMode == "wide" && (_jsx("div", { style: {
+    return (_jsxs(_Fragment, { children: [layoutMode.isWide && (_jsx("div", { style: {
                     width: menuWidth(),
-                } })), _jsx("div", { onClick: () => appBase.setMenuOpen(false), style: Object.assign({ zIndex: 100, position: "fixed", left: 0, top: 0, width: 0, height: 0, backgroundColor: "rgba(0,0,0,0)", transition: "background-color 200ms ease-in-out" }, (layoutMode === "narrow" && appBase.menuOpen
+                } })), _jsx("div", { onClick: () => appBase.setMenuOpen(false), style: Object.assign({ zIndex: 100, position: "fixed", left: 0, top: 0, width: 0, height: 0, backgroundColor: "rgba(0,0,0,0)", transition: "background-color 200ms ease-in-out" }, (layoutMode.isNarrow && appBase.menuOpen
                     ? {
                         backdropFilter: "blur(5px)",
                         backgroundColor: "rgba(0,0,0,.2)",
@@ -36,21 +36,21 @@ export function Menu(p) {
                         height: "100vh",
                     }
                     : {})) }), _jsx(Card, { onTap: () => {
-                    if (layoutMode == "wide")
+                    if (layoutMode.isWide)
                         return;
                     appBase.setMenuOpen(false);
-                }, sharp: layoutMode == "mobile", bordered: true, scheme: "primary", padding: wideOrOpen() ? 0.5 : 0, style: Object.assign({ zIndex: 101, position: "fixed", left: 0, top: 0, height: "100vh", overflow: "hidden", width: menuWidth(), display: "flex", 
+                }, sharp: layoutMode.isMobile, bordered: true, scheme: "primary", padding: wideOrOpen() ? 0.5 : 0, style: Object.assign({ zIndex: 101, position: "fixed", left: 0, top: 0, height: "100vh", overflow: "hidden", width: menuWidth(), display: "flex", 
                     //display: appBase.menuOpen || layoutMode == "wide" ? "flex" : "none",
                     flexDirection: "column", justifyContent: "start", alignItems: "stretch", borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeft: "none", borderTop: "none", borderBottom: "none", borderColor: tConfig.highVis ? null : "transparent", gap: "1rem", transition: tConfig.reducedMotion
                         ? "none"
-                        : "width 200ms ease-in-out" }, (layoutMode === "narrow" && appBase.menuOpen
+                        : "width 200ms ease-in-out" }, (layoutMode.isNarrow && appBase.menuOpen
                     ? {
                         boxShadow: elevatedShadow,
                     }
                     : {})), children: wideOrOpen() && (_jsxs(_Fragment, { children: [_jsx(Button.plain, { contentAlign: "start", ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon, style: {
                                 marginBottom: ".5rem",
                                 borderRadius: "3rem",
-                            } }), _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 })))] })) })] }));
+                            }, children: !layoutMode.isWide && (_jsx(_Logo, { logo: appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 })) }), _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, navigate] = useLocation();

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

@@ -11,7 +11,7 @@ export function _Toolbar(p) {
     const appBase = maybeAppBase();
     const layoutMode = useLayoutMode();
     useEffect(() => {
-        const cutoff = layoutMode === "wide" ? 5 : 2;
+        const cutoff = layoutMode.isWide ? 5 : layoutMode.screenWidth < 400 ? 1 : 2;
         const bar = [];
         const overflow = [];
         for (let i = 0; i < p.actions.length; i++) {

package/dist/ui/theme/colors.js

@@ -247,8 +247,7 @@ export class SchemeColor extends KindColor {
         return (`${this.primary.asCss()}\n` +
             `.primary { ${this.primary.asCss()}} \n` +
             `.secondary { ${this.secondary.asCss()} }\n` +
-            `.inverse { ${this.inverse.asCss()} }\n` +
-            `.primary-hotfix { ${this.inverse.asCss()} }`);
+            `.inverse { ${this.inverse.asCss()} }`);
     }
     static generate(path, seed, base) {
         const m = seed.scheme;

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

@@ -22,5 +22,18 @@ export declare function copyToClipboard(text: string, toastMsg?: string): void;
 export declare function scrollToId(id: string): void;
 export declare function randomAlphaNum(length: int, prefix?: string): string;
 export type LayoutModes = "mobile" | "narrow" | "wide";
-export declare function useLayoutMode(): LayoutModes;
+export type LayoutModeInfo = {
+    mode: LayoutModes;
+    screenWidth: number;
+    screenHeight: number;
+    isMobile: boolean;
+    isNarrow: boolean;
+    isWide: boolean;
+};
+/**
+ * check the current layout mode based on the window width.
+ * This will return an object with the current mode and screen dimensions.
+ * @returns a LayoutModeInfo object
+ */
+export declare function useLayoutMode(): LayoutModeInfo;
 export declare function useSiteScroll(): number;

package/dist/ui/util/util.js

@@ -53,10 +53,28 @@ function _layoutMode() {
         return "narrow";
     return "wide";
 }
+function _layoutModeInfo() {
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    const mode = _layoutMode();
+    return {
+        mode,
+        screenWidth: w,
+        screenHeight: h,
+        isMobile: mode === "mobile",
+        isNarrow: mode === "narrow",
+        isWide: mode === "wide",
+    };
+}
+/**
+ * check the current layout mode based on the window width.
+ * This will return an object with the current mode and screen dimensions.
+ * @returns a LayoutModeInfo object
+ */
 export function useLayoutMode() {
-    const [mode, setMode] = useState(_layoutMode());
+    const [mode, setMode] = useState(_layoutModeInfo());
     useEffect(() => {
-        const onResize = () => setMode(_layoutMode());
+        const onResize = () => setMode(_layoutModeInfo());
         window.addEventListener("resize", onResize);
         return () => window.removeEventListener("resize", onResize);
     });

package/package.json

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