@vandenberghinc/volt 1.1.2

package/frontend/src/ui/form.ts

@@ -0,0 +1,208 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElement, isVElement } from "../elements/module.js"
+import { VStack, VStackElement } from "./stack"
+
+// Extended input.
+@Elements.register
+export class FormElement extends VStackElement {
+
+	// Macros.
+	#macro OnSubmit ((element: FormElement, data: Record<string, any>) => any)
+	#macro OnSubmitError ((element: FormElement, error: Error) => any)
+
+	// Attributes.
+	public _button?: VElement;
+	public fields: Record<string, any>;
+	public _on_submit?: OnSubmit;
+	public _on_submit_error?: OnSubmitError;
+	public _on_append_callback: (child: any) => void;
+
+	// Constructor.
+	constructor(...children: any[]) {
+
+		// Initialize super.
+		super();
+		this._init_derived({
+			derived: FormElement,
+		})
+
+		// Attributes.
+		this._button = undefined;
+		this.fields = {};
+
+		// Set the on append callback.
+		const _this = this;
+		this._on_append_callback = (child: any) => {
+			
+			// Initialize field.
+			if (child.element_type === "ExtendedInput" || child.element_type === "ExtendedSelect" || child.element_type === "CheckBox") {
+				const id = child.id();
+				if (id != null && id !== "") {
+					_this.fields[id] = child;
+					child.on_input(() => {
+						if (child.missing() === true) {
+							child.missing(false);
+						}
+					})
+					child.on_enter(() => _this.submit())
+				}
+			}
+
+			// Initialize button.
+			else if (/*_this._button === undefined &&*/ (child.element_type === "Button" || child.element_type === "LoaderButton") && child.on_click() == null) { //  && child.attr("submit_button") != "false"
+				if (_this._button !== undefined) {
+					_this._button.on_click(() => {})
+				}
+				_this.button(child);
+			}
+
+			// Parse children.
+			if (child.children != null) {
+				for (let i = 0; i < child.children.length; i++) {
+					_this._on_append_callback(child.children[i]);
+				}
+			}
+		};
+
+		// Append.
+		this.append(...children);
+	}
+
+	// Submit all input elements and get the data inside an object.
+	// When a required input is not filled in then an error is thrown.
+	// An object will be returned with each input's id as the key and the input's value as value.
+	// When an input field does not have an assigned id it will be skipped.
+	// Only supported extended input elements like `ExtendedInput`.
+	// @ts-expect-error
+	data() : Record<string, any> {
+		const params: Record<string, any> = {};
+	    let first_error;
+	    const ids = Object.keys(this.fields);
+	    for (let i = 0; i < ids.length; i++) {
+	    	try {
+	    		const id = ids[i];
+	    		const element = this.fields[id];
+		    	if (element.required() !== true) {
+		    		params[id] = element.value();
+		    	} else {
+		    		params[id] = element.submit();
+		    	}
+		    } catch(e) {
+		    	// always use a try catch to call submit on all inputs to set invalid/missing fields.
+		    	if (first_error === undefined) {
+		    		first_error = e;
+		    	}
+	        }
+	    }
+	    if (first_error) {
+	    	throw first_error;
+	    }
+	    return params;
+	}
+
+	// Submit.
+	async submit(): Promise<this> {
+
+		// Init.
+		if (this._button === undefined) {
+			throw Error("No submit button has been found, add a button to the form or attach a button using \"Form.button()\".");
+		}
+		if ((this._button as any).show_loader !== undefined) {
+			(this._button as any).show_loader();
+		}
+
+		// Submit.
+		try {
+			const data = this.data();
+			if (this._on_submit !== undefined) {
+				const res = this._on_submit(this, data);
+				if (res instanceof Promise) {
+					await res;
+				}
+			}
+			if ((this._button as any).hide_loader !== undefined) {
+				(this._button as any).hide_loader();
+			}
+		}
+
+		// Handle rror.
+		catch (error: any) {
+			if (!(error instanceof Error)) {
+				error = new Error(error.toString());
+			}
+
+			// Defined callback.
+			if (this._on_submit_error !== undefined) {
+				const res = this._on_submit_error(this, error as Error);
+				if (res instanceof Promise) {
+					await res;
+				}
+				if ((this._button as any).hide_loader !== undefined) {
+					(this._button as any).hide_loader();
+				}
+			}
+
+			// No callback so rethrow.
+			else {
+				if ((this._button as any).hide_loader !== undefined) {
+					(this._button as any).hide_loader();
+				}
+				throw error;
+			}
+		}
+
+		return this;
+	}
+
+	// Set the submit button, by default the last button without a defined callback is used as the submit button.
+	button<T = undefined | HTMLElement | VElement>() : T;
+	button(element_or_id: VElement | string) : this;
+	button<T = undefined | HTMLElement | VElement>(element_or_id?: VElement | string) : this | T {
+		if (element_or_id == null) { return this._button as T; }
+		else if (typeof element_or_id === "string") {
+			const node = document.getElementById(element_or_id);
+			if (!isVElement(node)) {
+				throw Error(`Specified element is not a VElement.`);
+			}
+			element_or_id = node as unknown as VElement;
+			if (element_or_id == null) {
+				throw Error(`Unable to find element "${element_or_id}".`);
+			}
+		}
+		this._button = element_or_id as any as VElement;
+		const _this = this;
+		this._button.on_click(() => {
+			_this.submit().catch(console.error)
+		})
+		return this;
+	}
+
+	// Set the on submit callback, the params for the callback are `(element, data) => {}`.
+	// @ts-expect-error
+	on_submit() : undefined | OnSubmit
+	// @ts-expect-error
+	on_submit(callback: OnSubmit) : this;
+	// @ts-expect-error
+	on_submit(callback?: OnSubmit) : this | undefined | OnSubmit {
+		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 {
+		if (callback == null) { return this._on_submit_error; }
+		this._on_submit_error = callback;
+		return this;
+	}
+}
+export const Form = Elements.wrapper(FormElement);
+export const NullForm = Elements.create_null(FormElement);
+declare module './any_element.d.ts' { interface AnyElementMap { FormElement: FormElement }}

package/frontend/src/ui/frame_modes.ts

@@ -0,0 +1,140 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements } from "../elements/module.js"
+
+// Nodes type.
+export class FrameNodesType extends Array {
+	constructor(...children: any[]) {
+		super(...children)
+	}
+}
+export const FrameNodes = Elements.wrapper(FrameNodesType);
+export const NullFrameNodes = Elements.create_null(FrameNodesType);
+
+type OnSet = (mode: string, nodes: FrameNodesType) => any
+
+// Frame mode used to switch easily between frames.
+/*	@docs:
+	@title: Frame Modes
+	@descr:
+		Frame modes used to switch easily between frame nodes.
+
+		Initialize the class with the wanted frame modes, then call `.exec(MyMode.my_mode.push)` on the nodes.
+
+		Afterwards the mode can be set using `MyMode.set("my_mode")`.
+ */
+export class FrameModesType {
+
+	// Attributes.
+	public modes: Record<string, FrameNodesType> = {};
+	public active?: string;
+	public _on_set?: OnSet;
+
+	// Provide mode names as args: `sign_in, sign_up`.
+	constructor(...modes: string[]) {
+		for (const mode of modes) {
+			if (this.active == null) {
+				this.active = mode;
+			}
+			this.modes[mode] = FrameNodes();
+		}
+	}
+
+	// Get.
+	get(mode: string) : FrameNodesType {
+		const nodes = this.modes[mode];
+		if (nodes === undefined) {
+			throw new Error(`Requested mode "${mode}" does not exist.`);
+		}
+		return nodes as FrameNodesType;
+	}
+
+	// Set mode.
+	set(mode: string) : this {
+		this.active = mode;
+		for (const m of Object.keys(this.modes)) {
+			if (m === mode) {
+				for (const node of this.modes[m]) {
+					node.show();
+				}
+			} else {
+				for (const node of this.modes[m]) {
+					node.hide();
+				}
+			}
+		}
+		if (this._on_set !== undefined) {
+			this._on_set(mode, this[mode]);
+		}
+		return this;	
+	}
+	switch(mode: string) : this { return this.set(mode); }
+
+	// On switch.
+	on_set() : undefined | OnSet;
+	on_set(callback: OnSet) : this;
+	on_set(callback?: OnSet) : this | undefined | OnSet {
+		if (callback == null) { return this._on_set; }
+		this._on_set = callback;
+		return this;
+	}
+	on_switch() : undefined | OnSet;
+	on_switch(callback: OnSet) : this;
+	on_switch(callback?: OnSet) : this | undefined | OnSet {
+		if (callback == null) { return this._on_set; }
+		this._on_set = callback;
+		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;
+	}
+}
+Elements.extend({
+
+	/**
+	 * @docs:
+	 * @title: Frame Mode
+	 * @desc: Adds a node to a FrameMode. Can accept a single argument to push the current instance or two arguments to specify a FrameModesType and an index.
+	 * @param:
+	 *     @name: args
+	 *     @descr: Arguments to determine the operation to perform for adding a node.
+	 * @return:
+	 *     @description Returns the instance of the element for chaining.
+	 */
+	frame_mode(this, ...args) {
+		if (args.length === 1) {
+			args[0].push(this);
+		} else if (args.length === 2 && args[0] instanceof FrameModesType) {
+			const frames_mode = args[0];
+			const mode_name = args[1];
+			if (mode_name !== frames_mode.active) {
+				this.hide();
+			}
+			frames_mode.modes[mode_name].push(this);
+		}
+		return this;
+	}
+
+});
+
+
+// @test
+// import { Form } from "./form"
+// Form()
+// 	.frame_mode(FrameModes("test"), "test")
+// 	.on_submit(((e) => {}) as any)
+// Form()
+// 	.frame_mode(FrameModes("test"), "test")
+// 	.on_submit2(((e) => {}) as any)
+

