x4js 2.0.18 → 2.0.21

package/src/components/boxes/boxes.ts

@@ -14,11 +14,11 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { asap, class_ns, isArray, isNumber, isString } from '@core/core_tools.js';
+import { asap, class_ns, isArray, isNumber, isString } from '../../core/core_tools';
 import { Component, ComponentContent, ComponentEvents, ComponentProps, EvSelectionChange } from "../../core/component"
 
 import "./boxes.module.scss";
-import { EventCallback } from '@core/core_events.js';
+import { EventCallback } from '../../core/core_events';
 
 export interface BoxProps extends ComponentProps {
 	tag?: string;
@@ -122,6 +122,18 @@ export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeB
 		});
 	}
 
+	removeItem( name: string ) {
+		const index = this._items.findIndex( x => x.name==name );
+		if( index>=0 ) {
+			const pg = this._items[index];
+			if( pg?.page ) {
+				this.removeChild( pg.page );
+			}
+
+			this._items.splice( index, 1 );
+		}
+	}
+
 	select( name: string ) {
 		let sel = this.query( `:scope > .selected` );
 		if( sel ) {
@@ -143,7 +155,7 @@ export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeB
 				sel.setClass( "selected", true );
 			}
 
-			asap( ( ) => this.fire( "pageChange", { selection: pg.name, empty: !sel } ) );
+			asap( ( ) => this.fire( "pageChange", { selection: [pg.name], empty: !sel } ) );
 		}
 
 		return pg?.page;
@@ -177,6 +189,26 @@ export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeB
 		return pg ? pg.content : null;
 	}
 
