@vandenberghinc/volt 1.1.26 → 1.1.28

package/frontend/dist/{ui → frontend/src/ui}/link.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 AnchorElement extends VElementTagMap.a {
     constructor(text?: string, href?: string, alt?: string);

package/frontend/dist/{ui → frontend/src/ui}/link.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}/list.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 ListItemElement extends VElementTagMap.li {
     constructor(...content: any[]);

package/frontend/dist/{ui → frontend/src/ui}/list.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";
 // List item.
 let ListItemElement = (() => {
     let _classDecorators = [Elements.create({
@@ -74,6 +74,9 @@ export const NullListItem = Elements.create_null(ListItemElement);
 let UnorderedListElement = (() => {
     let _classDecorators = [Elements.create({
             name: "UnorderedListElement",
+            default_style: {
+                "padding-left": "1.5em", // add some left padding to ensure the ::marker is visible.
+            }
         })];
     let _classDescriptor;
     let _classExtraInitializers = [];
@@ -97,7 +100,7 @@ let UnorderedListElement = (() => {
                 items.iterate(node => { this.append_item(node); });
             }
             else {
-                console.error(`Invalid type "${Scheme.value_type(items)}" for parameter "items" the valid type is "array".`);
+                console.error(`Invalid type "${Schema.value_type(items)}" for parameter "items" the valid type is "array".`);
             }
         }
         // Append item.
@@ -118,6 +121,9 @@ export const NullUnorderedList = Elements.create_null(UnorderedListElement);
 let OrderedListElement = (() => {
     let _classDecorators = [Elements.create({
             name: "OrderedListElement",
+            default_style: {
+                "padding-left": "1.5em", // add some left padding to ensure the ::marker is visible.
+            }
         })];
     let _classDescriptor;
     let _classExtraInitializers = [];
@@ -141,7 +147,7 @@ let OrderedListElement = (() => {
                 items.iterate(node => { this.append_item(node); });
             }
             else {
-                console.error(`Invalid type "${Scheme.value_type(items)}" for parameter "items" the valid type is "array".`);
+                console.error(`Invalid type "${Schema.value_type(items)}" for parameter "items" the valid type is "array".`);
             }
         }
         // Append item.

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

@@ -0,0 +1,80 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { VElementBaseSignature, VDivElement } from "../elements/module.js";
+import { RingLoaderElement } from "./loaders.js";
+/**
+ * Is any loader button,
+ * excluding non loader buttons,
+ * use {@link IsButtonLike} for that.
+ */
+export declare function isLoaderButtonLike(element: any): element is LoaderButtonElement;
+declare const LoaderButtonElement_base: VElementBaseSignature;
+/**
+ * @warning: you should not use function "LoaderButton.loader.hide() / LoaderButton.loader.show()" use "LoaderButton.hide_loader() / LoaderButton.show_loader()" instead.
+ * @warning: This class is still experimental and may be subject to future change.
+ */
+export declare class LoaderButtonElement extends LoaderButtonElement_base {
+    nodes: {
+        text: VDivElement;
+        loader: RingLoaderElement;
+        [key: string]: any;
+    };
+    text: VDivElement;
+    loader: RingLoaderElement;
+    /**
+     * Initializes the LoaderButton element with the provided text and loader.
+     * @param text The text to display on the loader button.
+     * @param loader The loader factory function to create the loading animation.
+     * @returns This constructor does not return a value.
+     * @docs
+     */
+    constructor(text?: string, loader?: () => any);
+    /**
+     * Retrieves or sets the styling attributes for the loader element. If no argument is provided, it returns the current styles including default loader dimensions.
+     * @param style_dict An optional dictionary of styles to set.
+     * @returns When no argument is passed, returns the current styles including loader dimensions.
+     * @returns When an argument is provided, returns the instance of the element for chaining.
+     * @docs
+     */
+    styles(): Record<string, string>;
+    styles(style_dict: Record<string, any>): this;
+    /**
+     * Sets the default configuration for the LoaderButtonElement by calling the parent method.
+     * @returns Returns the instance of the element for chaining.
+     * @docs
+     */
+    set_default(): this;
+    /**
+     * Displays the loader and disables the button when clicked.
+     * @returns Returns the instance of the element for chaining.
+     * @docs
+     */
+    show_loader(): this;
+    /**
+     * Initiates the loading process by showing the loader.
+     * @returns Returns the instance of the element for chaining.
+     * @docs
+     */
+    start(): this;
+    /**
+     * Hides the loader, enables the button, and shows the text on click event.
+     * @returns Returns the instance of the element for chaining.
+     * @docs
+     */
+    hide_loader(): this;
+    /**
+     * Stops the loading process by hiding the loader (alias of `hide_loader`).
+     * @returns Returns the instance of the element for chaining.
+     */
+    stop(): this;
+}
+export declare const LoaderButton: <Extensions extends object = {}>(text?: string | undefined, loader?: (() => any) | undefined) => LoaderButtonElement & Extensions;
+export declare const NullLoaderButton: <Extensions extends object = {}>() => LoaderButtonElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        LoaderButtonElement: LoaderButtonElement;
+    }
+}
+export {};

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

@@ -1,6 +1,6 @@
-/*
- * Author: Daan van den Bergh
- * Copyright: © 2022 - 2023 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; }
@@ -37,12 +37,17 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 // Imports.
-import { Elements, VDiv } from "../elements/module.js";
-import { AnchorHStackElement } from "./stack";
-import { RingLoader } from "./loaders";
-// export class myClass extends AnchorHStackElement {
-//     constructor() { super(); }
-// }
+import { Elements, VDiv, isVElement } from "../elements/module.js";
+import { AnchorHStackElement } from "./stack.js";
+import { RingLoader } from "./loaders.js";
+/**
+ * Is any loader button,
+ * excluding non loader buttons,
+ * use {@link IsButtonLike} for that.
+ */
+export function isLoaderButtonLike(element) {
+    return (element instanceof LoaderButtonElement) || (isVElement(element) && (element.element_name === "LoaderButtonElement"));
+}
 // Loader button.
 /**
  * @warning: you should not use function "LoaderButton.loader.hide() / LoaderButton.loader.show()" use "LoaderButton.hide_loader() / LoaderButton.show_loader()" instead.
@@ -85,20 +90,11 @@ let LoaderButtonElement = (() => {
         text;
         loader;
         /**
-         * @docs:
-         * @title: Loader Button Constructor
-         * @desc: Initializes the LoaderButton element with the provided text and loader.
-         * @param:
-         *     @name: text
-         *     @descr: The text to display on the loader button.
-         *     @type: string
-         * @param:
-         *     @name: loader
-         *     @descr: The loader function to create the loading animation.
-         *     @type: Function
-         * @return:
-         *     @type: void
-         *     @description This constructor does not return a value.
+         * Initializes the LoaderButton element with the provided text and loader.
+         * @param text The text to display on the loader button.
+         * @param loader The loader factory function to create the loading animation.
+         * @returns This constructor does not return a value.
+         * @docs
          */
         constructor(text = "", loader = RingLoader) {
             // Initialize base classes.
@@ -145,23 +141,17 @@ let LoaderButtonElement = (() => {
             }
         }
         /**
-         * @docs:
-         * @title: Set Default
-         * @desc: Sets the default configuration for the LoaderButtonElement by calling the parent method.
-         * @return:
-         *     @type: this
-         *     @description Returns the instance of the element for chaining.
+         * Sets the default configuration for the LoaderButtonElement by calling the parent method.
+         * @returns Returns the instance of the element for chaining.
+         * @docs
          */
         set_default() {
             return super.set_default(LoaderButtonElement);
         }
         /**
-         * @docs:
-         * @title: Show Loader
-         * @desc: Displays the loader and disables the button when clicked.
-         * @return:
-         *     @type: this
-         *     @description Returns the instance of the element for chaining.
+         * Displays the loader and disables the button when clicked.
+         * @returns Returns the instance of the element for chaining.
+         * @docs
          */
         show_loader() {
             this.disable();
@@ -171,24 +161,18 @@ let LoaderButtonElement = (() => {
             return this;
         }
         /**
-         * @docs:
-         * @title: Start
-         * @desc: Initiates the loading process by showing the loader.
-         * @return:
-         *     @type: this
-         *     @description Returns the instance of the element for chaining.
+         * Initiates the loading process by showing the loader.
+         * @returns Returns the instance of the element for chaining.
+         * @docs
          */
         // @ts-ignore
         start() {
             return this.show_loader();
         }
         /**
-         * @docs:
-         * @title: Hide Loader
-         * @desc: Hides the loader, enables the button, and shows the text on click event.
-         * @return:
-         *     @type: this
-         *     @description Returns the instance of the element for chaining.
+         * Hides the loader, enables the button, and shows the text on click event.
+         * @returns Returns the instance of the element for chaining.
+         * @docs
          */
         hide_loader() {
             this.enable();
@@ -196,6 +180,10 @@ let LoaderButtonElement = (() => {
             this.nodes.text.show();
             return this;
         }
+        /**
+         * Stops the loading process by hiding the loader (alias of `hide_loader`).
+         * @returns Returns the instance of the element for chaining.
+         */
         stop() { return this.hide_loader(); }
     };
     return LoaderButtonElement = _classThis;

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

@@ -0,0 +1,57 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { VElementTagMap } from "../elements/module.js";
+/**
+ * The ring loader element.
+ * @chapter Frontend
+ * @docs
+ */
+export declare class RingLoaderElement extends VElementTagMap.div {
+    /**
+     * Create a new ring loader element and initialize it with default styles, then call `update()` to render.
+     */
+    constructor();
+    /**
+     * Background.
+     *
+     * Set the background value. Returns the attribute value when parameter `value` is `null`.
+     * @note Dont forget to update the loader through `update()` after calling this function.
+     * @param value The value to assign. Leave `null` to retrieve the attribute's value.
+     * @returns Returns the `RingLoaderElement` object for chaining unless parameter `value` is `null`, then the attribute's value is returned.
+     * @docs
+     */
+    background(): string;
+    background(value: string): this;
+    /**
+     * Get or set the color, which maps to the internal `--child-background` style variable.
+     * @param value The color to assign. Leave `null`/`undefined` to retrieve the current value.
+     * @returns Returns the `RingLoaderElement` object for chaining unless parameter `value` is `null`/`undefined`, then the current value is returned.
+     */
+    color(): string;
+    color(value: string): this;
+    /**
+     * Set the border width by factor.
+     * @note Dont forget to update the loader through `update()` after calling this function.
+     * @param value The float border width factor.
+     * @docs
+     */
+    border_width_factor(): number;
+    border_width_factor(value: number): this;
+    /**
+     * Update the loader, this function needs to be called after initialization or after changing the frame, background or border.
+     * @docs
+     */
+    update(): this;
+}
+export declare const RingLoader: <Extensions extends object = {}>() => RingLoaderElement & Extensions;
+export declare const NullRingLoader: <Extensions extends object = {}>() => RingLoaderElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        RingLoaderElement: RingLoaderElement;
+    }
+}
+export declare const SpinnerElement: typeof RingLoaderElement;
+export declare const SpinnerLoader: <Extensions extends object = {}>() => RingLoaderElement & Extensions;
+export declare const NullSpinnerLoader: <Extensions extends object = {}>() => RingLoaderElement & Extensions;

package/frontend/dist/{ui → frontend/src/ui}/loaders.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; }
@@ -41,11 +41,9 @@ import { Elements, VElementTagMap } from "../elements/module.js";
 // RingLoader.
 // - The width and height must be in pixels.
 /**
- * @docs:
- * @chapter: Frontend
- * @title: Ring Loader
- * @desc:
- * 		The ring loader element.
+ * The ring loader element.
+ * @chapter Frontend
+ * @docs
  */
 let RingLoaderElement = (() => {
     let _classDecorators = [Elements.create({
@@ -73,6 +71,9 @@ let RingLoaderElement = (() => {
             __runInitializers(_classThis, _classExtraInitializers);
         }
         // Constructor.
+        /**
+         * Create a new ring loader element and initialize it with default styles, then call `update()` to render.
+         */
         constructor() {
             // Initialize base class.
             super({
@@ -103,9 +104,8 @@ let RingLoaderElement = (() => {
             return this;
         }
         /**
-         * @docs:
-         * @title: Update
-         * @desc: Update the loader, this function needs to be called after initialization or after changing the frame, background or border.
+         * Update the loader, this function needs to be called after initialization or after changing the frame, background or border.
+         * @docs
          */
         update() {
             this.remove_children();

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

@@ -1,10 +1,14 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { Mutex } from "@vandenberghinc/vlib/frontend";
 import { VElementBaseSignature } from "../elements/module.js";
-import { Mutex } from "../modules/mutex";
-import { HStackElement, VStackElement } from "./stack";
-import { TextElement } from "./text";
-import { TitleElement } from "./title";
-import { LoaderButtonElement } from "./loader_button";
-import { ImageMaskElement } from "./image";
+import { HStackElement, VStackElement } from "./stack.js";
+import { TextElement } from "./text.js";
+import { TitleElement } from "./title.js";
+import { LoaderButtonElement } from "./loader_button.js";
+import { ImageMaskElement } from "./image.js";
 export type OnYesNoPopup = ((element: YesNoPopupElement) => Promise<any> | void);
 declare const YesNoPopupElement_base: VElementBaseSignature;
 export declare class YesNoPopupElement extends YesNoPopupElement_base {
@@ -23,6 +27,7 @@ export declare class YesNoPopupElement extends YesNoPopupElement_base {
     no_button: LoaderButtonElement;
     yes_button: LoaderButtonElement;
     buttons: HStackElement;
+    header: VStackElement;
     content: VStackElement;
     widget: VStackElement;
     _on_no_called: boolean;

package/frontend/dist/{ui → frontend/src/ui}/popup.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; }
@@ -37,13 +37,13 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 // Imports.
+import { Mutex } from "@vandenberghinc/vlib/frontend";
 import { Elements } from "../elements/module.js";
-import { Mutex } from "../modules/mutex";
-import { HStack, VStack, VStackElement } from "./stack";
-import { Text } from "./text";
-import { Title } from "./title";
-import { LoaderButton } from "./loader_button";
-import { ImageMask } from "./image";
+import { HStack, VStack, VStackElement } from "./stack.js";
+import { Text } from "./text.js";
+import { Title } from "./title.js";
+import { LoaderButton } from "./loader_button.js";
+import { ImageMask } from "./image.js";
 // RingLoader.
 // - The width and height must be in pixels.
 let YesNoPopupElement = (() => {
@@ -81,6 +81,7 @@ let YesNoPopupElement = (() => {
         no_button;
         yes_button;
         buttons;
+        header;
         // @ts-ignore
         content;
         widget;
@@ -110,20 +111,26 @@ let YesNoPopupElement = (() => {
             // Image.
             this.image = ImageMask(typeof image === "boolean" ? undefined : image)
                 .mask_color(image_color)
-                .frame(35, 35)
-                .position(-17.5, "calc(50% - 17.5px)", null, null)
+                .square(25)
+                // .position(-17.5, "calc(50% - 17.5px)", null, null)
+                .margin_left(10)
                 .parent(this)
                 .abs_parent(this);
-            if (image === false) {
+            if (!image) {
                 this.image.hide();
             }
+            else {
+                this.image.show();
+            }
             // Title.
-            this.title = Title(text) // never user inner html instead use append incase of links or code lines.
+            this.title = Title(title) // never user inner html instead use append incase of links or code lines.
+                .abs_parent(this)
+                .parent(this)
                 .font_family("inherit")
                 .font_weight(500)
                 .font_size(34)
-                .abs_parent(this)
-                .parent(this);
+                .stretch(true)
+                .wrap(true);
             // Text.
             this.text = Text(text) // never user inner html instead use append incase of links or code lines.
                 .font_family("inherit")
@@ -193,10 +200,17 @@ let YesNoPopupElement = (() => {
                 .parent(this);
             // The custom content.
             this.content = VStack(...content)
-                .abs_parent(this)
-                .parent(this);
+                .width("100%")
+                .abs_parent(this).parent(this);
+            // use a header so the user can optionally add padding to only the header.
+            // and use no padding on the buttons or content, so a background can be put
+            // on the buttons etc.
+            this.header = VStack(HStack(this.title, this.image)
+                .width("100%"), this.text)
+                .width("100%")
+                .parent(this).abs_parent(this);
             // The content.
-            this.widget = VStack(this.image, this.title, this.text, this.content, this.buttons)
+            this.widget = VStack(this.header, this.content, this.buttons)
                 .position("relative")
                 .text_center()
                 .padding(40, 20, 20, 20)

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

@@ -0,0 +1,44 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import { VElementTagMap, AppendType } from "../elements/module.js";
+import { AnyElement } from "./any_element.js";
+export declare class PseudoElement extends VElementTagMap.div {
+    /**
+     * 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: string;
+    /** The stylesheet per `before` `after` etc. */
+    pseudo_classes: Record<string, HTMLStyleElement>;
+    /** A list of elements this pseudo element is applied to */
+    added_to_elements: {
+        node: AnyElement;
+        type: string;
+    }[];
+    constructor(...children: AppendType[]);
+    /** Retrieve a pseudo id suffixed with a specific type. */
+    pseudo_id(type: string): string;
+    /** Apply the pseudo to a node for a specific psuedo class. */
+    apply(node: AnyElement, type: string): this;
+    /** Alias method for {@link apply}. */
+    add(node: AnyElement, type: string): this;
+    /** Remove the pseudo effect from a node if applied. */
+    remove_from(node: AnyElement, type: string): this;
+    /** Remove all pseudo effects from a given node. */
+    remove_all(node: AnyElement): this;
+    /** Is added to. */
+    is_applied_to(node: AnyElement, type: string): boolean;
+    /** Alias method for {@link is_applied_to}. */
+    is_added_to(node: AnyElement, type: string): boolean;
+    /** Update the pseudo on all applied elements. */
+    update(): this;
+}
+export declare const Pseudo: <Extensions extends object = {}>(...args: AppendType[]) => PseudoElement & Extensions;
+export declare const NullPseudo: <Extensions extends object = {}>() => PseudoElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        PseudoElement: PseudoElement;
+    }
+}