@cedx/ui 0.10.0 → 0.12.0

package/Distributable/Pagination.d.ts

@@ -61,4 +61,37 @@ export type PaginationOptions = Partial<{
      */
     totalItemCount: number;
 }>;
+/**
+ * A list with information relevant to the pagination of its items.
+ */
+export declare class PaginatedList<T> extends Array<T> {
+    /**
+     * The information relevant to the pagination of list items.
+     */
+    pagination: Pagination;
+    /**
+     * Creates a new paginated list.
+     * @param options An object providing values to initialize this instance.
+     */
+    constructor(options?: PaginatedListOptions<T>);
+    /**
+     * Creates an empty paginated list.
+     * @param itemsPerPage The number of items per page.
+     * @returns An empty paginated list with the specified number of items per page.
+     */
+    static empty<T>(itemsPerPage: number): PaginatedList<T>;
+}
+/**
+ * Defines the options of a {@link PaginatedList} instance.
+ */
+export type PaginatedListOptions<T> = Partial<{
+    /**
+     * The list items.
+     */
+    items: T[];
+    /**
+     * The information relevant to the pagination of list items.
+     */
+    pagination: Pagination;
+}>;
 //# sourceMappingURL=Pagination.d.ts.map

package/Distributable/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../Sources/Client/Pagination.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAU;;IAiBtB;;;OAGG;gBACS,OAAO,GAAE,iBAAsB;IAM3C;;OAEG;IACH,IAAI,gBAAgB,IAAI,MAAM,CAE7B;IACD,IAAI,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAEjC;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED;;OAEG;IACH,IAAI,eAAe,IAAI,OAAO,CAE7B;IAED;;OAEG;IACH,IAAI,YAAY,IAAI,MAAM,CAEzB;IACD,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAE3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;CACD;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAEvC;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../Sources/Client/Pagination.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAU;;IAiBtB;;;OAGG;gBACS,OAAO,GAAE,iBAAsB;IAM3C;;OAEG;IACH,IAAI,gBAAgB,IAAI,MAAM,CAE7B;IACD,IAAI,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAEjC;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED;;OAEG;IACH,IAAI,eAAe,IAAI,OAAO,CAE7B;IAED;;OAEG;IACH,IAAI,YAAY,IAAI,MAAM,CAEzB;IACD,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAE3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;CACD;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAEvC;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH;;GAEG;AACH,qBAAa,aAAa,CAAC,CAAC,CAAE,SAAQ,KAAK,CAAC,CAAC,CAAC;IAE7C;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IAEvB;;;OAGG;gBACS,OAAO,GAAE,oBAAoB,CAAC,CAAC,CAAM;IAMjD;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,GAAG,aAAa,CAAC,CAAC,CAAC;CAGvD;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI,OAAO,CAAC;IAE7C;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IAEX;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;CACvB,CAAC,CAAC"}

package/Distributable/Pagination.js

@@ -81,3 +81,30 @@ export class Pagination {
         this.#totalItemCount = Math.max(0, value);
     }
 }
+/**
+ * A list with information relevant to the pagination of its items.
+ */
+export class PaginatedList extends Array {
+    /**
+     * The information relevant to the pagination of list items.
+     */
+    pagination;
+    /**
+     * Creates a new paginated list.
+     * @param options An object providing values to initialize this instance.
+     */
+    constructor(options = {}) {
+        super();
+        for (const item of options.items ?? [])
+            this.push(item);
+        this.pagination = options.pagination ?? new Pagination;
+    }
+    /**
+     * Creates an empty paginated list.
+     * @param itemsPerPage The number of items per page.
+     * @returns An empty paginated list with the specified number of items per page.
+     */
+    static empty(itemsPerPage) {
+        return new this({ pagination: new Pagination({ itemsPerPage }) });
+    }
+}

package/Distributable/String.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Converts the first character of the specified string to uppercase.
+ * @param value The string to process.
+ * @param culture The current culture.
+ * @returns The processed string.
+ */
+export declare function capitalize(value: string, culture?: Intl.Locale | string): string;
+/**
+ * Truncates the specified string to the given number of characters.
+ * @param value The string to be truncated.
+ * @param length The maximum length.
+ * @param ellipsis The ellipsis to append to the truncated text.
+ * @returns The truncated string.
+ */
+export declare function truncate(value: string, length: number, ellipsis?: string): string;
+//# sourceMappingURL=String.d.ts.map

