@vandenberghinc/volt 1.1.2

package/frontend/src/ui/theme.ts

@@ -0,0 +1,279 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements } from "../elements/module.js"
+import { Colors } from "../modules/colors"
+import { Themes as ThemesModule } from "../modules/themes"
+
+type OnActivateCallback = (element: ThemeClass, theme: string) => void;
+
+// Themes class.
+/* 	@docs:
+	@nav: Frontend
+    @chapter: Themes
+    @note: The `ThemesClass` is also initializable under function `Themes`.
+	@desc:
+		A themes class to efficiently style the site using themes.
+
+		The constructor arguments must be a theme style per theme name. Every theme variable should exist in all themes or it may cause undefined behaviour. The theme name that is passed first will be the active theme by default.
+		```
+		Theme("main-theme", {
+			light: {
+				text_fg: "#000000",
+			},
+			dark: {
+				text_fg: "#FFFFFF",
+			},
+		})
+		```
+
+		When theme attributes are retrieved, by default they will be the active theme's attribute as a css variable. So this can be passed to an element.
+		However, some element functions do not accept css variables, in this case the `value()` function can be used to retrieve the raw value. Do not forget to apply an `on_theme_update()` callback on the elements where you use this.
+ */
+export class ThemeClass {
+
+	// Attributes.
+	public active_id?: string;
+	public active?: Record<string, any>;
+	public _theme_ids: string[];
+	public _attrs: string[];
+	public _css_vars: Record<string, string | String>;
+	public _id: string;
+	public _on_activate_callback?: OnActivateCallback;
+
+	constructor(
+		id: string,
+		themes: Record<string, any> = {},
+	) {
+
+		// Attributes.
+		this.active_id = undefined;
+		this.active = undefined;
+		this._theme_ids = [];
+		this._attrs = [];
+		this._css_vars = {};
+		this._id = id;
+
+		// Assign themes.
+		Object.keys(themes).iterate((theme) => {
+
+			// Initialize.
+			const theme_style = themes[theme] as Record<string, any>;
+			this._theme_ids.append(theme);
+			this[theme] = theme_style;
+
+			// Activate first theme.
+			if (this.active_id === undefined) {
+				this.active_id = theme;
+				this.active = theme_style;
+				Object.keys(this.active as any).iterate((id) => {
+					document.documentElement.style.setProperty(`--${this._id}_${id}`, (this.active as any)[id] ?? "");
+				});
+			}
+
+			// Initialize attr funcs.
+			Object.keys(theme_style).iterate((id) => {
+				this._add_attr(id, theme);
+			})
+		})
+	}
+
+	// Add a new attribute.
+	_add_attr(id: string, theme?: string) : void {
+		if (theme == null) {
+			this._css_vars[id] = `var(--${this._id}_${id})`;
+		} else {
+			const theme_style = this[theme];
+			if (
+				typeof theme_style[id] === "string" &&
+				(
+					theme_style[id].indexOf("linear-gradient") !== -1 ||
+					theme_style[id].indexOf("radial-gradient") !== -1
+				)
+			) {
+				theme_style[id] = new String(theme_style[id]);
+				theme_style[id]._is_gradient = true;
+				this._css_vars[id] = new String(`var(--${this._id}_${id})`);
+				(this._css_vars[id] as any)._is_gradient = true;
+			} else {
+				this._css_vars[id] = `var(--${this._id}_${id})`;
+			}
+		}
+		Object.defineProperty(this, id, {
+			get: function() {
+				return this._css_vars[id];
+			},
+			set: function(v: any) {
+				// only for support this does not work however.
+				// document.documentElement.style.setProperty(`--${this._id}_${id}`, (this.active as any)[id] ?? "");
+				// return this;
+			},
+			enumerable: true,
+			configurable: true,
+		});
+		this._attrs.append(id);
+	}
+
+	// Assign a new value.
+	set(theme: string, key: string, value: any) : this {
+
+		// Update theme.
+		const theme_style = this[theme];
+		if (typeof value === "string" && (value.indexOf("linear-gradient") !== -1 || value.indexOf("radial-gradient") !== -1)) {
+			theme_style[key] = new String(value);
+			theme_style[key]._is_gradient = true;
+			this._css_vars[key] = new String(`var(--${this._id}_${key})`);
+			(this._css_vars[key] as any)._is_gradient = true;
+		} else {
+			theme_style[key] = value;
+			this._css_vars[key] = `var(--${this._id}_${key})`;
+		}
+
+		// Set property.
+		if (this.active_id === theme) {
+			document.documentElement.style.setProperty(`--${this._id}_${key}`, (this.active as any)[key] ?? "");
+		}
+
+		// Response.
+		return this;
+	}
+
+	get id(): string {
+		return `${this._id}.${this.active_id}`
+	}
+
+	// Initialize by cached.
+	initialize(id?: string) : this {
+		if (id == null) {
+			id = localStorage.getItem(this._id) ?? undefined;
+		}
+		if (id != null && this._theme_ids.includes(id)) {
+			this.activate(id);
+		}
+		return this;
+	}
+
+	// Get raw value.
+	value(id) : any {
+		if (this.active === undefined) { return ; }
+		return this.active[id];
+	}
+
+	// Opacity.
+	// Opacity must be a number `0.0` till `1.0`, and may also be an object with opacity pet theme `{dark: 0.2, light: 0.35}`.
+	opacity(id: string, opacity: number = 1.0): string {
+
+		// Create full id.
+		let full_id;
+		if (typeof opacity === "number") {
+			full_id = `${id}_opac_${opacity}`;
+		} else {
+			full_id = `${id}_opac_${Object.values(opacity).join("_")}`;
+		}
+		full_id = full_id.replaceAll(".", "_");
+
+		// Already created.
+		if (this._css_vars[full_id]) {
+			return this._css_vars[full_id] as string;
+		}
+
+		// Iterate.
+		let index = 0;
+		for (const theme_id of this._theme_ids) {
+			const theme = this[theme_id];
+
+			// Checks.
+			if (theme[id] == null) {
+				console.error(new Error(`Theme attribute "${id}" does not exist.`));
+				return ""; 
+			}
+			if (theme[id]._is_gradient) {
+				console.error(new Error(`Unable to set the opacity on gradient color "${id}".`));
+				return ""; 
+			}
+
+			// Create new color.
+			let theme_opac = opacity;
+			if (typeof theme_opac === "object") {
+				theme_opac = theme_opac[this._theme_ids[index]];
+				if (theme_opac === undefined) {
+					console.error(new Error(`Unable to find the opacity on for theme id "${this._theme_ids[index]}".`));
+				}
+			}
+			theme[full_id] = Colors.set_opacity(theme[id], theme_opac);
+
+			// Add css var.
+			if (index === 0) {
+				this._add_attr(full_id);
+			}
+
+			// Set property.
+			if (this.active_id === theme_id) {
+				document.documentElement.style.setProperty(`--${this._id}_${full_id}`, theme[full_id]);
+			}
+
+			// Incr index
+			++index;
+		}
+
+		return this._css_vars[full_id] as string;
+	}
+
+	// Activate a theme.
+	activate(id: string, apply_theme_update: boolean = true) : this {
+		if (this._theme_ids.includes(id) === false || this[id] === undefined) {
+			throw Error(`Theme "${id}" does not exist.`);
+		}
+		this.active_id = id;
+		this.active = this[id];
+		Object.keys(this.active as any).iterate((id) => {
+			document.documentElement.style.setProperty(`--${this._id}_${id}`, (this.active as any)[id] ?? "");
+		});
+		if (this._on_activate_callback != null) {
+			this._on_activate_callback(this, this.active_id);
+		}
+		if (apply_theme_update) {
+			ThemesModule.apply_theme_update();
+		}
+		localStorage.setItem(this._id, this.active_id);
+		return this;
+	}
+
+	// Set an on activate callback.
+	on_activate() : OnActivateCallback | undefined;
+	on_activate(callback: OnActivateCallback) : this;
+	on_activate(callback?: OnActivateCallback) : this | OnActivateCallback | undefined {
+		if (callback == null) { return this._on_activate_callback; }
+		this._on_activate_callback = callback;
+		return this;
+	}
+
+	// Get cached active subtheme id.
+	get_active_id_cached() : string {
+		return localStorage.getItem(this._id) ?? "";
+	}
+
+	// Toggle themes.
+	toggle(apply_theme_update: boolean = true) : this {
+		if (this._theme_ids.length > 1) {
+			let active_index = -1;
+			for (let i = 0; i < this._theme_ids.length; i++) {
+				if (this._theme_ids[i] === this.active_id) {
+					active_index = i;
+					break;
+				}
+			}
+			if (active_index !== -1 && active_index + 1 < this._theme_ids.length) {
+				this.activate(this._theme_ids[active_index + 1], apply_theme_update);
+			} else {
+				this.activate(this._theme_ids[0], apply_theme_update);
+			}
+		}
+		return this;
+	}
+}
+export const Theme = Elements.wrapper(ThemeClass);
+export const NullTheme = Elements.create_null(ThemeClass); //@todo duplicate name from Themes

