@vandenberghinc/volt 1.1.4 → 1.1.6

package/frontend/src/ui/loader_button.ts

@@ -4,35 +4,40 @@
  */
 
 // Imports.
-import { Elements, VDivElement, VDiv } from "../elements/module.js";
+import { Elements, VElementBaseSignature, VElement, VDivElement, VDiv, VElementTagMap } from "../elements/module.js";
 import { AnchorHStackElement } from "./stack";
 import { RingLoader, RingLoaderElement } from "./loaders"
+import { AnyElement } from "./any_element.js";
 
-export class myClass extends AnchorHStackElement {
-    constructor() { super(); }
-}
+// 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",
-	}
+@Elements.create({
+    name: "LoaderButtonElement",
+    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",
+    }
+})
+export class LoaderButtonElement extends (AnchorHStackElement as any as VElementBaseSignature) {
+
+    // Attributes.
 	public nodes: {
 	    text: VDivElement;
 	    loader: RingLoaderElement;
@@ -62,7 +67,7 @@ export class LoaderButtonElement extends AnchorHStackElement {
 
 		// Initialize base classes.
 		super();
-		this._init_derived({
+		this._init({
 			derived: LoaderButtonElement,
 		});
 
@@ -186,7 +191,3 @@ 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

@@ -4,7 +4,7 @@
  */
 
 // Imports.
-import { Elements, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap } from "../elements/module.js"
 
 // RingLoader.
 // - The width and height must be in pixels.
@@ -15,17 +15,18 @@ import { Elements, VElementTagMap } from "../elements/module.js"
  * @desc:
  * 		The ring loader element.
  */
-@Elements.register
+@Elements.create({
+    name: "RingLoaderElement",
+    default_style: {
+        "width": "80px",
+        "height": "80px",
+        "--child-background": "black",
+        "--border-width-factor": "1",
+        "display": "inline-block",
+        "position": "relative",
+    },
+})
 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() {

package/frontend/src/ui/popup.ts

@@ -4,9 +4,9 @@
  */
 
 // Imports.
-import { Elements } from "../elements/module.js"
-import { Mutex, MutexType } from "../modules/mutex"
-import { HStack, HStackElement, VStack, VStackElement } from "./stack"
+import { Elements, VElementBaseSignature, VElement, AppendType } from "../elements/module.js"
+import { Mutex } from "../modules/mutex"
+import { FrameElement, HStack, HStackElement, VStack, VStackElement } from "./stack"
 import { Text, TextElement } from "./text"
 import { Title, TitleElement } from "./title"
 import { LoaderButtonElement, LoaderButton } from "./loader_button"
@@ -14,15 +14,17 @@ import { ImageMask, ImageMaskElement } from "./image"
 
 
 // Macros.
-export type OnYesNoPopup = ((element: PopupElement) => Promise<any> | void)
+export type OnYesNoPopup = ((element: YesNoPopupElement) => Promise<any> | void)
 
 // RingLoader.
 // - The width and height must be in pixels.
-@Elements.register
-export class PopupElement extends VStackElement {
-			
+@Elements.create({
+    name: "YesNoPopupElement",
+})
+export class YesNoPopupElement extends (VStackElement as any as VElementBaseSignature) {
+    
 	// Attributes.
-    public p_mutex: MutexType;
+    public p_mutex: Mutex;
     public p_auto_hide: boolean;
     public p_auto_remove: boolean;
 	public p_animation_duration: number;
@@ -78,10 +80,12 @@ export class PopupElement extends VStackElement {
 
 		// Initialize base class.
 		super();
-		this._init_derived({ derived: PopupElement })
+		this._init({
+            derived: YesNoPopupElement,
+        })
 
 		// Mutex.
-        this.p_mutex = Mutex();
+        this.p_mutex = new Mutex();
 
         // Args.
         this.p_auto_hide = auto_hide;
@@ -231,7 +235,7 @@ export class PopupElement extends VStackElement {
 
 	// Set default since it inherits HStackElement.
 	set_default(): this {
-		return super.set_default(PopupElement);
+		return super.set_default(YesNoPopupElement);
 	}
 
 	// Await the previous popup.
@@ -365,6 +369,156 @@ export class PopupElement extends VStackElement {
         document.body.addEventListener("keydown", this.p_escape_handler); // for some reason on_key_down on main element is not catched.
 	}
 }
-export const Popup = Elements.wrapper(PopupElement);
-export const NullPopup = Elements.create_null(PopupElement);
-declare module './any_element.d.ts' { interface AnyElementMap { PopupElement: PopupElement }}
+export const YesNoPopup = Elements.wrapper(YesNoPopupElement);
+export const NullYesNoPopup = Elements.create_null(YesNoPopupElement);
+declare module './any_element.d.ts' { interface AnyElementMap { YesNoPopupElement: YesNoPopupElement }}
+
+// /** Custom popup */
+// @Elements.create({
+//     name: "CustomPopupElement",
+// })
+// export class CustomPopupElement extends (VStackElement as any as VElementBaseSignature) {
+
+//     public content: FrameElement;
+//     public close: 
+
+//     close_border(...args) {
+//         this.close.border(...args);
+//         return this;
+//     }
+
+//     constructor(...children: AppendType[]) {
+
+//         // Initialize base class.
+//         super();
+//         this._init({
+//             derived: CustomPopupElement,
+//         })
+//         const close_handler = (event) => {
+//             if (event.key === "Escape") {
+//                 popup.close();
+//             }
+//         }
+//         this.append(
+//             this.content = UI.Widget(...children)
+//                 .background(Theme.bg_1)
+//                 .max_width(400)
+//                 .parent(this),
+//             Frame(
+//                 close = ImageMask("/static/icons/close.webp")
+//                     .frame(10, 10)
+//                     .flex(0)
+//                     .transition_mask("background 300ms ease-in-out")
+//                     .color(Theme.bg),
+//             )
+//                 .background(Theme.auto_darken_lighten("fg", 0.5))
+//                 .border_radius("50%")
+//                 .border(1, Theme.div_bg)
+//                 .frame(30, 30)
+//                 .center().center_vertical()
+//                 .position(25, 25, null, null)
+//                 .on_click(() => popup.close())
+//                 .hover_transitions([
+//                     { target: "this", selected: Theme.auto_darken_lighten("fg", 0.6), unselected: Theme.auto_darken_lighten("fg", 0.5), methods: ["background"] },
+//                     { target: close, selected: Theme.bg_hover, unselected: Theme.bg, methods: ["color"] },
+//                     // { target: "this", selected: Theme.fg, unselected: Theme.fg_2, methods: ["color"] },
+//                     // { target: "this", selected: Theme.fg, unselected: Theme.fg_2, methods: ["color"] },
+//                 ])
+//         )
+//             .position(0, 0, 0, 0)
+//             .center()
+//             .center_vertical()
+//             .background("#00000008")
+//             .padding(25)
+//             .background_blur(5)
+//             .transition("opacity 300ms ease-in-out")
+//             .on_click((e, event) => {
+//                 if (event.target === content || content.is_nested_child(event.target)) {
+//                     return;
+//                 }
+//                 e.close()
+//             })
+
+
+//         }
+
+//     // Set width on content instead of parent.
+//     width(): string | number;
+//     width(value: string | number, check_attribute?: boolean): this;
+//     width(value?: string | number, check_attribute: boolean = true): this | number | string {
+//         if (this._e === undefined) {
+//             return super.width(value as any, check_attribute);
+//         }
+//         if (value == null) {
+//             return this._e.width.toString();
+//         }
+//         // Assign percentage values to the root.
+//         if (typeof value === "string" && value.includes("%")) {
+//             super.width(value as any, false);
+//         } else {
+//             this._e.style.width = this.pad_numeric(value, "px");
+//             this._e.width = value as any;
+//         }
+//         return this;
+//     }
+//     min_width(): string | number
+//     min_width(value: string | number): this;
+//     min_width(value?: string | number): this | string | number {
+//         if (this._e === undefined) {
+//             return super.min_width(value as any);
+//         }
+//         if (value == null) {
+//             return this._e.style.minWidth;
+//         }
+//         // Assign percentage values to the root.
+//         if (typeof value === "string" && value.includes("%")) {
+//             super.min_width(value as any);
+//         } else {
+//             this._e.style.minWidth = this.pad_numeric(value, "px");
+//         }
+//         return this;
+//     }
+//     max_width(): string | number
+//     max_width(value: string | number): this;
+//     max_width(value?: string | number): this | string | number {
+//         if (this._e === undefined) {
+//             return super.max_width(value as any);
+//         }
+//         if (value == null) {
+//             return this._e.style.maxWidth;
+//         }
+//         // Assign percentage values to the root.
+//         if (typeof value === "string" && value.includes("%")) {
+//             super.max_width(value as any);
+//         } else {
+//             this._e.style.maxWidth = this.pad_numeric(value, "px");
+//         }
+//         return this;
+//     }
+
+//         max_width(value: number) {
+//             content.max_width(value);
+//             return this;
+//         }
+
+//         open() {
+//             document.body.addEventListener("keydown", close_handler);
+//             UI.view.append(this);
+//             this.opacity(0)
+//             this.show();
+//             this.getBoundingClientRect();
+//             this.opacity(1);
+//             return this;
+//         }
+//         close() {
+//             document.body.removeEventListener("keydown", close_handler);
+//             this.opacity(0)
+//             setTimeout(() => this.remove(), 300)
+//             return this;
+//         }
+        
+//     }
+// }
+// export const CustomPopup = Elements.wrapper(CustomPopupElement);
+// export const NullCustomPopup = Elements.create_null(CustomPopupElement);
+// declare module './any_element.d.ts' { interface AnyElementMap { CustomPopupElement: CustomPopupElement } }

package/frontend/src/ui/pseudo.ts

@@ -4,16 +4,18 @@
  */
 
 // Imports.
-import { Elements, VElement, VElementTagMap } from "../elements/module.js"
+import { Elements, VElementBaseSignature, VElement, VElementTagMap, AppendType } from "../elements/module.js"
 
 // Divider.
-@Elements.register
+@Elements.create({
+    name: "PseudoElement",
+})
 export class PseudoElement extends VElementTagMap.div {
 
 	// Attributes.
 	public added_to_elements: { node: VElement, type: string }[] = [];
 
-	constructor(...children: any[]) {
+    constructor(...children: AppendType[]) {
 		super({ derived: PseudoElement, });
 
 		// Append.