@vandenberghinc/volt 1.2.5 → 1.2.6

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

@@ -1,138 +0,0 @@
-/**
- * @author Daan van den Bergh
- * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
- */
-import { VElementTagMap } from "../elements/module.js";
-import { GradientType } from "../types/gradient.js";
-/**
- * A point in 2D space used for drawing lines.
- * Optional `tension` overrides curve smoothing for that segment.
- */
-type PointObject = {
-    x: number;
-    y: number;
-    tension?: number;
-};
-/**
- * Canvas element.
- * @nav Frontend/Elements
- * @experimental true
- * @warning This class is still experimental and may be subject to future change.
- * @docs
- */
-export declare class CanvasElement extends VElementTagMap.canvas {
-    _e: any;
-    ctx_2d: any;
-    /**
-     * Initialize the canvas element and, on Safari, create a shadow DOM
-     * canvas to work around rendering issues.
-     */
-    constructor();
-    height(): string | number;
-    height(value: string | number, check_attribute?: boolean): this;
-    min_height(): string | number;
-    min_height(value: string | number): this;
-    max_height(): string;
-    max_height(value: string | number): this;
-    width(): string | number;
-    width(value: string | number, check_attribute?: boolean): this;
-    min_width(): string | number;
-    min_width(value: string | number): this;
-    max_width(): string;
-    max_width(value: string | number): this;
-    /**
-     * Get a rendering context for the canvas.
-     * In Safari, forwards to the shadow canvas element.
-     * @param args Arguments forwarded to `HTMLCanvasElement.getContext`.
-     * @returns The rendering context.
-     */
-    getContext(...args: any[]): any;
-    /**
-     * Draw a smoothed path through the given points on the provided context.
-     * Uses a Catmull–Rom style bezier approximation controlled by `tension`.
-     * @param ctx Canvas 2D context.
-     * @param points Ordered list of points to draw through.
-     * @param tension Optional smoothing factor; 0 for straight segments.
-     * @returns this
-     */
-    draw_lines(ctx: any, points?: PointObject[], tension?: number): this;
-    /**
-     * Create a canvas gradient from a `GradientType` definition.
-     * Supports linear and (placeholder) radial gradients.
-     * @param ctx Canvas 2D context.
-     * @param gradient The gradient definition (`GradientType`).
-     * @param start_x Start x coordinate.
-     * @param start_y Start y coordinate.
-     * @param end_x End x coordinate.
-     * @param end_y End y coordinate.
-     * @returns The created gradient or null when invalid.
-     */
-    create_gradient(ctx: any, gradient: GradientType, start_x: number, start_y: number, end_x: number, end_y: number): any;
-    /**
-     * Create a line, optionally curved and with custom styling.
-     * @returns Returns the `Canvas` object.
-     * @param points The line points, an array with objects with `x` and `y` values.
-     * @param tension The smoothness of the line, use `null` or `0` for a straight line and {0.0, 2.0} for a smooth line.
-     * @param color The line color.
-     * @param width The line width in pixels.
-     * @param fill The fill color, supports a `GradientType` class. leave `null` to ignore.
-     * @param scale When enabled all x and y coordinates are treated as a 0.0 till 1.0 scale in relation to the canvas' width and height.
-     * @param dots Place dots at each coordinate, leave `null` to ignore.
-     * @param dots.width Dot width in pixels when `scale` is `false`, and dot width in percentage `{0.0,1.0}` when `scale` is `true`.
-     * @param dots.color Fill color.
-     * @docs
-     */
-    lines({ points, tension, color, width, fill, scale, dots, }: {
-        points: PointObject[];
-        tension?: number;
-        color?: string;
-        width?: number;
-        fill?: string | GradientType;
-        scale?: boolean;
-        dots?: {
-            width?: number;
-            color?: string | GradientType;
-        };
-    }): this;
-    /**
-     * Clear the entire canvas.
-     * @returns this
-     */
-    clear(): this;
-    /**
-     * Get or set the shadow color used for drawing operations.
-     * @param val The CSS color value.
-     * @returns The current shadow color or this.
-     */
-    shadow_color(): string;
-    shadow_color(val: string): this;
-    /**
-     * Get or set the shadow blur radius.
-     * @param val The blur amount.
-     * @returns The current shadow blur or this.
-     */
-    shadow_blur(): string;
-    shadow_blur(val: string): this;
-    /**
-     * Get or set the horizontal shadow offset.
-     * @param val The offset value.
-     * @returns The current shadow offset X or this.
-     */
-    shadow_offset_x(): string;
-    shadow_offset_x(val: number | string): this;
-    /**
-     * Get or set the vertical shadow offset.
-     * @param val The offset value.
-     * @returns The current shadow offset Y or this.
-     */
-    shadow_offset_y(): string;
-    shadow_offset_y(val: number | string): this;
-}
-export declare const Canvas: <Extensions extends object = {}>() => CanvasElement & Extensions;
-export declare const NullCanvas: <Extensions extends object = {}>() => CanvasElement & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        CanvasElement: CanvasElement;
-    }
-}
-export {};

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

