@vandenberghinc/volt 1.1.4 → 1.1.6

package/frontend/src/ui/input.ts

@@ -4,7 +4,7 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap, VInputElement, VTextAreaElement } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap, VInputElement, VTextAreaElement, ElementKeyboardEvent, ElementEvent } from "../elements/module.js"
 import { Utils } from "../modules/utils.js"
 import { HStack, HStackElement, VStack, VStackElement } from "./stack"
 import { Text, TextElement } from "./text"
@@ -12,28 +12,30 @@ import { ImageMask, ImageMaskElement } from "./image"
 import { GradientBorder, GradientBorderElement } from "./gradient"
 import { Scroller, ScrollerElement } from "./scroller"
 import { Divider } from "./divider"
+import { addSyntheticLeadingComment } from "typescript"
 
 // Input.
-@Elements.register
-export class InputElement extends VElementTagMap.input {
-
-	static default_style = {
-		"margin": "0px 0px 0px 0px",
-		"padding": "2.5px 5px 2.5px 5px",
-		"font": "inherit",
-		"color": "inherit",
-		"background": "none",
-		"outline": "none",
-		"border": "none",
-		"border-radius": "10px",
-		"text-align": "start",
-		"white-space": "nowrap",
-	};
-	static default_attributes = {
+@Elements.create({
+    name: "InputElement",
+    default_style: {
+        "margin": "0px 0px 0px 0px",
+        "padding": "2.5px 5px 2.5px 5px",
+        "font": "inherit",
+        "color": "inherit",
+        "background": "none",
+        "outline": "none",
+        "border": "none",
+        "border-radius": "10px",
+        "text-align": "start",
+        "white-space": "nowrap",
+    },
+    default_attributes: {
         "spellcheck": "false",
         "autocorrect": "off",
         "autocapitalize": "none",
-	};
+    },
+})
+export class InputElement extends VElementTagMap.input {
 
 	// Attributes.
 	private _e!: HTMLInputElement;
@@ -129,28 +131,29 @@ export const NullInput = Elements.create_null(InputElement);
 declare module './any_element.d.ts' { interface AnyElementMap { InputElement: InputElement }}
 
 // InputBox.
-@Elements.register
-export class InputBoxElement extends VElementTagMap.textarea {
-
-	static default_style = {
-		"margin": "0px 0px 0px 0px",
-		"padding": "2.5px 5px 2.5px 5px",
-		"height": "20px",
-		"font": "inherit",
-		"color": "inherit",
-		"background": "none",
-		"outline": "none",
-		"border": "none",
-		"border-radius": "10px",
-		"text-align": "start",
-		"white-space": "wrap",
-		"resize": "none",
-	}
-	static default_attributes = {
+@Elements.create({
+    name: "InputBoxElement",
+    default_style: {
+        "margin": "0px 0px 0px 0px",
+        "padding": "2.5px 5px 2.5px 5px",
+        "height": "20px",
+        "font": "inherit",
+        "color": "inherit",
+        "background": "none",
+        "outline": "none",
+        "border": "none",
+        "border-radius": "10px",
+        "text-align": "start",
+        "white-space": "wrap",
+        "resize": "none",
+    },
+	default_attributes: {
         "spellcheck": "false",
         "autocorrect": "off",
         "autocapitalize": "none",
-	}
+    },
+})
+export class InputBoxElement extends VElementTagMap.textarea {
 
 	// Attributes.
 	public _e?: HTMLTextAreaElement;
@@ -245,35 +248,34 @@ export const NullInputBox = Elements.create_null(InputBoxElement);
 declare module './any_element.d.ts' { interface AnyElementMap { InputBoxElement: InputBoxElement }}
 
 // Extended input.
-@Elements.register
-export class ExtendedInputElement extends VStackElement {
-
-	static default_style = {
-		...VStackElement.default_style,
-		"color": "inherit",
-		"font-size": "16px",
-		// Custom.
-		"--input-padding": "12px 6px",
-		"--input-border-radius": "5px",
-		"--input-border-color": "gray",
-		"--input-background": "transparent",
-		"--image-mask-color": "#000",
-		"--image-size": "20px",
-		"--image-margin-right": "10px",
-		"--image-margin-left": "5px",
-		"--image-alt": "VWeb",
-		"--focus-color": "#8EB8EB",
-		"--missing-color": "#E8454E",
-	}
-
-	#macro ElementKeyboardEvent ((element: this, event: KeyboardEvent) => any)
-	#macro ElementEvent ((element: this, event: Event) => any)
-
-	public _focus_color: string;
-	public _missing_color: string;
-	public _mask_color: string;
-	public _initial_border_color: string;
-	public _missing: boolean;
+@Elements.create({
+    name: "ExtendedInputElement",
+    default_style: {
+        ...VStackElement.default_style,
+        "color": "inherit",
+        "font-size": "16px",
+        // Custom.
+        "--input-padding": "12px 6px",
+        "--input-border-radius": "5px",
+        "--input-border-color": "gray",
+        "--input-hover-border-color": "gray",
+        "--input-background": "transparent",
+        "--image-mask-color": "#000",
+        "--image-size": "20px",
+        "--image-margin-right": "10px",
+        "--image-margin-left": "5px",
+        "--image-alt": "VWeb",
+        "--focus-color": "#8EB8EB",
+        "--missing-color": "#E8454E",
+    },
+})
+export class ExtendedInputElement extends (VStackElement as any as VElementBaseSignature) {
+
+	private _focus_color: string;
+	private _missing_color: string;
+	private _mask_color: string;
+	private _initial_border_color: string;
+    private _hover_border_color: string;
 
 	// @ts-expect-error
 	public label: TextElement;
@@ -282,6 +284,8 @@ export class ExtendedInputElement extends VStackElement {
 	public input_border: GradientBorderElement;
 	public container: HStackElement;
 	public error: TextElement;
+    public is_missing = false;
+    public is_focused = false;
 
 	// @todo add readonly func
 
@@ -310,7 +314,7 @@ export class ExtendedInputElement extends VStackElement {
 
 		// Initialize super.
 		super();
-		this._init_derived({
+		this._init({
 			derived: ExtendedInputElement,
 		})
 
@@ -320,12 +324,11 @@ export class ExtendedInputElement extends VStackElement {
 		}
 
 		// Attributes.
-		this.element_type = "ExtendedInput";
 		this._focus_color = ExtendedInputElement.default_style["--focus-color"];
 		this._missing_color = ExtendedInputElement.default_style["--missing-color"];
 		this._mask_color = ExtendedInputElement.default_style["--image-mask-color"];
-		this._initial_border_color = "black";
-		this._missing = false;
+        this._initial_border_color = ExtendedInputElement.default_style["--input-border-color"];
+        this._hover_border_color = ExtendedInputElement.default_style["--input-hover-border-color"];
 
 		// Set default styling.
 		this.styles(ExtendedInputElement.default_style);
@@ -334,7 +337,7 @@ export class ExtendedInputElement extends VStackElement {
 		this.label = Text(label)
 			.parent(this)
 			.font_size("inherit")
-			.margin(0, 0, 5, 0)
+			.margin(0, 0, 7.5, 0)
 			.color("inherit")
 			.width("fit-content")
 			.ellipsis_overflow(true)
@@ -377,26 +380,16 @@ export class ExtendedInputElement extends VStackElement {
 			.outline("none")
 			.z_index(1)
 			.border_radius(0) // is required.
-			// .on_focus(() => {
-			// 	if (this._missing !== true) {
-			// 		this.container.outline(`1px solid ${this._focus_color}`)
-			// 		this.container.box_shadow(`0 0 0 3px ${this._focus_color}80`)
-			// 	}
-			// })
-			// .on_blur(() => {
-			// 	if (this._missing !== true) {
-			// 		this.container.outline("0px solid transparent")
-			// 		this.container.box_shadow(`0 0 0 0px transparent`)
-			// 	}
-			// })
 			.on_focus(() => {
-				if (this._missing !== true) {
+                if (!this.is_missing) {
+                    this.is_focused = true;
 					this.input_border.border_color(this._focus_color)
 					this.container.box_shadow(`0 0 0 3px ${this._focus_color}80`)
 				}
 			})
 			.on_blur(() => {
-				if (this._missing !== true) {
+                if (!this.is_missing) {
+                    this.is_focused = false;
 					this.input_border.border_color(this._initial_border_color)
 					this.container.box_shadow(`0 0 0 0px transparent`)
 				}
@@ -418,6 +411,7 @@ export class ExtendedInputElement extends VStackElement {
 			VStack(
 				this.image,
 			)
+            .width("fit-content")
 			.height("1.6em")
 			.center_vertical(),
 			this.input_border,
@@ -430,7 +424,19 @@ export class ExtendedInputElement extends VStackElement {
 		.transition("box-shadow 0.2s ease-in-out")
 		.outline("0px solid transparent")
 		.box_shadow(`0 0 0 0px transparent`)
-		.width(100%)
+		.width("100%")
+        .on_mouse_over_out(
+            (e) => {
+                if (!this.is_missing && !this.is_focused) {
+                    this.input_border.border_color(this._hover_border_color)
+                }
+            },
+            (e) => {
+                if (!this.is_missing && !this.is_focused) {
+                    this.input_border.border_color(this._initial_border_color)
+                }
+            },    
+        )
 
 		// The error message.
 		this.error = Text("Incomplete field")
@@ -471,6 +477,7 @@ export class ExtendedInputElement extends VStackElement {
 			styles["--input-padding"] = this.container.padding();
 			styles["--input-border-radius"] = this.container.border_radius();
 			styles["--input-border-color"] = this.container.border_color();
+            styles["--input-hover-border-color"] = this._hover_border_color;
 			styles["--image-mask-color"] = this._mask_color;
 			styles["--image-size"] = this.image.width().toString();
 			styles["--image-margin-right"] = this.image.margin_right().toString();
@@ -512,9 +519,9 @@ export class ExtendedInputElement extends VStackElement {
 	missing(): boolean;
 	missing(to: boolean, err?: string): this;
 	missing(to?: boolean, err: string = "Incomplete field"): boolean | this {
-		if (to == null) { return this._missing; }
+        if (to == null) { return this.is_missing; }
 		else if (to === true) {
-			this._missing = true;
+            this.is_missing = true;
 			this.input_border.border_color(this._missing_color)
 			// this.container.outline(`1px solid ${this._missing_color}`)
 			this.container.box_shadow(`0 0 0 3px ${this._missing_color}80`)
@@ -524,7 +531,7 @@ export class ExtendedInputElement extends VStackElement {
 				this.error.text(err);
 			}
 		} else {
-			this._missing = false;
+            this.is_missing = false;
 			this.input_border.border_color(this._initial_border_color)
 			// this.container.outline("0px solid transparent")
 			this.container.box_shadow(`0 0 0 0px transparent`)
@@ -586,18 +593,18 @@ export class ExtendedInputElement extends VStackElement {
 	required(val: boolean): this;
 	required(val?: boolean): boolean | this { if (val == null) { return this.input.required(); } this.input.required(val); return this; }
 
-	on_enter(): undefined | ElementKeyboardEvent;
-	on_enter(val: ElementKeyboardEvent): this;
-	on_enter(val?: ElementKeyboardEvent): this | undefined | ElementKeyboardEvent {
-		if (val == null) { return this.input.on_enter() as undefined | ElementKeyboardEvent; }
+	on_enter(): undefined | ElementKeyboardEvent<this>;
+	on_enter(val: ElementKeyboardEvent<this>): this;
+	on_enter(val?: ElementKeyboardEvent<this>): this | undefined | ElementKeyboardEvent<this> {
+		if (val == null) { return this.input.on_enter() as undefined | ElementKeyboardEvent<this>; }
 		this.input.on_enter((x, y) => val(this, y));
 		return this;
 	}
 
-	on_input(): undefined | ElementEvent;
-	on_input(val: ElementEvent): this;
-	on_input(val?: ElementEvent): undefined | ElementEvent | this {
-		if (val == null) { return this.input.on_input() as undefined | ElementEvent; }
+	on_input(): undefined | ElementEvent<this>;
+	on_input(val: ElementEvent<this>): this;
+	on_input(val?: ElementEvent<this>): undefined | ElementEvent<this> | this {
+		if (val == null) { return this.input.on_input() as undefined | ElementEvent<this>; }
 		this.input.on_input((x, y) => val(this, y));
 		return this;
 	}
@@ -616,6 +623,14 @@ export class ExtendedInputElement extends VStackElement {
 		return this;
 	}
 
+    hover_border_color(): string;
+    hover_border_color(val: string): this;
+    hover_border_color(val ?: string): string | this {
+        if (val == null) { return this._hover_border_color; }
+        this._hover_border_color = val;
+        return this;
+    }
+
 	border_width(): string;
 	border_width(val: string): this;
 	border_width(val?: string): string | this { if (val == null) { return this.container.border_width(); } this.container.border_width(val); this.input_border.border_width(val); return this; }
@@ -661,34 +676,34 @@ interface ExtendedSelectItem {
 type ExtendedSelectOnChange = (element: ExtendedSelectElement, id: string) => any;
 
 // Extended input.
-@Elements.register
-export class ExtendedSelectElement extends VStackElement {
-
-	static default_style = {
-		...VStackElement.default_style,
-		"color": "inherit",
-		"font-size": "16px",
-		"background": "#FFFFFF",
-		// Custom.
-		"--input-padding": "12px 6px",
-		"--input-border-radius": "5px",
-		"--input-border-color": "gray",
-		"--image-mask-color": "#000",
-		"--image-size": "20px",
-		"--image-margin-right": "10px",
-		"--image-margin-left": "5px",
-		"--image-alt": "VWeb",
-		"--hover-bg": "#00000007",
-		"--focus-color": "#8EB8EB",
-		"--missing-color": "#E8454E",
-	}
+@Elements.create({
+    name: "ExtendedSelectElement",
+    default_style: {
+        ...VStackElement.default_style,
+        "color": "inherit",
+        "font-size": "16px",
+        "background": "#FFFFFF",
+        // Custom.
+        "--input-padding": "12px 6px",
+        "--input-border-radius": "5px",
+        "--input-border-color": "gray",
+        "--image-mask-color": "#000",
+        "--image-size": "20px",
+        "--image-margin-right": "10px",
+        "--image-margin-left": "5px",
+        "--image-alt": "VWeb",
+        "--hover-bg": "#00000007",
+        "--focus-color": "#8EB8EB",
+        "--missing-color": "#E8454E",
+    }
+})
+export class ExtendedSelectElement extends (VStackElement as any as VElementBaseSignature) {
 
 	public _focus_color: string;
 	public _missing_color: string;
 	public _mask_color: string;
 	public _border_color: string;
 	public _hover_bg: string;
-	public _missing: boolean;
 
 	public items: ExtendedSelectItem[];
 
@@ -699,6 +714,7 @@ export class ExtendedSelectElement extends VStackElement {
 	public container: HStackElement;
 	public error: TextElement;
 	public dropdown: ScrollerElement;
+    public is_missing = false;
 
 	public _on_change_callback?: ExtendedSelectOnChange;
 
@@ -728,7 +744,7 @@ export class ExtendedSelectElement extends VStackElement {
 
 		// Initialize super.
 		super();
-		this._init_derived({
+		this._init({
 			derived: ExtendedSelectElement,
 		})
 
@@ -767,16 +783,12 @@ export class ExtendedSelectElement extends VStackElement {
             throw Error(`Parameter "items" should be a defined value of type "array" or "object".`);
 		}
 
-		// Default attributes.
-		this.element_type = "ExtendedSelect";
-
 		// Attributes.
 		this._focus_color = ExtendedSelectElement.default_style["--focus-color"];
 		this._missing_color = ExtendedSelectElement.default_style["--missing-color"];
 		this._mask_color = ExtendedSelectElement.default_style["--image-mask-color"];
 		this._border_color = ExtendedSelectElement.default_style["--input-border-color"];
 		this._hover_bg = ExtendedSelectElement.default_style["--hover-bg"]
-		this._missing = false;
 
 		// Set default styling.
 		this.styles(ExtendedSelectElement.default_style);
@@ -785,7 +797,7 @@ export class ExtendedSelectElement extends VStackElement {
 		this.label = Text(label)
 			.parent(this)
 			.font_size("inherit")
-			.margin(0, 0, 5, 0)
+			.margin(0, 0, 7.5, 0)
 			.color("inherit")
 			.width("fit-content")
 			.ellipsis_overflow(true)
@@ -821,24 +833,13 @@ export class ExtendedSelectElement extends VStackElement {
 			.box_shadow("none")
 			.cursor("pointer")
 			.border_radius(0) // is required
-			// .on_focus(() => {
-			// 	if (this._missing !== true) {
-			// 		this.container.outline(`1px solid ${this._focus_color}`)
-			// 		this.container.box_shadow(`0 0 0 3px ${this._focus_color}80`)
-			// 	}
-			// })
-			// .on_blur(() => {
-			// 	if (this._missing !== true) {
-			// 		this.container.outline("0px solid transparent")
-			// 		this.container.box_shadow(`0 0 0 0px transparent`)
-			// 	}
-			// })
 
 		// The hstack container.
 		this.container = HStack(
 			VStack(
 				this.image,
 			)
+            .width("fit-content")
 			.height("1.6em")
 			.center_vertical(),
 			this.input,
@@ -853,7 +854,7 @@ export class ExtendedSelectElement extends VStackElement {
 		.transition("outline 0.2s ease-in-out, box-shadow 0.2s ease-in-out")
 		.outline("0px solid transparent")
 		.box_shadow(`0 0 0 0px transparent`)
-		.width(100%)
+		.width("100%")
 		.on_click(() => {
 			if (this.dropdown.is_hidden()) {
 				this.expand();
@@ -879,7 +880,7 @@ export class ExtendedSelectElement extends VStackElement {
 			.border_style("solid")
 			.border_color(this._border_color)
 			.box_shadow("0px 0px 5px #00000050")
-			.frame(100%, 100%)
+			.frame("100%", "100%")
 			.z_index(10)
 			.hide()
 
@@ -981,9 +982,9 @@ export class ExtendedSelectElement extends VStackElement {
 	missing(): boolean;
 	missing(to: boolean, err?: string): this;
 	missing(to?: boolean, err: string = "Incomplete field"): boolean | this {
-		if (to == null) { return this._missing; }
+        if (to == null) { return this.is_missing; }
 		else if (to === true) {
-			this._missing = true;
+            this.is_missing = true;
 			this.container.outline(`1px solid ${this._missing_color}`)
 			this.container.box_shadow(`0 0 0 3px ${this._missing_color}80`)
 			this.image.mask_color(this._missing_color)
@@ -992,7 +993,7 @@ export class ExtendedSelectElement extends VStackElement {
 				this.error.text(err);
 			}
 		} else {
-			this._missing = false;
+            this.is_missing = false;
 			this.container.outline("0px solid transparent")
 			this.container.box_shadow(`0 0 0 0px transparent`)
 			this.image.mask_color(this._mask_color)
@@ -1063,7 +1064,7 @@ export class ExtendedSelectElement extends VStackElement {
 
 		// The content.
 		const content = VStack()
-			.frame(100%)
+			.frame("100%")
 			.padding(5, 0)
 
 		// Add children.
@@ -1097,7 +1098,7 @@ export class ExtendedSelectElement extends VStackElement {
 
 			// Stack.
 			const stack = HStack(img, text)
-				.width(100%)
+				.width("100%")
 				.padding(5, 10)
 				.background("transparent")
 				.transition("background 0.2 ease-in-out")

package/frontend/src/ui/link.ts

@@ -4,22 +4,23 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 
 // Link.
-@Elements.register
+@Elements.create({
+    name: "AnchorElement",
+    default_style: {
+        "font-family": "inherit",
+        "font-size": "inherit",
+        "color": "inherit",
+        "text-decoration": "none",
+        "text-underline-position": "none",
+        "cursor": "pointer",
+        "outline": "none",
+        "border": "none",
+    },
+})
 export class AnchorElement extends VElementTagMap.a {
-
-	static default_style = {
-		"font-family": "inherit",
-		"font-size": "inherit",
-		"color": "inherit",
-		"text-decoration": "none",
-		"text-underline-position": "none",
-		"cursor": "pointer",
-		"outline": "none",
-		"border": "none",
-	};
 	
 	// Constructor.
 	constructor(text?: string, href?: string, alt?: string) {
@@ -44,17 +45,18 @@ export const NullAnchor = Elements.create_null(AnchorElement);
 declare module './any_element.d.ts' { interface AnyElementMap { AnchorElement: AnchorElement }}
 
 // Link.
-@Elements.register
+@Elements.create({
+    name: "LinkElement",
+    default_style: {
+        "font-family": "inherit",
+        "font-size": "1em",
+        "color": "rgb(85, 108, 214)",
+        "text-decoration": "underline",
+        "text-underline-position": "auto",
+        "cursor": "pointer",
+    },
+})
 export class LinkElement extends VElementTagMap.a {
-
-	static default_style = {
-		"font-family": "inherit",
-		"font-size": "1em",
-		"color": "rgb(85, 108, 214)",
-		"text-decoration": "underline",
-		"text-underline-position": "auto",
-		"cursor": "pointer",
-	};
 	
 	// Constructor.
 	constructor(text?: string, href?: string) {

package/frontend/src/ui/list.ts

@@ -4,13 +4,15 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 import { Scheme } from "../modules/scheme"
 
 // List item.
-@Elements.register
+@Elements.create({
+    name: "ListItemElement",
+})
 export class ListItemElement extends VElementTagMap.li {
-	
+    
 	// Constructor.
 	constructor(...content: any[]) {
 		
@@ -26,7 +28,9 @@ export const NullListItem = Elements.create_null(ListItemElement);
 declare module './any_element.d.ts' { interface AnyElementMap { ListItemElement: ListItemElement }}
 
 // Unordered List.
-@Elements.register
+@Elements.create({
+    name: "UnorderedListElement",
+})
 export class UnorderedListElement extends VElementTagMap.ul {
 	
 	// Constructor.
@@ -57,9 +61,11 @@ export const NullUnorderedList = Elements.create_null(UnorderedListElement);
 declare module './any_element.d.ts' { interface AnyElementMap { UnorderedListElement: UnorderedListElement }}
 
 // Ordered List.
-@Elements.register
+@Elements.create({
+    name: "OrderedListElement",
+})
 export class OrderedListElement extends VElementTagMap.ol {
-	
+
 	// Constructor.
 	constructor(items: (ListItemElement | any | any[])[] = []) {