@vandenberghinc/volt 1.1.5 → 1.1.7

package/frontend/src/ui/frame_modes.ts

@@ -4,18 +4,16 @@
  */
 
 // Imports.
-import { Elements } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, AppendType, VBaseElements } from "../elements/module.js"
 
 // Nodes type.
-export class FrameNodesType extends Array {
-	constructor(...children: any[]) {
+export class FrameNodes extends Array<VElement> {
+    constructor(...children: VElement[]) {
 		super(...children)
 	}
 }
-export const FrameNodes = Elements.wrapper(FrameNodesType);
-export const NullFrameNodes = Elements.create_null(FrameNodesType);
 
-type OnSet = (mode: string, nodes: FrameNodesType) => any
+type OnSet = (mode: string, nodes: FrameNodes) => any
 
 // Frame mode used to switch easily between frames.
 /*	@docs:
@@ -27,10 +25,10 @@ type OnSet = (mode: string, nodes: FrameNodesType) => any
 
 		Afterwards the mode can be set using `MyMode.set("my_mode")`.
  */
-export class FrameModesType {
+export class FrameModes {
 
 	// Attributes.
-	public modes: Record<string, FrameNodesType> = {};
+	public modes: Record<string, FrameNodes> = {};
 	public active?: string;
 	public _on_set?: OnSet;
 
@@ -40,17 +38,17 @@ export class FrameModesType {
 			if (this.active == null) {
 				this.active = mode;
 			}
-			this.modes[mode] = FrameNodes();
+			this.modes[mode] = new FrameNodes();
 		}
 	}
 
 	// Get.
-	get(mode: string) : FrameNodesType {
+	get(mode: string) : FrameNodes {
 		const nodes = this.modes[mode];
 		if (nodes === undefined) {
 			throw new Error(`Requested mode "${mode}" does not exist.`);
 		}
-		return nodes as FrameNodesType;
+		return nodes as FrameNodes;
 	}
 
 	// Set mode.
@@ -90,14 +88,12 @@ export class FrameModesType {
 		return this;
 	}
 }
-export const FrameModes = Elements.wrapper(FrameModesType);
-export const NullFrameModes = Elements.create_null(FrameModesType);
 
 // Extend VElement.
 declare global {
 	interface VElementExtensions {
-	    frame_mode(frame_mode: FrameNodesType): this;
-		frame_mode(frame_modes: FrameModesType, mode_name: string): this;
+	    frame_mode(frame_mode: FrameNodes): this;
+		frame_mode(frame_modes: FrameModes, mode_name: string): this;
 	}
 }
 Elements.extend({
@@ -112,10 +108,10 @@ Elements.extend({
 	 * @return:
 	 *     @description Returns the instance of the element for chaining.
 	 */
-	frame_mode(this, ...args) {
+	frame_mode(this: VElement, ...args) {
 		if (args.length === 1) {
 			args[0].push(this);
-		} else if (args.length === 2 && args[0] instanceof FrameModesType) {
+		} else if (args.length === 2 && args[0] instanceof FrameModes) {
 			const frames_mode = args[0];
 			const mode_name = args[1];
 			if (mode_name !== frames_mode.active) {

package/frontend/src/ui/google_map.ts

@@ -4,25 +4,27 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 import { Utils } from "../modules/utils.js"
 import { Google } from "../modules/google"
 
 // GoogleMap.
-@Elements.register
+@Elements.create({
+    name: "GoogleMapElement",
+    default_style: {
+        "border": "0",
+    },
+    default_attributes: {
+        "width": "100%",
+        "height": "100%",
+        "frameborder": "0",
+        "style": "border:0",
+        "referrerpolicy": "no-referrer-when-downgrade",
+        "allowfullscreen": "true",
+    },
+})
 export class GoogleMapElement extends VElementTagMap.iframe {
 
-	static default_style = {
-		"border": "0",
-	};
-	static default_attributes = {
-		"width": "100%",
-		"height": "100%",
-		"frameborder": "0",
-		"style": "border:0",
-		"referrerpolicy": "no-referrer-when-downgrade",
-		"allowfullscreen": "true",
-	};
 	
 	// Constructor.
 	constructor({

package/frontend/src/ui/gradient.ts

@@ -4,7 +4,7 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 import { Utils } from "../modules/utils.js"
 import { GradientType } from "../types/gradient.js"
 
@@ -13,15 +13,16 @@ export const Gradient = Elements.wrapper(GradientType);
 export const NullGradient = Elements.create_null(GradientType);
 
 // Gradient border.
-@Elements.register
+@Elements.create({
+    name: "GradientBorderElement",
+    default_style: {
+        "--child-border-width": "1px",
+        "--child-border-radius": "10px",
+        "--child-border-color": "black",
+    },
+})
 export class GradientBorderElement extends VElementTagMap.div {
 
-	static default_style = {
-		"--child-border-width": "1px",
-		"--child-border-radius": "10px",
-		"--child-border-color": "black",
-	};
-
 	// Constructor.
 	constructor() {
 		

package/frontend/src/ui/image.ts

@@ -5,21 +5,22 @@
 
 // Imports.
 import { Utils } from "../modules/utils.js"
-import { Elements, VElementTagMap, VDivElement, VAnchorElement } from "../elements/module.js"
-import { Statics } from "../modules/statics"
-import { Settings } from "../modules/settings"
-import { AnchorElement } from "./link"
-import { VStack, VStackElement } from "./stack"
+import { Elements, VElement, VElementBaseSignature, VElementTagMap, VDivElement, VAnchorElement } from "../elements/module.js"
+import { Statics } from "../modules/statics.js"
+import { Settings } from "../modules/settings.js"
+import { AnchorElement } from "./link.js"
+import { VStack, VStackElement } from "./stack.js"
 
 // Image.
-@Elements.register
-export class ImageElement extends VElementTagMap.img {
-
-	static default_style = {
-		"margin": "0px",
-		"padding": "0px",
-		"object-fit": "cover",
-	};
+@Elements.create({
+    name: "ImageElement",
+    default_style: {
+        "margin": "0px",
+        "padding": "0px",
+        "object-fit": "cover",
+    },
+})
+export class ImageElement extends VElementTagMap.img {;
 
 	// Static attributes.
 	static default_alt?: string;
@@ -133,9 +134,9 @@ export class ImageElement extends VElementTagMap.img {
 	// }
 
 	// Height, purely for safari.
-	height(): string
-	height(value: string, check_attribute?: boolean): this;
-	height(value?: string, check_attribute: boolean = true): this | string {
+	height(): string | number
+	height(value: string | number, check_attribute?: boolean): this;
+	height(value?: string | number, check_attribute: boolean = true): this | string | number {
 		if (this._e === undefined) {
 			return super.height(value as any, check_attribute);
 		}
@@ -151,9 +152,9 @@ export class ImageElement extends VElementTagMap.img {
 		}
 		return this;
 	}
-	min_height(): string
-	min_height(value: string): this;
-	min_height(value?: string): this | string {
+	min_height(): string | number
+	min_height(value: string | number): this;
+	min_height(value?: string | number): this | string | number {
 		if (this._e === undefined) {
 			return super.min_height(value as any);
 		}
@@ -168,9 +169,9 @@ export class ImageElement extends VElementTagMap.img {
 		}
 		return this;
 	}
-	max_height(): string
-	max_height(value: string): this;
-	max_height(value?: string): this | string {
+	max_height(): string | number
+	max_height(value: string | number): this;
+	max_height(value?: string | number): this | string | number {
 		if (this._e === undefined) {
 			return super.max_height(value as any);
 		}
@@ -188,8 +189,8 @@ export class ImageElement extends VElementTagMap.img {
 
 	// Width, purely for safari.
 	width(): string | number;
-	width(value: string, check_attribute?: boolean): this;
-	width(value?: string, check_attribute: boolean = true): this | number | string {
+	width(value: string | number, check_attribute?: boolean): this;
+	width(value?: string | number, check_attribute: boolean = true): this | number | string {
 		if (this._e === undefined) {
 			return super.width(value as any, check_attribute);
 		}
@@ -205,9 +206,9 @@ export class ImageElement extends VElementTagMap.img {
 		}
 		return this;
 	}
-	min_width(): string
-	min_width(value: string): this;
-	min_width(value?: string): this | string {
+	min_width(): string | number
+	min_width(value: string | number): this;
+	min_width(value?: string | number): this | string | number {
 		if (this._e === undefined) {
 			return super.min_width(value as any);
 		}
@@ -222,9 +223,9 @@ export class ImageElement extends VElementTagMap.img {
 		}
 		return this;
 	}
-	max_width(): string
-	max_width(value: string): this;
-	max_width(value?: string): this | string {
+	max_width(): string | number
+	max_width(value: string | number): this;
+	max_width(value?: string | number): this | string | number {
 		if (this._e === undefined) {
 			return super.max_width(value as any);
 		}
@@ -276,17 +277,10 @@ declare module './any_element.d.ts' { interface AnyElementMap { ImageElement: Im
 // }
 
 // AnchorImage.
-@Elements.register
-export class AnchorImageElement extends AnchorElement {
-
-	#macro ForwardFuncToImg(attr_name) \
-		attr_name(): string; \
-		attr_name(value: string): this; \
-		attr_name(value?: string): this | string { if (value == null) { return this.image.attr_name(); } this.image.attr_name(value); return this; }
-	#macro ForwardFuncToImgNr(attr_name) \
-		attr_name(): string | number; \
-		attr_name(value: string): this; \
-		attr_name(value?: string): this | string | number { if (value == null) { return this.image.attr_name(); } this.image.attr_name(value); return this; }
+@Elements.create({
+    name: "AnchorImageElement",
+})
+export class AnchorImageElement extends (AnchorElement as any as VElementBaseSignature) {
 
 	// Default styling.
 	public image: ImageElement;
@@ -296,7 +290,7 @@ export class AnchorImageElement extends AnchorElement {
 
 		// Initialize base classes.
 		super(href, alt);
-		this._init_derived({
+		this._init({
 			derived: AnchorImageElement,
 		})
 
@@ -315,15 +309,41 @@ export class AnchorImageElement extends AnchorElement {
 	}
 
 	// ImageElement alias functions.
-	#ForwardFuncToImg(src)
-	#ForwardFuncToImg(alt)
-	// ForwardFuncToImg(completed)
-	#ForwardFuncToImg(height)
-	#ForwardFuncToImg(min_height)
-	#ForwardFuncToImg(max_height)
-	#ForwardFuncToImgNr(width)
-	#ForwardFuncToImg(min_width)
-	#ForwardFuncToImg(max_width)
+    src(): string;
+    src(value: string): this;
+    src(value?: string): this | string { if (value == null) { return this.image.src(); } this.image.src(value); return this; }
+
+    alt(): string;
+    alt(value: string): this;
+    alt(value?: string): this | string { if (value == null) { return this.image.alt(); } this.image.alt(value); return this; }
+
+    // completed(): string;
+    // completed(value: string): this;
+    // completed(value?: string): this | string { if (value == null) { return this.image.completed(); } this.image.completed(value); return this; }
+
+    height(): string | number;
+    height(value: string | number): this;
+    height(value?: string | number): this | string | number { if (value == null) { return this.image.height(); } this.image.height(value); return this; }
+
+    min_height(): string | number;
+    min_height(value: string | number): this;
+    min_height(value?: string | number): this | string | number { if (value == null) { return this.image.min_height(); } this.image.min_height(value); return this; }
+
+    max_height(): string | number;
+    max_height(value: string | number): this;
+    max_height(value?: string | number): this | string | number { if (value == null) { return this.image.max_height(); } this.image.max_height(value); return this; }
+
+    width(): string | number;
+    width(value: string | number): this;
+    width(value?: string | number): this | string | number { if (value == null) { return this.image.width(); } this.image.width(value); return this; }
+
+    min_width(): string | number;
+    min_width(value: string | number): this;
+    min_width(value?: string | number): this | string | number { if (value == null) { return this.image.min_width(); } this.image.min_width(value); return this; }
+
+    max_width(): string | number;
+    max_width(value: string | number): this;
+    max_width(value?: string | number): this | string | number { if (value == null) { return this.image.max_width(); } this.image.max_width(value); return this; }
 	
 	// @ts-ignore
 	loading(): string;
@@ -350,25 +370,26 @@ declare module './any_element.d.ts' { interface AnyElementMap { AnchorImageEleme
 
 
 // ImageMask.
-@Elements.register
+@Elements.create({
+    name: "ImageMaskElement",
+    default_style: {
+        "margin": "0px",
+        "padding": "0px",
+        "object-fit": "cover",
+        "display": "inline-block",
+
+        // Anchor.
+        "font-family": "inherit",
+        "font-size": "inherit",
+        "color": "inherit",
+        "text-decoration": "none",
+        "text-underline-position": "none",
+        "outline": "none",
+        "border": "none",
+    },
+})
 export class ImageMaskElement extends VElementTagMap.div {
 
-	static default_style = {
-		"margin": "0px",
-		"padding": "0px",
-		"object-fit": "cover",
-		"display": "inline-block",
-
-		// Anchor.
-		"font-family": "inherit",
-		"font-size": "inherit",
-		"color": "inherit",
-		"text-decoration": "none",
-		"text-underline-position": "none",
-		"outline": "none",
-		"border": "none",
-	};
-
 	// Attributes.
 	public mask_child: VStackElement;
 	public _img_src?: string;
@@ -474,26 +495,27 @@ export const NullImageMask = Elements.create_null(ImageMaskElement);
 declare module './any_element.d.ts' { interface AnyElementMap { ImageMaskElement: ImageMaskElement }}
 
 // Exact copy of image mask.
-@Elements.register
+@Elements.create({
+    name: "AnchorImageMaskElement",
+    default_style: {
+        "margin": "0px",
+        "padding": "0px",
+        "object-fit": "cover",
+        "display": "inline-block",
+
+        // Anchor.
+        "font-family": "inherit",
+        "font-size": "inherit",
+        "color": "inherit",
+        "text-decoration": "none",
+        "text-underline-position": "none",
+        "cursor": "pointer",
+        "outline": "none",
+        "border": "none",
+    },
+})
 export class AnchorImageMaskElement extends VElementTagMap.a {
 
-	static default_style = {
-		"margin": "0px",
-		"padding": "0px",
-		"object-fit": "cover",
-		"display": "inline-block",
-
-		// Anchor.
-		"font-family": "inherit",
-		"font-size": "inherit",
-		"color": "inherit",
-		"text-decoration": "none",
-		"text-underline-position": "none",
-		"cursor": "pointer",
-		"outline": "none",
-		"border": "none",
-	};
-
 	// Attributes.
 	public mask_child: VStackElement;
 	public _img_src?: string;