@vandenberghinc/volt 1.1.2

package/frontend/dist/ui/checkbox.js

@@ -0,0 +1,277 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+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;
+};
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+// Imports.
+import { Elements } from "../elements/module.js";
+import { VStack, VStackElement, HStack } from "./stack";
+import { Text } from "./text";
+// Extended input.
+let CheckBoxElement = (() => {
+    var _a;
+    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = VStackElement;
+    var CheckBoxElement = _classThis = class extends _classSuper {
+        // Constructor.
+        constructor(text_or_obj = {
+            text: "",
+            required: false,
+            id: undefined,
+        }) {
+            // Initialize super.
+            super();
+            this._init_derived({
+                derived: CheckBoxElement,
+            });
+            // Args.
+            let text = text_or_obj, required = false, id = undefined;
+            if (typeof text_or_obj === "object" && text_or_obj != null) {
+                text = text_or_obj.text;
+                required = text_or_obj.required == null ? false : text_or_obj.required;
+                id = text_or_obj.id == null ? undefined : text_or_obj.id;
+            }
+            // Attributes.
+            this._border_color = CheckBoxElement.default_style["--circle-border-color"];
+            this._inner_bg = CheckBoxElement.default_style["--circle-inner-bg"];
+            this._focus_color = CheckBoxElement.default_style["--focus-color"];
+            this._missing_color = CheckBoxElement.default_style["--missing-color"];
+            this._missing = false;
+            this._required = false;
+            // Circle element.
+            const _this = this;
+            this.circle = VStack(VStack()
+                .assign_to_parent_as("inner")
+                .border_radius("50%")
+                .frame("35%", "35%")
+                .background(this._inner_bg)
+                .flex_shrink(0))
+                .assign_to_parent_as("circle")
+                .flex_shrink(0)
+                .border_width(1)
+                .border_style("solid")
+                .border_color(this._border_color)
+                .border_radius("50%")
+                .frame(15, 15)
+                .margin(2.5, 10, 0, 0)
+                .background("transparent")
+                .box_shadow(`0 0 0 0px transparent`)
+                .transition("background 0.3s ease-in-out, box-shadow 0.2s ease-in-out")
+                .center()
+                .center_vertical()
+                .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())
+                .extend({
+                enabled: false,
+                toggle() {
+                    return this.value(!this.enabled);
+                },
+                value(to = null) {
+                    if (to == null) {
+                        return this.enabled;
+                    }
+                    else if (to === true) {
+                        this.enabled = true;
+                        this.background(_this._focus_color);
+                        _this.missing(false);
+                    }
+                    else {
+                        this.enabled = false;
+                        this.background("transparent");
+                    }
+                    return this;
+                },
+            });
+            // Text element.
+            this.text = Text()
+                .inner_html(text) // so links can be added to the text.
+                .font_size("inherit")
+                .color("inherit")
+                .padding(0)
+                .margin(0);
+            // The content.
+            this.content = HStack(this.circle, this.text)
+                .width("100%");
+            // The error message.
+            this.error = Text("Incomplete field")
+                .color(this._missing_color)
+                .font_size("0.8em")
+                .margin(5, 0, 0, 2.5)
+                .padding(0)
+                .hide();
+            // Append.
+            this.append(this.content, this.error);
+            // Set id.
+            if (id !== undefined) {
+                this.id(id);
+            }
+            // Set required.
+            if (required) {
+                this.required(required);
+            }
+        }
+        border_color(val) {
+            if (val == null) {
+                return this._border_color;
+            }
+            this._border_color = val;
+            this.circle.border_color(this._border_color);
+            return this;
+        }
+        inner_bg(val) {
+            if (val == null) {
+                return this._inner_bg;
+            }
+            this._inner_bg = val;
+            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-border-color"] = this._border_color;
+                styles["--focus-color"] = this._focus_color;
+                styles["--missing-color"] = this._missing_color;
+                return styles;
+            }
+            else {
+                return super.styles(style_dict);
+            }
+        }
+        // Set default since it inherits an element.
+        set_default() {
+            return super.set_default(CheckBoxElement);
+        }
+        // Toggle value.
+        toggle() {
+            this.circle.toggle();
+            return this;
+        }
+        // @ts-expect-error
+        value(to) {
+            if (to == null) {
+                return this.circle.enabled;
+            }
+            this.circle.value(to);
+            return this;
+        }
+        required(to) {
+            if (to == null) {
+                return this._required;
+            }
+            this._required = to;
+            return this;
+        }
+        focus_color(val) {
+            if (val == null) {
+                return this._focus_color;
+            }
+            this._focus_color = val;
+            return this;
+        }
+        missing_color(val) {
+            if (val == null) {
+                return this._missing_color;
+            }
+            this._missing_color = val;
+            return this;
+        }
+        missing(to = true) {
+            if (to == null) {
+                return this._missing;
+            }
+            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 {
+                this._missing = false;
+                this.circle.outline("0px solid transparent");
+                this.circle.box_shadow(`0 0 0 0px transparent`);
+                this.error.hide();
+            }
+            return this;
+        }
+        // Submit the item, throws an error when the item is not enabled.
+        submit() {
+            const value = this.value();
+            if (value !== true) {
+                this.missing(true);
+                throw Error("Fill in all the required fields.");
+            }
+            this.missing(false);
+            return value;
+        }
+    };
+    __setFunctionName(_classThis, "CheckBoxElement");
+    (() => {
+        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);
+        CheckBoxElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+    })();
+    // Default styling.
+    // static default_style = Object.assign({}, HStackElement.default_style, {
+    _classThis.default_style = {
+        ...VStackElement.default_style,
+        "color": "inherit",
+        "font-size": "16px",
+        // Custom.
+        "--circle-border-color": "gray",
+        "--circle-inner-bg": "#FFFFFF",
+        "--focus-color": "#8EB8EB",
+        "--missing-color": "#E8454E",
+    };
+    (() => {
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return CheckBoxElement = _classThis;
+})();
+export { CheckBoxElement };
+export const CheckBox = Elements.wrapper(CheckBoxElement);
+export const NullCheckBox = Elements.create_null(CheckBoxElement);

