@vandenberghinc/volt 1.1.26 → 1.1.28

package/frontend/dist/{ui → frontend/src/ui}/pseudo.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; }
@@ -36,6 +36,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
+import * as vlib from "@vandenberghinc/vlib/frontend";
 // Imports.
 import { Elements, VElementTagMap } from "../elements/module.js";
 // Divider.
@@ -56,20 +57,95 @@ let PseudoElement = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        // Attributes.
+        /**
+         * The pseudo id used for creating a css class.
+         * @note This id should be suffixed with the pseudo class type, e.g. `pseudo_1234_before`.
+         */
+        base_pseudo_id = "pseudo_" + vlib.String.random(24);
+        /** The stylesheet per `before` `after` etc. */
+        pseudo_classes = {};
+        /** A list of elements this pseudo element is applied to */
         added_to_elements = [];
         constructor(...children) {
             super({ derived: PseudoElement, });
             // Append.
             this.append(...children);
         }
-        // Update the pseudo on all applied elements.
-        update() {
-            this.added_to_elements.iterate(item => {
-                item.node.pseudo(item.type, this);
+        /** Retrieve a pseudo id suffixed with a specific type. */
+        pseudo_id(type) {
+            return this.base_pseudo_id + "_" + type;
+        }
+        /** Apply the pseudo to a node for a specific psuedo class. */
+        apply(node, type) {
+            /** Add a node to the {@link added_to_elements} list, if not already added. */
+            const already_added = this.added_to_elements.some(i => i.node === node && i.type === type);
+            if (!already_added) {
+                this.added_to_elements.push({
+                    node: node,
+                    type: type,
+                });
+            }
+            /** Add a stylesheet for a given pseudo element class, or update it when already present. */
+            const pseudo_id = this.pseudo_id(type);
+            const css = `.${pseudo_id}::${type}{${this.style.cssText};}`;
+            let style = this.pseudo_classes[type];
+            if (style) {
+                if (style.sheet) {
+                    style.sheet.deleteRule(0);
+                    style.sheet.insertRule(css, 0);
+                }
+            }
+            else {
+                style = document.createElement('style');
+                style.type = 'text/css';
+                document.head.appendChild(style); // append before insertRule
+                if (style.sheet) {
+                    style.sheet.insertRule(css, 0);
+                }
+                this.pseudo_classes[type] = style;
+            }
+            // Add class.
+            node.classList.add(pseudo_id);
+            // Response.
+            return this;
+        }
+        /** Alias method for {@link apply}. */
+        add(node, type) {
+            return this.apply(node, type);
+        }
+        /** Remove the pseudo effect from a node if applied. */
+        remove_from(node, type) {
+            node.classList.remove(this.pseudo_id(type));
+            return this;
+        }
+        /** Remove all pseudo effects from a given node. */
+        remove_all(node) {
+            node.classList.forEach(name => {
+                if (name.startsWith("pseudo_")) {
+                    node.classList.remove(name);
+                }
             });
             return this;
         }
+        /** Is added to. */
+        is_applied_to(node, type) {
+            return this.added_to_elements.some(i => i.node === node && i.type === type);
+        }
+        /** Alias method for {@link is_applied_to}. */
+        is_added_to(node, type) {
+            return this.added_to_elements.some(i => i.node === node && i.type === type);
+        }
+        /** Update the pseudo on all applied elements. */
+        update() {
+            for (const [type, style] of Object.entries(this.pseudo_classes)) {
+                if (style.sheet == null)
+                    continue;
+                const css = `.${this.pseudo_id}::${type}{${this.style.cssText};}`;
+                style.sheet.deleteRule(0);
+                style.sheet.insertRule(css, 0);
+            }
+            return this;
+        }
     };
     return PseudoElement = _classThis;
 })();

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

@@ -1,6 +1,10 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
 import { VElementBaseSignature, VElement, VElementTagMap, AppendType } from "../elements/module.js";
 import { AnyElement } from "./any_element.js";
