x4js 2.0.28 → 2.0.30

package/.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"type": "node",
+			"request": "launch",
+			"name": "debug prepack",
+			"program": "${workspaceFolder}/scripts/prepack.mjs",
+		}
+	]
+}

package/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package/ai-comments.txt

@@ -0,0 +1,97 @@
+x4 se distingue des approches réactives conventionnelles. 
+Il offre une expérience de développement qui met l'accent sur la simplicité, la performance et un contrôle affiné sur la manière dont l'interface utilisateur est construite et mise à jour.
+
+Voici les avantages qui découlent de cette philosophie :
+
+- Abstraction du DOM, mais avec une philosophie distincte : 
+	Contrairement aux frameworks réactifs qui utilisent un Virtual DOM et des mécanismes de réconciliation 
+	pour abstraire les manipulations du DOM, x4 propose une abstraction différente. 
+	L'objectif n'est pas d'imiter le fonctionnement des frameworks populaires, mais de fournir une manière plus directe, plus légère et plus performante 
+	d'interagir avec les concepts de l'interface utilisateur. Cette abstraction est conçue pour être moins "magique" et plus prévisible.
+
+- Performance optimisée : 
+	En concevant son propre modèle d'abstraction et de mise à jour du DOM, x4 vise à atteindre une performance brute supérieure. 
+	Il peut s'affranchir de certaines complexités inhérentes aux approches réactives pour se concentrer sur l'essentiel, 
+	offrant ainsi une expérience utilisateur fluide même dans des applications exigeantes.
+
+- Un écosystème TypeScript pur : 
+	Pour garantir une robustesse et une maintenabilité maximales, ce framework élimine tout mélange de syntaxe déclarative comme JSX/TSX avec du code JavaScript. 
+	L'intégralité de la création d'interfaces et de la logique applicative est réalisée en TypeScript natif. 
+	Cela permet de bénéficier pleinement des avantages du typage fort, de la vérification à la compilation, et d'une expérience de développement cohérente et sécurisée.
+
+- Gestion de l'état et des références simplifiée : 
+	Ce framework s'affranchit des concepts comme useRef ou des "hooks" tels qu'on les trouve dans d'autres écosystèmes.
+	La gestion des états et des références est intégrée de manière plus directe et idiomatique à sa propre architecture, favorisant une logique plus linéaire et plus facile à suivre.
+
+- Conçu pour les applications complètes : 
+	Plutôt que de se concentrer uniquement sur des composants UI isolés, ce framework est orienté vers la construction d'applications complètes.
+	Il offre les outils et la structure nécessaires pour gérer des architectures plus vastes, de la gestion des routes à l'état global.
+
+- Compatibilité avec les Web Workers : 
+	Afin d'optimiser les performances et de permettre des traitements asynchrones intensifs sans bloquer le thread principal, 
+	ce framework est conçu pour être compatible avec les Web Workers. Cela ouvre la voie à des applications plus réactives et performantes, en déportant les tâches lourdes.
+
+- Environnement de compilation et outils spécifiques : 
+	Le développement avec ce framework est accéléré par un environnement de compilation ultra-rapide, basé sur esbuild. 
+	De plus, il est livré avec un outils spécifiques X4Build qui améliore l'expérience développeur.
+	ainsi qu'une expérience de Hot Module Replacement (HMR) fluide et efficace pour des itérations rapides.
+
+- Modèle de développement éprouvé : 
+	L'architecture et les pratiques recommandées par ce framework constituent un modèle de développement éprouvé. 
+	Il facilite notamment des scénarios avancés comme les evenements distribués via WebSocket directement intégré (si besoin) dans l'application, 
+	
+- Création de composants intuitive : 
+	La manière dont x4 abstrait le DOM et gère la réactivité rend la création de composants d'une simplicité déconcertante. 
+	Vous pouvez construire des interfaces modulaires et réutilisables avec une facilité remarquable, en vous concentrant sur la logique métier plutôt 
+	que sur la gestion complexe des interactions DOM.
+
+- Accélération Drastique du Développement : 
+	Avec plus de 50 composants prêts à l'emploi, les développeurs peuvent assembler des interfaces utilisateur complexes et fonctionnelles 
+	à une vitesse remarquable. Plutôt que de passer du temps à concevoir et implémenter des éléments de base comme des buttons, des inputs, des checkboxes ou des sliders, 
+	ils peuvent les utiliser directement. Ceci libère un temps précieux pour se concentrer sur la logique métier spécifique de l'application.
+
+	Le développement "from scratch" de tels composants est coûteux en temps et en ressources. La richesse de cette bibliothèque élimine ce fardeau, 
+	réduisant ainsi les efforts de conception, de codage, de test et de maintenance de ces éléments d'interface fondamentaux. 
+	Cela signifie moins de code à écrire, moins de bugs potentiels et une meilleure productivité globale.
+
+- Richesse et Diversité des Interfaces Utilisateur : 
+	La large gamme de composants permet de créer des expériences utilisateur très riches et interactives sans avoir à intégrer de bibliothèques 
+	tierces supplémentaires pour des fonctionnalités de base. Des composants sophistiqués comme gridview (pour l'affichage de données tabulaires), spreadsheet (pour des fonctionnalités de tableur complètes), 
+	calendar, colorpicker, dialog, treeview ou progress sont inclus, offrant une boîte à outils complète pour des applications métier complexes ou des tableaux de bord interactifs.
+
+- Cohérence et Qualité : 
+	L'utilisation de composants d'un même framework assure une cohérence visuelle et comportementale à travers toute l'application. 
+	Ces composants sont testés et optimisés, garantissant une meilleure qualité et une expérience utilisateur plus fiable dès le départ.
+	En somme, cette collection de composants est un avantage concurrentiel énorme.
+
+
+
+
+
+
+You are a TypeScript/JavaScript documentation assistant.
+Your task is to generate **JSDoc comments** for public APIs in the provided code.
+Follow these rules strictly:
+
+### Rules:
+1. **Only document public APIs**:
+   - Public classes, methods, properties, and events.
+   - Ignore private/protected/internal members (e.g., `_privateField`, `#privateMethod`).
+
+2. **Output format**:
+   - Generate **only JSDoc blocks** (no code repetition).
+   - Use **inline comments** (`/** ... */`) for brevity.
+   - Do not include `@class` or `@extends` (JSDoc infers these).
+   - Document in english
+
+3. **Content guidelines**:
+   - Describe **purpose, behavior, and usage** (not implementation).
+   - Mention auto-generated CSS classes (e.g., `Button → x4button`).
+   - Include `@example` where helpful.
+   - Be concise, clear, and professional.
+
+Avoid:
+
+Implementation details.
+Private/protected members.
+Redundant or repetitive descriptions.

package/demo/assets/house-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M298.6 4c-6-5.3-15.1-5.3-21.2 0L5.4 244c-6.6 5.8-7.3 16-1.4 22.6s16 7.3 22.6 1.4L64 235l0 197c0 44.2 35.8 80 80 80l288 0c44.2 0 80-35.8 80-80l0-197 37.4 33c6.6 5.8 16.7 5.2 22.6-1.4s5.2-16.7-1.4-22.6L298.6 4zM96 432l0-225.3L288 37.3 480 206.7 480 432c0 26.5-21.5 48-48 48l-64 0 0-160c0-17.7-14.3-32-32-32l-96 0c-17.7 0-32 14.3-32 32l0 160-64 0c-26.5 0-48-21.5-48-48zm144 48l0-160 96 0 0 160-96 0z"/></svg>

package/demo/assets/radio.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" aria-hidden="true">
+	<circle cx="2.5" cy="2.5" r="2.5" fill="currentColor"></circle>
+	<circle cx="2.5" cy="2.5" r="1.25" fill="white"></circle>
+</svg>

package/demo/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="./main.css">
+    </head>
+    <body>
+        <noscript>JavaScript required</noscript>
+        <script src="./main.js"></script>
+    </body>
+</html>

package/demo/main.scss

@@ -0,0 +1,23 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file main.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+@use "./node_modules/x4js/src/x4.scss" ;
+
+
+
+body {
+	padding: 16px;
+}

package/demo/main.ts

@@ -0,0 +1,324 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * DEMO FILE
+ * 
+ **/
+
+import { wrapDOM, Component } from "../src/core/component";
+import { unsafeHtml } from '../src/core/core_tools'
+import { SvgBuilder, SvgComponent } from '../src/core/core_svg'
+
+import { Button } from "../src/components/button/button.js"
+import { Label } from "../src/components/label/label.js"
+import { Checkbox } from "../src/components/checkbox/checkbox.js"
+import { HBox, VBox } from "../src/components/boxes/boxes.js"
+
+import { Listbox, ListItem } from '../src/components/listbox/listbox'
+import { Panel } from '../src/components/panel/panel'
+import { TextEdit } from '../src/components/textedit/textedit'
+import { TextArea } from '../src/components/textarea/textarea'
+import { Switch } from '../src/components/switch/switch'
+import { Combobox } from '../src/components/combobox/combobox'
+import { Slider } from '../src/components/slider/slider'
+import { Progress } from '../src/components/progress/progress'
+import { BtnGroup } from '../src/components/btngroup/btngroup'
+import { Image } from '../src/components/image/image'
+import { ColorInput } from '../src/components/colorinput/colorinput'
+import { ColorPicker } from '../src/components/colorpicker/colorpicker'
+import { Menu } from '../src/components/menu/menu'
+import { initTooltips } from '../src/components/tooltips/tooltips'
+import { Treeview, TreeItem } from '../src/components/treeview/treeview'
+import { Dialog } from '../src/components/dialog/dialog'
+import { Form } from '../src/components/form/form'
+import { MessageBox } from '../src/components/messages/messages'
+import { Calendar } from '../src/components/calendar/calendar'
+import { Notification } from '../src/components/notification/notification'
+import { Header } from '../src/components/header/header'
+import { Tabs } from '../src/components/tabs/tabs'
+import { Rating } from '../src/components/rating/rating'
+
+import "@fontsource/montserrat"
+import "./main.scss"
+
+import def_icon from "./assets/house-light.svg";
+
+
+function main( ) {
+	
+	initTooltips( );
+
+	const testMenu = ( ev: MouseEvent ) => {
+		const sub = new Menu( { items: [
+				"Sub menu 1",
+				{ text: "sub 1-1" }
+			] 
+		})
+
+		const sub3 = new Menu( { items: [
+				"Sub menu 3",
+				{ text: "sub 3-1" }
+			] 
+		})
+			
+		const sub2 = new Menu( { items: [
+				"Sub menu 2",
+				{ text: "sub 2-1" },
+				{ text: "menu e", menu: sub3 }
+			] 
+		})
+		
+		const pop = new Menu( {items: [
+				"Title",
+				{ text: "menu a", click: null, icon: def_icon },
+				"-",
+				{ text: "menu b", click: null },
+				{ text: "menu c", click: null, disabled: true },
+				"-",
+				{ text: "menu d", menu: sub },
+				{ text: "menu e", menu: sub2 },
+			]
+		});
+
+		pop.displayAt( ev.pageX, ev.pageY );
+		ev.stopPropagation( );
+		ev.preventDefault( );
+	}
+	
+	const items: ListItem[] = [
+		{ id: 1, text: "Item 1" },
+		{ id: 2, text: "Item 2" },
+		{ id: 3, text: "Item 3" },
+		{ id: 4, text: "Item 4" },
+		{ id: 5, text: "Item 5" },
+		{ id: 6, text: "Item 6" },
+	];
+
+	const tree_items: TreeItem[] = [
+		{ id: 1, text: "root", open: true, children: [
+			{ id: 2, text: "folder 1", children: [
+				{ id: 3, text: "folder 1.1", children: [
+					{ id: 4, text: "value 1.1" },
+					{ id: 5, text: "value 1.2", iconId: def_icon },
+					{ id: 6, text: "value 1.3" }
+				] }
+			]},
+			{ id: 10, text: "folder 2", open: true, children: [
+				{ id: 11, text: "folder 2.1", open: true, children: [
+					{ id: 12, text: "value 2.1" },
+					{ id: 13, text: "value 2.2" },
+					{ id: 14, text: "value 2.3" }
+				] }
+			]}
+		]}
+	]
+
+	const dialog = new Dialog( {
+		title: "Dialog",
+		modal: true,
+		movable: true,
+		sizable: true,
+		closable: true,
+		buttons: ['ok','cancel'],
+		form: new Form( {
+			content: [
+				new Label( { cls: "x4flex", text: unsafeHtml("<h1>Example dialog</h1><p>This dialog is <i>resizable</i>...") } ),
+				new TextEdit( { label: "title", value: "" } ),
+			]
+		}),
+	});
+
+	const svg_builder = new SvgBuilder( );
+
+	svg_builder
+		.ellipse( 45, 45, 40 )
+		.stroke( "#ccc", 5 )
+		.fill( "transparent" );
+
+	svg_builder.path( )
+		.arc( 45, 45, 40, 0, 30*360/100 )
+		.stroke( "var( --accent-background )", 5 )
+		.fill( "none" )
+		.setAttr("tooltip","test")
+		.strokeCap( "round" )
+		.addDOMEvent( "mouseenter", ( ev ) => {
+			console.log( ev.target );
+			(ev.target as SVGElement).setAttribute( "stroke-width", "10px" );
+		})
+		.addDOMEvent( "mouseleave", ( ev ) => {
+			console.log( ev.target );
+			(ev.target as SVGElement).setAttribute( "stroke-width", "5px" );
+		});
+
+	svg_builder.text( 45, 42, "30%" )
+		.textAlign( "center" )
+		.verticalAlign( "baseline" )
+		.fontSize( "150%" )
+		.fontWeight( "bold" );
+
+	svg_builder.text( 45, 80, "custom control" )
+		.fontSize( "10px" )
+		.textAlign( "center" )
+
+	const t = new HBox( {
+		style: {
+			alignItems: "start",
+			gap: "8px",
+			flexWrap: "wrap",
+		},
+		content: [
+			new Panel( {
+				title: "Panel",
+				icon: def_icon,
+				width: 510,
+				content: [
+				new Label( { text: "label", icon: def_icon } ),
+				new HBox( { content: [
+					new Button( { label:'OK', icon:def_icon } ),
+					new Button( { label:'OK', icon:def_icon, disabled: true } ),
+					new Button( { cls: "outline", label:'OK', icon:def_icon } ),
+				]}),
+				new VBox({ content: [
+					new HBox({ content: [
+						new Checkbox( { label: 'Unchecked', checked: false } ),
+						new Checkbox( { label: 'Checked', checked: true } ),
+						new Checkbox( { label: 'Disabled', disabled: true, checked: true } ),
+					]}),
+					new HBox({ content: [
+						new Switch( { label: 'Unchecked', checked: false } ),
+						new Switch( { label: 'Checked', checked: true } ),
+						new Switch( { label: 'Disabled', checked: true, disabled: true } ),
+					]}),
+				]}),
+				new HBox( {content: [
+					new Listbox( {
+						width: 250,
+						height: 150,
+						items
+					}),
+					new Listbox( {
+						width: 250,
+						height: 150,
+						items,
+						disabled: true,
+					})
+				]}),
+				new Treeview( {
+					items: tree_items,
+					height: 150,
+				}),
+				new Header( { 
+					items: [
+						{ title: "Column ", name: "a1" },
+						{ title: "Column 66%", name: "a2", width: -2 },
+						{ title: "Column 33%", name: "a3", width: -1 },
+					]
+				} ),
+			]}),
+			new Panel( {
+				title: "Panel",
+				icon: def_icon,
+				width: 510,
+				content: [
+					new TextEdit( { labelWidth: 90, label: "Login", value: "hello", required: true, disabled: true } ),
+					new TextEdit( { labelWidth: 90, label: "Password", value: "world", type: "password", inputGadgets: [
+						new Button( { icon: def_icon })
+					] } ),
+					new TextEdit( { labelWidth: 90, label: "Email", value: "", type: "email", placeholder: "select your email contact" } ),
+					new TextArea( { label: "Demo", height: 140, tooltip: "This is a small tooltip" } ),
+					new Combobox( { label: 'ComboBox', items }),
+					new Combobox( { label: 'Readonly', items, readonly: true }),
+					new Combobox( { label: 'Disabled', items, disabled: true })
+				]
+			}),
+			new Panel( {
+				title: "Another panel",
+				width: 610,
+				content: [
+					new Slider( {min: 0, max: 100, step: 10, value: 50 } ),
+					new Progress( { min: 0, max: 100, value: 45, cls: "indeterm" } ),
+					new BtnGroup( { cls: "x4flex", items: [ new Label({text:"group"} ), "ok","cancel","yes","no","-","retry","abort",new Button({cls:"danger",label:"custom"})]}),
+					new HBox( { content: [
+						new Image( { src:"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png", lazy: true, width: 250, height: "100%", fit: "contain", position: "50% 50%", alt: "an image" } ),
+						new ColorPicker( { color: "red",  } ),
+					]}),
+					new ColorInput( { color: "red",  } ),
+					new Rating( { value: 3 } ),
+					new SvgComponent( { svg: svg_builder, id: "", viewbox: "0 0 90 90", width: 90, height: 90, style: { margin: '16px'} } ),
+
+					new HBox( { content: [
+						new Button( { label:'Dialog...', click: ( ) => dialog.show() } ),
+						new Button( { label:'Message...', click: ( ) => {MessageBox.show( unsafeHtml( '<b>Care</b><br/>You will delete <i>all data</i>.' ) ) } } ),
+						new Button( { label:'Notification...', click: ( ) => { new Notification( { mode: "success", text: "Modification saved", title: "Backup" } ).display( 5 ) } } ),
+					]}),
+				]
+			}),
+			new Panel( {
+				title: "Another panel",
+				width: 410,
+				content: [
+					new Calendar( { } ),
+				]
+			}),
+			new Tabs( {
+
+				width: 500,
+				height: 200,
+
+				default: "page1",
+				items: [
+					{ name: "page1", title: "Tab 1", icon: def_icon, content: new Label( { text: unsafeHtml(`<h4>tab 1 content</h4><p>lorem ipsum</p>`)}) },
+					{ name: "page2", title: "Tab 2", icon: def_icon, content: new Label( { text: unsafeHtml(`<h4>tab 2 content</h4><p>ipsum lorem</p>` )}) },
+					{ name: "page3", title: "Tab 3", content: new Label( { text: unsafeHtml(`<h4>tab 3 content</h4><p>ipsum ++</p>` )}) },
+				]
+			})
+		]
+	} );
+
+	const body = wrapDOM( document.body );
+	body.appendContent( t );
+	body.addClass( "fit" );
+	body.addDOMEvent( "contextmenu", ( ev ) => { testMenu(ev) } );
+}
+
+function waitFontLoading(name: string) {
+
+	// tip for waiting font loading:
+	// by default, body is created invisible ((opacity = 0)
+	// we create a div inside with the font we need to wait the loading
+	// as soon as the font is loaded, it's size will change, the browser end font loading
+	// we can remove the div.
+	// pitfall: if the font is already loaded, ne never end.
+	// @review that
+
+	let ct = document.createElement('div');
+
+	ct.style.position = 'absolute';
+	ct.style.visibility = 'hidden';
+	ct.innerText = 'X';
+
+	document.body.appendChild(ct);
+
+	return new Promise<void>((resolve) => {
+
+		//let irc = ct.getBoundingClientRect();
+		const initialWidth = ct.offsetWidth;
+
+		let tm = setInterval(() => {
+
+			const newWidth = ct.offsetWidth;
+			if (newWidth!=initialWidth ) {
+				clearInterval(tm);
+				document.body.removeChild(ct);
+				resolve();
+			}
+		}, 0);
+	});
+}
+
+waitFontLoading( "montserrat" ).then( main );
+//main( );

package/demo/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "x4js_demo_app",
+	"version": "2.0.11",
+	"description": "X4 framework",
+	"author": "etienne cochard",
+	"main": "main.ts",
+	"scripts": {
+		"build": "node ../scripts/build.mjs --watch --hmr --serve",
+		"build-release": "node ../scripts/build.mjs --release"
+	},
+	"devDependencies": {
+		"x4js": "^2.0"
+	},
+	"x4build": {
+		"outdir": "build",
+		"copy": [
+			{
+				"from": "index.html",
+				"to": "index.html"
+			}
+		]
+	},
+	"dependencies": {
+		"@fontsource/montserrat": "^5.1.0"
+	}
+}

package/demo/scss.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+    const content: { [className: string]: string };
+    export default content;
+}

package/demo/svg.d.ts

@@ -0,0 +1 @@
+declare module '*.svg';

package/demo/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"strict": true,
+		"moduleResolution": "nodenext",
+		"module": "NodeNext",
+		"strictNullChecks": false,
+		"target": "ES2021",
+		"lib": [ "es2022", "DOM" ],
+		"paths": {
+			"@core/*": ["./src/core"],
+			"@comp/*": ["./src/components"]
+		}
+	}
+}