@vandenberghinc/volt 1.1.2

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

@@ -0,0 +1 @@
+export {};

package/frontend/dist/ui/color.js

@@ -0,0 +1,110 @@
+// // Imports.
+// import { Colors } from "../modules/colors"
+// import { Elements } from "../elements/module.js"
+export {};
+// // Types.
+// type Hex = string;
+// type RGBArray = number[];
+// interface RGBObject {
+// 	r: number;
+// 	g: number;
+// 	b: number;
+// 	a: number;
+// }
+// /*	@docs:
+// 	@nav: Frontend
+// 	@chapter: Styling
+// 	@title: Color range
+// 	@description: Used to create a range between two different colors. Can be initialized using alias function `ColorRange`.
+// 	@param:
+// 		@name: start
+// 		@descr: The start color (lightest). May either be a HEX string or an rgb(a) array.
+// 		@type: string, array
+// 	@param:
+// 		@name: end
+// 		@descr: The end color (darkest). May either be a HEX string or an rgb(a) array.
+// 		@type: string, array
+//  */
+// export class ColorRangeClass {
+// 	public start: RGBObject;
+// 	public end: RGBObject;
+//     constructor(start: Hex | RGBArray, end: Hex | RGBArray) {
+//     	if (Array.isArray(start)) {
+//     		this.start = this.array_to_rgba(start);
+//     	} else if (typeof start === "string") {
+//     		this.start = Colors.hex.to_rgb(start);
+//     	} else {
+//     		throw new Error(`Invalid type "${typeof start}" for parameter "start", the valid types are "string" or "array".`);
+//     	}
+//     	if (Array.isArray(end)) {
+//     		this.end = this.array_to_rgba(end);
+//     	} else if (typeof end === "string") {
+//     		this.end = Colors.hex.to_rgb(end);
+//     	} else {
+//     		throw new Error(`Invalid type "${typeof end}" for parameter "end", the valid types are "string" or "array".`);
+//     	}
+//     }
+//     // Array to rgba.
+//     array_to_rgba(array: RGBArray): RGBObject {
+//     	return {
+// 			r: array[0],
+// 			g: array[1],
+// 			b: array[2],
+// 			a: array.length < 4 ? 1 : array[3],
+// 		}
+//     }
+//     /*	@docs:
+// 		@title: Interpolate
+// 		@description: Interpolate between the start and end colors. When `percent` is 0 it will return the `start` color and when percent is `1` it will return the end color without computations.
+// 		@param:
+// 			@name: percent
+// 			@descr: The percentage to interpolate from start to end, the valid range is `0.0` till `1.0`.
+// 			@type: number
+// 		@param:
+// 			@name: alpha
+// 			@descr: The alpha channel, the valid range is `0.0` till `1.0`.
+// 			@type: number
+// 			@default: 1
+// 	 */
+//     interpolate(percent: number = 0.5, alpha: number = 1.0) : Hex {
+//     	if (percent <= 0) {
+//     		return Colors.rgb.to_str(
+// 				this.start.r,
+// 				this.start.g,
+// 				this.start.b,
+// 				this.start.a,
+// 			)
+//     	} else if (percent >= 1) {
+//     		return Colors.rgb.to_str(
+// 				this.end.r,
+// 				this.end.g,
+// 				this.end.b,
+// 				this.end.a,
+// 			)
+//     	}
+//     	return Colors.rgba.to_str(
+// 			Math.round(this.start.r + (this.end.r - this.start.r) * percent),
+// 			Math.round(this.start.g + (this.end.g - this.start.g) * percent),
+// 			Math.round(this.start.b + (this.end.b - this.start.b) * percent),
+// 			alpha,
+// 		)
+//     }
+//     // RGBA to hex.
+//     // rgb_to_hex(r, g, b, a = 1) {
+//     // 	const hex = [r, g, b].map(x => {
+//     //         const hex = x.toString(16);
+//     //         return hex.length === 1 ? '0' + hex : hex;
+//     //     })
+//     //     if (a != null && a < 1) {
+//     //     	let a = a / 100;
+//     //     	if (a < 10) {
+//     //     		hex.push("0" + a.toString())
+//     //     	} else {
+//     //     		hex.push(a.toString())
+//     //     	}
+//     //     }
+//     //     return '#' + hex.join('');
+//     // }
+// }
+// export const ColorRange = Elements.wrapper(ColorRangeClass);
+// export const NullColorRange = Elements.create_null(ColorRangeClass);

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

