@vandenberghinc/volt 1.1.2

package/frontend/src/ui/link.ts

@@ -0,0 +1,77 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js"
+
+// Link.
+@Elements.register
+export class AnchorElement extends VElementTagMap.a {
+
+	static default_style = {
+		"font-family": "inherit",
+		"font-size": "inherit",
+		"color": "inherit",
+		"text-decoration": "none",
+		"text-underline-position": "none",
+		"cursor": "pointer",
+		"outline": "none",
+		"border": "none",
+	};
+	
+	// Constructor.
+	constructor(text?: string, href?: string, alt?: string) {
+		
+		// Initialize base class.
+		super({
+			derived: AnchorElement,
+		});
+		
+		// Set href.
+		if (href !== undefined) { this.href(href); }
+		
+		// Set alt.
+		if (alt !== undefined) { this.alt(alt); }
+
+		// Set text.
+		if (text !== undefined || alt !== undefined) { this.text((text ?? alt) as string); }
+	}		
+}
+export const Anchor = Elements.wrapper(AnchorElement);
+export const NullAnchor = Elements.create_null(AnchorElement);
+declare module './any_element.d.ts' { interface AnyElementMap { AnchorElement: AnchorElement }}
+
+// Link.
+@Elements.register
+export class LinkElement extends VElementTagMap.a {
+
+	static default_style = {
+		"font-family": "inherit",
+		"font-size": "1em",
+		"color": "rgb(85, 108, 214)",
+		"text-decoration": "underline",
+		"text-underline-position": "auto",
+		"cursor": "pointer",
+	};
+	
+	// Constructor.
+	constructor(text?: string, href?: string) {
+		
+		// Initialize base class.
+		super({
+			derived: LinkElement,
+		});
+
+		// Set text.
+		if (text !== undefined) { this.text(text); }
+		
+		// Set href.
+		if (href !== undefined) { this.href(href); }
+		
+	}		
+}
+export const Link = Elements.wrapper(LinkElement);
+export const NullLink = Elements.create_null(LinkElement);
+declare module './any_element.d.ts' { interface AnyElementMap { LinkElement: LinkElement }}

package/frontend/src/ui/list.ts

@@ -0,0 +1,88 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js"
+import { Scheme } from "../modules/scheme"
+
+// List item.
+@Elements.register
+export class ListItemElement extends VElementTagMap.li {
+	
+	// Constructor.
+	constructor(...content: any[]) {
+		
+		// Initialize base class.
+		super({ derived: ListItemElement });
+	
+		// Append content.
+		this.append(...content);
+	}
+}
+export const ListItem = Elements.wrapper(ListItemElement);
+export const NullListItem = Elements.create_null(ListItemElement);
+declare module './any_element.d.ts' { interface AnyElementMap { ListItemElement: ListItemElement }}
+
+// Unordered List.
+@Elements.register
+export class UnorderedListElement extends VElementTagMap.ul {
+	
+	// Constructor.
+	constructor(items: (ListItemElement | any | any[])[] = []) {
+		
+		// Initialize base class.
+		super({ derived: UnorderedListElement });
+	
+		// Add items.
+		if (Array.isArray(items)) {
+			items.iterate(node => {this.append_item(node)})
+		} else {
+			console.error(`Invalid type "${Scheme.value_type(items)}" for parameter "items" the valid type is "array".`)
+		}
+	}
+
+	// Append item.
+	append_item(content: ListItemElement | any | any[]) : this {
+		if (!(content instanceof ListItemElement)) {
+			content = ListItem(content);
+		}
+		this.append(content)
+		return this;
+	}
+}
+export const UnorderedList = Elements.wrapper(UnorderedListElement);
+export const NullUnorderedList = Elements.create_null(UnorderedListElement);
+declare module './any_element.d.ts' { interface AnyElementMap { UnorderedListElement: UnorderedListElement }}
+
+// Ordered List.
+@Elements.register
+export class OrderedListElement extends VElementTagMap.ol {
+	
+	// Constructor.
+	constructor(items: (ListItemElement | any | any[])[] = []) {
+		
+		// Initialize base class.
+		super({ derived: OrderedListElement });
+	
+		// Add items.
+		if (Array.isArray(items)) {
+			items.iterate(node => {this.append_item(node)})
+		} else {
+			console.error(`Invalid type "${Scheme.value_type(items)}" for parameter "items" the valid type is "array".`)
+		}
+	}
+
+	// Append item.
+	append_item(content: ListItemElement | any | any[]) : this {
+		if (!(content instanceof ListItemElement)) {
+			content = ListItem(content);
+		}
+		this.append(content)
+		return this;
+	}		
+}
+export const OrderedList = Elements.wrapper(OrderedListElement);
+export const NullOrderedList = Elements.create_null(OrderedListElement);
+declare module './any_element.d.ts' { interface AnyElementMap { OrderedListElement: OrderedListElement }}

