@vandenberghinc/volt 1.1.5 → 1.1.7

package/frontend/src/modules/themes.ts

@@ -21,4 +21,5 @@ export const Themes = {
             }
         });
     }
-};
+};
+export { Themes as themes }; // also export as lowercase for compatibility.

package/frontend/src/modules/user.ts

@@ -141,7 +141,7 @@ export namespace User {
      *		@type: boolean
      */
     export async function get(): Promise<UserObject> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/user/",
             data: {
@@ -167,7 +167,7 @@ export namespace User {
         email?: string,
         is_activated?: boolean,
     }): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/user/",
             data: user,
@@ -183,7 +183,7 @@ export namespace User {
      *	@return: Returns a promise with a successful update response or a request error on a failed request.
      */
     export async function activate(code: string = ""): Promise<Response> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/auth/activate",
             data: {
@@ -205,7 +205,7 @@ export namespace User {
         password = "", 
         verify_password = "",
     }: { current_password: string; password: string; verify_password: string }): Promise<Response> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/user/change_password",
             data: {
@@ -225,7 +225,7 @@ export namespace User {
      *	@return: Returns a promise with a successful update response or a request error on a failed request.
      */
     export async function delete_account(): Promise<Response> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "DELETE",
             url: "/volt/user",
         });
@@ -240,7 +240,7 @@ export namespace User {
      *	@return: Returns a promise with a successful update response with the newly generated API key as an attribute or a request error on a failed request.
      */
     export async function generate_api_key(): Promise<GenerateAPIKeyResponse> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/user/api_key",
         });
@@ -255,7 +255,7 @@ export namespace User {
      *	@return: Returns a promise with a successful update response or a request error on a failed request.
      */
     export async function revoke_api_key(): Promise<Response> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "DELETE",
             url: "/volt/user/api_key",
         });
