@vandenberghinc/volt 1.2.6 → 1.2.8

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

@@ -0,0 +1,308 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+// Imports.
+import { Elements, isVElement } from "../elements/module.js";
+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({
+            name: "StepsElement",
+            default_style: {
+                ...VStackElement.default_style,
+                "--steps-tint": "gray",
+                "--steps-tint-opac": 1,
+                "--steps-step-bg": "gray",
+                "--steps-step-border": "gray",
+                "--steps-step-border-radius": "50%",
+                "--steps-div-bg": "gray",
+            },
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VStackElement;
+    var StepsElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            StepsElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        _tint;
+        _tint_opac;
+        _step_bg;
+        _step_border;
+        _step_border_radius;
+        _step_margin_right = "1em";
+        _div_bg;
+        _step_nr_nodes = [];
+        _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.
+            super();
+            this._init({
+                derived: StepsElement,
+            });
+            // Assign single array argument to content.
+            if (Array.isArray(arguments[0])) {
+                content = arguments[0];
+            }
+            for (let i = 0; i < content.length; i++) {
+                if (Array.isArray(content[i]) || isVElement(content[i])) {
+                    content[i] = {
+                        content: content[i],
+                    };
+                }
+            }
+            // Attributes.
+            this._tint = StepsElement.default_style["--steps-tint"];
+            this._tint_opac = parseFloat(StepsElement.default_style["--steps-tint-opac"]);
+            this._step_bg = StepsElement.default_style["--steps-step-bg"];
+            this._step_border = StepsElement.default_style["--steps-step-border"];
+            this._step_border_radius = StepsElement.default_style["--steps-step-border-radius"];
+            this._div_bg = StepsElement.default_style["--steps-div-bg"];
+            // Build.
+            const spacing = "1.25em";
+            this.append(ForEach(content, (item, index, is_last) => {
+                // Build divider.
+                const divider = is_last ? null : Divider()
+                    .margin(0)
+                    .font_size("0.7em") // for relative distances.
+                    .position("2em", null, 0, "0.875em")
+                    .frame(1.5, `calc(100% + ${spacing} - 0.6em)`)
+                    .background(this._div_bg)
+                    .z_index(0)
+                    .exec(e => this._div_nodes.append(e));
+                // Build content.
+                const content = (item.hstack ? HStack() : VStack())
+                    .z_index(1)
+                    // .width("100%")
+                    .stretch(true)
+                    .overflow("hidden"); // required otherwise when inside Tabs will mess up.
+                if (typeof item.title === "string") {
+                    content.append(Span(item.title)
+                        .color("inherit")
+                        .display("block") // line wrap after.
+                        .margin_bottom("0.5em")
+                        .font_weight(500)
+                        .line_height("1.6em"));
+                }
+                if (item.content) {
+                    content.append(item.content);
+                }
+                else if (item.children) {
+                    content.append(item.children);
+                }
+                if (typeof item.side_by_side_width == "number") {
+                    content.on_resize_rule(() => content.clientWidth >= item.side_by_side_width, () => content.flex_direction("row"), () => content.flex_direction("column"));
+                }
+                this._content_nodes.append(content);
+                // Append.
+                let step_nr;
+                const element = HStack(step_nr = VStack(VStack() // to support opacity on background only.
+                    .assign_to_parent_as("bg")
+                    .background(this._step_bg)
+                    .transition("background 300ms ease-in-out")
+                    .position(0, 0, 0, 0)
+                    .z_index(0), Span((index + 1).toString())
+                    .z_index(1))
+                    .position("relative")
+                    .overflow("hidden")
+                    .font_size("0.7em")
+                    .flex_shrink(0)
+                    .frame("1.8em", "1.8em")
+                    .margin("0.2em", this._step_margin_right, null, null)
+                    // .border_radius(this._step_border_radius)
+                    .border_radius(5)
+                    .border(1, this._step_border)
+                    .center()
+                    .center_vertical()
+                    .z_index(1)
+                    .exec(e => this._step_nr_nodes.append(e)), divider, content)
+                    .fixed_width("100%")
+                    .margin_top(index > 0 ? spacing : 0)
+                    .position("relative")
+                    .exec(e => this._step_nodes.append(e))
+                    .on_mouse_over(() => step_nr.bg.opacity(this._tint_opac).background(this._tint))
+                    .on_mouse_out(() => step_nr.bg.opacity(1).background(this._step_bg));
+                return element;
+            }));
+        }
+        /**
+         * Set default since it inherits another element.
+         */
+        // Set default since it inherits another element.
+        set_default() {
+            return super.set_default(StepsElement);
+        }
+        styles(style_dict) {
+            if (style_dict == null) {
+                let styles = super.styles();
+                styles["--steps-tint"] = this._tint;
+                styles["--steps-step-bg"] = this._step_bg;
+                styles["--steps-step-border"] = this._step_border;
+                styles["--steps-step-border-radius"] = this._step_border_radius;
+                styles["--steps-div-bg"] = this._div_bg;
+                return styles;
+            }
+            else {
+                return super.styles(style_dict);
+            }
+        }
+        tint(value) {
+            if (value == null) {
+                return this._tint;
+            }
+            this._tint = value;
+            return this;
+        }
+        tint_opacity(value) {
+            if (value == null) {
+                return this._tint_opac;
+            }
+            this._tint_opac = value;
+            return this;
+        }
+        content_overflow(value) {
+            if (value == null) {
+                return this._content_nodes[0].overflow();
+            }
+            for (const node of this._content_nodes) {
+                node.overflow(value);
+            }
+            return this;
+        }
+        divider_background(value) {
+            if (value == null) {
+                return this._div_bg;
+            }
+            this._div_bg = value;
+            for (const node of this._div_nodes) {
+                node.background(value);
+            }
+            return this;
+        }
+        step_number_background(value) {
+            if (value == null) {
+                return this._step_bg;
+            }
+            this._step_bg = value;
+            for (const node of this._step_nr_nodes) {
+                node.bg.background(value);
+            }
+            return this;
+        }
+        step_number_border_color(value) {
+            if (value == null) {
+                return this._step_border;
+            }
+            this._step_border = value;
+            for (const node of this._step_nr_nodes) {
+                node.border_color(value);
+            }
+            return this;
+        }
+        step_number_border_radius(value) {
+            if (value == null) {
+                return this._step_border_radius;
+            }
+            this._step_border_radius = value;
+            for (const node of this._step_nr_nodes) {
+                node.border_radius(value);
+            }
+            return this;
+        }
+        step_number_margin_right(value) {
+            if (value == null) {
+                return this._step_margin_right;
+            }
+            this._step_margin_right = value;
+            for (const node of this._step_nr_nodes) {
+                node.margin_right(value);
+            }
+            return this;
+        }
+        /**
+         * Iterate the step number nodes. When the callback returns any non null value the iteration will be stopped.
+         * @docs
+         */
+        iterate_step_numbers(callback) {
+            for (const node of this._step_nr_nodes) {
+                callback(node);
+            }
+            return this;
+        }
+        /**
+         * Iterate the step nodes. When the callback returns any non null value the iteration will be stopped.
+         * @docs
+         */
+        iterate_steps(callback) {
+            for (const node of this._step_nodes) {
+                callback(node);
+            }
+            return this;
+        }
+    };
+    return StepsElement = _classThis;
+})();
+export { StepsElement };
+export const Steps = Elements.wrapper(StepsElement);
+export const NullSteps = Elements.create_null(StepsElement);

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

