x4js 1.4.13 → 1.4.16

package/lib/application.d.ts

@@ -96,5 +96,6 @@ export declare class Application<P extends ApplicationProps = ApplicationProps,
     setTitle(title: string): void;
     disableZoomWheel(): void;
     enterModal(enter: boolean): void;
+    handleTouchEvents(): void;
 }
 export {};

package/lib/application.js

@@ -30,6 +30,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Application = void 0;
 const base_component_1 = require("./base_component");
+const component_1 = require("./component");
 const settings_1 = require("./settings");
 const tools_1 = require("./tools");
 /**
@@ -145,6 +146,33 @@ class Application extends base_component_1.BaseComponent {
     }
     enterModal(enter) {
     }
+    handleTouchEvents() {
+        document.addEventListener('touchstart', (ev) => {
+            let me = this;
+            let now = new Date().getTime();
+            if (!me.__last_touch || (me.__last_touch - now) > 700) {
+                me.__touch_cnt = 1;
+            }
+            else {
+                me.__touch_cnt++;
+            }
+            me.__last_touch = now;
+            if (me.__touch_cnt == 2) {
+                me.__touch_cnt = 0;
+                let fake = {
+                    type: "dblclick",
+                };
+                const tch = ev.touches[0];
+                for (const n in tch) {
+                    fake[n] = tch[n];
+                }
+                // ts-ignore -> private
+                component_1.Component._dispatchEvent(fake);
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        });
+    }
 }
 exports.Application = Application;
 ;

package/lib/component.d.ts

@@ -107,7 +107,6 @@ export declare class Component<P extends CProps<BaseComponentEventMap> = CProps<
     private static __privateEvents;
     private static __sizeObserver;
     private static __createObserver;
-    private static __intersectionObserver;
     private static __capture;
     private static __capture_mask;
     private static __css;

package/lib/component.js

@@ -89,7 +89,7 @@ class Component extends base_component_1.BaseComponent {
     static __privateEvents = {};
     static __sizeObserver; // resize observer
     static __createObserver; // creation observer
-    static __intersectionObserver; // visibility observer
+    //private static __intersectionObserver: IntersectionObserver;	// visibility observer
     static __capture = null;
     static __capture_mask = null;
     static __css = null;
@@ -101,6 +101,10 @@ class Component extends base_component_1.BaseComponent {
             uid: Component.__comp_guid++,
             inrender: false,
         };
+        // prepare iprops
+        if (this.m_props.cls) {
+            this.addClass(this.m_props.cls);
+        }
     }
     /**
      *
@@ -1042,7 +1046,8 @@ class Component extends base_component_1.BaseComponent {
             this.addClass('@' + (0, tools_1.pascalCase)(clsname));
             me = Object.getPrototypeOf(me);
         }
-        this.addClass(this.m_props.cls);
+        //done in ctor now
+        //this.addClass(this.m_props.cls);
     }
     /**
      * prepend the system class name prefix on a name if needed (if class starts with @)

package/lib/gridview.js

@@ -289,6 +289,7 @@ class GridView extends layout_1.VLayout {
             },
             content: this.m_container
         });
+        let flex = false;
         let cols = this.m_columns.map((col, index) => {
             let cls = '@cell';
             if (col.cls) {
@@ -325,10 +326,16 @@ class GridView extends layout_1.VLayout {
                 sens: 'right',
                 events: { resize: (e) => resizeCol(e) }
             });
-            col.$col = comp;
+            if (col.flex) {
+                flex = true;
+            }
+            col.$hdr = comp;
             return comp;
         });
-        cols.push(new component_1.Flex({}));
+        cols.push(new component_1.Flex({
+            ref: 'flex',
+            cls: flex ? '@hidden' : ''
+        }));
         // compute full width
         let full_width = 0;
         this.m_columns.forEach((col) => {
@@ -358,9 +365,13 @@ class GridView extends layout_1.VLayout {
                         width: col.width
                     }
                 });
+                col.$ftr = comp;
                 return comp;
             });
-            foots.push(new component_1.Flex({}));
+            foots.push(new component_1.Flex({
+                ref: 'flex',
+                cls: flex ? '@hidden' : ''
+            }));
             this.m_footer = new layout_1.HLayout({
                 cls: '@footer',
                 content: foots,
@@ -380,8 +391,33 @@ class GridView extends layout_1.VLayout {
         ]);
     }
     _on_col_resize(col, width) {
-        this.m_columns[col].width = width;
-        this.m_columns[col].flex = undefined;
+        const _col = this.m_columns[col];
+        let updateFlex = false;
+        if (width >= 0) {
+            _col.width = width;
+            if (_col.flex) {
+                _col.$hdr.removeClass('@flex');
+                _col.flex = undefined;
+                updateFlex = true;
+            }
+        }
+        else if (width < 0 && !_col.flex) {
+            _col.$hdr.addClass('@flex');
+            _col.flex = 1;
+            updateFlex = true;
+        }
+        if (updateFlex) {
+            let flex = false;
+            this.m_columns.forEach(c => {
+                if (c.flex) {
+                    flex = true;
+                }
+            });
+            this.m_header.itemWithRef('flex')?.show(flex ? false : true);
+            if (this.m_footer) {
+                this.m_footer.itemWithRef('flex')?.show(flex ? false : true);
+            }
+        }
         this._updateScroll(true);
     }
     /**
@@ -393,19 +429,19 @@ class GridView extends layout_1.VLayout {
         }
         this.m_columns.forEach((c) => {
             if (c !== col) {
-                c.$col.sorted = false;
+                c.$hdr.sorted = false;
             }
         });
-        const $col = col.$col;
-        if ($col.sorted) {
-            $col.toggleSens();
+        const $hdr = col.$hdr;
+        if ($hdr.sorted) {
+            $hdr.toggleSens();
         }
         else {
-            $col.sorted = true;
+            $hdr.sorted = true;
         }
         if (this.m_dataview) {
             this.m_dataview.sort([
-                { field: col.id, ascending: $col.sens == 'dn' ? false : true }
+                { field: col.id, ascending: $hdr.sens == 'dn' ? false : true }
             ]);
         }
     }
@@ -457,7 +493,7 @@ class GridView extends layout_1.VLayout {
         let cidx = 0;
         let index = this.m_topIndex;
         let count = this.m_dataview ? this.m_dataview.count : 0;
-        let full_width = 0;
+        let full_width = 0; // todo: +4 pixel of left border
         let even = this.m_topIndex & 1 ? true : false;
         // compute full width
         this.m_columns.forEach((col) => {
@@ -581,16 +617,16 @@ class GridView extends layout_1.VLayout {
         }
         this.m_empty_msg.show(show);
         if (full_width < rc.width) {
-            //this.m_header.setStyleValue('width', null);
-            //this.m_footer?.setStyleValue('width', null);
+            this.m_header.setStyleValue('width', null);
+            this.m_footer?.setStyleValue('width', null);
             this.m_container.setStyle({
                 height: count * this.m_itemHeight,
                 width: null
             });
         }
         else {
-            this.m_header.setStyleValue('width', full_width + 5);
-            this.m_footer?.setStyleValue('width', full_width + 5);
+            this.m_header.setStyleValue('width', full_width + 1000);
+            this.m_footer?.setStyleValue('width', full_width + 1000);
             this.m_container.setStyle({
                 height: count * this.m_itemHeight,
                 width: full_width

package/lib/layout.js

@@ -278,10 +278,17 @@ exports.ScrollView = ScrollView;
 //	https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
 class Masonry extends component_1.Container {
     constructor(props) {
+        const items = props.items;
+        props.items = undefined;
         super(props);
         this.setDomEvent('sizechange', () => {
             this.resizeAllItems();
         });
+        if (items) {
+            items.forEach(i => {
+                this.addItem(i);
+            });
+        }
     }
     resizeItem(item) {
         const style = this.getComputedStyle();

package/lib/listview.d.ts

@@ -83,7 +83,7 @@ export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> ex
 /**
  * Standard listview class
  */
