@vandenberghinc/volt 1.2.5 → 1.2.6

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

@@ -1,94 +0,0 @@
-/**
- * @author Daan van den Bergh
- * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
- */
-import { VDivElement, VElementTagMap } from "../elements/module.js";
-/**
- * Supports a gradient color for the border combined with border radius.
- * Warning: this class is still experimental and may be subject to future change.
- */
-export declare class BorderButtonElement extends VElementTagMap.a {
-    nodes: {
-        border: VDivElement;
-        text: VDivElement;
-        [key: string]: any;
-    };
-    /**
-     * Initializes a new instance of the BorderButton element with the provided text.
-     * @param text The text to be displayed on the BorderButton.
-     * @returns This constructor does not return a value.
-     * @docs
-     */
-    constructor(text?: string);
-    /**
-     * Sets or gets the gradient color for the border element. If no value is provided, the current background is returned.
-     * @param value The color value to set for the gradient.
-     * @returns When a value is provided, returns this for chaining; otherwise, returns the current background value.
-     * @docs
-     */
-    gradient(): string;
-    gradient(value: string | null): this;
-    /**
-     * Sets or gets the border color of the element. If no value is provided, the current border color is returned.
-     * @param value The color value to set for the border.
-     * @returns When a value is provided, returns this for chaining; otherwise, returns the current border color.
-     * @docs
-     */
-    border_color(): string;
-    border_color(value: string | null): this;
-    /**
-     * Sets or retrieves the border width of the element. If no argument is passed, the current border width (padding) is returned.
-     * @param value The value of the border width to set.
-     * @returns When a value is provided, returns this for chaining; otherwise, returns the current border width.
-     * @docs
-     */
-    border_width(): string;
-    border_width(value: string | number): this;
-    /**
-     * Sets or gets the border radius for the element. If no value is provided, the current border radius is returned.
-     * @param value The value for the border radius to set.
-     * @returns Returns the current border radius if no value is provided; otherwise, returns this for chaining.
-     * @docs
-     */
-    border_radius(): string;
-    border_radius(value: string | number): this;
-    /**
-     * Sets or retrieves the color of the child text. When a value is provided, it updates the color; when omitted, it returns the current color.
-     * @param value The color value to set for the child text.
-     * @returns Returns the current color if no value is provided; otherwise, returns this for chaining.
-     * @docs
-     */
-    color(): string;
-    color(value: string): this;
-    /**
-     * Retrieves or sets the styling attributes for the element. If no argument is provided, styles are computed from child elements.
-     * @param style_dict A dictionary of styles to set. If omitted, the method computes styles based on child elements.
-     * @returns Returns the computed styles when no argument is passed, or the result of the super method when an argument is provided.
-     * @docs
-     */
-    styles(): Record<string, string>;
-    styles(style_dict: Record<string, any>): this;
-    /**
-     * Sets or gets the text of the element. If a value is provided, it sets the text; otherwise, it returns the current text.
-     * @param val The value to set as text or omitted to retrieve the current text.
-     * @returns When a value is provided, returns this for chaining; otherwise, returns the current text.
-     * @docs
-     */
-    text(): string;
-    text(val: string): this;
-    /**
-     * Sets or retrieves the transition for the border color of the element.
-     * @param val The value to set for the transition or omit to retrieve the current transition.
-     * @returns When a value is provided, returns this for chaining; otherwise, returns the already set transition value.
-     * @docs
-     */
-    transition_border_color(): string;
-    transition_border_color(val: string): this;
-}
-export declare const BorderButton: <Extensions extends object = {}>(text?: string | undefined) => BorderButtonElement & Extensions;
-export declare const NullBorderButton: <Extensions extends object = {}>() => BorderButtonElement & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        BorderButtonElement: BorderButtonElement;
-    }
-}

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

