@vandenberghinc/volt 1.1.2

package/frontend/src/types/global.d.ts

@@ -0,0 +1,4 @@
+
+// None type.
+type none = null | undefined;
+type undefstrnr = null | undefined | string | number;

package/frontend/src/types/gradient.ts

@@ -0,0 +1,87 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Gradient.
+/*	@docs:
+ *	@nav: Frontend
+ *	@chapter: Styling
+ *	@title: Gradient
+ *	@description: 
+ *		Create a gradient object.
+ *
+ *		Can also be constructed with wrapper function `Gradient`.
+ *	@return: 
+ *		Returns the `GradientType` object.
+ *	@parameter:
+ *		@name: ...args
+ *		@description: 
+ *			The arguments can either be of length 1, containing the full gradient string `new GradientType ("linear-gradient(...)")`.
+ *			Or the arguments can be as `new GradientType("linear", "black", "0%", "white", "100%")`.
+ */ 
+export class GradientType {
+
+	public gradient?: string;
+	public type?: string;
+	public degree?: string;
+	public colors?: {color: string, stop?: string}[];
+
+	// Constructor.
+	constructor(gradient: string);
+	constructor(type: string, ...colors: string[]);
+	constructor(...args) {
+		if (args.length === 1) {
+			this.gradient = args[0];
+		}
+		else if (args.length > 1) {
+			this.type = args[0];
+			this.colors = [];
+			for (let i = 1; i < args.length; i++) {
+				if (args[i].endsWith("deg")) {
+					this.degree = args[i];
+					continue;
+				}
+				if (typeof args[i+1] === "string" && args[i+1].includes("%")) {
+					this.colors.push({
+						color: args[i],
+						stop: args[i + 1],
+					})
+					i++;
+				} else {
+					this.colors.push({
+						color: args[i],
+						stop: undefined,
+					})
+				}
+			}
+		} else {
+			console.error("Invalid number of arguments for class \"Gradient()\".");
+		}
+	}
+
+	// Cast to string.
+	toString() :  string {
+		if (this.gradient == null && this.colors !== undefined) {
+			this.gradient = `${this.type}-gradient(`;
+			if (this.degree) {
+				this.gradient += this.degree + ", ";
+			}
+			for (let i = 0; i < this.colors.length; i++) {
+				this.gradient += this.colors[i].color;
+				this.gradient += " ";
+				let stop = this.colors[i].stop;
+				if (typeof stop === "number" && stop <= 1.0) {
+					stop = (stop * 100) + "%";
+				}
+				this.gradient += stop;
+				if (i + 1 < this.colors.length) {
+					this.gradient += ", ";
+				}
+			}
+			this.gradient += ")";
+			return this.gradient;
+		}
+		return this.gradient ?? "";
+	}	
+};

package/frontend/src/ui/any_element.d.ts

@@ -0,0 +1,5 @@
+// 1) Declare a normal exported interface
+export interface AnyElementMap {}
+
+// 2) A union type that picks all values in AnyElementMap
+export type AnyElement = AnyElementMap[keyof AnyElementMap];

package/frontend/src/ui/border_button.ts