package/frontend/src/ui/title.ts

@@ -0,0 +1,64 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js"
+
+// Title.
+@Elements.register
+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 = "") {
+		
+		// Initialize base class.
+		super({
+			derived: TitleElement,
+		});
+		
+		// Set text.
+		this.text(text); // do not use inner_html since the text might contain "<" etc.
+	}
+}
+export const Title = Elements.wrapper(TitleElement);
+export const NullTitle = Elements.create_null(TitleElement);
+declare module './any_element.d.ts' { interface AnyElementMap { TitleElement: TitleElement }}
+
+// Subtitle.
+@Elements.register
+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 = "") {
+		
+		// Initialize base class.
+		super({
+			derived: SubtitleElement,
+		});
+		
+		// Set text.
+		this.text(text); // do not use inner_html since the text might contain "<" etc.
+	}
+}
+export const Subtitle = Elements.wrapper(SubtitleElement);
+export const NullSubtitle = Elements.create_null(SubtitleElement);
+declare module './any_element.d.ts' { interface AnyElementMap { SubtitleElement: SubtitleElement }}

package/frontend/src/ui/ui.ts

@@ -0,0 +1,47 @@
+
+// VoltUI.
+export * from "./span.js"
+export * from "./style.js"
+export * from "./button.js"
+export * from "./loader_button.js"
+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"
+export * from "./dropdown.js"
+export * from "./for_each.js"
+export * from "./form.js"
+export * from "./frame_modes.js"
+export * from "./google_map.js"
+export * from "./gradient.js"
+export * from "./image.js"
+export * from "./input.js"
+export * from "./link.js"
+export * from "./list.js"
+export * from "./loaders.js"
+export * from "./popup.js"
+export * from "./pseudo.js"
+export * from "./scroller.js"
+export * from "./slider.js"
+export * from "./spacer.js"
+export * from "./stack.js"
+export * from "./steps.js"
+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"
+
+
+// import type { AnyElement } from "./any_element.d.ts"
+// const X: Record<string, AnyElement> = {};
+// const y: number = X["test"]!.offsetTop;
+
+