@@ -1,444 +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 { Utils } from "../modules/utils.js";
-import { Elements, VElementTagMap } from "../elements/module.js";
-import { GradientType } from "../types/gradient.js";
-// Canvas.
-/**
- * Canvas element.
- * @nav Frontend/Elements
- * @experimental true
- * @warning This class is still experimental and may be subject to future change.
- * @docs
- */
-let CanvasElement = (() => {
-    let _classDecorators = [Elements.create({
-            name: "CanvasElement",
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = VElementTagMap.canvas;
-    var CanvasElement = 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);
-            CanvasElement = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        // Attributes.
-        _e;
-        ctx_2d;
-        // ---------------------------------------------------------
-        // Constructors.
-        /**
-         * Initialize the canvas element and, on Safari, create a shadow DOM
-         * canvas to work around rendering issues.
-         */
-        constructor() {
-            super({
-                derived: CanvasElement,
-            });
-            // Safari does not render images correctly for custom elements.
-            if (Utils.is_safari) {
-                this.attachShadow({ mode: 'open' });
-                this._e = document.createElement("canvas");
-                this._e.style.objectFit = "cover";
-                this.shadowRoot?.appendChild(this._e);
-                this.position("relative"); // for img width height 100%
-                this.overflow("hidden"); // for border radius.
-                // Set resize event otherwise when the item resizes the shadow image does not.
-                this.on_resize(() => {
-                    this._e.style.width = this.style.width;
-                    this._e.width = this.width;
-                    this._e.style.height = this.style.height;
-                    this._e.height = this.height;
-                });
-            }
-            this.ctx_2d = this.getContext("2d");
-        }
-        /**
-         * Get or set the canvas height with Safari shadow-canvas support.
-         * @param value The height value.
-         * @param check_attribute When true, also update the element attribute.
-         * @returns The current height or this.
-         */
-        height(value, check_attribute) {
-            if (this._e === undefined) {
-                return super.height(value, check_attribute);
-            }
-            if (value == null) {
-                return this._e.height;
-            }
-            super.height(value, false);
-            this._e.style.height = this.pad_numeric(value, "px");
-            this._e.height = this.pad_numeric(value, "");
-            return this;
-        }
-        /**
-         * Get or set the minimum canvas height (Safari shadow-canvas aware).
-         * @param value The minimum height value.
-         * @returns The current minimum height or this.
-         */
-        min_height(value) {
-            if (this._e === undefined) {
-                return super.min_height(value);
-            }
-            if (value == null) {
-                return this._e.style.minHeight;
-            }
-            this._e.style.minHeight = this.pad_numeric(value, "px");
-            return this;
-        }
-        /**
-         * Get or set the maximum canvas height (Safari shadow-canvas aware).
-         * @param value The maximum height value.
-         * @returns The current maximum height or this.
-         */
-        max_height(value) {
-            if (this._e === undefined) {
-                return super.max_height(value);
-            }
-            if (value == null) {
-                return this._e.style.maxHeight;
-            }
-            this._e.style.maxHeight = this.pad_numeric(value, "px");
-            return this;
-        }
-        /**
-         * Get or set the canvas width with Safari shadow-canvas support.
-         * @param value The width value.
-         * @param check_attribute When true, also update the element attribute.
-         * @returns The current width or this.
-         */
-        width(value, check_attribute = true) {
-            if (this._e === undefined) {
-                return super.width(value, check_attribute);
-            }
-            if (value == null) {
-                return this._e.width;
-            }
-            super.width(value, false);
-            this._e.style.width = this.pad_numeric(value, "px");
-            this._e.width = value;
-            return this;
-        }
-        /**
-         * Get or set the minimum canvas width (Safari shadow-canvas aware).
-         * @param value The minimum width value.
-         * @returns The current minimum width or this.
-         */
-        min_width(value) {
-            if (this._e === undefined) {
-                return super.min_width(value);
-            }
-            if (value == null) {
-                return this._e.style.minWidth;
-            }
-            this._e.style.minWidth = this.pad_numeric(value, "px");
-            return this;
-        }
-        /**
-         * Get or set the maximum canvas width (Safari shadow-canvas aware).
-         * @param value The maximum width value.
-         * @returns The current maximum width or this.
-         */
-        max_width(value) {
-            if (this._e === undefined) {
-                return super.max_width(value);
-            }
-            if (value == null) {
-                return this._e.style.maxWidth;
-            }
-            this._e.style.maxWidth = this.pad_numeric(value, "px");
-            return this;
-        }
-        // ---------------------------------------------------------
-        // Utility functions.
-        /**
-         * Get a rendering context for the canvas.
-         * In Safari, forwards to the shadow canvas element.
-         * @param args Arguments forwarded to `HTMLCanvasElement.getContext`.
-         * @returns The rendering context.
-         */
-        getContext(...args) {
-            if (Utils.is_safari) {
-                return this._e.getContext(...args);
-            }
-            // @ts-ignore
-            return super.getContext(...args);
-        }
-        /**
-         * Draw a smoothed path through the given points on the provided context.
-         * Uses a Catmull–Rom style bezier approximation controlled by `tension`.
-         * @param ctx Canvas 2D context.
-         * @param points Ordered list of points to draw through.
-         * @param tension Optional smoothing factor; 0 for straight segments.
-         * @returns this
-         */
-        // Draw lines.
-        draw_lines(ctx, points = [], tension) {
-            ctx.beginPath();
-            ctx.moveTo(points[0].x, points[0].y);
-            let t;
-            for (let i = 0; i < points.length - 1; i++) {
-                if (points[i].tension != undefined) {
-                    t = points[i].tension;
-                }
-                else {
-                    t = (tension != undefined) ? tension : 0;
-                }
-                let p0 = (i > 0) ? points[i - 1] : points[0];
-                let p1 = points[i];
-                let p2 = points[i + 1];
-                let p3 = (i != points.length - 2) ? points[i + 2] : p2;
-                let cp1x = p1.x + (p2.x - p0.x) / 6 * t;
-                let cp1y = p1.y + (p2.y - p0.y) / 6 * t;
-                let cp2x = p2.x - (p3.x - p1.x) / 6 * t;
-                let cp2y = p2.y - (p3.y - p1.y) / 6 * t;
-                ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
-            }
-            return this;
-        }
-        /**
-         * Create a canvas gradient from a `GradientType` definition.
-         * Supports linear and (placeholder) radial gradients.
-         * @param ctx Canvas 2D context.
-         * @param gradient The gradient definition (`GradientType`).
-         * @param start_x Start x coordinate.
-         * @param start_y Start y coordinate.
-         * @param end_x End x coordinate.
-         * @param end_y End y coordinate.
-         * @returns The created gradient or null when invalid.
-         */
-        // Create gradient.
-        create_gradient(ctx, gradient, start_x, start_y, end_x, end_y) {
-            if (!(gradient instanceof GradientType)) {
-                console.error("Invalid usage, parameter \"gradient\" should be type \"GradientType\".");
-                return null;
-            }
-            if (gradient.colors === undefined) {
-                console.error("Invalid usage, gradient attribute \"colors\" is undefined.");
-                return null;
-            }
-            let value;
-            if (gradient.type == "linear") {
-                value = ctx.createLinearGradient(start_x, start_y, end_x, end_y);
-            }
-            else if (gradient.type == "radial") {
-                value = ctx.createRadialGradient(start_x, start_y, end_x, end_y); // @TODO.
-            }
-            else {
-                value = ctx.createLinearGradient(start_x, start_y, end_x, end_y);
-            }
-            for (let i = 0; i < gradient.colors.length; i++) {
-                let stop = gradient.colors[i].stop;
-                if (Utils.is_string(stop) && stop.includes("%")) {
-                    stop = parseFloat(stop.substr(0, stop.length - 1)) / 100;
-                }
-                else if (Utils.is_string(stop) && stop.includes("px")) {
-                    stop = parseFloat(stop.substr(0, stop.length - 2));
-                }
-                value.addColorStop(stop, gradient.colors[i].color);
-            }
-            return value;
-        }
-        // ---------------------------------------------------------
-        // Functions.
-        // Create a line.
-        /**
-         * Create a line, optionally curved and with custom styling.
-         * @returns Returns the `Canvas` object.
-         * @param points The line points, an array with objects with `x` and `y` values.
-         * @param tension The smoothness of the line, use `null` or `0` for a straight line and {0.0, 2.0} for a smooth line.
-         * @param color The line color.
-         * @param width The line width in pixels.
-         * @param fill The fill color, supports a `GradientType` class. leave `null` to ignore.
-         * @param scale When enabled all x and y coordinates are treated as a 0.0 till 1.0 scale in relation to the canvas' width and height.
-         * @param dots Place dots at each coordinate, leave `null` to ignore.
-         * @param dots.width Dot width in pixels when `scale` is `false`, and dot width in percentage `{0.0,1.0}` when `scale` is `true`.
-         * @param dots.color Fill color.
-         * @docs
-         */
-        lines({ points, tension, color = "black", width, fill, scale = false, dots, }) {
-            // Create context.
-            let ctx = this.ctx_2d;
-            // Scale.
-            if (scale) {
-                let width = this.width() ?? 1;
-                if (typeof width !== "number") {
-                    width = 1;
-                }
-                let height = this.height() ?? 1;
-                if (typeof height !== "number") {
-                    height = 1;
-                }
-                for (let i = 0; i < points.length; i++) {
-                    points[i].x = width * points[i].x;
-                    points[i].y = height * points[i].y;
-                }
-            }
-            // Draw.
-            this.draw_lines(ctx, points, tension);
-            // ctx.beginPath();
-            // ctx.moveTo(points[0].x, points[0].y);
-            // for (let i = 1; i < points.length; i++) {
-            //  ctx.lineTo(points[i].x, points[i].y);
-            // }
-            // Stroke style.
-            if (width != null) {
-                ctx.lineWidth = width;
-            }
-            if (color != null) {
-                ctx.strokeStyle = color;
-            }
-            else {
-                ctx.strokeStyle = "transparent";
-            }
-            ctx.stroke();
-            // Fill style.
-            if (fill != null) {
-                // Gradient.
-                if (fill instanceof GradientType) {
-                    let minX = Infinity;
-                    let maxX = -Infinity;
-                    let minY = Infinity;
-                    let maxY = -Infinity;
-                    points.forEach((point) => {
-                        minX = Math.min(minX, point.x);
-                        maxX = Math.max(maxX, point.x);
-                        minY = Math.min(minY, point.y);
-                        maxY = Math.max(maxY, point.y);
-                    });
-                    ctx.fillStyle = this.create_gradient(ctx, fill, minX, minY, maxX, maxY);
-                }
-                // Default color.
-                else {
-                    ctx.fillStyle = fill;
-                }
-                // Fill.
-                ctx.fill();
-            }
-            // Draw dots.
-            if (dots != null) {
-                if (dots.width == null) {
-                    if (scale) {
-                        dots.width = 0.01;
-                    }
-                    else {
-                        dots.width = 5;
-                    }
-                }
-                if (scale) {
-                    let width = this.width() ?? 1;
-                    if (typeof width !== "number") {
-                        width = 1;
-                    }
-                    dots.width = dots.width * width;
-                }
-                let is_gradient = false;
-                if (dots.color != null) {
-                    if (dots.color instanceof GradientType) {
-                        is_gradient = true;
-                    }
-                    else {
-                        ctx.fillStyle = dots.color;
-                    }
-                }
-                for (let i = 0; i < points.length; i++) {
-                    ctx.beginPath();
-                    ctx.arc(points[i].x, points[i].y, dots.width, 0, 2 * Math.PI);
-                    if (is_gradient) {
-                        const gradient = this.create_gradient(ctx, dots.color, points[i].x - dots.width, points[i].y, points[i].x + dots.width, points[i].y);
-                        ctx.fillStyle = gradient;
-                    }
-                    ctx.fill();
-                    // ctx.fillRect(points[i].x - dots.width / 2, points[i].y - dots.width / 2, dots.width, dots.width);
-                }
-            }
-            return this;
-        }
-        // Remove all contexts.
-        /**
-         * Clear the entire canvas.
-         * @returns this
-         */
-        // @ts-ignore
-        clear() {
-            this.ctx_2d.clearRect(0, 0, this.width, this.height);
-            return this;
-        }
-        shadow_color(val) {
-            if (val === undefined) {
-                return this.ctx_2d.shadowColor ?? "";
-            }
-            this.ctx_2d.shadowColor = val;
-            return this;
-        }
-        shadow_blur(val) {
-            if (val === undefined) {
-                return this.ctx_2d.shadowBlur ?? "";
-            }
-            this.ctx_2d.shadowBlur = val;
-            return this;
-        }
-        shadow_offset_x(val) {
-            if (val === undefined) {
-                return this.ctx_2d.shadowOffsetX ?? "";
-            }
-            this.ctx_2d.shadowOffsetX = this.pad_numeric(val);
-            return this;
-        }
-        shadow_offset_y(val) {
-            if (val === undefined) {
-                return this.ctx_2d.shadowOffsetY ?? "";
-            }
-            this.ctx_2d.shadowOffsetY = this.pad_numeric(val);
-            return this;
-        }
-    };
-    return CanvasElement = _classThis;
-})();
-export { CanvasElement };
-;
-export const Canvas = Elements.wrapper(CanvasElement);
-export const NullCanvas = Elements.create_null(CanvasElement);

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

@@ -1,74 +0,0 @@
-/**
- * @author Daan van den Bergh
- * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
- */
-import { VElementBaseSignature, ValueOrThis } from "../elements/module.js";
-import { VStackElement, HStackElement } from "./stack.js";
-import { TextElement } from "./text.js";
-interface CircleExtension {
-    enabled: boolean;
-    toggle(): this;
-    value(to?: boolean): this;
-    inner: VStackElement;
-}
-declare const CheckBoxElement_base: VElementBaseSignature;
-export declare class CheckBoxElement extends CheckBoxElement_base {
-    /** Has error state. */
-    has_error: boolean;
-    _border_color: string;
-    _inner_bg: string;
-    _inner_bg_focused: string;
-    _focus_color: string;
-    _error_color: string;
-    _required: boolean;
-    _circle: VStackElement & CircleExtension;
-    text: TextElement;
-    container: HStackElement;
-    error_text: TextElement;
-    constructor(text_or_obj?: string | {
-        text: string;
-        required: boolean;
-        id?: string;
-    });
-    border_color(): string;
-    border_color(val: string): this;
-    inner_bg(): string;
-    inner_bg(val: string): this;
-    inner_bg_focused(): string;
-    inner_bg_focused(val: string): this;
-    styles(): Record<string, string>;
-    styles(style_dict: Record<string, any>): this;
-    set_default(): this;
-    toggle(): this;
-    value(): boolean;
-    value(to: boolean): this;
-    required(): boolean;
-    required(to: boolean): this;
-    focus_color(): string;
-    focus_color(val: string): this;
-    /** Set the missing color. */
-    error_color(): string;
-    error_color(val: string): this;
-    /**
-     * Set the error state and message.
-     * Providing a truthy value will enable the error state and return the current instance for chaining.
-     * Providing a falsy value will disable the error state and return the current instance for chaining.
-     * Providing no value will return the current error message or `undefined` when no error is set.
-     */
-    error<V extends undefined | false | string = undefined>(err?: V): ValueOrThis<V, string | undefined, this>;
-    /** Remove the error state and mark as valid. */
-    valid(): this;
-    submit(): boolean;
-}
-export declare const CheckBox: <Extensions extends object = {}>(text_or_obj?: string | {
-    text: string;
-    required: boolean;
-    id?: string;
-} | undefined) => CheckBoxElement & Extensions;
-export declare const NullCheckBox: <Extensions extends object = {}>() => CheckBoxElement & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        CheckBoxElement: CheckBoxElement;
-    }
-}
-export {};