@vandenberghinc/volt 1.1.4 → 1.1.6

package/frontend/src/ui/steps.ts

@@ -4,13 +4,13 @@
  */
 
 // Imports.
-import { Elements, isVElement } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, isVElement, VElementTagMap } 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 {
+export interface StepContentOptions {
 	content: any[];
 	title?: string;
 	hstack?: boolean;
@@ -50,24 +50,26 @@ interface ContentObject {
 		@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",
-	};
+@Elements.create({
+    name: "StepsElement",
+    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",
+    },
+})
+export class StepsElement extends (VStackElement as any as VElementBaseSignature) {
 
 	public _tint: string;
 	public _tint_opac: number;
 	public _step_bg: string;
 	public _step_border: string;
 	public _step_border_radius: string;
+    public _step_margin_right: string = "1em";
 	public _div_bg: string;
 	public _step_nr_nodes: (VStackElement & { bg: VStackElement }) [] = [];
 	public _step_nodes: HStackElement[] = [];
@@ -77,15 +79,13 @@ export class StepsElement extends VStackElement {
 	// Constructor.
 	constructor({
 		content = [],
-		spacing = "1.25em",
 	}: {
-		content: any[] | any[][] | ContentObject[],
-		spacing?: string | number,	
+        content: any[] | any[][] | StepContentOptions[],
 	}) {
 
 		// Inherit.
 		super();
-		this._init_derived({
+		this._init({
 			derived: StepsElement,
 		});
 
@@ -97,7 +97,7 @@ export class StepsElement extends VStackElement {
 			if (Array.isArray(content[i]) || isVElement(content[i])) {
 				content[i] = {
 					content: content[i],
-				} as ContentObject;
+                } as StepContentOptions;
 			}
 		}
 
@@ -110,6 +110,7 @@ export class StepsElement extends VStackElement {
 		this._div_bg = StepsElement.default_style["--steps-div-bg"];
 
 		// Build.
+        const spacing = "1.25em";
 		this.append(ForEach(content, (item, index, is_last) => {
 
 			// Build divider.
@@ -125,7 +126,7 @@ export class StepsElement extends VStackElement {
 		    // Build content.
 		    const content = (item.hstack ? HStack() : VStack())		
 				.z_index(1)
-				// .width(100%)
+				// .width("100%")
 				.stretch(true)
             	.overflow("hidden"); // required otherwise when inside Tabs will mess up.
 			if (typeof item.title === "string") {
@@ -170,7 +171,7 @@ export class StepsElement extends VStackElement {
 	    			.font_size("0.7em")
 	    			.flex_shrink(0)
 	    			.frame("1.8em", "1.8em")
-	    			.margin("0.2em", "1em", null, null)
+                    .margin("0.2em", this._step_margin_right, null, null)
 	    			// .border_radius(this._step_border_radius)
 	    			.border_radius(5)
 	    			.border(1, this._step_border)
@@ -181,7 +182,7 @@ export class StepsElement extends VStackElement {
 		    		divider,
 		    		content,
 	    	)
-	    	.fixed_width(100%)
+	    	.fixed_width("100%")
 	    	.margin_top(index > 0 ? spacing : 0)
 	    	.position("relative")
 	    	.exec(e => this._step_nodes.append(e))
@@ -311,6 +312,21 @@ export class StepsElement extends VStackElement {
 		return this;
 	}
 
+    /*	@docs:
+        @title: Set step number border radius
+        @description: Set or get the step number border radius.
+     */
+    step_number_margin_right(): string;
+    step_number_margin_right(value: string): this;
+    step_number_margin_right(value?: string): this | string {
+        if (value == null) { return this._step_margin_right; }
+        this._step_margin_right = value;
+        this._step_nr_nodes.iterate(node => {
+            node.margin_right(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.

package/frontend/src/ui/style.ts

@@ -4,12 +4,15 @@
  */
 
 // Imports.
-import { Elements, VHTMLElement } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VHTMLElement } from "../elements/module.js"
 
 // Span.
-@Elements.register
-export class StyleElement extends VHTMLElement {
-	static element_tag = "section";
+@Elements.create({
+    name: "StyleElement",
+    tag: "section",
+})
+export class StyleElement extends (VHTMLElement as any as VElementBaseSignature) {
+
 	constructor(style?: CSSStyleDeclaration) {
 		
 		// Initialize base class.

package/frontend/src/ui/switch.ts

@@ -4,18 +4,21 @@
  */
 
 // Imports.
-import { Elements } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement } from "../elements/module.js"
 import { VStack, VStackElement } from "./stack"
 
-// Switch button.
-@Elements.register
-export class SwitchElement extends VStackElement {
+export namespace SwitchElement {
+    export type OnChangeCallback<This> = (element: This, enabled: boolean) => void;
+}
 
-	// Macros.
-	#macro OnChangeCallback ((element: SwitchElement, enabled: boolean) => void)
+// Switch button.
+@Elements.create({
+    name: "SwitchElement",
+})
+export class SwitchElement extends (VStackElement as any as VElementBaseSignature) {
 
 	// Attributes.
-	public on_change_handler: OnChangeCallback;
+    public on_change_handler: SwitchElement.OnChangeCallback<this>;
 	public _enabled: boolean;
 	public _enabled_color: string;
 	public _disabled_color: string
@@ -29,7 +32,9 @@ export class SwitchElement extends VStackElement {
 		
 		// Initialize base class.
 		super();
-		this._init_derived({ derived: SwitchElement, });
+		this._init({
+            derived: SwitchElement,
+        });
 		
 		// The slider background.
 		this.slider = VStack()
@@ -269,11 +274,11 @@ export class SwitchElement extends VStackElement {
 
     // Set the on change handler.
     // @ts-expect-error
-    on_change() : OnChangeCallback;
+    on_change(): SwitchElement.OnChangeCallback<this>;
     // @ts-expect-error
-    on_change(handler: OnChangeCallback) : this;
+    on_change(handler: SwitchElement.OnChangeCallback<this>) : this;
     // @ts-expect-error
-    on_change(handler?: OnChangeCallback) : OnChangeCallback | this {
+    on_change(handler?: SwitchElement.OnChangeCallback<this>): SwitchElement.OnChangeCallback<this> | this {
     	if (handler == null) {
     		return this.on_change_handler;
     	}

package/frontend/src/ui/table.ts

@@ -4,16 +4,17 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap, VDivElement } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap, VDivElement } from "../elements/module.js"
 import { Scheme } from "../modules/scheme"
 
 // Table head element.
-@Elements.register
-export class TableHeadElement extends VElementTagMap.thead {
-
-	static default_style = {
+@Elements.create({
+    name: "TableHeadElement",
+    default_style: {
 		"padding": "0px",
-	};
+	},
+})
+export class TableHeadElement extends VElementTagMap.thead {
 	
 	// Constructor.
 	constructor(...content: any[]) {
@@ -32,13 +33,14 @@ export const NullTableHead = Elements.create_null(TableHeadElement);
 declare module './any_element.d.ts' { interface AnyElementMap { TableHeadElement: TableHeadElement }}
 
 // Table header element.
-@Elements.register
-export class TableHeaderElement extends VElementTagMap.th {
-
-	static default_style = {
+@Elements.create({
+    name: "TableHeaderElement",
+    default_style: {
 		"text-align": "left",
 		"padding": "0px 10px",
-	};
+	},
+})
+export class TableHeaderElement extends VElementTagMap.th {
 
 	// Constructor.
 	constructor(...content: any[]) {
@@ -57,12 +59,13 @@ export const NullTableHeader = Elements.create_null(TableHeaderElement);
 declare module './any_element.d.ts' { interface AnyElementMap { TableHeaderElement: TableHeaderElement }}
 
 // Table body element.
-@Elements.register
-export class TableBodyElement extends VElementTagMap.tbody {
-
-	static default_style = {
+@Elements.create({
+    name: "TableBodyElement",
+    default_style: {
 		"padding": "0px",
-	};
+	},
+})
+export class TableBodyElement extends VElementTagMap.tbody {
 	
 	// Constructor.
 	constructor(...content: any[]) {
@@ -82,9 +85,11 @@ declare module './any_element.d.ts' { interface AnyElementMap { TableBodyElement
 
 
 // Table row element.
-@Elements.register
+@Elements.create({
+    name: "TableRowElement",
+})
 export class TableRowElement extends VElementTagMap.tr {
-	
+
 	// Constructor.
 	constructor(...content: any[]) {
 		
@@ -102,13 +107,14 @@ export const NullTableRow = Elements.create_null(TableRowElement);
 declare module './any_element.d.ts' { interface AnyElementMap { TableRowElement: TableRowElement }}
 
 // Table data element.
-@Elements.register
-export class TableDataElement extends VElementTagMap.td {
-
-	static default_style = {
+@Elements.create({
+    name: "TableDataElement",
+    default_style: {
 		"text-align": "left",
 		"padding": "0px 10px",
-	};
+	},
+})
+export class TableDataElement extends VElementTagMap.td {
 	
 	// Constructor.
 	constructor(...content: any[]) {
@@ -129,15 +135,16 @@ declare module './any_element.d.ts' { interface AnyElementMap { TableDataElement
 // Inner Table element.
 // Use a container for the Table element so a border color + border radius can be set.
 // Since border-collapse collapse prevents a border radius but is required for different background for the table head.
-@Elements.register
-export class InnerTableElement extends VElementTagMap.table {
-
-	static default_style = {
+@Elements.create({
+    name: "InnerTableElement",
+    default_style: {
 		"border-collapse": "collapse", /* Ensures there is no spacing between table cells */
 	    "padding": "0",
 	    "margin": 0,
 	    "border-spacing": 0, /* Removes any default spacing between cells */
-	};
+	},
+})
+export class InnerTableElement extends VElementTagMap.table {
 	
 	// Constructor.
 	constructor(...content: any[]) {
@@ -156,12 +163,13 @@ export const NullInnerTable = Elements.create_null(InnerTableElement);
 declare module './any_element.d.ts' { interface AnyElementMap { InnerTableElement: InnerTableElement }}
 
 // Table data element.
-@Elements.register
-export class TableElement extends VElementTagMap.div {
-
-	static default_style = {
+@Elements.create({
+    name: "TableElement",
+    default_style: {
 		"color": "black",
-	};
+	},
+})
+export class TableElement extends VElementTagMap.div {
 	
 	// Attributes.
 	public table_rows: TableRowElement[];
@@ -268,7 +276,7 @@ export class TableElement extends VElementTagMap.div {
 				)
 				.parent(this),
 			)
-			.width(100%)
+			.width("100%")
 		)
 	}
 

package/frontend/src/ui/tabs.ts

@@ -4,7 +4,7 @@
  */
 
 // Imports.
-import { Elements } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement } from "../elements/module.js"
 import { Scheme } from "../modules/scheme"
 import { VStack, VStackElement, HStack, HStackElement, ZStack } from "./stack"
 import { ForEach } from "./for_each"
@@ -60,20 +60,21 @@ type OnTabHeader = ((name: string, header: HStackElement, tab: TabsElement) => a
 				A callback that can be set to edit the tab's header title node.
 				The callback takes the arguments local header node and parent tabs node as `(header_node, tabs_node)`.
  */
-@Elements.register
-export class TabsElement extends VStackElement {
-
-	static default_style =  {
-		...VStackElement.default_style,
-		"font-size": "16px",
-		"font-weight": "500",
-		"overflow-x": "hidden",
-		"width": "100%",
-		"--tabs-tint": "blue",
-		"--tabs-tab-opac": 0.8,
-		"--tabs-div-bg": "gray",
-		"--tabs-div-opac": 0.5,
-	};
+@Elements.create({
+    name: "TabsElement",
+    default_style:  {
+        ...VStackElement.default_style,
+        "font-size": "16px",
+        "font-weight": "500",
+        "overflow-x": "hidden",
+        "width": "100%",
+        "--tabs-tint": "blue",
+        "--tabs-tab-opac": 0.8,
+        "--tabs-div-bg": "gray",
+        "--tabs-div-opac": 0.5,
+    },
+})
+export class TabsElement extends (VStackElement as any as VElementBaseSignature) {
 
 	// Attributes.
 	public _tint: string;
@@ -101,7 +102,7 @@ export class TabsElement extends VStackElement {
 
 		// Inherit.
 		super();
-		this._init_derived({
+		this._init({
 			derived: TabsElement,
 		})
 
@@ -293,10 +294,10 @@ export class TabsElement extends VStackElement {
 					return item;
 				}),
 			)
-			.width(100%),
+			.width("100%"),
 
 			this._div = Divider()
-				.frame(100%, 1)
+				.frame("100%", 1)
 				.background(this._div_bg)
 				.margin(1, 0, 25, 0),
 
@@ -316,7 +317,7 @@ export class TabsElement extends VStackElement {
 			if (content_stack.overflow_x() === "visible") {
 				content_stack.overflow_x("hidden");
 			}
-			content_stack.width(100%);
+			content_stack.width("100%");
 			content_stack.transition(`opacity ${this._duration}ms ease-in-out`)
 			zstack.append(content_stack);
 			++index;

package/frontend/src/ui/text.ts

@@ -4,20 +4,21 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 
 // Text.
-@Elements.register
+@Elements.create({
+    name: "TextElement",
+    default_style: {
+        "margin": "0px 0px 0px 0px",
+        "padding": "0", // 2.5px
+        "font-size": "20px",
+        "color": "inherit",
+        "text-align": "inherit",
+        "white-space": "wrap",
+    }
+})
 export class TextElement extends VElementTagMap.p {
-
-	static default_style = {
-		"margin": "0px 0px 0px 0px",
-		"padding": "0", // 2.5px
-		"font-size": "20px",
-		"color": "inherit",
-		"text-align": "inherit",
-		"white-space": "wrap",
-	};
 	
 	// Constructor.
 	constructor(text?: string) {

package/frontend/src/ui/title.ts

@@ -4,19 +4,20 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 
 // Title.
-@Elements.register
+@Elements.create({
+    name: "TitleElement",
+    default_style: {
+        "margin": "0px 0px 0px 0px",
+        "color": "inherit",
+        "white-space": "wrap",
+        "text-align": "inherit",
+        "font-weight": "700", // for safari since it inherits HTMLElement only.
+    }
+})
 export class TitleElement extends VElementTagMap.h1 {
-
-	static default_style = {
-		"margin": "0px 0px 0px 0px",
-		"color": "inherit",
-		"white-space": "wrap",
-		"text-align": "inherit",
-		"font-weight": "700", // for safari since it inherits HTMLElement only.
-	}
 	
 	// Constructor.
 	constructor(text: string = "") {
@@ -35,17 +36,18 @@ export const NullTitle = Elements.create_null(TitleElement);
 declare module './any_element.d.ts' { interface AnyElementMap { TitleElement: TitleElement }}
 
 // Subtitle.
-@Elements.register
+@Elements.create({
+    name: "SubtitleElement",
+    tag: "h2",
+    default_style: {
+        "margin": "0px 0px 0px 0px",
+        "color": "inherit",
+        "white-space": "wrap",
+        "text-align": "inherit",
+        "font-weight": "700", // for safari since it inherits HTMLElement only.
+    },
+})
 export class SubtitleElement extends VElementTagMap.h1 {
-
-	static element_tag = "h2";
-	static default_style = {
-		"margin": "0px 0px 0px 0px",
-		"color": "inherit",
-		"white-space": "wrap",
-		"text-align": "inherit",
-		"font-weight": "700", // for safari since it inherits HTMLElement only.
-	};
 	
 	// Constructor.
 	constructor(text: string = "") {

package/frontend/src/ui/ui.ts

@@ -8,7 +8,6 @@ export * from "./border_button.js"
 export * from "./canvas.js"
 export * from "./checkbox.js"
 export * from "./code.js"
-export * from "./color.js"
 export * from "./context_menu.js"
 export * from "./css.js"
 export * from "./divider.js"
@@ -34,7 +33,6 @@ export * from "./switch.js"
 export * from "./table.js"
 export * from "./tabs.js"
 export * from "./text.js"
-export * from "./theme.js"
 export * from "./title.js"
 export * from "./view.js"
 export type { AnyElement } from "./any_element.d.ts"

package/frontend/src/ui/view.ts

@@ -4,30 +4,31 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap, AppendType } from "../elements/module.js"
 
 // Scroller.
-@Elements.register
+@Elements.create({
+    name: "ViewElement",
+    default_style: {
+        "position": "absolute",
+        "top": "0",
+        "right": "0",
+        "bottom": "0",
+        "left": "0",
+        "padding": "0px",
+        "overflow": "hidden",
+        "overflow-y": "none",
+        "background": "none",
+        "display": "flex", // to support vertical spacers.
+        // "text-align": "start",
+        "align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
+        "flex-direction": "column",
+    },
+})
 export class ViewElement extends VElementTagMap.div {
-
-	static default_style = {
-		"position": "absolute",
-		"top": "0",
-		"right": "0",
-		"bottom": "0",
-		"left": "0",
-		"padding": "0px",
-		"overflow": "hidden",
-		"overflow-y": "none",
-		"background": "none",
-		"display": "flex", // to support vertical spacers.
-		// "text-align": "start",
-		"align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
-		"flex-direction": "column",
-	};
 	
 	// Constructor.
-	constructor(...children: any[]) {
+    constructor(...children: AppendType[]) {
 		
 		// Initialize base class.
 		super({

package/frontend/src/volt.ts

@@ -9,7 +9,8 @@ export * from "./modules/string.js" // @noexport
 export * from "./modules/array.js" // @noexport
 export * from "./modules/object.js" // @noexport
 export * from "./modules/auth.js"
-export * from "./modules/colors.js"
+export * from "./modules/color.js"
+// export * from "./modules/colors.js"
 export * from "./modules/compression.js"
 export * from "./modules/cookies.js"
 export * from "./modules/date.js" // @todo
@@ -23,6 +24,7 @@ export * from "./modules/support.js"
 export * from "./modules/themes.js"
 export * from "./modules/user.js"
 export * from "./modules/utils.js"
+export * from "./modules/theme.js"
 
 // Elements.
 export * from "./elements/module.js"

package/frontend/{compile.js → tools/compile.old.js}

@@ -8,8 +8,8 @@ import * as vhighlight from "/Users/administrator/persistance/private/dev/vinc/v
 // -------------------------------------------------------------------------------------------------------------------------
 // Compile Test.
 
-import * as Preprocessing from "../backend/dist/esm/plugins/ts/preprocessing.js";
-import * as TypeScript from "../backend/dist/esm/plugins/ts/compiler.js";
+import * as Preprocessing from "../../backend/dist/esm/plugins/ts/preprocessing.js";
+import * as TypeScript from "../../backend/dist/esm/plugins/ts/compiler.js";
 
 import * as ts from "typescript";
 import * as fs from "fs";