package/frontend/src/ui/view.ts

@@ -0,0 +1,44 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js"
+
+// Scroller.
+@Elements.register
+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[]) {
+		
+		// Initialize base class.
+		super({
+			derived: ViewElement,
+		});
+
+		// Append children.
+		this.append(...children);
+
+	}
+}
+export const View = Elements.wrapper(ViewElement);
+export const NullView = Elements.create_null(ViewElement);
+declare module './any_element.d.ts' { interface AnyElementMap { ViewElement: ViewElement }}

package/frontend/src/volt.ts

@@ -0,0 +1,31 @@
+
+// Vars.
+// @ts-ignore
+export const production = "{{PRODUCTION}}" === "true"
+
+// Modules.
+export * from "./modules/number.js" // @noexport
+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/compression.js"
+export * from "./modules/cookies.js"
+export * from "./modules/date.js" // @todo
+export * from "./modules/events.js"
+export * from "./modules/google.js"
+export * from "./modules/meta.js"
+export * from "./modules/paddle.js"
+export * from "./modules/scheme.js" // @todo
+export * from "./modules/statics.js"
+export * from "./modules/support.js"
+export * from "./modules/themes.js"
+export * from "./modules/user.js"
+export * from "./modules/utils.js"
+
+// Elements.
+export * from "./elements/module.js"
+
+// VoltUI.
+export * from "./ui/ui.js"