@@ -0,0 +1,320 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VAnchorElement, VDivElement, VDiv, VElementTagMap } from "../elements/module.js";
+
+// BorderButton.
+/**
+ * Supports a gradient color for the border combined with border radius.
+ * Warning: this class is still experimental and may be subject to future change.
+ */
+@Elements.register
+export class BorderButtonElement extends VElementTagMap.a {
+
+	static default_style = {
+		"margin": "0px 0px 0px 0px",
+		"display": "inline-block",
+		"color": "inherit",
+		"text-align": "center",
+		"cursor": "pointer",
+		"position": "relative",
+		"z-index": "0",
+		"background": "none",
+		"user-select": "none",
+		"outline": "none",
+		"border": "none",
+		"text-decoration": "none",
+		// Custom.
+		"--child-color": "black",
+		"--child-background": "black",
+		"--child-border-width": "2px",
+		"--child-border-radius": "10px",
+		"--child-padding": "5px 10px 5px 10px",
+	};
+	static default_events = {
+		"onmousedown": function (this: any): void {
+			this.style.filter = "brightness(80%)";
+		},
+		"onmouseover": function (this: any): void {
+			this.style.filter = "brightness(90%)";
+		},
+		"onmouseup": function (this: any): void {
+			this.style.filter = "brightness(100%)";
+		},
+		"onmouseout": function (this: any): void {
+			this.style.filter = "brightness(100%)";
+		},
+	};
+
+	public nodes: {
+	    border: VDivElement;
+	    text: VDivElement;
+	    [key: string]: any;
+	}
+
+	/**
+	 * @docs:
+	 * @title: Constructor
+	 * @desc: Initializes a new instance of the BorderButton element with the provided text.
+	 * @param:
+	 *     @name: text
+	 *     @descr: The text to be displayed on the BorderButton.
+	 *     @type: string
+	 * @return:
+	 *     @type: void
+	 *     @description This constructor does not return a value.
+	 */
+	constructor(text: string = "") {
+		
+		// Initialize base classes.
+		super({
+			derived: BorderButtonElement,
+		});
+
+		// Set nodes type.
+		this.nodes = {
+			border: VDiv(),
+			text: VDiv(),
+		};
+		
+		// Set default styling.
+		// let styles = { ...BorderButton.default_style };
+		// delete styles["--child-color"];
+		// delete styles["--child-background"];
+		// delete styles["--child-border-width"];
+		// delete styles["--child-padding"];
+		// delete styles["--child-background-image"];
+		// delete styles["--child-background-clip"];
+		// delete styles["--child-webkit-background-clip"];
+		// this.styles(styles);
+
+		// Border child so it can support border gradients.
+		this.nodes.border
+			.content("")
+			.position("absolute")
+			// .z_index(-1)
+			.inset(0)
+			.padding(BorderButtonElement.default_style["--child-border-width"])
+			.border_radius(BorderButtonElement.default_style["--child-border-radius"])
+			.background(BorderButtonElement.default_style["--child-background"])
+			.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",
+			})
+
+		// Text child.
+		// do not use a Text object since inheritance of text styling is required.
+		this.nodes.text
+			.color(BorderButtonElement.default_style["--child-color"])
+			.append(text);
+		if (BorderButtonElement.default_style["--child-color"] == "transparent") {
+			this.nodes.text.style.backgroundImage = BorderButtonElement.default_style["--child-background-image"];
+	    	this.nodes.text.style.backgroundClip = BorderButtonElement.default_style["--child-background-clip"];
+	    	this.nodes.text.style["-webkit-background-clip"] = BorderButtonElement.default_style["--child-webkit-background-clip"];
+	    }
+
+	    // Append.
+		this.append(this.nodes.border, this.nodes.text);
+	}
+
+	/**
+	 * @docs:
+	 * @title: Gradient
+	 * @desc: Set the gradient color for the border element. If no value is provided, it retrieves the current background.
+	 * @param:
+	 *     @name: value
+	 *     @descr: The color value to set for the gradient.
+	 *     @type: string, null
+	 * @return:
+	 *     @type: string | this
+	 *     @description When an argument is passed this function returns the instance of the element for chaining. Otherwise, it returns the current background value.
+	 * @funcs: 2
+	 */
+	gradient(): string;
+	gradient(value: string | null): this;
+	gradient(value?: string | null): string | this {
+		if (value == null) {
+			return this.nodes.border.background();
+		}
+		this.nodes.border.background(value);
+		return this;
+	}
+
+	/**
+	 * @docs:
+	 * @title: Border Color
+	 * @desc: Sets the border color of the element. If no value is provided, it retrieves the current border color.
+	 * @param:
+	 *     @name: value
+	 *     @descr: The color value to set for the border.
+	 *     @type: string, null
+	 * @return:
+	 *     @type: string | this
+	 *     @description When an argument is passed, this function returns the instance of the element for chaining. Otherwise, it returns the current border color.
+	 * @funcs: 2
+	 */
+	border_color(): string;
+	border_color(value: string | null): this;
+	border_color(value?: string | null): string | this {
+		if (value == null) {
+			return this.nodes.border.background();
+		}
+		this.nodes.border.background(value);
+		return this;
+	}
+
+	/**
+	 * @docs:
+	 * @title: Border Width
+	 * @desc: Sets or retrieves the border width of the element. If no argument is passed, it returns the current padding.
+	 * @param:
+	 *     @name: value
+	 *     @descr: The value of the border width to set.
+	 *     @type: number, null
+	 * @return:
+	 *     @type: number | this
+	 *     @description When an argument is passed, this function returns the instance of the element for chaining. Otherwise, it returns the current border width.
+	 * @funcs: 2
+	 */
+	border_width(): string;
+	border_width(value: string | number): this;
+	border_width(value?: string | number | null): string | this {
+		if (value == null) {
+			return this.nodes.border.padding();
+		}
+		this.nodes.border.padding(value);
+		return this;
+	}
+
+	/**
+	 * @docs:
+	 * @title: Border Radius
+	 * @desc: Sets the border radius for the element. If no value is provided, it retrieves the current border radius.
+	 * @param:
+	 *     @name: value
+	 *     @descr: The value for the border radius to set.
+	 *     @type: number, null
+	 * @return:
+	 *     @type: number | this
+	 *     @description Returns the current border radius if no argument is passed, otherwise returns the instance for chaining.
+	 * @funcs: 2
+	 */
+	border_radius(): string;
+	border_radius(value: string | number): this;
+	border_radius(value?: string | number | null): string | this {
+		if (value == null) {
+			return this.nodes.border.border_radius();
+		}
+		super.border_radius(value);
+		this.nodes.border.border_radius(value);
+		return this;
+	}
+
+	/**
+	 * @docs:
+	 * @title: Color
+	 * @desc: Sets or retrieves the color of the child text. When a value is provided, it updates the color; when no value is provided, it returns the current color.
+	 * @param:
+	 *     @name: value
+	 *     @descr: The color value to set for the child text.
+	 *     @type: string, null
+	 * @return:
+	 *     @type: string | this
+	 *     @description Returns the current color if no argument is passed; otherwise, returns the instance of the element for chaining.
+	 * @funcs: 2
+	 */
+	color(): string;
+	color(value: string): this;
+	color(value?: string | null): string | this {
+		if (value == null) {
+			return this.nodes.text.color() ?? "";
+		}
+		this.nodes.text.color(value);
+		return this;
+	}
+
+	/**
+	 * @docs:
+	 * @title: Styles
+	 * @desc: Retrieves or sets the styling attributes for the element. If no argument is provided, it computes styles based on child elements.
+	 * @param:
+	 *     @name: style_dict
+	 *     @descr: A dictionary of styles to set. If null, the method computes styles based on child elements.
+	 *     @type: object | null
+	 * @return:
+	 *     @type: object
+	 *     @description Returns the computed styles when no argument is passed, or the result of the super method when an argument is provided.
+	 * @funcs: 2
+	 */
+	styles(): Record<string, string>;
+	styles(style_dict: Record<string, any>): this;
+	styles(style_dict?: Record<string, any>): Record<string, string> | this {
+		if (style_dict == null) {
+			let styles = super.styles();
+			styles["--child-background"] = this.nodes.border.background();
+			styles["--child-border-width"] = this.nodes.border.padding();
+			styles["--child-border-radius"] = this.nodes.border.border_radius();
+			styles["--child-color"] = this.nodes.text.color();
+			styles["--child-background-image"] = this.nodes.text.style.backgroundImage;
+			styles["--child-background-clip"] = this.nodes.text.style.backgroundClip;
+			styles["--child-webkit-background-clip"] = this.nodes.text.style["-webkit-background-clip"];
+			return styles;
+		} else {
+			return super.styles(style_dict);
+		}
+	}
+
+	/**
+	 * @docs:
+	 * @title: Text
+	 * @desc: Set or get the text of the element. If a value is provided, it sets the text; otherwise, it retrieves the current text.
+	 * @param:
+	 *     @name: val
+	 *     @descr: The value to set as text or null to retrieve the current text.
+	 *     @type: string, null
+	 * @return:
+	 *     @type: string | this
+	 *     @description When a value is passed, this function returns the instance for chaining. If no value is passed, it returns the current text.
+	 * @funcs: 2
+	 */
+	// @ts-ignore
+	text(): string;
+	// @ts-ignore
+	text(val: string): this;
+	// @ts-ignore
+	text(val?: string): string | this {
+		if (val == null) { return this.nodes.text.text(); }
+		this.nodes.text.text(val);
+		return this;
+	}
+
+	/**
+	 * @docs:
+	 * @title: Transition Border Color
+	 * @desc: Sets or retrieves the transition for the border color of the element.
+	 * @param:
+	 *     @name: val
+	 *     @descr: The value to set for the transition or to retrieve the current transition.
+	 *     @type: string, number, null
+	 * @return:
+	 *     @type: this | string
+	 *     @description When an argument is passed, this function returns the instance of the element for chaining. Otherwise, it returns the already set transition value.
+	 * @funcs: 2
+	 */
+	transition_border_color(): string;
+	transition_border_color(val: string): this;
+	transition_border_color(val?: string): string | this {
+		if (val == null) { return this.nodes.border.transition(); }
+		this.nodes.border.transition(typeof val !== "string" ? val : val.replace("border-color ", "background "));
+		return this;
+	}
+}
+export const BorderButton = Elements.wrapper(BorderButtonElement);
+export const NullBorderButton = Elements.create_null(BorderButtonElement);
+declare module './any_element.d.ts' { interface AnyElementMap { BorderButtonElement: BorderButtonElement }}

