x4js 1.5.31 → 1.5.32

package/lib/src/calendar.ts

@@ -241,7 +241,7 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 			let min = this.m_props.minDate?.getFullYear() ?? 1900;
 			let max = this.m_props.maxDate?.getFullYear() ?? 2037;
 
-			for (let m = min; m < max; m++) {
+			for (let m = max; m >= min; m--) {
 				items.push(new MenuItem({
 					text: '' + m,
 					click: () => { this.m_date.setFullYear(m); this.update(); }

package/lib/src/combobox.ts

@@ -200,7 +200,7 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 				flex: 1, 
 				cls: '@fake-input @hlayout', 
 				tabIndex: 1 
-			} );
+			} ) as any;
 		}
 
 		let width = undefined,

package/lib/src/component.ts

@@ -170,8 +170,13 @@ export interface CProps<T extends CEventMap = CEventMap> extends BaseComponentPr
 	enabled?: boolean;		// add @disabled to the element if false
 }
 
+interface DomListener {
+	listener: EventListener,
+	passive?: boolean
+}
+
 interface CInternalProps {
-	dom_events: any;
+	dom_events: Record<string,DomListener[]>;
 	classes: IMap<boolean>;
 	uid: number;
 	created: boolean;
@@ -205,6 +210,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 			dom_events: {},
 			uid: Component.__comp_guid++,
 			inrender: false,
+			created: false,
 		};
 
 		// prepare iprops
@@ -538,11 +544,12 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 			return this.m_dom.getAttribute(name);
 		}
 		else {
-			if (!this.m_props.attrs) {
-				return undefined;
+			//todo move to attrs
+			if( name=='id' ) {
+				return this.m_props.id;
 			}
 
-			return this.m_props.attrs[name];
+			return this.m_props.attrs ? this.m_props.attrs[name] : undefined;
 		}
 	}
 
@@ -844,7 +851,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 			for (let e in evt) {
 				let handlers = evt[e];
 				for (let h of handlers) {
-					this.createEvent(e, h);
+					this._createEvent(e, h.listener, h.passive );
 				}
 			}
 		}
@@ -1109,12 +1116,12 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 	 * this.setDomEvent( 'dblclick', this._handleDblClick, this );
 	 */
 