@@ -0,0 +1,17 @@
+/**
+ * @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 {
+    constructor(style?: CSSStyleDeclaration);
+}
+export declare const Style: <Extensions extends object = {}>(style?: CSSStyleDeclaration | undefined) => StyleElement & Extensions;
+export declare const NullStyle: <Extensions extends object = {}>() => StyleElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        StyleElement: StyleElement;
+    }
+}
+export {};

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

@@ -0,0 +1,73 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+// Imports.
+import { Elements, VHTMLElement } from "../elements/module.js";
+// Span.
+let StyleElement = (() => {
+    let _classDecorators = [Elements.create({
+            name: "StyleElement",
+            tag: "section",
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VHTMLElement;
+    var StyleElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            StyleElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor(style) {
+            // Initialize base class.
+            super({ derived: StyleElement });
+            // Set style.
+            if (style != null) {
+                this.styles(style);
+            }
+        }
+    };
+    return StyleElement = _classThis;
+})();
+export { StyleElement };
+export const Style = Elements.wrapper(StyleElement);
+export const NullStyle = Elements.create_null(StyleElement);

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

@@ -0,0 +1,69 @@
+/**
+ * @author Daan van den Bergh
+ * @copyright © 2022 - 2025 Daan van den Bergh. All rights reserved
+ */
+import type { BorderOpts } from "../elements/types.js";
+import { VStackElement } from "./stack.js";
+export declare namespace SwitchElement {
+    type OnChangeCallback<This> = (element: This, enabled: boolean) => void;
+}
+export interface SwitchElement extends Omit<VStackElement, "value"> {
+    value(): boolean;
+    value(value: boolean, animate?: boolean): this;
+}
+export declare class SwitchElement extends VStackElement {
+    on_change_handler: SwitchElement.OnChangeCallback<this>;
+    _enabled: boolean;
+    _enabled_color: string;
+    _disabled_color: string;
+    enabled: boolean;
+    slider: VStackElement;
+    button: VStackElement;
+    _value_timeout: any;
+    constructor(enabled?: boolean);
+    set_default(): this;
+    width(): number | string;
+    width(value: number | string): this;
+    min_width(): number | string;
+    min_width(value: number | string): this;
+    max_width(): number | string;
+    max_width(value: number | string): this;
+    height(): number | string;
+    height(value: number | string): this;
+    min_height(): number | string;
+    min_height(value: number | string): this;
+    max_height(): number | string;
+    max_height(value: number | string): this;
+    frame(width?: number | string, height?: number | string): this;
+    min_frame(width?: number | string, height?: number | string): this;
+    max_frame(width?: number | string, height?: number | string): this;
+    background(): string;
+    background(value: string): this;
+    enabled_color(): string;
+    enabled_color(value: string): this;
+    disabled_color(): string;
+    disabled_color(value: string): this;
+    toggle(): this;
+    value(): boolean;
+    value(value: boolean, animate?: boolean): this;
+    on_change(): SwitchElement.OnChangeCallback<this>;
+    on_change(handler: SwitchElement.OnChangeCallback<this>): this;
+    border_color(): string;
+    border_color(value: string): this;
+    border_width(): string;
+    border_width(value: string | number): this;
+    border_style(): string;
+    border_style(value: string): this;
+    border(): string;
+    border(value: string): this;
+    border(width: string | number, color: string): this;
+    border(width: string | number, style: string, color: string): this;
+    border(opts: BorderOpts): this;
+}
+export declare const Switch: <Extensions extends object = {}>(enabled?: boolean | undefined) => SwitchElement & Extensions;
+export declare const NullSwitch: <Extensions extends object = {}>() => SwitchElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        SwitchElement: SwitchElement;
+    }
+}