package/package.json

@@ -0,0 +1,58 @@
+{
+    "author": "Daan van den Bergh",
+    "name": "@vandenberghinc/volt",
+    "version": "1.1.2",
+    "description": "",
+    "type": "module",
+    "types": "./dist/esm/volt.d.ts",
+    "main": "./dist/cjs/volt.js",
+    "module": "./dist/esm/volt.js",
+    "exports": {
+        "require": "./dist/cjs/volt.js",
+        "import": "./dist/esm/volt.js"
+    },
+    "scripts": {
+        "start": "node start.js",
+        "compile": "npm run compile-backend && npm run compile-frontend",
+        "compile-backend-dev": "tsc --project backend/tsconfig.esm.dev.json && ts-path-alias --resolve --path backend/dist/esm-dev/ --tsconfig ./backend/tsconfig.esm.dev.json && npm run add-dist-files",
+        "compile-backend": "tsc --project backend/tsconfig.esm.json && tsc-alias --project backend/tsconfig.esm.json && echo 'Compiling CommonJS.' && tsc --project backend/tsconfig.cjs.json && tsc-alias --project backend/tsconfig.cjs.json && echo '{\"type\":\"commonjs\"}' > backend/dist/cjs/package.json && npm run compile-backend-dev && npm run add-dist-files && npm run resolve-path-aliases",
+        "compile-frontend": "node frontend/compile.js",
+        "compile-backend-frontend": "tsc --project backend/tsconfig.json && node frontend/compile.js",
+        "check-circular-dependencies": "npx madge --circular frontend/ --exclude frontend/dist",
+        "add-dist-files": "rsync -az --delete ./frontend/src/css/ ./backend/dist/css/",
+        "resolve-path-aliases": "ts-path-alias --resolve --path backend/dist/esm/ --tsconfig ./backend/tsconfig.esm.json && ts-path-alias --resolve --path backend/dist/esm-dev/ --tsconfig ./backend/tsconfig.esm.dev.json && ts-path-alias --resolve --path backend/dist/cjs/ --tsconfig ./backend/tsconfig.cjs.json",
+        "generate-docs": "libris --generate-docs"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "bin": {
+        "volt": "./backend/dist/esm/cli.js",
+        "volt-dev": "./backend/dist/esm-dev/cli.js"
+    },
+    "dependencies": {
+        "@rollup/plugin-typescript": "^12.1.2",
+        "@vandenberghinc/vhighlight": "^1.3.10",
+        "@vandenberghinc/vlib": "^1.5.4",
+        "blob-stream": "^0.1.3",
+        "clean-css": "^5.3.3",
+        "esbuild": "^0.25.0",
+        "jspdf": "^3.0.0",
+        "mongodb": "^6.14.0",
+        "nodemailer": "^6.10.0",
+        "pdfkit": "^0.14.0",
+        "playwright": "^1.50.1",
+        "rollup-plugin-typescript2": "^0.36.0",
+        "sharp": "^0.33.5",
+        "vhighlight": "file:../vhighlight"
+    },
+    "devDependencies": {
+        "@types/node": "^22.13.8",
+        "axios": "^1.8.1",
+        "copy-paste": "^1.5.3",
+        "ts-node": "^10.9.2",
+        "tsx": "^4.19.3",
+        "typescript": "^5.8.2",
+        "why-is-node-running": "^3.2.2"
+    }
+}