@vandenberghinc/volt 1.1.2

package/frontend/src/ui/steps.ts

@@ -0,0 +1,334 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, isVElement } from "../elements/module.js"
+import { VStack, VStackElement, HStack, HStackElement } from "./stack"
+import { Divider, DividerElement } from "./divider"
+import { Span } from "./span"
+import { ForEach } from "./for_each"
+
+interface ContentObject {
+	content: any[];
+	title?: string;
+	hstack?: boolean;
+	side_by_side_width?: number;
+}	
+
+/*	@docs:
+	@nav: Frontend
+	@chapter: Elements
+	@title: Steps
+	@descr: Steps element.
+	@param:
+		@name: content
+		@descr: The steps content. By default it should be an array with `Step` objects. However, when one of the items is an array, the `Step` object will automatically be initialized with the array as the `Step.content` attribute.
+		@type: Step[]
+		@attributes_type: Step
+		@attr:
+			@name: title
+			@descr: The step title.
+			@type: string
+		@attr:
+			@name: content / children
+			@descr: The step children.
+			@type: node[]
+		@attr:
+			@name: hstack
+			@descr: Flag to use a hstack instead of vstack as the children container.
+			@type: boolean
+			@default: false
+		@attr:
+			@name: side_by_side_width
+			@descr: The minimum pixels width of the content container (not the full screen) to show content side by side when `hstack` is enabled.
+			@type: number
+	@param:
+		@name: spacing
+		@descr: Spacing between the step content.
+		@type: string, number
+		@default: "1.25em"
+ */
+@Elements.register
+export class StepsElement extends VStackElement {
+
+	static default_style = {
+		...VStackElement.default_style,
+		"--steps-tint": "gray",
+		"--steps-tint-opac": 1,
+		"--steps-step-bg": "gray",
+		"--steps-step-border": "gray",
+		"--steps-step-border-radius": "50%",
+		"--steps-div-bg": "gray",
+	};
+
+	public _tint: string;
+	public _tint_opac: number;
+	public _step_bg: string;
+	public _step_border: string;
+	public _step_border_radius: string;
+	public _div_bg: string;
+	public _step_nr_nodes: (VStackElement & { bg: VStackElement }) [] = [];
+	public _step_nodes: HStackElement[] = [];
+	public _div_nodes: DividerElement[] = [];
+	public _content_nodes: (HStackElement | VStackElement)[] = [];
+
+	// Constructor.
+	constructor({
+		content = [],
+		spacing = "1.25em",
+	}: {
+		content: any[] | any[][] | ContentObject[],
+		spacing?: string | number,	
+	}) {
+
+		// Inherit.
+		super();
+		this._init_derived({
+			derived: StepsElement,
+		});
+
+		// Assign single array argument to content.
+		if (Array.isArray(arguments[0])) {
+			content = arguments[0];
+		}
+		for (let i = 0; i < content.length; i++) {
+			if (Array.isArray(content[i]) || isVElement(content[i])) {
+				content[i] = {
+					content: content[i],
+				} as ContentObject;
+			}
+		}
+
+		// Attributes.
+		this._tint = StepsElement.default_style["--steps-tint"];
+		this._tint_opac = parseFloat(StepsElement.default_style["--steps-tint-opac"] as any);
+		this._step_bg = StepsElement.default_style["--steps-step-bg"];
+		this._step_border = StepsElement.default_style["--steps-step-border"];
+		this._step_border_radius = StepsElement.default_style["--steps-step-border-radius"];
+		this._div_bg = StepsElement.default_style["--steps-div-bg"];
+
+		// Build.
+		this.append(ForEach(content, (item, index, is_last) => {
+
+			// Build divider.
+		    const divider = is_last ? null : Divider()
+		    	.margin(0)
+		    	.font_size("0.7em") // for relative distances.
+		    	.position("2em", null, 0, "0.875em")
+		    	.frame(1.5, `calc(100% + ${spacing} - 0.6em)`)
+		    	.background(this._div_bg)
+		    	.z_index(0)
+		    	.exec(e => this._div_nodes.append(e))
+
+		    // Build content.
+		    const content = (item.hstack ? HStack() : VStack())		
+				.z_index(1)
+				// .width(100%)
+				.stretch(true)
+            	.overflow("hidden"); // required otherwise when inside Tabs will mess up.
+			if (typeof item.title === "string") {
+				content.append(
+					Span(item.title)
+					.color("inherit")
+					.display("block") // line wrap after.
+					.margin_bottom("0.5em")
+					.font_weight(500)
+					.line_height("1.6em"),
+				)
+			}
+			if (item.content) {
+				content.append(item.content);
+			} else if (item.children) {
+				content.append(item.children);
+			}
+			if (typeof item.side_by_side_width == "number") {
+				content.on_resize_rule(
+					() => content.clientWidth >= item.side_by_side_width,
+					() => content.flex_direction("row"),
+					() => content.flex_direction("column"),
+				)
+			}
+			this._content_nodes.append(content);
+
+			// Append.
+			let step_nr;
+		    const element = HStack(
+		    		step_nr = VStack<{ bg: VStackElement }>(
+		    			VStack() // to support opacity on background only.
+		    				.assign_to_parent_as("bg")
+		    				.background(this._step_bg)
+		    				.transition("background 300ms ease-in-out")
+		    				.position(0, 0, 0, 0)
+		    				.z_index(0),
+		    			Span((index + 1).toString())
+		    				.z_index(1),
+		    		)
+	    			.position("relative")
+	    			.overflow("hidden")
+	    			.font_size("0.7em")
+	    			.flex_shrink(0)
+	    			.frame("1.8em", "1.8em")
+	    			.margin("0.2em", "1em", null, null)
+	    			// .border_radius(this._step_border_radius)
+	    			.border_radius(5)
+	    			.border(1, this._step_border)
+	    			.center()
+	    			.center_vertical()
+	    			.z_index(1)
+	    			.exec(e => this._step_nr_nodes.append(e)),
+		    		divider,
+		    		content,
+	    	)
+	    	.fixed_width(100%)
+	    	.margin_top(index > 0 ? spacing : 0)
+	    	.position("relative")
+	    	.exec(e => this._step_nodes.append(e))
+	    	.on_mouse_over(() => step_nr.bg.opacity(this._tint_opac).background(this._tint))
+	    	.on_mouse_out(() => step_nr.bg.opacity(1).background(this._step_bg))
+	    	return element;
+		}))
+	}
+
+	// Set default since it inherits another element.
+	set_default() : this {
+		return super.set_default(StepsElement);
+	}
+
+	// Get the styling attributes.
+	styles() : Record<string, string>;
+	styles(style_dict: Record<string, any>) : this;
+	styles(style_dict?: Record<string, any>) : this | Record<string, string> {
+		if (style_dict == null) {
+			let styles = super.styles();
+			styles["--steps-tint"] = this._tint;
+			styles["--steps-step-bg"] = this._step_bg;
+			styles["--steps-step-border"] = this._step_border;
+			styles["--steps-step-border-radius"] = this._step_border_radius;
+			styles["--steps-div-bg"] = this._div_bg;
+			return styles;
+		} else {
+			return super.styles(style_dict);
+		}
+	}
+
+	/*	@docs:
+		@title: Set/Get tint
+		@description: Set or get the step number tint color.
+	 */
+	tint() : string;
+	tint(value: string) : this;
+	tint(value?: string) : this | string {
+		if (value == null) { return this._tint; }
+		this._tint = value;
+		return this;
+	}
+
+	/*	@docs:
+		@title: Set/Get tint opacity
+		@description: Set or get the step number tint opacity.
+	 */
+	tint_opacity() : number;
+	tint_opacity(value: number) : this;
+	tint_opacity(value?: number) : this | number {
+		if (value == null) { return this._tint_opac; }
+		this._tint_opac = value;
+		return this;
+	}
+
+	/*	@docs:
+		@title: Set/Get content overflow
+		@description: Set or get the step's content overflow.
+	 */
+	content_overflow() : string;
+	content_overflow(value: string) : this;
+	content_overflow(value?: string) : this | string {
+		if (value == null) { return this._content_nodes[0].overflow(); }
+		this._content_nodes.iterate(node => {
+			node.overflow(value);
+		})
+		return this;
+	}
+
+	/*	@docs:
+		@title: Set divider background
+		@description: Set the divider background between the steps.
+	 */
+	divider_background() : string;
+	divider_background(value: string) : this;
+	divider_background(value?: string) : this | string {
+		if (value == null) { return this._div_bg; }
+		this._div_bg = value;
+		this._div_nodes.iterate(node => {
+			node.background(value);
+		})
+		return this;
+	}
+
+	/*	@docs:
+		@title: Set step number background
+		@description: Set or get the step number background.
+	 */
+	step_number_background() : string;
+	step_number_background(value: string) : this;
+	step_number_background(value?: string) : this | string {
+		if (value == null) { return this._step_bg; }
+		this._step_bg = value;
+		this._step_nr_nodes.iterate(node => {
+			node.bg.background(value);
+		})
+		return this;
+	}
+
+	/*	@docs:
+		@title: Set step number border color
+		@description: Set or get the step number border color.
+	 */
+	step_number_border_color() : string;
+	step_number_border_color(value: string) : this;
+	step_number_border_color(value?: string) : this | string {
+		if (value == null) { return this._step_border; }
+		this._step_border = value;
+		this._step_nr_nodes.iterate(node => {
+			node.border_color(value);
+		})
+		return this;
+	}
+
+	/*	@docs:
+		@title: Set step number border radius
+		@description: Set or get the step number border radius.
+	 */
+	step_number_border_radius() : string;
+	step_number_border_radius(value: string) : this;
+	step_number_border_radius(value?: string) : this | string {
+		if (value == null) { return this._step_border_radius; }
+		this._step_border_radius = value;
+		this._step_nr_nodes.iterate(node => {
+			node.border_radius(value);
+		})
+		return this;
+	}
+
+	/*	@docs:
+		@title: Iterate step number nodes
+		@description: Iterate the step number nodes. When the callback returns any non null value the iteration will be stopped.
+	 */
+	iterate_step_numbers(callback: (element: VStackElement) => void) {
+		this._step_nr_nodes.iterate(node => {callback(node)})
+		return this;
+	}
+
+	/*	@docs:
+		@title: Iterate step nodes
+		@description: Iterate the step nodes. When the callback returns any non null value the iteration will be stopped.
+	 */
+	iterate_steps(callback: (element: HStackElement) => void) {
+		this._step_nodes.iterate(node => {callback(node)})
+		return this;
+	}
+}
+export const Steps = Elements.wrapper(StepsElement);
+export const NullSteps = Elements.create_null(StepsElement);
+declare module './any_element.d.ts' { interface AnyElementMap { StepsElement: StepsElement }}

