x4js 2.2.57 → 2.2.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.57",
+  "version": "2.2.59",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/btngroup/btngroup.ts

@@ -37,6 +37,7 @@ type predefined = 		`ok${ "" | `.${string}`}`
 					|	`no${ "" | `.${string}`}`
 					| 	`retry${ "" | `.${string}`}`
 					| 	`abort${ "" | `.${string}`}`
+					| 	`save${ "" | `.${string}`}`
 					| 	"-" | ">>"	// - = Flex
 					|   "~";		// space
 
@@ -120,6 +121,7 @@ export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 					case "no":		title = _tr.global.no; break;
 					case "yes":		title = _tr.global.yes; break;
 					case "retry":	title = _tr.global.retry; break;
+					case "save":	title = _tr.global.save; break;
 				}
 
 				b = new Button( { cls, id: txt, label: title, click: ( ) => {

package/src/components/monaco/monaco.ts

@@ -131,5 +131,13 @@ export class MonacoEditor extends Component<MonacoEditorProps> {
 		await this._start( );
 		return this._monaco;
 	}
+
+	getText( ) : string {
+		return this._editor.getValue( );
+	}
+
+	setText( text: string ) {
+		return this._editor.setValue( text );
+	}
 }
 

package/src/components/popup/popup.ts

@@ -145,15 +145,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		this._do_show( );		// to compute size
 
 		const fixpos = ( ) => {
-			console.log( "fixpos" );
-
 			const orc = this.getBoundingRect( );
 			this.setStyle( {
 				left: ((window.innerWidth - orc.width) / 2) +'px',
 				top:  ((window.innerHeight - orc.height) / 2) +'px',
 			} );
-
-			console.log( orc );
 		}
 
 		asap( fixpos );

package/src/components/propgrid/propgrid.ts

@@ -197,7 +197,7 @@ export class PropertyGrid extends VBox {
 			editor = new Input({ 
 				type: "checkbox", 
 				id: item.name,
-				name: item.name, 
+				//name: item.name, 
 				checked: value as boolean, 
 				dom_events: {
 					change: ( e: Event ) => {
@@ -212,7 +212,7 @@ export class PropertyGrid extends VBox {
 				value: value as ListboxID,
 				id: item.name,
 				items: item.options,
-				name: item.name,
+				//name: item.name,
 				change: ( e: EvChange ) => {
 					item.callback?.( item.name, e.value );
 				}
@@ -222,7 +222,7 @@ export class PropertyGrid extends VBox {
 			editor = new Input({ 
 				type: 'password',
 				id: item.name,
-				name: item.name, 
+				//name: item.name, 
 				value: String(value), 
 				focus: ( e: EvFocus ) => {
 					if( e.focus_out ) {
@@ -235,7 +235,7 @@ export class PropertyGrid extends VBox {
 			editor = new Input({ 
 				type: 'number', 
 				id: item.name,
-				name: item.name, 
+				//name: item.name, 
 				value: String(value),
 				step: item.step,
                 min: item.min,
@@ -273,7 +273,7 @@ export class PropertyGrid extends VBox {
             editor = new Input({ 
                 type: 'text', 
                 id: item.name,
-                name: item.name, 
+                //name: item.name, 
                 value: value as string,
                 focus: ( e: EvFocus ) => {
                     if( e.focus_out ) {

package/src/components/treeview/treeview.ts

@@ -209,6 +209,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 
 		if( props.footer ) {
 			props.footer.setAttribute( "id", "footer" );
+			props.footer.addClass( "packed" );
 		}
 
 		this.setAttribute( "tabindex", 0 );

package/src/core/core_tools.ts

@@ -982,18 +982,31 @@ export function setWaitCursor(wait: boolean) {
  * return the focusable elements from a given node
  */
 
-export function getFocusableElements(root: Element) {
-	const els = [
-		'button:not([tabindex="-1"]):not([disabled])',
+const FOCUSABLE = [
+	'button:not([tabindex="-1"])',
 		'[href]',
-		'input:not([disabled])',
-		'select:not([disabled])',
-		'textarea:not([disabled])',
+	'input',
+	'select',
+	'textarea',
 		'[tabindex]:not([tabindex="-1"])'
-	]
+]	.map( x => x+':not(:disabled):not([inert])' )
+	.join( ',' );
+
+export function getFocusableElements(root: Element) {
+	const focusable = Array.from(root.querySelectorAll(FOCUSABLE));
 
-	const focusable = Array.from(root.querySelectorAll(els.join(',')));
-	return focusable.filter(x => (x as HTMLElement).offsetParent != null);	// check visibility
+	return focusable.filter( x => {
+		// check visibility
+		if( (x as HTMLElement).offsetParent == null ) {
+			return false;
+		}	
+		// check :inert | :disable
+		if( x.closest('[inert]') || x.closest(":disabled") ) {
+			return false;
+		}
+
+		return true;
+	});
 }
 
 /**