@@ -1,228 +0,0 @@
-/**
- * @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, 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.
- */
-let BorderButtonElement = (() => {
-    let _classDecorators = [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.style.filter = "brightness(80%)";
-                },
-                "onmouseover": function () {
-                    this.style.filter = "brightness(90%)";
-                },
-                "onmouseup": function () {
-                    this.style.filter = "brightness(100%)";
-                },
-                "onmouseout": function () {
-                    this.style.filter = "brightness(100%)";
-                },
-            },
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = VElementTagMap.a;
-    var BorderButtonElement = 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);
-            BorderButtonElement = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        nodes;
-        /**
-         * Initializes a new instance of the BorderButton element with the provided text.
-         * @param text The text to be displayed on the BorderButton.
-         * @returns This constructor does not return a value.
-         * @docs
-         */
-        constructor(text = "") {
-            // Initialize base classes.
-            super({
-                derived: BorderButtonElement,
-            });
-            // Set nodes type.
-            this.nodes = {
-                border: VDiv(),
-                text: VDiv(),
-            };
-            // Set default styling.
-            // let styles = { ...BorderButton.default_style };
-            // delete styles["--child-color"];
-            // delete styles["--child-background"];
-            // delete styles["--child-border-width"];
-            // delete styles["--child-padding"];
-            // delete styles["--child-background-image"];
-            // delete styles["--child-background-clip"];
-            // delete styles["--child-webkit-background-clip"];
-            // this.styles(styles);
-            // Border child so it can support border gradients.
-            this.nodes.border
-                .content("")
-                .position("absolute")
-                // .z_index(-1)
-                .inset(0)
-                .padding(BorderButtonElement.default_style["--child-border-width"])
-                .border_radius(BorderButtonElement.default_style["--child-border-radius"])
-                .background(BorderButtonElement.default_style["--child-background"])
-                .mask("linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)")
-                .mask_composite("exclude")
-                // .mask_composite((navigator.userAgent.includes("Firefox") || navigator.userAgent.includes("Mozilla")) ? "exclude" : "xor")
-                .styles({
-                "-webkit-mask": "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-                "-webkit-mask-composite": (navigator.userAgent.includes("Firefox") || navigator.userAgent.includes("Mozilla")) ? "exclude" : "xor",
-            });
-            // Text child.
-            // do not use a Text object since inheritance of text styling is required.
-            this.nodes.text
-                .color(BorderButtonElement.default_style["--child-color"])
-                .append(text);
-            if (BorderButtonElement.default_style["--child-color"] == "transparent") {
-                this.nodes.text.style.backgroundImage = BorderButtonElement.default_style["--child-background-image"];
-                this.nodes.text.style.backgroundClip = BorderButtonElement.default_style["--child-background-clip"];
-                this.nodes.text.style["-webkit-background-clip"] = BorderButtonElement.default_style["--child-webkit-background-clip"];
-            }
-            // Append.
-            this.append(this.nodes.border, this.nodes.text);
-        }
-        gradient(value) {
-            if (value == null) {
-                return this.nodes.border.background();
-            }
-            this.nodes.border.background(value);
-            return this;
-        }
-        border_color(value) {
-            if (value == null) {
-                return this.nodes.border.background();
-            }
-            this.nodes.border.background(value);
-            return this;
-        }
-        border_width(value) {
-            if (value == null) {
-                return this.nodes.border.padding();
-            }
-            this.nodes.border.padding(value);
-            return this;
-        }
-        border_radius(value) {
-            if (value == null) {
-                return this.nodes.border.border_radius();
-            }
-            super.border_radius(value);
-            this.nodes.border.border_radius(value);
-            return this;
-        }
-        color(value) {
-            if (value == null) {
-                return this.nodes.text.color() ?? "";
-            }
-            this.nodes.text.color(value);
-            return this;
-        }
-        styles(style_dict) {
-            if (style_dict == null) {
-                let styles = super.styles();
-                styles["--child-background"] = this.nodes.border.background();
-                styles["--child-border-width"] = this.nodes.border.padding();
-                styles["--child-border-radius"] = this.nodes.border.border_radius();
-                styles["--child-color"] = this.nodes.text.color();
-                styles["--child-background-image"] = this.nodes.text.style.backgroundImage;
-                styles["--child-background-clip"] = this.nodes.text.style.backgroundClip;
-                styles["--child-webkit-background-clip"] = this.nodes.text.style["-webkit-background-clip"];
-                return styles;
-            }
-            else {
-                return super.styles(style_dict);
-            }
-        }
-        // @ts-ignore
-        text(val) {
-            if (val == null) {
-                return this.nodes.text.text();
-            }
-            this.nodes.text.text(val);
-            return this;
-        }
-        transition_border_color(val) {
-            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;
-        }
-    };
-    return BorderButtonElement = _classThis;
-})();
-export { BorderButtonElement };
-export const BorderButton = Elements.wrapper(BorderButtonElement);
-export const NullBorderButton = Elements.create_null(BorderButtonElement);

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

