x4js 2.0.1 → 2.0.2

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "x4js",
-	"version": "2.0.1",
+	"version": "2.0.2",
 	"description": "X4 framework",
 	"author": "etienne cochard",
-	"main": "main.js",
+	"main": "src/x4.js",
 	"types": "lib/types/x4.d.ts",
 	"license": "MIT",
 	"repository": {
@@ -23,7 +23,7 @@
 	],
 	"scripts": {
 		"build": "node scripts/build.mjs --watch --hmr --serve",
-		"build-release": "node scripts/build.mjs --release --serve",
+		"build-release": "node scripts/build.mjs --release",
 		"build-dts": "dts-generator --project . --out lib/types/x4.d.ts",
 		"prepack": "node scripts/prepack.mjs"
 	},
@@ -52,8 +52,9 @@
 	},
 	"x4build": {
 		"entryPoints": [
-			"src/main.tsx"
+			"src/x4.ts"
 		],
+		"outdir": "lib/esm",
 		"copy": [
 			{
 				"from": "src/assets",

package/scripts/prepack.mjs

@@ -1,15 +1,43 @@
 import * as fs from 'node:fs';
+import * as path from "node:path"
+import chalk from "chalk"
+
+import { execSync } from "node:child_process";
+
+function readPackage() {
+
+	let cpath = process.cwd();
+
+	// check here
+	let pth = path.join(cpath, "package.json");
+	if (fs.existsSync(pth)) {
+		const raw = fs.readFileSync(pth, "utf-8");
+		return JSON.parse(raw);
+	}
+
+	throw new Error("cannot find package.json");
+}
 
 async function main( ) {
 
-	fs.mkdirSync( 'lib/styles', { recursive: true} );
+	const pkg = readPackage( );
+
+	console.log( chalk.yellow("-- prepack ------------------------"))
+
+	console.log( chalk.green("building...") );
+	execSync( pkg.scripts["build-release" ]);
+
+	console.log( chalk.green("creating .d.ts...") );
+	execSync( `npx ${pkg.scripts["build-dts"]}` );
+
+	console.log( chalk.green("copying dependencies...") );
 	fs.mkdirSync( 'lib/src', { recursive: true} );
-	fs.mkdirSync( 'lib/esm', { recursive: true} );
 	fs.mkdirSync( 'lib/types', { recursive: true} );
 
 	fs.cpSync( 'src/', 'lib/src/', { recursive: true} );
 	fs.cpSync( 'README.md', 'lib/README.txt' );
 	
+	console.log( chalk.yellow("-----------------------------------"))
 }
 
 main( );

package/src/components/base.scss

@@ -3,7 +3,7 @@
  *  \  \/  /  / _
  *   \    /  /_| |_
  *   /    \____   _|  
- *  /__/\__\   |_|.2
+ *  /__/\__\   |_|
  * 
  * @file base.scss
  * @author Etienne Cochard 

package/src/components/form/form.module.scss

@@ -3,7 +3,7 @@
  *  \  \/  /  / _
  *   \    /  /_| |_
  *   /    \____   _|  
- *  /__/\__\   |_|.2
+ *  /__/\__\   |_|
  * 
  * @file form.module.scss
  * @author Etienne Cochard 

package/src/components/notification/notification.module.scss

@@ -3,7 +3,7 @@
  *  \  \/  /  / _
  *   \    /  /_| |_
  *   /    \____   _|  
- *  /__/\__\   |_|.2
+ *  /__/\__\   |_|
  * 
  * @file notification.module.scss
  * @author Etienne Cochard 

package/src/components/notification/notification.ts

@@ -3,7 +3,7 @@
  *  \  \/  /  / _
  *   \    /  /_| |_
  *   /    \____   _|  
- *  /__/\__\   |_|.2
+ *  /__/\__\   |_|
  * 
  * @file notification.ts
  * @author Etienne Cochard 

package/src/components/rating/rating.ts

@@ -3,7 +3,7 @@
  *  \  \/  /  / _
  *   \    /  /_| |_
  *   /    \____   _|  
- *  /__/\__\   |_|.2
+ *  /__/\__\   |_|
  * 
  * @file rating.ts
  * @author Etienne Cochard 

package/src/components/sizers/sizer.module.scss

@@ -3,7 +3,7 @@
  *  \  \/  /  / _
  *   \    /  /_| |_
  *   /    \____   _|  
- *  /__/\__\   |_|.2
+ *  /__/\__\   |_|
  * 
  * @file sizer.module.scss
  * @author Etienne Cochard 

package/src/components/tabs/tabs.ts

@@ -3,7 +3,7 @@
  *  \  \/  /  / _
  *   \    /  /_| |_
  *   /    \____   _|  
- *  /__/\__\   |_|.2
+ *  /__/\__\   |_|
  * 
  * @file tabs.ts
  * @author Etienne Cochard 

package/src/core/core_router.ts

@@ -3,7 +3,7 @@
  *  \  \/  /  / _
  *   \    /  /_| |_
  *   /    \____   _|  
- *  /__/\__\   |_|.2
+ *  /__/\__\   |_|
  * 
  * @file core_router.ts
  * @author Etienne Cochard 

package/src/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/src/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/src/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/src/demo/main.scss

@@ -0,0 +1,21 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 "./x4.scss" ;
+
+body {
+	padding: 16px;
+}

package/src/demo/main.tsx

@@ -0,0 +1,323 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * DEMO FILE
+ * 
+ **/
+
+import { wrapDOM, Component } from '@core/component.js'
+
+import { Button } from "./components/button/button.js"
+import { Label } from "./components/label/label.js"
+import { Checkbox } from "./components/checkbox/checkbox.js"
+import { HBox, VBox } from "./components/boxes/boxes.js"
+
+import { Listbox, ListItem } from './components/listbox/listbox.js'
+import { Panel } from './components/panel/panel.js'
+import { TextEdit } from './components/textedit/textedit.js'
+import { TextArea } from './components/textarea/textarea.js'
+import { Switch } from './components/switch/switch.js'
+import { Combobox } from './components/combobox/combobox.js'
+import { Slider } from './components/slider/slider.js'
+import { Progress } from './components/progress/progress.js'
+import { BtnGroup } from './components/btngroup/btngroup.js'
+import { Image } from './components/image/image.js'
+import { ColorInput } from './components/colorinput/colorinput.js'
+import { ColorPicker } from './components/colorpicker/colorpicker.js'
+import { Menu } from './components/menu/menu.js'
+import { initTooltips } from './components/tooltips/tooltips.js'
+import { Treeview, TreeItem } from './components/treeview/treeview.js'
+import { Dialog } from './components/dialog/dialog.js'
+import { Form } from './components/form/form.js'
+import { MessageBox } from './components/messages/messages.js'
+import { unsafeHtml } from '@core/core_tools.js'
+import { Calendar } from './components/calendar/calendar.js'
+import { Notification } from './components/notification/notification.js'
+import { SvgBuilder, SvgComponent } from '@core/core_svg.js'
+import { Header } from './components/header/header.js'
+
+import "@fontsource/montserrat"
+import "./main.scss"
+
+import def_icon from "./assets/house-light.svg";
+import { Tabs } from './components/tabs/tabs.js'
+import { Rating } from './components/rating/rating.js'
+
+
+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.display() } ),
+						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, tab: (<Label><h4>tab 1 content</h4><p>lorem ipsum</p></Label>) },
+					{ name: "page2", title: "Tab 2", icon: def_icon, tab: (<Label><h4>tab 2 content</h4><p>ipsum lorem</p></Label>) },
+					{ name: "page3", title: "Tab 3", tab: (<Label><h4>tab 3 content</h4><p>ipsum ++</p></Label>) },
+				]
+			})
+		]
+	} );
+
+	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 );

