@vandenberghinc/volt 1.1.26 → 1.1.28

package/frontend/dist/{ui → frontend/src/ui}/checkbox.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,8 +38,8 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 // Imports.
 import { Elements } from "../elements/module.js";
-import { VStack, VStackElement, HStack } from "./stack";
-import { Text } from "./text";
+import { VStack, VStackElement, HStack } from "./stack.js";
+import { Text } from "./text.js";
 // Extended input.
 let CheckBoxElement = (() => {
     let _classDecorators = [Elements.create({
@@ -51,6 +51,7 @@ let CheckBoxElement = (() => {
                 // Custom.
                 "--circle-border-color": "gray",
                 "--circle-inner-bg": "#FFFFFF",
+                "--circle-inner-bg-focused": "#FFFFFF",
                 "--focus-color": "#8EB8EB",
                 "--missing-color": "#E8454E",
             },
@@ -68,19 +69,20 @@ let CheckBoxElement = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        // Attributes.
+        /** Has error state. */
+        has_error = false;
+        // Internal ttributes.
         _border_color;
         _inner_bg;
+        _inner_bg_focused;
         _focus_color;
-        _missing_color;
-        _missing;
+        _error_color;
         _required;
         _circle;
         // @ts-expect-error
         text;
-        // @ts-expect-error
-        content;
-        error;
+        container;
+        error_text;
         // Constructor.
         constructor(text_or_obj = {
             text: "",
@@ -102,9 +104,9 @@ let CheckBoxElement = (() => {
             // Attributes.
             this._border_color = CheckBoxElement.default_style["--circle-border-color"];
             this._inner_bg = CheckBoxElement.default_style["--circle-inner-bg"];
+            this._inner_bg_focused = CheckBoxElement.default_style["--circle-inner-bg-focused"];
             this._focus_color = CheckBoxElement.default_style["--focus-color"];
-            this._missing_color = CheckBoxElement.default_style["--missing-color"];
-            this._missing = false;
+            this._error_color = CheckBoxElement.default_style["--missing-color"];
             this._required = false;
             // Circle element.
             const _this = this;
@@ -130,23 +132,27 @@ let CheckBoxElement = (() => {
                 .on_mouse_over((e) => e.box_shadow(`0 0 0 2px ${this._focus_color}`))
                 .on_mouse_out((e) => e.box_shadow(`0 0 0 0px transparent`))
                 .on_click((e) => e.toggle())
+                .parent(this)
                 .extend({
                 enabled: false,
                 toggle() {
                     return this.value(!this.enabled);
                 },
-                value(to = null) {
+                value(to = undefined) {
                     if (to == null) {
                         return this.enabled;
                     }
                     else if (to === true) {
                         this.enabled = true;
                         this.background(_this._focus_color);
-                        _this.missing(false);
+                        this.inner.background(_this._inner_bg_focused);
+                        _this.valid();
                     }
                     else {
                         this.enabled = false;
                         this.background("transparent");
+                        this.inner.background(_this._inner_bg);
+                        _this.valid();
                     }
                     return this;
                 },
@@ -156,19 +162,22 @@ let CheckBoxElement = (() => {
                 .font_size("inherit")
                 .color("inherit")
                 .padding(0)
-                .margin(0);
+                .margin(0)
+                .parent(this);
             // The content.
-            this.content = HStack(this._circle, this.text)
-                .width("100%");
+            this.container = HStack(this._circle, this.text)
+                .width("100%")
+                .parent(this);
             // The error message.
-            this.error = Text("Incomplete field")
-                .color(this._missing_color)
+            this.error_text = Text("Incomplete field")
+                .color(this._error_color)
                 .font_size("0.8em")
                 .margin(5, 0, 0, 2.5)
                 .padding(0)
-                .hide();
+                .hide()
+                .parent(this);
             // Append.
-            this.append(this.content, this.error);
+            this.append(this.container, this.error_text);
             // Set id.
             if (id !== undefined) {
                 this.id(id);
@@ -191,16 +200,35 @@ let CheckBoxElement = (() => {
                 return this._inner_bg;
             }
             this._inner_bg = val;
-            this._circle.inner.background(this._inner_bg);
+            if (this._circle.enabled) {
+                this._circle.inner.background(this._inner_bg_focused);
+            }
+            else {
+                this._circle.inner.background(this._inner_bg);
+            }
+            return this;
+        }
+        inner_bg_focused(val) {
+            if (val == null) {
+                return this._inner_bg_focused;
+            }
+            this._inner_bg_focused = val;
+            if (this._circle.enabled) {
+                this._circle.inner.background(this._inner_bg_focused);
+            }
+            else {
+                this._circle.inner.background(this._inner_bg);
+            }
             return this;
         }
         styles(style_dict) {
             if (style_dict == null) {
                 let styles = super.styles();
                 styles["--circle-inner-bg"] = this._inner_bg;
+                styles["--circle-inner-bg-focused"] = this._inner_bg_focused;
                 styles["--circle-border-color"] = this._border_color;
                 styles["--focus-color"] = this._focus_color;
-                styles["--missing-color"] = this._missing_color;
+                styles["--missing-color"] = this._error_color;
                 return styles;
             }
             else {
@@ -216,7 +244,7 @@ let CheckBoxElement = (() => {
             this._circle.toggle();
             return this;
         }
-        // @ts-expect-error
+        // @ts-ignore
         value(to) {
             if (to == null) {
                 return this._circle.enabled;
@@ -238,40 +266,51 @@ let CheckBoxElement = (() => {
             this._focus_color = val;
             return this;
         }
-        missing_color(val) {
+        error_color(val) {
             if (val == null) {
-                return this._missing_color;
+                return this._error_color;
             }
-            this._missing_color = val;
+            this._error_color = val;
             return this;
         }
-        missing(to = true) {
-            if (to == null) {
-                return this._missing;
+        /**
+         * Set the error state and message.
+         * Providing a truthy value will enable the error state and return the current instance for chaining.
+         * Providing a falsy value will disable the error state and return the current instance for chaining.
+         * Providing no value will return the current error message or `undefined` when no error is set.
+         */
+        error(err) {
+            if (err == null) {
+                return (this.has_error ? this.error_text.text() : undefined);
             }
-            else if (to === true) {
-                this._missing = true;
-                this._circle.outline(`1px solid ${this._missing_color}`);
-                this._circle.box_shadow(`0 0 0 3px ${this._missing_color}80`);
-                this.error.color(this._missing_color);
-                this.error.show();
+            else if (err) {
+                this.has_error = true;
+                this._circle.outline(`1px solid ${this._error_color}`);
+                this._circle.box_shadow(`0 0 0 3px ${this._error_color}80`);
+                this.error_text.color(this._error_color);
+                this.error_text.text(err);
+                this.error_text.show();
             }
             else {
-                this._missing = false;
+                this.has_error = false;
                 this._circle.outline("0px solid transparent");
                 this._circle.box_shadow(`0 0 0 0px transparent`);
-                this.error.hide();
+                this.error_text.hide();
             }
             return this;
         }
+        /** Remove the error state and mark as valid. */
+        valid() {
+            return this.error(false);
+        }
         // Submit the item, throws an error when the item is not enabled.
         submit() {
             const value = this.value();
             if (value !== true) {
-                this.missing(true);
+                this.error("Incomplete field");
                 throw Error("Fill in all the required fields.");
             }
-            this.missing(false);
+            this.valid();
             return value;
         }
     };

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

@@ -1,7 +1,11 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
 import { VElementBaseSignature, VElementTagMap, VDivElement } from "../elements/module.js";
-import { VStackElement, HStackElement } from "./stack";
-import { ImageMaskElement } from "./image";
-import { DividerElement } from "./divider";
+import { VStackElement, HStackElement } from "./stack.js";
+import { ImageMaskElement } from "./image.js";
+import { DividerElement } from "./divider.js";
 export declare class CodeBlockElement extends VElementTagMap.code {
     language?: string;
     line_numbers?: boolean;
@@ -26,9 +30,29 @@ export declare class CodeBlockElement extends VElementTagMap.code {
         already_highlighted?: boolean;
         opts?: Record<string, any>;
     });
+    /**
+     * Hide the content scrollbars.
+     */
     hide_scrollbar(): this;
+    /**
+     * Show the content scrollbars.
+     */
     show_scrollbar(): this;
+    /**
+     * Make the element visible by setting `display: flex`.
+     */
     show(): this;
+    /**
+     * Highlight the code content and optionally animate writing, show line numbers, and set a divider.
+     * @param code The code to highlight; when omitted the constructor value is used.
+     * @param language The language used for tokenization.
+     * @param line_numbers Show line numbers in a left column.
+     * @param line_divider Show a divider between line numbers and code.
+     * @param animate Animate the writing of highlighted code.
+     * @param delay Delay in milliseconds between characters when animating.
+     * @param duration Total animation duration in milliseconds; overrides delay if provided.
+     * @param opts Extra tokenizer options.
+     */
     highlight({ code, // only required if the code was not provided by the constructor.
     language, // code language, precedes element attribute "language".
     line_numbers, // show line numbers.
@@ -78,6 +102,9 @@ export declare class CodePreElement extends VElementTagMap.pre {
         delay?: number;
         duration?: number;
     }): Promise<void>;
+    /**
+     * Cancel any ongoing typing animation and wait for it to finish.
+     */
     cancel_animation(): Promise<void>;
     /** @warning This function may cause security issues if the code is unsafe provided by the user, since this assigns to innerHTML in order to perform animations. */
     highlight({ code, // only required if the code was not provided by the constructor.
@@ -103,9 +130,19 @@ declare module './any_element.d.ts' {
         CodePreElement: CodePreElement;
     }
 }
+/**
+ * Create an inline code line element.
+ * @nav Frontend/Elements
+ * @param text The code line content.
+ * @docs
+ */
 export declare class CodeLineElement extends VElementTagMap.span {
     constructor(text?: string);
     /** @warning This function may cause security issues if the input is unsafe provided by the user, since this assigns to innerHTML. */
+    /**
+     * Fill a string with markdown style codeline elements.
+     * @docs
+     */
     static fill(text: any, codeline_callback?: () => CodeLineElement): string;
 }
 export declare const CodeLine: <Extensions extends object = {}>(text?: string | undefined) => CodeLineElement & Extensions;
@@ -115,19 +152,30 @@ declare module './any_element.d.ts' {
         CodeLineElement: CodeLineElement;
     }
 }
+/**
+ * Content object used by multi-language code blocks.
+ */
 interface MLContentObject {
     language: string;
     title?: string;
     data: string;
 }
+/**
+ * Header state and helpers for the multi-language code block.
+ */
 interface HeaderExtension {
-    selected: none | number;
-    selected_lang: none | string;
-    selected_code_pre: none | CodePreElement;
+    selected: null | undefined | number;
+    selected_lang: null | undefined | string;
+    selected_code_pre: null | undefined | CodePreElement;
     set_selected(index: number): this;
     select(lang_or_index: number | string, recursive?: boolean): this;
 }
 declare const MultiLanguageCodeBlockElement_base: VElementBaseSignature;
+/**
+ * Build a code pre that optionally has different code per navigation.
+ * @nav Frontend/Elements
+ * @docs
+ */
 export declare class MultiLanguageCodeBlockElement extends MultiLanguageCodeBlockElement_base {
     _fg: string;
     _tint: string;
@@ -145,13 +193,32 @@ export declare class MultiLanguageCodeBlockElement extends MultiLanguageCodeBloc
         content: string | MLContentObject | MLContentObject[];
         highlight?: boolean;
     });
+    /**
+     * Apply the default style for this derived element and return `this`.
+     */
     set_default(): this;
+    /**
+     * Get or set style properties.
+     * @param style_dict A style object to set; when omitted, returns the current styles.
+     */
     styles(): Record<string, string>;
     styles(style_dict: Record<string, any>): this;
+    /**
+     * Set or get foreground tint color.
+     * @docs
+     */
     color(): string;
     color(value: string): this;
+    /**
+     * Set or get the tint color, mainly used for the divider below the active tab.
+     * @docs
+     */
     tint(): string;
     tint(value: string): this;
+    /**
+     * Set the background of the divider.
+     * @docs
+     */
     divider_background(): string;
     divider_background(value: string): this;
 }

package/frontend/dist/{ui → frontend/src/ui}/code.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; }
@@ -40,13 +40,13 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 // Imports.
 import { Utils } from "../modules/utils.js";
 import { Elements, VElementTagMap, VDiv } from "../elements/module.js";
-import { Span } from "./span";
-import { VStack, VStackElement, HStack } from "./stack";
-import { ImageMask } from "./image";
-import { ForEach } from "./for_each";
-import { Spacer } from "./spacer";
-import { Divider } from "./divider";
-// import * as vhighlight from "/Users/administrator/persistance/private/dev/vinc/vhighlight"
+import { Span } from "./span.js";
+import { VStack, VStackElement, HStack } from "./stack.js";
+import { ImageMask } from "./image.js";
+import { ForEach } from "./for_each.js";
+import { Spacer } from "./spacer.js";
+import { Divider } from "./divider.js";
+// import * as vhighlight from "/Users/administrator/persistance/private/dev/vinc/vhighlight.js"
 import * as vhighlight from "@vandenberghinc/vhighlight";
 // All codeblocks using languages.
 const language_codeblocks = [];
@@ -213,20 +213,40 @@ let CodeBlockElement = (() => {
             this.padding(CodeBlockElement.default_style.padding);
         }
         // Hide/show the scrollbar.
+        /**
+         * Hide the content scrollbars.
+         */
         hide_scrollbar() {
-            this.content.classList.add("hide_scrollbar");
+            this.content.classList.add("volt_hide_scrollbar");
             return this;
         }
+        /**
+         * Show the content scrollbars.
+         */
         show_scrollbar() {
-            this.content.classList.remove("hide_scrollbar");
+            this.content.classList.remove("volt_hide_scrollbar");
             return this;
         }
         // Show.
+        /**
+         * Make the element visible by setting `display: flex`.
+         */
         show() {
             this.style.display = "flex";
             return this;
         }
         // Highlight code.
+        /**
+         * Highlight the code content and optionally animate writing, show line numbers, and set a divider.
+         * @param code The code to highlight; when omitted the constructor value is used.
+         * @param language The language used for tokenization.
+         * @param line_numbers Show line numbers in a left column.
+         * @param line_divider Show a divider between line numbers and code.
+         * @param animate Animate the writing of highlighted code.
+         * @param delay Delay in milliseconds between characters when animating.
+         * @param duration Total animation duration in milliseconds; overrides delay if provided.
+         * @param opts Extra tokenizer options.
+         */
         highlight({ code, // only required if the code was not provided by the constructor.
         language, // code language, precedes element attribute "language".
         line_numbers, // show line numbers.
@@ -495,6 +515,9 @@ let CodePreElement = (() => {
             return this.animate_promise;
         }
         // Cancel animation.
+        /**
+         * Cancel any ongoing typing animation and wait for it to finish.
+         */
         async cancel_animation() {
             if (this.animate_promise != null) {
                 this.allow_animation = false;
@@ -565,15 +588,11 @@ export { CodePreElement };
 export const CodePre = Elements.wrapper(CodePreElement);
 export const NullCodePre = Elements.create_null(CodePreElement);
 // CodeLine.
-/*	@docs:
-    @nav: Frontend
-    @chapter: Elements
-    @title: Code Line
-    @description: Create an inline code line element.
-    @param:
-        @name: text
-        @type: string
-        @descr: The code line content.
+/**
+ * Create an inline code line element.
+ * @nav Frontend/Elements
+ * @param text The code line content.
+ * @docs
  */
 let CodeLineElement = (() => {
     let _classDecorators = [Elements.create({
@@ -614,9 +633,9 @@ let CodeLineElement = (() => {
             } // never use inner html also because the text may content html entities.
         }
         /** @warning This function may cause security issues if the input is unsafe provided by the user, since this assigns to innerHTML. */
-        /*	@docs:
-            @title: Fill
-            @descr: Fill a string with markdown style codeline elements.
+        /**
+         * Fill a string with markdown style codeline elements.
+         * @docs
          */
         static fill(text, codeline_callback = () => CodeLine()) {
             // Fill code line's.
@@ -644,29 +663,10 @@ export { CodeLineElement };
 export const CodeLine = Elements.wrapper(CodeLineElement);
 export const NullCodeLine = Elements.create_null(CodeLineElement);
 // Build a code pre that optionally has different code per navigation.
-/*	@docs:
-    @nav: Frontend
-    @chapter: Elements
-    @title: Multi Language Code Block
-    @description: Build a code pre that optionally has different code per navigation.
-    @param:
-        @name: code
-        @type: CodeObject
-        @descr: The array of code objects.
-        @attr:
-            @name: language
-            @descr: The language name.
-        @attr:
-            @name: title
-            @descr: The code title, when left undefined the language name will be used as title.
-        @attr:
-            @name: data
-            @descr: The code data.
-            @required: true
-    @param:
-        @name: highlight
-        @type: boolean
-        @descr: Highlight the code content.
+/**
+ * Build a code pre that optionally has different code per navigation.
+ * @nav Frontend/Elements
+ * @docs
  */
 let MultiLanguageCodeBlockElement = (() => {
     let _classDecorators = [Elements.create({
@@ -792,7 +792,7 @@ let MultiLanguageCodeBlockElement = (() => {
             }))
                 .parent(this)
                 .height("100%")
-                .class("hide_scrollbar")
+                .class("volt_hide_scrollbar")
                 .wrap(false)
                 .overflow("visible")
                 // .flex("1 1 0"),
@@ -891,9 +891,9 @@ let MultiLanguageCodeBlockElement = (() => {
                         // localStorage.setItem("__ldoc_code_lang", lang);
                         this.select(index, false);
                         // LibrisUI.codeblock_lang_headers.iterate((h) => {
-                        // 	if (h !== header) {
-                        // 		h.select(lang, false)
-                        // 	}
+                        //  if (h !== header) {
+                        //    h.select(lang, false)
+                        //  }
                         // })
                     }
                     else {
@@ -944,7 +944,7 @@ let MultiLanguageCodeBlockElement = (() => {
             this
                 .display("block")
                 .white_space("pre")
-                .class("hide_scrollbar")
+                .class("volt_hide_scrollbar")
                 .max_width("100%")
                 .border(1, this._div_bg)
                 .position("relative")
@@ -957,6 +957,9 @@ let MultiLanguageCodeBlockElement = (() => {
             this.header.select(0, false);
         }
         // Set default since it inherits another element.
+        /**
+         * Apply the default style for this derived element and return `this`.
+         */
         set_default() {
             return super.set_default(MultiLanguageCodeBlockElement);
         }

package/frontend/dist/{ui → frontend/src/ui}/context_menu.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 ContextMenuElement_base: VElementBaseSignature;
 export declare class ContextMenuElement extends ContextMenuElement_base {

package/frontend/dist/{ui → frontend/src/ui}/context_menu.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,8 +38,8 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 // Imports.
 import { Elements } from "../elements/module.js";
-import { Button } from "./button";
-import { VStackElement } from "./stack";
+import { Button } from "./button.js";
+import { VStackElement } from "./stack.js";
 // Context Menu.
 let ContextMenuElement = (() => {
     let _classDecorators = [Elements.create({
@@ -157,18 +157,13 @@ export const NullContextMenu = Elements.create_null(ContextMenuElement);
 Elements.extend({
     _context_menu: undefined,
     /**
-     * @docs:
-     * @parent: VElement
-     * @title: On Context Menu
-     * @desc:
-     *     Script to be run when a context menu is triggered. This function can set or get the context menu callback.
-     * @param:
-     *     @name: callback
-     *     @descr:
-     *         The parameter may either be a callback function, a ContextMenu object, or an Array as the ContextMenu parameter.
-     * @return:
-     *     @description Returns the `VElement` object. If `callback` is `null`, then the attribute's value is returned.
-     * @funcs: 2
+     * Script to be run when a context menu is triggered. This function can set or get the context menu callback.
+     *
+     * @param callback The parameter may either be a callback function, a ContextMenu object, or an Array as the ContextMenu parameter.
+     * @parent VElement
+     * @funcs 2
+     * @docs
+     * @returns Returns the `VElement` object. If `callback` is `null`, then the attribute's value is returned.
      */
     on_context_menu(callback) {
         if (callback == null) {

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

@@ -1,3 +1,7 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
 export declare class Stylesheet {
     _element: HTMLStyleElement;
     /** @warning This function may cause security issues if the data is unsafe provided by the user, since this assigns to innerHTML. */

package/frontend/dist/{ui → frontend/src/ui}/css.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
  */
 // Button.
 export class Stylesheet {

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

package/frontend/dist/{ui → frontend/src/ui}/divider.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; }