@vandenberghinc/volt 1.1.4 → 1.1.6

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;