x4js 1.4.38 → 1.4.41

package/README.md

@@ -2,4 +2,14 @@
 
 This is the x4 framework repository.
 
-You will find the documentation & tutorials [Here](https://x4js.org)
+X4 is a full typescript framework to develop Web or Desktop applications.
+Included more than 50 controls like grids, charts, etc. Everything needed to push the limits of your creativity.
+If these components are not enough, you can create your in few lines.
+
+## Documentation
+see [documentation](https://x4js.org/doc/)
+## API
+see [API](https://x4js.org/api/)
+
+
+[web site](https://x4js.org)

package/lib/colorpicker.d.ts

@@ -91,7 +91,8 @@ export interface ColorPickerEditorProps extends ColorPickerProps {
     labelWidth?: number;
     cust_colors?: Color[];
     displayValue?: false;
-    change: EventCallback<EvChange>;
+    change?: EventCallback<EvChange>;
+    name?: string;
 }
 export declare class ColorPickerEditor extends HLayout<ColorPickerEditorProps, ColorPickerEventMap> {
     constructor(props: ColorPickerEditorProps);

package/lib/combobox.js

@@ -131,7 +131,7 @@ class ComboBox extends layout_1.HLayout {
      */
     showPopup() {
         let props = this.m_props;
-        if (props.readOnly) {
+        if (props.readOnly || this.hasClass("@disable")) {
             return;
         }
         // need creation ?
@@ -200,6 +200,11 @@ class ComboBox extends layout_1.HLayout {
                 this.m_props.value = item.id;
             }
         }
+        else {
+            if (this.m_ui_input && this.m_ui_input instanceof input_1.Input) {
+                this.m_ui_input.value = "";
+            }
+        }
     }
     /**
      *
@@ -218,13 +223,17 @@ class ComboBox extends layout_1.HLayout {
         if ((0, tools_1.isFunction)(items)) {
             items = items();
         }
-        items.some((v) => {
+        const found = items.some((v) => {
             if (v.id === id) {
                 this._setInput(v);
                 this.m_selection = v;
                 return true;
             }
         });
+        if (!found) {
+            this._setInput(null);
+            this.m_selection = null;
+        }
     }
     get input() {
         return this.m_ui_input instanceof input_1.Input ? this.m_ui_input : null;

package/lib/dialog.js

@@ -149,7 +149,9 @@ class Dialog extends popup_1.Popup {
             this.setStyleValue('height', this.m_props.dlgHeight + '%');
         }
         this.addClass('@resized');
-        this.m_el_title.setStyleValue("width", "auto");
+        if (this.m_el_title) {
+            this.m_el_title.setStyleValue("width", "auto");
+        }
         if (this.m_props.maximized) {
             this._maximize();
             this.emit('size', (0, component_1.EvSize)(null));
@@ -344,9 +346,9 @@ class Dialog extends popup_1.Popup {
         let { x, y } = (0, tools_1.getMousePos)(event, true);
         let wrc = (0, component_1.flyWrap)(x4dom_1.x4document.body).getBoundingRect();
         let rc = this.getBoundingRect(true);
-        let trc = this.m_el_title.getBoundingRect();
+        ///let trc = this.m_el_title.getBoundingRect();
         let dx = x - rc.left, dy = y - rc.top;
-        let cstyle = this.getComputedStyle();
+        //let cstyle = this.getComputedStyle();
         //let topw = cstyle.parse('marginTop') + cstyle.parse('paddingTop') + cstyle.parse('borderTopWidth');
         //let botw = cstyle.parse('marginBottom') + cstyle.parse('paddingBottom') + cstyle.parse('borderBottomWidth');
         //let lftw = cstyle.parse('marginLeft') + cstyle.parse('paddingLeft') + cstyle.parse('borderLeftWidth');

package/lib/gridview.js

@@ -398,12 +398,14 @@ class GridView extends layout_1.VLayout {
             _col.width = width;
             if (_col.flex) {
                 _col.$hdr.removeClass('@flex');
+                _col.$ftr?.removeClass('@flex');
                 _col.flex = undefined;
                 updateFlex = true;
             }
         }
         else if (width < 0 && !_col.flex) {
             _col.$hdr.addClass('@flex');
+            _col.$ftr?.addClass('@flex');
             _col.flex = 1;
             updateFlex = true;
         }

package/lib/listview.js

@@ -481,6 +481,7 @@ class PopupListView extends popup_1.Popup {
     constructor(props) {
         super({ tabIndex: false });
         this.enableMask(false);
+        this.addClass("@non-maskable");
         props.tabIndex = false;
         this.m_list = new ListView(props);
         //this.m_list.addClass( '@fit' );

package/lib/spreadsheet.js

@@ -895,8 +895,8 @@ class Spreadsheet extends layout_1.VLayout {
             style: {
                 left: rc.left - prc.left,
                 top: rc.top - prc.top,
-                width: rc.width,
-                height: rc.height
+                width: rc.width - 1,
+                height: rc.height - 1
             },
             tabIndex: false,
             value: cellvalue,

package/lib/x4.css

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 :root {
-  --x4-font: "Inter";
+  --x4-font: "Helvetica, Arial, Sans-Serif";
   --x4-font-size: 13px;
   --x4-base-color: #266888;
   --x4-selection-color: #2458B3;
@@ -703,8 +703,8 @@ textarea::selection {
   padding: 4px;
 }
 .x-menu-item:hover {
-  background-color: #c6d3d9;
-  color: var(--gray-900);
+  background-color: var(--x4-hover-color);
+  color: var(--x4-hover-text);
 }
 .x-menu-item:hover .x-icon {
   color: var(--gray-900);
@@ -1153,7 +1153,7 @@ textarea::selection {
 .x-grid-view .x-row {
   position: absolute;
   width: calc(100% - 4px);
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid #d0d0d0;
   align-items: center;
   height: 2em;
 }
@@ -1163,15 +1163,17 @@ textarea::selection {
 }
 .x-spreadsheet .x-cell,
 .x-grid-view .x-cell {
-  border-right: 1px solid #f0f0f0;
+  border-right: 1px solid #d0d0d0;
 }
 .x-spreadsheet .x-cell.center,
 .x-grid-view .x-cell.center {
   text-align: center;
+  justify-content: center;
 }
 .x-spreadsheet .x-cell.right,
 .x-grid-view .x-cell.right {
   text-align: right;
+  justify-content: right;
 }
 .x-spreadsheet:focus,
 .x-grid-view:focus {
@@ -1217,7 +1219,6 @@ textarea::selection {
 .x-spreadsheet .x-editor {
   position: absolute;
   min-height: 0;
-  height: calc(100% - 1px);
   margin: 0;
 }
 .x-spreadsheet .x-editor input {

package/lib/x4events.d.ts

@@ -70,10 +70,12 @@ export declare function EvChange(value: unknown, context?: any): EvChange;
  * Selection Event
  * value is the new selection or null
  */
+interface X4Selection {
+}
 export interface EvSelectionChange extends BasicEvent {
-    readonly selection: unknown;
+    readonly selection: X4Selection;
 }
-export declare function EvSelectionChange(selection: unknown, context?: any): EvSelectionChange;
+export declare function EvSelectionChange(selection: X4Selection, context?: any): EvSelectionChange;
 /**
  * ContextMenu Event
  */
@@ -264,3 +266,4 @@ export declare class EventSource<Q extends EventMap, T extends EventTypes = MapE
      */
     removeAllListeners(eventName: string | null): void;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.38",
+	"version": "1.4.41",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",
@@ -11,7 +11,8 @@
 	},
 	"keywords": [
 	  "typescript",
-	  "framework"
+	  "framework",
+	  "sap", "web", "desktop", "application"
 	],
 	"scripts": {
 		"build": "tsc && lessc src/x4.less >lib/x4.css",

package/src/colorpicker.ts

@@ -631,8 +631,8 @@ export interface ColorPickerEditorProps extends ColorPickerProps {
 	labelWidth?: number;
 	cust_colors?: Color[];
 	displayValue?: false,
-
-	change: EventCallback<EvChange>;
+	change?: EventCallback<EvChange>;
+	name?: string;
 }
 
 export class ColorPickerEditor extends HLayout<ColorPickerEditorProps, ColorPickerEventMap> {

package/src/combobox.ts

@@ -191,7 +191,7 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	showPopup() {
 
 		let props = this.m_props;
-		if (props.readOnly) {
+		if (props.readOnly || this.hasClass("@disable") ) {
 			return;
 		}
 
@@ -278,6 +278,11 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 				this.m_props.value = item.id;
 			}
 		}
+		else {
+			if( this.m_ui_input && this.m_ui_input instanceof Input ) {
+				this.m_ui_input.value = "";
+			}
+		}
 	}
 
 	/**
@@ -303,13 +308,18 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 			items = items( );
 		}
 
-		items.some( (v) => {
+		const found = items.some( (v) => {
 			if (v.id === id) {
 				this._setInput( v );
 				this.m_selection = v;
 				return true;
 			}
 		});
+
+		if( !found ) {
+			this._setInput( null );
+			this.m_selection = null;
+		}
 	}
 
 	get input( ) : Input {

package/src/dialog.ts

@@ -233,7 +233,10 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogBoxEven
 		}
 		
 		this.addClass('@resized');
-		this.m_el_title.setStyleValue( "width", "auto" );
+
+		if( this.m_el_title ) {
+			this.m_el_title.setStyleValue( "width", "auto" );
+		}
 
 		if (this.m_props.maximized) {
 			this._maximize();
@@ -463,13 +466,12 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogBoxEven
 
 		let wrc = flyWrap(x4document.body).getBoundingRect();
 		let rc = this.getBoundingRect(true);
-		let trc = this.m_el_title.getBoundingRect();
+		///let trc = this.m_el_title.getBoundingRect();
 
 		let dx = x - rc.left,
 			dy = y - rc.top;
 
-		let cstyle = this.getComputedStyle();
-
+		//let cstyle = this.getComputedStyle();
 		//let topw = cstyle.parse('marginTop') + cstyle.parse('paddingTop') + cstyle.parse('borderTopWidth');
 		//let botw = cstyle.parse('marginBottom') + cstyle.parse('paddingBottom') + cstyle.parse('borderBottomWidth');
 		//let lftw = cstyle.parse('marginLeft') + cstyle.parse('paddingLeft') + cstyle.parse('borderLeftWidth');

package/src/gridview.ts

@@ -555,12 +555,14 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			_col.width = width;
 			if( _col.flex ) {
 				_col.$hdr.removeClass( '@flex' );
+				_col.$ftr?.removeClass( '@flex' );
 				_col.flex = undefined;
 				updateFlex = true;
 			}
 		}
 		else if( width<0 && !_col.flex ) {
 			_col.$hdr.addClass( '@flex' );
+			_col.$ftr?.addClass( '@flex' );
 			_col.flex = 1;
 			updateFlex = true;
 		}

package/src/listview.ts

@@ -691,6 +691,7 @@ export class PopupListView extends Popup<PopupListViewProps,PopupListViewEventMa
 		super({ tabIndex: false });
 
 		this.enableMask(false);
+		this.addClass( "@non-maskable" );
 
 		props.tabIndex = false;
 		this.m_list = new ListView(props);

package/src/spreadsheet.ts

@@ -1201,8 +1201,8 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 			style: {
 				left: rc.left - prc.left,
 				top: rc.top - prc.top,
-				width: rc.width,
-				height: rc.height
+				width: rc.width - 1,
+				height: rc.height - 1
 			},
 			tabIndex: false,
 			value: cellvalue,

package/src/x4.less

@@ -30,7 +30,7 @@
 **/
 
 :root {
-	--x4-font: "Inter";
+	--x4-font: "Helvetica, Arial, Sans-Serif";
 	--x4-font-size: 13px;
 
 	--x4-base-color: #266888;
@@ -878,8 +878,9 @@ textarea {
 	}
 
 	&:hover {
-		background-color: #c6d3d9;
-		color: var( --gray-900 );
+		background-color: var( --x4-hover-color);
+		color: var(--x4-hover-text);
+		
 		.x-icon {
 			color: var( --gray-900 );
 		}
@@ -1401,7 +1402,7 @@ textarea {
 	.x-row {
 		position: absolute;
 		width: calc( 100% - @bwidth );	// todo: border of 1st col
-		border-bottom: 1px solid #f0f0f0;
+		border-bottom: 1px solid #d0d0d0;
 		align-items: center;
 		height: @def-height;
 
@@ -1411,14 +1412,16 @@ textarea {
 	}
 
 	.x-cell {
-		border-right: 1px solid #f0f0f0;
+		border-right: 1px solid #d0d0d0;
 		
 		&.center {
 			text-align: center;
+			justify-content: center;
 		}
 
 		&.right {
 			text-align: right;
+			justify-content: right;
 		}
 	}
 	
@@ -1486,7 +1489,6 @@ textarea {
 	.x-editor {
 		position: absolute;
 		min-height: 0;
-		height: calc( 100% - 1px );
 		margin: 0;
 
 		input {

package/src/x4events.ts

@@ -108,11 +108,14 @@ export function EvChange(value: unknown, context = null ) {
  * value is the new selection or null
  */
 
+interface X4Selection {
+}
+
 export interface EvSelectionChange extends BasicEvent {
-	readonly selection: unknown;
+	readonly selection: X4Selection;
 }
 
-export function EvSelectionChange( selection: unknown, context = null ) {
+export function EvSelectionChange( selection: X4Selection, context = null ) {
 	return BasicEvent<EvSelectionChange>( { selection, context } );
 }