@vandenberghinc/volt 1.1.4 → 1.1.6

package/frontend/src/ui/slider.ts

@@ -4,15 +4,18 @@
  */
 
 // Imports.
-import { Elements } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement } from "../elements/module.js"
 import { VStackElement, VStack, HStack, HStackElement } from "./stack"
 
-// Slider.
-@Elements.register
-export class SliderElement extends VStackElement {
+export namespace SliderElement {
+    export type OnChangeCallback<This> = (element: This, value: number) => void;
+}
 
-    // Macros.
-    #macro OnChangeCallback ((element: SliderElement, value: number) => void)
+// Slider.
+@Elements.create({
+    name: "SliderElement",
+})
+export class SliderElement extends (VStackElement as any as VElementBaseSignature) {
 
     // Attributes.
     public _type: string;
@@ -36,7 +39,9 @@ export class SliderElement extends VStackElement {
 
         // Initialize base class.
         super();
-        this._init_derived({ derived: SliderElement, })
+        this._init({
+            derived: SliderElement,
+        })
 
         // Attributes.
         this._type = "SliderElement";
@@ -170,11 +175,11 @@ export class SliderElement extends VStackElement {
 
     // Set the on change handler.
     // @ts-ignore
-    on_change(): OnChangeCallback;
+    on_change(): SwitchElement.OnChangeCallback<this>;
     // @ts-ignore
-    on_change(handler: OnChangeCallback): this 
+    on_change(handler: SwitchElement.OnChangeCallback<this>): this 
     // @ts-ignore
-    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/spacer.ts

@@ -4,20 +4,23 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 
 // Spacer.
-@Elements.register
+@Elements.create({
+    name: "SpacerElement",
+    default_style: {
+        "margin": "0px",
+        "padding": "0px",
+        "flex": "1",
+        "flex-grow": "1",
+        "background": "#00000000",
+        "filter": "opacity(0)",
+        "justify-content": "stretch",
+    }
+})
 export class SpacerElement extends VElementTagMap.div {
-	static default_style = {
-		"margin": "0px",
-		"padding": "0px",
-		"flex": "1",
-		"flex-grow": "1",
-		"background": "#00000000",
-		"filter": "opacity(0)",
-		"justify-content": "stretch",
-	};
+
 	constructor() {
 		super({
 			derived: SpacerElement,

package/frontend/src/ui/span.ts

@@ -4,11 +4,15 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 
 // Span.
-@Elements.register
+@Elements.create({
+    name: "SpanElement",
+})
 export class SpanElement extends VElementTagMap.span {
+
+    // Constructor.
 	constructor(inner_html?: string) {
 		
 		// Initialize base class.

package/frontend/src/ui/stack.ts

@@ -4,7 +4,7 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap, VElement } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElementTagMap, VElement, AppendType } from "../elements/module.js"
 
 // Div element
 // export const VDivElement = Elements.create({type: "Div", tag: "div"}); // should always remain a "div" since some elements like LoaderButton rely on the behaviour of a div.
@@ -14,225 +14,238 @@ import { Elements, VElementTagMap, VElement } from "../elements/module.js"
 // declare module './any_element.d.ts' { interface AnyElementMap { VDivElement: VDivElement }}
 
 // VStack.
-@Elements.register
+@Elements.create({
+    name: "FrameElement",
+    default_style: {
+        // "position": "relative",
+        "margin": "0px",
+        "padding": "0px",
+        // "clear": "both",
+        "display": "block",
+        "overflow": "hidden",
+        "width": "100%", // to ensure its passed along all children.
+    }
+})
 export class FrameElement extends VElementTagMap.div {
 
-	static default_style = {
-		// "position": "relative",
-		"margin": "0px",
-		"padding": "0px",
-		// "clear": "both",
-		"display": "block",
-		"overflow": "visible",
-	};
-	
-	// Constructor.
-	constructor(...children: any[]) {
-		
-		// Initialize base class.
-		super({
-			derived: FrameElement,
-		});
-
-		// Add children.
-		this.append(...children);
-
-	}
+    // Constructor.
+    constructor(...children: AppendType[]) {
+
+        // Initialize base class.
+        super({
+            derived: FrameElement,
+        });
+
+        // Add children.
+        this.append(...children);
+
+    }
 }
 export const Frame = Elements.wrapper(FrameElement);
 export const NullFrame = Elements.create_null(FrameElement);
-declare module './any_element.d.ts' { interface AnyElementMap { FrameElement: FrameElement }}
+declare module './any_element.d.ts' { interface AnyElementMap { FrameElement: FrameElement } }
 
 // VStack.
-@Elements.register
+@Elements.create({
+    name: "VStackElement",
+    default_style: {
+        // "position": "relative",
+        "margin": "0px",
+        "padding": "0px",
+        // "clear": "both",
+        "display": "flex", // to support vertical spacers.
+        "overflow": "visible",
+        // "flex": "1", // disabled to support horizontal spacers in VStacks.
+        "align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
+        // "align-items": "flex-start", // otherwise the children automatically expand width to match the vstacks width.
+        "flex-direction": "column",
+        // "text-align": "start",
+        "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+        "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+        "width": "100%", // to ensure its passed along all children.
+    }
+})
 export class VStackElement extends VElementTagMap.div {
 
-	static default_style = {
-		// "position": "relative",
-		"margin": "0px",
-		"padding": "0px",
-		// "clear": "both",
-		"display": "flex", // to support vertical spacers.
-		"overflow": "visible",
-		// "flex": "1", // disabled to support horizontal spacers in VStacks.
-		"align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
-		// "align-items": "flex-start", // otherwise the children automatically expand width to match the vstacks width.
-		"flex-direction": "column",
-		// "text-align": "start",
-		"outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-		"border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-	};
-	
-	// Constructor.
-	constructor(...children: any[]) {
-		
-		// Initialize base class.
-		super({
-			derived: VStackElement,
-		});
-
-		// Add children.
-		this.append(...children);
-
-	}	
+    // Constructor.
+    constructor(...children: AppendType[]) {
+
+        // Initialize base class.
+        super({
+            derived: VStackElement,
+        });
+
+        // Add children.
+        this.append(...children);
+
+    }
 }
 export const VStack = Elements.wrapper(VStackElement);
 export const NullVStack = Elements.create_null(VStackElement);
-declare module './any_element.d.ts' { interface AnyElementMap { VStackElement: VStackElement }}
+declare module './any_element.d.ts' { interface AnyElementMap { VStackElement: VStackElement } }
 
 // AnchorVStack.
-@Elements.register
+@Elements.create({
+    name: "AnchorVStackElement",
+    default_style: {
+        // "position": "relative",
+        "margin": "0px",
+        "padding": "0px",
+        // "clear": "both",
+        "display": "flex", // to support vertical spacers.
+        "overflow": "visible",
+        // "flex": "1", // disabled to support horizontal spacers in VStacks.
+        "align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
+        // "align-items": "flex-start", // otherwise the children automatically expand width to match the vstacks width.
+        "flex-direction": "column",
+        // "text-align": "start",
+        "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+        "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+        "text-decoration": "none",
+
+        "width": "100%", // to ensure its passed along all children.
+
+        // After extending VStack.
+        "color": "inherit", // inherit colors since <a> does not have that and a <div> does.
+    },
+})
 export class AnchorVStackElement extends VElementTagMap.a {
 
-	static default_style = {
-		// "position": "relative",
-		"margin": "0px",
-		"padding": "0px",
-		// "clear": "both",
-		"display": "flex", // to support vertical spacers.
-		"overflow": "visible",
-		// "flex": "1", // disabled to support horizontal spacers in VStacks.
-		"align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
-		// "align-items": "flex-start", // otherwise the children automatically expand width to match the vstacks width.
-		"flex-direction": "column",
-		// "text-align": "start",
-		"outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-		"border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-		"text-decoration": "none",
-
-		// After extending VStack.
-		"color": "inherit", // inherit colors since <a> does not have that and a <div> does.
-	};
-	
-	// Constructor.
-	constructor(...children: any[]) {
-		
-		// Initialize base class.
-		super({
-			derived: AnchorVStackElement,
-		});
-
-		// Add children.
-		this.append(...children);
-
-	}
+    // Constructor.
+    constructor(...children: AppendType[]) {
+
+        // Initialize base class.
+        super({
+            derived: AnchorVStackElement,
+        });
+
+        // Add children.
+        this.append(...children);
+
+    }
 }
 export const AnchorVStack = Elements.wrapper(AnchorVStackElement);
 export const NullAnchorVStack = Elements.create_null(AnchorVStackElement);
-declare module './any_element.d.ts' { interface AnyElementMap { AnchorVStackElement: AnchorVStackElement }}
+declare module './any_element.d.ts' { interface AnyElementMap { AnchorVStackElement: AnchorVStackElement } }
 
 // const stack: VElement = new AnchorVStackElement();
 
 // HStack.
-@Elements.register
-export class HStackElement extends VElementTagMap.div {
-
-	static default_style = {
-		// "position": "relative",
-		"margin": "0px",
-		"padding": "0px",
-		// "clear": "both",
-		"overflow-x": "visible",
-		"overflow-y": "visible",
-		// "text-align": "start",
-		"display": "flex",
-		"flex-direction": "row",
-		"align-items": "flex-start", // disable the auto extending of the childs height to the max child height.
-		// "flex": "1", // disabled to support horizontal spacers in VStacks.
-		"flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
-		"outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-		"border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-	};
-
-	// Constructor.
-	constructor(...children: any[]) {
-		
-		// Initialize base class.
-		super({
-			derived: HStackElement,
-		});
-		
-		// Add children.
-		this.append(...children);
-	}
+@Elements.create({
+    name: "HStackElement",
+    default_style: {
+        // "position": "relative",
+        "margin": "0px",
+        "padding": "0px",
+        // "clear": "both",
+        "overflow-x": "visible",
+        "overflow-y": "visible",
+        // "text-align": "start",
+        "display": "flex",
+        "flex-direction": "row",
+        "align-items": "flex-start", // disable the auto extending of the childs height to the max child height.
+        // "flex": "1", // disabled to support horizontal spacers in VStacks.
+        "flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
+        "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+        "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+        "width": "100%", // to ensure its passed along all children.
+    },
+})
+export class HStackElement extends VElementTagMap.div {;
+
+    // Constructor.
+    constructor(...children: AppendType[]) {
+
+        // Initialize base class.
+        super({
+            derived: HStackElement,
+        });
+
+        // Add children.
+        this.append(...children);
+    }
 }
 export const HStack = Elements.wrapper(HStackElement);
 export const NullHStack = Elements.create_null(HStackElement);
-declare module './any_element.d.ts' { interface AnyElementMap { HStackElement: HStackElement }}
+declare module './any_element.d.ts' { interface AnyElementMap { HStackElement: HStackElement } }
 
 // AnchorHStack
-@Elements.register
+@Elements.create({
+    name: "AnchorHStackElement",
+    default_style: {
+        // "position": "relative",
+        "margin": "0px",
+        "padding": "0px",
+        // "clear": "both",
+        "overflow-x": "visible",
+        "overflow-y": "visible",
+        // "text-align": "start",
+        "display": "flex",
+        "flex-direction": "row",
+        "align-items": "flex-start", // disable the auto extending of the childs height to the max child height.
+        // "flex": "1", // disabled to support horizontal spacers in VStacks.
+        "flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
+        "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+        "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+        "text-decoration": "none",
+        "width": "100%", // to ensure its passed along all children.
+
+        // After extending VStack.
+        "color": "inherit", // inherit colors since <a> does not have that and a <div> does.
+    },
+})
 export class AnchorHStackElement extends VElementTagMap.a {
 
-	static default_style = {
-		// "position": "relative",
-		"margin": "0px",
-		"padding": "0px",
-		// "clear": "both",
-		"overflow-x": "visible",
-		"overflow-y": "visible",
-		// "text-align": "start",
-		"display": "flex",
-		"flex-direction": "row",
-		"align-items": "flex-start", // disable the auto extending of the childs height to the max child height.
-		// "flex": "1", // disabled to support horizontal spacers in VStacks.
-		"flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
-		"outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-		"border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-		"text-decoration": "none",
-
-		// After extending VStack.
-		"color": "inherit", // inherit colors since <a> does not have that and a <div> does.
-	};
-
-	// Constructor.
-	constructor(...children: any[]) {
-		
-		// Initialize base class.
-		super({
-			derived: AnchorHStackElement,
-		});
-		
-		// Add children.
-		this.append(...children);
-	}
+    // Constructor.
+    constructor(...children: AppendType[]) {
+
+        // Initialize base class.
+        super({
+            derived: AnchorHStackElement,
+        });
+
+        // Add children.
+        this.append(...children);
+    }
 }
 export const AnchorHStack = Elements.wrapper(AnchorHStackElement);
 export const NullAnchorHStack = Elements.create_null(AnchorHStackElement);
-declare module './any_element.d.ts' { interface AnyElementMap { AnchorHStackElement: AnchorHStackElement }}
+declare module './any_element.d.ts' { interface AnyElementMap { AnchorHStackElement: AnchorHStackElement } }
 
 // ZStack.
-@Elements.register
+@Elements.create({
+    name: "ZStackElement",
+    default_style: {
+        // "position": "relative",
+        "margin": "0px",
+        "padding": "0px",
+        "display": "grid",
+        // "text-align": "start",
+        "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+        "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+        "width": "100%", // to ensure its passed along all children.
+    },
+})
 export class ZStackElement extends VElementTagMap.div {
 
-	static default_style = {
-		// "position": "relative",
-		"margin": "0px",
-		"padding": "0px",
-		"display": "grid",
-		// "text-align": "start",
-		"outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-		"border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-	};
-	
-	// Constructor.
-	constructor(...children: any[]) {
-		
-		// Initialize base class.
-		super({
-			derived: ZStackElement,
-		});
-		
-		// Add children.
-		this.zstack_append(...children);
-
-	}
-	
-	// Override append.
-	append(...children: any[]) : this {
-		return this.zstack_append(...children);
-	}
+    // Constructor.
+    constructor(...children: AppendType[]) {
+
+        // Initialize base class.
+        super({
+            derived: ZStackElement,
+        });
+
+        // Add children.
+        this.zstack_append(children);
+
+    }
+
+    // Override append.
+    append(...children: AppendType[]): this {
+        return this.zstack_append(children);
+    }
 }
 export const ZStack = Elements.wrapper(ZStackElement);
 export const NullZStack = Elements.create_null(ZStackElement);
-declare module './any_element.d.ts' { interface AnyElementMap { ZStackElement: ZStackElement }}
+declare module './any_element.d.ts' { interface AnyElementMap { ZStackElement: ZStackElement } }