x4js 1.5.4 → 1.5.6

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/gridview.ts

@@ -40,7 +40,7 @@ import { HLayout, VLayout } from './layout'
 import { Component, ContainerEventMap, EvSize, EvDblClick, CProps, flyWrap, html, HtmlString, SizerOverlay, Flex } from './component'
 import { Label } from './label'
 import { _tr } from './i18n'
-import * as Formatters from './formatters'
+import { FormatFunc } from './formatters'
 import { downloadData, isFunction } from './tools'
 import { DataView, DataStore, Record } from './datastore'
 
@@ -71,7 +71,7 @@ export interface GridColumn {
 	flex?: number;
 	align?: 'left' | 'center' | 'right';
 	renderer?: CellRenderer;
-	formatter?: Formatters.FormatFunc;
+	formatter?: FormatFunc;
 	cls?: string;
 	sortable?: boolean;
 }

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/radiobtn.ts

@@ -28,6 +28,7 @@
 **/
 
 import { x4document } from './x4dom'
+import { HtmlString } from './tools'
 
 import { Component, CProps, CEventMap } from './component'
 import { EvChange, EventCallback } from './x4events'
@@ -185,11 +186,11 @@ export class RadioBtn extends Component<RadioBtnProps,RadioBtnEventMap> {
 		}
 	}
 
-	get text( ) {
+	get text( ): HtmlString | string {
 		return this.itemWithRef<Label>('label').text;
 	}
 
-	set text( text ) {
+	set text( text: HtmlString | string ) {
 		this.itemWithRef<Label>('label').text = text;
 	}
 }

package/lib/src/spreadsheet.ts

@@ -33,7 +33,7 @@ import { Component, SizerOverlay, EvDblClick, EvSize, ContainerEventMap, Contain
 import { Input, InputProps } from './input';
 import { HLayout, VLayout } from './layout';
 import { TextEditProps, TextEdit } from './textedit';
-import * as Formatters from './formatters';
+import { FormatFunc } from './formatters'
 import { asap, parseIntlFloat } from './tools';
 import { deferCall } from './tools';
 import { EvContextMenu, EvChange, EvSelectionChange, EventCallback } from './x4events'
@@ -56,7 +56,7 @@ export interface ColProp {
 	align?: string;
 	cls?: string;
 	min_width?: number;
-	renderer?: Formatters.FormatFunc;
+	renderer?: FormatFunc;
 	createEditor?: EditorFactory;		// null => disable edition
 }
 

package/lib/src/tabbar.ts

@@ -145,7 +145,7 @@ export class TabBar extends Container<TabBarProps,TabBarEventMap> {
 		}
 	}
 
-	get selection( ) {
+	get selection( ): Component {
 		return this.m_curPage?.page;
 	}
 }

package/lib/src/textedit.ts

@@ -30,7 +30,7 @@
 import { x4document } from './x4dom'
 
 import { Component, EvFocus, HtmlString } from './component'
-import { Input, InputProps, InputEventMap } from './input'
+import { Input, InputProps, InputEventMap, EditType } from './input'
 import { IconID } from './icon'
 import { Button } from './button'
 import { HLayout } from './layout'
@@ -538,7 +538,7 @@ export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEdi
 		return this.m_ui_input;
 	}
 
-	get type() {
+	get type(): EditType {
 		return this.m_props.type;
 	}
 }

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

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/gridview.d.ts

@@ -29,7 +29,7 @@
 import { VLayout } from './layout';
 import { Component, ContainerEventMap, EvDblClick, CProps, HtmlString } from './component';
 import { Label } from './label';
-import * as Formatters from './formatters';
+import { FormatFunc } from './formatters';
 import { DataView, DataStore, Record } from './datastore';
 import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4events";
 export interface EvGridCheck extends BasicEvent {
@@ -47,7 +47,7 @@ export interface GridColumn {
     flex?: number;
     align?: 'left' | 'center' | 'right';
     renderer?: CellRenderer;
-    formatter?: Formatters.FormatFunc;
+    formatter?: FormatFunc;
     cls?: string;
     sortable?: boolean;
 }

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/radiobtn.d.ts

@@ -26,6 +26,7 @@
 * 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 { HtmlString } from './tools';
 import { Component, CProps, CEventMap } from './component';
 import { EvChange, EventCallback } from './x4events';
 import { IconID } from './icon';
@@ -66,7 +67,7 @@ export declare class RadioBtn extends Component<RadioBtnProps, RadioBtnEventMap>
      * @param {boolean} ck new checked value
      */
     set check(ck: boolean);
-    get text(): string | import("./tools").HtmlString;
-    set text(text: string | import("./tools").HtmlString);
+    get text(): HtmlString | string;
+    set text(text: HtmlString | string);
 }
 export {};

package/lib/types/spreadsheet.d.ts

@@ -29,7 +29,7 @@
 import { Component, EvDblClick, ContainerEventMap, ContainerProps } from './component';
 import { InputProps } from './input';
 import { VLayout } from './layout';
-import * as Formatters from './formatters';
+import { FormatFunc } from './formatters';
 import { EvContextMenu, EvChange, EvSelectionChange, EventCallback } from './x4events';
 export interface EditorFactory {
     (props: InputProps, row: number, col: number): Component;
@@ -44,7 +44,7 @@ export interface ColProp {
     align?: string;
     cls?: string;
     min_width?: number;
-    renderer?: Formatters.FormatFunc;
+    renderer?: FormatFunc;
     createEditor?: EditorFactory;
 }
 /**

package/lib/types/tabbar.d.ts

@@ -53,6 +53,6 @@ export declare class TabBar extends Container<TabBarProps, TabBarEventMap> {
     render(): void;
     select(id: string | null, notify?: boolean): boolean;
     private _select;
-    get selection(): Component<CProps<import("./component").CEventMap>, import("./component").CEventMap>;
+    get selection(): Component;
 }
 export {};

package/lib/types/textedit.d.ts

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 import { Component, EvFocus, HtmlString } from './component';
-import { Input, InputProps, InputEventMap } from './input';
+import { Input, InputProps, InputEventMap, EditType } from './input';
 import { IconID } from './icon';
 import { EvClick, EvChange, EventCallback } from './x4events';
 type ValidationFunction = (value: string) => string;
@@ -118,6 +118,6 @@ export declare class TextEdit<T extends TextEditProps = TextEditProps, E extends
     _date_validator(value: string): string;
     private _showDatePicker;
     get input(): Input;
-    get type(): import("./input").EditType;
+    get type(): EditType;
 }
 export {};

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.2";
+export declare const x4js_version = "1.5.6";

package/package.json

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