package/frontend/src/ui/button.ts

@@ -0,0 +1,62 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js";
+
+// Button.
+@Elements.register
+export class ButtonElement extends VElementTagMap.a {
+
+	static default_style = {
+		"margin": "0px 0px 0px",
+		"padding": "5px 10px 5px 10px",
+		"outline": "none",
+		"border": "none",
+		"border-radius": "10px",
+		"cursor": "pointer",
+		"color": "inherit",
+		"text-align": "center",
+		"display": "grid",
+		"align-items": "center",
+		"white-space": "nowrap",
+		"user-select": "none",
+		"text-decoration": "none",
+	};
+	static default_events = {
+		"onmousedown": function (this: any): void {
+			this.style.filter = "brightness(80%)";
+		},
+		"onmouseover": function (this: any): void {
+			this.style.filter = "brightness(90%)";
+		},
+		"onmouseup": function (this: any): void {
+			this.style.filter = "brightness(100%)";
+		},
+		"onmouseout": function (this: any): void {
+			this.style.filter = "brightness(100%)";
+		},
+	};
+
+	/**
+	 * @docs:
+	 * @nav: Frontend
+	 * @chapter: Buttons
+	 * @title: Button
+	 * @desc: Initializes the Button element with the provided text.
+	 * @param:
+	 *     @name: text
+	 *     @description The text to display on the button.
+	 */
+	constructor(text: string = "") {
+		super({
+			derived: ButtonElement,
+		});
+		this.inner_html(text);
+	}
+}
+export const Button = Elements.wrapper(ButtonElement);
+export const NullButton = Elements.create_null(ButtonElement);
+declare module './any_element.d.ts' { interface AnyElementMap { ButtonElement: ButtonElement }}