@vandenberghinc/volt 1.1.5 → 1.1.7

package/frontend/src/ui/code.ts

@@ -7,7 +7,7 @@
 
 // Imports.
 import { Utils } from "../modules/utils.js"
-import { Elements, VElementTagMap, VHTMLElement, VPreElement, VSpanElement, VDiv, VDivElement } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap, VHTMLElement, VPreElement, VSpanElement, VDiv, VDivElement } from "../elements/module.js"
 import { Span } from "./span"
 import { VStack, VStackElement, HStack, HStackElement } from "./stack"
 import { ImageMaskElement, ImageMask } from "./image"
@@ -22,31 +22,33 @@ import * as vhighlight from "vhighlight"
 const language_codeblocks = [];
 
 // CodeBlock.
-@Elements.register
+@Elements.create({
+    name: "CodeBlockElement",
+    default_style: {
+        "display": "flex",
+        "flex-direction": "column",
+        "margin": "0px 0px 0px 0px",
+        "padding": "15px 20px 15px 20px",
+        "text-align": "start",
+        "white-space": "pre",
+        "font-family": "'Menlo', 'Consolas', monospace",
+        "font-size": "13px",
+        "font-weight": "500",
+        "line-height": "18px",
+        "border-radius": "15px",
+        "color": "#FFFFFF",
+        "background": "#262F3D",
+        "overflow": "hidden", // only the content should scroll so the header remains fixed.
+        "width": "100%",
+        "min-width": "100%",
+        "--header-color": "inherit",
+        "--header-border": "#00000010",
+        "--header-background": "inherit",
+        "--selected-language-color": "inherit",
+    },
+})
 export class CodeBlockElement extends VElementTagMap.code {
 
-	static default_style = {
-		"display": "flex",
-		"flex-direction": "column",
-		"margin": "0px 0px 0px 0px",
-		"padding": "15px 20px 15px 20px",
-		"text-align": "start",
-		"white-space": "pre",
-		"font-family": "'Menlo', 'Consolas', monospace",
-		"font-size": "13px",
-		"font-weight": "500",
-		"line-height": "18px",
-		"border-radius": "15px",
-		"color": "#FFFFFF",
-		"background": "#262F3D",
-		"overflow": "hidden", // only the content should scroll so the header remains fixed.
-		"width": "100%",
-		"min-width": "100%",
-		"--header-color": "inherit",
-		"--header-border": "#00000010",
-		"--header-background": "inherit",
-		"--selected-language-color": "inherit",
-	};
 
 	// Attributes.
 	public language?: string;
@@ -71,13 +73,13 @@ export class CodeBlockElement extends VElementTagMap.code {
 	constructor(code_or_opts: string | {
 		code: string,
 		language?: string,
-		line_numbers: boolean,
-		line_divider: boolean,
-		animate: boolean,
-		delay: number,
+		line_numbers?: boolean,
+		line_divider?: boolean,
+		animate?: boolean,
+		delay?: number,
 		duration?: number,
-		already_highlighted: boolean,
-		opts: Record<string, any>,
+		already_highlighted?: boolean,
+		opts?: Record<string, any>,
 	} = {
 		code: "",						// the code data.
 		language: undefined,			// the language.
@@ -161,7 +163,7 @@ export class CodeBlockElement extends VElementTagMap.code {
 		// The content.
 		this.content = HStack(this.lines, this.lines_divider, this.pre)
 			.parent(this)
-			.padding(CodeBlockElement.default_style.padding)
+			// .padding(CodeBlockElement.default_style.padding)
 			.flex_wrap("nowrap")
 			.overflow("auto visible")
 
@@ -171,7 +173,8 @@ export class CodeBlockElement extends VElementTagMap.code {
 		);
 
 		// Set padding.
-		this.padding(0)
+		// this.padding(0)
+        this.padding(CodeBlockElement.default_style.padding)
 
 
 	}
@@ -261,25 +264,26 @@ export const NullCodeBlock = Elements.create_null(CodeBlockElement);
 declare module './any_element.d.ts' { interface AnyElementMap { CodeBlockElement: CodeBlockElement }}
 
 // CodePre.
-@Elements.register
+@Elements.create({
+    name: "CodePreElement",
+    default_style: {
+        "margin": "0px 0px 0px 0px",
+        "padding": "15px 20px 15px 20px",
+        "text-align": "start",
+        "white-space": "pre",
+        "font-family": "'Menlo', 'Consolas', monospace",
+        "font-size": "13px",
+        "font-weight": "500",
+        "line-height": "16px",
+        "border-radius": "15px",
+        "color": "#FFFFFF",
+        "background": "#262F3D",
+        "tab-size": 4,
+        "overflow": "scroll visible",
+    },
+})
 export class CodePreElement extends VElementTagMap.pre {
 
-	static default_style = {
-		"margin": "0px 0px 0px 0px",
-		"padding": "15px 20px 15px 20px",
-		"text-align": "start",
-		"white-space": "pre",
-		"font-family": "'Menlo', 'Consolas', monospace",
-		"font-size": "13px",
-		"font-weight": "500",
-		"line-height": "16px",
-		"border-radius": "15px",
-		"color": "#FFFFFF",
-		"background": "#262F3D",
-		"tab-size": 4,
-		"overflow": "scroll visible",
-	}
-
 	// Attributes.
 	public code: string;
 	public tokens: any = null;
@@ -587,19 +591,20 @@ declare module './any_element.d.ts' { interface AnyElementMap { CodePreElement:
 		@type: string
 		@descr: The code line content.
  */
-@Elements.register
+@Elements.create({
+    name: "CodeLineElement",
+    default_style: {
+        "font-family": "\"Menlo\", \"Consolas\", monospace",
+        "font-size": "0.90em",
+        "font-style": "italic",
+        "background": "#000000",
+        "color": "#FFFFFF",
+        "border-radius": "10px",
+        "white-space": "pre",
+        "padding": "2.5px 7.5px 2.5px 7.5px",
+    }
+})
 export class CodeLineElement extends VElementTagMap.span {
-
-	static default_style = {
-		"font-family": "\"Menlo\", \"Consolas\", monospace",
-		"font-size": "0.90em",
-		"font-style": "italic",
-		"background": "#000000",
-		"color": "#FFFFFF",
-		"border-radius": "10px",
-		"white-space": "pre",
-		"padding": "2.5px 7.5px 2.5px 7.5px",
-	};
 	
 	// Constructor.
 	constructor(text?: string) {
@@ -680,23 +685,24 @@ interface HeaderExtension {
 		@type: boolean
 		@descr: Highlight the code content.
  */
-@Elements.register
-export class MultiLanguageCodeBlockElement extends VStackElement {
-
-	static default_style = {
-		...VStackElement.default_style,
-		"font-family": "'Menlo', 'Consolas', monospace",
-		"background": "black",
-		"color": "white",
-		"box-shadow": "0px 0px 5px #00000005",
-		"font-size": "13px",
-		"line-height": "18px",
-		"border-radius": "10px",
-		"tab-size": 4,
-		"--mlcb-tint": "white",
-		"--mlcb-div-bg": "grey",
-		"--mlcb-title-opac": 0.7,
-	};
+@Elements.create({
+    name: "MultiLanguageCodeBlockElement",
+    default_style: {
+        ...VStackElement.default_style,
+        "font-family": "'Menlo', 'Consolas', monospace",
+        "background": "black",
+        "color": "white",
+        "box-shadow": "0px 0px 5px #00000005",
+        "font-size": "13px",
+        "line-height": "18px",
+        "border-radius": "10px",
+        "tab-size": 4,
+        "--mlcb-tint": "white",
+        "--mlcb-div-bg": "grey",
+        "--mlcb-title-opac": 0.7,
+    },
+})
+export class MultiLanguageCodeBlockElement extends (VStackElement as any as VElementBaseSignature) {
 
 	// Attributes.
 	public _fg: string;
@@ -722,7 +728,7 @@ export class MultiLanguageCodeBlockElement extends VStackElement {
 
 		// Inherit.
 		super();
-		this._init_derived({
+		this._init({
 			derived: MultiLanguageCodeBlockElement,
 		})
 
@@ -769,7 +775,7 @@ export class MultiLanguageCodeBlockElement extends VStackElement {
 							.font_weight(500)
 							.ellipsis_overflow(true),
 						VStack()
-							.width(100%)
+							.width("100%")
 							.height(2)
 							.border_radius(2)
 							.transition("background 300ms ease-in-out")
@@ -782,7 +788,7 @@ export class MultiLanguageCodeBlockElement extends VStackElement {
 					.padding(0, 2)
 					.flex_shrink(0)
 					.center_vertical()
-					.height(100%)
+					.height("100%")
 					.position("relative")
 					.margin_right(20)
 					.on_mouse_over(() => {
@@ -805,12 +811,12 @@ export class MultiLanguageCodeBlockElement extends VStackElement {
 				}),
 			)
 			.parent(this)
-			.height(100%)
+			.height("100%")
 			.class("hide_scrollbar")
 			.wrap(false)
 			.overflow("visible")
 			// .flex("1 1 0"),
-			.width(100%),
+			.width("100%"),
 
 			// Spacer.
 			code.length > 1 ? null : Spacer(),
@@ -847,7 +853,7 @@ export class MultiLanguageCodeBlockElement extends VStackElement {
 					}
 				}),
 		)
-		.width(100%)
+		.width("100%")
 		.overflow("hidden")
 		.height(42.5)
 		.padding(0, 15, 0, 15)
@@ -932,7 +938,7 @@ export class MultiLanguageCodeBlockElement extends VStackElement {
 
 		// Add the code items.
 		this.content = HStack() // keep as hstack, for some reason the right side of the pre's will have padding as well then.
-			.width(100%)
+			.width("100%")
 			.overflow("scroll")
 		let index = 0;
 		code.iterate((item) => {
@@ -965,7 +971,7 @@ export class MultiLanguageCodeBlockElement extends VStackElement {
 			.display("block")
 			.white_space("pre")
 			.class("hide_scrollbar")
-			.max_width(100%)
+			.max_width("100%")
 			.border(1, this._div_bg)
 			.position("relative")
 			.append(

package/frontend/src/ui/context_menu.ts

@@ -4,13 +4,15 @@
  */
 
 // Imports.
-import { Elements } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement } from "../elements/module.js"
 import { Button } from "./button"
 import { VStackElement, VStack } from "./stack"
 
 // Context Menu.
-@Elements.register
-export class ContextMenuElement extends VStackElement {
+@Elements.create({
+    name: "ContextMenuElement",
+})
+export class ContextMenuElement extends (VStackElement as any as VElementBaseSignature) {
 
 	// Attributes.
 	public remove_child_callback: any;
@@ -26,7 +28,7 @@ export class ContextMenuElement extends VStackElement {
 		
 		// Initialize base classes.
 		super();
-		this._init_derived({
+        this._init({
 			derived: ContextMenuElement,
 		})
 
@@ -163,7 +165,7 @@ Elements.extend({
 				return this.oncontextmenu ?? undefined;
 			}
 		}
-		if (callback instanceof ContextMenuElement || (callback as any).element_type === "ContextMenu") {
+        if (callback instanceof ContextMenuElement || (callback as any).element_name === "ContextMenuElement") {
 			this._context_menu = callback as ContextMenuElement;
 			const _this_ = this;
 			this.oncontextmenu = (event) => {

package/frontend/src/ui/css.ts

@@ -4,7 +4,7 @@
  */
 
 // Imports.
-import { Elements } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement } from "../elements/module.js"
 
 // Button.
 export class Stylesheet {

package/frontend/src/ui/divider.ts

@@ -4,19 +4,24 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VHTMLElement, VElementTagMap } from "../elements/module.js"
 
 // Divider.
-@Elements.register
+@Elements.create({
+    name: "DividerElement",
+    default_style: {
+        "margin": "0px",
+        "padding": "0px",
+        "width": "100%",
+        "height": "1px",
+        "min-height": "1px",
+        // "background": "black",
+    },
+})
 export class DividerElement extends VElementTagMap.div {
-	static default_style = {
-		"margin": "0px",
-		"padding": "0px",
-		"width": "100%",
-		"height": "1px",
-		"min-height": "1px",
-		// "background": "black",
-	}
+    
+
+    // Constructor.
 	constructor() {
 		super({
 			derived: DividerElement,

package/frontend/src/ui/dropdown.ts

@@ -4,12 +4,13 @@
  */
 
 // Imports.
-import { Elements } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement } from "../elements/module.js"
 import { Utils } from "../modules/utils.js"
 import { VStack, VStackElement, AnchorVStack, AnchorVStackElement, HStack, HStackElement, AnchorHStack, AnchorHStackElement } from "./stack"
 import { ForEach } from "./for_each"
 import { ImageMask, ImageMaskElement } from "./image"
 import { Text } from "./text"
+import { AnyElement } from "./any_element.js"
 
 type DropdownCallback = (element: DropdownElement) => void;
 
@@ -95,11 +96,16 @@ type DropdownCallback = (element: DropdownElement) => void;
 			@type: boolean
 			@default: false
  */
-@Elements.register
-export class DropdownElement extends VStackElement {
+@Elements.create({
+    name: "DropdownElement",
+})
+export class DropdownElement extends (VStackElement as any as VElementBaseSignature) {
+
+    // Static attributes.
+    static element_name = "DropdownElement";
 
 	// @ts-expect-error
-	public target: HTMLElement;
+    public target: AnyElement | HTMLElement;
 	// @ts-expect-error
 	public animate: boolean;
 	// @ts-expect-error
@@ -151,7 +157,7 @@ export class DropdownElement extends VStackElement {
 		y_offset = undefined,
 		content = undefined,
 	}: {
-		target: HTMLElement,
+		target: AnyElement | HTMLElement,
 		animate?: boolean,
 		duration?: number,
 		side?: string,
@@ -174,12 +180,13 @@ export class DropdownElement extends VStackElement {
 			on_click?: Function,
 			on_click_redirect?: string,
 			anchor?: boolean,
-		},
+            ellipsis_overflow?: boolean;
+		}[],
 	}) {
 
 		// Base.
 		super();
-		this._init_derived({
+		this._init({
 			derived: DropdownElement,
 		})
 
@@ -243,7 +250,12 @@ export class DropdownElement extends VStackElement {
 						.color("white")
 						.font_size("inherit")
 						.wrap(false)
-						// .ellipsis_overflow(true)
+                        .margin(0)
+                        .exec(e => {
+                            if (item.ellipsis_overflow) {
+                                e.ellipsis_overflow(item.ellipsis_overflow);
+                            }
+                        })
 				)
 				.text_decoration("none")
 				.border("none")
@@ -320,24 +332,29 @@ export class DropdownElement extends VStackElement {
 
 		// Show.
 		clearTimeout(this.animation_timeout);
+        
 		this.transition("");
 		this._get_frame();
+        this.hide();
 		this.max_width(this._frame_min_width)
 		this.max_height(this._frame_min_height)
 		this.opacity(0)
-		this.transition(this.animate ? `opacity ${this.duration * 0.8}ms ease-in, max-height ${this.duration}ms ease-in-out, max-width ${this.duration}ms ease-in-out` : "")
-		this.show().getBoundingClientRect();
-		const rect = this.target.getBoundingClientRect();
-		this
-			.position(
-				rect.top + this.y_offset + (this.below_target ? rect.height : 0),
-				this.side !== "left" ? (window.innerWidth - rect.right - this.x_offset) : undefined,
-				undefined,
-				this.side === "left" ? (rect.left + this.x_offset) : undefined
-			)
-			.opacity(1)
-			.max_width(this._frame_max_width)
-			.max_height(this._frame_max_height)
+        this.transition(this.animate ? `opacity ${this.duration * 0.8}ms ease-in, max-height ${this.duration}ms ease-in-out, max-width ${this.duration}ms ease-in-out` : "").getBoundingClientRect()
+		this.show()
+        const rect = this.target.getBoundingClientRect();
+        this.position(
+            rect.top + this.y_offset + (this.below_target ? rect.height : 0),
+            this.side !== "left" ? (window.innerWidth - rect.right - this.x_offset) : undefined,
+            undefined,
+            this.side === "left" ? (rect.left + this.x_offset) : undefined
+        )
+        this.getBoundingClientRect();
+        setTimeout(() => {
+            this
+                .opacity(1)
+                .max_width(this._frame_max_width)
+                .max_height(this._frame_max_height)
+        }, 25)
 
 		// Close handler.
 		if (this.close_handler == null) {

package/frontend/src/ui/for_each.ts

@@ -4,7 +4,7 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 
 // Marcros.
 type ArrayCallback = ((item: any, index: number, is_last: boolean) => any);
@@ -16,15 +16,16 @@ type ObjectCallback2 = ((value: any, key: string) => any);
 type ObjectCallback3 = ((value: any) => any);
 
 // ForEach.
-@Elements.register
+@Elements.create({
+    name: "ForEachElement",
+    default_style: {
+        "border": "none",
+        "outline": "none",
+        "background": "transparent",
+    },
+})
 export class ForEachElement extends VElementTagMap.section {
 
-	static default_style = {
-		"border": "none",
-		"outline": "none",
-		"background": "transparent",
-	};
-
 	// Constructor.
 	constructor(items: Array<any>, func: ArrayCallback);
 	constructor(items: Array<any>, func: ArrayCallback1);

package/frontend/src/ui/form.ts

@@ -4,30 +4,35 @@
  */
 
 // Imports.
-import { Elements, VElement, isVElement } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, isVElement, AppendType } from "../elements/module.js"
+import { AnyElement } from "./any_element.js"
+import { CheckBoxElement } from "./checkbox.js"
+import { ExtendedInputElement, ExtendedSelectElement, InputElement } from "./input.js"
 import { VStack, VStackElement } from "./stack"
 
-// Extended input.
-@Elements.register
-export class FormElement extends VStackElement {
+// Macros.
+export type OnSubmit<This> = (element: This, data: Record<string, any>) => any;
+export type OnSubmitError<This> = (element: This, error: Error) => any;
 
-	// Macros.
-	#macro OnSubmit ((element: FormElement, data: Record<string, any>) => any)
-	#macro OnSubmitError ((element: FormElement, error: Error) => any)
+// Extended input.
+@Elements.create({
+    name: "FormElement",
+})
+export class FormElement extends (VStackElement as any as VElementBaseSignature) {
 
 	// Attributes.
 	public _button?: VElement;
-	public fields: Record<string, any>;
-	public _on_submit?: OnSubmit;
-	public _on_submit_error?: OnSubmitError;
+	public fields: Record<string, ExtendedInputElement | ExtendedSelectElement | CheckBoxElement>;
+	public _on_submit?: OnSubmit<this>;
+	public _on_submit_error?: OnSubmitError<this>;
 	public _on_append_callback: (child: any) => void;
 
 	// Constructor.
-	constructor(...children: any[]) {
+	constructor(...children: AppendType[]) {
 
 		// Initialize super.
 		super();
-		this._init_derived({
+		this._init({
 			derived: FormElement,
 		})
 
@@ -40,10 +45,10 @@ export class FormElement extends VStackElement {
 		this._on_append_callback = (child: any) => {
 			
 			// Initialize field.
-			if (child.element_type === "ExtendedInput" || child.element_type === "ExtendedSelect" || child.element_type === "CheckBox") {
+			if (child.element_name === "ExtendedInputElement" || child.element_name === "ExtendedSelectElement" || child.element_name === "CheckBoxElement") {
 				const id = child.id();
 				if (id != null && id !== "") {
-					_this.fields[id] = child;
+					_this.fields[id] = child as any;
 					child.on_input(() => {
 						if (child.missing() === true) {
 							child.missing(false);
@@ -54,7 +59,7 @@ export class FormElement extends VStackElement {
 			}
 
 			// Initialize button.
-			else if (/*_this._button === undefined &&*/ (child.element_type === "Button" || child.element_type === "LoaderButton") && child.on_click() == null) { //  && child.attr("submit_button") != "false"
+			else if (/*_this._button === undefined &&*/ (child.element_name === "ButtonElement" || child.element_name === "LoaderButtonElement") && child.on_click() == null) { //  && child.attr("submit_button") != "false"
 				if (_this._button !== undefined) {
 					_this._button.on_click(() => {})
 				}
@@ -184,20 +189,20 @@ export class FormElement extends VStackElement {
 
 	// Set the on submit callback, the params for the callback are `(element, data) => {}`.
 	// @ts-expect-error
-	on_submit() : undefined | OnSubmit
+	on_submit() : undefined | OnSubmit<this>
 	// @ts-expect-error
-	on_submit(callback: OnSubmit) : this;
+	on_submit(callback: OnSubmit<this>) : this;
 	// @ts-expect-error
-	on_submit(callback?: OnSubmit) : this | undefined | OnSubmit {
+	on_submit(callback?: OnSubmit<this>) : this | undefined | OnSubmit<this> {
 		if (callback == null) { return this._on_submit; }
 		this._on_submit = callback;
 		return this;
 	}
 
 	// Set the on submit error callback, the params for the callback are `(element, error) => {}`.
-	on_submit_error() : undefined | OnSubmitError
-	on_submit_error(callback: OnSubmitError) : this;
-	on_submit_error(callback?: OnSubmitError) : this | undefined | OnSubmitError {
+	on_submit_error() : undefined | OnSubmitError<this>
+	on_submit_error(callback: OnSubmitError<this>) : this;
+	on_submit_error(callback?: OnSubmitError<this>) : this | undefined | OnSubmitError<this> {
 		if (callback == null) { return this._on_submit_error; }
 		this._on_submit_error = callback;
 		return this;