-import { VStackElement } from "./stack";
+import { VStackElement } from "./stack.js";
 type OnScrollCallback = ((element: ScrollerElement, event: Event) => any);
 interface ScrollCallbackItem {
     callback: (event: Event) => any;
@@ -44,7 +48,7 @@ export declare class ScrollerElement extends VElementTagMap.div {
     hide_overflow(): this;
     delay(): number;
     delay(msec: number): this;
-    scroll_top(): number | string;
+    scroll_top(): number;
     scroll_top(value: number | string): this;
     scroll_left(): number | string;
     scroll_left(value: number | string): this;
@@ -78,6 +82,14 @@ declare module './any_element.d.ts' {
     }
 }
 declare const SnapScrollerElement_base: VElementBaseSignature;
+/**
+ * Scrolls the windows per window (snap scrolling).
+ * This class is still experimental.
+ * @experimental true
+ * @note The `SnapScrollerElement` is also initializable under function `SnapScroller`.
+ * @nav Frontend/Elements
+ * @docs
+ */
 export declare class SnapScrollerElement extends SnapScrollerElement_base {
     constructor(...children: VElement[]);
     append(...children: AnyElement[]): this;

package/frontend/dist/{ui → frontend/src/ui}/scroller.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; }
@@ -39,7 +39,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 // Imports.
 import { Elements, VElementTagMap } from "../elements/module.js";
 import { Utils } from "../modules/utils.js";
-import { VStack, VStackElement } from "./stack";
+import { VStack, VStackElement } from "./stack.js";
 // Scroller.
 // - Warning: Setting padding on element attribute "content" may cause undefined behaviour.
 let ScrollerElement = (() => {
@@ -103,14 +103,14 @@ let ScrollerElement = (() => {
                 this.position("relative"); // is required for attribute "track" 
             }
             super.overflow("hidden"); // should always be hidden to enable scrolling, and otherwise the thumb not be visible due to overflow width.
-            this.class("hide_scrollbar");
+            this.class("volt_hide_scrollbar");
             this.styles({
                 "content-visibility": "auto",
             });
             // Content.
             this.content = VStack(...children)
                 .parent(this)
-                .class("hide_scrollbar")
+                .class("volt_hide_scrollbar")
                 .position("relative") // in case it has absolute children that should scroll, otherwise the content wont scroll without "relative".
                 .frame("100%", "100%")
                 .flex("1 1 0") // flex-basis 0 otherwise it expands its parent.
@@ -132,7 +132,7 @@ let ScrollerElement = (() => {
                 .box_shadow("0px 0px 5px #00000005");
             this.track = VStack(this.thumb)
                 .parent(this)
-                .class("hide_scrollbar")
+                .class("volt_hide_scrollbar")
                 .position(5, 5, 5, null)
                 .width(10)
                 .background_color("transparent")
@@ -539,31 +539,28 @@ let ScrollerElement = (() => {
 export { ScrollerElement };
 export const Scroller = Elements.wrapper(ScrollerElement);
 export const NullScroller = Elements.create_null(ScrollerElement);
-// Scroller.
-/*  @docs:
-    @nav: Frontend
-    @chapter: Elements
-    @title: Virtual Scroller
-    @experimental: true
-    @note: The `VirtualScrollerElement` is also initializable under function `VirtualScroller`.
-    @description:
-        The virtual scroller element.
-
-        Can be initialed with function `VirtualScroller()`.
-    
-        After appending children you should call `render()` otherwise the children will only show up after a scroll event.
-
-        The virtual scroller can work in two ways.
-         1) You must set a fixed height for every direct child.
-         2) You call the member function `update_heights()` after any height involving edits are made and before you call member function `render()` for the first time.
-    @warning: Using content-visibility on the direct or nested children may cause undefined behaviour, it may cause elements to become hidden.
-    @warning: Every element must have a fixed height, Unless you use `update_heights()`. Otherwise the rendering will throw an error. Any incorrect heights may cause undefined behaviour.
-    @warning: Setting padding on element attribute "content" may cause undefined behaviour.
-    @parameter:
-        @name: children
-        @description: The elements children.
-        @type: array[Node]
- */
+// Virtual Scroller.
+// /*  @ docs:
+//     @nav: Frontend
+//     @chapter: Elements
+//     @title: Virtual Scroller
+//     @experimental: true
+//     @note: The `VirtualScrollerElement` is also initializable under function `VirtualScroller`.
+//     @description: 
+//         The virtual scroller element.
+//         Can be initialed with function `VirtualScroller()`.
+//         After appending children you should call `render()` otherwise the children will only show up after a scroll event.
+//         The virtual scroller can work in two ways. 
+//          1) You must set a fixed height for every direct child.
+//          2) You call the member function `update_heights()` after any height involving edits are made and before you call member function `render()` for the first time.
+//     @warning: Using content-visibility on the direct or nested children may cause undefined behaviour, it may cause elements to become hidden.
+//     @warning: Every element must have a fixed height, Unless you use `update_heights()`. Otherwise the rendering will throw an error. Any incorrect heights may cause undefined behaviour.
+//     @warning: Setting padding on element attribute "content" may cause undefined behaviour.
+//     @parameter:
+//         @name: children
+//         @description: The elements children.
+//         @type: array[Node]
+//  */
 // @Elements.register
 // export class VirtualScrollerElement extends (ScrollerElement as any as VElementBaseSignature) {
 //     public _v_children: any[];
@@ -808,16 +805,13 @@ export const NullScroller = Elements.create_null(ScrollerElement);
 // export const VirtualScroller = Elements.wrapper(VirtualScrollerElement);
 // export const NullVirtualScroller = Elements.create_null(VirtualScrollerElement);
 // declare module './any_element.d.ts' { interface AnyElementMap { VirtualScrollerElement: VirtualScrollerElement }}
-/*  @docs:
-    @nav: Frontend
-    @chapter: Elements
-    @title: Snap Scroller
-    @experimental: true
-    @note: The `SnapScrollerElement` is also initializable under function `SnapScroller`.
-    @description:
-        Scrolls the windows per window (snap scrolling).
-
-        This class is still experimental.
+/**
+ * Scrolls the windows per window (snap scrolling).
+ * This class is still experimental.
+ * @experimental true
+ * @note The `SnapScrollerElement` is also initializable under function `SnapScroller`.
+ * @nav Frontend/Elements
+ * @docs
  */
 let SnapScrollerElement = (() => {
     let _classDecorators = [Elements.create({
@@ -944,7 +938,7 @@ class WindowScrollerElement extends Elements.create({
         this.stretch(true);
         this.position("relative");
         this.overflow("hidden scroll");
-        this.class("hide_scrollbar");
+        this.class("volt_hide_scrollbar");
 
         // The event that will be called when the window scrolls.
         this.on_animation_scroll = () => {};

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

@@ -1,5 +1,9 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
 import { VElementBaseSignature } from "../elements/module.js";
-import { VStackElement } from "./stack";
+import { VStackElement } from "./stack.js";
 export declare namespace SliderElement {
     type OnChangeCallback<This> = (element: This, value: number) => void;
 }

package/frontend/dist/{ui → frontend/src/ui}/slider.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 { VStackElement, VStack } from "./stack";
+import { VStackElement, VStack } from "./stack.js";
 // Slider.
 let SliderElement = (() => {
     let _classDecorators = [Elements.create({

package/frontend/dist/{ui → frontend/src/ui}/spacer.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 SpacerElement extends VElementTagMap.div {
     constructor();

package/frontend/dist/{ui → frontend/src/ui}/spacer.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}/span.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 SpanElement extends VElementTagMap.span {
     constructor(text?: string);

package/frontend/dist/{ui → frontend/src/ui}/span.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}/stack.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 FrameElement extends VElementTagMap.div {
     constructor(...children: AppendType[]);

package/frontend/dist/{ui → frontend/src/ui}/stack.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; }
@@ -55,7 +55,6 @@ let FrameElement = (() => {
                 // "clear": "both",
                 "display": "block",
                 "overflow": "hidden",
-                "width": "100%", // to ensure its passed along all children.
             }
         })];
     let _classDescriptor;
@@ -104,7 +103,6 @@ let VStackElement = (() => {
                 // "text-align": "start",
                 "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
                 "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-                "width": "100%", // to ensure its passed along all children.
             }
         })];
     let _classDescriptor;
@@ -154,7 +152,6 @@ let AnchorVStackElement = (() => {
                 "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
                 "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
                 "text-decoration": "none",
-                "width": "100%", // to ensure its passed along all children.
                 // After extending VStack.
                 "color": "inherit", // inherit colors since <a> does not have that and a <div> does.
             },
@@ -207,7 +204,6 @@ let HStackElement = (() => {
                 "flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
                 "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
                 "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-                "width": "100%", // to ensure its passed along all children.
             },
         })];
     let _classDescriptor;
@@ -259,7 +255,6 @@ let AnchorHStackElement = (() => {
                 "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
                 "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
                 "text-decoration": "none",
-                "width": "100%", // to ensure its passed along all children.
                 // After extending VStack.
                 "color": "inherit", // inherit colors since <a> does not have that and a <div> does.
             },
@@ -304,7 +299,6 @@ let ZStackElement = (() => {
                 // "text-align": "start",
                 "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
                 "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-                "width": "100%", // to ensure its passed along all children.
             },
         })];
     let _classDescriptor;

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

@@ -0,0 +1,131 @@
+/**
+ * @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.js";
+import { DividerElement } from "./divider.js";
+/**
+ * Options for a single step's content in the Steps element.
+ * @property content The step nodes/children.
+ * @property title Optional step title.
+ * @property hstack Use an HStack instead of a VStack as the children container (default: false).
+ * @property side_by_side_width Minimum width (px) of the content container (not the full screen) to show content side by side when `hstack` is enabled.
+ */
+export interface StepContentOptions {
+    content: any[];
+    title?: string;
+    hstack?: boolean;
+    side_by_side_width?: number;
+}
+declare const StepsElement_base: VElementBaseSignature;
+/**
+ * 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
+ */
+export declare class StepsElement extends StepsElement_base {
+    _tint: string;
+    _tint_opac: number;
+    _step_bg: string;
+    _step_border: string;
+    _step_border_radius: string;
+    _step_margin_right: string;
+    _div_bg: string;
+    _step_nr_nodes: (VStackElement & {
+        bg: VStackElement;
+    })[];
+    _step_nodes: HStackElement[];
+    _div_nodes: DividerElement[];
+    _content_nodes: (HStackElement | VStackElement)[];
+    /**
+     * Create a `StepsElement`.
+     * @param content The steps content. Accepts arrays of nodes/VElements or `StepContentOptions`; array items are coerced into steps automatically.
+     */
+    constructor({ content, }: {
+        content: any[] | any[][] | StepContentOptions[];
+    });
+    /**
+     * Set default since it inherits another element.
+     */
+    set_default(): this;
+    /**
+     * Get or set the styling attributes.
+     */
+    styles(): Record<string, string>;
+    styles(style_dict: Record<string, any>): this;
+    /**
+     * Set or get the step number tint color.
+     * @docs
+     */
+    tint(): string;
+    tint(value: string): this;
+    /**
+     * Set or get the step number tint opacity.
+     * @docs
+     */
+    tint_opacity(): number;
+    tint_opacity(value: number): this;
+    /**
+     * Set or get the step's content overflow.
+     * @docs
+     */
+    content_overflow(): string;
+    content_overflow(value: string): this;
+    /**
+     * Set the divider background between the steps.
+     * @docs
+     */
+    divider_background(): string;
+    divider_background(value: string): this;
+    /**
+     * Set or get the step number background.
+     * @docs
+     */
+    step_number_background(): string;
+    step_number_background(value: string): this;
+    /**
+     * Set or get the step number border color.
+     * @docs
+     */
+    step_number_border_color(): string;
+    step_number_border_color(value: string): this;
+    /**
+     * Set or get the step number border radius.
+     * @docs
+     */
+    step_number_border_radius(): string;
+    step_number_border_radius(value: string): this;
+    /**
+     * Set or get the step number border radius.
+     * @docs
+     */
+    step_number_margin_right(): string;
+    step_number_margin_right(value: string): this;
+    /**
+     * Iterate the step number nodes. When the callback returns any non null value the iteration will be stopped.
+     * @docs
+     */
+    iterate_step_numbers(callback: (element: VStackElement) => void): this;
+    /**
+     * Iterate the step nodes. When the callback returns any non null value the iteration will be stopped.
+     * @docs
+     */
+    iterate_steps(callback: (element: HStackElement) => void): this;
+}
+export declare const Steps: <Extensions extends object = {}>(args_0: {
+    content: any[] | any[][] | StepContentOptions[];
+}) => StepsElement & Extensions;
+export declare const NullSteps: <Extensions extends object = {}>() => StepsElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        StepsElement: StepsElement;
+    }
+}
+export {};