elbe-ui 0.4.16 → 0.4.18

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export * from "./ui/components/layout/alignment";
 export * from "./ui/components/layout/app_base";
 export * from "./ui/components/layout/flex";
 export * from "./ui/components/layout/header";
+export * from "./ui/components/layout/page";
 export * from "./ui/components/layout/scroll";
 export * from "./ui/components/layout/spaced";
 export * from "./ui/components/input/checkbox";

package/dist/index.js

@@ -25,6 +25,7 @@ export * from "./ui/components/layout/alignment";
 export * from "./ui/components/layout/app_base";
 export * from "./ui/components/layout/flex";
 export * from "./ui/components/layout/header";
+export * from "./ui/components/layout/page";
 export * from "./ui/components/layout/scroll";
 export * from "./ui/components/layout/spaced";
 export * from "./ui/components/input/checkbox";

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

@@ -5,12 +5,13 @@ export type HeaderLogos = {
     endLogo?: string | ElbeChild;
     endLogoDark?: string | ElbeChild;
 };
-export declare function Header(p: HeaderLogos & {
+export type HeaderProps = HeaderLogos & {
     leading?: ElbeChild | "back" | "close";
     title: string | ElbeChild;
     centerTitle?: boolean;
     actions?: ElbeChild[];
-}): import("preact").JSX.Element;
+};
+export declare function Header(p: HeaderProps): import("preact").JSX.Element;
 export declare function BackButton(p: {
     onTap: () => void;
 }): import("preact").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { ElbeChild, ElbeChildren } from "../../util/types";
+import { HeaderProps } from "./header";
+type ContentBaseProps = {
+    padding?: number;
+    narrow?: boolean;
+};
+/**
+ * A component that represents a full page layout with a header and footer.
+ * It accepts header properties, content, and a footer element. All of these
+ * (except the children) are optional.
+ *
+ * ### Properties:
+ * - `narrow` will limit the width of the content to `900px`, and center it.
+ * - `padding` will add padding around the content, defaulting to `1rem`.
+ */
+export declare function Page(p: HeaderProps & ContentBaseProps & {
+    children: ElbeChildren;
+    footer: ElbeChild;
+}): import("preact").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+import { Column } from "../../..";
+import { Box } from "../base/box";
+import { Header } from "./header";
+/**
+ * A component that represents a full page layout with a header and footer.
+ * It accepts header properties, content, and a footer element. All of these
+ * (except the children) are optional.
+ *
+ * ### Properties:
+ * - `narrow` will limit the width of the content to `900px`, and center it.
+ * - `padding` will add padding around the content, defaulting to `1rem`.
+ */
+export function Page(p) {
+    const [hasHeader, setHasHeader] = useState(false);
+    useEffect(() => {
+        const headerProps = Object.assign({}, p);
+        delete headerProps.children;
+        delete headerProps.footer;
+        delete headerProps.padding;
+        delete headerProps.narrow;
+        setHasHeader(Object.keys(headerProps).length > 0);
+    });
+    return (_jsxs(Box, { scheme: "primary", typeLabel: "page", style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            minHeight: "100vh",
+        }, children: [hasHeader && _jsx(Header, Object.assign({}, p)), _jsx(_ContentBase, { padding: p.padding, narrow: p.narrow, children: p.children }), p.footer] }));
+}
+function _ContentBase(p) {
+    return (_jsx(Column, { style: {
+            flex: 1,
+            padding: p.padding ? `${p.padding}rem` : "1rem",
+            width: p.narrow ? "min(100%, 900px)" : "auto",
+            margin: p.narrow ? "0 auto" : "0",
+        }, children: p.children }));
+}

package/package.json

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