elbe-ui 0.2.46 → 0.2.51

package/dist/elbe.css

@@ -465,13 +465,12 @@ body,
   border-width: 20px;
   border-style: solid;
   border-width: 0 0 2px 0;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem;
   background-color: color-mix(in srgb, var(--c-context-back) 50%, transparent);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   z-index: 20;
   box-sizing: border-box;
-  height: 4.5rem;
   justify-content: space-between;
   align-items: center;
 }

package/dist/elbe.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../style/elbe.scss","../style/_base.scss","../style/_flex.scss","../style/_components.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAOQ;AAMR;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAIF;AC3DA;AAoBA;AA6DA;AAUA;AAaA;AA8BA;AC9GA;AAqBA;AAYA;AAkBA;AAqBA;AC2GA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AFzMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAMF;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;;AAGF;AAAA;EAEE;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAEF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAKF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAOF;EACE;;AAGF;EAEE;EACA;EACA;;AAKF;AAAA;EAEE;;AAEF;AAAA;AAAA;AAAA;EAEE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IACE;;;ACpJJ;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAIA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAMJ;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;;AClHF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAoBJ;EACE;EACA;EACA;;AAGF;EAGE;EACA;EACA;EACA;;AAGF;EAKE;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACC;EAGD;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAaF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EA5BF;EACA;EACA;EACA;EACA;EACA;EACA;;AA0BA;EAhCA;EACA;EACA;EACA;EACA;EACA;EACA;;AAsEF;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAIF;EACE;EACA;;AACA;EACE;EACA;;AAMJ;EACE;EACA;;AAGF;EACE;EACA;;;AHhOF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA","file":"elbe.css"}
+{"version":3,"sourceRoot":"","sources":["../style/elbe.scss","../style/_base.scss","../style/_flex.scss","../style/_components.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAOQ;AAMR;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAIF;AC3DA;AAoBA;AA6DA;AAUA;AAaA;AA8BA;AC9GA;AAqBA;AAYA;AAkBA;AAqBA;AC2GA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AFzMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAMF;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;;AAGF;AAAA;EAEE;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAEF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAKF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAOF;EACE;;AAGF;EAEE;EACA;EACA;;AAKF;AAAA;EAEE;;AAEF;AAAA;AAAA;AAAA;EAEE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IACE;;;ACpJJ;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAIA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAMJ;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;;AClHF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAoBJ;EACE;EACA;EACA;;AAGF;EAGE;EACA;EACA;EACA;;AAGF;EAKE;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACC;EAGD;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAKD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAaF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EA5BF;EACA;EACA;EACA;EACA;EACA;EACA;;AA0BA;EAhCA;EACA;EACA;EACA;EACA;EACA;EACA;;AAsEF;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAIF;EACE;EACA;;AACA;EACE;EACA;;AAMJ;EACE;EACA;;AAGF;EACE;EACA;;;AHhOF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA","file":"elbe.css"}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from "./ui/components/button/choose_button";
 export * from "./ui/components/button/icon_button";
 export * from "./ui/components/button/toggle_button";
 export * from "./ui/components/layout/flex";
+export * from "./ui/components/layout/header";
 export * from "./ui/components/layout/scaffold";
 export * from "./ui/components/layout/scroll";
 export * from "./ui/components/layout/spaced";

package/dist/index.js

@@ -16,6 +16,7 @@ export * from "./ui/components/button/choose_button";
 export * from "./ui/components/button/icon_button";
 export * from "./ui/components/button/toggle_button";
 export * from "./ui/components/layout/flex";
+export * from "./ui/components/layout/header";
 export * from "./ui/components/layout/scaffold";
 export * from "./ui/components/layout/scroll";
 export * from "./ui/components/layout/spaced";

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

@@ -0,0 +1,19 @@
+import { JSX } from "preact/jsx-runtime";
+export type HeaderParams = {
+    title?: string;
+    back?: null | "close" | "back" | JSX.Element;
+    actions?: any;
+    _absolute?: boolean;
+};
+/**
+ * Header is a layout component that provides a header for a page.
+ * It is used to create a consistent header for pages.
+ * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
+ * @param title - The title of the page.
+ * @param actions - The actions to show on the right side of the header.
+ * @param children - The children to show in the header. If children are provided, the title is ignored.
+ */
+export declare function Header({ back, title, actions, _absolute, children, height, }: HeaderParams & {
+    children?: any;
+    height?: number;
+}): JSX.Element;

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+import { IconButton, Icons, Row, Text } from "../../..";
+/**
+ * Header is a layout component that provides a header for a page.
+ * It is used to create a consistent header for pages.
+ * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
+ * @param title - The title of the page.
+ * @param actions - The actions to show on the right side of the header.
+ * @param children - The children to show in the header. If children are provided, the title is ignored.
+ */
+export function Header({ back, title, actions, _absolute, children, height = 4, }) {
+    // if the icon is a type of back, we have to hide it if there is no history
+    if (typeof back === "string" &&
+        ["back", "close"].includes(back) &&
+        history.length == 0) {
+        back = null;
+    }
+    const goBack = () => history.go(-1);
+    const [isScrolled, setIsScrolled] = useState(false);
+    useEffect(() => {
+        const _handle = () => setIsScrolled(window.scrollY > 0);
+        window.addEventListener("scroll", _handle);
+        return () => {
+            window.removeEventListener("scroll", _handle);
+        };
+    }, []);
+    return (_jsxs("div", { children: [_jsx("div", { style: { height: `${height}rem` } }), _jsxs("div", { class: "header", style: {
+                    height: `${height}rem`,
+                    borderColor: isScrolled
+                        ? "color-mix(in srgb, var(--c-context-border) 40%, transparent)"
+                        : "transparent",
+                    position: _absolute ? "absolute" : "fixed",
+                }, children: [back ? (typeof back !== "string" ? (back) : (_jsx(IconButton.plain, { icon: back === "back" ? Icons.ArrowLeft : Icons.X, onTap: goBack }))) : null, children ? children : _jsx(_PageCenteredTitle, { text: title || "" }), actions ? (_jsx(Row, { gap: 0.5, main: "end", children: actions })) : null] })] }));
+}
+function _PageCenteredTitle({ text }) {
+    return _jsx(Text.h5, { v: text, class: "flex-1", align: "center" });
+    /* CENTER TO PAGE:
+    return (
+      <div class="flex-1" style={{ height: "0rem" }}>
+        <div
+          style={{
+            position: "absolute",
+            left: "50%",
+            transform: "translateX(-50%) translateY(-50%)",
+          }}
+        >
+          <Text.h5 v={text} align="center" />
+        </div>
+      </div>
+    );*/
+}

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

@@ -1,19 +1,5 @@
-import { JSX } from "preact/jsx-runtime";
 import { type ElbeColorSchemes } from "../../..";
-type HeaderParams = {
-    title?: string;
-    back?: null | "close" | "back" | JSX.Element;
-    actions?: any;
-    _absolute?: boolean;
-};
-/**
- * Header is a layout component that provides a header for a page.
- * It is used to create a consistent header for pages.
- * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
- * @param title - The title of the page.
- * @param actions - The actions to show on the right side of the header.
- */
-export declare function Header({ back, title, actions, _absolute }: HeaderParams): JSX.Element;
+import { HeaderParams } from "./header";
 /**
  * Scaffold is a layout component that provides a header and a content area.
  * It is used to create a consistent layout for pages.
@@ -26,5 +12,4 @@ export declare function Scaffold({ children, baseLimited, gap, padded, scheme, s
     scheme?: ElbeColorSchemes;
     scroll?: boolean;
     height?: number;
-} & HeaderParams): JSX.Element;
-export {};
+} & HeaderParams): import("preact").JSX.Element;

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

@@ -10,40 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useEffect, useState } from "preact/hooks";
-import { classString, Icons, Text } from "../../..";
-import { IconButton } from "../button/icon_button";
-import { Column, Row } from "./flex";
-/**
- * Header is a layout component that provides a header for a page.
- * It is used to create a consistent header for pages.
- * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
- * @param title - The title of the page.
- * @param actions - The actions to show on the right side of the header.
- */
-export function Header({ back, title, actions, _absolute }) {
-    // if the icon is a type of back, we have to hide it if there is no history
-    if (typeof back === "string" &&
-        ["back", "close"].includes(back) &&
-        history.length == 0) {
-        back = null;
-    }
-    const goBack = () => history.go(-1);
-    const [isScrolled, setIsScrolled] = useState(false);
-    useEffect(() => {
-        const _handle = () => setIsScrolled(window.scrollY > 0);
-        window.addEventListener("scroll", _handle);
-        return () => {
-            window.removeEventListener("scroll", _handle);
-        };
-    }, []);
-    return (_jsxs("div", { children: [_jsx("div", { style: "height: 4.5rem" }), _jsxs("div", { class: "header", style: {
-                    borderColor: isScrolled
-                        ? "color-mix(in srgb, var(--c-context-border) 40%, transparent)"
-                        : "transparent",
-                    position: _absolute ? "absolute" : "fixed",
-                }, children: [_jsx("div", { class: "flex-1", children: back ? (typeof back !== "string" ? (back) : (_jsx(IconButton.plain, { icon: back === "back" ? Icons.ArrowLeft : Icons.X, onTap: goBack }))) : null }), _jsx(Text.h4, { v: title }), _jsx(Row, { class: "flex-1", gap: 0.5, main: "end", children: actions })] })] }));
-}
+import { classString } from "../../..";
+import { Column } from "./flex";
+import { Header } from "./header";
 /**
  * Scaffold is a layout component that provides a header and a content area.
  * It is used to create a consistent layout for pages.

package/dist/ui/components/text.js

@@ -21,7 +21,7 @@ export class Text extends React.Component {
         const _a = this.props, { align, bold, italic, underline, striked, color, size, children, variant, v } = _a, elbe = __rest(_a, ["align", "bold", "italic", "underline", "striked", "color", "size", "children", "variant", "v"]);
         return (_jsxs("span", Object.assign({}, applyProps(elbe, [
             "text",
-            align,
+            //align,
             bold && "b",
             italic && "i",
             underline && "underline",
@@ -32,6 +32,7 @@ export class Text extends React.Component {
             fontSize: size ? `${size}rem` : "",
             color: color || "",
             scrollMarginTop: "2rem",
+            textAlign: align,
         }), { children: [v, children] })));
     }
 }

package/dist/ui/theme/theme.d.ts

@@ -23,7 +23,7 @@ export declare function ElbeTheme(p: {
     dark?: boolean;
     todoOverlay?: boolean;
 } & ({
-    seed: ElbeThemeSeed;
-} | {
     theme: ElbeThemeData;
+} | {
+    seed?: ElbeThemeSeed;
 })): import("preact").JSX.Element;

package/dist/ui/theme/theme.js

@@ -23,6 +23,7 @@ export class ElbeThemeData {
     }
 }
 export function ElbeTheme(p) {
-    const theme = "seed" in p ? ElbeThemeData.fromSeed(p.seed) : p.theme;
+    var _a;
+    const theme = "theme" in p ? p.theme : ElbeThemeData.fromSeed((_a = p.seed) !== null && _a !== void 0 ? _a : {});
     return (_jsxs("div", { class: `elbe ${p.dark ? "dark" : ""}`, children: [p.todoOverlay && _jsx(ToDo.Overlay, {}), _jsx("style", { children: theme.asCss() }), p.children] }));
 }

package/package.json

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