package/frontend/dist/ui/code.d.ts

@@ -0,0 +1,232 @@
+import { VElementTagMap, VDivElement } from "../elements/module.js";
+import { VStackElement, HStackElement } from "./stack";
+import { ImageMaskElement } from "./image";
+import { DividerElement } from "./divider";
+export declare class CodeBlockElement extends VElementTagMap.code {
+    static default_style: {
+        display: string;
+        "flex-direction": string;
+        margin: string;
+        padding: string;
+        "text-align": string;
+        "white-space": string;
+        "font-family": string;
+        "font-size": string;
+        "font-weight": string;
+        "line-height": string;
+        "border-radius": string;
+        color: string;
+        background: string;
+        overflow: string;
+        width: string;
+        "min-width": string;
+        "--header-color": string;
+        "--header-border": string;
+        "--header-background": string;
+        "--selected-language-color": string;
+    };
+    language?: string;
+    line_numbers?: boolean;
+    line_divider?: boolean;
+    animate?: boolean;
+    delay?: number;
+    duration?: number;
+    already_highlighted?: boolean;
+    opts?: Record<string, any>;
+    pre: CodePreElement;
+    lines: VDivElement;
+    lines_divider: VDivElement;
+    content: HStackElement;
+    constructor(code_or_opts?: string | {
+        code: string;
+        language?: string;
+        line_numbers: boolean;
+        line_divider: boolean;
+        animate: boolean;
+        delay: number;
+        duration?: number;
+        already_highlighted: boolean;
+        opts: Record<string, any>;
+    });
+    hide_scrollbar(): this;
+    show_scrollbar(): this;
+    show(): this;
+    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.
+    line_divider, // show line numbers divider.
+    animate, // animate code writing.
+    delay, // animation delay in milliseconds, only used when animatinos are enabled.
+    duration, // animation duration in milliseconds, only used when animatinos are enabled.
+    opts, }?: {
+        code?: string;
+        language?: string;
+        line_numbers?: boolean;
+        line_divider?: boolean;
+        animate?: boolean;
+        delay?: number;
+        duration?: number;
+        opts?: Record<string, any>;
+    }): this;
+}
+export declare const CodeBlock: <Extensions extends object = {}>(code_or_opts?: string | {
+    code: string;
+    language?: string;
+    line_numbers: boolean;
+    line_divider: boolean;
+    animate: boolean;
+    delay: number;
+    duration?: number;
+    already_highlighted: boolean;
+    opts: Record<string, any>;
+} | undefined) => CodeBlockElement & Extensions;
+export declare const NullCodeBlock: <Extensions extends object = {}>() => CodeBlockElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        CodeBlockElement: CodeBlockElement;
+    }
+}
+export declare class CodePreElement extends VElementTagMap.pre {
+    static default_style: {
+        margin: string;
+        padding: string;
+        "text-align": string;
+        "white-space": string;
+        "font-family": string;
+        "font-size": string;
+        "font-weight": string;
+        "line-height": string;
+        "border-radius": string;
+        color: string;
+        background: string;
+        "tab-size": number;
+        overflow: string;
+    };
+    code: string;
+    tokens: any;
+    allow_animation: any;
+    animate_promise: any;
+    tokenizer: any;
+    language: string;
+    constructor(code?: string);
+    animate_writing({ code, delay, duration, }: {
+        code: string;
+        delay?: number;
+        duration?: number;
+    }): Promise<void>;
+    cancel_animation(): Promise<void>;
+    highlight({ code, // only required if the code was not provided by the constructor.
+    language, // code language, precedes element attribute "language".
+    animate, // animate code writing.
+    delay, // animation delay in milliseconds, only used when animatinos are enabled.
+    duration, // animation duration in milliseconds, only used when animatinos are enabled.
+    opts, // special args of the language's tokenizer constructor.
+    _post_tokenized_callback, }?: {
+        code?: string;
+        language?: string;
+        animate?: boolean;
+        delay?: number;
+        duration?: number;
+        opts?: Record<string, any>;
+        _post_tokenized_callback?: Function;
+    }): this;
+}
+export declare const CodePre: <Extensions extends object = {}>(code?: string | undefined) => CodePreElement & Extensions;
+export declare const NullCodePre: <Extensions extends object = {}>() => CodePreElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        CodePreElement: CodePreElement;
+    }
+}
+export declare class CodeLineElement extends VElementTagMap.span {
+    static default_style: {
+        "font-family": string;
+        "font-size": string;
+        "font-style": string;
+        background: string;
+        color: string;
+        "border-radius": string;
+        "white-space": string;
+        padding: string;
+    };
+    constructor(text?: string);
+    static fill(text: any, codeline_callback?: () => CodeLineElement): string;
+}
+export declare const CodeLine: <Extensions extends object = {}>(text?: string | undefined) => CodeLineElement & Extensions;
+export declare const NullCodeLine: <Extensions extends object = {}>() => CodeLineElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        CodeLineElement: CodeLineElement;
+    }
+}
+interface MLContentObject {
+    language: string;
+    title?: string;
+    data: string;
+}
+interface HeaderExtension {
+    selected: none | number;
+    selected_lang: none | string;
+    selected_code_pre: none | CodePreElement;
+    set_selected(index: number): this;
+    select(lang_or_index: number | string, recursive?: boolean): this;
+}
+export declare class MultiLanguageCodeBlockElement extends VStackElement {
+    static default_style: {
+        "font-family": string;
+        background: string;
+        color: string;
+        "box-shadow": string;
+        "font-size": string;
+        "line-height": string;
+        "border-radius": string;
+        "tab-size": number;
+        "--mlcb-tint": string;
+        "--mlcb-div-bg": string;
+        "--mlcb-title-opac": number;
+        margin: string;
+        padding: string;
+        display: string;
+        overflow: string;
+        "align-content": string;
+        "flex-direction": string;
+        outline: string;
+        border: string;
+    };
+    _fg: string;
+    _tint: string;
+    _div_bg: string;
+    _title_opac: number;
+    _pre_nodes: CodePreElement[];
+    _title_nodes: (VStackElement & {
+        divider: VStackElement;
+    })[];
+    header: HStackElement & HeaderExtension;
+    _copy_img: ImageMaskElement;
+    content: HStackElement;
+    divider: DividerElement;
+    constructor(args: MLContentObject | MLContentObject[] | {
+        content: string | MLContentObject | MLContentObject[];
+        highlight?: boolean;
+    });
+    set_default(): this;
+    styles(): Record<string, string>;
+    styles(style_dict: Record<string, any>): this;
+    color(): string;
+    color(value: string): this;
+    tint(): string;
+    tint(value: string): this;
+    divider_background(): string;
+    divider_background(value: string): this;
+}
+export declare const MultiLanguageCodeBlock: <Extensions extends object = {}>(args: MLContentObject | MLContentObject[] | {
+    content: string | MLContentObject | MLContentObject[];
+    highlight?: boolean;
+}) => MultiLanguageCodeBlockElement & Extensions;
+export declare const NullMultiLanguageCodeBlock: <Extensions extends object = {}>() => MultiLanguageCodeBlockElement & Extensions;
+declare module './any_element.d.ts' {
+    interface AnyElementMap {
+        MultiLanguageCodeBlockElement: MultiLanguageCodeBlockElement;
+    }
+}
+export {};