elbe-ui 0.2.44 → 0.2.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/elbe.css +1 -2
  2. package/dist/elbe.css.map +1 -1
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +2 -0
  5. package/dist/ui/components/base/box.d.ts +37 -40
  6. package/dist/ui/components/base/box.js +1 -1
  7. package/dist/ui/components/base/padded.d.ts +10 -9
  8. package/dist/ui/components/base/padded.js +7 -6
  9. package/dist/ui/components/dev/todo.d.ts +18 -0
  10. package/dist/ui/components/dev/todo.js +69 -0
  11. package/dist/ui/components/layout/flex.d.ts +4 -3
  12. package/dist/ui/components/layout/flex.js +7 -7
  13. package/dist/ui/components/layout/header.d.ts +19 -0
  14. package/dist/ui/components/layout/header.js +52 -0
  15. package/dist/ui/components/layout/scaffold.d.ts +6 -19
  16. package/dist/ui/components/layout/scaffold.js +12 -35
  17. package/dist/ui/components/text.js +2 -1
  18. package/dist/ui/theme/theme.d.ts +3 -2
  19. package/dist/ui/theme/theme.js +4 -2
  20. package/dist/ui/util/toast.js +7 -1
  21. package/dist/ui/util/util.d.ts +1 -0
  22. package/dist/ui/util/util.js +4 -0
  23. package/package.json +3 -2
package/dist/elbe.css CHANGED
@@ -465,13 +465,12 @@ body,
465
465
  border-width: 20px;
466
466
  border-style: solid;
467
467
  border-width: 0 0 2px 0;
468
- padding: 0 0.75rem;
468
+ padding: 0 0.5rem;
469
469
  background-color: color-mix(in srgb, var(--c-context-back) 50%, transparent);
470
470
  backdrop-filter: blur(10px);
471
471
  -webkit-backdrop-filter: blur(10px);
472
472
  z-index: 20;
473
473
  box-sizing: border-box;
474
- height: 4.5rem;
475
474
  justify-content: space-between;
476
475
  align-items: center;
477
476
  }
package/dist/elbe.css.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -13,6 +13,7 @@ export * from "./ui/components/button/choose_button";
13
13
  export * from "./ui/components/button/icon_button";
14
14
  export * from "./ui/components/button/toggle_button";
15
15
  export * from "./ui/components/layout/flex";
16
+ export * from "./ui/components/layout/header";
16
17
  export * from "./ui/components/layout/scaffold";
17
18
  export * from "./ui/components/layout/scroll";
18
19
  export * from "./ui/components/layout/spaced";
@@ -26,6 +27,7 @@ export * from "./ui/components/dialog";
26
27
  export * from "./ui/components/error_view";
27
28
  export * from "./ui/components/spinner";
28
29
  export * from "./ui/components/text";
30
+ export * from "./ui/components/dev/todo";
29
31
  export * from "./ui/theme/theme";
30
32
  declare function None({}: {}): import("preact").JSX.Element;
31
33
  export declare const Icons: {
package/dist/index.js CHANGED
@@ -16,6 +16,7 @@ export * from "./ui/components/button/choose_button";
16
16
  export * from "./ui/components/button/icon_button";
17
17
  export * from "./ui/components/button/toggle_button";
18
18
  export * from "./ui/components/layout/flex";
19
+ export * from "./ui/components/layout/header";
19
20
  export * from "./ui/components/layout/scaffold";
20
21
  export * from "./ui/components/layout/scroll";
21
22
  export * from "./ui/components/layout/spaced";
@@ -29,6 +30,7 @@ export * from "./ui/components/dialog";
29
30
  export * from "./ui/components/error_view";
30
31
  export * from "./ui/components/spinner";
31
32
  export * from "./ui/components/text";
33
+ export * from "./ui/components/dev/todo";
32
34
  export * from "./ui/theme/theme";
33
35
  function None({}) {
34
36
  return _jsx("div", { style: { width: "1.5rem", height: "1.5rem" } });
package/dist/ui/components/base/box.d.ts CHANGED
@@ -6,16 +6,23 @@ export type ElbeProps = {
6
6
  class?: string;
7
7
  style?: React.CSSProperties;
8
8
  tooltip?: string;
9
+ flex?: boolean | number;
10
+ typeLabel?: string;
9
11
  };
10
12
  export declare function applyProps(p: ElbeProps, classes?: string | null | (string | false | null | undefined)[], style?: React.CSSProperties): {
13
+ "data-type": string | undefined;
11
14
  "data-tooltip"?: string | undefined;
12
15
  id: string | undefined;
13
16
  class: string;
14
17
  style: {
15
- [x: string]: string | number | null | undefined;
16
- [x: number]: string | number | null | undefined;
18
+ flex?: string | number | null | undefined;
17
19
  cssText?: string | null;
18
20
  [Symbol.iterator]?: string | number | null | undefined;
21
+ clipPath?: string | number | null | undefined;
22
+ filter?: string | number | null | undefined;
23
+ marker?: string | number | null | undefined;
24
+ mask?: string | number | null | undefined;
25
+ font?: string | number | null | undefined;
19
26
  border?: string | number | null | undefined;
20
27
  accentColor?: string | number | null | undefined;
21
28
  alignContent?: string | number | null | undefined;
@@ -122,7 +129,6 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
122
129
  caretColor?: string | number | null | undefined;
123
130
  clear?: string | number | null | undefined;
124
131
  clip?: string | number | null | undefined;
125
- clipPath?: string | number | null | undefined;
126
132
  clipRule?: string | number | null | undefined;
127
133
  color?: string | number | null | undefined;
128
134
  colorInterpolation?: string | number | null | undefined;
@@ -164,8 +170,6 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
164
170
  fill?: string | number | null | undefined;
165
171
  fillOpacity?: string | number | null | undefined;
166
172
  fillRule?: string | number | null | undefined;
167
- filter?: string | number | null | undefined;
168
- flex?: string | number | null | undefined;
169
173
  flexBasis?: string | number | null | undefined;
170
174
  flexDirection?: string | number | null | undefined;
171
175
  flexFlow?: string | number | null | undefined;
@@ -175,7 +179,6 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
175
179
  float?: string | number | null | undefined;
176
180
  floodColor?: string | number | null | undefined;
177
181
  floodOpacity?: string | number | null | undefined;
178
- font?: string | number | null | undefined;
179
182
  fontFamily?: string | number | null | undefined;
180
183
  fontFeatureSettings?: string | number | null | undefined;
181
184
  fontKerning?: string | number | null | undefined;
@@ -256,11 +259,9 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
256
259
  marginLeft?: string | number | null | undefined;
257
260
  marginRight?: string | number | null | undefined;
258
261
  marginTop?: string | number | null | undefined;
259
- marker?: string | number | null | undefined;
260
262
  markerEnd?: string | number | null | undefined;
261
263
  markerMid?: string | number | null | undefined;
262
264
  markerStart?: string | number | null | undefined;
263
- mask?: string | number | null | undefined;
264
265
  maskClip?: string | number | null | undefined;
265
266
  maskComposite?: string | number | null | undefined;
266
267
  maskImage?: string | number | null | undefined;
@@ -526,14 +527,19 @@ export declare class Box extends Component<ElbeBoxProps & {
526
527
  scheme: ElbeColorSchemes;
527
528
  }> {
528
529
  static primary: (p: ElbeBoxProps) => import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
530
+ "data-type": string | undefined;
529
531
  "data-tooltip"?: string | undefined;
530
532
  id: string | undefined;
531
533
  class: string;
532
534
  style: {
533
- [x: string]: string | number | null | undefined;
534
- [x: number]: string | number | null | undefined;
535
+ flex?: string | number | null | undefined;
535
536
  cssText?: string | null;
536
537
  [Symbol.iterator]?: string | number | null | undefined;
538
+ clipPath?: string | number | null | undefined;
539
+ filter?: string | number | null | undefined;
540
+ marker?: string | number | null | undefined;
541
+ mask?: string | number | null | undefined;
542
+ font?: string | number | null | undefined;
537
543
  border?: string | number | null | undefined;
538
544
  accentColor?: string | number | null | undefined;
539
545
  alignContent?: string | number | null | undefined;
@@ -640,7 +646,6 @@ export declare class Box extends Component<ElbeBoxProps & {
640
646
  caretColor?: string | number | null | undefined;
641
647
  clear?: string | number | null | undefined;
642
648
  clip?: string | number | null | undefined;
643
- clipPath?: string | number | null | undefined;
644
649
  clipRule?: string | number | null | undefined;
645
650
  color?: string | number | null | undefined;
646
651
  colorInterpolation?: string | number | null | undefined;
@@ -682,8 +687,6 @@ export declare class Box extends Component<ElbeBoxProps & {
682
687
  fill?: string | number | null | undefined;
683
688
  fillOpacity?: string | number | null | undefined;
684
689
  fillRule?: string | number | null | undefined;
685
- filter?: string | number | null | undefined;
686
- flex?: string | number | null | undefined;
687
690
  flexBasis?: string | number | null | undefined;
688
691
  flexDirection?: string | number | null | undefined;
689
692
  flexFlow?: string | number | null | undefined;
@@ -693,7 +696,6 @@ export declare class Box extends Component<ElbeBoxProps & {
693
696
  float?: string | number | null | undefined;
694
697
  floodColor?: string | number | null | undefined;
695
698
  floodOpacity?: string | number | null | undefined;
696
- font?: string | number | null | undefined;
697
699
  fontFamily?: string | number | null | undefined;
698
700
  fontFeatureSettings?: string | number | null | undefined;
699
701
  fontKerning?: string | number | null | undefined;
@@ -774,11 +776,9 @@ export declare class Box extends Component<ElbeBoxProps & {
774
776
  marginLeft?: string | number | null | undefined;
775
777
  marginRight?: string | number | null | undefined;
776
778
  marginTop?: string | number | null | undefined;
777
- marker?: string | number | null | undefined;
778
779
  markerEnd?: string | number | null | undefined;
779
780
  markerMid?: string | number | null | undefined;
780
781
  markerStart?: string | number | null | undefined;
781
- mask?: string | number | null | undefined;
782
782
  maskClip?: string | number | null | undefined;
783
783
  maskComposite?: string | number | null | undefined;
784
784
  maskImage?: string | number | null | undefined;
@@ -1035,14 +1035,19 @@ export declare class Box extends Component<ElbeBoxProps & {
1035
1035
  };
1036
1036
  }>;
1037
1037
  static secondary: (p: ElbeBoxProps) => import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
1038
+ "data-type": string | undefined;
1038
1039
  "data-tooltip"?: string | undefined;
1039
1040
  id: string | undefined;
1040
1041
  class: string;
1041
1042
  style: {
1042
- [x: string]: string | number | null | undefined;
1043
- [x: number]: string | number | null | undefined;
1043
+ flex?: string | number | null | undefined;
1044
1044
  cssText?: string | null;
1045
1045
  [Symbol.iterator]?: string | number | null | undefined;
1046
+ clipPath?: string | number | null | undefined;
1047
+ filter?: string | number | null | undefined;
1048
+ marker?: string | number | null | undefined;
1049
+ mask?: string | number | null | undefined;
1050
+ font?: string | number | null | undefined;
1046
1051
  border?: string | number | null | undefined;
1047
1052
  accentColor?: string | number | null | undefined;
1048
1053
  alignContent?: string | number | null | undefined;
@@ -1149,7 +1154,6 @@ export declare class Box extends Component<ElbeBoxProps & {
1149
1154
  caretColor?: string | number | null | undefined;
1150
1155
  clear?: string | number | null | undefined;
1151
1156
  clip?: string | number | null | undefined;
1152
- clipPath?: string | number | null | undefined;
1153
1157
  clipRule?: string | number | null | undefined;
1154
1158
  color?: string | number | null | undefined;
1155
1159
  colorInterpolation?: string | number | null | undefined;
@@ -1191,8 +1195,6 @@ export declare class Box extends Component<ElbeBoxProps & {
1191
1195
  fill?: string | number | null | undefined;
1192
1196
  fillOpacity?: string | number | null | undefined;
1193
1197
  fillRule?: string | number | null | undefined;
1194
- filter?: string | number | null | undefined;
1195
- flex?: string | number | null | undefined;
1196
1198
  flexBasis?: string | number | null | undefined;
1197
1199
  flexDirection?: string | number | null | undefined;
1198
1200
  flexFlow?: string | number | null | undefined;
@@ -1202,7 +1204,6 @@ export declare class Box extends Component<ElbeBoxProps & {
1202
1204
  float?: string | number | null | undefined;
1203
1205
  floodColor?: string | number | null | undefined;
1204
1206
  floodOpacity?: string | number | null | undefined;
1205
- font?: string | number | null | undefined;
1206
1207
  fontFamily?: string | number | null | undefined;
1207
1208
  fontFeatureSettings?: string | number | null | undefined;
1208
1209
  fontKerning?: string | number | null | undefined;
@@ -1283,11 +1284,9 @@ export declare class Box extends Component<ElbeBoxProps & {
1283
1284
  marginLeft?: string | number | null | undefined;
1284
1285
  marginRight?: string | number | null | undefined;
1285
1286
  marginTop?: string | number | null | undefined;
1286
- marker?: string | number | null | undefined;
1287
1287
  markerEnd?: string | number | null | undefined;
1288
1288
  markerMid?: string | number | null | undefined;
1289
1289
  markerStart?: string | number | null | undefined;
1290
- mask?: string | number | null | undefined;
1291
1290
  maskClip?: string | number | null | undefined;
1292
1291
  maskComposite?: string | number | null | undefined;
1293
1292
  maskImage?: string | number | null | undefined;
@@ -1544,14 +1543,19 @@ export declare class Box extends Component<ElbeBoxProps & {
1544
1543
  };
1545
1544
  }>;
1546
1545
  static inverse: (p: ElbeBoxProps) => import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
1546
+ "data-type": string | undefined;
1547
1547
  "data-tooltip"?: string | undefined;
1548
1548
  id: string | undefined;
1549
1549
  class: string;
1550
1550
  style: {
1551
- [x: string]: string | number | null | undefined;
1552
- [x: number]: string | number | null | undefined;
1551
+ flex?: string | number | null | undefined;
1553
1552
  cssText?: string | null;
1554
1553
  [Symbol.iterator]?: string | number | null | undefined;
1554
+ clipPath?: string | number | null | undefined;
1555
+ filter?: string | number | null | undefined;
1556
+ marker?: string | number | null | undefined;
1557
+ mask?: string | number | null | undefined;
1558
+ font?: string | number | null | undefined;
1555
1559
  border?: string | number | null | undefined;
1556
1560
  accentColor?: string | number | null | undefined;
1557
1561
  alignContent?: string | number | null | undefined;
@@ -1658,7 +1662,6 @@ export declare class Box extends Component<ElbeBoxProps & {
1658
1662
  caretColor?: string | number | null | undefined;
1659
1663
  clear?: string | number | null | undefined;
1660
1664
  clip?: string | number | null | undefined;
1661
- clipPath?: string | number | null | undefined;
1662
1665
  clipRule?: string | number | null | undefined;
1663
1666
  color?: string | number | null | undefined;
1664
1667
  colorInterpolation?: string | number | null | undefined;
@@ -1700,8 +1703,6 @@ export declare class Box extends Component<ElbeBoxProps & {
1700
1703
  fill?: string | number | null | undefined;
1701
1704
  fillOpacity?: string | number | null | undefined;
1702
1705
  fillRule?: string | number | null | undefined;
1703
- filter?: string | number | null | undefined;
1704
- flex?: string | number | null | undefined;
1705
1706
  flexBasis?: string | number | null | undefined;
1706
1707
  flexDirection?: string | number | null | undefined;
1707
1708
  flexFlow?: string | number | null | undefined;
@@ -1711,7 +1712,6 @@ export declare class Box extends Component<ElbeBoxProps & {
1711
1712
  float?: string | number | null | undefined;
1712
1713
  floodColor?: string | number | null | undefined;
1713
1714
  floodOpacity?: string | number | null | undefined;
1714
- font?: string | number | null | undefined;
1715
1715
  fontFamily?: string | number | null | undefined;
1716
1716
  fontFeatureSettings?: string | number | null | undefined;
1717
1717
  fontKerning?: string | number | null | undefined;
@@ -1792,11 +1792,9 @@ export declare class Box extends Component<ElbeBoxProps & {
1792
1792
  marginLeft?: string | number | null | undefined;
1793
1793
  marginRight?: string | number | null | undefined;
1794
1794
  marginTop?: string | number | null | undefined;
1795
- marker?: string | number | null | undefined;
1796
1795
  markerEnd?: string | number | null | undefined;
1797
1796
  markerMid?: string | number | null | undefined;
1798
1797
  markerStart?: string | number | null | undefined;
1799
- mask?: string | number | null | undefined;
1800
1798
  maskClip?: string | number | null | undefined;
1801
1799
  maskComposite?: string | number | null | undefined;
1802
1800
  maskImage?: string | number | null | undefined;
@@ -2053,14 +2051,19 @@ export declare class Box extends Component<ElbeBoxProps & {
2053
2051
  };
2054
2052
  }>;
2055
2053
  render(): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
2054
+ "data-type": string | undefined;
2056
2055
  "data-tooltip"?: string | undefined;
2057
2056
  id: string | undefined;
2058
2057
  class: string;
2059
2058
  style: {
2060
- [x: string]: string | number | null | undefined;
2061
- [x: number]: string | number | null | undefined;
2059
+ flex?: string | number | null | undefined;
2062
2060
  cssText?: string | null;
2063
2061
  [Symbol.iterator]?: string | number | null | undefined;
2062
+ clipPath?: string | number | null | undefined;
2063
+ filter?: string | number | null | undefined;
2064
+ marker?: string | number | null | undefined;
2065
+ mask?: string | number | null | undefined;
2066
+ font?: string | number | null | undefined;
2064
2067
  border?: string | number | null | undefined;
2065
2068
  accentColor?: string | number | null | undefined;
2066
2069
  alignContent?: string | number | null | undefined;
@@ -2167,7 +2170,6 @@ export declare class Box extends Component<ElbeBoxProps & {
2167
2170
  caretColor?: string | number | null | undefined;
2168
2171
  clear?: string | number | null | undefined;
2169
2172
  clip?: string | number | null | undefined;
2170
- clipPath?: string | number | null | undefined;
2171
2173
  clipRule?: string | number | null | undefined;
2172
2174
  color?: string | number | null | undefined;
2173
2175
  colorInterpolation?: string | number | null | undefined;
@@ -2209,8 +2211,6 @@ export declare class Box extends Component<ElbeBoxProps & {
2209
2211
  fill?: string | number | null | undefined;
2210
2212
  fillOpacity?: string | number | null | undefined;
2211
2213
  fillRule?: string | number | null | undefined;
2212
- filter?: string | number | null | undefined;
2213
- flex?: string | number | null | undefined;
2214
2214
  flexBasis?: string | number | null | undefined;
2215
2215
  flexDirection?: string | number | null | undefined;
2216
2216
  flexFlow?: string | number | null | undefined;
@@ -2220,7 +2220,6 @@ export declare class Box extends Component<ElbeBoxProps & {
2220
2220
  float?: string | number | null | undefined;
2221
2221
  floodColor?: string | number | null | undefined;
2222
2222
  floodOpacity?: string | number | null | undefined;
2223
- font?: string | number | null | undefined;
2224
2223
  fontFamily?: string | number | null | undefined;
2225
2224
  fontFeatureSettings?: string | number | null | undefined;
2226
2225
  fontKerning?: string | number | null | undefined;
@@ -2301,11 +2300,9 @@ export declare class Box extends Component<ElbeBoxProps & {
2301
2300
  marginLeft?: string | number | null | undefined;
2302
2301
  marginRight?: string | number | null | undefined;
2303
2302
  marginTop?: string | number | null | undefined;
2304
- marker?: string | number | null | undefined;
2305
2303
  markerEnd?: string | number | null | undefined;
2306
2304
  markerMid?: string | number | null | undefined;
2307
2305
  markerStart?: string | number | null | undefined;
2308
- mask?: string | number | null | undefined;
2309
2306
  maskClip?: string | number | null | undefined;
2310
2307
  maskComposite?: string | number | null | undefined;
2311
2308
  maskImage?: string | number | null | undefined;
package/dist/ui/components/base/box.js CHANGED
@@ -15,7 +15,7 @@ export function applyProps(p, classes, style) {
15
15
  if (Array.isArray(classes)) {
16
16
  classes = classes.filter((c) => c).join(" ");
17
17
  }
18
- return Object.assign({ id: p.id, class: `${classes || ""} ${p.class || ""}`, style: Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), ((_a = p.style) !== null && _a !== void 0 ? _a : {})) }, (p.tooltip ? { ["data-tooltip"]: p.tooltip } : {}));
18
+ return Object.assign(Object.assign({ id: p.id, class: `${classes || ""} ${p.class || ""}`, style: Object.assign(Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), ((_a = p.style) !== null && _a !== void 0 ? _a : {})), (p.flex ? { flex: p.flex === true ? 1 : p.flex } : {})) }, (p.tooltip ? { ["data-tooltip"]: p.tooltip } : {})), { ["data-type"]: p.typeLabel });
19
19
  }
20
20
  export class Box extends Component {
21
21
  render() {
package/dist/ui/components/base/padded.d.ts CHANGED
@@ -1,18 +1,19 @@
1
1
  import React from "preact/compat";
2
- export type PaddedProps = {
2
+ import { ElbeProps } from "./box";
3
+ export type PaddedProps = ElbeProps & {
3
4
  children: any;
4
5
  };
5
6
  export declare class Padded extends React.Component<PaddedProps & {
6
- top: number;
7
- right: number;
8
- bottom: number;
9
- left: number;
7
+ top?: number;
8
+ right?: number;
9
+ bottom?: number;
10
+ left?: number;
10
11
  }> {
11
12
  constructor(props: PaddedProps & {
12
- top: number;
13
- right: number;
14
- bottom: number;
15
- left: number;
13
+ top?: number;
14
+ right?: number;
15
+ bottom?: number;
16
+ left?: number;
16
17
  });
17
18
  static all: ({ amount, ...p }: PaddedProps & {
18
19
  amount: number;
package/dist/ui/components/base/padded.js CHANGED
@@ -11,17 +11,18 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  };
12
12
  import { jsx as _jsx } from "preact/jsx-runtime";
13
13
  import React from "preact/compat";
14
+ import { applyProps } from "./box";
14
15
  export class Padded extends React.Component {
15
16
  constructor(props) {
16
17
  super(props);
17
18
  }
18
19
  render() {
19
- return (_jsx("div", { style: {
20
- paddingTop: `${this.props.top}rem`,
21
- paddingRight: `${this.props.right}rem`,
22
- paddingBottom: `${this.props.bottom}rem`,
23
- paddingLeft: `${this.props.left}rem`,
24
- }, children: this.props.children }));
20
+ return (_jsx("div", Object.assign({}, applyProps(this.props, [], {
21
+ paddingTop: `${this.props.top || 0}rem`,
22
+ paddingRight: `${this.props.right || 0}rem`,
23
+ paddingBottom: `${this.props.bottom || 0}rem`,
24
+ paddingLeft: `${this.props.left || 0}rem`,
25
+ }), { children: this.props.children })));
25
26
  }
26
27
  }
27
28
  Padded.all = (_a) => {
package/dist/ui/components/dev/todo.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { ElbeProps } from "../base/box";
2
+ export declare namespace ToDo {
3
+ function Overlay({}: {}): import("preact").JSX.Element | null;
4
+ function Inline({ msg, ...elbe }: {
5
+ msg: string;
6
+ width?: number;
7
+ height?: number;
8
+ } & ElbeProps): import("preact").JSX.Element;
9
+ function Block({ msg, width, height, ...elbe }: {
10
+ msg: string;
11
+ width?: number;
12
+ height?: number;
13
+ } & ElbeProps): import("preact").JSX.Element;
14
+ function Placeholder({ width, height, ...elbe }: {
15
+ width?: number;
16
+ height?: number;
17
+ } & ElbeProps): import("preact").JSX.Element;
18
+ }
package/dist/ui/components/dev/todo.js ADDED
@@ -0,0 +1,69 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
13
+ import { XIcon } from "lucide-react";
14
+ import { useEffect, useState } from "preact/hooks";
15
+ import { applyProps } from "../base/box";
16
+ const _toDoStyle = {
17
+ padding: ".3rem .5rem",
18
+ borderRadius: ".3rem",
19
+ background: "#880070",
20
+ color: "white",
21
+ fontSize: ".8rem",
22
+ };
23
+ export var ToDo;
24
+ (function (ToDo) {
25
+ function Overlay({}) {
26
+ const [todos, setTodos] = useState(0);
27
+ useEffect(() => {
28
+ const e = document.querySelectorAll('[data-type="todo"], [data-type="placeholder"]');
29
+ setTodos(e.length);
30
+ }, []);
31
+ return todos == 0 ? null : (_jsxs("div", { ["data-type"]: "todo-overlay", style: {
32
+ position: "fixed",
33
+ bottom: "0",
34
+ right: "0",
35
+ padding: ".6rem",
36
+ margin: ".5rem",
37
+ marginRight: 0,
38
+ background: _toDoStyle.background,
39
+ color: _toDoStyle.color,
40
+ boxShadow: "0 .125rem 1rem rgba(0,0,0,.6)",
41
+ fontSize: ".8rem",
42
+ borderRadius: ".5rem 0 0 .5rem",
43
+ display: "flex",
44
+ alignItems: "center",
45
+ gap: ".4rem",
46
+ }, children: [_jsx(XIcon, { height: "1.2rem", onClick: () => setTodos(0) }), _jsxs("span", { children: [_jsxs("b", { children: [todos, " ToDos"] }), " on this page"] })] }));
47
+ }
48
+ ToDo.Overlay = Overlay;
49
+ function Inline(_a) {
50
+ var { msg } = _a, elbe = __rest(_a, ["msg"]);
51
+ return (_jsxs("div", Object.assign({}, applyProps(Object.assign(Object.assign({}, elbe), { typeLabel: "todo" }), [], Object.assign(Object.assign({}, _toDoStyle), { display: "inline" })), { children: [_jsx("b", { children: "ToDo: " }), _jsx("span", { style: { fontWeight: "normal" }, children: msg })] })));
52
+ }
53
+ ToDo.Inline = Inline;
54
+ function Block(_a) {
55
+ var { msg, width, height } = _a, elbe = __rest(_a, ["msg", "width", "height"]);
56
+ return (_jsx("div", Object.assign({}, applyProps(Object.assign(Object.assign({}, elbe), { typeLabel: "todo" }), [], Object.assign(Object.assign({}, _toDoStyle), { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: width ? width + "rem" : "auto", height: height ? height + "rem" : "auto", overflow: "hidden" })), { children: _jsxs("span", { children: [_jsx("b", { children: "ToDo: " }), _jsx("span", { style: { fontWeight: "normal" }, children: msg })] }) })));
57
+ }
58
+ ToDo.Block = Block;
59
+ function Placeholder(_a) {
60
+ var { width, height } = _a, elbe = __rest(_a, ["width", "height"]);
61
+ return (_jsx("div", Object.assign({}, applyProps(Object.assign(Object.assign({}, elbe), { typeLabel: "placeholder" }), [], {
62
+ padding: "0",
63
+ width: width ? width + "rem" : "auto",
64
+ height: height ? height + "rem" : "auto",
65
+ overflow: "hidden",
66
+ }), { children: _jsxs("svg", { width: width ? width + "rem" : "100%", height: height ? height + "rem" : "100%", preserveAspectRatio: "none", children: [_jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "transparent", stroke: _toDoStyle.background, strokeWidth: ".25rem" }), _jsx("line", { x1: "0", y1: "0", x2: "100%", y2: "100%", stroke: _toDoStyle.background, strokeWidth: ".125rem" }), _jsx("line", { x1: "100%", y1: "0", x2: "0", y2: "100%", stroke: _toDoStyle.background, strokeWidth: ".125rem" })] }) })));
67
+ }
68
+ ToDo.Placeholder = Placeholder;
69
+ })(ToDo || (ToDo = {}));
package/dist/ui/components/layout/flex.d.ts CHANGED
@@ -2,10 +2,11 @@ import { type ElbeProps } from "../base/box";
2
2
  export type FlexProps = {
3
3
  children: any;
4
4
  gap?: number;
5
- stretch?: boolean;
6
5
  main?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
7
6
  cross?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
8
7
  } & ElbeProps;
9
8
  export declare function FlexSpace({}: {}): import("preact").JSX.Element;
10
- export declare function Column({ gap, main, cross, stretch, children, ...p }: FlexProps): import("preact").JSX.Element;
11
- export declare function Row({ gap, main, cross, stretch, children, ...p }: FlexProps): import("preact").JSX.Element;
9
+ export declare function Column({ gap, main, cross, children, ...p }: FlexProps): import("preact").JSX.Element;
10
+ export declare function Row({ gap, main, cross, wrap, children, ...p }: FlexProps & {
11
+ wrap?: boolean;
12
+ }): import("preact").JSX.Element;
package/dist/ui/components/layout/flex.js CHANGED
@@ -15,17 +15,17 @@ export function FlexSpace({}) {
15
15
  return _jsx("div", { style: "flex:1" });
16
16
  }
17
17
  export function Column(_a) {
18
- var { gap = 1, main = "start", cross = "stretch", stretch = false, children } = _a, p = __rest(_a, ["gap", "main", "cross", "stretch", "children"]);
19
- return _Flex(false, { gap, main, cross, stretch, children }, p);
18
+ var { gap = 1, main = "start", cross = "stretch", children } = _a, p = __rest(_a, ["gap", "main", "cross", "children"]);
19
+ return _Flex(false, { gap, main, cross, children }, p, false);
20
20
  }
21
21
  export function Row(_a) {
22
- var { gap = 1, main = "start", cross, stretch = false, children } = _a, p = __rest(_a, ["gap", "main", "cross", "stretch", "children"]);
23
- return _Flex(true, { gap, main, cross, stretch, children }, p);
22
+ var { gap = 1, main = "start", cross, wrap = false, children } = _a, p = __rest(_a, ["gap", "main", "cross", "wrap", "children"]);
23
+ return _Flex(true, { gap, main, cross, children }, p, wrap);
24
24
  }
25
- function _Flex(row, p, elbe) {
26
- return (_jsx("div", Object.assign({}, applyProps(elbe, row ? "row" : "column", {
25
+ function _Flex(row, p, elbe, wraps) {
26
+ return (_jsx("div", Object.assign({}, applyProps(elbe, [row ? "row" : "column", wraps && "wrap"], {
27
27
  justifyContent: p.main,
28
- alignItems: p.cross || (p.stretch ? "stretch" : "center"),
28
+ alignItems: p.cross,
29
29
  gap: `${p.gap}rem`,
30
30
  }), { children: p.children })));
31
31
  }
package/dist/ui/components/layout/header.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { JSX } from "preact/jsx-runtime";
2
+ export type HeaderParams = {
3
+ title?: string;
4
+ back?: null | "close" | "back" | JSX.Element;
5
+ actions?: any;
6
+ _absolute?: boolean;
7
+ };
8
+ /**
9
+ * Header is a layout component that provides a header for a page.
10
+ * It is used to create a consistent header for pages.
11
+ * @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.
12
+ * @param title - The title of the page.
13
+ * @param actions - The actions to show on the right side of the header.
14
+ * @param children - The children to show in the header. If children are provided, the title is ignored.
15
+ */
16
+ export declare function Header({ back, title, actions, _absolute, children, height, }: HeaderParams & {
17
+ children?: any;
18
+ height?: number;
19
+ }): JSX.Element;
package/dist/ui/components/layout/header.js ADDED
@@ -0,0 +1,52 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
2
+ import { useEffect, useState } from "preact/hooks";
3
+ import { IconButton, Icons, Row, Text } from "../../..";
4
+ /**
5
+ * Header is a layout component that provides a header for a page.
6
+ * It is used to create a consistent header for pages.
7
+ * @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.
8
+ * @param title - The title of the page.
9
+ * @param actions - The actions to show on the right side of the header.
10
+ * @param children - The children to show in the header. If children are provided, the title is ignored.
11
+ */
12
+ export function Header({ back, title, actions, _absolute, children, height = 4, }) {
13
+ // if the icon is a type of back, we have to hide it if there is no history
14
+ if (typeof back === "string" &&
15
+ ["back", "close"].includes(back) &&
16
+ history.length == 0) {
17
+ back = null;
18
+ }
19
+ const goBack = () => history.go(-1);
20
+ const [isScrolled, setIsScrolled] = useState(false);
21
+ useEffect(() => {
22
+ const _handle = () => setIsScrolled(window.scrollY > 0);
23
+ window.addEventListener("scroll", _handle);
24
+ return () => {
25
+ window.removeEventListener("scroll", _handle);
26
+ };
27
+ }, []);
28
+ return (_jsxs("div", { children: [_jsx("div", { style: { height: `${height}rem` } }), _jsxs("div", { class: "header", style: {
29
+ height: `${height}rem`,
30
+ borderColor: isScrolled
31
+ ? "color-mix(in srgb, var(--c-context-border) 40%, transparent)"
32
+ : "transparent",
33
+ position: _absolute ? "absolute" : "fixed",
34
+ }, 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] })] }));
35
+ }
36
+ function _PageCenteredTitle({ text }) {
37
+ return _jsx(Text.h5, { v: text, class: "flex-1", align: "center" });
38
+ /* CENTER TO PAGE:
39
+ return (
40
+ <div class="flex-1" style={{ height: "0rem" }}>
41
+ <div
42
+ style={{
43
+ position: "absolute",
44
+ left: "50%",
45
+ transform: "translateX(-50%) translateY(-50%)",
46
+ }}
47
+ >
48
+ <Text.h5 v={text} align="center" />
49
+ </div>
50
+ </div>
51
+ );*/
52
+ }
package/dist/ui/components/layout/scaffold.d.ts CHANGED
@@ -1,28 +1,15 @@
1
- import { JSX } from "preact/jsx-runtime";
2
1
  import { type ElbeColorSchemes } from "../../..";
3
- type HeaderParams = {
4
- title?: string;
5
- back: null | "close" | "back" | JSX.Element;
6
- actions?: any;
7
- limitedHeight?: number;
8
- };
9
- /**
10
- * Header is a layout component that provides a header for a page.
11
- * It is used to create a consistent header for pages.
12
- * @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.
13
- * @param title - The title of the page.
14
- * @param actions - The actions to show on the right side of the header.
15
- */
16
- export declare function Header({ back, title, actions, limitedHeight }: HeaderParams): JSX.Element;
2
+ import { HeaderParams } from "./header";
17
3
  /**
18
4
  * Scaffold is a layout component that provides a header and a content area.
19
5
  * It is used to create a consistent layout for pages.
20
6
  */
21
- export declare function Scaffold({ children, limited, gap, padded, scheme, ...header }: {
22
- limited?: boolean;
7
+ export declare function Scaffold({ children, baseLimited, gap, padded, scheme, scroll, height, ...header }: {
8
+ baseLimited?: boolean;
23
9
  children: any;
24
10
  gap?: number;
25
11
  padded?: boolean;
26
12
  scheme?: ElbeColorSchemes;
27
- } & HeaderParams): JSX.Element;
28
- export {};
13
+ scroll?: boolean;
14
+ height?: number;
15
+ } & HeaderParams): import("preact").JSX.Element;
package/dist/ui/components/layout/scaffold.js CHANGED
@@ -10,45 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
13
- import { useEffect, useState } from "preact/hooks";
14
- import { Icons, Text } from "../../..";
15
- import { IconButton } from "../button/icon_button";
16
- import { Column, Row } from "./flex";
17
- /**
18
- * Header is a layout component that provides a header for a page.
19
- * It is used to create a consistent header for pages.
20
- * @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.
21
- * @param title - The title of the page.
22
- * @param actions - The actions to show on the right side of the header.
23
- */
24
- export function Header({ back, title, actions, limitedHeight }) {
25
- if (history.length == 0)
26
- back = null;
27
- const goBack = () => history.go(-1);
28
- const [isScrolled, setIsScrolled] = useState(false);
29
- useEffect(() => {
30
- const _handle = () => setIsScrolled(window.scrollY > 0);
31
- window.addEventListener("scroll", _handle);
32
- return () => {
33
- window.removeEventListener("scroll", _handle);
34
- };
35
- }, []);
36
- return (_jsxs("div", { children: [_jsx("div", { style: "height: 4.5rem" }), _jsxs("div", { class: "header", style: {
37
- borderColor: isScrolled
38
- ? "color-mix(in srgb, var(--c-context-border) 40%, transparent)"
39
- : "transparent",
40
- position: limitedHeight ? "absolute" : "fixed",
41
- }, 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 })] })] }));
42
- }
13
+ import { classString } from "../../..";
14
+ import { Column } from "./flex";
15
+ import { Header } from "./header";
43
16
  /**
44
17
  * Scaffold is a layout component that provides a header and a content area.
45
18
  * It is used to create a consistent layout for pages.
46
19
  */
47
20
  export function Scaffold(_a) {
48
- var { children, limited = false, gap = 1, padded = true, scheme } = _a, header = __rest(_a, ["children", "limited", "gap", "padded", "scheme"]);
49
- return (_jsxs(Column, { cross: "stretch", gap: 0, class: `${scheme !== null && scheme !== void 0 ? scheme : "primary"}`, style: {
50
- overflowY: header.limitedHeight ? "scroll" : null,
51
- maxHeight: header.limitedHeight ? `${header.limitedHeight}rem` : null,
21
+ var { children, baseLimited = false, gap = 1, padded = true, scheme, scroll = false, height } = _a, header = __rest(_a, ["children", "baseLimited", "gap", "padded", "scheme", "scroll", "height"]);
22
+ return (_jsxs(Column, { cross: "stretch", gap: 0, typeLabel: "Scaffold", class: `${scheme !== null && scheme !== void 0 ? scheme : "primary"}`, style: {
23
+ overflowY: height ? "scroll" : null,
24
+ height: height ? `${height}rem` : scroll ? null : "100vh",
52
25
  //height: header.limitToParent ? "100px" : null,
53
- }, children: [_jsx(Header, Object.assign({}, header)), _jsx("div", { class: `${padded ? "padded" : ""} ${limited ? "base-limited" : ""}`, children: _jsx(Column, { cross: "stretch", gap: gap !== null && gap !== void 0 ? gap : 1, children: children }) })] }));
26
+ }, children: [_jsx(Header, Object.assign({}, header, { _absolute: height ? true : false })), _jsx("div", { class: classString([
27
+ !scroll && "flex-1",
28
+ padded && "padded",
29
+ baseLimited && "base-limited",
30
+ ]), children: _jsx(Column, { cross: "stretch", style: { height: scroll ? null : "100%" }, gap: gap !== null && gap !== void 0 ? gap : 1, children: children }) })] }));
54
31
  }
package/dist/ui/components/text.js CHANGED
@@ -21,7 +21,7 @@ export class Text extends React.Component {
21
21
  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"]);
22
22
  return (_jsxs("span", Object.assign({}, applyProps(elbe, [
23
23
  "text",
24
- align,
24
+ //align,
25
25
  bold && "b",
26
26
  italic && "i",
27
27
  underline && "underline",
@@ -32,6 +32,7 @@ export class Text extends React.Component {
32
32
  fontSize: size ? `${size}rem` : "",
33
33
  color: color || "",
34
34
  scrollMarginTop: "2rem",
35
+ textAlign: align,
35
36
  }), { children: [v, children] })));
36
37
  }
37
38
  }
package/dist/ui/theme/theme.d.ts CHANGED
@@ -21,8 +21,9 @@ export declare class ElbeThemeData {
21
21
  export declare function ElbeTheme(p: {
22
22
  children: any;
23
23
  dark?: boolean;
24
+ todoOverlay?: boolean;
24
25
  } & ({
25
- seed: ElbeThemeSeed;
26
- } | {
27
26
  theme: ElbeThemeData;
27
+ } | {
28
+ seed?: ElbeThemeSeed;
28
29
  })): import("preact").JSX.Element;
package/dist/ui/theme/theme.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
2
+ import { ToDo } from "../components/dev/todo";
2
3
  import { ColorTheme } from "./colors";
3
4
  import { GeometryTheme } from "./geometry_theme";
4
5
  import { TypeTheme } from "./type_theme";
@@ -22,6 +23,7 @@ export class ElbeThemeData {
22
23
  }
23
24
  }
24
25
  export function ElbeTheme(p) {
25
- const theme = "seed" in p ? ElbeThemeData.fromSeed(p.seed) : p.theme;
26
- return (_jsxs("div", { class: `elbe ${p.dark ? "dark" : ""}`, children: [_jsx("style", { children: theme.asCss() }), p.children] }));
26
+ var _a;
27
+ const theme = "theme" in p ? p.theme : ElbeThemeData.fromSeed((_a = p.seed) !== null && _a !== void 0 ? _a : {});
28
+ return (_jsxs("div", { class: `elbe ${p.dark ? "dark" : ""}`, children: [p.todoOverlay && _jsx(ToDo.Overlay, {}), _jsx("style", { children: theme.asCss() }), p.children] }));
27
29
  }
package/dist/ui/util/toast.js CHANGED
@@ -3,11 +3,17 @@
3
3
  * @param message the message to show
4
4
  */
5
5
  export function showToast(message) {
6
+ // find the 'elbe' element
7
+ const elbe = document.querySelector(".elbe");
8
+ if (!elbe) {
9
+ console.warn("could not show toast, no base element with '.elbe' found");
10
+ return;
11
+ }
6
12
  const toast = document.createElement("div");
7
13
  toast.classList.add("toast");
8
14
  toast.classList.add("inverse");
9
15
  toast.innerText = message;
10
- document.body.appendChild(toast);
16
+ elbe.appendChild(toast);
11
17
  setTimeout(() => {
12
18
  toast.remove();
13
19
  }, 3000);
package/dist/ui/util/util.d.ts CHANGED
@@ -2,6 +2,7 @@ import type React from "preact/compat";
2
2
  export type ElbeChild = React.ReactNode;
3
3
  export type ElbeChildren = ElbeChild[] | ElbeChild;
4
4
  export declare function clamp(value: number, min: number, max: number): number;
5
+ export declare function classString(classes: (string | false | null | undefined)[]): string;
5
6
  /**
6
7
  * use the web share api if available, otherwise copy the data to the clipboard
7
8
  * @param data the data you want to share
package/dist/ui/util/util.js CHANGED
@@ -2,6 +2,10 @@ import { showToast } from "./toast";
2
2
  export function clamp(value, min, max) {
3
3
  return Math.min(Math.max(value, min), max);
4
4
  }
5
+ export function classString(classes) {
6
+ console.log(classes);
7
+ return classes.filter((c) => c).join(" ");
8
+ }
5
9
  /**
6
10
  * use the web share api if available, otherwise copy the data to the clipboard
7
11
  * @param data the data you want to share
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "elbe-ui",
3
- "version": "0.2.44",
3
+ "version": "0.2.51",
4
4
  "author": "Robin Naumann",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -21,7 +21,8 @@
21
21
  "build:ts": "tsc",
22
22
  "build:dts": "tsc --declaration",
23
23
  "build:css": "sass -q style/elbe.scss dist/elbe.css",
24
- "build": "rm -rf ./dist && bun run build:ts && bun run build:dts && bun run build:css",
24
+ "build": "rm -rf ./dist && bun run build:ts && bun run build:dts && bun run build:css && (cd example && npm run prep)",
25
+ "dev": "bun run build && (cd example && bun run dev)",
25
26
  "pub": "bun run build && npm publish"
26
27
  },
27
28
  "devDependencies": {