@vandenberghinc/volt 1.1.4 → 1.1.6

package/frontend/src/ui/border_button.ts

@@ -4,51 +4,52 @@
  */
 
 // Imports.
-import { Elements, VAnchorElement, VDivElement, VDiv, VElementTagMap } from "../elements/module.js";
+import { Elements, VElement, VElementBaseSignature, VAnchorElement, VDivElement, VDiv, VElementTagMap } from "../elements/module.js";
 
 // BorderButton.
 /**
  * Supports a gradient color for the border combined with border radius.
  * Warning: this class is still experimental and may be subject to future change.
  */
-@Elements.register
+@Elements.create({
+    name: "BorderButtonElement",
+    default_style: {
+        "margin": "0px 0px 0px 0px",
+        "display": "inline-block",
+        "color": "inherit",
+        "text-align": "center",
+        "cursor": "pointer",
+        "position": "relative",
+        "z-index": "0",
+        "background": "none",
+        "user-select": "none",
+        "outline": "none",
+        "border": "none",
+        "text-decoration": "none",
+        // Custom.
+        "--child-color": "black",
+        "--child-background": "black",
+        "--child-border-width": "2px",
+        "--child-border-radius": "10px",
+        "--child-padding": "5px 10px 5px 10px",
+    },
+    default_events: {
+        "onmousedown": function (this: any): void {
+            this.style.filter = "brightness(80%)";
+        },
+        "onmouseover": function (this: any): void {
+            this.style.filter = "brightness(90%)";
+        },
+        "onmouseup": function (this: any): void {
+            this.style.filter = "brightness(100%)";
+        },
+        "onmouseout": function (this: any): void {
+            this.style.filter = "brightness(100%)";
+        },
+    },
+})
 export class BorderButtonElement extends VElementTagMap.a {
 
-	static default_style = {
-		"margin": "0px 0px 0px 0px",
-		"display": "inline-block",
-		"color": "inherit",
-		"text-align": "center",
-		"cursor": "pointer",
-		"position": "relative",
-		"z-index": "0",
-		"background": "none",
-		"user-select": "none",
-		"outline": "none",
-		"border": "none",
-		"text-decoration": "none",
-		// Custom.
-		"--child-color": "black",
-		"--child-background": "black",
-		"--child-border-width": "2px",
-		"--child-border-radius": "10px",
-		"--child-padding": "5px 10px 5px 10px",
-	};
-	static default_events = {
-		"onmousedown": function (this: any): void {
-			this.style.filter = "brightness(80%)";
-		},
-		"onmouseover": function (this: any): void {
-			this.style.filter = "brightness(90%)";
-		},
-		"onmouseup": function (this: any): void {
-			this.style.filter = "brightness(100%)";
-		},
-		"onmouseout": function (this: any): void {
-			this.style.filter = "brightness(100%)";
-		},
-	};
-
 	public nodes: {
 	    border: VDivElement;
 	    text: VDivElement;
@@ -311,6 +312,9 @@ export class BorderButtonElement extends VElementTagMap.a {
 	transition_border_color(val: string): this;
 	transition_border_color(val?: string): string | this {
 		if (val == null) { return this.nodes.border.transition(); }
+        else if (/[0-9]/.test(val.charAt(0))) {
+            val = "border-color " + val;
+        }
 		this.nodes.border.transition(typeof val !== "string" ? val : val.replace("border-color ", "background "));
 		return this;
 	}

package/frontend/src/ui/button.ts

@@ -4,42 +4,43 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js";
+import { Elements, VElementBaseSignature, VElement, VElementTagMap, VHTMLElement } from "../elements/module.js";
 
 // Button.
-@Elements.register
+@Elements.create({
+    name: "ButtonElement",
+    default_style: {
+        "margin": "0px 0px 0px",
+        "padding": "5px 10px 5px 10px",
+        "outline": "none",
+        "border": "none",
+        "border-radius": "10px",
+        "cursor": "pointer",
+        "color": "inherit",
+        "text-align": "center",
+        "display": "grid",
+        "align-items": "center",
+        "white-space": "nowrap",
+        "user-select": "none",
+        "text-decoration": "none",
+    },
+    default_events: {
+        "onmousedown": function (this: any): void {
+            this.style.filter = "brightness(80%)";
+        },
+        "onmouseover": function (this: any): void {
+            this.style.filter = "brightness(90%)";
+        },
+        "onmouseup": function (this: any): void {
+            this.style.filter = "brightness(100%)";
+        },
+        "onmouseout": function (this: any): void {
+            this.style.filter = "brightness(100%)";
+        },
+    },
+})
 export class ButtonElement extends VElementTagMap.a {
 
-	static default_style = {
-		"margin": "0px 0px 0px",
-		"padding": "5px 10px 5px 10px",
-		"outline": "none",
-		"border": "none",
-		"border-radius": "10px",
-		"cursor": "pointer",
-		"color": "inherit",
-		"text-align": "center",
-		"display": "grid",
-		"align-items": "center",
-		"white-space": "nowrap",
-		"user-select": "none",
-		"text-decoration": "none",
-	};
-	static default_events = {
-		"onmousedown": function (this: any): void {
-			this.style.filter = "brightness(80%)";
-		},
-		"onmouseover": function (this: any): void {
-			this.style.filter = "brightness(90%)";
-		},
-		"onmouseup": function (this: any): void {
-			this.style.filter = "brightness(100%)";
-		},
-		"onmouseout": function (this: any): void {
-			this.style.filter = "brightness(100%)";
-		},
-	};
-
 	/**
 	 * @docs:
 	 * @nav: Frontend

package/frontend/src/ui/canvas.ts

@@ -5,7 +5,7 @@
 
 // Imports.
 import { Utils } from "../modules/utils.js"
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 import { GradientType } from "../types/gradient.js"
 
 // Types.
@@ -23,9 +23,12 @@ type DotObject = {x: number, y: number, tension?: number};
  *	@warning:
  *		This class is still experimental and may be subject to future change.
  */
-@Elements.register
+@Elements.create({
+    name: "CanvasElement",
+})
 export class CanvasElement extends VElementTagMap.canvas {
 
+    // Attributes.
 	public _e: any;
 	public ctx_2d: any;
 

package/frontend/src/ui/checkbox.ts

@@ -4,7 +4,7 @@
  */
 
 // Imports.
-import { Elements } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement } from "../elements/module.js"
 import { VStack, VStackElement, HStack, HStackElement } from "./stack"
 import { Text, TextElement } from "./text"
 
@@ -17,23 +17,22 @@ interface CircleExtension {
 }
 
 // Extended input.
-@Elements.register
-export class CheckBoxElement extends VStackElement {
-
-	// Default styling.
-	// static default_style = Object.assign({}, HStackElement.default_style, {
-
-	static 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",
-	}
+@Elements.create({
+    name: "CheckBoxElement",
+    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",
+    },
+})
+export class CheckBoxElement extends (VStackElement as any as VElementBaseSignature) {
 
+    // Attributes.
 	public _border_color: string;
 	public _inner_bg: string;
 	public _focus_color: string;
@@ -60,7 +59,7 @@ export class CheckBoxElement extends VStackElement {
 
 		// Initialize super.
 		super();
-		this._init_derived({
+		this._init({
 			derived: CheckBoxElement,
 		})
 
@@ -85,8 +84,8 @@ export class CheckBoxElement extends VStackElement {
 		this.circle = VStack(
 				VStack()
 				.assign_to_parent_as("inner")
-				.border_radius(50%)
-				.frame(35%, 35%)
+				.border_radius("50%")
+				.frame("35%", "35%")
 				.background(this._inner_bg)
 				.flex_shrink(0)
 			)
@@ -95,7 +94,7 @@ export class CheckBoxElement extends VStackElement {
 			.border_width(1)
 			.border_style("solid")
 			.border_color(this._border_color)
-			.border_radius(50%)
+			.border_radius("50%")
 			.frame(15, 15)
 			.margin(2.5, 10, 0, 0)
 			.background("transparent")
@@ -137,7 +136,7 @@ export class CheckBoxElement extends VStackElement {
 
 		// The content.
 		this.content = HStack(this.circle, this.text)
-			.width(100%)
+			.width("100%")
 
 		// The error message.
 		this.error = Text("Incomplete field")

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,