package/frontend/src/ui/loader_button.ts

@@ -0,0 +1,192 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2023 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VDivElement, VDiv } from "../elements/module.js";
+import { AnchorHStackElement } from "./stack";
+import { RingLoader, RingLoaderElement } from "./loaders"
+
+export class myClass extends AnchorHStackElement {
+    constructor() { super(); }
+}
+
+// Loader button.
+/**
+ * @warning: you should not use function "LoaderButton.loader.hide() / LoaderButton.loader.show()" use "LoaderButton.hide_loader() / LoaderButton.show_loader()" instead.
+ * @warning: This class is still experimental and may be subject to future change.
+ */
+@Elements.register
+export class LoaderButtonElement extends AnchorHStackElement {
+	static default_style = {
+		"margin": "0px",
+		"padding": "12.5px 10px 12.5px 10px",
+		"border-radius": "25px",
+		"cursor": "pointer",
+		"background": "black",
+		"color": "inherit",
+		"font-size": "16px",
+		"user-select": "none",
+		"text-decoration": "none",
+		// Custom.
+		"--loader-width": "20px",
+		"--loader-height": "20px",
+	}
+	public nodes: {
+	    text: VDivElement;
+	    loader: RingLoaderElement;
+	    [key: string]: any;
+	};
+	// @ts-ignore
+	public text: VDivElement;
+	public loader: RingLoaderElement;
+	
+	/**
+	 * @docs:
+	 * @title: Loader Button Constructor
+	 * @desc: Initializes the LoaderButton element with the provided text and loader.
+	 * @param:
+	 *     @name: text
+	 *     @descr: The text to display on the loader button.
+	 *     @type: string
+	 * @param:
+	 *     @name: loader
+	 *     @descr: The loader function to create the loading animation.
+	 *     @type: Function
+	 * @return:
+	 *     @type: void
+	 *     @description This constructor does not return a value.
+	 */
+	constructor(text: string = "", loader: () => any = RingLoader) {
+
+		// Initialize base classes.
+		super();
+		this._init_derived({
+			derived: LoaderButtonElement,
+		});
+
+		// Set nodes type.
+		this.text = VDiv();
+		this.loader = loader();
+		this.nodes = {
+			// @deprecated the `nodes` object is deprecated but keep for backward compatability.
+		    text: this.text,
+		    loader: this.loader,
+		};
+
+		// Set style.
+		this.wrap(false);
+		this.center();
+		this.center_vertical()
+
+		// Children.
+		this.nodes.loader
+			.frame(LoaderButtonElement.default_style["--loader-width"], LoaderButtonElement.default_style["--loader-height"])
+			.background("white")
+			.update()
+			.hide()
+			.parent(this)
+		this.nodes.text
+			.text(text)
+			.margin(0)
+			.padding(0)
+			.parent(this);
+		
+		// Add children.
+		this.append(this.nodes.loader, this.nodes.text);
+
+	}
+
+	/**
+	 * @docs:
+	 * @title: Styles
+	 * @desc: Retrieves or sets the styling attributes for the loader element. If no argument is provided, it returns the current styles including default loader dimensions.
+	 * @param:
+	 *     @name: style_dict
+	 *     @descr: An optional dictionary of styles to set.
+	 *     @type: object | null
+	 * @return:
+	 *     @type: object
+	 *     @description When no argument is passed, returns the current styles including loader dimensions. When an argument is provided, returns the result of the super class's styles method.
+	 * @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["--loader-width"] = this.nodes.loader.style.width || "20px";
+			styles["--loader-height"] = this.nodes.loader.style.height || "20px";
+			return styles;
+		} else {
+			return super.styles(style_dict);
+		}
+	}
+
+	/**
+	 * @docs:
+	 * @title: Set Default
+	 * @desc: Sets the default configuration for the LoaderButtonElement by calling the parent method.
+	 * @return:
+	 *     @type: this
+	 *     @description Returns the instance of the element for chaining.
+	 */
+	set_default(): this {
+		return super.set_default(LoaderButtonElement);
+	}
+
+	/**
+	 * @docs:
+	 * @title: Show Loader
+	 * @desc: Displays the loader and disables the button when clicked.
+	 * @return:
+	 *     @type: this
+	 *     @description Returns the instance of the element for chaining.
+	 */
+	show_loader(): this {
+		this.disable();
+		this.nodes.text.hide();
+		this.nodes.loader.update();
+		this.nodes.loader.show();
+		return this;
+	}
+
+	/**
+	 * @docs:
+	 * @title: Start
+	 * @desc: Initiates the loading process by showing the loader.
+	 * @return:
+	 *     @type: this
+	 *     @description Returns the instance of the element for chaining.
+	 */
+	// @ts-ignore
+	start(): this {
+	    return this.show_loader();
+	}
+
+	/**
+	 * @docs:
+	 * @title: Hide Loader
+	 * @desc: Hides the loader, enables the button, and shows the text on click event.
+	 * @return:
+	 *     @type: this
+	 *     @description Returns the instance of the element for chaining.
+	 */
+	hide_loader(): this {
+	    this.enable();
+	    this.nodes.loader.hide();
+	    this.nodes.text.show();
+	    return this;
+	}
+	stop() { return this.hide_loader(); }
+}
+export const LoaderButton = Elements.wrapper(LoaderButtonElement);
+export const NullLoaderButton = Elements.create_null(LoaderButtonElement);
+declare module './any_element.d.ts' { interface AnyElementMap { LoaderButtonElement: LoaderButtonElement }}
+
+
+const x = new LoaderButtonElement();
+x.style.color = "you";
+
+

