@vandenberghinc/volt 1.2.5 → 1.2.6

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

@@ -1,424 +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 } from "../elements/module.js";
-import { Schema } from "@vandenberghinc/vlib/frontend";
-import { VStack, VStackElement, HStack, ZStack } from "./stack.js";
-import { ForEach } from "./for_each.js";
-import { Text } from "./text.js";
-import { Divider } from "./divider.js";
-/**
- * Create a tabs element with content that will be presented when the tab is selected.
- * @nav Frontend/Elements
- * @param content The tab contents.
- * @param content.title The tab title.
- * @param content.content The volt node to be presented when the tab is selected.
- * @param content.on_header A callback that can be set to edit the tab's header title node. The callback takes the arguments local header node and parent tabs node as `(header_node, tabs_node)`.
- * @docs
- */
-let TabsElement = (() => {
-    let _classDecorators = [Elements.create({
-            name: "TabsElement",
-            default_style: {
-                ...VStackElement.default_style,
-                "font-size": "16px",
-                "font-weight": "500",
-                "overflow-x": "hidden",
-                "width": "100%",
-                "--tabs-tint": "blue",
-                "--tabs-tab-opac": 0.8,
-                "--tabs-div-bg": "gray",
-                "--tabs-div-opac": 0.5,
-            },
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = VStackElement;
-    var TabsElement = 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);
-            TabsElement = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        // Attributes.
-        _tint;
-        _tab_opac;
-        _div_bg;
-        _div_opac;
-        _selected_node;
-        _tab_nodes;
-        _on_tab_header;
-        _div;
-        _animate;
-        _duration;
-        /**
-         * Create a new `TabsElement`.
-         * @param content The tab contents or an object map of title->content.
-         * @param animate Enable animated show/hide transitions for tab content.
-         * @param duration Transition duration in milliseconds.
-         */
-        // Constructor.
-        constructor({ content = [], animate = true, duration = 300, }) {
-            // Inherit.
-            super();
-            this._init({
-                derived: TabsElement,
-            });
-            // Params.
-            this._animate = animate;
-            this._duration = duration;
-            // Attributes.
-            this._tint = TabsElement.default_style["--tabs-tint"];
-            this._tab_opac = TabsElement.default_style["--tabs-tab-opac"];
-            if (this._tab_opac === false) {
-                this._tab_opac = -1;
-            }
-            this._div_bg = TabsElement.default_style["--tabs-div-bg"];
-            this._div_opac = TabsElement.default_style["--tabs-div-opac"];
-            this._selected_node = undefined;
-            this._tab_nodes = [];
-            // Build.
-            this.color("white");
-            this.build(content);
-        }
-        /**
-         * Set the default style for this element (inherits defaults from `VStackElement`).
-         */
-        // Set default since it inherits another element.
-        set_default() {
-            return super.set_default(TabsElement);
-        }
-        styles(style_dict) {
-            if (style_dict == null) {
-                let styles = super.styles();
-                styles["--tabs-tint"] = this._tint;
-                styles["--tabs-tab-opac"] = this._tab_opac.toString();
-                styles["--tabs-div-bg"] = this._div_bg;
-                styles["--tabs-div-opac"] = this._div_opac.toString();
-                return styles;
-            }
-            else {
-                return super.styles(style_dict);
-            }
-        }
-        /**
-         * Build the tab's content. This function is called automatically from the constructor.
-         * @docs
-         */
-        // Build.
-        build(content = []) {
-            // Convert conent object to array.
-            if (content && typeof content === "object" && !Array.isArray(content)) {
-                const old = content;
-                content = Object.keys(old).map(key => ({
-                    title: key,
-                    content: old[key],
-                }));
-            }
-            else if (!Array.isArray(content)) {
-                console.error(`Invalid parameter type "${Schema.value_type(content)}" for parameter "content", the valid type is "array" or "object".`);
-                return this;
-            }
-            content = content;
-            // Build.
-            this.remove_children();
-            const main_this = this;
-            let zstack;
-            this.append(HStack(ForEach(content, (content_item, index, is_last) => {
-                const name = content_item.title;
-                const content_stack = content_item.content;
-                if (typeof name !== "string") {
-                    console.error(`Invalid parameter type "${Schema.value_type(name)}" for parameter "content.${index}.title", the valid type is "string".`);
-                }
-                else if (content_stack == null) {
-                    console.error(`Invalid parameter type "${Schema.value_type(content_stack)}" for parameter "content.${index}.content", the valid type is "Node". or "Array"`);
-                }
-                const item = HStack(// use an hstack so the user can still add flexed elements through the on_tab_header callback.
-                Text(name)
-                    .assign_to_parent_as("_header_title") // use unique name since more elements might be added by the user.
-                    .flex_shrink(0)
-                    .width("fit-content")
-                    .margin_bottom(5)
-                    .font_weight("inherit")
-                    .font_size("inherit")
-                    .color(index === 0 ? this._tint : "inherit")
-                    .transition("color 250ms ease-in-out, background 250ms ease-in-out"), // also background animation for gradient colors.
-                VStack()
-                    .assign_to_parent_as("_header_div") // use unique name since more elements might be added by the user.
-                    .position(null, 0, -1, 0)
-                    .height(2)
-                    .border_radius(2)
-                    .background(index === 0 ? this._tint : "transparent")
-                    .transition("background 250ms ease-in-out, opacity 250ms ease-in-out"))
-                    .center_vertical() // so the user can still add flexed elements through the on_tab_header callback.
-                    .transition("opacity 250ms ease-in-out")
-                    .display("inline-flex")
-                    .padding(0, 2)
-                    .flex_shrink(0)
-                    .margin_right(is_last ? 0 : 25)
-                    .position("relative")
-                    .wrap(false)
-                    .opacity(this._tab_opac === -1 ? 1 : this._tab_opac)
-                    .extend({
-                    on_select(callback) {
-                        if (callback == null) {
-                            return this._on_select;
-                        }
-                        this._on_select = callback;
-                        return this;
-                    },
-                    select() {
-                        this._header_title.color(main_this._tint);
-                        this._header_div.background(main_this._tint).opacity(1);
-                        if (main_this._tab_opac !== -1) {
-                            this.opacity(1);
-                        }
-                        if (main_this._selected_node && main_this._selected_node != this) {
-                            main_this._selected_node.unselect();
-                        }
-                        if (main_this._animate) {
-                            content_stack.show().getBoundingClientRect();
-                            content_stack.opacity(1);
-                        }
-                        else {
-                            content_stack.show();
-                        }
-                        if (typeof this._on_select === "function") {
-                            this._on_select(this);
-                        }
-                        main_this._selected_node = this;
-                        return this;
-                    },
-                    on_unselect(callback) {
-                        if (callback == null) {
-                            return this._on_unselect;
-                        }
-                        this._on_unselect = callback;
-                        return this;
-                    },
-                    unselect() {
-                        this._header_title.color("inherit");
-                        this._header_div.background("transparent");
-                        if (main_this._tab_opac !== -1) {
-                            this.opacity(main_this._tab_opac);
-                        }
-                        if (main_this._animate) {
-                            content_stack.opacity(0).timeout(main_this._duration, e => e.hide());
-                        }
-                        else {
-                            content_stack.hide();
-                        }
-                        if (typeof this._on_unselect === "function") {
-                            this._on_unselect(this);
-                        }
-                        return this;
-                    },
-                    is_selected() {
-                        return this === main_this._selected_node;
-                    }
-                })
-                    .on_mouse_over(e => {
-                    if (e !== main_this._selected_node) {
-                        if (this._tab_opac !== -1) {
-                            e.opacity(1);
-                        }
-                        const color = window.getComputedStyle(e).color;
-                        e._header_div.opacity(this._div_opac).background(color);
-                    }
-                })
-                    .on_mouse_out(e => {
-                    if (e !== main_this._selected_node) {
-                        if (this._tab_opac !== -1) {
-                            e.opacity(this._tab_opac);
-                        }
-                        e._header_div.background("transparent").opacity(1);
-                    }
-                })
-                    .on_click(e => e.select())
-                    .exec(e => {
-                    if (index === 0) {
-                        main_this._selected_node = e;
-                    }
-                    this._tab_nodes.append(e);
-                });
-                if (typeof content_item.on_header === "function") {
-                    content_item.on_header(item, this);
-                }
-                if (typeof this._on_tab_header === "function") {
-                    this._on_tab_header(name, item, this);
-                }
-                return item;
-            }))
-                .width("100%"), this._div = Divider()
-                .frame("100%", 1)
-                .background(this._div_bg)
-                .margin(1, 0, 25, 0), zstack = ZStack());
-            let index = 0;
-            for (const item of content) {
-                const content_stack = item.content;
-                if (index === 0) {
-                    content_stack.show();
-                }
-                else {
-                    content_stack.hide();
-                    if (this._animate) {
-                        content_stack.opacity(0);
-                    }
-                }
-                if (content_stack.overflow_x() === "visible") {
-                    content_stack.overflow_x("hidden");
-                }
-                content_stack.width("100%");
-                content_stack.transition(`opacity ${this._duration}ms ease-in-out`);
-                zstack.append(content_stack);
-                ++index;
-            }
-            ;
-        }
-        /**
-         * Selected
-         *
-         * Get the selected tab title, returns `null` when no tab has been selected.
-         * @docs
-         */
-        // @ts-ignore
-        selected() {
-            return this._selected_node ? this._selected_node.textContent : null;
-        }
-        /**
-         * Select a tab based on the title text.
-         * @docs
-        */
-        // @ts-ignore
-        select(tab) {
-            if (tab == null) {
-                return this._selected_node ? this._selected_node.textContent : null;
-            }
-            for (const node of this._tab_nodes) {
-                if (node.textContent === tab) {
-                    node.select();
-                    break;
-                }
-            }
-            return this;
-        }
-        /**
-         * Set or get the tint color.
-         * @docs
-         */
-        tint(value) {
-            if (value == null) {
-                return this._tint ?? "";
-            }
-            this._tint = value;
-            if (this._selected_node) {
-                this._selected_node.select();
-            }
-            return this;
-        }
-        /**
-         * Set or get the tab title opacity. By default non selected tabs have a slight opacity `0.8`, value `-1` can be used to disable this behaviour.
-         * @docs
-         */
-        tab_opacity(value) {
-            if (value == null) {
-                return this._tab_opac;
-            }
-            if (value === false) {
-                value = -1;
-            }
-            else if (value === true) {
-                value = 0.8;
-            }
-            this._tab_opac = value;
-            for (const node of this._tab_nodes) {
-                if (this._selected_node !== node) {
-                    node.opacity(value);
-                }
-            }
-            return this;
-        }
-        /**
-         * Set or get the divider background color.
-         * @docs
-         */
-        divider_background(value) {
-            if (value == null) {
-                return this._div_bg;
-            }
-            this._div_bg = value;
-            this._div?.background(this._div_bg);
-            return this;
-        }
-        /**
-         * Set or get the divider opacity from mouse over events. By default in mouse over events the tab bottom divider will have the same color as the tab title, but with an opacity.
-         * @docs
-         */
-        divider_opacity(value) {
-            if (value == null) {
-                return this._div_opac;
-            }
-            this._div_opac = value;
-            return this;
-        }
-        /**
-         * Set a on tab header callback. This callback is executed when a title's header is built.
-         *
-         * Beware, by default the content is already built in the constructor. Therefore, you should not pass a `content` parameter to the constructor.
-         * Instead construct the object, set this callback and then use `TabsElement.build(content)` to build the content after the callback has been set.
-         * @param callback The callback accepts parameters `(tab_name, tab_node, node)`. The last node is the parent `TabsElements` object.
-         * @docs
-         */
-        on_tab_header(callback) {
-            if (callback == null) {
-                return this._on_tab_header;
-            }
-            this._on_tab_header = callback;
-            return this;
-        }
-    };
-    return TabsElement = _classThis;
-})();
-export { TabsElement };
-export const Tabs = Elements.wrapper(TabsElement);
-export const NullTabs = Elements.create_null(TabsElement);

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

@@ -1,15 +0,0 @@
-/**
- * @author Daan van den Bergh
- * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
- */
-import { VElementTagMap } from "../elements/module.js";
-export declare class TextElement extends VElementTagMap.p {
-    constructor(text?: string);
-}
-export declare const Text: <Extensions extends object = {}>(text?: string | undefined) => TextElement & Extensions;
-export declare const NullText: <Extensions extends object = {}>() => TextElement & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        TextElement: TextElement;
-    }
-}

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

