@vandenberghinc/volt 1.2.6 → 1.2.8

package/frontend/dist/frontend/src/ui/loaders.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { VElementTagMap } from "../elements/module.js";
+/**
+ * The ring loader element.
+ * @chapter Frontend
+ * @docs
+ */
+export declare class RingLoaderElement extends VElementTagMap.div {
+    /**
+     * Create a new ring loader element and initialize it with default styles, then call `update()` to render.
+     */
+    constructor();
+    /**
+     * Background.
+     *
+     * Set the background value. Returns the attribute value when parameter `value` is `null`.
+     * @note Dont forget to update the loader through `update()` after calling this function.
+     * @param value The value to assign. Leave `null` to retrieve the attribute's value.
+     * @returns Returns the `RingLoaderElement` object for chaining unless parameter `value` is `null`, then the attribute's value is returned.
+     * @docs
+     */
+    background(): string;
+    background(value: string): this;
+    /**
+     * Get or set the color, which maps to the internal `--child-background` style variable.
+     * @param value The color to assign. Leave `null`/`undefined` to retrieve the current value.
+     * @returns Returns the `RingLoaderElement` object for chaining unless parameter `value` is `null`/`undefined`, then the current value is returned.
+     */
+    color(): string;
+    color(value: string): this;
+    /**
+     * Set the border width by factor.
+     * @note Dont forget to update the loader through `update()` after calling this function.
+     * @param value The float border width factor.
+     * @docs
+     */
+    border_width_factor(): number;
+    border_width_factor(value: number): this;
+    /**
+     * Update the loader, this function needs to be called after initialization or after changing the frame, background or border.
+     * @docs
+     */
+    update(): this;
+}
+export declare const RingLoader: <Extensions extends object = {}>() => RingLoaderElement & Extensions;
+export declare const NullRingLoader: <Extensions extends object = {}>() => RingLoaderElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        RingLoaderElement: RingLoaderElement;
+    }
+}
+export declare const SpinnerElement: typeof RingLoaderElement;
+export declare const SpinnerLoader: <Extensions extends object = {}>() => RingLoaderElement & Extensions;
+export declare const NullSpinnerLoader: <Extensions extends object = {}>() => RingLoaderElement & Extensions;

package/frontend/dist/frontend/src/ui/loaders.js

@@ -0,0 +1,157 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js";
+// RingLoader.
+// - The width and height must be in pixels.
+/**
+ * The ring loader element.
+ * @chapter Frontend
+ * @docs
+ */
+let RingLoaderElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "RingLoaderElement",
+            default_style: {
+                "width": "80px",
+                "height": "80px",
+                "--child-background": "black",
+                "--border-width-factor": "1",
+                "display": "inline-block",
+                "position": "relative",
+            },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.div;
+    var RingLoaderElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            RingLoaderElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        // Constructor.
+        /**
+         * Create a new ring loader element and initialize it with default styles, then call `update()` to render.
+         */
+        constructor() {
+            // Initialize base class.
+            super({
+                derived: RingLoaderElement,
+            });
+            // Set default.
+            this.update();
+        }
+        background(value) {
+            if (value == null) {
+                return this.style["--child-background"];
+            }
+            this.style["--child-background"] = value;
+            return this;
+        }
+        color(value) {
+            if (value == null) {
+                return this.style["--child-background"];
+            }
+            this.style["--child-background"] = value;
+            return this;
+        }
+        border_width_factor(value) {
+            if (value == null) {
+                return this.style["--border-width-factor"] == null ? 1.0 : parseFloat(this.style["--border-width-factor"]);
+            }
+            this.style["--border-width-factor"] = value.toString();
+            return this;
+        }
+        /**
+         * Update the loader, this function needs to be called after initialization or after changing the frame, background or border.
+         * @docs
+         */
+        update() {
+            this.remove_children();
+            const width = parseFloat(this.style.width.replace("px", ""));
+            const height = parseFloat(this.style.height.replace("px", ""));
+            const background = this.style["--child-background"];
+            const border_width_factor = parseFloat(this.style["--border-width-factor"]);
+            const children_style = {
+                "box-sizing": "border-box",
+                "display": "block",
+                "position": "absolute",
+                "width": `${width * (64.0 / 80.0)}px`,
+                "height": `${height * (64.0 / 80.0)}px`,
+                "margin": `${width * (8.0 / 80.0)}px`,
+                // "border": `${width * (8.0 / 80.0)}px solid ${background}`,
+                "border": `${width * (8.0 / 80.0 * border_width_factor)}px solid ${background}`,
+                "border-color": `${background} transparent transparent transparent`,
+                "border-radius": "50%",
+                "animation": "RingLoader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite",
+            };
+            for (let i = 0; i < 4; i++) {
+                let e = document.createElement("div");
+                for (let attr in children_style) {
+                    e.style[attr] = children_style[attr];
+                }
+                if (i == 1) {
+                    e.style.animationDelay = "-0.45s";
+                }
+                else if (i == 2) {
+                    e.style.animationDelay = "-0.3s";
+                }
+                else if (i == 3) {
+                    e.style.animationDelay = "-0.15s";
+                }
+                this.append(e);
+            }
+            return this;
+        }
+    };
+    return RingLoaderElement = _classThis;
+})();
+export { RingLoaderElement };
+export const RingLoader = Elements.wrapper(RingLoaderElement);
+export const NullRingLoader = Elements.create_null(RingLoaderElement);
+// Alias Spinner for RingLoader.
+export const SpinnerElement = RingLoaderElement;
+export const SpinnerLoader = Elements.wrapper(SpinnerElement);
+export const NullSpinnerLoader = Elements.create_null(SpinnerElement);
+// declare module './any_element.d.ts' { interface AnyElementMap { SpinnerElement: SpinnerElement } }

