x4js 1.4.14 → 1.4.17

package/lib/application.d.ts

@@ -75,6 +75,8 @@ export declare class Application<P extends ApplicationProps = ApplicationProps,
     private m_app_uid;
     private m_local_storage;
     private m_user_data;
+    private m_touch_time;
+    private m_touch_count;
     constructor(props: P);
     ApplicationCreated(): void;
     get app_name(): string;
@@ -96,5 +98,6 @@ export declare class Application<P extends ApplicationProps = ApplicationProps,
     setTitle(title: string): void;
     disableZoomWheel(): void;
     enterModal(enter: boolean): void;
+    enableTouchDblClick(): void;
 }
 export {};

package/lib/application.js

@@ -30,8 +30,10 @@
 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");
+const _x4_touch_time = Symbol();
 /**
  * Represents an x4 application, which is typically a single page app.
  * You should inherit Application to define yours.
@@ -65,6 +67,8 @@ class Application extends base_component_1.BaseComponent {
     m_app_uid;
     m_local_storage;
     m_user_data;
+    m_touch_time;
+    m_touch_count;
     constructor(props) {
         console.assert(Application.self === null, 'application is a singleton');
         super(props);
@@ -74,6 +78,8 @@ class Application extends base_component_1.BaseComponent {
         let settings_name = `${this.m_app_name}.${this.m_app_version}.settings`;
         this.m_local_storage = new settings_1.Settings(settings_name);
         this.m_user_data = {};
+        this.m_touch_time = 0;
+        this.m_touch_count = 0;
         Application.self = this;
         if ('onload' in globalThis) {
             globalThis.addEventListener('load', () => {
@@ -145,6 +151,30 @@ class Application extends base_component_1.BaseComponent {
     }
     enterModal(enter) {
     }
+    enableTouchDblClick() {
+        document.addEventListener('touchstart', (ev) => {
+            let now = Date.now();
+            if ((now - this.m_touch_time) > 700) {
+                this.m_touch_count = 1;
+            }
+            else {
+                this.m_touch_count++;
+            }
+            this.m_touch_time = now;
+            if (this.m_touch_count == 2) {
+                this.m_touch_count = 0;
+                // dirty fake dblclick event
+                const tch = ev.touches[0];
+                let fake = { type: "dblclick" };
+                for (const n in tch) {
+                    fake[n] = tch[n];
+                }
+                // ignore -> private: dirty x2
+                component_1.Component._dispatchEvent(fake);
+                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/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;
@@ -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.14",
+	"version": "1.4.17",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/application.ts

@@ -34,6 +34,8 @@ import { Settings } from './settings'
 import { deferCall } from './tools'
 import { _tr } from './i18n'
 
+const _x4_touch_time = Symbol( );
+
 
 interface ApplicationEventMap extends BaseComponentEventMap {
 	message: EvMessage;
@@ -92,6 +94,9 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 	
 	private m_local_storage: Settings;
 	private m_user_data: any;
+
+	private m_touch_time: number;
+	private m_touch_count: number;
 	
 	constructor( props : P ) {
 		console.assert( Application.self===null, 'application is a singleton' );
@@ -104,6 +109,9 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 		let settings_name = `${this.m_app_name}.${this.m_app_version}.settings`;
 		this.m_local_storage = new Settings( settings_name );
 		this.m_user_data = {};
+
+		this.m_touch_time = 0;
+		this.m_touch_count = 0;
 	
 		(Application.self as any) = this;
 
@@ -194,6 +202,36 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 
 	public enterModal( enter: boolean ) {
 	}
+
+	public enableTouchDblClick( ) {
+		document.addEventListener( 'touchstart', ( ev: TouchEvent ) => {
+
+			let now = Date.now( );
+			if( (now-this.m_touch_time) > 700 ) {
+				this.m_touch_count = 1;
+			}
+			else {
+				this.m_touch_count++;
+			}
+
+			this.m_touch_time = now;
+
+			if( this.m_touch_count==2 ) {
+				this.m_touch_count = 0;
+
+				// dirty fake dblclick event
+				const tch = ev.touches[0];
+				let fake: any = {type: "dblclick" };
+				for( const n in tch ) {
+					fake[n] = tch[n];
+				}
+
+				// ignore -> private: dirty x2
+				(Component as any)._dispatchEvent( fake );
+				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/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;
@@ -2134,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