x4js 1.5.26 → 1.5.29

package/lib/src/autocomplete.ts

@@ -35,7 +35,11 @@ import { TextEdit, TextEditProps } from './textedit';
  */
 
 interface AutoCompleteProps extends TextEditProps {
-	enumValues: ( filter: string ) => string[];
+	// return an array of values to display in the popup list
+	enumValues: ( filter: string ) => string[] | Promise<string[]>;
+
+	// a way to change the real value vs displayed value in the popup list
+	selectValue?: ( text: string ) => string;
 }
 
 /**
@@ -87,9 +91,18 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 		}
 	}
 
-	private _onChange( ) {
-		const items = this.m_props.enumValues( this.value );
-		this.showPopup( items );
+	private async _onChange( ) {
+		let items = this.m_props.enumValues( this.value );
+		if( items instanceof Promise ) {
+			items = await items;
+		}
+		
+		if( items.length==0 ) {
+			this._hidePopup( );
+			return;
+		}
+
+		this._showPopup( items );
 	}
 
 	componentDisposed( ) {
@@ -100,11 +113,15 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 		super.componentDisposed( );
 	}
 
+	showPopup( ) {
+		this._onChange( );
+	}
+
 	/** 
 	 * display the popup 
 	 */
 
-	showPopup( items: string[] ) {
+	private _showPopup( items: string[] ) {
 
 		let props = this.m_props;
 		if (props.readOnly || this.hasClass("@disable") ) {
@@ -125,7 +142,12 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 					tabindex: 0
 				},
 				selectionChange: (e) => {
-					this.value = (e.selection as ListViewItem).id
+					let value = (e.selection as ListViewItem).id
+					if( this.m_props.selectValue ) {
+						value = this.m_props.selectValue( value );
+					}
+
+					this.value = value;
 					if( !this.m_lockpop ) {
 						this._hidePopup( );
 						this.focus( );
@@ -138,7 +160,9 @@ export class AutoComplete extends TextEdit<AutoCompleteProps> {
 			});
 		}
 
-		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({

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 
@@ -94,6 +99,7 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	private m_lockchg: boolean;
 	private m_popvis: boolean;
 	private m_selection: ListViewItem;
+	private m_error_tip: Tooltip;
 		
 	constructor(props: ComboBoxProps) {
 		super(props);
@@ -147,6 +153,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 +166,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 +229,10 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 							this.showPopup( false )
 						},
 						dom_events: {
-							focus: () => { this.dom.focus(); },
+							focus: () => { 
+								this.clearError();
+								this.dom.focus(); 
+							},
 						}
 					})
 				]
@@ -233,6 +245,10 @@ 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( );
 		}
@@ -310,6 +326,40 @@ 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) {
+
+		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');
+	}
+
+	public clearError() {
+		if (this.m_error_tip) {
+			this.m_error_tip.hide();
+			this.removeClass('@error');
+		}
+	}
+
 	/** @ignore
 	  */
 

package/lib/src/component.ts

@@ -2206,9 +2206,11 @@ export class Container<P extends ContainerProps = ContainerProps, E extends Cont
 
 	private m_shortcuts: Shortcut[];
 
