@vandenberghinc/volt 1.1.4 → 1.1.6

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;

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() {