package/frontend/src/ui/google_map.ts

@@ -0,0 +1,70 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js"
+import { Utils } from "../modules/utils.js"
+import { Google } from "../modules/google"
+
+// GoogleMap.
+@Elements.register
+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({
+		location,
+		mode = "place",
+		api_key,
+	}: {
+		location: string,
+		mode: string,
+		api_key?: string,
+	}) {
+		
+		// Initialize base class.
+		super({
+			derived: GoogleMapElement,
+		});
+		
+		// Set source.
+		this.src("https://www.google.com/maps/embed/v1/" + mode + "?key=" + (api_key ?? Google.cloud.api_key) + "&" + Utils.url_encode({"q": location.replaceAll(' ', '+')}));
+	}
+	
+	// Update.
+	// Needs to be called after initialing or changing the loader.
+	update() : this {
+		this.remove_children();
+		const children_style = {
+			"width": "calc(" + this.style.width + " * (64.0px / 80.0px))",
+			"height": "calc(" + this.style.height + " * (64.0px / 80.0px))",
+			"margin": "calc(" + this.style.width + " * (8.0px / 80.0px))",
+			"border": "calc(" + this.style.width + " * (8.0px / 80.0px)) solid " + this.style.background,
+			"border-color": this.style.background + " transparent transparent transparent",
+		}
+		for (let i = 0; i < 4; i++) {
+			let e = document.createElement("div");
+			for (let attr in children_style) {
+				e.style[attr] = children_style[attr];
+			}
+			this.append(e);
+		}
+		return this;
+	}		
+}
+export const GoogleMap = Elements.wrapper(GoogleMapElement);
+export const NullGoogleMap = Elements.create_null(GoogleMapElement);
+declare module './any_element.d.ts' { interface AnyElementMap { GoogleMapElement: GoogleMapElement }}