-export declare class ListView<T extends ListViewProps = ListViewProps, E extends ListViewEventMap = ListViewEventMap> extends VLayout<T, E> {
+export declare class ListView extends VLayout<ListViewProps, ListViewEventMap> {
     protected m_selection: {
         item: ListViewItem;
         citem: Component;
@@ -94,7 +94,7 @@ export declare class ListView<T extends ListViewProps = ListViewProps, E extends
     protected m_topIndex: number;
     protected m_itemHeight: number;
     protected m_cache: Map<number, Component>;
-    constructor(props: T);
+    constructor(props: ListViewProps);
     componentCreated(): void;
     render(props: ListViewProps): void;
     /**

package/lib/router.d.ts

@@ -26,9 +26,17 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-export declare class Router {
+import { EventSource, EvError, EventMap } from "./x4_events";
+declare type RouteHandler = (params: any, path: string) => void;
+interface RouterEventMap extends EventMap {
+    error: EvError;
+}
+export declare class Router extends EventSource<RouterEventMap> {
     private routes;
     constructor();
-    get(uri: any, callback: any): void;
+    get(uri: string | RegExp, handler: RouteHandler): void;
     init(): void;
+    navigate(uri: string, notify?: boolean): void;
+    private _find;
 }
+export {};

package/lib/router.js

@@ -29,31 +29,111 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Router = void 0;
-class Router {
+const x4_events_1 = require("./x4_events");
+function parseRoute(str, loose = false) {
+    if (str instanceof RegExp) {
+        return {
+            keys: null,
+            pattern: str
+        };
+    }
+    const arr = str.split('/');
+    let keys = [];
+    let pattern = '';
+    if (arr[0] == '') {
+        arr.shift();
+    }
+    for (const tmp of arr) {
+        const c = tmp[0];
+        if (c === '*') {
+            keys.push('wild');
+            pattern += '/(.*)';
+        }
+        else if (c === ':') {
+            const o = tmp.indexOf('?', 1);
+            const ext = tmp.indexOf('.', 1);
+            keys.push(tmp.substring(1, o >= 0 ? o : ext >= 0 ? ext : tmp.length));
+            pattern += o < 0 && ext < 0 ? '(?:/([^/]+?))?' : '/([^/]+?)';
+            if (ext >= 0) {
+                pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
+            }
+        }
+        else {
+            pattern += '/' + tmp;
+        }
+    }
+    return {
+        keys,
+        pattern: new RegExp(`^${pattern}${loose ? '(?=$|\/)' : '\/?$'}`, 'i')
+    };
+}
+class Router extends x4_events_1.EventSource {
     routes;
     constructor() {
+        super();
         this.routes = [];
-    }
-    get(uri, callback) {
-        // throw an error if the route uri already exists to avoid confilicting routes
-        this.routes.forEach(route => {
-            if (route.uri === uri) {
-                throw new Error(`the uri ${route.uri} already exists`);
-            }
-        });
-        this.routes.push({
-            uri,
-            callback
+        window.addEventListener('popstate', (event) => {
+            const url = document.location.pathname;
+            const found = this._find(url);
+            found.handlers.forEach(h => {
+                h(found.params, url);
+            });
         });
     }
+    get(uri, handler) {
+        let { keys, pattern } = parseRoute(uri);
+        this.routes.push({ keys, pattern, handler });
+    }
     init() {
-        this.routes.some(route => {
-            let regEx = new RegExp(`^${route.uri}$`);
-            let path = window.location.pathname;
-            if (path.match(regEx)) {
-                return route.callback({ path });
+        this.navigate(window.location.pathname);
+    }
+    navigate(uri, notify = true) {
+        const found = this._find(uri);
+        if (!found || found.handlers.length == 0) {
+            //window.history.pushState({}, '', 'error')
+            console.log('route not found: ' + uri);
+            this.signal("error", (0, x4_events_1.EvError)(404, "route not found"));
+            return;
+        }
+        window.history.pushState({}, '', uri);
+        if (notify) {
+            found.handlers.forEach(h => {
+                h(found.params, uri);
+            });
+        }
+    }
+    _find(url) {
+        let matches = [];
+        let params = {};
+        let handlers = [];
+        for (const tmp of this.routes) {
+            if (!tmp.keys) {
+                matches = tmp.pattern.exec(url);
+                if (!matches) {
+                    continue;
+                }
+                if (matches['groups']) {
+                    for (const k in matches['groups']) {
+                        params[k] = matches['groups'][k];
+                    }
+                }
+                handlers = [...handlers, tmp.handler];
             }
-        });
+            else if (tmp.keys.length > 0) {
+                matches = tmp.pattern.exec(url);
+                if (matches === null) {
+                    continue;
+                }
+                for (let j = 0; j < tmp.keys.length;) {
+                    params[tmp.keys[j]] = matches[++j];
+                }
+                handlers = [...handlers, tmp.handler];
+            }
+            else if (tmp.pattern.test(url)) {
+                handlers = [...handlers, tmp.handler];
+            }
+        }
+        return { params, handlers };
     }
 }
 exports.Router = Router;

package/lib/tabbar.d.ts

@@ -48,9 +48,11 @@ export declare class TabBar extends Container<TabBarProps, TabBarEventMap> {
     private m_pages;
     private m_curPage;
     constructor(props: TabBarProps);
+    componentCreated(): void;
     addPage(page: ITabPage): void;
     render(): void;
-    select(id: string): void;
+    select(id: string | null, notify?: boolean): boolean;
     private _select;
+    get selection(): Component<CProps<import("./base_component").BaseComponentEventMap>, import("./base_component").BaseComponentEventMap>;
 }
 export {};

package/lib/tabbar.js

@@ -47,8 +47,10 @@ class TabBar extends component_1.Container {
             this.addClass('@hlayout');
         }
         this.m_props.pages?.forEach(p => this.addPage(p));
+    }
+    componentCreated() {
         if (this.m_props.default) {
-            this.select(this.m_props.default);
+            this.select(this.m_props.default, true);
         }
     }
     addPage(page) {
@@ -58,28 +60,52 @@ class TabBar extends component_1.Container {
     render() {
         let buttons = [];
         this.m_pages.forEach(p => {
-            p.btn = new button_1.Button({ cls: p === this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p) });
+            p.btn = new button_1.Button({ cls: p === this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p, true) });
             buttons.push(p.btn);
         });
         this.setContent(buttons);
     }
-    select(id) {
-        let page = this.m_pages.find(x => x.id === id);
-        if (page) {
-            this._select(page);
+    select(id, notify = false) {
+        if (!id) {
+            this._select(null, notify);
+            return true;
+        }
+        else {
+            let page = this.m_pages.find(x => x.id === id);
+            if (page) {
+                this._select(page, notify);
+                return true;
+            }
+            return false;
         }
     }
-    _select(p) {
-        if (this.dom && this.m_curPage && this.m_curPage.page) {
+    _select(p, notify) {
+        if (this.m_curPage == p) {
+            return;
+        }
+        if (!this.dom) {
+            this.m_props.default = p.id;
+            return;
+        }
+        if (this.m_curPage) {
             this.m_curPage.btn.removeClass('selected');
-            this.m_curPage.page.hide();
+            if (this.m_curPage.page) {
+                this.m_curPage.page.hide();
+            }
         }
         this.m_curPage = p;
-        this.signal('change', (0, x4_events_1.EvChange)(p ? p.id : null));
-        if (this.dom && this.m_curPage && this.m_curPage.page) {
+        if (notify) {
+            this.signal('change', (0, x4_events_1.EvChange)(p ? p.id : null));
+        }
+        if (this.m_curPage) {
             this.m_curPage.btn.addClass('selected');
-            this.m_curPage.page.show();
+            if (this.m_curPage.page) {
+                this.m_curPage.page.show();
+            }
         }
     }
+    get selection() {
+        return this.m_curPage?.page;
+    }
 }
 exports.TabBar = TabBar;

package/lib/x4.css

@@ -306,6 +306,8 @@ textarea::selection {
   align-items: center;
   outline: none;
   cursor: pointer;
+  font-family: var(--x4-font);
+  font-size: var(--x4-font-size);
   height: 2rem;
   padding: 8px;
   overflow: hidden;
@@ -1124,7 +1126,7 @@ textarea::selection {
 .x-spreadsheet .x-row,
 .x-grid-view .x-row {
   position: absolute;
-  width: 100%;
+  width: calc(100% - 4px);
   border-bottom: 1px solid #f0f0f0;
   align-items: center;
   height: 2em;
@@ -1691,3 +1693,21 @@ textarea::selection {
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   grid-auto-rows: 10px;
 }
+.x-tab-bar {
+  border-bottom: 1px solid var(--gray-600);
+  background-color: var(--gray-100);
+}
+.x-tab-bar > .x-button {
+  border: none;
+  color: var(--gray-600);
+}
+.x-tab-bar > .x-button.selected {
+  font-weight: bold;
+  border-bottom: none;
+  color: var(--x4-selection-color);
+  background-color: transparent;
+}
+.x-tab-bar > .x-button:focus:not(.selected) {
+  text-decoration: underline;
+  color: black;
+}

package/lib/x4_events.d.ts

@@ -106,6 +106,14 @@ export interface EvDrag extends BasicEvent {
     data: any;
 }
 export declare function EvDrag(element: unknown, data: any, ctx: any): EvDrag;
+/**
+ * Errors
+ */
+export interface EvError extends BasicEvent {
+    code: number;
+    message: string;
+}
+export declare function EvError(code: number, message: string): EvError;
 /**
  * this Base interface is used to describe available events & their types
  *

package/lib/x4_events.js

@@ -28,7 +28,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EventSource = exports.EvDrag = exports.EvMessage = exports.EvTimer = exports.EvContextMenu = exports.EvSelectionChange = exports.EvChange = exports.EvClick = exports.BasicEvent = void 0;
+exports.EventSource = exports.EvError = exports.EvDrag = exports.EvMessage = exports.EvTimer = exports.EvContextMenu = exports.EvSelectionChange = exports.EvChange = exports.EvClick = exports.BasicEvent = void 0;
 // default stopPropagation implementation for Events
 const stopPropagation = function () {
     this.propagationStopped = true;
@@ -81,6 +81,10 @@ function EvDrag(element, data, ctx) {
     return BasicEvent({ element, data, context: ctx });
 }
 exports.EvDrag = EvDrag;
+function EvError(code, message) {
+    return BasicEvent({ code, message });
+}
+exports.EvError = EvError;
 /**
  * Event emitter class
  * this class allow you to emit and handle events

package/package.json

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

package/src/application.ts

@@ -194,6 +194,42 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 
 	public enterModal( enter: boolean ) {
 	}
+
+	public handleTouchEvents( ) {
+		document.addEventListener( 'touchstart', ( ev: TouchEvent ) => {
+
+			let me = this as any;
+			let now = new Date( ).getTime();
+
+			if( !me.__last_touch || (me.__last_touch-now) > 700 ) {
+				me.__touch_cnt = 1;
+			}
+			else {
+				me.__touch_cnt++;
+			}
+
+			me.__last_touch = now;
+
+			if( me.__touch_cnt==2 ) {
+				me.__touch_cnt = 0;
+				
+				let fake = {
+					type: "dblclick", 
+				};
+
+				const tch = ev.touches[0];
+				for( const n in tch ) {
+					fake[n] = tch[n];
+				}
+
+				// ts-ignore -> private
+				(Component as any)._dispatchEvent( fake );
+
+				ev.preventDefault( );
+				ev.stopPropagation( );
+			}
+		});
+	}
 };
 
 

package/src/component.ts

@@ -188,7 +188,7 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 	private static __privateEvents: any = {};
 	private static __sizeObserver: ResizeObserver;	// resize observer
 	private static __createObserver: MutationObserver;	// creation observer
-	private static __intersectionObserver: IntersectionObserver;	// visibility observer
+	//private static __intersectionObserver: IntersectionObserver;	// visibility observer
 
 	private static __capture: ICaptureInfo = null;
 	private static __capture_mask = null;
@@ -202,6 +202,11 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			dom_events: {},
 			uid: Component.__comp_guid++,
 			inrender: false,
+		};
+
+		// prepare iprops
+		if( this.m_props.cls ) {
+			this.addClass( this.m_props.cls );
 		}
 	}
 
@@ -1389,7 +1394,8 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 			me = Object.getPrototypeOf(me);
 		}
 
-		this.addClass(this.m_props.cls);
+		//done in ctor now
+		//this.addClass(this.m_props.cls);
 	}
 
 	/**

package/src/gridview.ts

@@ -76,7 +76,8 @@ export interface GridColumn {
 }
 
 interface GridColumnInternal extends GridColumn {
-	$col: ColHeader;
+	$hdr: ColHeader;
+	$ftr: Component;
 }
 
 
@@ -421,6 +422,7 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			content: this.m_container
 		});
 
+		let flex = false;
 		let cols = this.m_columns.map((col, index) => {
 
 			let cls = '@cell';
@@ -463,12 +465,19 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 				events: {resize: ( e ) => resizeCol(e )}
 			});
 
-			(<any>col).$col = comp;
+			if( col.flex ) {
+				flex = true;
+			}
+
+			(<any>col).$hdr = comp;
 			return comp;
 		});
 
-		(cols as any).push( new Flex( {} ) );
-
+		(cols as any).push( new Flex( {
+			ref: 'flex',
+			cls: flex ? '@hidden' : ''
+		} ) );
+		
 		// compute full width
 		let full_width = 0;
 		this.m_columns.forEach((col) => {
@@ -481,8 +490,7 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			style: {
 				minWidth: full_width
 			}
-		});
-	
+		});	
 
 		if( this.m_props.hasFooter ) {
 			let foots = this.m_columns.map((col, index) => {
@@ -506,11 +514,15 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 					}
 				});
 
+				(col as GridColumnInternal).$ftr = comp;
 				return comp;
 			});
 
-			(foots as any).push( new Flex( {} ) );
-
+			(foots as any).push( new Flex( {
+				ref: 'flex',
+				cls: flex ? '@hidden' : ''
+			} ) );
+			
 			this.m_footer = new HLayout({
 				cls: '@footer',
 				content: <any>foots,
@@ -532,9 +544,40 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 
 	}
 
-	private _on_col_resize(col, width) {
-		this.m_columns[col].width = width;
-		this.m_columns[col].flex = undefined;
+	private _on_col_resize(col: number, width: number) {
+
+		const _col = this.m_columns[col] as GridColumnInternal;
+
+		let updateFlex = false;
+				
+		if( width>=0 ) {
+			_col.width = width;
+			if( _col.flex ) {
+				_col.$hdr.removeClass( '@flex' );
+				_col.flex = undefined;
+				updateFlex = true;
+			}
+		}
+		else if( width<0 && !_col.flex ) {
+			_col.$hdr.addClass( '@flex' );
+			_col.flex = 1;
+			updateFlex = true;
+		}
+
+		if( updateFlex ) {
+			let flex = false;
+			this.m_columns.forEach( c => {
+				if( c.flex ) {
+					flex = true;
+				}
+			});
+				
+			this.m_header.itemWithRef( 'flex' )?.show( flex ? false : true );
+			if( this.m_footer ) {
+				this.m_footer.itemWithRef( 'flex' )?.show( flex ? false : true );
+			}
+		}
+
 		this._updateScroll(true);
 	}
 
@@ -550,22 +593,22 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 
 		this.m_columns.forEach((c) => {
 			if (c !== col) {
-				(c as GridColumnInternal).$col.sorted = false;
+				(c as GridColumnInternal).$hdr.sorted = false;
 			}
 		});
 
-		const $col = (col as GridColumnInternal).$col;
+		const $hdr = (col as GridColumnInternal).$hdr;
 
-		if ($col.sorted) {
-			$col.toggleSens( );
+		if ($hdr.sorted) {
+			$hdr.toggleSens( );
 		}
 		else {
-			$col.sorted = true;
+			$hdr.sorted = true;
 		}
 
 		if (this.m_dataview) {
 			this.m_dataview.sort([
-				{ field: col.id, ascending: $col.sens=='dn' ? false : true }
+				{ field: col.id, ascending: $hdr.sens=='dn' ? false : true }
 			]);
 		}
 	}
@@ -630,7 +673,8 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 		let cidx = 0;
 		let index = this.m_topIndex;
 		let count = this.m_dataview ? this.m_dataview.count : 0;
-		let full_width = 0;
+		
+		let full_width = 0; // todo: +4 pixel of left border
 		let even = this.m_topIndex & 1 ? true : false;
 
 		// compute full width
@@ -783,17 +827,16 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 		this.m_empty_msg.show(show);
 
 		if (full_width < rc.width) {
-			//this.m_header.setStyleValue('width', null);
-			//this.m_footer?.setStyleValue('width', null);
+			this.m_header.setStyleValue('width', null);
+			this.m_footer?.setStyleValue('width', null);
 			this.m_container.setStyle({
 				height: count * this.m_itemHeight,
 				width: null
 			});
 		}
 		else {
-			this.m_header.setStyleValue('width', full_width + 5 );
-			this.m_footer?.setStyleValue('width', full_width + 5 );
-
+			this.m_header.setStyleValue('width', full_width + 1000 );
+			this.m_footer?.setStyleValue('width', full_width + 1000 );
 			this.m_container.setStyle({
 				height: count * this.m_itemHeight,
 				width: full_width

package/src/layout.ts

@@ -378,11 +378,20 @@ export class ScrollView extends Component<ScrollViewProps> {
 export class Masonry extends Container {
 
 	constructor(props) {
+		const items = props.items;
+		props.items = undefined;
+
 		super(props);
 
 		this.setDomEvent('sizechange', () => {
 			this.resizeAllItems( );
 		});
+
+		if( items ) {
+			items.forEach( i => {
+				this.addItem( i );
+			});
+		}
 	}
 
 	resizeItem(item: Component) {

package/src/listview.ts

@@ -100,7 +100,7 @@ export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> ex
  * Standard listview class
  */
 
-export class ListView<T extends ListViewProps = ListViewProps, E extends ListViewEventMap = ListViewEventMap> extends VLayout<T,E> {
+export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 
 	protected m_selection: {
 		item: ListViewItem;
@@ -117,7 +117,7 @@ export class ListView<T extends ListViewProps = ListViewProps, E extends ListVie
 
 	protected m_cache: Map<number, Component>; // recycling elements
 
-	constructor(props: T) {
+	constructor(props: ListViewProps) {
 		super(props);
 
 		this.setDomEvent('keydown', (e) => this._handleKey(e));

package/src/router.ts

@@ -27,45 +27,157 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-type Callback = (request: { path: string }) => void;
+import { EventSource, EvError, EventMap } from "./x4_events"
+
+type RouteHandler = ( params: any, path: string ) => void;
+
+interface Segment {
+	keys: string[],
+	pattern: RegExp;
+}
 
 interface Route {
-	uri: string;
-	callback: Callback;
+	keys: string[],
+	pattern: RegExp;
+	handler: RouteHandler;
 }
 
-export class Router {
+function parseRoute(str: string | RegExp, loose = false): Segment {
 
-	private routes: Route[];
+	if (str instanceof RegExp) {
+		return {
+			keys: null,
+			pattern: str
+		};
+	}
 
-	constructor() {
-		this.routes = [];
+	const arr = str.split('/');
+
+	let keys = [];
+	let pattern = '';
+
+	if( arr[0]=='' ) {
+		arr.shift();
 	}
 
-	get(uri, callback) {
+	for (const tmp of arr) {
+		const c = tmp[0];
 
-		// throw an error if the route uri already exists to avoid confilicting routes
-		this.routes.forEach(route => {
-			if (route.uri === uri) {
-				throw new Error(`the uri ${route.uri} already exists`);
+		if (c === '*') {
+			keys.push('wild');
+			pattern += '/(.*)';
+		}
+		else if (c === ':') {
+			const o = tmp.indexOf('?', 1);
+			const ext = tmp.indexOf('.', 1);
+
+			keys.push(tmp.substring(1, o >= 0 ? o : ext >= 0 ? ext : tmp.length));
+			pattern += o < 0 && ext < 0 ? '(?:/([^/]+?))?' : '/([^/]+?)';
+			if (ext >= 0) {
+				pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
 			}
-		});
+		}
+		else {
+			pattern += '/' + tmp;
+		}
+	}
+
+	return {
+		keys,
+		pattern: new RegExp( `^${pattern}${loose ? '(?=$|\/)' : '\/?$'}`, 'i' )
+	};
+}
+
+interface RouterEventMap extends EventMap {
+	error: EvError;
+}
+   
+export class Router extends EventSource< RouterEventMap > {
+
+	private routes: Route[];
 
-		this.routes.push({
-			uri,
-			callback
+	constructor() {
+		super( );
+
+		this.routes = [];
+
+		window.addEventListener('popstate', (event) => {
+			const url = document.location.pathname;
+			const found = this._find(url);
+		
+			found.handlers.forEach(h => {
+				h(found.params,url);
+			});
 		});
 	}
 
+	get(uri: string | RegExp, handler: RouteHandler ) {
+		let { keys, pattern } = parseRoute(uri);
+		this.routes.push({ keys, pattern, handler });
+	}
+
 	init() {
-		this.routes.some(route => {
+		this.navigate( window.location.pathname );
+	}
+
+	navigate( uri: string, notify = true ) {
+
+		const found = this._find( uri );
 
-			let regEx = new RegExp(`^${route.uri}$`);
-			let path = window.location.pathname;
+		if( !found || found.handlers.length==0 ) {
+			//window.history.pushState({}, '', 'error')
+			console.log( 'route not found: '+uri );
+			this.signal( "error", EvError( 404, "route not found" ) );
+			return;
+		}
 
-			if (path.match(regEx)) {
-				return route.callback({ path });
+		window.history.pushState({}, '', uri )
+
+		if( notify ) {
+			found.handlers.forEach( h => {
+				h( found.params, uri );
+			} );
+		}
+	}
+
+	private _find( url: string ): { params: any, handlers: RouteHandler[] } {
+		
+		let matches = [];
+		let params = {};
+		let handlers = [];
+
+		for (const tmp of this.routes ) {
+			if (!tmp.keys ) {
+				matches = tmp.pattern.exec(url);
+				if (!matches) {
+					continue;
+				}
+
+				if (matches['groups']) {
+					for (const k in matches['groups']) {
+						params[k] = matches['groups'][k];
+					}
+				}
+
+				handlers = [...handlers, tmp.handler];
+			} 
+			else if (tmp.keys.length > 0) {
+				matches = tmp.pattern.exec(url);
+				if (matches === null) {
+					continue;
+				}
+
+				for ( let j = 0; j < tmp.keys.length;) {
+					params[tmp.keys[j]] = matches[++j];
+				}
+
+				handlers = [...handlers, tmp.handler];
+			} 
+			else if (tmp.pattern.test(url)) {
+				handlers = [...handlers, tmp.handler];
 			}
-		})
+		}
+
+		return { params, handlers };
 	}
 }

package/src/tabbar.ts

@@ -75,9 +75,12 @@ export class TabBar extends Container<TabBarProps,TabBarEventMap> {
 		}
 
 		this.m_props.pages?.forEach( p => this.addPage(p) );
+	}
+
+	componentCreated(): void {
 		if( this.m_props.default ) {
-			this.select( this.m_props.default );
-		}
+			this.select( this.m_props.default, true );
+		}		
 	}
 
 	addPage( page: ITabPage ) {
@@ -88,33 +91,61 @@ export class TabBar extends Container<TabBarProps,TabBarEventMap> {
 	render( ) {
 		let buttons = [];
 		this.m_pages.forEach( p => {
-			p.btn = new Button( { cls: p===this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p) } );
+			p.btn = new Button( { cls: p===this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p,true) } );
 			buttons.push( p.btn );
 		});
 
 		this.setContent( buttons );
 	}
 
-	select( id: string ) {
-		let page = this.m_pages.find( x => x.id===id );
-		if( page ) {
-			this._select( page );
+	select( id: string | null, notify = false ): boolean {
+		if( !id ) {
+			this._select( null, notify );
+			return true;
+		}
+		else {
+			let page = this.m_pages.find( x => x.id===id );
+			if( page ) {
+				this._select( page, notify );
+				return true;
+			}
+			return false;
 		}
 	}
 
-	private _select( p: TabPage ) {
+	private _select( p: TabPage, notify: boolean ) {
+
+		if( this.m_curPage==p ) {
+			return;
+		}
 
-		if( this.dom && this.m_curPage && this.m_curPage.page ) {
+		if( !this.dom ) {
+			this.m_props.default = p.id;
+			return;
+		}
+
+		if( this.m_curPage ) {
 			this.m_curPage.btn.removeClass( 'selected' );
-			this.m_curPage.page.hide( );
+			if( this.m_curPage.page ) {
+				this.m_curPage.page.hide( );
+			}
 		}
 
 		this.m_curPage = p;
-		this.signal( 'change', EvChange(p ? p.id : null) );
 
-		if( this.dom && this.m_curPage && this.m_curPage.page ) {
+		if( notify ) {
+			this.signal( 'change', EvChange(p ? p.id : null) );
+		}
+
+		if( this.m_curPage ) {
 			this.m_curPage.btn.addClass( 'selected' );
-			this.m_curPage.page.show( );
+			if( this.m_curPage.page ) {
+				this.m_curPage.page.show( );
+			}
 		}
 	}
+
+	get selection( ) {
+		return this.m_curPage?.page;
+	}
 }

package/src/x4.less

@@ -386,6 +386,8 @@ textarea {
 	align-items: center;
 	outline: none;
 	cursor: pointer;
+	font-family: var( --x4-font );
+	font-size: var( --x4-font-size );
 
 	height: 2rem;
 	padding: 8px;
@@ -1312,12 +1314,13 @@ textarea {
 	}
 }
 
+@bwidth: 4px;
 
 .x-spreadsheet,
 .x-grid-view {
 	
 	@def-height: 2em;
-
+	
 	min-height: 0;
 	overflow: hidden;
 	background-color: white;
@@ -1370,7 +1373,7 @@ textarea {
 
 	.x-row {
 		position: absolute;
-		width: 100%;
+		width: calc( 100% - @bwidth );	// todo: border of 1st col
 		border-bottom: 1px solid #f0f0f0;
 		align-items: center;
 		height: @def-height;
@@ -1400,11 +1403,11 @@ textarea {
 .x-grid-view {
 	.x-footer,
 	.x-header {
-		border-left: 4px solid #f0f0f0;
+		border-left: @bwidth solid #f0f0f0;
 	}
 
 	.x-row {
-		border-left: 4px solid transparent;
+		border-left: @bwidth solid transparent;
 
 		&:hover {
 			background-color: rgba(0,0,0,0.1);
@@ -2133,4 +2136,27 @@ textarea {
 	grid-gap: 10px;
 	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
 	grid-auto-rows: 10px;
+}
+
+.x-tab-bar {
+	border-bottom: 1px solid var(--gray-600);
+    background-color: var(--gray-100);
+
+	&> .x-button {
+		border: none;
+		color: var( --gray-600 );
+
+		&.selected {
+			font-weight: bold;
+			//border: 1px solid var( --x4-selection-color );
+			border-bottom: none;
+			color: var( --x4-selection-color );
+			background-color: transparent;
+		}
+
+		&:focus:not(.selected) {
+			text-decoration: underline;
+			color: black;;
+		}
+	}
 }

package/src/x4_events.ts

@@ -168,6 +168,19 @@ export function EvDrag(element: unknown, data: any, ctx: any ) {
 	return BasicEvent<EvDrag>({ element, data, context: ctx });
 }
 
+/**
+ * Errors
+ */
+
+export interface EvError extends BasicEvent {
+	code: number;
+	message: string;
+}
+	
+export function EvError( code: number, message: string ) : EvError {
+	return BasicEvent<EvError>( {code, message} );
+}
+
 
 /**
  * this Base interface is used to describe available events & their types