@vandenberghinc/volt 1.1.2

package/frontend/dist/ui/loader_button.js

@@ -0,0 +1,207 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2023 Daan van den Bergh.
+ */
+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;
+};
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+// Imports.
+import { Elements, VDiv } from "../elements/module.js";
+import { AnchorHStackElement } from "./stack";
+import { RingLoader } from "./loaders";
+export class myClass extends AnchorHStackElement {
+    constructor() { super(); }
+}
+// Loader button.
+/**
+ * @warning: you should not use function "LoaderButton.loader.hide() / LoaderButton.loader.show()" use "LoaderButton.hide_loader() / LoaderButton.show_loader()" instead.
+ * @warning: This class is still experimental and may be subject to future change.
+ */
+let LoaderButtonElement = (() => {
+    var _a;
+    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = AnchorHStackElement;
+    var LoaderButtonElement = _classThis = class extends _classSuper {
+        /**
+         * @docs:
+         * @title: Loader Button Constructor
+         * @desc: Initializes the LoaderButton element with the provided text and loader.
+         * @param:
+         *     @name: text
+         *     @descr: The text to display on the loader button.
+         *     @type: string
+         * @param:
+         *     @name: loader
+         *     @descr: The loader function to create the loading animation.
+         *     @type: Function
+         * @return:
+         *     @type: void
+         *     @description This constructor does not return a value.
+         */
+        constructor(text = "", loader = RingLoader) {
+            // Initialize base classes.
+            super();
+            this._init_derived({
+                derived: LoaderButtonElement,
+            });
+            // Set nodes type.
+            this.text = VDiv();
+            this.loader = loader();
+            this.nodes = {
+                // @deprecated the `nodes` object is deprecated but keep for backward compatability.
+                text: this.text,
+                loader: this.loader,
+            };
+            // Set style.
+            this.wrap(false);
+            this.center();
+            this.center_vertical();
+            // Children.
+            this.nodes.loader
+                .frame(LoaderButtonElement.default_style["--loader-width"], LoaderButtonElement.default_style["--loader-height"])
+                .background("white")
+                .update()
+                .hide()
+                .parent(this);
+            this.nodes.text
+                .text(text)
+                .margin(0)
+                .padding(0)
+                .parent(this);
+            // Add children.
+            this.append(this.nodes.loader, this.nodes.text);
+        }
+        styles(style_dict) {
+            if (style_dict == null) {
+                let styles = super.styles();
+                styles["--loader-width"] = this.nodes.loader.style.width || "20px";
+                styles["--loader-height"] = this.nodes.loader.style.height || "20px";
+                return styles;
+            }
+            else {
+                return super.styles(style_dict);
+            }
+        }
+        /**
+         * @docs:
+         * @title: Set Default
+         * @desc: Sets the default configuration for the LoaderButtonElement by calling the parent method.
+         * @return:
+         *     @type: this
+         *     @description Returns the instance of the element for chaining.
+         */
+        set_default() {
+            return super.set_default(LoaderButtonElement);
+        }
+        /**
+         * @docs:
+         * @title: Show Loader
+         * @desc: Displays the loader and disables the button when clicked.
+         * @return:
+         *     @type: this
+         *     @description Returns the instance of the element for chaining.
+         */
+        show_loader() {
+            this.disable();
+            this.nodes.text.hide();
+            this.nodes.loader.update();
+            this.nodes.loader.show();
+            return this;
+        }
+        /**
+         * @docs:
+         * @title: Start
+         * @desc: Initiates the loading process by showing the loader.
+         * @return:
+         *     @type: this
+         *     @description Returns the instance of the element for chaining.
+         */
+        // @ts-ignore
+        start() {
+            return this.show_loader();
+        }
+        /**
+         * @docs:
+         * @title: Hide Loader
+         * @desc: Hides the loader, enables the button, and shows the text on click event.
+         * @return:
+         *     @type: this
+         *     @description Returns the instance of the element for chaining.
+         */
+        hide_loader() {
+            this.enable();
+            this.nodes.loader.hide();
+            this.nodes.text.show();
+            return this;
+        }
+        stop() { return this.hide_loader(); }
+    };
+    __setFunctionName(_classThis, "LoaderButtonElement");
+    (() => {
+        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);
+        LoaderButtonElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+    })();
+    _classThis.default_style = {
+        "margin": "0px",
+        "padding": "12.5px 10px 12.5px 10px",
+        "border-radius": "25px",
+        "cursor": "pointer",
+        "background": "black",
+        "color": "inherit",
+        "font-size": "16px",
+        "user-select": "none",
+        "text-decoration": "none",
+        // Custom.
+        "--loader-width": "20px",
+        "--loader-height": "20px",
+    };
+    (() => {
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return LoaderButtonElement = _classThis;
+})();
+export { LoaderButtonElement };
+export const LoaderButton = Elements.wrapper(LoaderButtonElement);
+export const NullLoaderButton = Elements.create_null(LoaderButtonElement);
+const x = new LoaderButtonElement();
+x.style.color = "you";

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

@@ -0,0 +1,60 @@
+import { VElementTagMap } from "../elements/module.js";
+/**
+ * @docs:
+ * @chapter: Frontend
+ * @title: Ring Loader
+ * @desc:
+ * 		The ring loader element.
+ */
+export declare class RingLoaderElement extends VElementTagMap.div {
+    static default_style: {
+        width: string;
+        height: string;
+        "--child-background": string;
+        "--border-width-factor": string;
+        display: string;
+        position: string;
+    };
+    constructor();
+    /**
+     * @docs:
+     * @title: Backround
+     * @desc:
+     * 		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:
+     *     @name: value
+     *     @descr: The value to assign. Leave `null` to retrieve the attribute's value.
+     * @return:
+     *     @description Returns the `RingLoaderElement` object for chaining unless parameter `value` is `null`, then the attribute's value is returned.
+     * @funcs: 2
+     */
+    background(): string;
+    background(value: string): this;
+    /**
+     * @docs:
+     * @title: Border width by factor
+     * @desc: Set the border width by factor.
+     * @note: Dont forget to update the loader through `update()` after calling this function.
+     * @param:
+     * 		@name: number
+     * 		@descr: The float border width factor.
+     * @funcs: 2
+     */
+    border_width_factor(): number;
+    border_width_factor(value: number): this;
+    /**
+     * @docs:
+     * @title: Update
+     * @desc: Update the loader, this function needs to be called after initialization or after changing the frame, background or border.
+     */
+    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;
+    }
+}