package/frontend/src/ui/style.ts

@@ -0,0 +1,26 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VHTMLElement } from "../elements/module.js"
+
+// Span.
+@Elements.register
+export class StyleElement extends VHTMLElement {
+	static element_tag = "section";
+	constructor(style?: CSSStyleDeclaration) {
+		
+		// Initialize base class.
+		super({ derived: StyleElement });
+	
+		// Set style.
+		if (style != null) {
+			this.styles(style);
+		}
+	}	
+}
+export const Style = Elements.wrapper(StyleElement);
+export const NullStyle = Elements.create_null(StyleElement);
+declare module './any_element.d.ts' { interface AnyElementMap { StyleElement: StyleElement }}

package/frontend/src/ui/switch.ts

@@ -0,0 +1,286 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements } from "../elements/module.js"
+import { VStack, VStackElement } from "./stack"
+
+// Switch button.
+@Elements.register
+export class SwitchElement extends VStackElement {
+
+	// Macros.
+	#macro OnChangeCallback ((element: SwitchElement, enabled: boolean) => void)
+
+	// Attributes.
+	public on_change_handler: OnChangeCallback;
+	public _enabled: boolean;
+	public _enabled_color: string;
+	public _disabled_color: string
+	public enabled: boolean;
+	public slider: VStackElement;
+	public button: VStackElement;
+	public _value_timeout: any;
+
+	// Constructor.
+	constructor(enabled: boolean = false) {
+		
+		// Initialize base class.
+		super();
+		this._init_derived({ derived: SwitchElement, });
+		
+		// The slider background.
+		this.slider = VStack()
+	        .background("white")
+	        // .border(`1px solid ${SETTINGS.theme.lightest_widget_background}90`)
+	        .frame(35, 12.5)
+	        .border_radius(10)
+	        .overflow("visible")
+	        .box_shadow(`0px 0px 2px #00000030`)
+	        .parent(this)
+
+	    // The button.
+        this.button = VStack()
+            .border_radius("50%")
+            .frame(17.5, 17.5)
+            .background("gray")
+            .position("absolute")
+            .left(0)
+            .transition("left 0.15s ease-out")
+            .box_shadow(`0px 0px 2px #00000060`)
+            .on_click(() => this.toggle())
+            .parent(this)
+
+        // Append.
+        this.append(this.slider, this.button);
+
+        // Styling.
+        this.position("relative")
+        this.width(35)
+        this.flex_shrink(0)
+        this.center_vertical()
+
+        // On change handler.
+        this.on_change_handler = (a, b) => {};
+
+        // Attributes.
+        this._enabled = enabled;
+        this._enabled_color = "green";
+        this._disabled_color = "gray";
+
+        // Alias func.
+        // @ts-ignore
+        this.enabled = this.value;
+
+        // Set enabled value.
+        this.value(enabled, false);
+
+        // Set default theme update.
+        this.on_theme_update(() => {
+        	this.value(this._enabled, false);
+        })
+    }
+
+    // Set default since it inherits an element.
+	set_default() : this {
+		return super.set_default(SwitchElement);
+	}
+
+    // Set width.
+    width() : number | string;
+    width(value: number | string) : this;
+	width(value?: number | string) : this | number | string {
+		if (value == null) {
+			return super.width();
+		}
+		super.width(value);
+		this.slider.width(value);
+		return this;
+	}
+	min_width() : number | string;
+	min_width(value: number | string) : this;
+	min_width(value?: number | string) : this | number | string {
+		if (value == null) {
+			return super.min_width();
+		}
+		super.min_width(value);
+		this.slider.min_width(value);
+		return this;
+	}
+	max_width() : number | string;
+	max_width(value: number | string) : this;
+	max_width(value?: number | string) : this | number | string {
+		if (value == null) {
+			return super.max_width();
+		}
+		super.max_width(value);
+		this.slider.max_width(value);
+		return this;
+	}
+
+	// Set width.
+	height() : number | string;
+	height(value: number | string) : this;
+	height(value?: number | string) : this | number | string {
+		if (value == null) {
+			return super.height();
+		}
+		super.height(value);
+		this.slider.height(typeof value === "string" ? "50%" : value / 2);
+		return this;
+	}
+	min_height() : number | string;
+	min_height(value: number | string) : this;
+	min_height(value?: number | string) : this | number | string {
+		if (value == null) {
+			return super.min_height();
+		}
+		super.min_height(value);
+		this.slider.min_height(typeof value === "string" ? "50%" : value / 2);
+		return this;
+	}
+	max_height() : number | string;
+	max_height(value: number | string) : this;
+	max_height(value?: number | string) : this | number | string {
+		if (value == null) {
+			return super.max_height();
+		}
+		super.max_height(value);
+		this.slider.max_height(typeof value === "string" ? "50%" : value / 2);
+		return this;
+	}
+
+	// Frame.
+	frame(width?: number | string, height?: number | string) : this {
+		if (width != null) {
+			this.width(width);
+		}
+		if (height != null) {
+			this.height(height);
+		}
+		return this;
+	}
+	min_frame(width?: number | string, height?: number | string) : this {
+		if (width != null) {
+			this.min_width(width);
+		}
+		if (height != null) {
+			this.min_height(height);
+		}
+		return this;
+	}
+	max_frame(width?: number | string, height?: number | string) : this {
+		if (width != null) {
+			this.max_width(width);
+		}
+		if (height != null) {
+			this.max_height(height);
+		}
+		return this;
+	}
+
+    // Get or set the enabled color.
+    enabled_color() : string
+    enabled_color(value: string) : this
+    enabled_color(value?: string) : this | string {
+    	if (value == null) {
+    		return this._enabled_color;
+    	}
+    	this._enabled_color = value;
+    	return this;
+    }
+
+    // Get or set the disabled color.
+    disabled_color() : string
+    disabled_color(value: string) : this
+    disabled_color(value?: string) : this | string {
+    	if (value == null) {
+    		return this._disabled_color;
+    	}
+    	this._disabled_color = value;
+    	return this;
+    }
+
+    // Toggle the value.
+    toggle() : this {
+    	return this.value(!this._enabled);
+    }
+
+    // Get or set the enabled boolean value.
+    // @ts-ignore
+    value() : boolean;
+    // @ts-ignore
+    value(value: boolean, animate: boolean = true) : this;
+    // @ts-ignore
+    value(value?: boolean, animate: boolean = true) : this | boolean {
+        if (value == null) {
+            return this._enabled;
+        }
+        else if (value === true) {
+            this._enabled = value;
+            if (animate) {
+            	clearTimeout(this._value_timeout);
+            	this._value_timeout = setTimeout(() => this.button.background(this._enabled_color), 140);
+            } else {
+            	this.button.background(this._enabled_color);
+            }
+            const slider_width = this.slider.getBoundingClientRect().width;
+            const button_width = this.button.getBoundingClientRect().width;
+            if (slider_width && button_width) {
+            	this.button.style.left = `${slider_width - button_width}px`;
+            	this.button.style.right = "auto";
+            } else {
+            	this.button.style.left = "auto";
+            	this.button.style.right = "0px";
+            }
+            this.on_change_handler(this, this._enabled);
+        }
+        else if (value === false) {
+            this._enabled = value;
+            if (animate) {
+            	clearTimeout(this._value_timeout);
+            	this._value_timeout = setTimeout(() => this.button.background(this._disabled_color), 140);
+            } else {
+            	this.button.background(this._disabled_color);
+            }
+        	const slider_width = this.slider.getBoundingClientRect().width;
+            const button_width = this.button.getBoundingClientRect().width;
+            if (slider_width && button_width) {
+            	if (this.button.style.left === "auto") { // otherwise the transition does not show when it was initialized as true.
+            		this.button.style.left = `${slider_width - button_width}px`; 
+            		setTimeout(() => {
+            			this.button.style.right = "auto"; 
+	            		this.button.style.left = "0px";	
+            		}, 10)
+            	} else {
+            		this.button.style.right = "auto"; 
+            		this.button.style.left = "0px";	
+            	}
+            } else {
+            	this.button.style.left = "0px";
+            	this.button.style.right = "auto";
+            }
+            this.on_change_handler(this, this._enabled);
+        }
+        return this;
+    }
+
+    // Set the on change handler.
+    // @ts-expect-error
+    on_change() : OnChangeCallback;
+    // @ts-expect-error
+    on_change(handler: OnChangeCallback) : this;
+    // @ts-expect-error
+    on_change(handler?: OnChangeCallback) : OnChangeCallback | this {
+    	if (handler == null) {
+    		return this.on_change_handler;
+    	}
+    	this.on_change_handler = handler;
+    	return this;
+    }		
+}
+export const Switch = Elements.wrapper(SwitchElement);
+export const NullSwitch = Elements.create_null(SwitchElement);
+declare module './any_element.d.ts' { interface AnyElementMap { SwitchElement: SwitchElement }}