@@ -0,0 +1,30 @@
+import { VStackElement } from "./stack";
+export declare class ContextMenuElement extends VStackElement {
+    remove_child_callback: any;
+    constructor(content: {
+        label: string;
+        on_click?: Function;
+        on_render?: Function;
+    }[] | HTMLElement[]);
+    popup(event: any): this;
+    close(): this;
+    remove(): this;
+}
+export declare const ContextMenu: <Extensions extends object = {}>(content: {
+    label: string;
+    on_click?: Function;
+    on_render?: Function;
+}[] | HTMLElement[]) => ContextMenuElement & Extensions;
+export declare const NullContextMenu: <Extensions extends object = {}>() => ContextMenuElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        ContextMenuElement: ContextMenuElement;
+    }
+}
+declare global {
+    interface VElementExtensions {
+        _context_menu: ContextMenuElement | undefined;
+        on_context_menu(): Function | undefined;
+        on_context_menu(callback?: Function | ContextMenuElement | any[]): this;
+    }
+}

package/frontend/dist/ui/context_menu.js

@@ -0,0 +1,211 @@
+/*
+ * 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 } from "../elements/module.js";
+import { Button } from "./button";
+import { VStackElement } from "./stack";
+// Context Menu.
+let ContextMenuElement = (() => {
+    var _a;
+    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VStackElement;
+    var ContextMenuElement = _classThis = class extends _classSuper {
+        // Constructor.
+        // The content may either be an array with nodes, or an array with object like {label: ..., on_click: (element, event) => {}, on_render: (element) => {}}.
+        // A node / object may also be "null" and it will be ignored.
+        constructor(content) {
+            // Initialize base classes.
+            super();
+            this._init_derived({
+                derived: ContextMenuElement,
+            });
+            // Append content.
+            content.iterate((item) => {
+                if (item == null) {
+                    return null;
+                }
+                else if (!(item instanceof HTMLElement)) {
+                    const button = Button(item.label)
+                        .padding(5, 10, 5, 10)
+                        .margin(0)
+                        .font_size(12)
+                        .leading()
+                        .background("#FFFFFF15")
+                        .border_radius(0);
+                    if (typeof item.on_click === "function") {
+                        button.on_click((element, event) => item.on_click(element, event, this));
+                    }
+                    if (typeof item.on_render === "function") {
+                        button.on_render((element) => item.on_render(element));
+                    }
+                    this.append(button);
+                }
+                else {
+                    this.append(item);
+                }
+            });
+            // Set styling
+            this
+                .z_index(2) // one higher than sidebar.
+                .padding(5, 0, 5, 0)
+                .color("white")
+                .background("gray")
+                .box_shadow("0px 0px 10px #00000050")
+                .border_radius(10)
+                .min_width(150);
+            // Remove child callback.
+            this.remove_child_callback = (event) => {
+                if (!this.contains(event.target)) {
+                    this.remove();
+                }
+                document.body.removeEventListener("mousedown", this.remove_child_callback);
+            };
+        }
+        // Set default since it inherits an element.
+        // set_default() : this {
+        // 	return super.set_default(ContextMenuElement);
+        // }
+        // Popup the context menu by a event.
+        popup(event) {
+            // Prevent default.
+            event.preventDefault();
+            // Show.
+            super.show();
+            // Set position.
+            this.position(event.clientY, undefined, undefined, event.clientX);
+            // Add child.
+            document.body.appendChild(this);
+            // Add event listener to body.
+            document.body.addEventListener("mousedown", this.remove_child_callback);
+            // Response.
+            return this;
+        }
+        // Close the context menu.
+        close() {
+            // Remove from content.
+            super.remove();
+            // Remove event listener from body.
+            document.body.removeEventListener("mousedown", this.remove_child_callback);
+            // Response.
+            return this;
+        }
+        // @ts-ignore
+        remove() {
+            // Remove from content.
+            super.remove();
+            // Remove event listener from body.
+            document.body.removeEventListener("mousedown", this.remove_child_callback);
+            // Response.
+            return this;
+        }
+    };
+    __setFunctionName(_classThis, "ContextMenuElement");
+    (() => {
+        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);
+        ContextMenuElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return ContextMenuElement = _classThis;
+})();
+export { ContextMenuElement };
+export const ContextMenu = Elements.wrapper(ContextMenuElement);
+export const NullContextMenu = Elements.create_null(ContextMenuElement);
+Elements.extend({
+    _context_menu: undefined,
+    /**
+     * @docs:
+     * @parent: VElement
+     * @title: On Context Menu
+     * @desc:
+     *     Script to be run when a context menu is triggered. This function can set or get the context menu callback.
+     * @param:
+     *     @name: callback
+     *     @descr:
+     *         The parameter may either be a callback function, a ContextMenu object, or an Array as the ContextMenu parameter.
+     * @return:
+     *     @description Returns the `VElement` object. If `callback` is `null`, then the attribute's value is returned.
+     * @funcs: 2
+     */
+    on_context_menu(callback) {
+        if (callback == null) {
+            if (this._context_menu !== undefined) {
+                return this._context_menu;
+            }
+            else {
+                return this.oncontextmenu ?? undefined;
+            }
+        }
+        if (callback instanceof ContextMenuElement || callback.element_type === "ContextMenu") {
+            this._context_menu = callback;
+            const _this_ = this;
+            this.oncontextmenu = (event) => {
+                if (this._context_menu instanceof ContextMenuElement) {
+                    this._context_menu.popup(event);
+                }
+            };
+        }
+        else if (Array.isArray(callback)) {
+            this._context_menu = ContextMenu(callback);
+            const _this_ = this;
+            this.oncontextmenu = (event) => {
+                if (this._context_menu instanceof ContextMenuElement) {
+                    this._context_menu.popup(event);
+                }
+            };
+        }
+        else {
+            const _this_ = this;
+            this.oncontextmenu = (event) => callback(_this_, event);
+        }
+        return this;
+    },
+});
+// @test
+// new VStackElement().on_context_menu();
+// VStack().on_context_menu();
+// VStack().on_context_menu_UNKNOWN();

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

