x4js 1.4.43 → 1.4.44

package/lib/action.d.ts

@@ -26,10 +26,10 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-import { BasicEvent } from './x4events';
+import { BasicEvent, EvChange } from './x4events';
 import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
 import { IconID } from "./icon";
-import { EvChange, EventHandler } from 'x4js';
+import { EventHandler } from './component';
 export interface EvAction extends BasicEvent {
 }
 export declare function EvAction(source: Action): EvAction;

package/lib/action.js

@@ -31,7 +31,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Action = exports.EvAction = void 0;
 const x4events_1 = require("./x4events");
 const base_component_1 = require("./base_component");
-const x4js_1 = require("x4js");
 function EvAction(source) {
     return (0, x4events_1.BasicEvent)({ source });
 }
@@ -46,11 +45,11 @@ class Action extends base_component_1.BaseComponent {
     }
     set text(t) {
         this.m_props.text = t;
-        this.emit("change", (0, x4js_1.EvChange)(this));
+        this.emit("change", (0, x4events_1.EvChange)(this));
     }
     set icon(i) {
         this.m_props.icon = i;
-        this.emit("change", (0, x4js_1.EvChange)(this));
+        this.emit("change", (0, x4events_1.EvChange)(this));
     }
     fire() {
         this.emit("run", EvAction(this));

package/lib/application.js

@@ -33,7 +33,6 @@ const x4dom_1 = require("./x4dom");
 const base_component_1 = require("./base_component");
 const component_1 = require("./component");
 const settings_1 = require("./settings");
-const x4js_1 = require("x4js");
 const _x4_touch_time = Symbol();
 /**
  * Represents an x4 application, which is typically a single page app.
@@ -128,7 +127,7 @@ class Application extends base_component_1.BaseComponent {
      */
     setMainView(root, clearBefore) {
         const ddom = this.m_props.renderTo ?? x4dom_1.x4document.body;
-        const dest = (0, x4js_1.flyWrap)(ddom);
+        const dest = (0, component_1.flyWrap)(ddom);
         if (!this.m_props.renderTo) {
             dest.setStyleValue('position', 'absolute');
         }

package/lib/gridview.d.ts

@@ -120,6 +120,10 @@ export declare class GridView extends VLayout<GridViewProps, GridViewEventMap> {
     /** @ignore */
     render(): void;
     private _on_col_resize;
+    /**
+     *
+     */
+    sortCol(name: string, asc?: boolean): void;
     /**
      *
      */

package/lib/gridview.js

@@ -69,17 +69,24 @@ class ColHeader extends component_1.Component {
     get sorted() {
         return this.m_sorted;
     }
-    set sorted(v) {
+    //set sorted( v ) {
+    //	this.m_sorted = v;
+    //	this.m_sens = 'dn';
+    //	this.itemWithRef<Icon>( 'sorter' ).show( v );
+    //}
+    sort(v, sens) {
         this.m_sorted = v;
-        this.m_sens = 'dn';
-        this.itemWithRef('sorter').show(v);
+        this.m_sens = sens;
+        const ic = this.itemWithRef('sorter');
+        ic.icon = this.m_sens == 'up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
+        ic.show(v);
     }
     get sens() {
         return this.m_sens;
     }
     toggleSens() {
         this.m_sens = this.m_sens == 'up' ? 'dn' : 'up';
-        this.itemWithRef('sorter').icon = this.m_sens == 'dn' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
+        this.itemWithRef('sorter').icon = this.m_sens == 'up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
     }
 }
 /**
@@ -426,13 +433,24 @@ class GridView extends layout_1.VLayout {
     /**
      *
      */
-    _sortCol(col) {
+    sortCol(name, asc = true) {
+        const col = this.m_columns.find(c => c.id == name);
+        if (col === undefined) {
+            console.assert(false, "unknown field " + name + " in grid.sortCol");
+            return;
+        }
+        this._sortCol(col, asc ? "dn" : "up");
+    }
+    /**
+     *
+     */
+    _sortCol(col, sens = "up") {
         if (col.sortable === false) {
             return;
         }
         this.m_columns.forEach((c) => {
             if (c !== col) {
-                c.$hdr.sorted = false;
+                c.$hdr.sort(false, "dn");
             }
         });
         const $hdr = col.$hdr;
@@ -440,7 +458,7 @@ class GridView extends layout_1.VLayout {
             $hdr.toggleSens();
         }
         else {
-            $hdr.sorted = true;
+            $hdr.sort(true, sens);
         }
         if (this.m_dataview) {
             this.m_dataview.sort([
@@ -852,15 +870,23 @@ class GridView extends layout_1.VLayout {
             let cid = c.getData('col');
             if (cid) {
                 let col = this.m_columns[cid];
-                let fmt = col.formatter;
-                let text;
-                if (fmt && fmt instanceof Function) {
-                    text = fmt(rec[col.id], rec);
-                }
-                else {
-                    text = rec[col.id];
+                let value = rec[col.id];
+                if (value !== undefined) {
+                    if ((0, tools_1.isFunction)(value)) { // FooterRenderer
+                        value(c);
+                    }
+                    else {
+                        let text;
+                        const fmt = col.formatter;
+                        if (fmt && fmt instanceof Function) {
+                            text = fmt(value, rec);
+                        }
+                        else {
+                            text = value;
+                        }
+                        c.setContent(text, false);
+                    }
                 }
-                c.setContent(text, false);
             }
         });
     }

package/lib/tools.d.ts

@@ -384,4 +384,11 @@ interface PasswordRule {
     min: number;
 }
 export declare function generatePassword(length: number, rules?: PasswordRule[]): string;
+/**
+ * taken from live-server
+ * https://github.com/tapio/live-server
+ * @param host
+ * @param port
+ */
+export declare function installHMR(host?: string, port?: string, reloadCallback?: Function): void;
 export {};

package/lib/tools.js

@@ -28,7 +28,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generatePassword = exports.classNames = exports.mix = exports.crc32 = exports.Clipboard = exports.isHtmlString = exports.html = exports.HtmlString = exports.clamp = exports.getMousePos = exports.NetworkError = exports.markdownToHtml = exports.asap = exports.deferCall = exports.waitFontLoading = exports.isNumber = exports.pad = exports.isLiteralObject = exports.isFunction = exports.isArray = exports.isString = exports.downloadData = exports.calcAge = exports.formatIntlDate = exports.parseIntlDate = exports.date_calc_weeknum = exports.date_clone = exports.date_hash = exports.date_sql_utc = exports.date_to_sql = exports.date_diff = exports.date_format = exports._date_set_locale = exports.removeHtmlTags = exports.escapeHtml = exports.sprintf = exports.Rect = exports.Size = exports.Point = exports.camelCase = exports.pascalCase = exports.parseIntlFloat = exports.roundTo = exports.isTouchDevice = void 0;
+exports.installHMR = exports.generatePassword = exports.classNames = exports.mix = exports.crc32 = exports.Clipboard = exports.isHtmlString = exports.html = exports.HtmlString = exports.clamp = exports.getMousePos = exports.NetworkError = exports.markdownToHtml = exports.asap = exports.deferCall = exports.waitFontLoading = exports.isNumber = exports.pad = exports.isLiteralObject = exports.isFunction = exports.isArray = exports.isString = exports.downloadData = exports.calcAge = exports.formatIntlDate = exports.parseIntlDate = exports.date_calc_weeknum = exports.date_clone = exports.date_hash = exports.date_sql_utc = exports.date_to_sql = exports.date_diff = exports.date_format = exports._date_set_locale = exports.removeHtmlTags = exports.escapeHtml = exports.sprintf = exports.Rect = exports.Size = exports.Point = exports.camelCase = exports.pascalCase = exports.parseIntlFloat = exports.roundTo = exports.isTouchDevice = void 0;
 const x4dom_1 = require("./x4dom");
 const i18n_1 = require("./i18n"); // you MUST create a file named translation.js
 // :: ENVIRONMENT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
@@ -1153,3 +1153,51 @@ function shuffle(str, maxlength) {
     }
     return shuffled;
 }
+/**
+ * taken from live-server
+ * https://github.com/tapio/live-server
+ * @param host
+ * @param port
+ */
+function installHMR(host = "127.0.0.1", port = "9876", reloadCallback) {
+    let tm;
+    function refreshCSS() {
+        document.body.style.visibility = "hidden";
+        let sheets = [].slice.call(document.getElementsByTagName("link"));
+        let head = document.getElementsByTagName("head")[0];
+        for (let i = 0; i < sheets.length; ++i) {
+            let elem = sheets[i];
+            head.removeChild(elem);
+            let rel = elem.rel;
+            if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
+                let url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
+                elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
+            }
+            head.appendChild(elem);
+        }
+        if (tm) {
+            clearTimeout(tm);
+        }
+        tm = setTimeout(() => {
+            document.body.style.visibility = "unset";
+        }, 50);
+    }
+    const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+    const address = `${protocol}${host}:${port}/ws`;
+    const socket = new WebSocket(address);
+    socket.onmessage = function (msg) {
+        if (msg.data == 'reload') {
+            if (reloadCallback) {
+                reloadCallback();
+            }
+            else {
+                window.location.reload();
+            }
+        }
+        else if (msg.data == 'refreshcss') {
+            refreshCSS();
+        }
+    };
+    console.log('Live reload enabled.');
+}
+exports.installHMR = installHMR;

package/lib/x4.css

@@ -1115,17 +1115,17 @@ textarea::selection {
 .x-spreadsheet .x-header .x-cell,
 .x-grid-view .x-header .x-cell {
   border-right: 1px solid rgba(0, 0, 0, 0.1);
-  height: unset;
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 .x-spreadsheet .x-footer .x-cell span,
 .x-grid-view .x-footer .x-cell span,
 .x-spreadsheet .x-header .x-cell span,
 .x-grid-view .x-header .x-cell span {
   min-width: 0;
-  text-transform: uppercase;
   text-overflow: ellipsis;
   overflow: hidden;
-  font-weight: bold;
 }
 .x-spreadsheet .x-footer .x-cell.sort,
 .x-grid-view .x-footer .x-cell.sort,
@@ -1134,14 +1134,11 @@ textarea::selection {
   height: 0.7rem;
   opacity: 0.7;
 }
-.x-spreadsheet .x-header .x-cell,
-.x-grid-view .x-header .x-cell {
-  display: flex;
-  align-items: center;
-}
 .x-spreadsheet .x-header .x-cell span,
 .x-grid-view .x-header .x-cell span {
   width: unset;
+  text-transform: uppercase;
+  font-weight: bold;
 }
 .x-spreadsheet .x-header .x-cell .sort,
 .x-grid-view .x-header .x-cell .sort {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.43",
+	"version": "1.4.44",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/action.ts

@@ -27,10 +27,10 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { BasicEvent } from './x4events'
+import { BasicEvent, EvChange } from './x4events'
 import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component'
 import { IconID } from "./icon"
-import { EvChange, EventHandler } from 'x4js';
+import { EventHandler } from './component';
 
 //TODO: implement all
 

package/src/application.ts

@@ -30,11 +30,9 @@
 import { x4document } from './x4dom'
 import { EvMessage } from './x4events'
 import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component'
-import { Component } from './component'
+import { Component, flyWrap } from './component'
 import { Settings } from './settings'
-import { deferCall } from './tools'
 import { _tr } from './i18n'
-import { flyWrap } from 'x4js'
 
 const _x4_touch_time = Symbol( );
 

package/src/component.ts

@@ -33,7 +33,7 @@
  *		create Container class
  */
 
-import { pascalCase, Rect, isString, isArray, Size, Point, isNumber, asap, HtmlString, isHtmlString, Constructor, getMousePos } from './tools';
+import { pascalCase, Rect, isString, isArray, Size, isNumber, asap, HtmlString, isHtmlString, Constructor, getMousePos } from './tools';
 import { x4document } from './x4dom';
 
 import { Stylesheet, ComputedStyle } from './styles';
@@ -41,7 +41,6 @@ import { _tr } from './i18n';
 import { BasicEvent, EventCallback } from './x4events';
 import { BaseComponent, BaseComponentProps, BaseComponentEventMap } from './base_component';
 import { IDOMEvents, X4ElementEventMap } from './dom_events';
-import { IconID } from 'x4js';
 
 export { HtmlString, isHtmlString, html } from './tools'
 

package/src/gridview.ts

@@ -41,7 +41,7 @@ import { Component, ContainerEventMap, EvSize, EvDblClick, CProps, flyWrap, html
 import { Label } from './label'
 import { _tr } from './i18n'
 import * as Formatters from './formatters'
-import { downloadData } from './tools'
+import { downloadData, isFunction } from './tools'
 import { DataView, DataStore, Record } from './datastore'
 
 import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4events";
@@ -134,10 +134,19 @@ class ColHeader extends Component {
 		return this.m_sorted;
 	}
 
-	set sorted( v ) {
+	//set sorted( v ) {
+	//	this.m_sorted = v;
+	//	this.m_sens = 'dn';
+	//	this.itemWithRef<Icon>( 'sorter' ).show( v );
+	//}
+
+	sort( v: boolean, sens: "up" | "dn" ) {
 		this.m_sorted = v;
-		this.m_sens = 'dn';
-		this.itemWithRef<Icon>( 'sorter' ).show( v );
+        this.m_sens = sens;
+
+		const ic = this.itemWithRef<Icon>('sorter');
+        ic.icon = this.m_sens == 'up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
+		ic.show(v);
 	}
 
 	get sens( ) {
@@ -146,7 +155,7 @@ class ColHeader extends Component {
 
 	toggleSens( ) {
 		this.m_sens = this.m_sens=='up' ? 'dn' : 'up';
-		this.itemWithRef<Icon>( 'sorter' ).icon = this.m_sens=='dn' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
+		this.itemWithRef<Icon>( 'sorter' ).icon = this.m_sens=='up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
 	}
 }
 
@@ -588,7 +597,21 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 	 * 
 	 */
 
-	private _sortCol(col: GridColumn ) {
+	sortCol( name: string, asc = true ) {
+		const col = this.m_columns.find(c => c.id==name );
+		if( col===undefined ) {
+			console.assert( false, "unknown field "+name+" in grid.sortCol" );
+			return;
+		}
+
+		this._sortCol( col, asc ? "dn" : "up" );
+	}
+
+	/**
+	 * 
+	 */
+
+	private _sortCol(col: GridColumn, sens: "up" | "dn" = "up" ) {
 
 		if (col.sortable === false) {
 			return;
@@ -596,7 +619,7 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 
 		this.m_columns.forEach((c) => {
 			if (c !== col) {
-				(c as GridColumnInternal).$hdr.sorted = false;
+				(c as GridColumnInternal).$hdr.sort( false, "dn" );
 			}
 		});
 
@@ -606,7 +629,7 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			$hdr.toggleSens( );
 		}
 		else {
-			$hdr.sorted = true;
+			$hdr.sort( true, sens );
 		}
 
 		if (this.m_dataview) {
@@ -1137,17 +1160,24 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			if( cid ) {
 				let col = this.m_columns[cid];
 
-				let fmt = col.formatter;
-				
-				let text;
-				if (fmt && fmt instanceof Function) {
-					text = fmt(rec[col.id], rec);
-				}
-				else {
-					text = rec[col.id];
-				}
+				let value = rec[col.id];
+				if( value!==undefined ) {
+					if( isFunction(value)  ) {	// FooterRenderer
+						value( c );
+					}
+					else {
+						let text;
+						const fmt = col.formatter;
+						if (fmt && fmt instanceof Function) {
+							text = fmt(value, rec);
+						}
+						else {
+							text = value;
+						}
 
-				c.setContent( text, false );
+						c.setContent( text, false );
+					}
+				}
 			}
 		});
 	}

package/src/tools.ts

@@ -1406,3 +1406,63 @@ function shuffle(str: string, maxlength?: number) {
 
 	return shuffled;
 }
+
+
+
+/**
+ * taken from live-server 
+ * https://github.com/tapio/live-server
+ * @param host 
+ * @param port 
+ */
+ 
+export function installHMR(host = "127.0.0.1", port = "9876", reloadCallback?: Function ) {
+
+	let tm;
+
+	function refreshCSS() {
+
+		document.body.style.visibility = "hidden";
+
+		let sheets = [].slice.call(document.getElementsByTagName("link"));
+		let head = document.getElementsByTagName("head")[0];
+		
+		for (let i = 0; i < sheets.length; ++i) {
+			let elem = sheets[i];
+			head.removeChild(elem);
+
+			let rel = elem.rel;
+			if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
+				let url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
+				elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
+			}
+			
+			head.appendChild(elem);
+		}
+
+		if( tm ) { clearTimeout(tm); }
+		tm = setTimeout( () => {
+			document.body.style.visibility = "unset";
+		}, 50 );
+	}
+
+	const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+	const address = `${protocol}${host}:${port}/ws`;	
+	const socket = new WebSocket(address);
+
+	socket.onmessage = function (msg) {
+		if (msg.data == 'reload') {
+			if( reloadCallback ) {
+				reloadCallback( );
+			}
+			else {
+				window.location.reload();
+			}
+		}
+		else if (msg.data == 'refreshcss') {
+			refreshCSS();
+		}
+	};
+
+	console.log('Live reload enabled.');
+}

package/src/x4.less

@@ -1366,14 +1366,14 @@ textarea {
 
 		.x-cell {
 			border-right: 1px solid rgba(0,0,0,0.1);
-			height: unset;
+			height: 100%;
+			display: flex;
+			align-items: center;
 
 			span {
 				min-width: 0;
-				text-transform: uppercase;
 				text-overflow: ellipsis;
 				overflow: hidden;
-				font-weight: bold;
 			}
 
 			&.sort {
@@ -1385,10 +1385,10 @@ textarea {
 
 	.x-header {
 		.x-cell {
-			display: flex;
-			align-items: center;
 			span {
 				width: unset;
+				text-transform: uppercase;
+				font-weight: bold;
 			}
 
 			.sort {