@vandenberghinc/volt 1.1.2

package/frontend/dist/types/gradient.d.ts

@@ -0,0 +1,12 @@
+export declare class GradientType {
+    gradient?: string;
+    type?: string;
+    degree?: string;
+    colors?: {
+        color: string;
+        stop?: string;
+    }[];
+    constructor(gradient: string);
+    constructor(type: string, ...colors: string[]);
+    toString(): string;
+}

package/frontend/dist/types/gradient.js

@@ -0,0 +1,79 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+// Gradient.
+/*	@docs:
+ *	@nav: Frontend
+ *	@chapter: Styling
+ *	@title: Gradient
+ *	@description:
+ *		Create a gradient object.
+ *
+ *		Can also be constructed with wrapper function `Gradient`.
+ *	@return:
+ *		Returns the `GradientType` object.
+ *	@parameter:
+ *		@name: ...args
+ *		@description:
+ *			The arguments can either be of length 1, containing the full gradient string `new GradientType ("linear-gradient(...)")`.
+ *			Or the arguments can be as `new GradientType("linear", "black", "0%", "white", "100%")`.
+ */
+export class GradientType {
+    constructor(...args) {
+        if (args.length === 1) {
+            this.gradient = args[0];
+        }
+        else if (args.length > 1) {
+            this.type = args[0];
+            this.colors = [];
+            for (let i = 1; i < args.length; i++) {
+                if (args[i].endsWith("deg")) {
+                    this.degree = args[i];
+                    continue;
+                }
+                if (typeof args[i + 1] === "string" && args[i + 1].includes("%")) {
+                    this.colors.push({
+                        color: args[i],
+                        stop: args[i + 1],
+                    });
+                    i++;
+                }
+                else {
+                    this.colors.push({
+                        color: args[i],
+                        stop: undefined,
+                    });
+                }
+            }
+        }
+        else {
+            console.error("Invalid number of arguments for class \"Gradient()\".");
+        }
+    }
+    // Cast to string.
+    toString() {
+        if (this.gradient == null && this.colors !== undefined) {
+            this.gradient = `${this.type}-gradient(`;
+            if (this.degree) {
+                this.gradient += this.degree + ", ";
+            }
+            for (let i = 0; i < this.colors.length; i++) {
+                this.gradient += this.colors[i].color;
+                this.gradient += " ";
+                let stop = this.colors[i].stop;
+                if (typeof stop === "number" && stop <= 1.0) {
+                    stop = (stop * 100) + "%";
+                }
+                this.gradient += stop;
+                if (i + 1 < this.colors.length) {
+                    this.gradient += ", ";
+                }
+            }
+            this.gradient += ")";
+            return this.gradient;
+        }
+        return this.gradient ?? "";
+    }
+}
+;

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

@@ -0,0 +1,177 @@
+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 {
+    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;
+        [key: string]: any;
+    };
+    /**
+     * @docs:
+     * @title: Constructor
+     * @desc: Initializes a new instance of the BorderButton element with the provided text.
+     * @param:
+     *     @name: text
+     *     @descr: The text to be displayed on the BorderButton.
+     *     @type: string
+     * @return:
+     *     @type: void
+     *     @description This constructor does not return a value.
+     */
+    constructor(text?: string);
+    /**
+     * @docs:
+     * @title: Gradient
+     * @desc: Set the gradient color for the border element. If no value is provided, it retrieves the current background.
+     * @param:
+     *     @name: value
+     *     @descr: The color value to set for the gradient.
+     *     @type: string, null
+     * @return:
+     *     @type: string | this
+     *     @description When an argument is passed this function returns the instance of the element for chaining. Otherwise, it returns the current background value.
+     * @funcs: 2
+     */
+    gradient(): string;
+    gradient(value: string | null): this;
+    /**
+     * @docs:
+     * @title: Border Color
+     * @desc: Sets the border color of the element. If no value is provided, it retrieves the current border color.
+     * @param:
+     *     @name: value
+     *     @descr: The color value to set for the border.
+     *     @type: string, null
+     * @return:
+     *     @type: string | this
+     *     @description When an argument is passed, this function returns the instance of the element for chaining. Otherwise, it returns the current border color.
+     * @funcs: 2
+     */
+    border_color(): string;
+    border_color(value: string | null): this;
+    /**
+     * @docs:
+     * @title: Border Width
+     * @desc: Sets or retrieves the border width of the element. If no argument is passed, it returns the current padding.
+     * @param:
+     *     @name: value
+     *     @descr: The value of the border width to set.
+     *     @type: number, null
+     * @return:
+     *     @type: number | this
+     *     @description When an argument is passed, this function returns the instance of the element for chaining. Otherwise, it returns the current border width.
+     * @funcs: 2
+     */
+    border_width(): string;
+    border_width(value: string | number): this;
+    /**
+     * @docs:
+     * @title: Border Radius
+     * @desc: Sets the border radius for the element. If no value is provided, it retrieves the current border radius.
+     * @param:
+     *     @name: value
+     *     @descr: The value for the border radius to set.
+     *     @type: number, null
+     * @return:
+     *     @type: number | this
+     *     @description Returns the current border radius if no argument is passed, otherwise returns the instance for chaining.
+     * @funcs: 2
+     */
+    border_radius(): string;
+    border_radius(value: string | number): this;
+    /**
+     * @docs:
+     * @title: Color
+     * @desc: Sets or retrieves the color of the child text. When a value is provided, it updates the color; when no value is provided, it returns the current color.
+     * @param:
+     *     @name: value
+     *     @descr: The color value to set for the child text.
+     *     @type: string, null
+     * @return:
+     *     @type: string | this
+     *     @description Returns the current color if no argument is passed; otherwise, returns the instance of the element for chaining.
+     * @funcs: 2
+     */
+    color(): string;
+    color(value: string): this;
+    /**
+     * @docs:
+     * @title: Styles
+     * @desc: Retrieves or sets the styling attributes for the element. If no argument is provided, it computes styles based on child elements.
+     * @param:
+     *     @name: style_dict
+     *     @descr: A dictionary of styles to set. If null, the method computes styles based on child elements.
+     *     @type: object | null
+     * @return:
+     *     @type: object
+     *     @description Returns the computed styles when no argument is passed, or the result of the super method when an argument is provided.
+     * @funcs: 2
+     */
+    styles(): Record<string, string>;
+    styles(style_dict: Record<string, any>): this;
+    /**
+     * @docs:
+     * @title: Text
+     * @desc: Set or get the text of the element. If a value is provided, it sets the text; otherwise, it retrieves the current text.
+     * @param:
+     *     @name: val
+     *     @descr: The value to set as text or null to retrieve the current text.
+     *     @type: string, null
+     * @return:
+     *     @type: string | this
+     *     @description When a value is passed, this function returns the instance for chaining. If no value is passed, it returns the current text.
+     * @funcs: 2
+     */
+    text(): string;
+    text(val: string): this;
+    /**
+     * @docs:
+     * @title: Transition Border Color
+     * @desc: Sets or retrieves the transition for the border color of the element.
+     * @param:
+     *     @name: val
+     *     @descr: The value to set for the transition or to retrieve the current transition.
+     *     @type: string, number, null
+     * @return:
+     *     @type: this | string
+     *     @description When an argument is passed, this function returns the instance of the element for chaining. Otherwise, it returns the already set transition value.
+     * @funcs: 2
+     */
+    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/ui/border_button.js