@@ -0,0 +1,10 @@
+export declare class Stylesheet {
+    _element: HTMLStyleElement;
+    constructor(data: any, auto_append?: boolean);
+    data(): string;
+    data(val: string): this;
+    attach(): this;
+    join(): this;
+    remove(): this;
+    append_to(parent: any): this;
+}

package/frontend/dist/ui/css.js

@@ -0,0 +1,44 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+// Button.
+export class Stylesheet {
+    // Constructor.
+    constructor(data, auto_append = false) {
+        this._element = document.createElement("style");
+        this._element.innerHTML = data;
+        if (auto_append) {
+            this.attach();
+        }
+    }
+    data(val) {
+        if (val == null) {
+            return this._element.innerHTML ?? "";
+        }
+        this._element.innerHTML = val;
+        return this;
+    }
+    // Attach.
+    attach() {
+        document.head.appendChild(this._element);
+        return this;
+    }
+    join() {
+        document.head.appendChild(this._element);
+        return this;
+    }
+    // Remove.
+    remove() {
+        this._element.remove();
+        return this;
+    }
+    // Append to.
+    append_to(parent) {
+        parent.appendChild(this._element);
+        return this;
+    }
+}
+// export const CSS = Elements.wrapper(CSSElement);
+// export const NullCSS = Elements.create_null(CSSElement);
+// declare module './any_element.d.ts' { interface AnyElementMap { CSSElement: CSSElement }}

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

@@ -0,0 +1,18 @@
+import { VElementTagMap } from "../elements/module.js";
+export declare class DividerElement extends VElementTagMap.div {
+    static default_style: {
+        margin: string;
+        padding: string;
+        width: string;
+        height: string;
+        "min-height": string;
+    };
+    constructor();
+}
+export declare const Divider: <Extensions extends object = {}>() => DividerElement & Extensions;
+export declare const NullDivider: <Extensions extends object = {}>() => DividerElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        DividerElement: DividerElement;
+    }
+}

package/frontend/dist/ui/divider.js