package/Distributable/String.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"String.d.ts","sourceRoot":"","sources":["../Sources/Client/String.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,MAAM,GAAC,MAA2B,GAAG,MAAM,CAElG;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAQ,GAAG,MAAM,CAEhF"}

package/Distributable/String.js

@@ -0,0 +1,19 @@
+/**
+ * Converts the first character of the specified string to uppercase.
+ * @param value The string to process.
+ * @param culture The current culture.
+ * @returns The processed string.
+ */
+export function capitalize(value, culture = navigator.language) {
+    return value.length ? value.charAt(0).toLocaleUpperCase(culture) + value.slice(1) : "";
+}
+/**
+ * Truncates the specified string to the given number of characters.
+ * @param value The string to be truncated.
+ * @param length The maximum length.
+ * @param ellipsis The ellipsis to append to the truncated text.
+ * @returns The truncated string.
+ */
+export function truncate(value, length, ellipsis = "...") {
+    return value.length > length ? value.slice(0, length) + ellipsis : value;
+}

package/Sources/Client/Components/CharacterCounter.hx

@@ -0,0 +1,59 @@
+package Belin.UI;
+
+import coconut.ui.View;
+import js.Browser;
+import js.Syntax;
+import js.html.Element;
+import js.html.InputElement;
+import js.html.TextAreaElement;
+
+/** Counts the number of characters in a form control. **/
+class CharacterCounter extends View {
+
+	/** The maximum number of allowed characters. **/
+	@:attribute var maxLength = -1;
+
+	/** The CSS selector used to target the form control. **/
+	@:attribute var target: String;
+
+	/** The number of remaining characters. **/
+	@:computed var remaining: Int = maxLength >= 0 ? maxLength - value : Syntax.code("Number.MAX_SAFE_INTEGER");
+
+	/** The current number of characters. **/
+	@:state var value = 0;
+
+	/** The associated form control. **/
+	var element: Null<Element> = null;
+
+	/** Counts the number of characters in the associated form control. **/
+	function countCharacters() switch Type.getClass(element) {
+		case InputElement: value = (cast element: InputElement).value.length;
+		case TextAreaElement: value = (cast element: TextAreaElement).value.length;
+	}
+
+	/** Renders this view. **/
+	function render() '
+		<span class=${{
+			badge: true,
+			"bg-danger": maxLength >= 0 && remaining < 0,
+			"bg-success": maxLength >= 0 && remaining >= 0,
+			"text-bg-secondary": maxLength < 0
+		}}>
+			$value
+			<if ${maxLength >= 0}>/$maxLength</if>
+		</span>
+	';
+
+	/** Method invoked after this view is mounted. **/
+	override function viewDidMount() {
+		element = Browser.document.querySelector(target);
+		element.addEventListener("change", countCharacters);
+		element.addEventListener("input", countCharacters);
+
+		Callback.defer(countCharacters);
+		beforeUnmounting(() -> {
+			element.removeEventListener("change", countCharacters);
+			element.removeEventListener("input", countCharacters);
+		});
+	}
+}

package/Sources/Client/Components/Pager.hx

