elbe-ui 0.2.22 → 0.2.26

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export * from "./ui/components/input/input_field";
 export * from "./ui/components/input/range";
 export * from "./ui/components/input/select";
 export * from "./ui/components/padded";
+export * from "./ui/components/scaffold";
 export * from "./ui/components/spinner";
 export * from "./ui/components/text";
 export * from "./ui/components/toggle_button";

package/dist/index.js

@@ -17915,8 +17915,8 @@ function _ElbeErr(msg) {
 }
 
 // src/ui/components/button.tsx
-var _btn = function({ colorStyle, onTap, icon, message, ...elbe }, colorManner) {
-  return message || icon ? u4("button", {
+var _btn = function({ colorStyle, onTap, icon, label, ...elbe }, colorManner) {
+  return label || icon ? u4("button", {
     ...applyProps(elbe, [
       "row",
       "main-center",
@@ -17930,8 +17930,8 @@ var _btn = function({ colorStyle, onTap, icon, message, ...elbe }, colorManner)
     onClick: () => onTap && onTap(),
     children: [
       typeof icon === "function" ? icon({}) : icon,
-      message && u4("span", {
-        children: message
+      label && u4("span", {
+        children: label
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this) : _ElbeErr("Button requires either an icon or a message");
@@ -18032,7 +18032,7 @@ function FlexSpace({}) {
 function Column({
   gap = 1,
   main = "start",
-  cross,
+  cross = "stretch",
   stretch = false,
   children,
   ...p6
@@ -18288,6 +18288,76 @@ class Padded extends Rn.Component {
     }, undefined, false, undefined, this);
   }
 }
+// src/ui/components/scaffold.tsx
+function Header({ back, title, actions }) {
+  if (history.length == 0)
+    back = null;
+  const goBack = () => history.go(-1);
+  const [isScrolledTop, setIsScrolled] = h2(false);
+  y2(() => {
+    const _handle = () => setIsScrolled(window.scrollY > 0);
+    window.addEventListener("scroll", _handle);
+    return () => {
+      window.removeEventListener("scroll", _handle);
+    };
+  }, []);
+  return u4("div", {
+    children: [
+      u4("div", {
+        style: "height: 4.5rem"
+      }, undefined, false, undefined, this),
+      u4("div", {
+        class: "header",
+        style: isScrolledTop ? "" : "border-color: transparent",
+        children: [
+          u4("div", {
+            class: "flex-1",
+            children: back === "close" ? u4(IconButton.integrated, {
+              icon: Icons.X,
+              onTap: goBack
+            }, undefined, false, undefined, this) : back === "back" ? u4(IconButton.integrated, {
+              icon: Icons.ArrowLeft,
+              onTap: goBack
+            }, undefined, false, undefined, this) : null
+          }, undefined, false, undefined, this),
+          u4(Text2.h4, {
+            v: title
+          }, undefined, false, undefined, this),
+          u4(Row, {
+            class: "flex-1",
+            gap: 0.5,
+            main: "end",
+            children: actions
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function Scaffold({
+  children,
+  limited = false,
+  gap = 1,
+  ...header
+}) {
+  return u4(Column, {
+    cross: "stretch",
+    gap: 0,
+    children: [
+      u4(Header, {
+        ...header
+      }, undefined, false, undefined, this),
+      u4("div", {
+        class: `padded ${limited ? "base-limited" : ""}`,
+        children: u4(Column, {
+          cross: "stretch",
+          gap: gap ?? 1,
+          children
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 // src/ui/components/text.tsx
 class Text2 extends Rn.Component {
   static h1 = (p6) => u4(Text2, {
@@ -18486,12 +18556,14 @@ export {
   Spinner,
   Spaced,
   Select,
+  Scaffold,
   Row,
   Range,
   ProvideBit,
   Padded,
   Icons,
   IconButton,
+  Header,
   FlexSpace,
   Field,
   ElbeDialog,

package/dist/ui/components/button.d.ts

@@ -7,10 +7,10 @@ export type ButtonProps = ElbeProps & {
     onTap?: () => void;
 } & ({
     icon?: IconChild;
-    message: string;
+    label: string;
 } | {
     icon: IconChild;
-    message?: string;
+    label?: string;
 });
 export declare class Button extends React.Component<ButtonProps & {
     colorManner: ElbeColorManners;

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

@@ -0,0 +1,23 @@
+type HeaderParams = {
+    title?: string;
+    back: null | "close" | "back";
+    actions?: any;
+};
+/**
+ * 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 }: HeaderParams): import("preact/compat").JSX.Element;
+/**
+ * Scaffold is a layout component that provides a header and a content area.
+ * It is used to create a consistent layout for pages.
+ */
+export declare function Scaffold({ children, limited, gap, ...header }: {
+    limited?: boolean;
+    children: any;
+    gap?: number;
+} & HeaderParams): import("preact/compat").JSX.Element;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elbe-ui",
   "type": "module",
-  "version": "0.2.22",
+  "version": "0.2.26",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {

package/src/ui/components/button.tsx

@@ -8,10 +8,10 @@ export type ButtonProps = ElbeProps & {
   colorStyle?: ElbeColorStyles;
   onTap?: () => void;
 } & (
-    | { icon?: IconChild; message: string }
+    | { icon?: IconChild; label: string }
     | {
         icon: IconChild;
-        message?: string;
+        label?: string;
       }
   );
 
@@ -31,10 +31,10 @@ export class Button extends React.Component<
 }
 
 function _btn(
-  { colorStyle, onTap, icon, message, ...elbe }: ButtonProps,
+  { colorStyle, onTap, icon, label, ...elbe }: ButtonProps,
   colorManner: ElbeColorManners
 ) {
-  return message || icon ? (
+  return label || icon ? (
     <button
       {...applyProps(
         elbe,
@@ -53,7 +53,7 @@ function _btn(
       onClick={() => onTap && onTap()}
     >
       {typeof icon === "function" ? icon({}) : icon}
-      {message && <span>{message}</span>}
+      {label && <span>{label}</span>}
     </button>
   ) : (
     _ElbeErr("Button requires either an icon or a message")

package/style/color_style.scss

@@ -1,12 +1,13 @@
+@use "sass:color";
+@function cPart($c, $part) {@return color.channel($c, $part, $space: rgb)}
+
+@function cHumanGray($c) {
+  @return calc(((cPart($c, "red") * 299) + (cPart($c,"green") * 587) + (cPart($c,"blue") * 114)) / 1000);
+}
+
 @function contrast($colorA, $colorB) {
-  $yiqA: calc(
-    ((red($colorA) * 299) + (green($colorA) * 587) + (blue($colorA) * 114)) /
-      1000
-  );
-  $yiqB: calc(
-    ((red($colorB) * 299) + (green($colorB) * 587) + (blue($colorB) * 114)) /
-      1000
-  );
+  $yiqA: cHumanGray($colorA);
+  $yiqB: cHumanGray($colorB);
   @return abs($yiqA - $yiqB);
 }