@vandenberghinc/volt 1.1.4 → 1.1.6

package/frontend/dist/{ui → modules}/theme.js

@@ -3,9 +3,9 @@
  * Copyright: © 2022 - 2024 Daan van den Bergh.
  */
 // Imports.
-import { Elements } from "../elements/module.js";
-import { Colors } from "../modules/colors";
-import { Themes as ThemesModule } from "../modules/themes";
+import { Color } from "./color.js";
+import { Themes as ThemesModule } from "./themes.js";
+const ThemeIdList = ["dark", "light"];
 // Themes class.
 /* 	@docs:
     @nav: Frontend
@@ -29,12 +29,17 @@ import { Themes as ThemesModule } from "../modules/themes";
         When theme attributes are retrieved, by default they will be the active theme's attribute as a css variable. So this can be passed to an element.
         However, some element functions do not accept css variables, in this case the `value()` function can be used to retrieve the raw value. Do not forget to apply an `on_theme_update()` callback on the elements where you use this.
  */
-export class ThemeClass {
-    constructor(id, themes = {}) {
+export class Theme {
+    // helper: union of all keys across all themes
+    // Attributes.
+    active_id;
+    active;
+    _attrs;
+    _css_vars;
+    _id;
+    _on_activate_callback;
+    constructor(id, themes) {
         // Attributes.
-        this.active_id = undefined;
-        this.active = undefined;
-        this._theme_ids = [];
         this._attrs = [];
         this._css_vars = {};
         this._id = id;
@@ -42,7 +47,6 @@ export class ThemeClass {
         Object.keys(themes).iterate((theme) => {
             // Initialize.
             const theme_style = themes[theme];
-            this._theme_ids.append(theme);
             this[theme] = theme_style;
             // Activate first theme.
             if (this.active_id === undefined) {
@@ -57,7 +61,68 @@ export class ThemeClass {
                 this._add_attr(id, theme);
             });
         });
+        // Ensure type.
+        if (this.active_id == null || this.active == null) {
+            throw new Error("No themes were specified in parameter \"themes\".");
+        }
+    }
+    /**
+     * Initialize a specific theme.
+     * @note This function should be called after the constructor to ensure the most recent theme is activated, argument "id" can be left undefined.
+     */
+    initialize(id) {
+        if (id == null) {
+            id = (localStorage.getItem(this._id) ?? undefined);
+        }
+        if (id != null && ThemeIdList.includes(id)) {
+            this.activate(id);
+        }
+        return this;
+    }
+    // ---------------------------------------------------------------------
+    // Theme selection methods.
+    /** Get full active theme id. */
+    get id() {
+        return `${this._id}.${String(this.active_id)}`;
+    }
+    // Get cached active subtheme id.
+    get_active_id_cached() {
+        return localStorage.getItem(this._id) ?? "";
+    }
+    // Activate a theme.
+    activate(id, apply_theme_update = true) {
+        if (ThemeIdList.includes(id) === false || this[id] === undefined) {
+            throw Error(`Theme "${id}" does not exist.`);
+        }
+        this.active_id = id;
+        this.active = this[id];
+        Object.keys(this.active).iterate((id) => {
+            document.documentElement.style.setProperty(`--${this._id}_${id}`, this.active[id] ?? "");
+        });
+        if (this._on_activate_callback != null) {
+            this._on_activate_callback(this, this.active_id);
+        }
+        if (apply_theme_update) {
+            ThemesModule.apply_theme_update();
+        }
+        localStorage.setItem(this._id, String(this.active_id));
+        return this;
+    }
+    on_activate(callback) {
+        if (callback == null) {
+            return this._on_activate_callback;
+        }
+        this._on_activate_callback = callback;
+        return this;
     }
+    // Toggle themes.
+    toggle(apply_theme_update = true) {
+        const other = this.active_id === "dark" ? "light" : "dark";
+        this.activate(other, apply_theme_update);
+        return this;
+    }
+    // ---------------------------------------------------------------------
+    // Adding values.
     // Add a new attribute.
     _add_attr(id, theme) {
         if (theme == null) {
@@ -112,18 +177,8 @@ export class ThemeClass {
         // Response.
         return this;
     }
-    get id() {
-        return `${this._id}.${this.active_id}`;
-    }
-    // Initialize by cached.
-    initialize(id) {
-        if (id == null) {
-            id = localStorage.getItem(this._id) ?? undefined;
-        }
-        if (id != null && this._theme_ids.includes(id)) {
-            this.activate(id);
-        }
-        return this;
+    get raw() {
+        return this.active;
     }
     // Get raw value.
     value(id) {
@@ -132,16 +187,65 @@ export class ThemeClass {
         }
         return this.active[id];
     }
+    // ---------------------------------------------------------------------
+    // Color manipulation methods.
+    // Create a new color for each theme.
+    create(id, create_theme_value) {
+        // Already created.
+        if (this._css_vars[id]) {
+            throw new Error(`Color "${id}" already exists.`);
+        }
+        // Iterate.
+        let index = 0;
+        for (const theme_id of ThemeIdList) {
+            const theme = this[theme_id];
+            const value = create_theme_value(theme_id, theme);
+            theme[id] = value;
+            // Add attribute to document on first call.
+            if (index === 0) {
+                this._add_attr(id);
+            }
+            // Set property.
+            if (this.active_id === theme_id) {
+                document.documentElement.style.setProperty(`--${this._id}_${id}`, theme[id]);
+            }
+            // Incr index
+            ++index;
+        }
+    }
+    /**
+     * Auto darken lighten a color from the theme
+     * Safe to call multiple times, caching is implemented.
+     *
+     * @warning The input color must be a hex / rgb(a) string.
+     * @param theme_attr The name of the original theme color.
+     * @param percent Percentage between 0. and 1.0.
+     */
+    auto_darken_lighten(theme_attr, percent = 0.5, reversed = false) {
+        let full_id = `${String(theme_attr)}_adl_${percent}`;
+        full_id = full_id.replaceAll(".", "_");
+        if (this._css_vars[full_id]) {
+            return this._css_vars[full_id];
+        }
+        const process = reversed === true ? (x => x < 0.5) : (x => x > 0.5);
+        this.create(full_id, (theme_id, theme) => {
+            if (!theme[theme_attr]) {
+                throw new Error(`Theme attribute "${String(theme_attr)}" does not exist.`);
+            }
+            return new Color(theme[theme_attr]).auto_darken_lighten(percent, process).str();
+        });
+        return this._css_vars[full_id];
+    }
     // Opacity.
     // Opacity must be a number `0.0` till `1.0`, and may also be an object with opacity pet theme `{dark: 0.2, light: 0.35}`.
-    opacity(id, opacity = 1.0) {
+    opacity(theme_attr, opacity = 1.0) {
         // Create full id.
         let full_id;
         if (typeof opacity === "number") {
-            full_id = `${id}_opac_${opacity}`;
+            full_id = `${String(theme_attr)}_opac_${opacity}`;
         }
         else {
-            full_id = `${id}_opac_${Object.values(opacity).join("_")}`;
+            full_id = `${String(theme_attr)}_opac_${Object.values(opacity).join("_")}`;
         }
         full_id = full_id.replaceAll(".", "_");
         // Already created.
@@ -150,26 +254,26 @@ export class ThemeClass {
         }
         // Iterate.
         let index = 0;
-        for (const theme_id of this._theme_ids) {
+        for (const theme_id of ThemeIdList) {
             const theme = this[theme_id];
             // Checks.
-            if (theme[id] == null) {
-                console.error(new Error(`Theme attribute "${id}" does not exist.`));
+            if (theme[theme_attr] == null) {
+                console.error(new Error(`Theme attribute "${String(theme_attr)}" does not exist.`));
                 return "";
             }
-            if (theme[id]._is_gradient) {
-                console.error(new Error(`Unable to set the opacity on gradient color "${id}".`));
+            if (theme[theme_attr]._is_gradient) {
+                console.error(new Error(`Unable to set the opacity on gradient color "${String(theme_attr)}".`));
                 return "";
             }
             // Create new color.
             let theme_opac = opacity;
             if (typeof theme_opac === "object") {
-                theme_opac = theme_opac[this._theme_ids[index]];
+                theme_opac = theme_opac[theme_attr];
                 if (theme_opac === undefined) {
-                    console.error(new Error(`Unable to find the opacity on for theme id "${this._theme_ids[index]}".`));
+                    console.error(new Error(`Unable to find the opacity on for theme id "${theme_attr}".`));
                 }
             }
-            theme[full_id] = Colors.set_opacity(theme[id], theme_opac);
+            theme[full_id] = new Color(theme[theme_attr]).opacity(theme_opac).rgb();
             // Add css var.
             if (index === 0) {
                 this._add_attr(full_id);
@@ -183,55 +287,62 @@ export class ThemeClass {
         }
         return this._css_vars[full_id];
     }
-    // Activate a theme.
-    activate(id, apply_theme_update = true) {
-        if (this._theme_ids.includes(id) === false || this[id] === undefined) {
-            throw Error(`Theme "${id}" does not exist.`);
+    // ---------------------------------------------------------------------
+    // Font size manipulation methods.
+    /**
+     * Create a new value by multiplying a numeric attribute.
+     * @warning argument `id` should be the name of a numeric theme attribute.
+     * @param theme_attr The name of a numeric attribute
+     * @param x The number by which to multiply the attribute, `attribute * x`.
+     */
+    multiply(theme_attr, x = 1.0) {
+        let full_id = `${String(theme_attr)}_fsr_${x}`;
+        full_id = full_id.replaceAll(".", "_");
+        if (this._css_vars[full_id]) {
+            return this._css_vars[full_id];
         }
-        this.active_id = id;
-        this.active = this[id];
-        Object.keys(this.active).iterate((id) => {
-            document.documentElement.style.setProperty(`--${this._id}_${id}`, this.active[id] ?? "");
+        const process = (x => x < 0.5);
+        this.create(full_id, (_, theme) => {
+            if (!theme[theme_attr]) {
+                throw new Error(`Theme attribute "${String(theme_attr)}" does not exist.`);
+            }
+            if (typeof theme[theme_attr] !== "number") {
+                throw new Error(`Theme attribute "${String(theme_attr)}" is not a number.`);
+            }
+            return theme[theme_attr] * x;
         });
-        if (this._on_activate_callback != null) {
-            this._on_activate_callback(this, this.active_id);
-        }
-        if (apply_theme_update) {
-            ThemesModule.apply_theme_update();
-        }
-        localStorage.setItem(this._id, this.active_id);
-        return this;
+        return this._css_vars[full_id];
     }
-    on_activate(callback) {
-        if (callback == null) {
-            return this._on_activate_callback;
-        }
-        this._on_activate_callback = callback;
+    // ---------------------------------------------------------------------
+    // Animation methods.
+    /** Function to disable all transition attributes on all elements. */
+    disable_transitions() {
+        // const style = document.createElement('style');
+        //     style.id = '__libris_thme_disable_transitions__';
+        //     style.innerHTML = `
+        //     * { transition: none !important; }
+        //     *::after { transition: none !important; }
+        //     *::before { transition: none !important; }
+        // `.dedent();
+        // document.head.appendChild(style);
+        document.body.classList.add("notransition");
+        // Force a reflow to apply the new styles immediately
+        // document.head.getBoundingClientRect();
+        void document.body.offsetHeight;
         return this;
     }
-    // Get cached active subtheme id.
-    get_active_id_cached() {
-        return localStorage.getItem(this._id) ?? "";
-    }
-    // Toggle themes.
-    toggle(apply_theme_update = true) {
-        if (this._theme_ids.length > 1) {
-            let active_index = -1;
-            for (let i = 0; i < this._theme_ids.length; i++) {
-                if (this._theme_ids[i] === this.active_id) {
-                    active_index = i;
-                    break;
-                }
-            }
-            if (active_index !== -1 && active_index + 1 < this._theme_ids.length) {
-                this.activate(this._theme_ids[active_index + 1], apply_theme_update);
-            }
-            else {
-                this.activate(this._theme_ids[0], apply_theme_update);
-            }
+    /** Function to re-enable all transition attributes on all elements. */
+    enable_transitions(delay = 0) {
+        if (delay > 0) {
+            setTimeout(() => this.enable_transitions(0), delay);
+            return this;
         }
+        document.body.classList.remove("notransition");
+        // const style = document.getElementById('__libris_thme_disable_transitions__');
+        // if (style) {
+        //     style.remove();
+        // }
+        document.head.getBoundingClientRect();
         return this;
     }
 }
-export const Theme = Elements.wrapper(ThemeClass);
-export const NullTheme = Elements.create_null(ThemeClass); //@todo duplicate name from Themes

package/frontend/dist/modules/themes.d.ts

@@ -5,4 +5,4 @@ export declare const Themes: {
     theme_elements: ThemeElement[];
     apply_theme_update(): void;
 };
-export {};
+export { Themes as themes };

package/frontend/dist/modules/themes.js

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

package/frontend/dist/modules/user.d.ts

@@ -56,3 +56,4 @@ export declare namespace User {
     function save(path?: string, data?: Record<string, any>): Promise<any>;
     function load_protected(path: string, def?: string): Promise<any>;
 }
+export { User as user };

package/frontend/dist/modules/user.js

@@ -110,7 +110,7 @@ export var User;
      *		@type: boolean
      */
     async function get() {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/user/",
             data: {
@@ -128,7 +128,7 @@ export var User;
      *	@return: Returns a promise with a successful update response or a request error on a failed request.
      */
     async function set(user) {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/user/",
             data: user,
@@ -144,7 +144,7 @@ export var User;
      *	@return: Returns a promise with a successful update response or a request error on a failed request.
      */
     async function activate(code = "") {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/auth/activate",
             data: {
@@ -162,7 +162,7 @@ export var User;
      *	@return: Returns a promise with a successful update response or a request error on a failed request.
      */
     async function change_password({ current_password = "", password = "", verify_password = "", }) {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/user/change_password",
             data: {
@@ -182,7 +182,7 @@ export var User;
      *	@return: Returns a promise with a successful update response or a request error on a failed request.
      */
     async function delete_account() {
-        return Utils.request({
+        return Utils.request_v1({
             method: "DELETE",
             url: "/volt/user",
         });
@@ -197,7 +197,7 @@ export var 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.
      */
     async function generate_api_key() {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/user/api_key",
         });
@@ -212,7 +212,7 @@ export var User;
      *	@return: Returns a promise with a successful update response or a request error on a failed request.
      */
     async function revoke_api_key() {
-        return Utils.request({
+        return Utils.request_v1({
             method: "DELETE",
             url: "/volt/user/api_key",
         });
@@ -227,7 +227,7 @@ export var User;
      *	@return: Returns a promise with the loaded user's data or a request error on a failed request.
      */
     async function load(path, def = "") {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/user/data",
             data: {
@@ -246,7 +246,7 @@ export var User;
      *	@return: Returns a promise with a successful update response or a request error on a failed request.
      */
     async function save(path = "", data = {}) {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/user/data",
             data: {
@@ -265,7 +265,7 @@ export var User;
      *	@return: Returns a promise with the loaded user's data or a request error on a failed request.
      */
     async function load_protected(path, def = "") {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/user/data/protected",
             data: {
@@ -277,3 +277,4 @@ export var User;
     User.load_protected = load_protected;
 })(User || (User = {}));
 ;
+export { User as user }; // also export as lowercase for compatibility.

package/frontend/dist/modules/utils.d.ts

@@ -1,3 +1,4 @@
+import { AnyElement } from "../ui/any_element";
 declare const Utils: {
     is_apple: boolean;
     is_safari: boolean;
@@ -30,7 +31,26 @@ declare const Utils: {
         a: number;
     };
     deep_copy(obj: any): any;
-    request(options: {
+    /** New request method. */
+    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;
+    }>;
+    request_v1(options: {
         method?: string;
         url?: string | null;
         data?: any;
@@ -38,7 +58,7 @@ declare const Utils: {
         credentials?: "include" | "same-origin" | "omit";
         headers?: Record<string, string>;
     }): Promise<any>;
-    on_load(func: () => HTMLElement | Promise<HTMLElement> | null): Promise<void>;
+    on_load(func: () => HTMLElement | AnyElement | Promise<HTMLElement | AnyElement> | null | undefined): Promise<void>;
     unix_to_date(unix: number, mseconds?: boolean | null): string;
     fuzzy_search({ query, targets, limit, case_match, allow_exceeding_chars, get_matches, key, nested_key, }: {
         query: string;
@@ -56,3 +76,4 @@ declare const Utils: {
     on_resize_observer: ResizeObserver;
 };
 export { Utils };
+export { Utils as utils };

package/frontend/dist/modules/utils.js

@@ -524,6 +524,97 @@ const Utils = {
             return obj;
         }
     },
+    /** New request method. */
+    async request(options) {
+        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;
+        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 = { 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;
+            const clone = response.clone(); // @dev.
+            if (json) {
+                try {
+                    payload = await response.json();
+                }
+                catch (e) {
+                    // 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) {
+                    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
@@ -544,7 +635,7 @@ const Utils = {
             @desc: A Promise that resolves with the response data.
             @type: Promise<any>
     */
-    request(options) {
+    request_v1(options) {
         const { method = "GET", url = null, data = null, json = true, credentials = "same-origin", headers = {}, } = options;
         // Set headers.
         // Host and User-Agent headers are restricted and set by the browser itself.
@@ -1157,3 +1248,4 @@ const Utils = {
 };
 // Export.
 export { Utils };
+export { Utils as utils }; // also export as lowercase for compatibility.

package/frontend/dist/types/gradient.js

@@ -20,6 +20,10 @@
  *			Or the arguments can be as `new GradientType("linear", "black", "0%", "white", "100%")`.
  */
 export class GradientType {
+    gradient;
+    type;
+    degree;
+    colors;
     constructor(...args) {
         if (args.length === 1) {
             this.gradient = args[0];

package/frontend/dist/ui/border_button.d.ts

@@ -4,31 +4,6 @@ import { VDivElement, VElementTagMap } from "../elements/module.js";
  * Warning: this class is still experimental and may be subject to future change.
  */
 export declare class BorderButtonElement extends VElementTagMap.a {
-    static default_style: {
-        margin: string;
-        display: string;
-        color: string;
-        "text-align": string;
-        cursor: string;
-        position: string;
-        "z-index": string;
-        background: string;
-        "user-select": string;
-        outline: string;
-        border: string;
-        "text-decoration": string;
-        "--child-color": string;
-        "--child-background": string;
-        "--child-border-width": string;
-        "--child-border-radius": string;
-        "--child-padding": string;
-    };
-    static default_events: {
-        onmousedown: (this: any) => void;
-        onmouseover: (this: any) => void;
-        onmouseup: (this: any) => void;
-        onmouseout: (this: any) => void;
-    };
     nodes: {
         border: VDivElement;
         text: VDivElement;