@@ -0,0 +1,82 @@
+/*
+ * 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";
+// Divider.
+let DividerElement = (() => {
+    var _a;
+    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VElementTagMap.div;
+    var DividerElement = _classThis = class extends _classSuper {
+        constructor() {
+            super({
+                derived: DividerElement,
+            });
+        }
+    };
+    __setFunctionName(_classThis, "DividerElement");
+    (() => {
+        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);
+        DividerElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+    })();
+    _classThis.default_style = {
+        "margin": "0px",
+        "padding": "0px",
+        "width": "100%",
+        "height": "1px",
+        "min-height": "1px",
+        // "background": "black",
+    };
+    (() => {
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return DividerElement = _classThis;
+})();
+export { DividerElement };
+export const Divider = Elements.wrapper(DividerElement);
+export const NullDivider = Elements.create_null(DividerElement);

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

@@ -0,0 +1,115 @@
+import { VStackElement, HStackElement, AnchorHStackElement } from "./stack";
+import { ImageMaskElement } from "./image";
+type DropdownCallback = (element: DropdownElement) => void;
+export declare class DropdownElement extends VStackElement {
+    target: HTMLElement;
+    animate: boolean;
+    duration: number;
+    side?: string;
+    use_target_min: boolean;
+    auto_remove: boolean;
+    _min_width?: number;
+    _max_width?: number;
+    _min_height?: number;
+    _max_height?: number;
+    below_target: boolean;
+    x_offset: number;
+    y_offset: number;
+    content_items: ((AnchorHStackElement | HStackElement) & {
+        image: ImageMaskElement;
+    })[];
+    on_expand_callback?: DropdownCallback;
+    on_minimize_callback?: DropdownCallback;
+    mouse_over_background: string;
+    mouse_out_opacity: number;
+    _content_padding: [any, any] | [any, any, any, any];
+    _content_margin: [any, any] | [any, any, any, any];
+    _frame_min_width: number;
+    _frame_min_height: number;
+    _frame_max_width: number;
+    _frame_max_height: number;
+    next_toggle_allowed?: number;
+    expanded: boolean;
+    animation_timeout: any;
+    close_handler?: Function;
+    constructor({ target, animate, duration, side, auto_remove, min_width, max_width, min_height, max_height, use_target_min, below_target, x_offset, y_offset, content, }: {
+        target: HTMLElement;
+        animate?: boolean;
+        duration?: number;
+        side?: string;
+        auto_remove?: boolean;
+        min_width?: number;
+        max_width?: number;
+        min_height?: number;
+        max_height?: number;
+        use_target_min?: boolean;
+        below_target?: boolean;
+        x_offset?: number;
+        y_offset?: number;
+        content?: {
+            text: string;
+            image?: string;
+            image_padding?: number;
+            image_top?: number;
+            href?: string;
+            callback?: Function;
+            on_click?: Function;
+            on_click_redirect?: string;
+            anchor?: boolean;
+        };
+    });
+    _get_frame(): void;
+    toggle(): this;
+    expand(): this;
+    minimize(force?: boolean): this;
+    on_expand(): undefined | DropdownCallback;
+    on_expand(callback: DropdownCallback): this;
+    on_minimize(): undefined | DropdownCallback;
+    on_minimize(callback: DropdownCallback): this;
+    font_size(): string;
+    font_size(value: string | number): this;
+    color(): string;
+    color(value: string): this;
+    iterate_content(callback: (element: AnchorHStackElement | HStackElement) => any): this;
+    content_padding(): typeof this._content_padding;
+    content_padding(...args: typeof this._content_padding): this;
+    content_margin(): typeof this._content_margin;
+    content_margin(...args: typeof this._content_margin): this;
+    content_background(): string;
+    content_background(value: string): this;
+    content_opacity(): number;
+    content_opacity(value: number): this;
+}
+export declare const Dropdown: <Extensions extends object = {}>(args_0: {
+    target: HTMLElement;
+    animate?: boolean;
+    duration?: number;
+    side?: string;
+    auto_remove?: boolean;
+    min_width?: number;
+    max_width?: number;
+    min_height?: number;
+    max_height?: number;
+    use_target_min?: boolean;
+    below_target?: boolean;
+    x_offset?: number;
+    y_offset?: number;
+    content?: {
+        text: string;
+        image?: string;
+        image_padding?: number;
+        image_top?: number;
+        href?: string;
+        callback?: Function;
+        on_click?: Function;
+        on_click_redirect?: string;
+        anchor?: boolean;
+    };
+}) => DropdownElement & Extensions;
+export declare const NullDropdown: <Extensions extends object = {}>() => DropdownElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        DropdownElement: DropdownElement;
+    }
+}
+export {};