package/src/x4.scss

@@ -3,7 +3,7 @@
  *  \  \/  /  / _
  *   \    /  /_| |_
  *   /    \____   _|  
- *  /__/\__\   |_|.2
+ *  /__/\__\   |_|
  * 
  * @file x4.scss
  * @author Etienne Cochard 

package/src/x4.ts

@@ -0,0 +1,60 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file x4.ts
+ * @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.
+ **/
+
+export * from "./core/component"
+export * from "./core/core_colors"
+export * from "./core/core_dom"
+export * from "./core/core_dragdrop"
+export * from "./core/core_element"
+export * from "./core/core_events"
+export * from "./core/core_i18n"
+export * from "./core/core_router"
+export * from "./core/core_styles"
+export * from "./core/core_svg"
+export * from "./core/core_tools"
+
+export * from "./components/boxes/boxes"
+export * from "./components/btngroup/btngroup"
+export * from "./components/button/button"
+export * from "./components/calendar/calendar"
+export * from "./components/checkbox/checkbox"
+export * from "./components/colorinput/colorinput"
+export * from "./components/colorpicker/colorpicker"
+export * from "./components/combobox/combobox"
+export * from "./components/dialog/dialog"
+export * from "./components/form/form"
+export * from "./components/header/header"
+export * from "./components/icon/icon"
+export * from "./components/image/image"
+export * from "./components/input/input"
+export * from "./components/label/label"
+export * from "./components/listbox/listbox"
+export * from "./components/menu/menu"
+export * from "./components/messages/messages"
+export * from "./components/notification/notification"
+export * from "./components/panel/panel"
+export * from "./components/popup/popup"
+export * from "./components/progress/progress"
+export * from "./components/rating/rating"
+export * from "./components/sizers/sizer"
+export * from "./components/slider/slider"
+export * from "./components/switch/switch"
+export * from "./components/tabs/tabs"
+export * from "./components/textarea/textarea"
+export * from "./components/textedit/textedit"
+export * from "./components/tooltips/tooltips"
+export * from "./components/treeview/treeview"
+export * from "./components/viewport/viewport"