x4js 1.5.29 → 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
 }
 
 /**
@@ -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/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);
@@ -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

@@ -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 } )
 	}
 
 }

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-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( );
 	}
 
 	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;
 		}

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

package/lib/src/x4.less

@@ -665,11 +665,9 @@ textarea {
 		padding-right: 2px;
 	}
 
-	&.x-error {
-		input {
-			border-bottom: none;
-			border-left: 4px solid var( --x4-error-color );
-		}
+	input.x-error {
+		border-bottom: none;
+		border-left: 4px solid var( --x4-error-color );
 	}
 }
 

package/lib/styles/x4.css

@@ -552,8 +552,8 @@ textarea::selection {
   content: '*';
   padding-right: 2px;
 }
-.x-text-edit.x-error input,
-.x-combo-box.x-error input {
+.x-text-edit input.x-error,
+.x-combo-box input.x-error {
   border-bottom: none;
   border-left: 4px solid var(--x4-error-color);
 }

package/lib/styles/x4.less

@@ -665,11 +665,9 @@ textarea {
 		padding-right: 2px;
 	}
 
-	&.x-error {
-		input {
-			border-bottom: none;
-			border-left: 4px solid var( --x4-error-color );
-		}
+	input.x-error {
+		border-bottom: none;
+		border-left: 4px solid var( --x4-error-color );
 	}
 }
 

package/lib/types/autocomplete.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 { RenderListItem } from "./listview";
 import { TextEdit, TextEditProps } from './textedit';
 /**
  *
@@ -33,6 +34,7 @@ import { TextEdit, TextEditProps } from './textedit';
 interface AutoCompleteProps extends TextEditProps {
     enumValues: (filter: string) => string[] | Promise<string[]>;
     selectValue?: (text: string) => string;
+    renderItem?: RenderListItem;
 }
 /**
  *
@@ -46,7 +48,7 @@ export declare class AutoComplete extends TextEdit<AutoCompleteProps> {
     _onKey(e: KeyboardEvent): void;
     private _onChange;
     componentDisposed(): void;
-    showPopup(): void;
+    showPopup(show?: boolean): void;
     /**
      * display the popup
      */
@@ -56,5 +58,6 @@ export declare class AutoComplete extends TextEdit<AutoCompleteProps> {
     private _checkFocus;
     private _hidePopup;
     private _onFocus;
+    isPopupVisible(): boolean;
 }
 export {};

package/lib/types/combobox.d.ts

@@ -70,7 +70,6 @@ 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[]);

package/lib/types/component.d.ts

@@ -163,6 +163,7 @@ export declare class Component<P extends CProps<CEventMap> = CProps<CEventMap>,
      * @param content
      */
     appendChild(content: ComponentContent): void;
+    removeChild(item: Component): void;
     /**
      *
      */

package/lib/types/input.d.ts

@@ -55,19 +55,25 @@ export interface InputProps<P extends InputEventMap = InputEventMap> extends CPr
  * CARE derived classes must set this.ui.input
  */
 export declare class Input extends Component<InputProps, InputEventMap> {
+    private m_error_tip;
     constructor(props: InputProps);
+    componentDisposed(): void;
     /** @ignore */
     render(props: InputProps): void;
+    showError(text: string): void;
+    clearError(): void;
     getType(): EditType;
     /**
      * return the current editor value
      */
     get value(): string;
+    getValue(): string;
     /**
      * Change the editor value
      * @param value - new value to set
      */
     set value(value: string);
+    setValue(value: string): void;
     getStoreValue(): any;
     setStoreValue(v: any): void;
     set readOnly(ro: boolean);

package/lib/types/router.d.ts

@@ -61,7 +61,7 @@ export declare class Router extends EventSource<RouterEventMap> {
     get(uri: string | RegExp, handler: RouteHandler): void;
     init(): void;
     private _getLocation;
-    navigate(uri: string, notify?: boolean): void;
+    navigate(uri: string, notify?: boolean, replace?: boolean): void;
     private _find;
 }
 export {};

package/lib/types/textedit.d.ts

@@ -59,10 +59,8 @@ export interface TextEditProps extends InputProps<TextEditEventMap> {
 export declare class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEditEventMap = TextEditEventMap> extends Component<T, E> {
     private m_cal_popup;
     protected m_ui_input: Input;
-    private m_error_tip;
     constructor(props: T);
     componentCreated(): void;
-    componentDisposed(): void;
     focus(): void;
     /** @ignore */
     render(props: TextEditProps): void;
@@ -82,7 +80,12 @@ export declare class TextEdit<T extends TextEditProps = TextEditProps, E extends
     showError(text: string): void;
     clearError(): void;
     get value(): string;
+    getValue(): string;
+    /**
+     *
+     */
     set value(value: string);
+    setValue(value: string): void;
     /**
      * select all the text
      */

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

package/package.json

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