x4js 2.0.2 → 2.0.4

package/lib/src/demo/main.tsx

@@ -1,323 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * 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/lib/src/main.scss

@@ -1,21 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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/lib/src/main.tsx

@@ -1,323 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * 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/lib/src/x4.scss

@@ -1,19 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file x4.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 "./components/normalize.scss";
-@use "./components/themes.scss";
-@use "./components/base.scss"