-	constructor( props: P | ComponentOrString[] ) {
+	constructor( props: P );
+	constructor( items: ComponentOrString[], cls?: string );
+	constructor( props: P | ComponentOrString[], cls?: string ) {
 		if( isArray(props) ) {
-			super( {content: props} as P );
+			super( {content: props,cls} as P );
 		}
 		else {
 			super( props );

package/lib/src/datastore.ts

@@ -38,12 +38,12 @@ export type CalcCallback = () => string;
 export type FieldType = 'string' | 'int' | 'float' | 'date' | 'bool' | 'array' | 'object' | 'any' | 'calc';
 export type DataIndex = Uint32Array;
 
-interface EvDataChange extends BasicEvent {
+export interface EvDataChange extends BasicEvent {
 	type: string;
 	id: any;
 }
 
-function EvDataChange( type: 'create' | 'update' | 'delete' | 'data' | 'change', id?: any ) {
+export function EvDataChange( type: 'create' | 'update' | 'delete' | 'data' | 'change', id?: any ) {
 	return BasicEvent<EvDataChange>( { type, id } );
 }
 
@@ -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

@@ -84,7 +84,7 @@ export class Input extends Component<InputProps,InputEventMap>
 			placeholder: props.placeHolder,
 			autofocus: props.autoFocus,
 			readonly: props.readOnly,
-			autocomplete: 'new-password',	// chrome ignore 'off' but not something else than 'on'
+			autocomplete: 'off',	// chrome ignore 'off' but not something else than 'on'
 			tabIndex: props.tabIndex,
 			spellcheck: props.spellcheck===false ? 'false' : undefined,
 			min: props.min,

package/lib/src/textedit.ts

@@ -318,7 +318,7 @@ export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEdi
 		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.m_error_tip.displayAt(rc.right, rc.top-8, 'top right');
 		this.addClass('@error');
 	}
 

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.26";
+export const x4js_version = "1.5.29";

package/lib/types/autocomplete.d.ts

@@ -31,7 +31,8 @@ import { TextEdit, TextEditProps } from './textedit';
  *
  */
 interface AutoCompleteProps extends TextEditProps {
-    enumValues: (filter: string) => string[];
+    enumValues: (filter: string) => string[] | Promise<string[]>;
+    selectValue?: (text: string) => string;
 }
 /**
  *
@@ -45,10 +46,11 @@ export declare class AutoComplete extends TextEdit<AutoCompleteProps> {
     _onKey(e: KeyboardEvent): void;
     private _onChange;
     componentDisposed(): void;
+    showPopup(): void;
     /**
      * display the popup
      */
-    showPopup(items: string[]): void;
+    private _showPopup;
     protected _validate(value: string): boolean;
     validate(): boolean;
     private _checkFocus;

package/lib/types/combobox.d.ts

@@ -26,9 +26,6 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-/**
- * TODO: replace custom combo list by listview or gridview
- */
 import { Component, CProps, ContainerEventMap } from './component';
 import { EvChange, EvSelectionChange, EventCallback } from './x4events';
 import { Input } from './input';
@@ -52,6 +49,7 @@ export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
     tabIndex?: number | boolean;
     name?: string;
     readOnly?: boolean;
+    required?: true;
     label?: string;
     labelWidth?: number;
     labelAlign?: 'left' | 'right';
@@ -72,6 +70,7 @@ export declare class ComboBox extends HLayout<ComboBoxProps, ComboBoxEventMap> {
     private m_lockchg;
     private m_popvis;
     private m_selection;
+    private m_error_tip;
     constructor(props: ComboBoxProps);
     _onKey(e: any): void;
     set items(items: ListViewItem[]);
@@ -82,6 +81,12 @@ export declare class ComboBox extends HLayout<ComboBoxProps, ComboBoxEventMap> {
      * display the popup
      */
     showPopup(filter_items?: boolean): ListViewItem[];
+    /**
+     *
+     */
+    validate(): boolean;
+    showError(text: string): void;
+    clearError(): void;
     /** @ignore
       */
     private _selectItem;

package/lib/types/component.d.ts

@@ -584,7 +584,8 @@ export interface ContainerProps<E extends ContainerEventMap = ContainerEventMap>
  */
 export declare class Container<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Component<P, E> {
     private m_shortcuts;
-    constructor(props: P | ComponentOrString[]);
+    constructor(props: P);
+    constructor(items: ComponentOrString[], cls?: string);
     /**
      * add an application shortcut
      * @param sequence key sequence Shift+Ctrl+Alt+K

package/lib/types/datastore.d.ts

@@ -32,11 +32,11 @@ export type ChangeCallback = (type: string, id?: any) => void;
 export type CalcCallback = () => string;
 export type FieldType = 'string' | 'int' | 'float' | 'date' | 'bool' | 'array' | 'object' | 'any' | 'calc';
 export type DataIndex = Uint32Array;
-interface EvDataChange extends BasicEvent {
+export interface EvDataChange extends BasicEvent {
     type: string;
     id: any;
 }
-declare function EvDataChange(type: 'create' | 'update' | 'delete' | 'data' | 'change', id?: any): EvDataChange;
+export declare function EvDataChange(type: 'create' | 'update' | 'delete' | 'data' | 'change', id?: any): EvDataChange;
 /**
  * fields definition
  * 	field with index=0 is record id

package/lib/types/form.d.ts

@@ -26,21 +26,26 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-import { Component, Container, CProps, ContainerEventMap, ComponentContent } from './component';
+import { Component, Container, CProps, ContainerEventMap, ComponentContent, EventHandler } from './component';
 import { HLayout, VLayout } from './layout';
 import { Button } from './button';
 import { RequestProps } from './request';
-import { EventCallback } from './x4events';
+import { BasicEvent } from './x4events';
 import { EvBtnClick } from './dialog';
+export interface EvDirty extends BasicEvent {
+    dirty: boolean;
+}
 export type FormBtn = 'ok' | 'cancel' | 'ignore' | 'yes' | 'no' | 'close' | 'save' | 'dontsave';
 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>;
+    btnClick?: EventHandler<EvBtnClick>;
+    dirty?: EventHandler<EvDirty>;
 }
 /**
  *
@@ -107,6 +112,10 @@ export declare class Form<T extends FormProps = FormProps, E extends FormEventMa
      *
      */
     setValues(values: any): void;
+    /**
+     *
+     */
+    clearValues(): void;
     /**
      * values are not escaped
      * checkbox set true when checked