@@ -0,0 +1,235 @@
+/*
+ * 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, 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 = (() => {
+    var _a;
+    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.a;
+    var BorderButtonElement = _classThis = class extends _classSuper {
+        /**
+         * @docs:
+         * @title: Constructor
+         * @desc: Initializes a new instance of the BorderButton element with the provided text.
+         * @param:
+         *     @name: text
+         *     @descr: The text to be displayed on the BorderButton.
+         *     @type: string
+         * @return:
+         *     @type: void
+         *     @description This constructor does not return a value.
+         */
+        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();
+            }
+            this.nodes.border.transition(typeof val !== "string" ? val : val.replace("border-color ", "background "));
+            return this;
+        }
+    };
+    __setFunctionName(_classThis, "BorderButtonElement");
+    (() => {
+        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 });
+    })();
+    _classThis.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",
+    };
+    _classThis.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%)";
+        },
+    };
+    (() => {
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return BorderButtonElement = _classThis;
+})();
+export { BorderButtonElement };
+export const BorderButton = Elements.wrapper(BorderButtonElement);
+export const NullBorderButton = Elements.create_null(BorderButtonElement);

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

@@ -0,0 +1,42 @@
+import { VElementTagMap } from "../elements/module.js";
+export declare class ButtonElement extends VElementTagMap.a {
+    static default_style: {
+        margin: string;
+        padding: string;
+        outline: string;
+        border: string;
+        "border-radius": string;
+        cursor: string;
+        color: string;
+        "text-align": string;
+        display: string;
+        "align-items": string;
+        "white-space": string;
+        "user-select": string;
+        "text-decoration": string;
+    };
+    static default_events: {
+        onmousedown: (this: any) => void;
+        onmouseover: (this: any) => void;
+        onmouseup: (this: any) => void;
+        onmouseout: (this: any) => void;
+    };
+    /**
+     * @docs:
+     * @nav: Frontend
+     * @chapter: Buttons
+     * @title: Button
+     * @desc: Initializes the Button element with the provided text.
+     * @param:
+     *     @name: text
+     *     @description The text to display on the button.
+     */
+    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;
+    }
+}

package/frontend/dist/ui/button.js

@@ -0,0 +1,114 @@
+/*
+ * 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";
+// Button.
+let ButtonElement = (() => {
+    var _a;
+    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.a;
+    var ButtonElement = _classThis = class extends _classSuper {
+        /**
+         * @docs:
+         * @nav: Frontend
+         * @chapter: Buttons
+         * @title: Button
+         * @desc: Initializes the Button element with the provided text.
+         * @param:
+         *     @name: text
+         *     @description The text to display on the button.
+         */
+        constructor(text = "") {
+            super({
+                derived: ButtonElement,
+            });
+            this.inner_html(text);
+        }
+    };
+    __setFunctionName(_classThis, "ButtonElement");
+    (() => {
+        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);
+        ButtonElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+    })();
+    _classThis.default_style = {
+        "margin": "0px 0px 0px",
+        "padding": "5px 10px 5px 10px",
+        "outline": "none",
+        "border": "none",
+        "border-radius": "10px",
+        "cursor": "pointer",
+        "color": "inherit",
+        "text-align": "center",
+        "display": "grid",
+        "align-items": "center",
+        "white-space": "nowrap",
+        "user-select": "none",
+        "text-decoration": "none",
+    };
+    _classThis.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%)";
+        },
+    };
+    (() => {
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return ButtonElement = _classThis;
+})();
+export { ButtonElement };
+export const Button = Elements.wrapper(ButtonElement);
+export const NullButton = Elements.create_null(ButtonElement);