package/frontend/dist/frontend/src/ui/popup.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { Mutex } from "@vandenberghinc/vlib/frontend";
+import { VElementBaseSignature, AppendType } from "../elements/module.js";
+import { HStackElement, VStackElement } from "./stack.js";
+import { TextElement } from "./text.js";
+import { TitleElement } from "./title.js";
+import { LoaderButtonElement } from "./button.js";
+import { ImageMaskElement } from "./image.js";
+export type OnYesNoPopup = ((element: YesNoPopupElement) => Promise<any> | void);
+declare const YesNoPopupElement_base: VElementBaseSignature;
+export declare class YesNoPopupElement extends YesNoPopupElement_base {
+    p_mutex: Mutex;
+    p_auto_hide: boolean;
+    p_auto_remove: boolean;
+    p_animation_duration: number;
+    p_blur: number;
+    p_on_no_handler: OnYesNoPopup;
+    p_on_yes_handler: OnYesNoPopup;
+    p_on_popup_handler: OnYesNoPopup;
+    p_escape_handler: any;
+    image: ImageMaskElement;
+    title: TitleElement;
+    text: TextElement;
+    no_button: LoaderButtonElement;
+    yes_button: LoaderButtonElement;
+    buttons: HStackElement;
+    header: VStackElement;
+    content: VStackElement;
+    widget: VStackElement;
+    _on_no_called: boolean;
+    constructor({ title, text, no, yes, image, image_color, content, auto_hide, auto_remove, animation_duration, // in ms.
+    blur, on_no, on_yes, on_popup, }: {
+        title: string;
+        /** The text content (string) or children elements to be added to the text node. */
+        text: string | AppendType[];
+        no?: string;
+        yes?: string;
+        image?: boolean | string;
+        image_color?: string;
+        content?: any[];
+        auto_hide?: boolean;
+        auto_remove?: boolean;
+        animation_duration?: number;
+        blur?: number;
+        on_no?: OnYesNoPopup;
+        on_yes?: OnYesNoPopup;
+        on_popup?: OnYesNoPopup;
+    });
+    set_default(): this;
+    await(): Promise<void>;
+    remove_animation(): Promise<void>;
+    hide_animation(): Promise<void>;
+    close(): Promise<void>;
+    image_color(): string;
+    image_color(value: string): this;
+    popup({ title, text, image, image_color, content, on_no, on_yes, }?: {
+        title?: string;
+        text?: string | AppendType[];
+        no?: string;
+        yes?: string;
+        image?: boolean | string;
+        image_color?: string;
+        content?: any[];
+        on_no?: OnYesNoPopup;
+        on_yes?: OnYesNoPopup;
+    }): Promise<void>;
+}
+export declare const YesNoPopup: <Extensions extends object = {}>(args_0: {
+    title: string;
+    /** The text content (string) or children elements to be added to the text node. */
+    text: string | AppendType[];
+    no?: string;
+    yes?: string;
+    image?: boolean | string;
+    image_color?: string;
+    content?: any[];
+    auto_hide?: boolean;
+    auto_remove?: boolean;
+    animation_duration?: number;
+    blur?: number;
+    on_no?: OnYesNoPopup;
+    on_yes?: OnYesNoPopup;
+    on_popup?: OnYesNoPopup;
+}) => YesNoPopupElement & Extensions;
+export declare const NullYesNoPopup: <Extensions extends object = {}>() => YesNoPopupElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        YesNoPopupElement: YesNoPopupElement;
+    }
+}
+export {};