x4js 1.4.37 → 1.4.40

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,6 +149,9 @@ class Dialog extends popup_1.Popup {
             this.setStyleValue('height', this.m_props.dlgHeight + '%');
         }
         this.addClass('@resized');
+        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));
@@ -343,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

@@ -642,6 +642,10 @@ class GridView extends layout_1.VLayout {
             return;
         }
         const update = () => {
+            // element destroyed between updateScroll and now
+            if (!this.dom) {
+                return;
+            }
             let newTop = Math.floor(this.m_view_el.dom.scrollTop / (this.m_itemHeight || 1));
             if (newTop != this.m_topIndex || forceUpdate) {
                 this.m_topIndex = newTop;

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

@@ -753,6 +753,7 @@ class Spreadsheet extends layout_1.VLayout {
             case 'Enter': {
                 this.editCurCell();
                 event.stopPropagation();
+                event.preventDefault();
                 break;
             }
             case 'Delete': {
@@ -894,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,
@@ -931,10 +932,15 @@ class Spreadsheet extends layout_1.VLayout {
                 this.killEditor(true);
             });
             input.setDomEvent('keydown', (e) => {
+                // prevented by edit...
+                if (e.defaultPrevented) {
+                    return;
+                }
                 switch (e.key) {
                     case 'Escape': {
                         this.killEditor(false);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                     case 'Enter':
@@ -945,18 +951,21 @@ class Spreadsheet extends layout_1.VLayout {
                         }
                         movesel(0, sens);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                     case 'ArrowUp':
                     case 'Up': {
                         movesel(-1, 0);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                     case 'ArrowDown':
                     case 'Down': {
                         movesel(1, 0);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                 }
@@ -972,6 +981,7 @@ class Spreadsheet extends layout_1.VLayout {
                     case 'Escape': {
                         this.killEditor(false);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                     case 'Enter':
@@ -982,6 +992,7 @@ class Spreadsheet extends layout_1.VLayout {
                         }
                         movesel(0, sens);
                         e.stopPropagation();
+                        e.preventDefault();
                         break;
                     }
                 }

package/lib/svgcomponent.d.ts

@@ -62,7 +62,7 @@ declare abstract class SVGItem {
      * @returns this
      */
     attr(name: string, value: string): this;
-    style(name: string, value: string): this;
+    style(name: string, value: string | number): this;
     /**
      * add a class
      * @param name class name to add

package/lib/svgcomponent.js

@@ -114,13 +114,14 @@ class SVGItem {
         return this;
     }
     style(name, value) {
-        if (value === undefined) {
-            value = null;
+        if (value === undefined || value === '' || value === undefined) {
+            this.m_style.delete(name);
+            return;
         }
-        else if (!component_1._x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
+        if (!component_1._x4_unitless[name] && ((0, tools_1.isNumber)(value) || reNumber.test(value))) {
             value = value + 'px';
         }
-        this.m_style.set(name, value);
+        this.m_style.set(name, '' + value);
         return this;
     }
     /**

package/lib/x4.css

@@ -840,6 +840,7 @@ textarea::selection {
   display: flex;
   align-items: center;
   background-color: var(--x4-selection-color);
+  width: 0;
 }
 .x-dialog > .title .x-icon {
   width: 2em;
@@ -858,6 +859,9 @@ textarea::selection {
 .x-dialog > .title .x-label {
   border-bottom: none;
   padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .x-dialog > .title .res-btn {
   display: none;
@@ -1149,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;
 }
@@ -1159,7 +1163,7 @@ 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 {
@@ -1213,10 +1217,15 @@ textarea::selection {
 .x-spreadsheet .x-editor {
   position: absolute;
   min-height: 0;
+  margin: 0;
 }
 .x-spreadsheet .x-editor input {
   margin: 0;
   min-height: 0;
+  height: 100%;
+}
+.x-form .x-spreadsheet .x-editor {
+  background-color: white;
 }
 .x-side-bar {
   min-width: 44px;
@@ -1293,9 +1302,13 @@ textarea::selection {
   background-color: white;
   padding: 2px 0;
 }
-.x-popup-table tr:hover,
 .x-popup-table tr.x-selected {
-  background-color: #c8ffff;
+  background-color: var(--x4-selection-color);
+  color: var(--x4-selection-text);
+}
+.x-popup-table tr:hover {
+  background-color: var(--x4-hover-color);
+  color: var(--x4-hover-text);
 }
 .x-popup-table td {
   padding: 3px 8px;

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.37",
+	"version": "1.4.40",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

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

@@ -234,6 +234,10 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogBoxEven
 		
 		this.addClass('@resized');
 
+		if( this.m_el_title ) {
+			this.m_el_title.setStyleValue( "width", "auto" );
+		}
+
 		if (this.m_props.maximized) {
 			this._maximize();
 			this.emit('size', EvSize(null));
@@ -462,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

@@ -855,6 +855,12 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 		}
 
 		const update = () => {
+
+			// element destroyed between updateScroll and now
+			if( !this.dom ) {
+				return;
+			}
+
 			let newTop = Math.floor(this.m_view_el.dom.scrollTop / (this.m_itemHeight || 1));
 
 			if (newTop != this.m_topIndex || forceUpdate) {

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

@@ -1015,6 +1015,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 			case 'Enter': {
 				this.editCurCell();
 				event.stopPropagation( );
+				event.preventDefault( );
 				break;
 			}
 
@@ -1200,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,
@@ -1247,11 +1248,16 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 			} );
 
 			input.setDomEvent( 'keydown', (e: KeyboardEvent) => {
-				
+				// prevented by edit...
+				if( e.defaultPrevented ) {
+					return;
+				}
+
 				switch (e.key) {
 					case 'Escape': {
 						this.killEditor(false);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 
@@ -1264,6 +1270,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 
 						movesel(0, sens);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 
@@ -1271,6 +1278,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 					case 'Up': {
 						movesel(-1, 0);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 
@@ -1278,6 +1286,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 					case 'Down': {
 						movesel(1, 0);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 				}
@@ -1296,6 +1305,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 					case 'Escape': {
 						this.killEditor(false);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 
@@ -1308,6 +1318,7 @@ export class Spreadsheet extends VLayout<SpreadsheetProps, SpreadsheetEventSet>
 
 						movesel(0, sens);
 						e.stopPropagation();
+						e.preventDefault( );
 						break;
 					}
 				}

package/src/svgcomponent.ts

@@ -131,16 +131,18 @@ abstract class SVGItem {
 		return this;
 	}
 
-	style( name: string, value: string ) : this {
+	style( name: string, value: string | number ) : this {
 		
-		if (value === undefined) {
-			value = null;
+		if (value === undefined || value==='' || value===undefined ) {
+			this.m_style.delete( name );
+			return;
 		}
-		else if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
+		
+		if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
 			value = value + 'px';
 		}
 
-		this.m_style.set( name, value );
+		this.m_style.set( name, ''+value );
 		return this;
 	}
 

package/src/x4.less

@@ -1052,6 +1052,7 @@ textarea {
 		display: flex;
 		align-items: center;
 		background-color: var( --x4-selection-color );
+		width: 0;	// to avoid title changing dialog size when long
 		
 		.x-icon {
 			width: 2em;
@@ -1074,6 +1075,9 @@ textarea {
 		.x-label {
 			border-bottom: none;
 			padding: 0;
+			overflow: hidden;
+    		text-overflow: ellipsis;
+    		white-space: nowrap;
 		}
 
 		.res-btn {
@@ -1397,7 +1401,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;
 
@@ -1407,7 +1411,7 @@ textarea {
 	}
 
 	.x-cell {
-		border-right: 1px solid #f0f0f0;
+		border-right: 1px solid #d0d0d0;
 		
 		&.center {
 			text-align: center;
@@ -1482,14 +1486,20 @@ textarea {
 	.x-editor {
 		position: absolute;
 		min-height: 0;
+		margin: 0;
 
 		input {
 			margin: 0;
 			min-height: 0;
+			height: 100%;
 		}
 	}
 }
 
+.x-form .x-spreadsheet .x-editor {
+	background-color: white;
+}
+
 .x-side-bar {
 	min-width: 44px;
 
@@ -1594,9 +1604,15 @@ textarea {
 	background-color: white;
 	padding: 2px 0;	
 
-	tr:hover,
 	tr.x-selected {
-		background-color: rgba(200,255,255,1);
+		//background-color: rgba(200,255,255,1);
+		background-color: var(--x4-selection-color);
+		color: var( --x4-selection-text);
+	}
+
+	tr:hover {
+		background-color: var(--x4-hover-color);
+		color: var( --x4-hover-text);
 	}
 
 	td {

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 } );
 }