-	public setDomEvent<K extends keyof X4ElementEventMap>(type: K, listener: (this: HTMLDivElement, ev: X4ElementEventMap[K]) => void) {
+	public setDomEvent<K extends keyof X4ElementEventMap>(type: K, listener: (this: HTMLDivElement, ev: X4ElementEventMap[K]) => void, passive?: boolean ) {
 		let _listener = listener as EventListener;
-		this._setDomEvent(type as string, _listener);
+		this._setDomEvent(type as string, _listener, passive);
 	}
 
-	private _setDomEvent(type: string, listener: EventListener) {
+	private _setDomEvent(type: string, listener: EventListener, passive?: boolean) {
 
 		// add event to the vdom
 		if (!this.m_iprops.dom_events) {
@@ -1123,15 +1130,15 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 
 		let listeners = this.m_iprops.dom_events[type];
 		if (!listeners) {
-			listeners = this.m_iprops.dom_events[type] = [listener];
+			listeners = this.m_iprops.dom_events[type] = [{listener,passive}];
 		}
 		else {
-			listeners.push(listener);
+			listeners.push({listener,passive});
 		}
 
 		if (this.m_dom) {
 			//this.m_dom.addEventListener(type, listener);
-			this.createEvent(type, listener);
+			this._createEvent(type, listener,passive);
 		}
 	}
 
@@ -1161,7 +1168,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 	 * @param handler 
 	 */
 
-	public createEvent(name: string, handler: Function) {
+	private _createEvent(name: string, handler: Function, passive?: boolean) {
 
 		let _dom = this.m_dom;
 		let store = _dom[_x4_el_store];
@@ -1185,11 +1192,16 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 		else if (!Component.__privateEvents[name]) {
 			Component.__privateEvents[name] = true; // todo count it
 
-			if (passiveEvents[name]) {
-				x4document.addEventListener(name as any, Component._dispatchEvent, { passive: false, capture: true });
+			if( passive===undefined ) {
+				if ( passiveEvents[name] ) {
+					x4document.addEventListener(name as any, Component._dispatchEvent, { passive: false, capture: true });
+				}
+				else {
+					x4document.addEventListener(name as any, Component._dispatchEvent, true);
+				}
 			}
 			else {
-				x4document.addEventListener(name as any, Component._dispatchEvent, true);
+				x4document.addEventListener(name as any, Component._dispatchEvent, { passive, capture: passive ? true : false } );
 			}
 		}
 

package/lib/src/datastore.ts

@@ -572,41 +572,28 @@ export class DataProxy extends BaseComponent<DataProxyProps,DataEventMap> {
 		super( props );
 	}
 
-	load( url?: string ) {
+	async load( url?: string ) {
 		if( url ) {
 			this.m_props.url = url;
 		}
+		else {
+			url = this.m_props.url;
+		}
 
-		this._refresh( );
-	}	
-
-	private _refresh( delay: number = 0 ) {
-
-		const load = async ( ) => {
-
-			let url = this.m_props.url;
-			if( this.m_props.params ) {
-				url += '?' + this.m_props.params.join( '&' );
-			}
-
-			const r = await fetch( url );
-			if( r.ok ) {
-				const raw = await r.json( );
-				
-				let json = raw;
-				if( this.m_props.solver ) {
-					json = this.m_props.solver( json );
-				}
+		if( this.m_props.params ) {
+			url += '?' + this.m_props.params.join( '&' );
+		}
 
-				this.emit( 'change', EvChange(json,raw) );
+		const r = await fetch( url );
+		if( r.ok ) {
+			const raw = await r.json( );
+			
+			let json = raw;
+			if( this.m_props.solver ) {
+				json = this.m_props.solver( json );
 			}
-		}
 
-		if( delay ) {
-			setTimeout( load, delay );
-		}
-		else {
-			load( );
+			this.emit( 'change', EvChange(json,raw) );
 		}
 	}
 }
@@ -616,10 +603,11 @@ export class DataProxy extends BaseComponent<DataProxyProps,DataEventMap> {
  * 
  */
 
-interface DataStoreProps extends BaseComponentProps<DataStoreEventMap> {
-	model: Record;
-	data?: Record[];
+interface DataStoreProps<T extends Record> extends BaseComponentProps<DataStoreEventMap> {
+	model: T;
+	data?: T[];
 	url?: string;
+	autoload?: false;
 }
 
 
@@ -633,16 +621,16 @@ interface DataStoreEventMap extends EventMap {
  * 
  */
 
-export class DataStore extends EventSource<DataStoreEventMap> {
+export class DataStore<T extends Record = Record> extends EventSource<DataStoreEventMap> {
 	
-	protected m_model: Record;
+	protected m_model: T;
 	protected m_fields: FieldInfo[];
-	protected m_records: Record[];
+	protected m_records: T[];
 
 	protected m_proxy: DataProxy;
 	protected m_rec_index: DataIndex;
 
-	constructor(props: DataStoreProps) {
+	constructor(props: DataStoreProps<T> ) {
 		super( );
 
 		this.m_fields = undefined;
@@ -661,7 +649,9 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 				events: { change: (ev) => { this.setData( ev.value ); } }
 			});
 
-			this.m_proxy.load( );
+			if( props.autoload!=false ) {
+				this.m_proxy.load( );
+			}
 		}
 	}
 
@@ -670,12 +660,12 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 	 * @param records 
 	 */
 
-	load( url?: string ) {
-		this.m_proxy.load( url );
+	async load( url?: string ) {
+		return this.m_proxy.load( url );
 	}
 
-	reload( ) {
-		this.m_proxy.load( );
+	async reload( ) {
+		return this.m_proxy.load( );
 	}
 
 	/**
@@ -685,7 +675,7 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 
 	public setData( records: any[] ) {
 
-		let realRecords: Record[] = [];
+		let realRecords: T[] = [];
 
 		records.forEach( (rec) => {
 			realRecords.push( this.m_model.clone(rec) );
@@ -699,7 +689,7 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 	 * @param records - must be of the same type as model
 	 */
 
-	public setRawData(records: any[]) {
+	public setRawData(records: T[]) {
 
 		this.m_records = records;
 		this._rebuildIndex( );
@@ -717,7 +707,7 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 	 * 
 	 */
 
-	public update( rec: Record ) {
+	public update( rec: T ) {
 		let id = rec.getID();
 		let index = this.indexOfId(id);
 		if (index < 0) {
@@ -734,7 +724,7 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 	 * @param data 
 	 */
 
-	public append( rec: Record | any ) {
+	public append( rec: T | any ) {
 
 		if( !(rec instanceof Record) ) {
 			let nrec = this.m_model.clone( );
@@ -835,7 +825,7 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 	 * @returns record or null
 	 */
 
-	public getById(id: any): Record {
+	public getById(id: any): T {
 		let idx = this.indexOfId( id );
 		if( idx<0 ) {
 			return null;
@@ -850,16 +840,16 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 	 * @returns record or null
 	 */
 
-	public getByIndex( index: number ): Record {
+	public getByIndex( index: number ): T {
 		let idx = this.m_rec_index[index];
 		return this._getRecord( idx );
 	}
 
-	private _getRecord( index: number ) : Record {
+	private _getRecord( index: number ) : T {
 		return this.m_records[index] ?? null;
 	}
 
-	public moveTo( other: DataStore ) {
+	public moveTo( other: DataStore<T> ) {
 		other.setRawData( this.m_records );
 	}
 	
@@ -868,7 +858,7 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 	 * @param opts 
 	 */
 
-	createView( opts?: DataViewProps ) : DataView {
+	createView( opts?: DataViewProps<T> ) : DataView<T> {
 		let eopts = { ...opts, store: this };
 		return new DataView( eopts );
 	}
@@ -1074,7 +1064,7 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 	 * 
 	 */
 
-	forEach( cb: ( rec:Record, index: number ) => any ) {
+	forEach( cb: ( rec:T, index: number ) => any ) {
 		
 		if( this.m_rec_index ) {
 			this.m_rec_index.some( (ri,index) => {
@@ -1118,8 +1108,8 @@ interface DataViewEventMap extends BaseComponentEventMap {
 	view_change: EvViewChange;
 }
 
-interface DataViewProps extends BaseComponentProps<DataViewEventMap> {
-	store?: DataStore;
+interface DataViewProps<T extends Record> extends BaseComponentProps<DataViewEventMap> {
+	store?: DataStore<T>;
 	filter?: FilterInfo;
 	order?: string | SortProp[] | SortProp;
 }
@@ -1147,15 +1137,15 @@ export interface SortProp {
  * You can have multiple views for a single DataStore
  */
 
-export class DataView extends BaseComponent<DataViewProps,DataViewEventMap>
+export class DataView<T extends Record = Record> extends BaseComponent<DataViewProps<T>,DataViewEventMap>
 {
 	protected m_index: DataIndex;
-	protected m_store: DataStore;	
+	protected m_store: DataStore<T>;	
 
 	protected m_sort: SortProp[];
 	protected m_filter: FilterInfo;
 
-	constructor( props: DataViewProps ) {
+	constructor( props: DataViewProps<T> ) {
 		super( props );
 
 		this.m_store = props.store;
@@ -1269,7 +1259,7 @@ export class DataView extends BaseComponent<DataViewProps,DataViewEventMap>
 	 * @param index 
 	 */
 
-	public getByIndex(index: number): Record {
+	public getByIndex(index: number): T {
 		
 		if (index >= 0 && index < this.m_index.length) {
 			let rid = this.m_index[index];
@@ -1284,7 +1274,7 @@ export class DataView extends BaseComponent<DataViewProps,DataViewEventMap>
 	 * @param id 
 	 */
 
-	public getById( id: any): Record {
+	public getById( id: any): T {
 		return this.m_store.getById( id );
 	}
 
@@ -1296,9 +1286,7 @@ export class DataView extends BaseComponent<DataViewProps,DataViewEventMap>
 	 * 
 	 */
 
-	 forEach( cb: ( rec:Record, index: number ) => any ) {
-
-		debugger;
+	 forEach( cb: ( rec:T, index: number ) => any ) {
 		this.m_index.some( ( index ) => {
 			let rec = this.m_store.getByIndex( index );
 			if( rec ) {

package/lib/src/input.ts

@@ -152,14 +152,16 @@ export class Input extends Component<InputProps,InputEventMap>
     }
 
 	public getValue( ): string {
+		const dom = this.dom as HTMLInputElement;
+
 		if( this.dom ) {
-			this.m_props.value = (<HTMLInputElement>this.dom).value;
+			this.m_props.value = dom.value;
 		}
 		
 		if( this.m_props.uppercase ) {
 			let upper = this.m_props.value.toUpperCase( );	// todo: locale ?
-			if( this.dom && upper!=this.m_props.value ) {
-				(<HTMLInputElement>this.dom).value = upper; // update the input
+			if( dom && upper!=this.m_props.value ) {
+				dom.value = upper; // update the input
 			}
 
 			this.m_props.value = upper;
@@ -194,8 +196,8 @@ export class Input extends Component<InputProps,InputEventMap>
 			let type = this.getAttribute('type');
 			if( type ) { type = type.toLowerCase( ); }
 
-			let value,
-				dom = (<HTMLInputElement>this.dom);
+			let value;
+			const dom = this.dom as HTMLInputElement;
 
             if( type === "file") {
 				value = [];
@@ -221,6 +223,12 @@ export class Input extends Component<InputProps,InputEventMap>
 			else if( type === 'date' ) {
 				debugger;
 			}
+			else if( type=='number' ) {
+				value = this.value;
+				if (value.indexOf(",") >= 0) {
+					value = value.replace(",", ".");
+				} 
+			}
 			else {
 				value = this.value;
 			}

package/lib/src/menu.ts

@@ -329,7 +329,7 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
 		//	this.setAttribute( 'tabindex', '0' );
 
 		this.setContent([
-			icon < 0 ? null : new Icon({ icon }),
+			icon ? null : new Icon({ icon }),
 			new Label({ flex: 1, text }),
 			popIco
 		]);

package/lib/src/sidebarview.ts

@@ -31,6 +31,7 @@ import { Component, CProps, Flex, Separator } from './component'
 import { HLayout, VLayout } from './layout'
 import { Button } from './button'
 import { CardView, CardViewProps, ICardViewItem } from './cardview'
+import { Image } from './image';
 
 export interface SideBarItem extends ICardViewItem {
 }
@@ -38,6 +39,7 @@ export interface SideBarItem extends ICardViewItem {
 export interface SideBarProps extends CardViewProps {
 	bar_sizable?: boolean;
 	bar_width?: number;
+	logo?: Image;
 }
 
 /**
@@ -74,7 +76,10 @@ export class SideBarView extends CardView<SideBarProps> {
 		this.m_sidebar.setContent( new VLayout( {
 			flex: 1,
 			cls: 'content',
-			content: tabs
+			content: [
+				this.m_props.logo,
+				...tabs
+			]
 		}) );
 
 		this.setContent( [

package/lib/src/svgcomponent.ts

@@ -135,7 +135,7 @@ abstract class SVGItem {
 		
 		if (value === undefined || value==='' || value===undefined ) {
 			this.m_style.delete( name );
-			return;
+			return this;
 		}
 		
 		if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
@@ -204,7 +204,7 @@ abstract class SVGItem {
 	 * 
 	 */
 
-	clip( id: string ) {
+	clip( id: string ): this {
 		this.attr( "clip-path", `url(#${id})` );
 		return this;
 	}
@@ -213,24 +213,28 @@ abstract class SVGItem {
 	 * 
 	 */
 
-	transform( tr: string ) {
+	transform( tr: string ): this {
 		this.attr( "transform", tr );
+		return this;
 	}
 
 	/**
 	 * 
 	 */
 
-	rotate( deg: number, cx: number, cy: number ) {
+	rotate( deg: number, cx: number, cy: number ): this {
 		this.transform( `rotate( ${deg} ${cx} ${cy} )` );
+		return this;
 	}
 
-	translate( dx: number, dy: number ) {
+	translate( dx: number, dy: number ): this {
 		this.transform( `translate( ${dx} ${dy} )` );
+		return this;
 	}
 
-	scale( x: number ) {
+	scale( x: number ): this {
 		this.transform( `scale( ${x} )` );
+		return this;
 	}
 }
 
@@ -471,6 +475,12 @@ class SVGGroup extends SVGItem {
 		return shape;
 	}
 
+	group( ) {
+		const group = new SVGGroup( );
+		this.m_items.push( group );
+		return group;
+	}
+
 	/**
 	 * 
 	 * example

package/lib/src/version.ts

@@ -27,4 +27,4 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-export const x4js_version = "1.5.31";
+export const x4js_version = "1.5.32";

package/lib/types/component.d.ts

@@ -340,7 +340,7 @@ export declare class Component<P extends CProps<CEventMap> = CProps<CEventMap>,
      * this.setDomEvent( 'drag drop', this._handleDrag, this );
      * this.setDomEvent( 'dblclick', this._handleDblClick, this );
      */
-    setDomEvent<K extends keyof X4ElementEventMap>(type: K, listener: (this: HTMLDivElement, ev: X4ElementEventMap[K]) => void): void;
+    setDomEvent<K extends keyof X4ElementEventMap>(type: K, listener: (this: HTMLDivElement, ev: X4ElementEventMap[K]) => void, passive?: boolean): void;
     private _setDomEvent;
     /**
      *
@@ -351,7 +351,7 @@ export declare class Component<P extends CProps<CEventMap> = CProps<CEventMap>,
      * @param name
      * @param handler
      */
-    createEvent(name: string, handler: Function): void;
+    private _createEvent;
     /**
      * dispatch a dom event to the appropriated component
      * called by the system