x4js 1.6.5 → 2.0.1

package/lib/src/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/lib/src/x4.scss

@@ -0,0 +1,19 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @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"