elbe-ui 2.0.2 → 2.0.4

package/dist/ui/app/app.js

@@ -26,6 +26,14 @@ function _App(p) {
         p.config,
         p.themeSelector,
     ]);
+    useMemo(() => {
+        if (p.config.noGlobalStyles)
+            return;
+        // apply global background of html and body elements
+        const bg = themeSelected.theme.color.currentColor.back.asCss();
+        document.documentElement.style.backgroundColor = bg;
+        document.body.style.backgroundColor = bg;
+    }, [themeSelected, p.config.noGlobalStyles]);
     const menuItems = useMemo(() => {
         return _extractMenuItems(p.children);
     }, [p.children]);

package/dist/ui/app/app_ctxt.d.ts

@@ -9,6 +9,8 @@ export type AppConfig = {
     routerConfig?: {
         basePath?: string;
     };
+    /** If true, global styles will not be applied. This can be useful for embedding Elbe in an existing app with its own styles. */
+    noGlobalStyles?: boolean;
 };
 type _MenuState = {
     isOpen: boolean;

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

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from "react";
 import { Row, Text } from "../../..";
 import { useApp } from "../../app/app_ctxt";
-import { useToolbar } from "../../util/ctx_toolbar";
+import { ToolbarContext, useToolbar } from "../../util/ctx_toolbar";
 import { applyProps } from "../base/box";
 import { WithStateTheme } from "../base/state_builder";
 import { WithTooltip } from "../tooltip";
@@ -35,24 +35,24 @@ function _Btn(_a) {
     const baseTheme = _appThemeContext.useTheme().useWith(({ color }) => ({
         color: Object.assign(Object.assign({}, color), { selection: Object.assign(Object.assign({}, color.selection), { kind: kind !== null && kind !== void 0 ? kind : color.selection.kind, manner: manner }) }),
     }), [kind, manner]);
-    return label || icon || children ? (_jsx(WithTooltip, { tooltip: elbe.tooltip, children: _jsx(WithStateTheme, { theme: baseTheme, disabled: !onTap, children: _jsx("button", Object.assign({}, applyProps("button", Object.assign(Object.assign({ role: "button" }, elbe), { flex: (toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? 1 : elbe.flex }), ["elbe_colored"], {
-                /*backgroundColor: elbe.transparent
-                ? "transparent"
-                : usedTheme.theme.color.currentColor.back.asCss(),*/
-                cursor: "inherit",
-                padding: "0.25rem .75rem",
-                minHeight: "3rem",
-                minWidth: "3rem",
-                border: "none",
-                backgroundColor: elbe.transparent ? "transparent" : undefined,
-                borderRadius: elbe.sharp
-                    ? 0
-                    : baseTheme.theme.geometry.radius + "rem",
-            }), { title: elbe.tooltip ? undefined : (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label, disabled: !onTap, onClick: (e) => onTap && onTap(e), children: _jsxs(Row, { cross: "center", main: contentAlign !== null && contentAlign !== void 0 ? contentAlign : ((toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? "start" : "center"), gap: (_c = elbe.gap) !== null && _c !== void 0 ? _c : 0.5, children: [_jsx(Icon, { icon: icon }), !(toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInToolbar) && label && (_jsx(Text, { bold: true, style: {
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                            }, v: label })), children] }) })) }) })) : (_jsx("div", {})
+    return label || icon || children ? (_jsx(ToolbarContext.Provider, { value: null, children: _jsx(WithTooltip, { tooltip: elbe.tooltip, children: _jsx(WithStateTheme, { theme: baseTheme, disabled: !onTap, children: _jsx("button", Object.assign({}, applyProps("button", Object.assign(Object.assign({ role: "button" }, elbe), { flex: (toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? 1 : elbe.flex }), ["elbe_colored"], {
+                    /*backgroundColor: elbe.transparent
+                  ? "transparent"
+                  : usedTheme.theme.color.currentColor.back.asCss(),*/
+                    cursor: "inherit",
+                    padding: "0.25rem .75rem",
+                    minHeight: "3rem",
+                    minWidth: "3rem",
+                    border: "none",
+                    backgroundColor: elbe.transparent ? "transparent" : undefined,
+                    borderRadius: elbe.sharp
+                        ? 0
+                        : baseTheme.theme.geometry.radius + "rem",
+                }), { title: elbe.tooltip ? undefined : (_b = elbe.ariaLabel) !== null && _b !== void 0 ? _b : label, disabled: !onTap, onClick: (e) => onTap && onTap(e), children: _jsxs(Row, { cross: "center", main: contentAlign !== null && contentAlign !== void 0 ? contentAlign : ((toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInOverflow) ? "start" : "center"), gap: (_c = elbe.gap) !== null && _c !== void 0 ? _c : 0.5, children: [_jsx(Icon, { icon: icon }), !(toolbarCtx === null || toolbarCtx === void 0 ? void 0 : toolbarCtx.isInToolbar) && label && (_jsx(Text, { bold: true, style: {
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                }, v: label })), children] }) })) }) }) })) : (_jsx("div", {})
     //_ElbeErr("Button requires either an icon and or a label, or a child")
     );
 }

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

@@ -16,9 +16,15 @@ type ContentBaseProps = {
  * - `padding` will add padding around the content, defaulting to `1rem`.
  * - `leading` can be used to add a back or close button to the header. Setting it
  *   "back" or "close" will automatically show the button if there is history to go back to.
+ * - `title` sets the title of the page in the header.
+ * - `centerTitle` will center the title in the header.
+ * - `actions` can be used to add action buttons to the header.
+ * - `scheme` sets the color scheme of the page.
+ * - `footer` can be used to set a custom footer element. If not provided, the app's default
+ *   footer will be used. If set to `null`, no footer will be rendered.
  */
 export declare function Page(p: HeaderProps & ContentBaseProps & {
     children?: ElbeChildren;
-    footer?: ElbeChild;
+    footer?: ElbeChild | null;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Column } from "../../..";
+import { useApp } from "../../app/app_ctxt";
 import { Box } from "../base/box";
 import { Header } from "./header";
 function _hasMoreThan(p, expected) {
@@ -15,9 +16,16 @@ function _hasMoreThan(p, expected) {
  * - `padding` will add padding around the content, defaulting to `1rem`.
  * - `leading` can be used to add a back or close button to the header. Setting it
  *   "back" or "close" will automatically show the button if there is history to go back to.
+ * - `title` sets the title of the page in the header.
+ * - `centerTitle` will center the title in the header.
+ * - `actions` can be used to add action buttons to the header.
+ * - `scheme` sets the color scheme of the page.
+ * - `footer` can be used to set a custom footer element. If not provided, the app's default
+ *   footer will be used. If set to `null`, no footer will be rendered.
  */
 export function Page(p) {
-    var _a;
+    var _a, _b;
+    const appConfig = useApp();
     const hasHeader = _hasMoreThan(p, [
         "children",
         "footer",
@@ -32,7 +40,7 @@ export function Page(p) {
             alignItems: "stretch",
             minHeight: "100vh",
             height: p.noScroll ? "100vh" : "auto",
-        }, children: [hasHeader && _jsx(Header, Object.assign({}, p)), _jsx(_ContentBase, { padding: p.padding, narrow: p.narrow, children: p.children }), p.footer] }));
+        }, children: [hasHeader && _jsx(Header, Object.assign({}, p)), _jsx(_ContentBase, { padding: p.padding, narrow: p.narrow, children: p.children }), p.footer === null ? null : (_b = p.footer) !== null && _b !== void 0 ? _b : appConfig.appConfig.footer] }));
 }
 function _ContentBase(p) {
     return (_jsx(Column, { style: {

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

@@ -5,12 +5,15 @@ export declare const elbeDomElements: {
     };
     readonly elbe_dialog: {
         readonly zindex: 1000;
+        readonly position: "absolute";
     };
     readonly elbe_tooltip: {
         readonly zindex: 2000;
+        readonly position: "absolute";
     };
     readonly elbe_toast: {
         readonly zindex: 3000;
+        readonly position: "fixed";
     };
 };
 export declare function getRootElement(id: keyof typeof elbeDomElements): HTMLElement;

package/dist/ui/util/root.js

@@ -1,9 +1,9 @@
 import { createRoot } from "react-dom/client";
 export const elbeDomElements = {
     elbe_app: { zindex: 0 },
-    elbe_dialog: { zindex: 1000 },
-    elbe_tooltip: { zindex: 2000 },
-    elbe_toast: { zindex: 3000 },
+    elbe_dialog: { zindex: 1000, position: "absolute" },
+    elbe_tooltip: { zindex: 2000, position: "absolute" },
+    elbe_toast: { zindex: 3000, position: "fixed" },
 };
 export function getRootElement(id) {
     const existing = document.getElementById(id);
@@ -12,7 +12,9 @@ export function getRootElement(id) {
     console.info(`ELBE: root element '${id}' not found. Creating...`);
     const el = document.createElement("div");
     el.id = id;
-    el.style.zIndex = `${elbeDomElements[id].zindex}`;
+    for (const [key, value] of Object.entries(elbeDomElements[id])) {
+        el.style[key] = value;
+    }
     el.setAttribute("note", "auto-created by elbe-ui");
     document.body.appendChild(el);
     return el;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {
@@ -24,7 +24,7 @@
     "build:css": "sass -q style/elbe-util.scss dist/elbe.css",
     "build": "rm -rf ./dist && bun run build:ts && bun run build:dts && bun run build:css ",
     "dev": "bun run build && (cd example && bun run dev)",
-    "pub": "bun run build && npm publish"
+    "pub": "npm login && bun run build && npm publish"
   },
   "devDependencies": {
     "@types/bun": "^1.3.4",