@@ -1,241 +0,0 @@
-/**
- * @author Daan van den Bergh
- * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
- */
-import { VElementBaseSignature, VElementTagMap, VDivElement } from "../elements/module.js";
-import { BorderButtonElement } from "./border_button.js";
-import { GradientBorderElement } from "./gradient.js";
-import { ImageMaskElement } from "./image.js";
-import { RingLoaderElement } from "./loaders.js";
-import { SpanElement } from "./span.js";
-import { AnchorHStackElement, FrameElement } from "./stack.js";
-/**
- * Is any button like,
- * including loader and bordered buttons.
- */
-export declare function isButtonLike(element: any): element is (ButtonElement | LoaderButtonElement | BorderButtonElement);
-export declare class ButtonElement extends VElementTagMap.a {
-    /**
-     * Initializes the Button element with the provided text.
-     * @param text The text to display on the button.
-     * @nav Frontend/Buttons
-     * @docs
-     */
-    constructor(text?: string);
-}
-export declare const Button: <Extensions extends object = {}>(text?: string | undefined) => ButtonElement & Extensions;
-export declare const NullButton: <Extensions extends object = {}>() => ButtonElement & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        ButtonElement: ButtonElement;
-    }
-}
-declare const LoaderButtonElement_base: VElementBaseSignature;
-/**
- * @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.
- */
-export declare class LoaderButtonElement extends LoaderButtonElement_base {
-    nodes: {
-        text: VDivElement;
-        loader: RingLoaderElement;
-        [key: string]: any;
-    };
-    text: VDivElement;
-    loader: RingLoaderElement;
-    /**
-     * Initializes the LoaderButton element with the provided text and loader.
-     * @param text The text to display on the loader button.
-     * @param loader The loader factory function to create the loading animation.
-     * @returns This constructor does not return a value.
-     * @docs
-     */
-    constructor(text?: string, loader?: () => any);
-    /**
-     * Retrieves or sets the styling attributes for the loader element. If no argument is provided, it returns the current styles including default loader dimensions.
-     * @param style_dict An optional dictionary of styles to set.
-     * @returns When no argument is passed, returns the current styles including loader dimensions.
-     * @returns When an argument is provided, returns the instance of the element for chaining.
-     * @docs
-     */
-    styles(): Record<string, string>;
-    styles(style_dict: Record<string, any>): this;
-    /**
-     * Sets the default configuration for the LoaderButtonElement by calling the parent method.
-     * @returns Returns the instance of the element for chaining.
-     * @docs
-     */
-    set_default(): this;
-    /**
-     * Displays the loader and disables the button when clicked.
-     * @returns Returns the instance of the element for chaining.
-     * @docs
-     */
-    show_loader(): this;
-    /**
-     * Initiates the loading process by showing the loader.
-     * @returns Returns the instance of the element for chaining.
-     * @docs
-     */
-    start(): this;
-    /**
-     * Hides the loader, enables the button, and shows the text on click event.
-     * @returns Returns the instance of the element for chaining.
-     * @docs
-     */
-    hide_loader(): this;
-    /**
-     * Stops the loading process by hiding the loader (alias of `hide_loader`).
-     * @returns Returns the instance of the element for chaining.
-     */
-    stop(): this;
-}
-export declare const LoaderButton: <Extensions extends object = {}>(text?: string | undefined, loader?: (() => any) | undefined) => LoaderButtonElement & Extensions;
-export declare const NullLoaderButton: <Extensions extends object = {}>() => LoaderButtonElement & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        LoaderButtonElement: LoaderButtonElement;
-    }
-}
-/**
- * The extended button element.
- * Containing a built in loader.
- * And an optional arrow that extends when hovering.
- */
-export declare class ExtendedButtonElement extends AnchorHStackElement {
-    /** The hover background. */
-    private _hover_background;
-    /** The hover text color. */
-    private _hover_color;
-    /** The hover border color. */
-    private _hover_border_color;
-    /** The minimum wait promise for the show/hide loader. */
-    private _min_wait;
-    /** The nested nodes. */
-    nodes: {
-        image: ImageMaskElement;
-        image_stripe: FrameElement;
-        border: GradientBorderElement;
-        background: FrameElement;
-        hover: FrameElement;
-        text: SpanElement;
-        loader: RingLoaderElement;
-    };
-    /**
-     * Initializes the Button element with the provided text.
-     * @param text The text to display on the button.
-     * @nav Frontend/Buttons
-     * @docs
-     */
-    constructor(button_text: string, opts?: ExtendedButtonElement.Opts);
-    font_size(): string;
-    font_size(value: number): this;
-    hover_color(): string;
-    hover_color(value: string): this;
-    hover_background(): string;
-    hover_background(value: string): this;
-    hover_opacity(): string | number;
-    hover_opacity(value: number): this;
-    text(): string;
-    text(value: string): this;
-    background(): string;
-    background(value: string): this;
-    background_opacity(): string | number;
-    background_opacity(value: string | number): this;
-    color(): string;
-    color(value: string): this;
-    border(): string;
-    border(width: string | number, color: string): this;
-    border_color(): string;
-    border_color(value: string): this;
-    border_width(): string;
-    border_width(value: string | number): this;
-    border_radius(): string;
-    border_radius(value?: string | number): this;
-    /**
-     * Show the loader, disabling the button and adding an opacity of 0.75 by default.
-     * @param opacity The opacity to apply to the button while the loader is shown, this is to indicate the button is disabled.
-     * @param min_wait The minimum amount of time in milliseconds to show the loader, this is to improve user experience by ensuring the loader is visible for a minimum duration.
-     * @returns The current instance for chaining.
-     * @docs
-     */
-    show_loader({ opacity, min_wait }?: {
-        opacity?: number;
-        min_wait?: number;
-    }): this;
-    /**
-     * Hide the loader, restoring the button to its normal state.
-     * By default it awaits the `min_wait` duration assigned in {@link show_loader}, before hiding the loader.
-     * This is to ensure the loader is visible for a minimum amount of time, improving user experience.
-     * @returns The current instance for chaining.
-     * @docs
-     */
-    hide_loader(): Promise<this>;
-    /**
-     * Hide the loader, restoring the button to its normal state.
-     * @note This does not await the `min_wait` duration assigned in {@link show_loader}, before hiding the loader.
-     * @returns The current instance for chaining.
-     * @docs
-     */
-    hide_loader_sync(): this;
-}
-export declare const ExtendedButton: <Extensions extends object = {}>(button_text: string, opts?: ExtendedButtonElement.Opts | undefined) => ExtendedButtonElement & Extensions;
-export declare const NullExtendedButton: <Extensions extends object = {}>() => ExtendedButtonElement & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        ExtendedButtonElement: ExtendedButtonElement;
-    }
-}
-/**
- * Nested types for the {@link ExtendedButtonElement} class.
- */
-export declare namespace ExtendedButtonElement {
-    /** The argument options for the extended button element. */
-    interface Opts {
-        /** Set specific hover options. */
-        hover?: {
-            /** The background color on hover. */
-            background?: string;
-            /** The text color on hover. */
-            color?: string;
-            /** The border color on hover. */
-            border_color?: string;
-            /**
-             * The background color opacity on hover.
-             * @note The opacity is not transitioned, this is purely to edit the background color appearance.
-             */
-            opacity?: number;
-        };
-        /**
-         * Scale the font size and padding of the button, font size is by default 16px.
-         * This should be a positive number, where `1` represents the default size.
-         * @note The size ratio is merely a quick way of editing the button size and spacing.
-         *       However, the font size and padding can also be manually assigned.
-         */
-        size_ratio?: number;
-        /**
-         * Specific settings for the arrow button.
-         * The arrow functionality can be disabled by specifically defining this as `false`.
-         */
-        arrow?: false | {
-            /**
-             * The source of the arrow image.
-             * @note Using a different image might cause issues with the image stripe, stored under `nodes.image_stripe`.
-             * @default "/volt/assets/icons/arrow.v1.webp"
-             */
-            source?: string;
-            /**
-             * The image rotation [0..360].
-             * Either formatted as a string suffixed with `deg` or a number representing degrees.
-             * @default "0deg"
-             */
-            rotate?: string | number;
-            /**
-             * Enable or disable animation for the arrow image.
-             * @default true
-             */
-            animate?: boolean;
-        };
-    }
-}
-export {};