x4js 1.5.29 → 1.5.32

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

@@ -31,6 +31,7 @@ import { Component, CProps, Flex, Separator } from './component'
 import { HLayout, VLayout } from './layout'
 import { Button } from './button'
 import { CardView, CardViewProps, ICardViewItem } from './cardview'
+import { Image } from './image';
 
 export interface SideBarItem extends ICardViewItem {
 }
@@ -38,6 +39,7 @@ export interface SideBarItem extends ICardViewItem {
 export interface SideBarProps extends CardViewProps {
 	bar_sizable?: boolean;
 	bar_width?: number;
+	logo?: Image;
 }
 
 /**
@@ -74,7 +76,10 @@ export class SideBarView extends CardView<SideBarProps> {
 		this.m_sidebar.setContent( new VLayout( {
 			flex: 1,
 			cls: 'content',
-			content: tabs
+			content: [
+				this.m_props.logo,
+				...tabs
+			]
 		}) );
 
 		this.setContent( [

package/lib/src/svgcomponent.ts

@@ -135,7 +135,7 @@ abstract class SVGItem {
 		
 		if (value === undefined || value==='' || value===undefined ) {
 			this.m_style.delete( name );
-			return;
+			return this;
 		}
 		
 		if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
@@ -204,7 +204,7 @@ abstract class SVGItem {
 	 * 
 	 */
 
-	clip( id: string ) {
+	clip( id: string ): this {
 		this.attr( "clip-path", `url(#${id})` );
 		return this;
 	}
@@ -213,24 +213,28 @@ abstract class SVGItem {
 	 * 
 	 */
 
-	transform( tr: string ) {
+	transform( tr: string ): this {
 		this.attr( "transform", tr );
+		return this;
 	}
 
 	/**
 	 * 
 	 */
 
-	rotate( deg: number, cx: number, cy: number ) {
+	rotate( deg: number, cx: number, cy: number ): this {
 		this.transform( `rotate( ${deg} ${cx} ${cy} )` );
+		return this;
 	}
 
-	translate( dx: number, dy: number ) {
+	translate( dx: number, dy: number ): this {
 		this.transform( `translate( ${dx} ${dy} )` );
+		return this;
 	}
 
-	scale( x: number ) {
+	scale( x: number ): this {
 		this.transform( `scale( ${x} )` );
+		return this;
 	}
 }
 
@@ -471,6 +475,12 @@ class SVGGroup extends SVGItem {
 		return shape;
 	}
 
+	group( ) {
+		const group = new SVGGroup( );
+		this.m_items.push( group );
+		return group;
+	}
+
 	/**
 	 * 
 	 * example

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.32";

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;
     /**
      *
      */
@@ -339,7 +340,7 @@ export declare class Component<P extends CProps<CEventMap> = CProps<CEventMap>,
      * this.setDomEvent( 'drag drop', this._handleDrag, this );
      * this.setDomEvent( 'dblclick', this._handleDblClick, this );
      */
-    setDomEvent<K extends keyof X4ElementEventMap>(type: K, listener: (this: HTMLDivElement, ev: X4ElementEventMap[K]) => void): void;
+    setDomEvent<K extends keyof X4ElementEventMap>(type: K, listener: (this: HTMLDivElement, ev: X4ElementEventMap[K]) => void, passive?: boolean): void;
     private _setDomEvent;
     /**
      *
@@ -350,7 +351,7 @@ export declare class Component<P extends CProps<CEventMap> = CProps<CEventMap>,
      * @param name
      * @param handler
      */
-    createEvent(name: string, handler: Function): void;
+    private _createEvent;
     /**
      * dispatch a dom event to the appropriated component
      * called by the system

package/lib/types/datastore.d.ts

@@ -216,16 +216,16 @@ export interface DataProxyProps extends BaseComponentProps<DataEventMap> {
 }
 export declare class DataProxy extends BaseComponent<DataProxyProps, DataEventMap> {
     constructor(props: DataProxyProps);
-    load(url?: string): void;
-    private _refresh;
+    load(url?: string): Promise<void>;
 }
 /**
  *
  */
-interface DataStoreProps extends BaseComponentProps<DataStoreEventMap> {
-    model: Record;
-    data?: Record[];
+interface DataStoreProps<T extends Record> extends BaseComponentProps<DataStoreEventMap> {
+    model: T;
+    data?: T[];
     url?: string;
+    autoload?: false;
 }
 interface DataStoreEventMap extends EventMap {
     data_change: EvDataChange;
@@ -233,19 +233,19 @@ interface DataStoreEventMap extends EventMap {
 /**
  *
  */
-export declare class DataStore extends EventSource<DataStoreEventMap> {
-    protected m_model: Record;
+export declare class DataStore<T extends Record = Record> extends EventSource<DataStoreEventMap> {
+    protected m_model: T;
     protected m_fields: FieldInfo[];
-    protected m_records: Record[];
+    protected m_records: T[];
     protected m_proxy: DataProxy;
     protected m_rec_index: DataIndex;
-    constructor(props: DataStoreProps);
+    constructor(props: DataStoreProps<T>);
     /**
      *
      * @param records
      */
-    load(url?: string): void;
-    reload(): void;
+    load(url?: string): Promise<void>;
+    reload(): Promise<void>;
     /**
      * convert raw objects to real records from model
      * @param records
@@ -255,17 +255,17 @@ export declare class DataStore extends EventSource<DataStoreEventMap> {
      * just set the records
      * @param records - must be of the same type as model
      */
-    setRawData(records: any[]): void;
+    setRawData(records: T[]): void;
     private _rebuildIndex;
     /**
      *
      */
-    update(rec: Record): boolean;
+    update(rec: T): boolean;
     /**
      *
      * @param data
      */
-    append(rec: Record | any): void;
+    append(rec: T | any): void;
     /**
      *
      */
@@ -291,19 +291,19 @@ export declare class DataStore extends EventSource<DataStoreEventMap> {
      * return the record by it's id
      * @returns record or null
      */
-    getById(id: any): Record;
+    getById(id: any): T;
     /**
      * return a record by it's index
      * @returns record or null
      */
-    getByIndex(index: number): Record;
+    getByIndex(index: number): T;
     private _getRecord;
-    moveTo(other: DataStore): void;
+    moveTo(other: DataStore<T>): void;
     /**
      * create a new view on the DataStore
      * @param opts
      */
-    createView(opts?: DataViewProps): DataView;
+    createView(opts?: DataViewProps<T>): DataView<T>;
     /**
      *
      */
@@ -312,8 +312,8 @@ export declare class DataStore extends EventSource<DataStoreEventMap> {
     /**
      *
      */
-    forEach(cb: (rec: Record, index: number) => any): void;
-    export(): Record[];
+    forEach(cb: (rec: T, index: number) => any): void;
+    export(): T[];
     changed(): void;
 }
 export interface EvViewChange extends BasicEvent {
@@ -323,8 +323,8 @@ export declare function EvViewChange(action: 'filter' | 'sort' | 'change'): EvVi
 interface DataViewEventMap extends BaseComponentEventMap {
     view_change: EvViewChange;
 }
-interface DataViewProps extends BaseComponentProps<DataViewEventMap> {
-    store?: DataStore;
+interface DataViewProps<T extends Record> extends BaseComponentProps<DataViewEventMap> {
+    store?: DataStore<T>;
     filter?: FilterInfo;
     order?: string | SortProp[] | SortProp;
 }
@@ -344,12 +344,12 @@ export interface SortProp {
  * You can sort the columns & filter data
  * You can have multiple views for a single DataStore
  */
-export declare class DataView extends BaseComponent<DataViewProps, DataViewEventMap> {
+export declare class DataView<T extends Record = Record> extends BaseComponent<DataViewProps<T>, DataViewEventMap> {
     protected m_index: DataIndex;
-    protected m_store: DataStore;
+    protected m_store: DataStore<T>;
     protected m_sort: SortProp[];
     protected m_filter: FilterInfo;
-    constructor(props: DataViewProps);
+    constructor(props: DataViewProps<T>);
     private _storeChange;
     /**
      *
@@ -367,7 +367,7 @@ export declare class DataView extends BaseComponent<DataViewProps, DataViewEvent
     /**
      *
      */
-    get store(): DataStore;
+    get store(): DataStore<T>;
     /**
      *
      */
@@ -381,16 +381,16 @@ export declare class DataView extends BaseComponent<DataViewProps, DataViewEvent
      *
      * @param index
      */
-    getByIndex(index: number): Record;
+    getByIndex(index: number): T;
     /**
      *
      * @param id
      */
-    getById(id: any): Record;
+    getById(id: any): T;
     changed(): void;
     /**
      *
      */
-    forEach(cb: (rec: Record, index: number) => any): void;
+    forEach(cb: (rec: T, index: number) => any): void;
 }
 export {};

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

@@ -29,11 +29,13 @@
 import { Component } from './component';
 import { VLayout } from './layout';
 import { CardView, CardViewProps, ICardViewItem } from './cardview';
+import { Image } from './image';
 export interface SideBarItem extends ICardViewItem {
 }
 export interface SideBarProps extends CardViewProps {
     bar_sizable?: boolean;
     bar_width?: number;
+    logo?: Image;
 }
 /**
  *

package/lib/types/svgcomponent.d.ts

@@ -87,13 +87,13 @@ declare abstract class SVGItem {
     /**
      *
      */
-    transform(tr: string): void;
+    transform(tr: string): this;
     /**
      *
      */
-    rotate(deg: number, cx: number, cy: number): void;
-    translate(dx: number, dy: number): void;
-    scale(x: number): void;
+    rotate(deg: number, cx: number, cy: number): this;
+    translate(dx: number, dy: number): this;
+    scale(x: number): this;
 }
 /**
  *
@@ -173,6 +173,7 @@ declare class SVGGroup extends SVGItem {
     text(x: any, y: any, txt: any): SVGText;
     ellipse(x: any, y: any, r1: any, r2?: any): SVGShape;
     rect(x: any, y: any, w: any, h: any): SVGShape;
+    group(): SVGGroup;
     /**
      *
      * example

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.32";

package/package.json

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