package/frontend/src/ui/gradient.ts

@@ -0,0 +1,73 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js"
+import { Utils } from "../modules/utils.js"
+import { GradientType } from "../types/gradient.js"
+
+export { GradientType };
+export const Gradient = Elements.wrapper(GradientType);
+export const NullGradient = Elements.create_null(GradientType);
+
+// Gradient border.
+@Elements.register
+export class GradientBorderElement extends VElementTagMap.div {
+
+	static default_style = {
+		"--child-border-width": "1px",
+		"--child-border-radius": "10px",
+		"--child-border-color": "black",
+	};
+
+	// Constructor.
+	constructor() {
+		
+		// Initialize base classes.
+		super({
+			derived: GradientBorderElement,
+		});
+			
+		// Styling.
+		this
+		.content("")
+		.position("absolute")
+		// .z_index(-1)
+		.inset(0)
+		.padding(GradientBorderElement.default_style["--child-border-width"] ?? "")
+		.border_radius(GradientBorderElement.default_style["--child-border-radius"] ?? "")
+		.background(GradientBorderElement.default_style["--child-border-color"] ?? "")
+		.mask("linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)")
+		.mask_composite("exclude")
+		// .mask_composite((navigator.userAgent.includes("Firefox") || navigator.userAgent.includes("Mozilla")) ? "exclude" : "xor")
+		.styles({
+			"-webkit-mask": "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+			"-webkit-mask-composite": (navigator.userAgent.includes("Firefox") || navigator.userAgent.includes("Mozilla")) ? "exclude" : "xor",
+		})
+	}
+
+	// Border color.
+	border_color() : string;
+	border_color(val: string) : this;
+	border_color(val?: string) : string | this {
+		if (val === undefined) { return this.style.background ?? ""; }
+		this.style.background = val;
+		return this;
+	}
+
+	// Set the border width.
+	border_width() : string;
+	border_width(value: number | string) : this;
+	border_width(value?: number | string) : string | this {
+		if (value == null) {
+			return this.padding() ?? "";
+		}
+		this.padding(value);
+		return this;
+	}
+}
+export const GradientBorder = Elements.wrapper(GradientBorderElement);
+export const NullGradientBorder = Elements.create_null(GradientBorderElement);
+declare module './any_element.d.ts' { interface AnyElementMap { GradientBorderElement: GradientBorderElement }}