x4js 1.5.5 → 1.5.7

package/lib/esm/label.js

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 import { Component } from './component';
-import { HtmlString } from './tools';
+import { escapeHtml, HtmlString } from './tools';
 import { Icon } from './icon';
 /**
  * Standard label
@@ -45,7 +45,7 @@ export class Label extends Component {
     render(props) {
         let text = this.m_props.text;
         if (this.m_props.multiline && !(text instanceof HtmlString)) {
-            text = new HtmlString(text.replace(/\n/g, '<br/>'));
+            text = new HtmlString(escapeHtml(text, true));
         }
         if (!props.icon) {
             this.setContent(text);
@@ -70,7 +70,7 @@ export class Label extends Component {
             props.text = txt;
             let text = this.m_props.text;
             if (this.m_props.multiline && !(text instanceof HtmlString)) {
-                text = new HtmlString(text.replace('/\n/g', '<br/>'));
+                text = new HtmlString(escapeHtml(text, true));
             }
             if (this.dom) {
                 let comp = this;

package/lib/esm/listview.js

@@ -59,7 +59,7 @@ export class ListView extends VLayout {
             this._buildItems();
         }
         else if (this.m_props.populate) {
-            this.items = this.m_props.populate();
+            this.items = this.m_props.populate(null);
         }
     }
     render(props) {
@@ -307,6 +307,8 @@ export class ListView extends VLayout {
     }
     /** @ignore */
     _handleClick(e) {
+        e.stopImmediatePropagation();
+        e.preventDefault();
         let dom = e.target, self = this.dom, list_items = this.m_props.items; // already created by build
         // go up until we find something interesting
         while (dom && dom != self) {

package/lib/esm/messagebox.js

@@ -76,6 +76,22 @@ export class MessageBox extends Dialog {
         msg.show();
         return msg;
     }
+    static async showAsync(props) {
+        return new Promise((resolve, reject) => {
+            let _props;
+            const cb = (btn) => {
+                resolve(btn);
+            };
+            if (isString(props) || isHtmlString(props)) {
+                _props = { message: props, click: cb };
+            }
+            else {
+                _props = { ...props, click: cb };
+            }
+            const msg = new MessageBox(_props);
+            msg.show();
+        });
+    }
     /**
      * display an alert message
      */

package/lib/esm/popup.js

@@ -134,8 +134,8 @@ export class Popup extends Container {
     * @param x
     * @param y
     */
-    displayAt(x, y, align = 'top left', offset) {
-        this.show();
+    displayAt(x, y, align = 'top left', offset, modal = false) {
+        this.show(modal);
         let halign = 'l', valign = 't';
         if (align.indexOf('right') >= 0) {
             halign = 'r';

package/lib/esm/tools.js

@@ -269,7 +269,7 @@ export function sprintf(format, ...args) {
  */
 export function escapeHtml(unsafe, nl_br = false) {
     if (!unsafe || unsafe.length == 0) {
-        return unsafe;
+        return "";
     }
     let result = unsafe.replace(/[<>\&\"\']/g, function (c) {
         return '&#' + c.charCodeAt(0) + ';';

package/lib/esm/version.js

@@ -26,4 +26,4 @@
 * 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 const x4js_version = "1.5.5";
+export const x4js_version = "1.5.7";

package/lib/src/calendar.ts

@@ -33,6 +33,7 @@ import { Button } from './button';
 import { Popup } from './popup';
 import { Component, CProps, ContainerEventMap, Flex } from './component'
 import { EvChange, EventCallback } from './x4events'
+import { Point } from "./tools"
 
 import { _tr } from './i18n';
 import { Label } from './label';
@@ -308,9 +309,14 @@ export class PopupCalendar extends Popup {
 	}
 
 	/** @ignore */
-	show(modal?: boolean) {
+	show(modal?: boolean, at?: Point ) {
 		x4document.addEventListener('mousedown', this._handleClick);
-		super.show(modal);
+		if( at ) {
+			super.displayAt( at.x, at.y, 'top left', undefined, modal );
+		}
+		else {
+			super.show(modal);
+		}
 	}
 
 	/** @ignore */

package/lib/src/combobox.ts

@@ -38,7 +38,7 @@ import { Input } from './input'
 import { Label } from './label'
 import { Button } from './button'
 import { HLayout } from './layout'
-import { PopupListView, ListViewItem, PopulateItems, EvCancel } from './listview';
+import { PopupListView, ListViewItem, EvCancel, PopulateItems } from './listview';
 import { DataStore, DataView, Record } from './datastore'
 import { isFunction, HtmlString } from './tools'
 
@@ -73,12 +73,12 @@ export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
 
 	labelAlign?: 'left' | 'right';	
 
-	items?: ListViewItem[];
-	populate?: PopulateItems; // if not specified, fire 'populate' event
+	items?: ListViewItem[] | PopulateItems;
 	value?: any; // shown value at init
 
 	renderer?: ComboItemRender;
 	selectionChange?: EventCallback<EvSelectionChange>;// shortcut to events: { selectionChange: ... }
+	editable?: boolean;
 }
 
 /**
@@ -87,43 +87,97 @@ export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
 
 export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	
-	private m_ui_input: Component;
+	private m_ui_input: Input | Component;
 	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_defer_sel: any;
-	
+		
 	constructor(props: ComboBoxProps) {
 		super(props);
 
-		this.setDomEvent( 'keypress', () => this.showPopup() );
-		this.setDomEvent( 'click', () => this.showPopup() );
+		if( !props.editable ) {
+			this.setDomEvent( 'keypress', () => this.showPopup() );
+		}
+
+		this.setDomEvent( 'click', () => {
+			if( this.m_props.editable ) {
+				this.m_ui_input.focus( );
+			}
+			
+			this.showPopup();
+		} );
 
+		this.setDomEvent("keydown", e => this._onKey(e));
 		this.mapPropEvents(props, 'selectionChange' );
+		
+		this.m_popvis = false;
+		this.m_lockpop = false;
+		this.m_lockchg = false;
 	}
 
+	_onKey(e) {
+        if (this.m_popvis) {
+            if (e.key == "ArrowUp" || e.key == "ArrowDown") {
+				this.m_lockpop = true;
+                this.m_popup.handleKey(e);
+                this.m_lockpop = false;
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else if (e.key == "Escape") {
+                this._hidePopup();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+    }
+
 	set items( items: ListViewItem[] ) {
 		this.m_props.items = items;
 		if( this.m_popup ) {
 			this.m_popup.items = items;
 		}
 	}
-
+	
 	/** @ignore */	
 	render( props: ComboBoxProps ) {
 
 		if( !props.renderer ) {
-			this.m_ui_input = new Input( {
+			
+			const input = new Input( {
 				flex 	: 1,
-				readOnly : true,
+				readOnly : this.m_props.editable ? false : true,
 				tabIndex : 0,
 				name: props.name,
 				value_hook: {
 					get: (): string => { return this.value; },
 					set: (v: string) => { this.value = v; }
+				},
+				dom_events: {
+					focus: () => {
+						if( this.m_props.editable && input.value.length==0 ) {
+							this.showPopup( );
+						}
+					},
+					input: ( ) => {
+						if( this.m_lockchg ) {
+							return;
+						}
+
+						const text = input.value;
+						this.m_selection = { id: undefined, text };
+						let items = this.showPopup( );
+						if( items && items.length && items[0].text==text ) {
+							this.m_selection = { id: items[0].id, text };
+						}
+					}
 				}
 			});
+
+			this.m_ui_input = input;
 		}
 		else {
 			this.m_ui_input = new Component( { 
@@ -162,7 +216,9 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 						cls: 'gadget',
 						icon: 'var( --x4-icon-angle-down )',
 						tabIndex: false,
-						click: () => this.showPopup(),
+						click: () => {
+							this.showPopup( false )
+						},
 						dom_events: {
 							focus: () => { this.dom.focus(); },
 						}
@@ -188,11 +244,21 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	 * display the popup 
 	 */
 
-	showPopup() {
+	showPopup( filter_items: boolean = true ) {
 
 		let props = this.m_props;
 		if (props.readOnly || this.hasClass("@disable") ) {
-			return;
+			return null;
+		}
+
+		let items = props.items;
+		if( isFunction( items ) ) {
+			const filter = filter_items ? (this.m_ui_input as Input).value : null;
+			items = items( filter );
+		}
+		
+		if( items.length==0 ) {
+			return null;
 		}
 
 		// need creation ?
@@ -205,10 +271,17 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 			// prepare the combo listview
 			this.m_popup = new PopupListView({
 				cls: '@combo-popup',
-				items: props.items,
 				populate: props.populate,
 				renderItem: this.m_props.renderer,
-				selectionChange: (e) => this._selectItem(e),
+				selectionChange: (e) => {
+
+					this._selectItem(e);
+					
+					if (!this.m_lockpop) {
+                        this._hidePopup();
+                        this.focus();
+                    }
+				},
 				cancel: ( e ) => this.signal( 'cancel', e ),
 				style: {
 					fontFamily,
@@ -216,6 +289,8 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 				}
 			});
 		}
+
+		this.m_popup.items = items;
 	
 		let r1 = this.m_ui_button.getBoundingRect(),
 			r2 = this.m_ui_input.getBoundingRect();
@@ -225,10 +300,14 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 		});
 
 		this.m_popup.displayAt(r2.left, r2.bottom);
+		this.m_popvis = true;
+		this.startTimer("focus-check", 100, true, () => this._checkFocus());
 
 		if( this.value!==undefined ) {
 			this.m_popup.selection = this.value;
 		}
+
+		return items;
 	}
 
 	/** @ignore
@@ -241,8 +320,10 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 			return;
 		}
 
+		this.m_lockchg = true;
 		this._setInput( item, true );
-
+		this.m_lockchg = false;
+					
 		this.m_selection = {
 			id: 	item.id,
 			text: 	item.text
@@ -250,9 +331,8 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 
 		this.emit( 'selectionChange', EvSelectionChange( item ) );
 		this.emit( 'change', EvChange(item.id) );
-		this.m_ui_input.focus( );
-
-		this.m_popup.hide( );
+		//this.m_ui_input.focus( );
+		//this.m_popup.hide( );
 	}
 
 	/**
@@ -294,7 +374,15 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 	}
 
 	public get valueText( ) {
-		return this.m_selection ? this.m_selection.text : undefined;
+		if( this.m_selection ) {
+			return this.m_selection.text;
+		}
+
+		if( this.m_props.editable ) {
+			return (this.m_ui_input as Input).value;
+		}
+
+		return '';
 	}
 
 	/**
@@ -305,9 +393,9 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 		let items = this.m_props.items;
 
 		if( isFunction(items) ) {
-			items = items( );
+			items = items( null );
 		}
-
+		
 		const found = items.some( (v) => {
 			if (v.id === id) {
 				this._setInput( v );
@@ -326,6 +414,27 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 		return this.m_ui_input instanceof Input ? this.m_ui_input : null;
 	}
 
+	_checkFocus() {
+        const focus = document.activeElement;
+        if (this.dom && this.dom.contains(focus) || focus==document.body ) {
+            return;
+        }
+
+        if (this.m_popup && this.m_popup.dom && this.m_popup.dom.contains(focus)) {
+            return;
+        }
+
+        this._hidePopup();
+    }
+
+	_hidePopup() {
+        if (this.m_popvis) {
+            this.m_popup.close();
+            this.m_popvis = false;
+			this.stopTimer("focus-check");
+        }
+    }
+	
 	static storeProxy( props: ComboStoreProxyProps ): PopulateItems { 
 
 		let view: DataView = props.store instanceof DataStore ? props.store.createView() : props.store;
@@ -343,20 +452,14 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
 			return result;
 		};
 	} 
-}
 
-
-
-/*
- export type CBComboBoxRenderer = ( rec: Record ) => string;
-export interface ComboBoxStore {
-	store: DataStore;
-	display: string | CBComboBoxRenderer;		// if string, the field name to display
+	focus( ) {
+		if( this.m_props.editable ) {
+			this.m_ui_input.focus( );
+		}
+		else {
+			super.focus( );
+		}
+	}
 }
 
-*/
-
-
-
-
-

package/lib/src/label.ts

@@ -28,7 +28,7 @@
 **/
 
 import { Component, CProps } from './component'
-import { HtmlString } from './tools'
+import { escapeHtml, HtmlString } from './tools'
 import { Icon, IconID } from './icon'
 
 // ============================================================================
@@ -69,7 +69,7 @@ export class Label extends Component<LabelProps>
 
 		let text: any = this.m_props.text;
 		if( this.m_props.multiline && !(text instanceof HtmlString) ) {
-			text = new HtmlString( (text as string).replace( /\n/g, '<br/>' ) );
+			text = new HtmlString( escapeHtml(text,true) );
 		}
 
 		if( !props.icon ) {
@@ -102,7 +102,7 @@ export class Label extends Component<LabelProps>
 
 			let text: any = this.m_props.text;
 			if( this.m_props.multiline && !(text instanceof HtmlString) ) {
-				text = new HtmlString( (text as string).replace( '/\n/g', '<br/>' ) );
+				text = new HtmlString(escapeHtml(text,true) );
 			}
 
 			if( this.dom ) {

package/lib/src/listview.ts

@@ -62,7 +62,7 @@ export interface RenderListItem {
  * callback to fill the list
  */
 export interface PopulateItems {
-	(): ListViewItem[];
+	( filter: string ): ListViewItem[];
 }
 
 /**
@@ -137,7 +137,7 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 			this._buildItems();
 		}
 		else if( this.m_props.populate ) {
-			this.items = this.m_props.populate( );
+			this.items = this.m_props.populate( null );
 		}
 	}
 
@@ -449,6 +449,9 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 	/** @ignore */
 	private _handleClick(e: MouseEvent) {
 
+		e.stopImmediatePropagation();
+		e.preventDefault( );
+		
 		let dom = e.target as HTMLElement,
 			self = this.dom,
 			list_items = this.m_props.items as ListViewItem[];	// already created by build

package/lib/src/messagebox.ts

@@ -105,6 +105,27 @@ export class MessageBox extends Dialog<MessageBoxProps>
 		return msg;
 	}
 
+	static async showAsync( props: string | HtmlString | MessageBoxProps): Promise<string> {
+		return new Promise( (resolve, reject ) => {
+			
+			let _props: MessageBoxProps;
+
+			const cb = ( btn: string ) => {
+				resolve( btn );
+			}
+
+			if (isString(props) || isHtmlString(props)) {
+				_props = { message: props, click: cb };
+			}
+			else {
+				_props = { ...props, click: cb };
+			}
+
+			const msg = new MessageBox(_props);
+			msg.show();
+		});
+	}
+
 	/**
 	 * display an alert message
 	 */

package/lib/src/popup.ts

@@ -185,9 +185,9 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap =
 	* @param y 
 	*/
 
-	public displayAt(x: number, y: number, align: string = 'top left', offset?: { x, y }) {
+	public displayAt(x: number, y: number, align: string = 'top left', offset?: { x, y }, modal = false ) {
 
-		this.show();
+		this.show( modal );
 
 		let halign = 'l',
 			valign = 't';

package/lib/src/tools.ts

@@ -346,7 +346,7 @@ export function sprintf(format: string, ...args) {
  */
 export function escapeHtml(unsafe: string, nl_br = false): string {
 	if (!unsafe || unsafe.length == 0) {
-		return unsafe;
+		return "";
 	}
 
 	let result = unsafe.replace(/[<>\&\"\']/g, function (c) {

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

package/lib/types/calendar.d.ts

@@ -29,6 +29,7 @@
 import { Popup } from './popup';
 import { CProps, ContainerEventMap } from './component';
 import { EvChange, EventCallback } from './x4events';
+import { Point } from "./tools";
 import { VLayout } from './layout';
 interface CalendarEventMap extends ContainerEventMap {
     change?: EvChange;
@@ -74,7 +75,7 @@ export declare class PopupCalendar extends Popup {
     constructor(props: CalendarProps);
     private _handleClick;
     /** @ignore */
-    show(modal?: boolean): void;
+    show(modal?: boolean, at?: Point): void;
     /** @ignore */
     close(): void;
 }

package/lib/types/combobox.d.ts

@@ -33,7 +33,7 @@ import { Component, CProps, ContainerEventMap } from './component';
 import { EvChange, EvSelectionChange, EventCallback } from './x4events';
 import { Input } from './input';
 import { HLayout } from './layout';
-import { ListViewItem, PopulateItems, EvCancel } from './listview';
+import { ListViewItem, EvCancel, PopulateItems } from './listview';
 import { DataStore, DataView, Record } from './datastore';
 import { HtmlString } from './tools';
 export interface ComboStoreProxyProps {
@@ -55,11 +55,11 @@ export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
     label?: string;
     labelWidth?: number;
     labelAlign?: 'left' | 'right';
-    items?: ListViewItem[];
-    populate?: PopulateItems;
+    items?: ListViewItem[] | PopulateItems;
     value?: any;
     renderer?: ComboItemRender;
     selectionChange?: EventCallback<EvSelectionChange>;
+    editable?: boolean;
 }
 /**
  * @review use textedit
@@ -68,9 +68,12 @@ export declare class ComboBox extends HLayout<ComboBoxProps, ComboBoxEventMap> {
     private m_ui_input;
     private m_ui_button;
     private m_popup;
+    private m_lockpop;
+    private m_lockchg;
+    private m_popvis;
     private m_selection;
-    private m_defer_sel;
     constructor(props: ComboBoxProps);
+    _onKey(e: any): void;
     set items(items: ListViewItem[]);
     /** @ignore */
     render(props: ComboBoxProps): void;
@@ -78,7 +81,7 @@ export declare class ComboBox extends HLayout<ComboBoxProps, ComboBoxEventMap> {
     /**
      * display the popup
      */
-    showPopup(): void;
+    showPopup(filter_items?: boolean): ListViewItem[];
     /** @ignore
       */
     private _selectItem;
@@ -96,6 +99,9 @@ export declare class ComboBox extends HLayout<ComboBoxProps, ComboBoxEventMap> {
      */
     set value(id: any);
     get input(): Input;
+    _checkFocus(): void;
+    _hidePopup(): void;
     static storeProxy(props: ComboStoreProxyProps): PopulateItems;
+    focus(): void;
 }
 export {};

package/lib/types/listview.d.ts

@@ -52,7 +52,7 @@ export interface RenderListItem {
  * callback to fill the list
  */
 export interface PopulateItems {
-    (): ListViewItem[];
+    (filter: string): ListViewItem[];
 }
 /**
  * listview can generate these events

package/lib/types/messagebox.d.ts

@@ -46,6 +46,7 @@ export declare class MessageBox extends Dialog<MessageBoxProps> {
      * display a messagebox
      */
     static show(props: string | HtmlString | MessageBoxProps): MessageBox;
+    static showAsync(props: string | HtmlString | MessageBoxProps): Promise<string>;
     /**
      * display an alert message
      */

package/lib/types/popup.d.ts

@@ -62,7 +62,7 @@ export declare class Popup<P extends PopupProps = PopupProps, E extends PopupEve
     displayAt(x: number, y: number, align?: string, offset?: {
         x: any;
         y: any;
-    }): void;
+    }, modal?: boolean): void;
     /**
      * close the popup
      */

package/lib/types/version.d.ts

@@ -26,4 +26,4 @@
 * 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 const x4js_version = "1.5.5";
+export declare const x4js_version = "1.5.7";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.5.5",
+	"version": "1.5.7",
 	"description": "X4js core files",
 	"main": "lib/cjs/index.js",
 	"types": "lib/types/index.d.ts",