elbe-ui 0.4.15 → 0.4.18

package/dist/api/api_worker.d.ts

@@ -15,7 +15,10 @@ export interface PostArgs extends GetArgs {
  */
 export declare class ApiWorker {
     private apiURL;
-    constructor(apiURL: string);
+    private o?;
+    constructor(apiURL: string, o?: {
+        credentials?: "omit" | "include" | "same-origin";
+    } | undefined);
     private _fetch;
     get(path: string, args?: GetArgs): Promise<any>;
     post(path: string, args: PostArgs): Promise<any>;

package/dist/api/api_worker.js

@@ -14,11 +14,13 @@ const _noArgs = {};
  * to use it, you must first call `ApiService.init(apiURL)` with the base URL of your API.
  */
 export class ApiWorker {
-    constructor(apiURL) {
+    constructor(apiURL, o) {
         this.apiURL = apiURL;
+        this.o = o;
     }
     _fetch(p_1, method_1, _a) {
         return __awaiter(this, arguments, void 0, function* (p, method, { path, query, body }) {
+            var _b, _c;
             try {
                 p = path
                     ? p.replace(/:([a-zA-Z0-9_]+)/g, (m, p1) => {
@@ -32,7 +34,7 @@ export class ApiWorker {
                 const queryStr = query != null ? "?" + new URLSearchParams(query).toString() : "";
                 const response = yield fetch(this.apiURL + p + queryStr, {
                     method,
-                    credentials: "include",
+                    credentials: (_c = (_b = this.o) === null || _b === void 0 ? void 0 : _b.credentials) !== null && _c !== void 0 ? _c : "same-origin",
                     headers: { "Content-Type": "application/json" },
                     body: body ? JSON.stringify(body) : undefined,
                 });

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.15",
+  "version": "0.4.18",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {