elbe-ui 1.0.7 → 2.0.0
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.
- package/dist/elbe.css +150 -562
- package/dist/elbe.css.map +1 -1
- package/dist/index.d.ts +188 -46
- package/dist/index.js +8 -6
- package/dist/ui/app/app.d.ts +12 -0
- package/dist/ui/{components/layout/app_base.js → app/app.js} +24 -31
- package/dist/ui/app/app_ctxt.d.ts +35 -0
- package/dist/ui/app/app_ctxt.js +10 -0
- package/dist/ui/components/badge.d.ts +3 -3
- package/dist/ui/components/badge.js +16 -5
- package/dist/ui/components/banner.d.ts +3 -3
- package/dist/ui/components/banner.js +1 -1
- package/dist/ui/components/base/box.d.ts +82 -35
- package/dist/ui/components/base/box.js +56 -8
- package/dist/ui/components/base/card.d.ts +11 -12
- package/dist/ui/components/base/card.js +36 -19
- package/dist/ui/components/base/padded.d.ts +2 -4
- package/dist/ui/components/base/state_builder.d.ts +9 -0
- package/dist/ui/components/base/state_builder.js +33 -0
- package/dist/ui/components/button/button.d.ts +8 -6
- package/dist/ui/components/button/button.js +27 -16
- package/dist/ui/components/button/choose_button.d.ts +5 -3
- package/dist/ui/components/button/choose_button.js +9 -6
- package/dist/ui/components/button/icon_button.d.ts +6 -5
- package/dist/ui/components/button/icon_button.js +33 -23
- package/dist/ui/components/button/toggle_button.d.ts +5 -5
- package/dist/ui/components/button/toggle_button.js +13 -7
- package/dist/ui/components/dialog/dialog.d.ts +13 -0
- package/dist/ui/components/dialog/dialog.js +69 -0
- package/dist/ui/components/dialog/dialog_ctx.d.ts +34 -0
- package/dist/ui/components/dialog/dialog_ctx.js +44 -0
- package/dist/ui/components/dialog/dialogs/_alert.d.ts +7 -0
- package/dist/ui/components/dialog/dialogs/_alert.js +9 -0
- package/dist/ui/components/dialog/dialogs/_confirm.d.ts +9 -0
- package/dist/ui/components/dialog/dialogs/_confirm.js +21 -0
- package/dist/ui/components/error_view.js +3 -3
- package/dist/ui/components/footer.js +7 -7
- package/dist/ui/components/input/_labeled_input.d.ts +21 -0
- package/dist/ui/components/input/_labeled_input.js +21 -0
- package/dist/ui/components/input/checkbox.d.ts +4 -2
- package/dist/ui/components/input/checkbox.js +16 -8
- package/dist/ui/components/input/range.d.ts +5 -3
- package/dist/ui/components/input/range.js +20 -13
- package/dist/ui/components/input/select.d.ts +4 -3
- package/dist/ui/components/input/select.js +13 -40
- package/dist/ui/components/input/switch.d.ts +4 -2
- package/dist/ui/components/input/switch.js +30 -40
- package/dist/ui/components/input/text/input_field.d.ts +14 -19
- package/dist/ui/components/input/text/input_field.js +63 -61
- package/dist/ui/components/input/text/single_line.d.ts +11 -9
- package/dist/ui/components/input/text/single_line.js +15 -21
- package/dist/ui/components/layout/flex.d.ts +7 -3
- package/dist/ui/components/layout/flex.js +15 -12
- package/dist/ui/components/layout/header.d.ts +2 -2
- package/dist/ui/components/layout/header.js +25 -18
- package/dist/ui/components/layout/menu.js +74 -49
- package/dist/ui/components/layout/scroll.d.ts +1 -0
- package/dist/ui/components/layout/scroll.js +3 -1
- package/dist/ui/components/layout/toolbar.js +9 -6
- package/dist/ui/components/link.d.ts +4 -2
- package/dist/ui/components/link.js +24 -11
- package/dist/ui/components/progress_bar.d.ts +2 -2
- package/dist/ui/components/progress_bar.js +12 -9
- package/dist/ui/components/spinner.d.ts +2 -7
- package/dist/ui/components/spinner.js +15 -16
- package/dist/ui/components/text.d.ts +5 -6
- package/dist/ui/components/text.js +34 -21
- package/dist/ui/components/tooltip.d.ts +5 -0
- package/dist/ui/components/tooltip.js +48 -0
- package/dist/ui/theme/subthemes/_theme_geometry.d.ts +9 -0
- package/dist/ui/theme/subthemes/_theme_geometry.js +22 -0
- package/dist/ui/theme/subthemes/_theme_menu.d.ts +9 -0
- package/dist/ui/theme/subthemes/_theme_menu.js +12 -0
- package/dist/ui/theme/subthemes/_theme_motion.d.ts +9 -0
- package/dist/ui/theme/subthemes/_theme_motion.js +13 -0
- package/dist/ui/theme/subthemes/_theme_toast.d.ts +8 -0
- package/dist/ui/theme/subthemes/_theme_toast.js +11 -0
- package/dist/ui/theme/subthemes/_theme_type.d.ts +49 -0
- package/dist/ui/theme/subthemes/_theme_type.js +73 -0
- package/dist/ui/theme/subthemes/color/_seed.d.ts +2 -0
- package/dist/ui/theme/subthemes/color/_seed.js +105 -0
- package/dist/ui/theme/subthemes/color/_theme_color.d.ts +865 -0
- package/dist/ui/theme/subthemes/color/_theme_color.js +83 -0
- package/dist/ui/theme/subthemes/color/colors/_color_contrast.d.ts +284 -0
- package/dist/ui/theme/subthemes/color/colors/_color_contrast.js +17 -0
- package/dist/ui/theme/subthemes/color/colors/_color_kind.d.ts +242 -0
- package/dist/ui/theme/subthemes/color/colors/_color_kind.js +45 -0
- package/dist/ui/theme/subthemes/color/colors/_color_layer.d.ts +226 -0
- package/dist/ui/theme/subthemes/color/colors/_color_layer.js +95 -0
- package/dist/ui/theme/subthemes/color/colors/_color_manner.d.ts +280 -0
- package/dist/ui/theme/subthemes/color/colors/_color_manner.js +17 -0
- package/dist/ui/theme/subthemes/color/colors/_color_mode.d.ts +269 -0
- package/dist/ui/theme/subthemes/color/colors/_color_mode.js +16 -0
- package/dist/ui/theme/subthemes/color/colors/_color_rgba.d.ts +166 -0
- package/dist/ui/theme/subthemes/color/colors/_color_rgba.js +86 -0
- package/dist/ui/theme/subthemes/color/colors/_color_scheme.d.ts +256 -0
- package/dist/ui/theme/subthemes/color/colors/_color_scheme.js +17 -0
- package/dist/ui/theme/subthemes/color/colors/_color_state.d.ts +252 -0
- package/dist/ui/theme/subthemes/color/colors/_color_state.js +49 -0
- package/dist/ui/theme/subthemes/color/colors/_colordef.d.ts +22 -0
- package/dist/ui/theme/subthemes/color/colors/_colordef.js +34 -0
- package/dist/ui/theme/subthemes/color/colors/colors.d.ts +511 -0
- package/dist/ui/theme/subthemes/color/colors/colors.js +24 -0
- package/dist/ui/theme/theme.d.ts +984 -30
- package/dist/ui/theme/theme.js +14 -82
- package/dist/ui/theme/theme_context.d.ts +15 -17
- package/dist/ui/theme/theme_context.js +79 -18
- package/dist/ui/util/_util.d.ts +1 -0
- package/dist/ui/util/_util.js +3 -0
- package/dist/ui/util/error_view.js +3 -3
- package/dist/ui/util/merge_deep.d.ts +1 -0
- package/dist/ui/util/merge_deep.js +18 -0
- package/dist/ui/util/root.d.ts +17 -0
- package/dist/ui/util/root.js +23 -0
- package/dist/ui/util/toast/_toast.d.ts +5 -0
- package/dist/ui/util/toast/_toast.js +7 -0
- package/dist/ui/util/toast/toast_ctx.d.ts +28 -0
- package/dist/ui/util/toast/toast_ctx.js +62 -0
- package/dist/ui/util/toast/toast_legacy.d.ts +5 -0
- package/dist/ui/util/{toast.js → toast/toast_legacy.js} +4 -4
- package/dist/ui/util/util.d.ts +8 -0
- package/dist/ui/util/util.js +54 -1
- package/package.json +10 -8
- package/dist/ui/components/dialog.d.ts +0 -9
- package/dist/ui/components/dialog.js +0 -32
- package/dist/ui/components/layout/app_base.d.ts +0 -15
- package/dist/ui/components/layout/ctx_app_base.d.ts +0 -19
- package/dist/ui/components/layout/ctx_app_base.js +0 -12
- package/dist/ui/theme/color_theme.d.ts +0 -2
- package/dist/ui/theme/color_theme.js +0 -92
- package/dist/ui/theme/colors.d.ts +0 -133
- package/dist/ui/theme/colors.js +0 -309
- package/dist/ui/theme/geometry_theme.d.ts +0 -16
- package/dist/ui/theme/geometry_theme.js +0 -28
- package/dist/ui/theme/seed.d.ts +0 -53
- package/dist/ui/theme/seed.js +0 -4
- package/dist/ui/theme/type_theme.d.ts +0 -38
- package/dist/ui/theme/type_theme.js +0 -73
- package/dist/ui/util/confirm_dialog.d.ts +0 -10
- package/dist/ui/util/confirm_dialog.js +0 -46
- package/dist/ui/util/toast.d.ts +0 -5
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
interface TypeStyle {
|
|
2
|
-
bold?: boolean;
|
|
3
|
-
italic?: boolean;
|
|
4
|
-
underline?: boolean;
|
|
5
|
-
family: string[];
|
|
6
|
-
size: number;
|
|
7
|
-
}
|
|
8
|
-
export type ElbeTypeVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body-l" | "body-m" | "body-s" | "code";
|
|
9
|
-
export declare const tVariants: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "body-l", "body-m", "body-s", "code"];
|
|
10
|
-
export type VariantSelector<T> = (style: TypeStyle, variant: T) => TypeStyle;
|
|
11
|
-
export interface TypeThemeSeed {
|
|
12
|
-
/**
|
|
13
|
-
* the base style for headings. Refers to h1
|
|
14
|
-
*/
|
|
15
|
-
heading: TypeStyle;
|
|
16
|
-
body: TypeStyle;
|
|
17
|
-
code: TypeStyle;
|
|
18
|
-
headingVariants: VariantSelector<2 | 3 | 4 | 5 | 6>;
|
|
19
|
-
bodyVariants: VariantSelector<"s" | "l">;
|
|
20
|
-
}
|
|
21
|
-
export declare class TypeTheme {
|
|
22
|
-
h1: TypeStyle;
|
|
23
|
-
h2: TypeStyle;
|
|
24
|
-
h3: TypeStyle;
|
|
25
|
-
h4: TypeStyle;
|
|
26
|
-
h5: TypeStyle;
|
|
27
|
-
h6: TypeStyle;
|
|
28
|
-
bodyL: TypeStyle;
|
|
29
|
-
body: TypeStyle;
|
|
30
|
-
bodyS: TypeStyle;
|
|
31
|
-
code: TypeStyle;
|
|
32
|
-
constructor(h1: TypeStyle, h2: TypeStyle, h3: TypeStyle, h4: TypeStyle, h5: TypeStyle, h6: TypeStyle, bodyL: TypeStyle, body: TypeStyle, bodyS: TypeStyle, code: TypeStyle);
|
|
33
|
-
private get headers();
|
|
34
|
-
asCss(): string;
|
|
35
|
-
static generate(seed?: Partial<TypeThemeSeed>): TypeTheme;
|
|
36
|
-
}
|
|
37
|
-
export declare function typeThemePreset(merge?: Partial<TypeThemeSeed>): TypeThemeSeed;
|
|
38
|
-
export {};
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
export const tVariants = [
|
|
2
|
-
"h1",
|
|
3
|
-
"h2",
|
|
4
|
-
"h3",
|
|
5
|
-
"h4",
|
|
6
|
-
"h5",
|
|
7
|
-
"h6",
|
|
8
|
-
"body-l",
|
|
9
|
-
"body-m",
|
|
10
|
-
"body-s",
|
|
11
|
-
"code",
|
|
12
|
-
];
|
|
13
|
-
function _typeStyleAsCss(t) {
|
|
14
|
-
return (`font-family: ${t.family};\n` +
|
|
15
|
-
`font-size: ${t.size}rem;\n` +
|
|
16
|
-
`font-weight: ${t.bold ? "bold" : "normal"};\n` +
|
|
17
|
-
`font-style: ${t.italic ? "italic" : "normal"};\n` +
|
|
18
|
-
`text-decoration: ${t.underline ? "underline" : "none"};\n`);
|
|
19
|
-
}
|
|
20
|
-
export class TypeTheme {
|
|
21
|
-
constructor(h1, h2, h3, h4, h5, h6, bodyL, body, bodyS, code) {
|
|
22
|
-
this.h1 = h1;
|
|
23
|
-
this.h2 = h2;
|
|
24
|
-
this.h3 = h3;
|
|
25
|
-
this.h4 = h4;
|
|
26
|
-
this.h5 = h5;
|
|
27
|
-
this.h6 = h6;
|
|
28
|
-
this.bodyL = bodyL;
|
|
29
|
-
this.body = body;
|
|
30
|
-
this.bodyS = bodyS;
|
|
31
|
-
this.code = code;
|
|
32
|
-
}
|
|
33
|
-
get headers() {
|
|
34
|
-
return [this.h1, this.h2, this.h3, this.h4, this.h5, this.h6];
|
|
35
|
-
}
|
|
36
|
-
asCss() {
|
|
37
|
-
return (this.headers
|
|
38
|
-
.map((v, i) => `h${i + 1}, .h${i + 1} {${_typeStyleAsCss(v)}}`)
|
|
39
|
-
.join("\n") +
|
|
40
|
-
`body, .body, .body-m {${_typeStyleAsCss(this.body)}}\n` +
|
|
41
|
-
`large, .body-l {${_typeStyleAsCss(this.bodyL)}}\n` +
|
|
42
|
-
`small, .body-s {${_typeStyleAsCss(this.bodyS)}}\n` +
|
|
43
|
-
`.code {${_typeStyleAsCss(this.code)}}\n`);
|
|
44
|
-
}
|
|
45
|
-
static generate(seed) {
|
|
46
|
-
const s = typeThemePreset(seed);
|
|
47
|
-
return new TypeTheme(s.heading, s.headingVariants(s.heading, 2), s.headingVariants(s.heading, 3), s.headingVariants(s.heading, 4), s.headingVariants(s.heading, 5), s.headingVariants(s.heading, 6), s.bodyVariants(s.body, "l"), s.body, s.bodyVariants(s.body, "s"), s.code);
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
export function typeThemePreset(merge) {
|
|
51
|
-
return Object.assign({ heading: {
|
|
52
|
-
bold: true,
|
|
53
|
-
family: ["Calistoga", "Arial", "sans-serif"],
|
|
54
|
-
size: 2,
|
|
55
|
-
}, body: {
|
|
56
|
-
bold: false,
|
|
57
|
-
family: ["Helvetica", "Arial", "sans-serif"],
|
|
58
|
-
size: 1,
|
|
59
|
-
}, code: {
|
|
60
|
-
bold: false,
|
|
61
|
-
family: ["Courier", "monospace"],
|
|
62
|
-
size: 1,
|
|
63
|
-
}, headingVariants: (style, variant) => {
|
|
64
|
-
const reg = 1;
|
|
65
|
-
const diff = style.size - reg;
|
|
66
|
-
const varFac = (4 - (variant - 2)) / 6;
|
|
67
|
-
const size = reg + diff * Math.pow(varFac, 1.5);
|
|
68
|
-
return Object.assign(Object.assign({}, style), { size });
|
|
69
|
-
}, bodyVariants: (style, variant) => {
|
|
70
|
-
const size = style.size * (variant === "s" ? 0.8 : 1.2);
|
|
71
|
-
return Object.assign(Object.assign({}, style), { size });
|
|
72
|
-
} }, merge);
|
|
73
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* show a simple confirm dialog
|
|
3
|
-
* @param param0 the title and message of the dialog
|
|
4
|
-
* @returns a promise that resolves to true if the user clicks "yes" or "okay" and false if the user clicks "no"
|
|
5
|
-
*/
|
|
6
|
-
export declare function showConfirmDialog({ title, message, okay, }: {
|
|
7
|
-
message: string;
|
|
8
|
-
title: string;
|
|
9
|
-
okay?: boolean;
|
|
10
|
-
}): Promise<boolean>;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* show a simple confirm dialog
|
|
3
|
-
* @param param0 the title and message of the dialog
|
|
4
|
-
* @returns a promise that resolves to true if the user clicks "yes" or "okay" and false if the user clicks "no"
|
|
5
|
-
*/
|
|
6
|
-
export function showConfirmDialog({ title, message, okay = false, }) {
|
|
7
|
-
return new Promise((resolve, reject) => {
|
|
8
|
-
var _a;
|
|
9
|
-
const dialog = document.createElement("div");
|
|
10
|
-
dialog.classList.add("dialog");
|
|
11
|
-
dialog.innerHTML = `<dialog open>
|
|
12
|
-
<div
|
|
13
|
-
class="card primary"
|
|
14
|
-
style="max-width: 30rem; min-width: 10rem"
|
|
15
|
-
>
|
|
16
|
-
<div class="row cross-center">
|
|
17
|
-
<div class="flex-1 body-l b">
|
|
18
|
-
${title}
|
|
19
|
-
</div>
|
|
20
|
-
<button class="plain round" style="width: 3rem" onclick="conf_resolve(false)">
|
|
21
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x "><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
|
|
22
|
-
</button>
|
|
23
|
-
</div>
|
|
24
|
-
<div style="margin-top: 1rem; margin-bottom: 1rem">
|
|
25
|
-
${message}
|
|
26
|
-
</div>
|
|
27
|
-
<div class="row main-end gap">
|
|
28
|
-
|
|
29
|
-
${okay
|
|
30
|
-
? '<button class="accent" style="padding-left:1rem; padding-right:1rem" onclick="conf_resolve(true)">okay</button>'
|
|
31
|
-
: '<button class="minor" style="padding-left:1rem; padding-right:1rem" onclick="conf_resolve(false)">no</button>' +
|
|
32
|
-
'<button class="accent" style="padding-left:1rem; padding-right:1rem" onclick="conf_resolve(true)">yes</button>'}
|
|
33
|
-
</div>
|
|
34
|
-
|
|
35
|
-
</div>
|
|
36
|
-
</dialog>
|
|
37
|
-
`;
|
|
38
|
-
(_a = document.getElementsByClassName("elbe")[0]) === null || _a === void 0 ? void 0 : _a.appendChild(dialog);
|
|
39
|
-
//document.body.appendChild(dialog);
|
|
40
|
-
window["conf_resolve"] = (v) => {
|
|
41
|
-
var _a;
|
|
42
|
-
(_a = document.getElementsByClassName("elbe")[0]) === null || _a === void 0 ? void 0 : _a.removeChild(dialog);
|
|
43
|
-
resolve(v);
|
|
44
|
-
};
|
|
45
|
-
});
|
|
46
|
-
}
|