x4js 2.2.7 → 2.2.9

package/src/components/messages/messages.ts

@@ -17,6 +17,8 @@ import { Progress } from '../components.js';
 import "./messages.module.scss";
 
 import error_icon from "./circle-exclamation.svg";
+import question_icon from "./circle-question.svg";
+
 import pen_icon from "./pen-field.svg";
 import spinner from "./spinner.svg"
 
@@ -40,7 +42,16 @@ export class MessageBox extends Dialog<DialogProps>
 	 * 
 	 */
 
-	private static _create( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ) {
+	private static _create( msg: string | UnsafeHtml, buttons: BtnGroupItem[], title: string, icon_type: "error" | "question" ) {
+
+		let icon = error_icon;
+		switch( icon_type ) {
+			case "question": {
+				icon = question_icon;
+				break;
+			}
+		}
+
 		const box = new MessageBox({ 
 			modal: true,
 			title: title ?? _tr.global.error,
@@ -65,9 +76,9 @@ export class MessageBox extends Dialog<DialogProps>
 	 * display a messagebox
 	 */
 
-	static show( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ): MessageBox {
+	static show( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string, icon_type?: "error" | "question" ): MessageBox {
 
-		const box = this._create( msg, buttons, title );
+		const box = this._create( msg, buttons, title, icon_type );
 		box.on( "btnclick", ( ev ) => {
 			asap( ( ) => {
 				box.close() 
@@ -82,10 +93,10 @@ export class MessageBox extends Dialog<DialogProps>
 	 * idem with promise
 	 */
 
-	static async showAsync( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ) : Promise<string> {
+	static async showAsync( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string, icon_type?: "error" | "question" ) : Promise<string> {
 
 		return new Promise( (resolve, reject ) => {
-			const box = this._create( msg, buttons, title );
+			const box = this._create( msg, buttons, title, icon_type );
 			box.on( "btnclick", ( ev ) => {
 				asap( ( ) => {
 					resolve( ev.button );
@@ -99,6 +110,7 @@ export class MessageBox extends Dialog<DialogProps>
 	}
 }
 
+// :: INPUT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 interface InputOptions {
 	password?: boolean;
@@ -168,6 +180,8 @@ export class InputBox extends Dialog<DialogProps>
 }
 
 
+// :: PROMPT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
 
 @class_ns( "x4" )
 export class PromptBox extends Dialog<DialogProps>
@@ -237,6 +251,9 @@ export class PromptBox extends Dialog<DialogProps>
 	}
 }
 
+
+// :: PROGRESS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
 @class_ns( "x4" )
 export class ProgressionBox  extends Dialog {
 

package/src/components/monaco/monaco.module.scss

@@ -0,0 +1,22 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file monacoeditor.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2026 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.
+ **/
+ 
+.x4monacoeditor {
+	display: grid;
+	grid-template-rows: 1fr;
+	grid-template-columns: 1fr;
+	overflow: hidden;
+}

package/src/components/monaco/monaco.ts

@@ -1,25 +1,111 @@
-import { Component, ComponentProps } from '../../x4.js';
+import { class_ns, Component, ComponentProps } from '../../x4.js';
 
-import * as monaco from './bin/monaco.js';
-import "./bin/monaco.css"
+import Monaco from './bin/monaco'; 
+import "./monaco.module.scss"
 
 
 interface MonacoEditorProps extends ComponentProps {
 	language: "typescript" | "javascript" | "json" | "css" | "html";
 	theme?: string;
 	content?: string;
+	options?: Monaco.editor.IEditorOptions & Monaco.editor.IGlobalEditorOptions;
 }
 
+@class_ns( "x4" )
 export class MonacoEditor extends Component<MonacoEditorProps> {
 
+	static initCount = 0;
+	static basePath: string = "./bin";
+	static monaco: typeof Monaco;
+	static initCbs: Function[] = [];
+
+	private _editor: Monaco.editor.IStandaloneCodeEditor;
+
+	static async start( ) { 
+		if( this.initCount ) {
+			return;
+		}
+
+		this.monaco = (await import( "./bin/monaco.js" )).default;
+		this.initCount++;
+
+		globalThis.MonacoEnvironment = {
+			getWorkerUrl: function (_moduleId, label) {
+				let workerPath: string;
+
+				if (label == 'json') {
+					workerPath = 'json.worker.js';
+				}
+				else if (label == 'css' || label == 'scss' || label == 'less') {
+					workerPath = 'css.worker.js';
+				}
+				else if (label == 'html' ) {
+					workerPath = 'html.worker.js';
+				}
+				else if (label === 'typescript' || label === 'javascript') {
+					workerPath = 'ts.worker.js';
+				}
+				else {
+					workerPath = "editor.worker.js";
+				}
+
+				const fullpath = MonacoEditor.basePath+'/workers/'+workerPath;
+				console.log( `getting "${label} path: ${fullpath}` );
+				return fullpath;
+			}
+		};
+
+		const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = MonacoEditor.basePath+'/monaco.css';
+        link.type = 'text/css';
+        document.head.appendChild(link);
+	}
+
+	static addTypelib( name: string, code: string ) {
+		const register = ( ) => {
+			///@ts-ignore
+			const ts = MonacoEditor.monaco.languages.typescript;
+			///@ts-ignore
+			ts.typescriptDefaults.addExtraLib( code, `ts:filename/${name}`);
+		}
+
+		if( MonacoEditor.monaco ) {
+			register( );
+		}
+		else {
+			this.initCbs.push( register );
+		}
+	}
+
 	constructor( props: MonacoEditorProps ) {
+		const content = props.content;
+		delete props.content;
+
 		super( props );
-		
-		monaco.editor.create( this.dom as HTMLElement, {
-			value: props.content,
-			language: props.language,
-			theme: props.theme,
-		});
+
+		MonacoEditor.start( )
+			.then( ( ) => {
+				MonacoEditor.initCbs.forEach( x => x() );
+
+				this._editor = MonacoEditor.monaco.editor.create( this.dom as HTMLElement, {
+					value: content,
+					language: props.language,
+					theme: props.theme,
+					//automaticLayout: true,
+				});
+
+				if( props.options ) {
+					this._editor.updateOptions( props.options );
+				}
+			} );
+
+		this.addDOMEvent( "resized", ( ) => {
+			//const rc = this.getBoundingRect( );
+			if( this._editor ) {
+				this._editor.layout();
+			}
+		})
 	}
 }
 

package/src/components/monaco/readme.md

@@ -1,3 +1,4 @@
 # using monaco in x4
 
-you must copy ./bin/* in your destination folder
+you must copy ./bin/* in your destination folder ex. monaco folder 
+see demo/components/monaco for a full example.

package/src/components/normalize.scss

@@ -8,7 +8,7 @@
  * @file normalize.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

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

@@ -8,7 +8,7 @@
  * @file notification.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/notification/notification.ts

@@ -8,7 +8,7 @@
  * @file notification.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/panel/panel.module.scss

@@ -8,7 +8,7 @@
  * @file panel.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/panel/panel.ts

@@ -8,7 +8,7 @@
  * @file panel.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/popup/popup.module.scss

@@ -8,7 +8,7 @@
  * @file popup.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/popup/popup.ts

@@ -8,7 +8,7 @@
  * @file popup.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/progress/progress.module.scss

@@ -8,7 +8,7 @@
  * @file progress.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/progress/progress.ts

@@ -8,7 +8,7 @@
  * @file progress.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/propgrid/progrid.module.scss

@@ -10,7 +10,7 @@
 
 .x4propertygrid {
 	background: var( --propertygrid-background );
-	border: 1px solid var(--color-primary-a50);
+	border: 1px solid var(--border);
 	overflow-y: auto;
     flex-basis: 0;
 	
@@ -40,7 +40,7 @@
 
 		&:not( :last-child ) {
 			border-bottom: 1px solid var(--color-primary-a50);
-			box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
+			//box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 		}
 		
 		display: flex;

package/src/components/propgrid/propgrid.ts

@@ -8,7 +8,7 @@
  * @file propgrid.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/radio/radio.module.scss

@@ -8,7 +8,7 @@
  * @file radio.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/radio/radio.ts

@@ -8,7 +8,7 @@
  * @file radio.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/rating/rating.ts

@@ -8,7 +8,7 @@
  * @file rating.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/select/select.module.scss

@@ -1,9 +1,32 @@
 
 
-.x4select {
-	padding: 4px;
+.x4select,
+::picker(select) {
+	appearance: base-select;
+
+	padding: 5px;
 	outline: none;
 
+	border-radius: 0;
 	border: 1px solid var( --border );
 	background-color: white;
-}
+}
+
+//-- global saddly
+option {
+	padding: 5px;
+}
+
+option:checked {
+ 	background-color: var( --accent-background );
+  	color: var( --accent-color );
+}
+
+option:hover {
+ 	background-color: var( --accent-background-focus );
+  	color: var( --accent-color );
+}
+
+option::checkmark {
+    display: none;
+}

package/src/components/shared.scss

@@ -8,7 +8,7 @@
  * @file shared.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

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

@@ -8,7 +8,7 @@
  * @file sizer.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.
@@ -26,8 +26,10 @@
 		cursor: ns-resize;
 	}
 
-	&.vsize,
-	&.hsize {
+	&.vsize-next,
+	&.vsize-prev,
+	&.hsize-next,
+	&.hsize-prev {
 		position: relative;
 		align-self: stretch;
 		min-width: 4px;
@@ -38,11 +40,13 @@
 		}
 	}
 
-	&.hsize {
+	&.hsize-next,
+	&.hsize-prev {
 		cursor: ew-resize;		
 	}
 
-	&.vsize {
+	&.vsize-next,
+	&.vsize-prev {
 		cursor: ns-resize;
 	}
 

package/src/components/sizers/sizer.ts

@@ -8,7 +8,7 @@
  * @file sizer.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.
@@ -33,7 +33,8 @@ interface CSizerEvent extends ComponentEvents {
 	stop: ComponentEvent;
 }
 
-type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "hsize" | "vsize";
+type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" 
+					| "hsize-prev" | "hsize-next" | "vsize-prev" | "vsize-next";
 
 /**
  * 
@@ -57,8 +58,13 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			this.setCapture( e.pointerId );
 
 			let targ = target;
-			if( !targ && (type=='hsize' || type=='vsize') ) {
-				targ = this.nextElement( );
+			if( !targ ) {
+				if( type=='hsize-next' || type=='vsize-next' ) {
+					targ = this.nextElement( );
+				}
+				else if( type=='hsize-prev' || type=='vsize-prev' ) {
+					targ = this.prevElement( );
+				}
 			}
 
 			this._ref = targ ?? componentFromDOM( this.dom.parentElement );
@@ -66,14 +72,14 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			this._delta = {x:0,y:0};
 			const rc = this._ref.getBoundingRect();
 
-			if( this._type=="hsize" || this._type.includes("left") ) {
+			if( this._type=="hsize-next" || this._type.includes("left") ) {
 				this._delta.x = e.pageX-rc.left;
 			}
 			else {
 				this._delta.x = e.pageX-(rc.left+rc.width);
 			}
 
-			if( this._type=="vsize" || this._type.includes("top") ) {
+			if( this._type=="vsize-next" || this._type.includes("top") ) {
 				this._delta.y = e.pageY-rc.top;
 			}
 			else {
@@ -110,11 +116,11 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
-		else if( this._type=="vsize" ) {
+		else if( this._type=="vsize-next" ) {
 			nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
-		else if( this._type.includes("bottom") ) {
+		else if( this._type.includes("bottom") || this._type=='vsize-prev' ) {
 			//nr.top = rc.top;
 			nr.height = (pt.y-rc.top);
 			horz = false;
@@ -123,10 +129,10 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			nr.left = pt.x;
 			nr.width = ((rc.left+rc.width)-pt.x);
 		}
-		else if( this._type=="hsize" ) {
+		else if( this._type=="hsize-next" ) {
 			nr.width = ((rc.left+rc.width)-pt.x);
 		}
-		else if( this._type.includes("right") ) {
+		else if( this._type.includes("right") || this._type=='hsize-prev' ) {
 			nr.width = (pt.x-rc.left);
 		}
 
@@ -143,14 +149,14 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 
 @class_ns( "x4" )
 export class HSizer extends CSizer {
-	constructor( ) {
-		super( "hsize" );
+	constructor( next = true ) {
+		super( next ? "hsize-next" : "hsize-prev" );
 	}
 }
 
 @class_ns( "x4" )
 export class VSizer extends CSizer {
-	constructor( ) {
-		super( "vsize" );
+	constructor( next = true ) {
+		super( next ? "vsize-next" : "vsize-prev" );
 	}
 }

package/src/components/slider/slider.module.scss

@@ -8,7 +8,7 @@
  * @file slider.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/slider/slider.ts

@@ -8,7 +8,7 @@
  * @file slider.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/spreadsheet/spreadsheet.module.scss

@@ -8,7 +8,7 @@
  * @file spreadsheet.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/spreadsheet/spreadsheet.ts

@@ -8,7 +8,7 @@
  * @file spreadsheet.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/switch/switch.module.scss

@@ -8,7 +8,7 @@
  * @file switch.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/switch/switch.ts

@@ -8,7 +8,7 @@
  * @file switch.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/tabs/tabs.ts

@@ -8,7 +8,7 @@
  * @file tabs.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.
@@ -153,7 +153,7 @@ export class Tabs extends Box<TabsProps> {
 	constructor( props: TabsProps ) {
 		super( props );
 
-		this.setClass( "vertical", props.vertical );
+		this.setClass( "vertical", props.vertical ?? false );
 		
 		const pages = props.items?.map( x => {
 			return {

package/src/components/textarea/textarea.module.scss

@@ -8,7 +8,7 @@
  * @file textarea.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/textarea/textarea.ts

@@ -8,7 +8,7 @@
  * @file textarea.ts
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.

package/src/components/textedit/textedit.module.scss

@@ -8,7 +8,7 @@
  * @file textedit.module.scss
  * @author Etienne Cochard 
  * 
- * @copyright (c) 2024 R-libre ingenierie
+ * @copyright (c) 2026 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.