x4js 1.5.27 → 1.5.31

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
 }
 
 /**
@@ -102,7 +103,7 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 			return;
 		}
 
-		this.showPopup( items );
+		this._showPopup( items );
 	}
 
 	componentDisposed( ) {
@@ -113,11 +114,20 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 		super.componentDisposed( );
 	}
 
+	showPopup( show = true ) {
+		if( show ) {
+			this._onChange( );
+		}
+		else {
+			this._hidePopup( );
+		}
+	}
+
 	/** 
 	 * display the popup 
 	 */
 
-	showPopup( items: string[] ) {
+	private _showPopup( items: string[] ) {
 
 		let props = this.m_props;
 		if (props.readOnly || this.hasClass("@disable") ) {
@@ -152,11 +162,14 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 				style: {
 					fontFamily,
 					fontSize
-				}
+				},
+				renderItem: props.renderItem,
 			});
 		}
 
-		this.m_popup.items = items.map( c => ({ id: c, text: c }) );
+		if( items ) {
+			this.m_popup.items = items.map( c => ({ id: c, text: c }) );
+		}
 	
 		let r1 = this.m_ui_input.getBoundingRect();
 		this.m_popup.setStyle({
@@ -212,4 +225,8 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 
 		this.m_needval = true;
 	}
+
+	isPopupVisible( ) {
+		return this.m_popvis;
+	}
 }

package/lib/src/combobox.ts

@@ -31,6 +31,8 @@
  * TODO: replace custom combo list by listview or gridview
  */
 
+import { x4document } from './x4dom'
+
 import { Component, CProps, ContainerEventMap } from './component'
 import { EvChange, EvSelectionChange, EventCallback } from './x4events'
 
@@ -41,6 +43,8 @@ import { HLayout } from './layout'
 import { PopupListView, ListViewItem, EvCancel, PopulateItems } from './listview';
 import { DataStore, DataView, Record } from './datastore'
 import { isFunction, HtmlString } from './tools'
+import { Tooltip } from './tooltips'
+import { _tr } from './i18n'
 
 export interface ComboStoreProxyProps {
 	store: DataView | DataStore;
@@ -65,6 +69,7 @@ export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
 	tabIndex?: number | boolean;
 	name?: string;
 	readOnly?: boolean;
+	required?: true;
 	
 	label?: string;							
 	labelWidth?: number; // < 0 for flex 
@@ -81,13 +86,21 @@ 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;
@@ -147,6 +160,8 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 
 		if( !props.renderer ) {
 			
+			this.setClass('@required', props.required);
+
 			const input = new Input( {
 				flex 	: 1,
 				readOnly : this.m_props.editable ? false : true,
@@ -158,6 +173,7 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 				},
 				dom_events: {
 					focus: () => {
+						this.clearError();
 						if( this.m_props.editable && input.value.length==0 ) {
 							this.showPopup( );
 						}
@@ -220,7 +236,10 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 							this.showPopup( false )
 						},
 						dom_events: {
-							focus: () => { this.dom.focus(); },
+							focus: () => { 
+								this.clearError();
+								this.dom.focus(); 
+							},
 						}
 					})
 				]
@@ -310,6 +329,27 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 		return items;
 	}
 
+	/**
+	 * 
+	 */
+
+	validate( ) {
+		if( this.m_props.required && !this.m_selection ) {
+			this.showError(_tr.global.required_field);
+			return false;
+		}
+
+		return true;
+	}
+
+	public showError(text: string) {
+		this.m_ui_input.showError( text );
+	}
+
+	public clearError() {
+		this.m_ui_input.clearError( );
+	}
+
 	/** @ignore
 	  */
 

package/lib/src/component.ts

@@ -279,6 +279,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 );
+		}
+	}
+
 	/**
 	 * 
 	 */

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 } )
 	}
 
 }
@@ -433,7 +433,11 @@ export class Record {
 				return undefined;
 			}
 		}