package/frontend/src/ui/loaders.ts

@@ -0,0 +1,126 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js"
+
+// RingLoader.
+// - The width and height must be in pixels.
+/**
+ * @docs:
+ * @chapter: Frontend
+ * @title: Ring Loader
+ * @desc:
+ * 		The ring loader element.
+ */
+@Elements.register
+export class RingLoaderElement extends VElementTagMap.div {
+
+	static default_style = {
+		"width": "80px",
+		"height": "80px",
+		"--child-background": "black",
+		"--border-width-factor": "1",
+		"display": "inline-block",
+		"position": "relative",
+	}
+	
+	// Constructor.
+	constructor() {
+		
+		// Initialize base class.
+		super({
+			derived: RingLoaderElement,
+		});
+
+		// Set default.
+		this.update();
+		
+	}
+
+	/**
+	 * @docs:
+	 * @title: Backround
+	 * @desc:
+	 * 		Set the background value.
+	 *		Returns the attribute value when parameter `value` is `null`.
+	 * @note: Dont forget to update the loader through `update()` after calling this function.
+	 * @param:
+	 *     @name: value
+	 *     @descr: The value to assign. Leave `null` to retrieve the attribute's value.
+	 * @return:
+	 *     @description Returns the `RingLoaderElement` object for chaining unless parameter `value` is `null`, then the attribute's value is returned.
+	 * @funcs: 2
+	 */
+	background(): string;
+	background(value: string): this;
+	background(value?: string): string | this {
+        if (value == null) { return this.style["--child-background"]; }
+        this.style["--child-background"] = value;
+        return this;
+    }
+
+    /**
+	 * @docs:
+	 * @title: Border width by factor
+	 * @desc: Set the border width by factor.
+	 * @note: Dont forget to update the loader through `update()` after calling this function.
+	 * @param:
+	 * 		@name: number
+	 * 		@descr: The float border width factor.
+	 * @funcs: 2
+	 */
+    border_width_factor(): number;
+	border_width_factor(value: number): this;
+	border_width_factor(value?: number): number | this {
+    	if (value == null) { return this.style["--border-width-factor"] == null ? 1.0 : parseFloat(this.style["--border-width-factor"]); }
+        this.style["--border-width-factor"] = value.toString();
+        return this;
+    }
+	
+	/**
+	 * @docs:
+	 * @title: Update
+	 * @desc: Update the loader, this function needs to be called after initialization or after changing the frame, background or border.
+	 */
+	update() : this {
+		this.remove_children();
+		const width = parseFloat(this.style.width.replace("px", ""));
+		const height = parseFloat(this.style.height.replace("px", ""));
+		const background = this.style["--child-background"];
+		const border_width_factor = parseFloat(this.style["--border-width-factor"])
+		const children_style = {
+			"box-sizing": "border-box",
+			"display": "block",
+			"position": "absolute",
+			"width": `${width * (64.0 / 80.0)}px`,
+			"height": `${height * (64.0 / 80.0)}px`,
+			"margin": `${width * (8.0 / 80.0)}px`,
+			// "border": `${width * (8.0 / 80.0)}px solid ${background}`,
+			"border": `${width * (8.0 / 80.0 * border_width_factor)}px solid ${background}`,
+			"border-color": `${background} transparent transparent transparent`,
+			"border-radius": "50%",
+			"animation": "RingLoader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite",
+		};
+		for (let i = 0; i < 4; i++) {
+			let e = document.createElement("div");
+			for (let attr in children_style) {
+				e.style[attr] = children_style[attr];
+			}
+			if (i == 1) {
+				e.style.animationDelay = "-0.45s";
+			} else if (i == 2) {
+				e.style.animationDelay = "-0.3s";
+			} else if (i == 3) {
+				e.style.animationDelay = "-0.15s";
+			}
+			this.append(e);
+		}
+		return this;
+	}
+}
+export const RingLoader = Elements.wrapper(RingLoaderElement);
+export const NullRingLoader = Elements.create_null(RingLoaderElement);
+declare module './any_element.d.ts' { interface AnyElementMap { RingLoaderElement: RingLoaderElement }}