@@ -0,0 +1,80 @@
+package Belin.UI;
+
+import coconut.ui.View;
+import js.html.Element;
+import js.html.Event;
+import core.data.Pagination;
+
+/** Displays links relevant to the pagination of data items. **/
+class Pager extends View {
+
+	/** The pager alignment. **/
+	@:attribute var alignment: PagerAlignment = Center;
+
+	/** The handler invoked when the current page has been changed. **/
+	@:attribute var onNavigate: Callback<Int>;
+
+	/** The underlying pagination model. **/
+	@:attribute var pagination: Pagination;
+
+	/** The number of items displayed around the active item. **/
+	@:attribute var sideItems: Int = 1;
+
+	/** Navigates to the specified page. **/
+	public function navigate(page: Int, ?event: Event) {
+		if (event != null) (cast event.currentTarget: Element).blur();
+		if (page >= 1 && page <= pagination.pageCount && page != pagination.page) onNavigate.invoke(page);
+	}
+
+	/** Gets the list of buttons to display. **/
+	function getItems() {
+		final start = Std.int(Math.max(1, pagination.page - sideItems));
+		final end = Std.int(Math.min(pagination.pageCount, pagination.page + sideItems));
+
+		final items = [];
+		if (start > 1) items.push(1);
+		if (start > 2) items.push(0);
+		for (index in start...(end + 1)) items.push(index);
+		if (end < pagination.pageCount - 1) items.push(0);
+		if (end < pagination.pageCount) items.push(pagination.pageCount);
+		return items;
+	}
+
+	/** Renders this view. **/
+	function render() '
+		<if ${pagination.pageCount > 1}>
+			<nav>
+				<ul class=${['pagination justify-content-$alignment' => true]}>
+					<li class=${{disabled: pagination.page <= 1, "page-item": true}}>
+						<button class="page-link" onclick=${navigate(pagination.page - 1, event)} type=${Button}>
+							<i class="icon">chevron_left</i><span class="d-none d-sm-inline ms-1">Précédent</span>
+						</button>
+					</li>
+					<for ${index in getItems()}>
+						<li class=${{active: index == pagination.page, disabled: index == 0, "page-item": true}}>
+							<button class="page-link" onclick=${navigate(index, event)} type=${Button}>${index == 0 ? "..." : index}</button>
+						</li>
+					</for>
+					<li class=${{disabled: pagination.page >= pagination.pageCount, "page-item": true}}>
+						<button class="page-link" onclick=${navigate(pagination.page + 1, event)} type=${Button}>
+							<span class="d-none d-sm-inline me-1">Suivant</span><i class="icon">chevron_right</i>
+						</button>
+					</li>
+				</ul>
+			</nav>
+		</if>
+	';
+}
+
+/** Defines the alignment of a pager. **/
+enum abstract PagerAlignment(String) {
+
+	/** The pager is aligned to the end. **/
+	var End = "end";
+
+	/** The pager is aligned to the center. **/
+	var Center = "center";
+
+	/** The pager is aligned to the start. **/
+	var Start = "start";
+}

package/Sources/Client/Pagination.ts

@@ -114,3 +114,49 @@ export type PaginationOptions = Partial<{
 	 */
 	totalItemCount: number;
 }>;
+
+/**
+ * A list with information relevant to the pagination of its items.
+ */
+export class PaginatedList<T> extends Array<T> {
+
+	/**
+	 * The information relevant to the pagination of list items.
+	 */
+	pagination: Pagination;
+
+	/**
+	 * Creates a new paginated list.
+	 * @param options An object providing values to initialize this instance.
+	 */
+	constructor(options: PaginatedListOptions<T> = {}) {
+		super();
+		for (const item of options.items ?? []) this.push(item);
+		this.pagination = options.pagination ?? new Pagination;
+	}
+
+	/**
+	 * Creates an empty paginated list.
+	 * @param itemsPerPage The number of items per page.
+	 * @returns An empty paginated list with the specified number of items per page.
+	 */
+	static empty<T>(itemsPerPage: number): PaginatedList<T> {
+		return new this({pagination: new Pagination({itemsPerPage})});
+	}
+}
+
+/**
+ * Defines the options of a {@link PaginatedList} instance.
+ */
+export type PaginatedListOptions<T> = Partial<{
+
+	/**
+	 * The list items.
+	 */
+	items: T[];
+
+	/**
+	 * The information relevant to the pagination of list items.
+	 */
+	pagination: Pagination;
+}>;

package/Sources/Client/String.ts

@@ -0,0 +1,20 @@
+/**
+ * Converts the first character of the specified string to uppercase.
+ * @param value The string to process.
+ * @param culture The current culture.
+ * @returns The processed string.
+ */
+export function capitalize(value: string, culture: Intl.Locale|string = navigator.language): string {
+	return value.length ? value.charAt(0).toLocaleUpperCase(culture) + value.slice(1) : "";
+}
+
+/**
+ * Truncates the specified string to the given number of characters.
+ * @param value The string to be truncated.
+ * @param length The maximum length.
+ * @param ellipsis The ellipsis to append to the truncated text.
+ * @returns The truncated string.
+ */
+export function truncate(value: string, length: number, ellipsis = "..."): string {
+	return value.length > length ? value.slice(0, length) + ellipsis : value;
+}

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/ui",
 	"repository": "CedX/UI",
 	"type": "module",
-	"version": "0.10.0",
+	"version": "0.12.0",
 	"allowScripts": {
 		"esbuild": true,
 		"playwright-firefox": true