@cedx/base 0.33.0 → 0.34.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/lib/UI/AppTheme.d.ts +2 -2
- package/lib/UI/AppTheme.d.ts.map +1 -1
- package/lib/UI/AppTheme.js +2 -2
- package/lib/UI/Components/DialogBox.d.ts.map +1 -1
- package/lib/UI/Components/DialogBox.js +3 -3
- package/lib/UI/Components/ThemeDropdown.d.ts.map +1 -1
- package/lib/UI/Components/ThemeDropdown.js +2 -2
- package/lib/UI/Components/Toast.js +6 -6
- package/lib/UI/Components/Toaster.d.ts.map +1 -1
- package/lib/UI/Components/Toaster.js +3 -3
- package/lib/UI/Context.d.ts +6 -6
- package/lib/UI/Context.d.ts.map +1 -1
- package/lib/UI/Context.js +9 -9
- package/lib/UI/Position.d.ts +1 -1
- package/lib/UI/Position.d.ts.map +1 -1
- package/lib/UI/Position.js +1 -1
- package/lib/UI/Size.d.ts +1 -1
- package/lib/UI/Size.d.ts.map +1 -1
- package/lib/UI/Size.js +1 -1
- package/lib/UI/Variant.d.ts +1 -1
- package/lib/UI/Variant.d.ts.map +1 -1
- package/lib/UI/Variant.js +1 -1
- package/package.json +2 -2
- package/src/Client/UI/AppTheme.ts +2 -2
- package/src/Client/UI/Components/DialogBox.ts +3 -3
- package/src/Client/UI/Components/ThemeDropdown.ts +2 -2
- package/src/Client/UI/Components/Toast.ts +6 -6
- package/src/Client/UI/Components/Toaster.ts +3 -3
- package/src/Client/UI/Context.ts +10 -10
- package/src/Client/UI/Position.ts +1 -1
- package/src/Client/UI/Size.ts +1 -1
- package/src/Client/UI/Variant.ts +1 -1
package/lib/UI/AppTheme.d.ts
CHANGED
|
@@ -24,11 +24,11 @@ export type AppTheme = typeof AppTheme[keyof typeof AppTheme];
|
|
|
24
24
|
* @param theme The application theme.
|
|
25
25
|
* @returns The icon corresponding to the specified theme.
|
|
26
26
|
*/
|
|
27
|
-
export declare function
|
|
27
|
+
export declare function icon(theme: AppTheme): string;
|
|
28
28
|
/**
|
|
29
29
|
* Gets the label corresponding to the specified theme.
|
|
30
30
|
* @param theme The application theme.
|
|
31
31
|
* @returns The label corresponding to the specified theme.
|
|
32
32
|
*/
|
|
33
|
-
export declare function
|
|
33
|
+
export declare function label(theme: AppTheme): string;
|
|
34
34
|
//# sourceMappingURL=AppTheme.d.ts.map
|
package/lib/UI/AppTheme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppTheme.d.ts","sourceRoot":"","sources":["../../src/Client/UI/AppTheme.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,QAAQ;IAEpB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,
|
|
1
|
+
{"version":3,"file":"AppTheme.d.ts","sourceRoot":"","sources":["../../src/Client/UI/AppTheme.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,QAAQ;IAEpB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAM5C;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAM7C"}
|
package/lib/UI/AppTheme.js
CHANGED
|
@@ -20,7 +20,7 @@ export const AppTheme = Object.freeze({
|
|
|
20
20
|
* @param theme The application theme.
|
|
21
21
|
* @returns The icon corresponding to the specified theme.
|
|
22
22
|
*/
|
|
23
|
-
export function
|
|
23
|
+
export function icon(theme) {
|
|
24
24
|
switch (theme) {
|
|
25
25
|
case AppTheme.Dark: return "dark_mode";
|
|
26
26
|
case AppTheme.Light: return "light_mode";
|
|
@@ -32,7 +32,7 @@ export function getIcon(theme) {
|
|
|
32
32
|
* @param theme The application theme.
|
|
33
33
|
* @returns The label corresponding to the specified theme.
|
|
34
34
|
*/
|
|
35
|
-
export function
|
|
35
|
+
export function label(theme) {
|
|
36
36
|
switch (theme) {
|
|
37
37
|
case AppTheme.Dark: return "Sombre";
|
|
38
38
|
case AppTheme.Light: return "Clair";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/DialogBox.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,OAAO,
|
|
1
|
+
{"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/DialogBox.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,OAAO,EAA8C,MAAM,eAAe,CAAC;AAGxF,OAAO,EAAC,OAAO,EAAyB,MAAM,eAAe,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,aAAa;IAE7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAC,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAE9B;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW;;IAEzC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA0D;IAiB5F;;OAEG;;IAeH;;OAEG;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,MAAM,CAAC,KAAK,EAAE,gBAAgB,EAIjC;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,OAAO,CAEnB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,OAAO,CAExB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAE5B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAW/F;;;;;;;OAOG;IACH,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,GAAE,aAAa,EAAO,GAAG,OAAO,CAAC,MAAM,CAAC;IAoBnH;;;OAGG;IACH,KAAK,CAAC,MAAM,GAAE,MAA0B,GAAG,IAAI;IAK/C;;;;;;OAMG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC;IAOtF;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;;;OAIG;IACH,IAAI,CAAC,OAAO,GAAE,cAAc,GAAC,IAAW,GAAG,OAAO,CAAC,MAAM,CAAC;CAgE1D;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Modal } from "bootstrap";
|
|
2
|
-
import {
|
|
2
|
+
import { cssClass as contextCss, icon as contextIcon } from "../Context.js";
|
|
3
3
|
import { DialogResult } from "../DialogResult.js";
|
|
4
4
|
import { html } from "../Tag.js";
|
|
5
|
-
import { Variant,
|
|
5
|
+
import { Variant, cssClass as variantCss } from "../Variant.js";
|
|
6
6
|
/**
|
|
7
7
|
* Displays a dialog box, which presents a message to the user.
|
|
8
8
|
*/
|
|
@@ -153,7 +153,7 @@ export class DialogBox extends HTMLElement {
|
|
|
153
153
|
caption,
|
|
154
154
|
body: html `
|
|
155
155
|
<div class="d-flex gap-2">
|
|
156
|
-
<i class="icon icon-fill fs-1 text-${contextCss(context)}"> ${
|
|
156
|
+
<i class="icon icon-fill fs-1 text-${contextCss(context)}"> ${contextIcon(context)}</i>
|
|
157
157
|
<div class="flex-grow-1">${message}</div>
|
|
158
158
|
</div>
|
|
159
159
|
`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ThemeDropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ThemeDropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAO,MAAM,gBAAgB,CAAC;AAE9C;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAE7C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAsC;IAiBxE;;OAEG;;IAaH;;OAEG;IACH,IAAI,SAAS,IAAI,SAAS,CAGzB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,EAE7B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED;;OAEG;IACH,IAAI,YAAY,IAAI,MAAM,CAEzB;IACD,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAS/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;;OAGG;IACG,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;IAYxC;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAwDZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Dropdown } from "bootstrap";
|
|
2
2
|
import { Alignment } from "../Alignment.js";
|
|
3
|
-
import { AppTheme,
|
|
3
|
+
import { AppTheme, icon } from "../AppTheme.js";
|
|
4
4
|
/**
|
|
5
5
|
* A dropdown menu for switching the application theme.
|
|
6
6
|
*/
|
|
@@ -192,7 +192,7 @@ export class ThemeDropdown extends HTMLElement {
|
|
|
192
192
|
* @param value The new value.
|
|
193
193
|
*/
|
|
194
194
|
#updateAppTheme(value) {
|
|
195
|
-
this.querySelector(".dropdown-toggle > .icon").textContent =
|
|
195
|
+
this.querySelector(".dropdown-toggle > .icon").textContent = icon(value);
|
|
196
196
|
this.querySelector(`.dropdown-menu button[value="${value}"]`).appendChild(this.querySelector(".dropdown-item > .icon"));
|
|
197
197
|
this.#applyToDocument();
|
|
198
198
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Toast as BootstrapToast } from "bootstrap";
|
|
2
|
-
import { Context,
|
|
2
|
+
import { Context, cssClass, icon } from "../Context.js";
|
|
3
3
|
/**
|
|
4
4
|
* Represents a notification.
|
|
5
5
|
*/
|
|
@@ -239,11 +239,11 @@ export class Toast extends HTMLElement {
|
|
|
239
239
|
#updateContext(value) {
|
|
240
240
|
const contexts = Object.values(Context);
|
|
241
241
|
let { classList } = this.querySelector(".toast-header");
|
|
242
|
-
classList.remove(...contexts.map(context => `toast-header-${
|
|
243
|
-
classList.add(`toast-header-${
|
|
242
|
+
classList.remove(...contexts.map(context => `toast-header-${cssClass(context)}`));
|
|
243
|
+
classList.add(`toast-header-${cssClass(value)}`);
|
|
244
244
|
({ classList } = this.querySelector(".toast-header .icon"));
|
|
245
|
-
classList.remove(...contexts.map(context => `text-${
|
|
246
|
-
classList.add(`text-${
|
|
245
|
+
classList.remove(...contexts.map(context => `text-${cssClass(context)}`));
|
|
246
|
+
classList.add(`text-${cssClass(value)}`);
|
|
247
247
|
}
|
|
248
248
|
/**
|
|
249
249
|
* Updates the delay to hide the toast.
|
|
@@ -272,6 +272,6 @@ export class Toast extends HTMLElement {
|
|
|
272
272
|
* @param value The new value.
|
|
273
273
|
*/
|
|
274
274
|
#updateIcon(value) {
|
|
275
|
-
this.querySelector(".toast-header .icon").textContent = (value ?? "").trim() ||
|
|
275
|
+
this.querySelector(".toast-header .icon").textContent = (value ?? "").trim() || icon(this.context);
|
|
276
276
|
}
|
|
277
277
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAW,MAAM,gBAAgB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAOlD;;OAEG;;IAaH;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAO/F;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAI1E;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA4BzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Context } from "../Context.js";
|
|
2
|
-
import { Position,
|
|
2
|
+
import { Position, cssClass } from "../Position.js";
|
|
3
3
|
/**
|
|
4
4
|
* Manages the notifications.
|
|
5
5
|
*/
|
|
@@ -147,7 +147,7 @@ export class Toaster extends HTMLElement {
|
|
|
147
147
|
*/
|
|
148
148
|
#updatePosition(value) {
|
|
149
149
|
const { classList } = this.firstElementChild;
|
|
150
|
-
classList.remove(...Object.values(Position).flatMap(position =>
|
|
151
|
-
classList.add(...
|
|
150
|
+
classList.remove(...Object.values(Position).flatMap(position => cssClass(position).split(" ")));
|
|
151
|
+
classList.add(...cssClass(value).split(" "));
|
|
152
152
|
}
|
|
153
153
|
}
|
package/lib/UI/Context.d.ts
CHANGED
|
@@ -24,15 +24,15 @@ export declare const Context: Readonly<{
|
|
|
24
24
|
*/
|
|
25
25
|
export type Context = typeof Context[keyof typeof Context];
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* Returns the CSS representation of the specified context.
|
|
28
28
|
* @param context The context.
|
|
29
|
-
* @returns The
|
|
29
|
+
* @returns The CSS representation of the specified context.
|
|
30
30
|
*/
|
|
31
|
-
export declare function
|
|
31
|
+
export declare function cssClass(context: Context): string;
|
|
32
32
|
/**
|
|
33
|
-
*
|
|
33
|
+
* Gets the icon corresponding to the specified context.
|
|
34
34
|
* @param context The context.
|
|
35
|
-
* @returns The
|
|
35
|
+
* @returns The icon corresponding to the specified context.
|
|
36
36
|
*/
|
|
37
|
-
export declare function
|
|
37
|
+
export declare function icon(context: Context): string;
|
|
38
38
|
//# sourceMappingURL=Context.d.ts.map
|
package/lib/UI/Context.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Context.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO;IAEnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,
|
|
1
|
+
{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Context.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO;IAEnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAO7C"}
|
package/lib/UI/Context.js
CHANGED
|
@@ -19,12 +19,20 @@ export const Context = Object.freeze({
|
|
|
19
19
|
*/
|
|
20
20
|
Success: "Success"
|
|
21
21
|
});
|
|
22
|
+
/**
|
|
23
|
+
* Returns the CSS representation of the specified context.
|
|
24
|
+
* @param context The context.
|
|
25
|
+
* @returns The CSS representation of the specified context.
|
|
26
|
+
*/
|
|
27
|
+
export function cssClass(context) {
|
|
28
|
+
return context.toLowerCase();
|
|
29
|
+
}
|
|
22
30
|
/**
|
|
23
31
|
* Gets the icon corresponding to the specified context.
|
|
24
32
|
* @param context The context.
|
|
25
33
|
* @returns The icon corresponding to the specified context.
|
|
26
34
|
*/
|
|
27
|
-
export function
|
|
35
|
+
export function icon(context) {
|
|
28
36
|
switch (context) {
|
|
29
37
|
case Context.Danger: return "error";
|
|
30
38
|
case Context.Success: return "check_circle";
|
|
@@ -32,11 +40,3 @@ export function getIcon(context) {
|
|
|
32
40
|
default: return "info";
|
|
33
41
|
}
|
|
34
42
|
}
|
|
35
|
-
/**
|
|
36
|
-
* Returns the CSS representation of the specified context.
|
|
37
|
-
* @param context The context.
|
|
38
|
-
* @returns The CSS representation of the specified context.
|
|
39
|
-
*/
|
|
40
|
-
export function toCss(context) {
|
|
41
|
-
return context.toLowerCase();
|
|
42
|
-
}
|
package/lib/UI/Position.d.ts
CHANGED
|
@@ -48,5 +48,5 @@ export type Position = typeof Position[keyof typeof Position];
|
|
|
48
48
|
* @param position The position.
|
|
49
49
|
* @returns The CSS representation of the specified position.
|
|
50
50
|
*/
|
|
51
|
-
export declare function
|
|
51
|
+
export declare function cssClass(position: Position): string;
|
|
52
52
|
//# sourceMappingURL=Position.d.ts.map
|
package/lib/UI/Position.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Position.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Position.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,QAAQ;IAEpB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,
|
|
1
|
+
{"version":3,"file":"Position.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Position.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,QAAQ;IAEpB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAYnD"}
|
package/lib/UI/Position.js
CHANGED
|
@@ -44,7 +44,7 @@ export const Position = Object.freeze({
|
|
|
44
44
|
* @param position The position.
|
|
45
45
|
* @returns The CSS representation of the specified position.
|
|
46
46
|
*/
|
|
47
|
-
export function
|
|
47
|
+
export function cssClass(position) {
|
|
48
48
|
switch (position) {
|
|
49
49
|
case Position.TopCenter: return "top-0 start-50 translate-middle-x";
|
|
50
50
|
case Position.TopEnd: return "top-0 end-0";
|
package/lib/UI/Size.d.ts
CHANGED
|
@@ -36,5 +36,5 @@ export type Size = typeof Size[keyof typeof Size];
|
|
|
36
36
|
* @param size The size.
|
|
37
37
|
* @returns The CSS representation of the specified size.
|
|
38
38
|
*/
|
|
39
|
-
export declare function
|
|
39
|
+
export declare function cssClass(size: Size): string;
|
|
40
40
|
//# sourceMappingURL=Size.d.ts.map
|
package/lib/UI/Size.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Size.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,IAAI;IAEhB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAElD;;;;GAIG;AACH,wBAAgB,
|
|
1
|
+
{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Size.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,IAAI;IAEhB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAElD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAS3C"}
|
package/lib/UI/Size.js
CHANGED
|
@@ -32,7 +32,7 @@ export const Size = Object.freeze({
|
|
|
32
32
|
* @param size The size.
|
|
33
33
|
* @returns The CSS representation of the specified size.
|
|
34
34
|
*/
|
|
35
|
-
export function
|
|
35
|
+
export function cssClass(size) {
|
|
36
36
|
switch (size) {
|
|
37
37
|
case Size.ExtraSmall: return "xs";
|
|
38
38
|
case Size.Small: return "sm";
|
package/lib/UI/Variant.d.ts
CHANGED
|
@@ -32,5 +32,5 @@ export type Variant = typeof Variant[keyof typeof Variant];
|
|
|
32
32
|
* @param variant The variant.
|
|
33
33
|
* @returns The CSS representation of the specified variant.
|
|
34
34
|
*/
|
|
35
|
-
export declare function
|
|
35
|
+
export declare function cssClass(variant: Variant): string;
|
|
36
36
|
//# sourceMappingURL=Variant.d.ts.map
|
package/lib/UI/Variant.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Variant.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Variant.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,OAAO;IAGnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;;;;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,
|
|
1
|
+
{"version":3,"file":"Variant.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Variant.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,OAAO;IAGnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;;;;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAEjD"}
|
package/lib/UI/Variant.js
CHANGED
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"name": "@cedx/base",
|
|
8
8
|
"repository": "cedx/base",
|
|
9
9
|
"type": "module",
|
|
10
|
-
"version": "0.
|
|
10
|
+
"version": "0.34.0",
|
|
11
11
|
"devDependencies": {
|
|
12
12
|
"@playwright/browser-firefox": "^1.56.1",
|
|
13
13
|
"@types/bootstrap": "^5.2.10",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"serve-handler": "^6.1.6",
|
|
24
24
|
"typedoc": "^0.28.14",
|
|
25
25
|
"typescript": "^5.9.3",
|
|
26
|
-
"typescript-eslint": "^8.
|
|
26
|
+
"typescript-eslint": "^8.47.0"
|
|
27
27
|
},
|
|
28
28
|
"engines": {
|
|
29
29
|
"node": ">=24.0.0"
|
|
@@ -29,7 +29,7 @@ export type AppTheme = typeof AppTheme[keyof typeof AppTheme];
|
|
|
29
29
|
* @param theme The application theme.
|
|
30
30
|
* @returns The icon corresponding to the specified theme.
|
|
31
31
|
*/
|
|
32
|
-
export function
|
|
32
|
+
export function icon(theme: AppTheme): string {
|
|
33
33
|
switch (theme) {
|
|
34
34
|
case AppTheme.Dark: return "dark_mode";
|
|
35
35
|
case AppTheme.Light: return "light_mode";
|
|
@@ -42,7 +42,7 @@ export function getIcon(theme: AppTheme): string {
|
|
|
42
42
|
* @param theme The application theme.
|
|
43
43
|
* @returns The label corresponding to the specified theme.
|
|
44
44
|
*/
|
|
45
|
-
export function
|
|
45
|
+
export function label(theme: AppTheme): string {
|
|
46
46
|
switch (theme) {
|
|
47
47
|
case AppTheme.Dark: return "Sombre";
|
|
48
48
|
case AppTheme.Light: return "Clair";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {Modal} from "bootstrap";
|
|
2
|
-
import {type Context,
|
|
2
|
+
import {type Context, cssClass as contextCss, icon as contextIcon} from "../Context.js";
|
|
3
3
|
import {DialogResult} from "../DialogResult.js";
|
|
4
4
|
import {html} from "../Tag.js";
|
|
5
|
-
import {Variant,
|
|
5
|
+
import {Variant, cssClass as variantCss} from "../Variant.js";
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Represents a dialog box button.
|
|
@@ -206,7 +206,7 @@ export class DialogBox extends HTMLElement {
|
|
|
206
206
|
caption,
|
|
207
207
|
body: html`
|
|
208
208
|
<div class="d-flex gap-2">
|
|
209
|
-
<i class="icon icon-fill fs-1 text-${contextCss(context)}"> ${
|
|
209
|
+
<i class="icon icon-fill fs-1 text-${contextCss(context)}"> ${contextIcon(context)}</i>
|
|
210
210
|
<div class="flex-grow-1">${message}</div>
|
|
211
211
|
</div>
|
|
212
212
|
`,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {Dropdown} from "bootstrap";
|
|
2
2
|
import {Alignment} from "../Alignment.js";
|
|
3
|
-
import {AppTheme,
|
|
3
|
+
import {AppTheme, icon} from "../AppTheme.js";
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* A dropdown menu for switching the application theme.
|
|
@@ -206,7 +206,7 @@ export class ThemeDropdown extends HTMLElement {
|
|
|
206
206
|
* @param value The new value.
|
|
207
207
|
*/
|
|
208
208
|
#updateAppTheme(value: AppTheme): void {
|
|
209
|
-
this.querySelector(".dropdown-toggle > .icon")!.textContent =
|
|
209
|
+
this.querySelector(".dropdown-toggle > .icon")!.textContent = icon(value);
|
|
210
210
|
this.querySelector(`.dropdown-menu button[value="${value}"]`)!.appendChild(this.querySelector(".dropdown-item > .icon")!);
|
|
211
211
|
this.#applyToDocument();
|
|
212
212
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {Toast as BootstrapToast} from "bootstrap";
|
|
2
|
-
import {Context,
|
|
2
|
+
import {Context, cssClass, icon} from "../Context.js";
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Represents a notification.
|
|
@@ -257,12 +257,12 @@ export class Toast extends HTMLElement {
|
|
|
257
257
|
const contexts = Object.values(Context);
|
|
258
258
|
|
|
259
259
|
let {classList} = this.querySelector(".toast-header")!;
|
|
260
|
-
classList.remove(...contexts.map(context => `toast-header-${
|
|
261
|
-
classList.add(`toast-header-${
|
|
260
|
+
classList.remove(...contexts.map(context => `toast-header-${cssClass(context)}`));
|
|
261
|
+
classList.add(`toast-header-${cssClass(value)}`);
|
|
262
262
|
|
|
263
263
|
({classList} = this.querySelector(".toast-header .icon")!);
|
|
264
|
-
classList.remove(...contexts.map(context => `text-${
|
|
265
|
-
classList.add(`text-${
|
|
264
|
+
classList.remove(...contexts.map(context => `text-${cssClass(context)}`));
|
|
265
|
+
classList.add(`text-${cssClass(value)}`);
|
|
266
266
|
}
|
|
267
267
|
|
|
268
268
|
/**
|
|
@@ -295,7 +295,7 @@ export class Toast extends HTMLElement {
|
|
|
295
295
|
* @param value The new value.
|
|
296
296
|
*/
|
|
297
297
|
#updateIcon(value: string|null): void {
|
|
298
|
-
this.querySelector(".toast-header .icon")!.textContent = (value ?? "").trim() ||
|
|
298
|
+
this.querySelector(".toast-header .icon")!.textContent = (value ?? "").trim() || icon(this.context);
|
|
299
299
|
}
|
|
300
300
|
}
|
|
301
301
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {Context} from "../Context.js";
|
|
2
|
-
import {Position,
|
|
2
|
+
import {Position, cssClass} from "../Position.js";
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Represents a notification.
|
|
@@ -205,8 +205,8 @@ export class Toaster extends HTMLElement {
|
|
|
205
205
|
*/
|
|
206
206
|
#updatePosition(value: Position): void {
|
|
207
207
|
const {classList} = this.firstElementChild!;
|
|
208
|
-
classList.remove(...Object.values(Position).flatMap(position =>
|
|
209
|
-
classList.add(...
|
|
208
|
+
classList.remove(...Object.values(Position).flatMap(position => cssClass(position).split(" ")));
|
|
209
|
+
classList.add(...cssClass(value).split(" "));
|
|
210
210
|
}
|
|
211
211
|
}
|
|
212
212
|
|
package/src/Client/UI/Context.ts
CHANGED
|
@@ -29,12 +29,21 @@ export const Context = Object.freeze({
|
|
|
29
29
|
*/
|
|
30
30
|
export type Context = typeof Context[keyof typeof Context];
|
|
31
31
|
|
|
32
|
+
/**
|
|
33
|
+
* Returns the CSS representation of the specified context.
|
|
34
|
+
* @param context The context.
|
|
35
|
+
* @returns The CSS representation of the specified context.
|
|
36
|
+
*/
|
|
37
|
+
export function cssClass(context: Context): string {
|
|
38
|
+
return context.toLowerCase();
|
|
39
|
+
}
|
|
40
|
+
|
|
32
41
|
/**
|
|
33
42
|
* Gets the icon corresponding to the specified context.
|
|
34
43
|
* @param context The context.
|
|
35
44
|
* @returns The icon corresponding to the specified context.
|
|
36
45
|
*/
|
|
37
|
-
export function
|
|
46
|
+
export function icon(context: Context): string {
|
|
38
47
|
switch (context) {
|
|
39
48
|
case Context.Danger: return "error";
|
|
40
49
|
case Context.Success: return "check_circle";
|
|
@@ -42,12 +51,3 @@ export function getIcon(context: Context): string {
|
|
|
42
51
|
default: return "info";
|
|
43
52
|
}
|
|
44
53
|
}
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* Returns the CSS representation of the specified context.
|
|
48
|
-
* @param context The context.
|
|
49
|
-
* @returns The CSS representation of the specified context.
|
|
50
|
-
*/
|
|
51
|
-
export function toCss(context: Context): string {
|
|
52
|
-
return context.toLowerCase();
|
|
53
|
-
}
|
|
@@ -59,7 +59,7 @@ export type Position = typeof Position[keyof typeof Position];
|
|
|
59
59
|
* @param position The position.
|
|
60
60
|
* @returns The CSS representation of the specified position.
|
|
61
61
|
*/
|
|
62
|
-
export function
|
|
62
|
+
export function cssClass(position: Position): string {
|
|
63
63
|
switch (position) {
|
|
64
64
|
case Position.TopCenter: return "top-0 start-50 translate-middle-x";
|
|
65
65
|
case Position.TopEnd: return "top-0 end-0";
|
package/src/Client/UI/Size.ts
CHANGED
|
@@ -44,7 +44,7 @@ export type Size = typeof Size[keyof typeof Size];
|
|
|
44
44
|
* @param size The size.
|
|
45
45
|
* @returns The CSS representation of the specified size.
|
|
46
46
|
*/
|
|
47
|
-
export function
|
|
47
|
+
export function cssClass(size: Size): string {
|
|
48
48
|
switch (size) {
|
|
49
49
|
case Size.ExtraSmall: return "xs";
|
|
50
50
|
case Size.Small: return "sm";
|
package/src/Client/UI/Variant.ts
CHANGED
|
@@ -37,6 +37,6 @@ export type Variant = typeof Variant[keyof typeof Variant];
|
|
|
37
37
|
* @param variant The variant.
|
|
38
38
|
* @returns The CSS representation of the specified variant.
|
|
39
39
|
*/
|
|
40
|
-
export function
|
|
40
|
+
export function cssClass(variant: Variant): string {
|
|
41
41
|
return variant.toLowerCase();
|
|
42
42
|
}
|