+	/**
+	 * 
+	 */
+
+	getPageCount( ) {
+		return this._items.length;
+	}
+
+	/**
+	 * 
+	 */
+
+	enumPageNames( ) {
+		return this._items.map( x => x.name );
+	}
+
+	/**
+	 * 
+	 */
+
 	getItem( name: string ) {
 		const pg = this._items.find( x => x.name==name );
 		return pg;

package/src/components/breadcrumb/breadcrumb.ts

@@ -14,12 +14,12 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '@core/core_tools.js';
-import { parseRoute, Router } from '@core/core_router.js';
+import { class_ns } from '../../core/core_tools';
+import { parseRoute, Router } from '../../core/core_router';
 
 import { BoxProps, Button, HBox, Icon } from '../components';
-import { Component, ComponentEvents, EvClick } from '@core/component.js';
-import { EventCallback } from '@core/core_events.js';
+import { Component, ComponentEvents, EvClick } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
 
 import "./breadcrumb.scss"
 

package/src/components/btngroup/btngroup.ts

@@ -20,12 +20,12 @@ import { class_ns, isString } from '../../core/core_tools';
 import { _tr } from '../../core/core_i18n'
 
 import { Button } from '../button/button';
-import { Box } from '../boxes/boxes.js';
-import { Label } from '../label/label.js';
-import { EvBtnClick } from '../dialog/dialog.js';
+import { Box } from '../boxes/boxes';
+import { Label } from '../label/label';
+import { EvBtnClick } from '../dialog/dialog';
 
 import "./btngroup.module.scss"
-import { Input } from '../components.js';
+import { Input } from '../components';
 
 /**
  * accept "ok" or "ok.<classname>"

package/src/components/button/button.ts

@@ -15,8 +15,8 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvClick } from "../../core/component"
-import { EventCallback } from '../../core/core_events.js';
-import { class_ns, UnsafeHtml } from '../../core/core_tools.js';
+import { EventCallback } from '../../core/core_events';
+import { class_ns, UnsafeHtml } from '../../core/core_tools';
 
 import { Icon } from "../icon/icon"
 

package/src/components/calendar/calendar.ts

@@ -17,7 +17,7 @@
 import { Component, ComponentEvents, ComponentProps, EvChange, Flex } from '../../core/component'
 import { class_ns, date_clone, date_hash, formatIntlDate, Point, unsafeHtml } from "../../core/core_tools"
 import { _tr } from '../../core/core_i18n';
-import { EventCallback } from '../../core/core_events.js';
+import { EventCallback } from '../../core/core_events';
 
 import { Button } from '../button/button';
 import { Label } from '../label/label';

package/src/components/canvas/canvas.ts

@@ -14,10 +14,10 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '@core/core_tools.js';
+import { class_ns } from '../../core/core_tools';
 import { Component, ComponentEvent, ComponentEvents, ComponentProps } from '../../core/component';
 import { EventCallback } from "../../core/core_events"
-import { CanvasEx, createPainter } from './canvas_ex.js';
+import { CanvasEx, createPainter } from './canvas_ex';
 
 import './canvas.module.scss'
 

package/src/components/checkbox/checkbox.ts

@@ -1,14 +1,14 @@
-import { Component, ComponentEvents, ComponentProps, EvChange, makeUniqueComponentId } from '../../core/component.js';
-import { EventCallback } from '../../core/core_events.js';
+import { Component, ComponentEvents, ComponentProps, EvChange, makeUniqueComponentId } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
 
 import { Input } from '../input/input';
 import { Label } from '../label/label';
 
-import { svgLoader } from '../icon/icon.js';
+import { svgLoader } from '../icon/icon';
 
 import "./checkbox.module.scss"
 import icon from "./check.svg";
-import { class_ns } from '@core/core_tools.js';
+import { class_ns } from '../../core/core_tools';
 
 /**
  * Checkbox events

package/src/components/colorinput/colorinput.ts

@@ -15,12 +15,12 @@
  **/
 
 import { Component } from '../../core/component';
-import { isFeatureAvailable, class_ns } from '../../core/core_tools.js';
+import { isFeatureAvailable, class_ns } from '../../core/core_tools';
 import { Color } from '../../core/core_colors';
 
 import { BoxProps, HBox } from '../boxes/boxes';
-import { Input } from '../input/input.js';
-import { Button } from '../button/button.js';
+import { Input } from '../input/input';
+import { Button } from '../button/button';
 
 
 import "./colorinput.module.scss"

package/src/components/combobox/combobox.module.scss

@@ -26,6 +26,8 @@
 	--combobox-btn-background: inherit;
 	--combobox-btn-color: var( --text-secondary );
 	--combobox-btn-color-hover: var( --text-primary );
+
+	--combo-tree-indent: 1em;
 }
 
 .x4dropdownlist {
@@ -33,6 +35,8 @@
 	@extend .hbox;
 
 	max-height: 250px;
+	max-width: 50vw;
+	
 	position: absolute;
 	background-color: var( --dropdown-background );
 	border: 1px solid var( --dropdown-border );
@@ -47,6 +51,15 @@
 
 		.x4item {
 			white-space: nowrap;
+			
+			&.level-1 { padding-left: calc(var(--combo-tree-indent) * 1 ); }
+			&.level-2 { padding-left: calc(var(--combo-tree-indent) * 2 ); }
+			&.level-3 { padding-left: calc(var(--combo-tree-indent) * 3 ); }
+			&.level-4 { padding-left: calc(var(--combo-tree-indent) * 4 ); }
+			&.level-5 { padding-left: calc(var(--combo-tree-indent) * 5 ); }
+			&.level-6 { padding-left: calc(var(--combo-tree-indent) * 6 ); }
+			&.level-7 { padding-left: calc(var(--combo-tree-indent) * 7 ); }
+			&.level-8 { padding-left: calc(var(--combo-tree-indent) * 8 ); }
 		}
 	}
 }

package/src/components/combobox/combobox.ts

@@ -15,11 +15,11 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
-import { class_ns, IComponentInterface, IFormElement, kbNav } from '@core/core_tools';
-import { EventCallback } from '@core/core_events';
+import { class_ns, IComponentInterface, IFormElement, kbNav } from '../../core/core_tools';
+import { EventCallback } from '../../core/core_events';
 
 import { Listbox, ListboxID, ListItem } from '../listbox/listbox';
