x4js 1.5.29 → 1.5.32

package/lib/src/autocomplete.ts

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { ListViewItem, PopupListView } from "./listview";
+import { RenderListItem, ListViewItem, PopupListView } from "./listview";
 import { TextEdit, TextEditProps } from './textedit';
 
 /**
@@ -40,6 +40,7 @@ interface AutoCompleteProps extends TextEditProps {
 
 	// a way to change the real value vs displayed value in the popup list
 	selectValue?: ( text: string ) => string;
+	renderItem?: RenderListItem
 }
 
 /**
@@ -113,8 +114,13 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 		super.componentDisposed( );
 	}
 
-	showPopup( ) {
-		this._onChange( );
+	showPopup( show = true ) {
+		if( show ) {
+			this._onChange( );
+		}
+		else {
+			this._hidePopup( );
+		}
 	}
 
 	/** 
@@ -156,7 +162,8 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 				style: {
 					fontFamily,
 					fontSize
-				}
+				},
+				renderItem: props.renderItem,
 			});
 		}
 
@@ -218,4 +225,8 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 
 		this.m_needval = true;
 	}
+
+	isPopupVisible( ) {
+		return this.m_popvis;
+	}
 }

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

@@ -86,20 +86,27 @@ export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
 	editable?: boolean;
 }
 
+abstract class InputLike extends Component {
+	abstract setValue( text: string );
+	abstract getValue( ): string;
+	abstract showError( text: string );
+	abstract clearError( );
+}
+
+
 /**
  * @review use textedit
  */
 
 export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	
-	private m_ui_input: Input | Component;
+	private m_ui_input: Input | InputLike;
 	private m_ui_button: Button;
 	private m_popup: PopupListView;
 	private m_lockpop: boolean;
 	private m_lockchg: boolean;
 	private m_popvis: boolean;
 	private m_selection: ListViewItem;
-	private m_error_tip: Tooltip;
 		
 	constructor(props: ComboBoxProps) {
 		super(props);
@@ -193,7 +200,7 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 				flex: 1, 
 				cls: '@fake-input @hlayout', 
 				tabIndex: 1 
-			} );
+			} ) as any;
 		}
 
 		let width = undefined,
@@ -245,10 +252,6 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	}
 
 	componentDisposed( ) {
-		if (this.m_error_tip) {
-			this.m_error_tip.dispose();
-		}
-
 		if( this.m_popup ) {
 			this.m_popup.close( );
 		}
@@ -340,24 +343,11 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	}
 
 	public showError(text: string) {
-
-		if (!this.m_error_tip) {
-			this.m_error_tip = new Tooltip({ cls: 'error' });
-			x4document.body.appendChild(this.m_error_tip._build());
-		}
-
-		let rc = this.m_ui_input.getBoundingRect();
-		this.m_error_tip.text = text;
-		this.m_error_tip.displayAt(rc.right, rc.top-8, 'top right');
-
-		this.addClass('@error');
+		this.m_ui_input.showError( text );
 	}
 
 	public clearError() {
-		if (this.m_error_tip) {
-			this.m_error_tip.hide();
-			this.removeClass('@error');
-		}
+		this.m_ui_input.clearError( );
 	}
 
 	/** @ignore

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
@@ -279,6 +285,20 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 		}
 	}
 
+	removeChild( item: Component ) {
+		if( this.m_props.content ) {
+			if (!isArray(this.m_props.content)) {
+				this.m_props.content = [this.m_props.content];
+			}
+
+			this.m_props.content = this.m_props.content.filter( x => x!==item );
+		}
+
+		if( this.dom && item.dom ) {
+			this.dom.removeChild( item.dom );
+		}
+	}
+
 	/**
 	 * 
 	 */
@@ -524,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;
 		}
 	}
 
@@ -830,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 );
 				}
 			}
 		}
@@ -1095,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) {
@@ -1109,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);
 		}
 	}
 
@@ -1147,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];
@@ -1171,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

@@ -239,7 +239,7 @@ interface RecordConstructor {
  */
 
 	export function array( ctor: RecordConstructor, props?: MetaData  ) {
-		return data.field( { ...props, type: 'array', model: new ctor() } )
+		return data.field( { ...props, type: 'array', model: ctor ? new ctor() : null } )
 	}
 
 }
@@ -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

@@ -27,6 +27,8 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
+import { x4document } from './x4dom'
+import { Tooltip } from './tooltips';
 import { Component, CProps, CEventMap, EvFocus } from './component'
 //import { EvChange } from './x4_events';
 
@@ -67,10 +69,20 @@ export interface InputProps<P extends InputEventMap = InputEventMap> extends CPr
 
 export class Input extends Component<InputProps,InputEventMap>
 {
+	private m_error_tip: Tooltip;
+
 	constructor( props: InputProps ) {
 		super( props );
 	}
 
+	componentDisposed() {
+		if (this.m_error_tip) {
+			this.m_error_tip.dispose();
+		}
+
+		super.componentDisposed();
+	}
+
 	/** @ignore */	
 	render( props: InputProps ) {
 
@@ -105,6 +117,28 @@ export class Input extends Component<InputProps,InputEventMap>
 		}
 	}
 
+	public showError(text: string) {
+
+		if (!this.m_error_tip) {
+			this.m_error_tip = new Tooltip({ cls: 'error' });
+			x4document.body.appendChild(this.m_error_tip._build());
+		}
+
+		let rc = this.getBoundingRect();
+
+		this.m_error_tip.text = text;
+		this.m_error_tip.displayAt(rc.right, rc.top-8, 'top right');
+		this.addClass('@error');
+	}
+
+	public clearError() {
+
+		if (this.m_error_tip) {
+			this.m_error_tip.hide();
+			this.removeClass('@error');
+		}
+	}
+
 	public getType( ) {
 		return this.m_props.type;
 	}
@@ -114,22 +148,27 @@ export class Input extends Component<InputProps,InputEventMap>
      */
 
     public get value( ) : string {
-		
+		return this.getValue( );
+    }
+
+	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;
 		}
 		
 		return this.m_props.value;
-    }
+	}
 
     /**
      * Change the editor value
@@ -137,7 +176,10 @@ export class Input extends Component<InputProps,InputEventMap>
      */
 	
 	public set value( value: string ) {
-		
+		this.setValue( value );
+	}
+	
+	public setValue( value: string ) {
 		this.m_props.value = value;
 
 		if( this.dom ) {
@@ -154,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 = [];
@@ -181,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;
 			}
@@ -190,7 +238,7 @@ export class Input extends Component<InputProps,InputEventMap>
 	}
 
 	public setStoreValue( v: any ) {
-		
+		this.clearError( );
 		if( this.m_props.value_hook ) {
 			return this.m_props.value_hook.set( v );
 		}

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