package/frontend/dist/ui/loaders.js

@@ -0,0 +1,150 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+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;
+};
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js";
+// RingLoader.
+// - The width and height must be in pixels.
+/**
+ * @docs:
+ * @chapter: Frontend
+ * @title: Ring Loader
+ * @desc:
+ * 		The ring loader element.
+ */
+let RingLoaderElement = (() => {
+    var _a;
+    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.div;
+    var RingLoaderElement = _classThis = class extends _classSuper {
+        // Constructor.
+        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;
+        }
+        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;
+        }
+        /**
+         * @docs:
+         * @title: Update
+         * @desc: Update the loader, this function needs to be called after initialization or after changing the frame, background or border.
+         */
+        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;
+        }
+    };
+    __setFunctionName(_classThis, "RingLoaderElement");
+    (() => {
+        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 });
+    })();
+    _classThis.default_style = {
+        "width": "80px",
+        "height": "80px",
+        "--child-background": "black",
+        "--border-width-factor": "1",
+        "display": "inline-block",
+        "position": "relative",
+    };
+    (() => {
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return RingLoaderElement = _classThis;
+})();
+export { RingLoaderElement };
+export const RingLoader = Elements.wrapper(RingLoaderElement);
+export const NullRingLoader = Elements.create_null(RingLoaderElement);

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

@@ -0,0 +1,84 @@
+import { MutexType } from "../modules/mutex";
+import { HStackElement, VStackElement } from "./stack";
+import { TextElement } from "./text";
+import { TitleElement } from "./title";
+import { LoaderButtonElement } from "./loader_button";
+import { ImageMaskElement } from "./image";
+export type OnYesNoPopup = ((element: PopupElement) => Promise<any> | void);
+export declare class PopupElement extends VStackElement {
+    p_mutex: MutexType;
+    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;
+    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;
+        text: string;
+        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;
+        no?: string;
+        yes?: string;
+        image?: boolean | string;
+        image_color?: string;
+        content?: any[];
+        on_no?: OnYesNoPopup;
+        on_yes?: OnYesNoPopup;
+    }): Promise<void>;
+}
+export declare const Popup: <Extensions extends object = {}>(args_0: {
+    title: string;
+    text: string;
+    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;
+}) => PopupElement & Extensions;
+export declare const NullPopup: <Extensions extends object = {}>() => PopupElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        PopupElement: PopupElement;
+    }
+}