@vandenberghinc/volt 1.1.26 → 1.1.28

package/frontend/dist/{ui → frontend/src/ui}/steps.js

@@ -1,6 +1,6 @@
-/*
- * Author: Daan van den Bergh
- * Copyright: © 2022 - 2024 Daan van den Bergh.
+/**
+ * @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; }
@@ -38,42 +38,20 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 // Imports.
 import { Elements, isVElement } from "../elements/module.js";
-import { VStack, VStackElement, HStack } from "./stack";
-import { Divider } from "./divider";
-import { Span } from "./span";
-import { ForEach } from "./for_each";
-/*	@docs:
-    @nav: Frontend
-    @chapter: Elements
-    @title: Steps
-    @descr: Steps element.
-    @param:
-        @name: content
-        @descr: The steps content. By default it should be an array with `Step` objects. However, when one of the items is an array, the `Step` object will automatically be initialized with the array as the `Step.content` attribute.
-        @type: Step[]
-        @attributes_type: Step
-        @attr:
-            @name: title
-            @descr: The step title.
-            @type: string
-        @attr:
-            @name: content / children
-            @descr: The step children.
-            @type: node[]
-        @attr:
-            @name: hstack
-            @descr: Flag to use a hstack instead of vstack as the children container.
-            @type: boolean
-            @default: false
-        @attr:
-            @name: side_by_side_width
-            @descr: The minimum pixels width of the content container (not the full screen) to show content side by side when `hstack` is enabled.
-            @type: number
-    @param:
-        @name: spacing
-        @descr: Spacing between the step content.
-        @type: string, number
-        @default: "1.25em"
+import { VStack, VStackElement, HStack } from "./stack.js";
+import { Divider } from "./divider.js";
+import { Span } from "./span.js";
+import { ForEach } from "./for_each.js";
+/**
+ * Steps element.
+ * @nav Frontend/Elements
+ * @param content The steps content. By default it should be an array with `Step` objects. However, when one of the items is an array, the `Step` object will automatically be initialized with the array as the `Step.content` attribute.
+ * @param content.title The step title.
+ * @param content.content The step children.
+ * @param content.children The step children.
+ * @param content.hstack Flag to use a hstack instead of vstack as the children container (default: false).
+ * @param content.side_by_side_width The minimum pixels width of the content container (not the full screen) to show content side by side when `hstack` is enabled.
+ * @docs
  */
 let StepsElement = (() => {
     let _classDecorators = [Elements.create({
@@ -112,6 +90,10 @@ let StepsElement = (() => {
         _step_nodes = [];
         _div_nodes = [];
         _content_nodes = [];
+        /**
+         * Create a `StepsElement`.
+         * @param content The steps content. Accepts arrays of nodes/VElements or `StepContentOptions`; array items are coerced into steps automatically.
+         */
         // Constructor.
         constructor({ content = [], }) {
             // Inherit.
@@ -204,6 +186,9 @@ let StepsElement = (() => {
                 return element;
             }));
         }
+        /**
+         * Set default since it inherits another element.
+         */
         // Set default since it inherits another element.
         set_default() {
             return super.set_default(StepsElement);
@@ -295,17 +280,17 @@ let StepsElement = (() => {
             });
             return this;
         }
-        /*	@docs:
-            @title: Iterate step number nodes
-            @description: Iterate the step number nodes. When the callback returns any non null value the iteration will be stopped.
+        /**
+         * Iterate the step number nodes. When the callback returns any non null value the iteration will be stopped.
+         * @docs
          */
         iterate_step_numbers(callback) {
             this._step_nr_nodes.iterate(node => { callback(node); });
             return this;
         }
-        /*	@docs:
-            @title: Iterate step nodes
-            @description: Iterate the step nodes. When the callback returns any non null value the iteration will be stopped.
+        /**
+         * Iterate the step nodes. When the callback returns any non null value the iteration will be stopped.
+         * @docs
          */
         iterate_steps(callback) {
             this._step_nodes.iterate(node => { callback(node); });

package/frontend/dist/{ui → frontend/src/ui}/style.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
 import { VElementBaseSignature } from "../elements/module.js";
 declare const StyleElement_base: VElementBaseSignature;
 export declare class StyleElement extends StyleElement_base {

package/frontend/dist/{ui → frontend/src/ui}/style.js

@@ -1,6 +1,6 @@
-/*
- * Author: Daan van den Bergh
- * Copyright: © 2022 - 2024 Daan van den Bergh.
+/**
+ * @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; }

package/frontend/dist/{ui → frontend/src/ui}/switch.d.ts

@@ -1,4 +1,8 @@
-import { VStackElement } from "./stack";
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { VStackElement } from "./stack.js";
 export declare namespace SwitchElement {
     type OnChangeCallback<This> = (element: This, enabled: boolean) => void;
 }

package/frontend/dist/{ui → frontend/src/ui}/switch.js

@@ -1,6 +1,6 @@
-/*
- * Author: Daan van den Bergh
- * Copyright: © 2022 - 2024 Daan van den Bergh.
+/**
+ * @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; }
@@ -38,7 +38,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 // Imports.
 import { Elements } from "../elements/module.js";
-import { VStack, VStackElement } from "./stack";
+import { VStack, VStackElement } from "./stack.js";
 // Switch button.
 let SwitchElement = (() => {
     let _classDecorators = [Elements.create({

package/frontend/dist/{ui → frontend/src/ui}/table.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
 import { VElementTagMap, AppendType } from "../elements/module.js";
 export declare class TableHeadElement extends VElementTagMap.thead {
     constructor(...content: any[]);

package/frontend/dist/{ui → frontend/src/ui}/table.js

@@ -1,6 +1,6 @@
-/*
- * Author: Daan van den Bergh
- * Copyright: © 2022 - 2024 Daan van den Bergh.
+/**
+ * @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; }
@@ -38,7 +38,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 // Imports.
 import { Elements, VElementTagMap } from "../elements/module.js";
-import { Scheme } from "@vandenberghinc/vlib/frontend";
+import { Schema } from "@vandenberghinc/vlib/frontend";
 // Table head element.
 let TableHeadElement = (() => {
     let _classDecorators = [Elements.create({
@@ -334,11 +334,11 @@ let TableElement = (() => {
         // Create the table.
         create({ rows, columns }) {
             // if (!Array.isArray(rows)) {
-            // 	console.error(`Invalid type "${Scheme.value_type(rows)}" for parameter "rows" the valid type is "array".`)
+            // 	console.error(`Invalid type "${Schema.value_type(rows)}" for parameter "rows" the valid type is "array".`)
             // 	return this;
             // }
             if (!Array.isArray(columns)) {
-                console.error(`Invalid type "${Scheme.value_type(columns)}" for parameter "columns" the valid type is "array".`);
+                console.error(`Invalid type "${Schema.value_type(columns)}" for parameter "columns" the valid type is "array".`);
                 return this;
             }
             // console.log(columns, rows)

package/frontend/dist/{ui → frontend/src/ui}/tabs.d.ts

@@ -1,7 +1,14 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
 import { VElementBaseSignature } from "../elements/module.js";
-import { VStackElement, HStackElement } from "./stack";
-import { TextElement } from "./text";
-import { DividerElement } from "./divider";
+import { VStackElement, HStackElement } from "./stack.js";
+import { TextElement } from "./text.js";
+import { DividerElement } from "./divider.js";
+/**
+ * The header tab element interface used inside `TabsElement`. Extends `HStackElement` and exposes selection state and handlers for tab header items.
+ */
 export interface TabElement extends HStackElement {
     _header_title: TextElement;
     _header_div: VStackElement;
@@ -15,12 +22,24 @@ export interface TabElement extends HStackElement {
     unselect(): this;
     is_selected(): boolean;
 }
+/**
+ * Describes a single tab: its display title and the content node shown when the tab is selected.
+ */
 export interface TabContentItem {
     title: string;
     content: any;
 }
 type OnTabHeader = ((name: string, header: HStackElement, tab: TabsElement) => any);
 declare const TabsElement_base: VElementBaseSignature;
+/**
+ * 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
+ */
 export declare class TabsElement extends TabsElement_base {
     _tint: string;
     _tab_opac: number;
@@ -32,15 +51,38 @@ export declare class TabsElement extends TabsElement_base {
     _div?: DividerElement;
     protected _animate: boolean;
     protected _duration: number;
+    /**
+     * 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({ content, animate, duration, }: {
         content: TabContentItem[] | Record<string, any>;
         animate?: boolean;
         duration?: number;
     });
+    /**
+     * Set the default style for this element (inherits defaults from `VStackElement`).
+     */
     set_default(): this;
+    /**
+     * Get or set the element's styles. When setting, merges provided styles and updates CSS custom properties used by tabs.
+     * @param style_dict Optional style dictionary to set.
+     */
     styles(): Record<string, string>;
     styles(style_dict: Record<string, any>): this;
+    /**
+     * Build the tab's content. This function is called automatically from the constructor.
+     * @docs
+     */
     build(content?: TabContentItem[] | Record<string, any>): this | undefined;
+    /**
+     * Selected
+     *
+     * Get the selected tab title, returns `null` when no tab has been selected.
+     * @docs
+     */
     selected(): string | null;
     select(): string | null;
     select(tab: string): this;

package/frontend/dist/{ui → frontend/src/ui}/tabs.js

@@ -1,6 +1,6 @@
-/*
- * Author: Daan van den Bergh
- * Copyright: © 2022 - 2024 Daan van den Bergh.
+/**
+ * @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; }
@@ -38,32 +38,19 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 // Imports.
 import { Elements } from "../elements/module.js";
-import { Scheme } from "@vandenberghinc/vlib/frontend";
-import { VStack, VStackElement, HStack, ZStack } from "./stack";
-import { ForEach } from "./for_each";
-import { Text } from "./text";
-import { Divider } from "./divider";
-/*	@docs:
-    @nav: Frontend
-    @chapter: Elements
-    @title: Tabs
-    @description: Create a tabs element with content that will be presented when the tab is selected.
-    @param:
-        @name: content
-        @descr: The tab contents.
-        @type: Tab[]
-        @attributes_type: Tab
-        @attr:
-            @name: title
-            @descr: The tab title.
-        @attr:
-            @name: content
-            @descr: The volt node to be presented when the tab is selected.
-        @attr:
-            @name: on_header
-            @descr:
-                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)`.
+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({
@@ -104,6 +91,12 @@ let TabsElement = (() => {
         _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.
@@ -128,6 +121,9 @@ let TabsElement = (() => {
             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);
@@ -145,12 +141,11 @@ let TabsElement = (() => {
                 return super.styles(style_dict);
             }
         }
-        // Build.
-        /*	@docs:
-            @title: Build
-            @description:
-                Build the tab's content. This function is called automatically from the constructor.
+        /**
+         * 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)) {
@@ -161,7 +156,7 @@ let TabsElement = (() => {
                 }));
             }
             else if (!Array.isArray(content)) {
-                console.error(`Invalid parameter type "${Scheme.value_type(content)}" for parameter "content", the valid type is "array" or "object".`);
+                console.error(`Invalid parameter type "${Schema.value_type(content)}" for parameter "content", the valid type is "array" or "object".`);
                 return this;
             }
             content = content;
@@ -173,10 +168,10 @@ let TabsElement = (() => {
                 const name = content_item.title;
                 const content_stack = content_item.content;
                 if (typeof name !== "string") {
-                    console.error(`Invalid parameter type "${Scheme.value_type(name)}" for parameter "content.${index}.title", the valid type is "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 "${Scheme.value_type(content_stack)}" for parameter "content.${index}.content", the valid type is "Node". or "Array"`);
+                    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)
@@ -319,14 +314,20 @@ let TabsElement = (() => {
                 ++index;
             });
         }
-        /*	@docs:
-            @title: Selected
-            @description: Get the selected tab title, returns `null` when no tab has been selected.
+        /**
+         * 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) {
@@ -340,6 +341,10 @@ let TabsElement = (() => {
             });
             return this;
         }
+        /**
+         * Set or get the tint color.
+         * @docs
+         */
         tint(value) {
             if (value == null) {
                 return this._tint ?? "";
@@ -350,6 +355,10 @@ let TabsElement = (() => {
             }
             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;
@@ -368,6 +377,10 @@ let TabsElement = (() => {
             });
             return this;
         }
+        /**
+         * Set or get the divider background color.
+         * @docs
+         */
         divider_background(value) {
             if (value == null) {
                 return this._div_bg;
@@ -376,6 +389,10 @@ let TabsElement = (() => {
             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;
@@ -383,6 +400,14 @@ let TabsElement = (() => {
             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;

package/frontend/dist/{ui → frontend/src/ui}/text.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @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);

package/frontend/dist/{ui → frontend/src/ui}/text.js

@@ -1,6 +1,6 @@
-/*
- * Author: Daan van den Bergh
- * Copyright: © 2022 - 2024 Daan van den Bergh.
+/**
+ * @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; }

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

@@ -0,0 +1,91 @@
+/**
+ * @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;
+    }
+}