-import { Popup, PopupEvents, PopupProps } from '../popup/popup.js';
+import { Popup, PopupEvents, PopupProps } from '../popup/popup';
 import { Label } from '../label/label';
 import { Input } from '../input/input';
 import { Button } from '../button/button';
@@ -128,6 +128,9 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 
 		const _select = ( sel: ListboxID ) => {
 			const itm = list.getItem(sel);
+			if( itm ) {
+				list.select( sel, false );
+			}
 
 			//TODO: unsafehtml
 			//@ts-ignore
@@ -270,6 +273,10 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 		
 		return super.queryInterface( name );
 	}
+
+	getInput( ) {
+		return this._input;
+	}
 }
 
 

package/src/components/dialog/dialog.ts

@@ -15,14 +15,14 @@
  **/
 
 import { Form } from "../form/form.js"
-import { PopupEvents, PopupProps, Popup } from '../popup/popup.js';
+import { PopupEvents, PopupProps, Popup } from '../popup/popup';
 import { BtnGroup, BtnGroupItem } from "../btngroup/btngroup"
-import { HBox } from '../boxes/boxes.js';
-import { Label } from '../label/label.js';
-import { CoreEvent, EventCallback } from '@core/core_events.js';
-import { class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '@core/core_tools.js';
-import { ComponentEvent } from '../../core/component.js';
-import { Button } from '../button/button.js';
+import { HBox } from '../boxes/boxes';
+import { Label } from '../label/label';
+import { CoreEvent, EventCallback } from '../../core/core_events';
+import { class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
+import { ComponentEvent } from '../../core/component';
+import { Button } from '../button/button';
 
 import "./dialog.module.scss"
 import close_icon from "./xmark-sharp-light.svg";

package/src/components/form/form.ts

@@ -14,13 +14,13 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns, IFormElement } from '@core/core_tools.js';
+import { class_ns, IFormElement } from '../../core/core_tools';
 import { Box, BoxProps } from '../boxes/boxes';
 
 import "./form.module.scss"
 
 //type FormValue = string | number | boolean;
-export type FormValues = Record<string,string>;
+export type FormValues = Record<string,any>;
 
 export interface FormProps extends BoxProps {
 	autoComplete?: boolean;
@@ -81,8 +81,8 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 	 * 
 	 */
 
-	getValues( ): FormValues {
-		const result: FormValues = {}
+	getValues<T extends FormValues = FormValues>( ): T {
+		const result: any = {}
 		const items = this._get_inputs( );
 
 		items.forEach( x => {
@@ -94,7 +94,7 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 			}
 		});
 
-		return result;
+		return result as T;
 	}
 
 	/**

package/src/components/gridview/gridview.ts

@@ -17,7 +17,7 @@
 
 import { Component, ComponentContent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 import { class_ns, isNumber, isString, setWaitCursor } from '../../core/core_tools';
-import { DataModel, DataStore, DataView, DataRecord, DataFieldValue, EvViewChange } from '../../core/core_data';
+import { DataModel, DataStore, DataView, DataRecord, EvViewChange } from '../../core/core_data';
 import { EventCallback } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
 
@@ -43,7 +43,7 @@ const SCROLL_LIMIT = 200;
  * 
  */
 
-interface GridColumn {
+export interface GridColumn {
 	id: any;
 	title: string;
 	width: number;
@@ -499,14 +499,15 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 	private _sortCol(col: number, ascending?: boolean ) {
 
-		setWaitCursor(true);
-
 		// to allow cursor
 		this.setTimeout("sort", 50, () => {
 			let asc = true;
 
 			// already sorted ?
-			const scol = this.query(`.col-header [data-col="${col}"`);
+			const scol = this.query(`.col-header .cell[data-col="${col}"]`);
+			if( !scol ) {
+				return;
+			}
 
 			if( ascending===undefined ) {
 				if (scol.hasClass("sorted")) {
@@ -541,6 +542,8 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 				}
 			}
 
+			setWaitCursor(true);
+
 			this._dataview.sort([{
 				field: cdata.id,
 				ascending: asc,
@@ -828,7 +831,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			}
 		}
 
-		const maxr = this._dataview.getCount();
+		const maxr = this._dataview ? this._dataview.getCount() : 0;
 		let maxh = maxr;
 
 		if (maxr < SCROLL_LIMIT) {
@@ -874,7 +877,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 		// WHEEL
 		this.addDOMEvent("wheel", (ev: WheelEvent) => {
-			if (ev.deltaY && this._dataview.getCount() >= SCROLL_LIMIT) {
+			if (ev.deltaY && this._dataview && this._dataview.getCount() >= SCROLL_LIMIT) {
 				this._viewport.dom.scrollBy(0, ev.deltaY < 0 ? -1 : 1);
 				ev.stopPropagation();
 				ev.preventDefault();
@@ -1032,7 +1035,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			const rc = this.getBoundingRect();
 
 			// rows
-			const rowc = this._dataview.getCount();
+			const rowc = this._dataview ? this._dataview.getCount() : 0;
 			const mul = rowc < SCROLL_LIMIT ? this._row_height : 1;
 
 			const start = Math.floor(this._top / mul);
@@ -1132,7 +1135,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		});
 
 		const rec = this._dataview.getByIndex( rowid );
-		this.fire("selectionChange", { selection: rec, empty: false } );
+		this.fire("selectionChange", { selection: [rec], empty: false } );
 	}
 
 	/**

package/src/components/header/header.module.scss

@@ -3,10 +3,10 @@
 :root {
 	--header-background-hover: rgba(100,100,100,0.1);
 	--header-sizer-hover: var( --border-hover );
+	--header-color: var( --text-primary );
 }
 
 .x4header {
-	@extend .flex;
 	width: 100%;
 
 	overflow: hidden;
@@ -26,6 +26,7 @@
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
+			color: var( --header-color );
 		}
 		
 		&:hover {

package/src/components/header/header.ts

@@ -1,8 +1,8 @@
-import { class_ns } from '@core/core_tools.js';
-import { Component, ComponentProps } from '../../core/component.js';
-import { HBox } from '../boxes/boxes.js';
-import { Label } from '../label/label.js';
-import { CSizer } from '../sizers/sizer.js';
+import { class_ns } from '../../core/core_tools';
+import { Component, ComponentProps } from '../../core/component';
+import { HBox } from '../boxes/boxes';
+import { Label } from '../label/label';
+import { CSizer } from '../sizers/sizer';
 
 import "./header.module.scss"
 
@@ -15,10 +15,18 @@ interface HeaderItem {
 
 interface HeaderProps extends Omit<ComponentProps,"content"> {
 	items: HeaderItem[]
+	target?: Component;	// target element to set header col variable width var( --hdr-item-{name}-width )
 }
 
 /**
+ * by default when a header item is resized, the 'target' style '--{name}-width' is updated
+ * if you listbox has a header and 3 cols named A, B, C then in your css, use
  * 
+ * .my-listbox {
+ *    --A-width: 10px;
+ *    --B-width: 50px;
+ *    --C-width: 100px;
+ * }
  */
 
 @class_ns( "x4" )
@@ -94,13 +102,13 @@ export class Header extends HBox<HeaderProps> {
 
 		const rc = this.getBoundingRect( );
 		
-		let rest = (rc.width-filled);
+		let   rest = (rc.width-filled-10);
 		const unit = Math.ceil( rest/count );
 
-		console.log( "filled", filled );
-		console.log( "count", count );
-		console.log( "rest", rest );
-		console.log( "unit", unit );
+		//console.log( "filled", filled );
+		//console.log( "count", count );
+		//console.log( "rest", rest );
+		//console.log( "unit", unit );
 		
 		let fullw = 0;
 		this._els.forEach( c => {
@@ -116,6 +124,10 @@ export class Header extends HBox<HeaderProps> {
 			}
 
 			c.setWidth( width );
+
+			const item = c.getInternalData<HeaderItem>( 'data' );
+			this.props.target?.setStyleVariable( `--${item.name}-width`, width + "px");
+			
 			fullw += width;
 		} );
 

package/src/components/icon/icon.module.scss

@@ -19,6 +19,7 @@
 .x4icon {
 	@extend .hbox;	
 
+	flex-shrink: 0;
 	min-width: 10px;
 	height: 10px;
     overflow: hidden;

package/src/components/icon/icon.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '@core/core_tools.js';
+import { class_ns } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component';
 
 import "./icon.module.scss"

package/src/components/image/image.ts

@@ -16,8 +16,8 @@
 
 import { class_ns } from '../../core/core_tools';
 import { Component, ComponentEvents, ComponentProps } from '../../core/component';
-import { EventCallback, CoreEvent } from '../../core/core_events.js';
-import { dragManager } from '../../core/core_dragdrop.js';
+import { EventCallback, CoreEvent } from '../../core/core_events';
+import { dragManager } from '../../core/core_dragdrop';
 
 import { EvDropChange, FileDialog } from '../filedrop/filedrop';
 import { Menu } from '../menu/menu';
@@ -25,7 +25,7 @@ import { Menu } from '../menu/menu';
 
 
 import "./image.module.scss"
-import { _tr } from '@core/core_i18n.js';
+import { _tr } from '../../core/core_i18n';
 
 
 interface ImageEvents extends ComponentEvents {

package/src/components/input/input.ts

@@ -14,9 +14,9 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { EventCallback } from '@core/core_events.js';
+import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus } from '../../core/component';
-import { class_ns, formatIntlDate, IComponentInterface, IFormElement, isString } from '../../core/core_tools.js';
+import { class_ns, formatIntlDate, IComponentInterface, IFormElement, isString } from '../../core/core_tools';
 
 import "./input.module.scss"
 

package/src/components/keyboard/keyboard.ts

@@ -14,13 +14,13 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentProps, Flex } from '@core/component.js';
-import { Box, BoxProps, Button, HBox, VBox } from '../components.js';
-import { _tr } from '@core/core_i18n.js';
+import { Component, ComponentProps, Flex } from '../../core/component';
+import { Box, BoxProps, Button, HBox, VBox } from '../components';
+import { _tr } from '../../core/core_i18n';
 
 import "./keyboard.module.scss"
-import { class_ns } from '@core/core_tools.js';
-import { Application } from '@core/core_application.js';
+import { class_ns } from '../../core/core_tools';
+import { Application } from '../../core/core_application';
 
 import icon_bksp from "./delete-left.svg";
 import icon_shift from "./arrow-up.svg";

package/src/components/label/label.module.scss

@@ -20,6 +20,7 @@
 	--label-background: transparent;
 	--label-color: var( --text-ternary );
 	--label-icon-color: rgb(0 0 0 / 44%);
+	--label-color-disa: var( --disabled-color-dark );
 }
 
 .x4label {
@@ -66,11 +67,15 @@
 	}
 }
 
-
 .x4simpletext {
 	text-align: left;
 	&.al-center { text-align: center; }
 	&.al-right { text-align: right; }
 }
 
+[disabled] .x4label,
+[disabled] .x4simpletext {
+	color: var(--label-color-disa);
+}
+
 

package/src/components/label/label.ts

@@ -18,7 +18,7 @@ import { Component, ComponentProps } from "../../core/component"
 import { Icon } from "../icon/icon"
 
 import "./label.module.scss";
-import { class_ns, UnsafeHtml } from '../../core/core_tools.js';
+import { class_ns, UnsafeHtml } from '../../core/core_tools';
 
 export interface LabelProps extends ComponentProps {
 	text?: string | UnsafeHtml;