@@ -1,83 +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, VElementTagMap } from "../elements/module.js";
-// Text.
-let TextElement = (() => {
-    let _classDecorators = [Elements.create({
-            name: "TextElement",
-            default_style: {
-                "margin": "0px 0px 0px 0px",
-                "padding": "0", // 2.5px
-                "font-size": "20px",
-                "color": "inherit",
-                "text-align": "inherit",
-                "white-space": "wrap",
-            }
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = VElementTagMap.p;
-    var TextElement = 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);
-            TextElement = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        // Constructor.
-        constructor(text) {
-            // Initialize base class.
-            super({
-                derived: TextElement,
-            });
-            // Set text.
-            if (text) {
-                this.text(text); // do not use inner_html since the text might contain "<" etc.
-            }
-        }
-    };
-    return TextElement = _classThis;
-})();
-export { TextElement };
-export const Text = Elements.wrapper(TextElement);
-export const NullText = Elements.create_null(TextElement);

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

@@ -1,91 +0,0 @@
-/**
- * @author Daan van den Bergh
- * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
- */
-import { VElementTagMap } from "../elements/module.js";
-export declare class TitleElement extends VElementTagMap.h1 {
-    constructor(text?: string);
-}
-export declare const Title: <Extensions extends object = {}>(text?: string | undefined) => TitleElement & Extensions;
-export declare const NullTitle: <Extensions extends object = {}>() => TitleElement & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        TitleElement: TitleElement;
-    }
-}
-export declare class SubtitleElement extends VElementTagMap.h1 {
-    constructor(text?: string);
-}
-export declare const Subtitle: <Extensions extends object = {}>(text?: string | undefined) => SubtitleElement & Extensions;
-export declare const NullSubtitle: <Extensions extends object = {}>() => SubtitleElement & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        SubtitleElement: SubtitleElement;
-    }
-}
-/** A specific title ensured to use the `h1` html tag. */
-export declare class H1Element extends VElementTagMap.h1 {
-    constructor(text?: string);
-}
-export declare const H1: <Extensions extends object = {}>(text?: string | undefined) => H1Element & Extensions;
-export declare const NullH1: <Extensions extends object = {}>() => H1Element & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        H1Element: H1Element;
-    }
-}
-/** A specific title ensured to use the `h2` html tag. */
-export declare class H2Element extends VElementTagMap.h1 {
-    constructor(text?: string);
-}
-export declare const H2: <Extensions extends object = {}>(text?: string | undefined) => H2Element & Extensions;
-export declare const NullH2: <Extensions extends object = {}>() => H2Element & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        H2Element: H2Element;
-    }
-}
-/** A specific title ensured to use the `h3` html tag. */
-export declare class H3Element extends VElementTagMap.h1 {
-    constructor(text?: string);
-}
-export declare const H3: <Extensions extends object = {}>(text?: string | undefined) => H3Element & Extensions;
-export declare const NullH3: <Extensions extends object = {}>() => H3Element & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        H3Element: H3Element;
-    }
-}
-/** A specific title ensured to use the `h4` html tag. */
-export declare class H4Element extends VElementTagMap.h1 {
-    constructor(text?: string);
-}
-export declare const H4: <Extensions extends object = {}>(text?: string | undefined) => H4Element & Extensions;
-export declare const NullH4: <Extensions extends object = {}>() => H4Element & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        H4Element: H4Element;
-    }
-}
-/** A specific title ensured to use the `h5` html tag. */
-export declare class H5Element extends VElementTagMap.h1 {
-    constructor(text?: string);
-}
-export declare const H5: <Extensions extends object = {}>(text?: string | undefined) => H5Element & Extensions;
-export declare const NullH5: <Extensions extends object = {}>() => H5Element & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        H5Element: H5Element;
-    }
-}
-/** A specific title ensured to use the `h6` html tag. */
-export declare class H6Element extends VElementTagMap.h1 {
-    constructor(text?: string);
-}
-export declare const H6: <Extensions extends object = {}>(text?: string | undefined) => H6Element & Extensions;
-export declare const NullH6: <Extensions extends object = {}>() => H6Element & Extensions;
-declare module './any_element.d.ts' {
-    interface AnyElementMap {
-        H6Element: H6Element;
-    }
-}