-		else if( name>=0 && name<fields.length ) {
+		else if( name<fields.length ) {
+			if( name<0 ) {
+				return undefined
+			}
+
 			idx = name;
 		}
 		else {

package/lib/src/form.ts

@@ -27,17 +27,23 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-import { Component, Container, CProps, ContainerEventMap, ComponentContent, flyWrap } from './component'
+import { Component, Container, CProps, ContainerEventMap, ComponentContent, flyWrap, EventHandler } from './component'
 import { HLayout, VLayout } from './layout'
 import { Button } from './button'
 import { Input } from './input'
 import { TextEdit } from './textedit'
 import { ajaxRequest, RequestProps } from './request'
-import { EventCallback } from './x4events'
+import { BasicEvent } from './x4events'
 import { EvBtnClick } from './dialog'
+import { ComboBox } from './combobox'
 
 import { _tr } from './i18n'
 
+
+export interface EvDirty extends BasicEvent {
+	dirty: boolean;
+}
+
 // ============================================================================
 // [FORM]
 // ============================================================================
@@ -47,12 +53,14 @@ export type FormButtons = (FormBtn | Button | Component)[];
 
 export interface FormEventMap extends ContainerEventMap {
 	btnClick?: EvBtnClick;
+	dirty?: EvDirty;
 }
 
 export interface FormProps extends CProps<FormEventMap> {
 	disableSuggestions?: boolean;
 	buttons?: FormButtons;
-	btnClick?: EventCallback<EvBtnClick>;	// shortcut for events: { btnClick: ... }
+	btnClick?: EventHandler<EvBtnClick>;	// shortcut for events: { btnClick: ... }
+	dirty?: EventHandler<EvDirty>;
 }
 
 /**
@@ -79,7 +87,7 @@ export class Form<T extends FormProps = FormProps, E extends FormEventMap = Form
 		super(props);
 
 		this.setTag( props.disableSuggestions ? 'section' : 'form');
-		this.mapPropEvents(props, 'btnClick');
+		this.mapPropEvents(props, 'btnClick', 'dirty');
 		this.updateContent(content, props.buttons, height);
 
 		this.m_dirty = false;
@@ -221,10 +229,17 @@ export class Form<T extends FormProps = FormProps, E extends FormEventMap = Form
 			result = true;
 
 		for (let i = 0; i < inputs.length; i++) {
-			let input = Component.getElement(inputs[i], TextEdit);
+			const input = Component.getElement(inputs[i], TextEdit);
 			if (input && !input.validate()) {
 				result = false;
 			}
+			else {
+				const combo = Component.getElement(inputs[i], ComboBox);
+				if( combo && !combo.validate() ) {
+					result = false;
+				}
+			}
+			
 		}
 
 		return result;
@@ -278,6 +293,28 @@ export class Form<T extends FormProps = FormProps, E extends FormEventMap = Form
 		this.setDirty(false);
 	}
 
+	/**
+	 * 
+	 */
+
+	public clearValues() {
+
+		let elements = this._getElements();
+		for (let e = 0; e < elements.length; e++) {
+
+			let input = <HTMLInputElement>elements[e];
+
+			let item = Component.getElement(input);
+			if (!item.hasAttribute("name")) {
+				continue;
+			}
+
+			(<Input>item).setStoreValue( null );
+		}
+
+		this.setDirty(false);
+	}
+
 
 	/**
 	 * values are not escaped
@@ -363,6 +400,7 @@ export class Form<T extends FormProps = FormProps, E extends FormEventMap = Form
 
 	setDirty(set = true) {
 		this.m_dirty = set;
+		this.emit( 'dirty', { dirty: set } );
 	}
 
 	/**

package/lib/src/icon.ts

@@ -58,12 +58,20 @@ interface LoadingEventMap extends EventMap {
 
 function trimQuotes( str:string ): string {
 	const l = str.length;
+
+	//chrome
 	if( str[0]=='"' && str[l-1]=='"' ) {
 		str = str.substring( 1, l-1 )
 		str = str.replaceAll( '\\"', "'" );
 		return str;
 	}
 
+	//firefox
+	if( str[0]=="'" && str[l-1]=="'" ) {
+		str = str.substring( 1, l-1 )
+		return str;
+	}
+
 	return str;
 }
 

package/lib/src/image.ts

@@ -28,25 +28,30 @@
 **/
 
 import { x4document } from './x4dom'
-
 import { Component, CProps, html } from './component'
 
+interface LazyLoad {
+	el: Component;
+	src: string;
+}
+
 // ============================================================================
 // [IMAGE]
 // ============================================================================
 
-interface ImageProps extends CProps
+export interface ImageProps extends CProps
 {
 	src: string;
 	alt?: string;
 	lazy?: boolean;	// mark image as lazy loading
 	alignment?: 'fill' | 'contain' | 'cover' | 'scale-down' | 'none';
+	overlays?: Component[];
 }
 
 const emptyImageSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 
 function _isStaticImage( src: string ) {
-	return src.substr(0,5)=='data:';
+	return src.substring(0,5)=='data:';
 }
 
 
@@ -58,6 +63,7 @@ export class Image extends Component<ImageProps>
 {
 	protected m_created: boolean;
 	protected m_lazysrc: string;		// expected 
+	private m_img: Component;
 	
 	constructor(props: ImageProps) {
 		super(props);
@@ -83,7 +89,7 @@ export class Image extends Component<ImageProps>
 	render( ) {
 		let mp = this.m_props;
 
-		const img = new Component( {
+		this.m_img = new Component( {
 			tag: 'img',
 			attrs: {
 				draggable: false,
@@ -95,7 +101,13 @@ export class Image extends Component<ImageProps>
 			}
 		});
 
-		this.setContent( img );
+		if( mp.overlays ) {
+			mp.overlays.forEach( x => x.addClass('@fit') );
+			this.setContent( [this.m_img,...mp.overlays] );
+		}
+		else {
+			this.setContent( this.m_img );
+		}
 	}
 	
 	/**
@@ -107,14 +119,18 @@ export class Image extends Component<ImageProps>
 
 		if( !src ) {
 			src = emptyImageSrc;
+			this.addClass( 'empty' );
+		}
+		else {
+			this.removeClass( 'empty' );
 		}
 		
 		if( !this.m_props.lazy ) {
 			this.m_props.src = src;
 			this.m_lazysrc = src;
 
-			if( this.dom ) {
-				(<HTMLElement>this.dom.firstChild).setAttribute( 'src', src );
+			if( this.m_img.dom ) {
+				this.m_img.dom.setAttribute( 'src', src );
 			}
 		}
 		else if( force || this.m_lazysrc!=src ) {
@@ -123,15 +139,15 @@ export class Image extends Component<ImageProps>
 				this.m_props.src = src;
 				this.m_lazysrc = src;
 
-				if( this.dom ) {
-					(<HTMLElement>this.dom.firstChild).setAttribute( 'src', this.m_props.src );
+				if( this.m_img.dom ) {
+					this.m_img.dom.setAttribute( 'src', this.m_props.src );
 				}
 			}
 			else {
 				// clear current image while waiting
 				this.m_props.src = emptyImageSrc;
-				if( this.dom ) {
-					(<HTMLElement>this.dom.firstChild).setAttribute( 'src', this.m_props.src );
+				if( this.m_img.dom ) {
+					this.m_img.dom.setAttribute( 'src', this.m_props.src );
 				}
 				
 				this.m_lazysrc = src;
@@ -148,14 +164,18 @@ export class Image extends Component<ImageProps>
 
 		if( this.m_lazysrc && !_isStaticImage(this.m_lazysrc) ) {
 			// we do not push Components in a static array...
-			Image.lazy_images_waiting.push( { dom: this.dom, src: this.m_lazysrc } );
+			Image.lazy_images_waiting.push( { 
+				el: this, 
+				src: this.m_lazysrc 
+			} );
+
 			if( Image.lazy_image_timer===undefined ) {
 				Image.lazy_image_timer = setInterval( Image.lazyWatch as TimerHandler, 10 );
 			}
 		}
 	}
 
-	private static lazy_images_waiting = [];
+	private static lazy_images_waiting: LazyLoad[] = [];
 	private static lazy_image_timer: number = undefined;
 
 	private static lazyWatch( ) {
@@ -163,10 +183,10 @@ export class Image extends Component<ImageProps>
 		let newList = [];
 		let done = 0;
 			
-		Image.lazy_images_waiting.forEach( ( el ) => {
+		Image.lazy_images_waiting.forEach( ( lazy ) => {
 
-			let dom = el.dom,
-				src = el.src;
+			let dom = lazy.el.dom,
+				src = lazy.src;
 				
 			// skip deleted elements
 			if( !dom || dom.offsetParent === null ) {
@@ -185,11 +205,12 @@ export class Image extends Component<ImageProps>
 				// ok, we load the image
 				let img = <HTMLElement>dom.firstChild;
 				img.setAttribute( 'src', src );
+				lazy.el.removeClass( 'empty' );
 				done++;
 			}
 			else {
 				// still not visible: may be next time
-				newList.push( el );
+				newList.push( lazy );
 			}
 		} );
 

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,7 +148,10 @@ export class Input extends Component<InputProps,InputEventMap>
      */
 
     public get value( ) : string {
-		
+		return this.getValue( );
+    }
+
+	public getValue( ): string {
 		if( this.dom ) {
 			this.m_props.value = (<HTMLInputElement>this.dom).value;
 		}
@@ -129,7 +166,7 @@ export class Input extends Component<InputProps,InputEventMap>
 		}
 		
 		return this.m_props.value;
-    }
+	}
 
     /**
      * Change the editor value
@@ -137,7 +174,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 ) {
@@ -190,7 +230,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/router.ts

@@ -154,7 +154,7 @@ export class Router extends EventSource< RouterEventMap > {
 		return this.m_useHash ? '/'+x4document.location.hash.substring(1) : x4document.location.pathname;
 	}
 
-	navigate( uri: string, notify = true ) {
+	navigate( uri: string, notify = true, replace = false ) {
 
 		if( !uri.startsWith('/') ) {
 			uri = '/'+uri;
@@ -170,11 +170,15 @@ export class Router extends EventSource< RouterEventMap > {
 		}
 
 		if( this.m_useHash ) {
-			while( uri.startsWith('/') ) {
+			while( uri.at(0)=='/' ) {
 				uri = uri.substring( 1 );
 			}
 			
-			window.history.pushState({}, '', '#'+uri );
+			uri = '#'+uri;
+		}
+		
+		if( replace ) {
+			window.history.replaceState({}, '', uri );
 		}
 		else {
 			window.history.pushState({}, '', uri );

package/lib/src/textedit.ts

@@ -93,8 +93,7 @@ export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEdi
 
 	private m_cal_popup: PopupCalendar;
 	protected m_ui_input: Input;
-	private m_error_tip: Tooltip;
-
+	
 	constructor(props: T) {
 		super(props);
 		this.addClass( '@hlayout' );
@@ -109,14 +108,6 @@ export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEdi
 		}
 	}
 
-	componentDisposed() {
-		if (this.m_error_tip) {
-			this.m_error_tip.dispose();
-		}
-
-		super.componentDisposed();
-	}
-
 	focus() {
 		this.m_ui_input.focus();
 	}
@@ -309,28 +300,18 @@ export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEdi
 	}
 
 	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, 'top left');
-		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( );
 	}
 
 	public get value(): string {
+		return this.getValue( );
+	}
+
+	public getValue( ) : string {
 		if (this.m_ui_input) {
 			return this.m_ui_input.value;
 		}
@@ -339,7 +320,15 @@ export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEdi
 		}
 	}
 
+	/**
+	 * 
+	 */
+
 	public set value(value: string) {
+		this.setValue( value );
+	}
+
+	public setValue( value: string ) {
 		if (this.m_ui_input) {
 			this.m_ui_input.value = value;
 		}