@@ -270,7 +270,7 @@ export namespace User {
      *	@return: Returns a promise with the loaded user's data or a request error on a failed request.
      */
     export async function load(path: string, def: string = ""): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/user/data",
             data: {
@@ -289,7 +289,7 @@ export namespace User {
      *	@return: Returns a promise with a successful update response or a request error on a failed request.
      */
     export async function save(path: string = "", data: Record<string, any> = {}): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/user/data",
             data: {
@@ -308,7 +308,7 @@ export namespace User {
      *	@return: Returns a promise with the loaded user's data or a request error on a failed request.
      */
     export async function load_protected(path: string, def: string = ""): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/user/data/protected",
             data: {
@@ -318,4 +318,5 @@ export namespace User {
         });
     }
 
-};
+};
+export { User as user }; // also export as lowercase for compatibility.

package/frontend/src/modules/utils.ts

@@ -3,6 +3,8 @@
  * Copyright: © 2022 - 2024 Daan van den Bergh.
  */
 
+import { AnyElement } from "../ui/any_element";
+
 // Utils module.
 const Utils = {
     is_apple: navigator.vendor.includes('Apple') as boolean,
@@ -560,6 +562,126 @@ const Utils = {
         }
     },
 
+
+    /** New request method. */
+    async request<Data = any>(options: {
+        method?: string;
+        url?: string | null;
+        data?: any;
+        json?: boolean;
+        credentials?: RequestCredentials;
+        headers?: Record<string, string>;
+    }): Promise<{
+        error?: {
+            message: string;
+            type?: string;
+            invalid_fields?: { [name: string]: string };
+        };
+        status: number;
+        data?: Data;
+    }> {
+        const {
+            method = 'GET',
+            url = null,
+            data = null,
+            json = true,
+            credentials = "same-origin",
+            headers = {},
+        } = options;
+
+        // — prepare headers —
+        if (json && data != null && !headers['Content-Type']) {
+            headers['Content-Type'] = 'application/json';
+        }
+
+        // — build URL + body —
+        let finalUrl = url!;
+        let body: string | undefined;
+        if (data != null && typeof data === 'object') {
+            if (method.toUpperCase() === 'GET') {
+                finalUrl = `${url}?${new URLSearchParams(data).toString()}`;
+            } else {
+                body = JSON.stringify(data);
+            }
+        } else if (data != null) {
+            body = String(data);
+        }
+
+        const init: RequestInit = { method, credentials, headers };
+        if (body !== undefined) init.body = body;
+
+        try {
+            const response = await fetch(finalUrl, init);
+            const status = response.status;
+
+            // — parse payload once —
+            let payload: any;
+            const clone = response.clone(); // @dev.
+            if (json) {
+                try {
+                    payload = await response.json();
+                } catch (e: any) {
+                    // malformed JSON still counts as a “success” fetch
+                    console.log("[debug] Unable to parse a json from response:", await clone.text(), "- Error: ", JSON.stringify(e, null, 4))
+                    console.log("rsponse:", response);
+                    return {
+                        status,
+                        error: { message: `Failed to parse JSON response: ${e.message}` },
+                    };
+                }
+            } else {
+                try {
+                    payload = await response.text();
+                } catch (e: any) {
+                    return {
+                        status,
+                        error: { message: `Failed to parse text response: ${e.message}` },
+                    };
+                }
+            }
+            console.log("Payload", json, payload)
+
+            // — handle HTTP errors (4xx/5xx) by resolving with an error object —
+            if (!response.ok) {
+                // if server wrapped its error in { error: { message, type?, invalid_fields? }, … }
+                if (
+                    payload &&
+                    typeof payload === 'object' &&
+                    typeof payload.error === 'object' &&
+                    typeof payload.error.message === 'string'
+                ) {
+                    return {
+                        status,
+                        error: {
+                            message: payload.error.message,
+                            type: payload.error.type,
+                            invalid_fields: payload.error.invalid_fields,
+                        },
+                        data: payload.data,
+                    };
+                }
+
+                // otherwise fall back to a generic single‐message error
+                const msg =
+                    typeof payload === 'string'
+                        ? payload
+                        : payload?.error?.toString() ?? JSON.stringify(payload);
+                return {
+                    status,
+                    error: { message: msg },
+                };
+            }
+
+            // — 2xx: success —
+            return { status, data: payload };
+        } catch (networkErr) {
+            // genuine network / system failure
+            throw networkErr;
+        }
+    },
+
+
+    // @deprecated.
     /* @docs:
         @nav: Frontend
         @chapter: Utils
@@ -580,7 +702,7 @@ const Utils = {
             @desc: A Promise that resolves with the response data.
             @type: Promise<any>
     */
-    request(options: {
+    request_v1(options: {
         method?: string,
         url?: string | null,
         data?: any,
@@ -721,7 +843,7 @@ const Utils = {
             @desc: void
             @type: void
     */
-    async on_load(func: () => HTMLElement | Promise<HTMLElement> | null): Promise<void> {
+    async on_load(func: () => HTMLElement | AnyElement | Promise<HTMLElement | AnyElement> | null | undefined): Promise<void> {
         // document.addEventListener("DOMContentLoaded", async () => {
             const splash = document.getElementById("__volt_splash_screen");
             if (splash != null) {
@@ -1258,3 +1380,4 @@ const Utils = {
 
 // Export.
 export { Utils };
+export { Utils as utils }; // also export as lowercase for compatibility.

package/frontend/src/ui/border_button.ts

@@ -4,51 +4,52 @@
  */
 
 // Imports.
-import { Elements, VAnchorElement, VDivElement, VDiv, VElementTagMap } from "../elements/module.js";
+import { Elements, VElement, VElementBaseSignature, VAnchorElement, VDivElement, VDiv, VElementTagMap } from "../elements/module.js";
 
 // BorderButton.
 /**
  * Supports a gradient color for the border combined with border radius.
  * Warning: this class is still experimental and may be subject to future change.
  */
-@Elements.register
+@Elements.create({
+    name: "BorderButtonElement",
+    default_style: {
+        "margin": "0px 0px 0px 0px",
+        "display": "inline-block",
+        "color": "inherit",
+        "text-align": "center",
+        "cursor": "pointer",
+        "position": "relative",
+        "z-index": "0",
+        "background": "none",
+        "user-select": "none",
+        "outline": "none",
+        "border": "none",
+        "text-decoration": "none",
+        // Custom.
+        "--child-color": "black",
+        "--child-background": "black",
+        "--child-border-width": "2px",
+        "--child-border-radius": "10px",
+        "--child-padding": "5px 10px 5px 10px",
+    },
+    default_events: {
+        "onmousedown": function (this: any): void {
+            this.style.filter = "brightness(80%)";
+        },
+        "onmouseover": function (this: any): void {
+            this.style.filter = "brightness(90%)";
+        },
+        "onmouseup": function (this: any): void {
+            this.style.filter = "brightness(100%)";
+        },
+        "onmouseout": function (this: any): void {
+            this.style.filter = "brightness(100%)";
+        },
+    },
+})
 export class BorderButtonElement extends VElementTagMap.a {
 
-	static default_style = {
-		"margin": "0px 0px 0px 0px",
-		"display": "inline-block",
-		"color": "inherit",
-		"text-align": "center",
-		"cursor": "pointer",
-		"position": "relative",
-		"z-index": "0",
-		"background": "none",
-		"user-select": "none",
-		"outline": "none",
-		"border": "none",
-		"text-decoration": "none",
-		// Custom.
-		"--child-color": "black",
-		"--child-background": "black",
-		"--child-border-width": "2px",
-		"--child-border-radius": "10px",
-		"--child-padding": "5px 10px 5px 10px",
-	};
-	static default_events = {
-		"onmousedown": function (this: any): void {
-			this.style.filter = "brightness(80%)";
-		},
-		"onmouseover": function (this: any): void {
-			this.style.filter = "brightness(90%)";
-		},
-		"onmouseup": function (this: any): void {
-			this.style.filter = "brightness(100%)";
-		},
-		"onmouseout": function (this: any): void {
-			this.style.filter = "brightness(100%)";
-		},
-	};
-
 	public nodes: {
 	    border: VDivElement;
 	    text: VDivElement;
@@ -311,6 +312,9 @@ export class BorderButtonElement extends VElementTagMap.a {
 	transition_border_color(val: string): this;
 	transition_border_color(val?: string): string | this {
 		if (val == null) { return this.nodes.border.transition(); }
+        else if (/[0-9]/.test(val.charAt(0))) {
+            val = "border-color " + val;
+        }
 		this.nodes.border.transition(typeof val !== "string" ? val : val.replace("border-color ", "background "));
 		return this;
 	}

package/frontend/src/ui/button.ts

@@ -4,42 +4,43 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js";
+import { Elements, VElementBaseSignature, VElement, VElementTagMap, VHTMLElement } from "../elements/module.js";
 
 // Button.
-@Elements.register
+@Elements.create({
+    name: "ButtonElement",
+    default_style: {
+        "margin": "0px 0px 0px",
+        "padding": "5px 10px 5px 10px",
+        "outline": "none",
+        "border": "none",
+        "border-radius": "10px",
+        "cursor": "pointer",
+        "color": "inherit",
+        "text-align": "center",
+        "display": "grid",
+        "align-items": "center",
+        "white-space": "nowrap",
+        "user-select": "none",
+        "text-decoration": "none",
+    },
+    default_events: {
+        "onmousedown": function (this: any): void {
+            this.style.filter = "brightness(80%)";
+        },
+        "onmouseover": function (this: any): void {
+            this.style.filter = "brightness(90%)";
+        },
+        "onmouseup": function (this: any): void {
+            this.style.filter = "brightness(100%)";
+        },
+        "onmouseout": function (this: any): void {
+            this.style.filter = "brightness(100%)";
+        },
+    },
+})
 export class ButtonElement extends VElementTagMap.a {
 
-	static default_style = {
-		"margin": "0px 0px 0px",
-		"padding": "5px 10px 5px 10px",
-		"outline": "none",
-		"border": "none",
-		"border-radius": "10px",
-		"cursor": "pointer",
-		"color": "inherit",
-		"text-align": "center",
-		"display": "grid",
-		"align-items": "center",
-		"white-space": "nowrap",
-		"user-select": "none",
-		"text-decoration": "none",
-	};
-	static default_events = {
-		"onmousedown": function (this: any): void {
-			this.style.filter = "brightness(80%)";
-		},
-		"onmouseover": function (this: any): void {
-			this.style.filter = "brightness(90%)";
-		},
-		"onmouseup": function (this: any): void {
-			this.style.filter = "brightness(100%)";
-		},
-		"onmouseout": function (this: any): void {
-			this.style.filter = "brightness(100%)";
-		},
-	};
-
 	/**
 	 * @docs:
 	 * @nav: Frontend

package/frontend/src/ui/canvas.ts

@@ -5,7 +5,7 @@
 
 // Imports.
 import { Utils } from "../modules/utils.js"
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 import { GradientType } from "../types/gradient.js"
 
 // Types.
@@ -23,9 +23,12 @@ type DotObject = {x: number, y: number, tension?: number};
  *	@warning:
  *		This class is still experimental and may be subject to future change.
  */
-@Elements.register
+@Elements.create({
+    name: "CanvasElement",
+})
 export class CanvasElement extends VElementTagMap.canvas {
 
+    // Attributes.
 	public _e: any;
 	public ctx_2d: any;
 

package/frontend/src/ui/checkbox.ts

@@ -4,7 +4,7 @@
  */
 
 // Imports.
-import { Elements } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement } from "../elements/module.js"
 import { VStack, VStackElement, HStack, HStackElement } from "./stack"
 import { Text, TextElement } from "./text"
 
@@ -17,23 +17,22 @@ interface CircleExtension {
 }
 
 // Extended input.
-@Elements.register
-export class CheckBoxElement extends VStackElement {
-
-	// Default styling.
-	// static default_style = Object.assign({}, HStackElement.default_style, {
-
-	static default_style = {
-		...VStackElement.default_style,
-		"color": "inherit",
-		"font-size": "16px",
-		// Custom.
-		"--circle-border-color": "gray",
-		"--circle-inner-bg": "#FFFFFF",
-		"--focus-color": "#8EB8EB",
-		"--missing-color": "#E8454E",
-	}
+@Elements.create({
+    name: "CheckBoxElement",
+    default_style: {
+        ...VStackElement.default_style,
+        "color": "inherit",
+        "font-size": "16px",
+        // Custom.
+        "--circle-border-color": "gray",
+        "--circle-inner-bg": "#FFFFFF",
+        "--focus-color": "#8EB8EB",
+        "--missing-color": "#E8454E",
+    },
+})
+export class CheckBoxElement extends (VStackElement as any as VElementBaseSignature) {
 
+    // Attributes.
 	public _border_color: string;
 	public _inner_bg: string;
 	public _focus_color: string;
@@ -60,7 +59,7 @@ export class CheckBoxElement extends VStackElement {
 
 		// Initialize super.
 		super();
-		this._init_derived({
+		this._init({
 			derived: CheckBoxElement,
 		})
 
@@ -85,8 +84,8 @@ export class CheckBoxElement extends VStackElement {
 		this.circle = VStack(
 				VStack()
 				.assign_to_parent_as("inner")
-				.border_radius(50%)
-				.frame(35%, 35%)
+				.border_radius("50%")
+				.frame("35%", "35%")
 				.background(this._inner_bg)
 				.flex_shrink(0)
 			)
@@ -95,7 +94,7 @@ export class CheckBoxElement extends VStackElement {
 			.border_width(1)
 			.border_style("solid")
 			.border_color(this._border_color)
-			.border_radius(50%)
+			.border_radius("50%")
 			.frame(15, 15)
 			.margin(2.5, 10, 0, 0)
 			.background("transparent")
@@ -137,7 +136,7 @@ export class CheckBoxElement extends VStackElement {
 
 		// The content.
 		this.content = HStack(this.circle, this.text)
-			.width(100%)
+			.width("100%")
 
 		// The error message.
 		this.error = Text("Incomplete field")