x4js 2.2.40 → 2.2.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.40",
+  "version": "2.2.42",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/assets/icons.ts

@@ -0,0 +1,10 @@
+
+const x4icons = {
+	check: `<svg viewBox="0 0 10 7" fill="none" aria-hidden="true"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+	empty: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path opacity=".4" d="M32 96l0 200.6 21.7-54.3C65.9 211.9 95.3 192 128 192l320 0 0-32c0-17.7-14.3-32-32-32l-117.5 0c-25.5 0-49.9-10.1-67.9-28.1L204.1 73.4c-6-6-14.1-9.4-22.6-9.4L64 64C46.3 64 32 78.3 32 96zM49.1 426.1c-2 4.9-1.4 10.5 1.6 14.9s7.9 7 13.2 7l320 0 80 0c6.5 0 12.4-4 14.9-10.1l64-160c2-4.9 1.4-10.5-1.6-14.9s-7.9-7-13.2-7l-400 0c-6.5 0-12.4 4-14.9 10.1l-64 160z"/><path d="M448 160l0 32 32 0 0-32c0-35.3-28.7-64-64-64L298.5 96c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0 80 0c19.6 0 37.3-11.9 44.6-30.2l64-160c5.9-14.8 4.1-31.5-4.8-44.7S543.9 224 528 224l-400 0c-19.6 0-37.3 11.9-44.6 30.2L32 382.8 32 96c0-17.7 14.3-32 32-32l117.5 0c8.5 0 16.6 3.4 22.6 9.4l22.6-22.6L204.1 73.4l26.5 26.5c18 18 42.4 28.1 67.9 28.1L416 128c17.7 0 32 14.3 32 32zM384 448L64 448c-5.3 0-10.3-2.6-13.2-7s-3.6-10-1.6-14.9l64-160c2.4-6.1 8.3-10.1 14.9-10.1l400 0c5.3 0 10.3 2.6 13.2 7s3.6 10 1.6 14.9l-64 160C476.4 444 470.5 448 464 448l-80 0z"/></svg>`,
+	radio: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" aria-hidden="true"><circle class="fa-primary" cx="2.5" cy="2.5" r="2.5" ></circle><circle class="fa-secondary" cx="2.5" cy="2.5" r="1.25"></circle></svg>`,
+	chevron: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M267.3 395.3c-6.2 6.2-16.4 6.2-22.6 0l-192-192c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L256 361.4 436.7 180.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-192 192z"/></svg>`,
+
+};
+
+export default x4icons;

package/src/components/checkbox/checkbox.ts

@@ -3,12 +3,11 @@ import { EventCallback } from '../../core/core_events';
 
 import { Input } from '../input/input';
 import { Label } from '../label/label';
+import { class_ns } from '../../core/core_tools';
 
-import { svgLoader } from '../icon/icon';
+import icons from "../assets/icons";
 
 import "./checkbox.module.scss"
-import icon from "./check.svg";
-import { class_ns } from '../../core/core_tools';
 
 /**
  * Checkbox events
@@ -76,11 +75,7 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 			} ),
 		])
 
-
-		const svg = `<svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
-					</path></svg>`
-
-		this.query<Label>( '.inner' ).dom.insertAdjacentHTML( "beforeend", svg );
+		this.query<Label>( '.inner' ).dom.insertAdjacentHTML( "beforeend", icons.check );
 		
 		/*
 		svgLoader.load( icon ).then( svg => {

package/src/components/components.ts

@@ -37,6 +37,7 @@ export * from "./slider/slider"
 export * from "./spreadsheet/spreadsheet"
 export * from "./switch/switch"
 export * from "./tabs/tabs"
+export * from "./tag/tag"
 export * from "./textarea/textarea"
 export * from "./textedit/textedit"
 export * from "./tickline/tickline"

package/src/components/gridview/gridview.ts

@@ -27,12 +27,10 @@ import { Box } from '../boxes/boxes';
 import { CSizer } from '../sizers/sizer'
 import { Viewport } from '../viewport/viewport';
 import { Label, SimpleText } from '../label/label';
+import icons from "../assets/icons"
 
 import { _tr } from '../../core/core_i18n';
 
-const check_icon  = `<svg viewBox="0 0 10 7" fill="none" aria-hidden="true"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
-const empty_icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path opacity=".4" d="M32 96l0 200.6 21.7-54.3C65.9 211.9 95.3 192 128 192l320 0 0-32c0-17.7-14.3-32-32-32l-117.5 0c-25.5 0-49.9-10.1-67.9-28.1L204.1 73.4c-6-6-14.1-9.4-22.6-9.4L64 64C46.3 64 32 78.3 32 96zM49.1 426.1c-2 4.9-1.4 10.5 1.6 14.9s7.9 7 13.2 7l320 0 80 0c6.5 0 12.4-4 14.9-10.1l64-160c2-4.9 1.4-10.5-1.6-14.9s-7.9-7-13.2-7l-400 0c-6.5 0-12.4 4-14.9 10.1l-64 160z"/><path d="M448 160l0 32 32 0 0-32c0-35.3-28.7-64-64-64L298.5 96c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0 80 0c19.6 0 37.3-11.9 44.6-30.2l64-160c5.9-14.8 4.1-31.5-4.8-44.7S543.9 224 528 224l-400 0c-19.6 0-37.3 11.9-44.6 30.2L32 382.8 32 96c0-17.7 14.3-32 32-32l117.5 0c8.5 0 16.6 3.4 22.6 9.4l22.6-22.6L204.1 73.4l26.5 26.5c18 18 42.4 28.1 67.9 28.1L416 128c17.7 0 32 14.3 32 32zM384 448L64 448c-5.3 0-10.3-2.6-13.2-7s-3.6-10-1.6-14.9l64-160c2.4-6.1 8.3-10.1 14.9-10.1l400 0c5.3 0 10.3 2.6 13.2 7s3.6 10 1.6 14.9l-64 160C476.4 444 470.5 448 464 448l-80 0z"/></svg>`;
-
 import "./gridview.module.scss"
 
 export type CellRenderer = (rec: DataRecord) => Component;
@@ -677,7 +675,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		switch (type) {
 			case "checkbox": {
 				if (data) {
-					return new Icon({ cls: "cell-check" + cls, iconId: check_icon });
+					return new Icon({ cls: "cell-check" + cls, iconId: icons.check });
 				}
 
 				return undefined;
@@ -1141,7 +1139,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 			// empty ?
 			if( rowc==0 ) {
-				this._body.setContent( new Label( { cls: "empty vertical", icon: empty_icon, text: this.props.emptyMsg ?? _tr.global.empty_list } ) );
+				this._body.setContent( new Label( { cls: "empty vertical", icon: icons.empty, text: this.props.emptyMsg ?? _tr.global.empty_list } ) );
 				return;
 			}
 

package/src/components/listbox/listbox.ts

@@ -22,15 +22,20 @@ import { ScrollView, Viewport } from '../viewport/viewport';
 import { Header } from '../header/header';
 
 import { HBox } from '../boxes/boxes';
-import { Label } from '../label/label';
+import { Label, SimpleText } from '../label/label';
+
+import { _tr } from '../../x4.js';
+import icons from '../assets/icons'
 
 import "./listbox.module.scss"
 
+
 export type ListboxID = number | string;
 
 export interface ListItem {
 	id: ListboxID;
 	text: string | UnsafeHtml;
+	sub_cols?: (string | UnsafeHtml | Component)[];	// extra columns
 
 	iconId?: string;
 	data?: any;
@@ -62,6 +67,7 @@ export interface ListboxProps extends Omit<ComponentProps,'content'> {
 	footer?: Component,
 	checkable?: true,
 	multisel?: true,
+	emptyMsg?: string,
 
 	dblClick?: EventCallback<EvDblClick>;
 	selectionChange?: EventCallback<EvSelectionChange>;
@@ -449,6 +455,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		}
 		else {
 			update_sel = oldSel.length>0;
+			this._view.setContent( new Label( { cls: "empty vertical", icon: icons.empty, text: this.props.emptyMsg ?? _tr.global.empty_list } ) );
 		}
 		
 		if( update_sel ) {
@@ -477,9 +484,31 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 	 */
 
 	defaultRenderer( item: ListItem ): Component {
+
+		const mk_col = ( _: any, index: number ) => {
+			const c = item.sub_cols[index];
+			if( c===undefined || c===null ) { 
+				return null;
+			}
+
+			if( c instanceof Component ) {
+				return c;
+			}
+				
+			return new SimpleText( { cls: `column ref-c${index+2}`, text: c } )
+		}
+
+		let cols: Component[] = null;
+		if( item.sub_cols ) {
+			cols = item.sub_cols.map( mk_col );
+		}
+
 		return new HBox( {
 			cls: item.cls,
-			content: new Label( { icon: item.iconId, text: item.text }) 
+			content: [
+				new Label( { cls: `column ref-c1`, icon: item.iconId, text: item.text } ),
+				...cols,
+			],
 		} )
 	}
 

package/src/components/radio/radio.ts

@@ -22,6 +22,8 @@ import { Label } from '../label/label';
 import { Input } from '../input/input'
 import { HBox } from '../boxes/boxes';
 
+import icons from "../assets/icons"
+
 import "./radio.module.scss";
 
 /**
@@ -84,8 +86,7 @@ export class Radio extends Component<RadioProps,RadioEvents> {
 			} ),
 		])
 
-		const svg = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" aria-hidden="true"><circle class="fa-primary" cx="2.5" cy="2.5" r="2.5" ></circle><circle class="fa-secondary" cx="2.5" cy="2.5" r="1.25"></circle></svg>`
-		this._check.dom.insertAdjacentHTML( "beforeend", svg );
+		this._check.dom.insertAdjacentHTML( "beforeend", icons.radio );
 
 		//svgLoader.load( icon ).then( svg => {
 		//	this._check.dom.insertAdjacentHTML( "beforeend", svg );

package/src/components/tag/tag.module.scss

@@ -0,0 +1,30 @@
+/**
+* @file tag.module.scss
+* @author Etienne Cochard 
+* @copyright (c) 2026 R-libre ingenierie, all rights reserved.
+**/
+
+.x4tag {
+	color: black;
+	border-radius: 16px;
+	border: 1px solid var( --border );
+	padding: 2px 8px;
+	gap: 4px;
+	font-weight: normal;
+
+	.x4icon:empty {
+		display: none;
+	}
+
+	.x4icon {
+	}
+
+	.x4simpletext {
+		color: inherit;
+	}
+
+	&.alert {
+		color: var( --alert-color );
+		background-color: var( --alert-background );
+	}
+}

package/src/components/tag/tag.ts

@@ -0,0 +1,33 @@
+/**
+* @file tag.ts
+* @author Etienne Cochard 
+* @copyright (c) 2026 R-libre ingenierie, all rights reserved.
+**/
+
+import { ComponentProps } from '../../core/component';
+import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { HBox } from '../boxes/boxes';
+import { Icon } from '../icon/icon';
+import { SimpleText } from '../label/label';
+
+import "./tag.module.scss";
+
+
+export interface TagProps extends ComponentProps {
+	label?: string | UnsafeHtml;
+	icon?: string;
+}
+
+
+@class_ns( "x4" )
+export class Tag extends HBox<TagProps> {
+
+	constructor( props: TagProps ) {
+		super( props );
+
+		this.setContent( [
+			new Icon( { iconId: props.icon } ),
+			new SimpleText( { text: props.label } ),
+		])
+	}
+}

package/src/components/treeview/treeview.module.scss

@@ -63,7 +63,7 @@
 				&>.label {
 					gap: 4px;
 
-					.x4label, .x4icon {
+					.x4label, .x4icon, .x4label #icon {
 						color: inherit;
 					}
 

package/src/components/treeview/treeview.ts

@@ -19,13 +19,15 @@ import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
-import { Label } from '../label/label';
+import { Label, SimpleText } from '../label/label';
 import { ListboxID, ListItem } from '../listbox/listbox';
 import { Box, BoxProps, HBox, VBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
 
+import { _tr } from '../../x4.js';
+import icons from '../assets/icons'
+
 import "./treeview.module.scss";
-import folder_icon from "./chevron-down-light.svg"
 
 
 //import folder_closed from "./folder-minus-light.svg"
@@ -53,6 +55,7 @@ export interface TreeItem extends ListItem {
 interface TreeviewProps extends Omit<ComponentProps,"content"> {
 	items: TreeItem[];
 	footer?: Component;
+	emptyMsg?: string;
 	selectionChange?: EventCallback<EvSelectionChange>;
 	dblClick?: EventCallback<EvDblClick>;
 	click?: EventCallback<EvClick>;
@@ -83,7 +86,7 @@ class CTreeViewItem extends Box {
 
 		if( item ) {
 			this._label = new HBox( {cls:"label item", content: [
-				this._icon = new Icon( { cls: "opener", iconId: item.children ? folder_icon : undefined } ),
+				this._icon = new Icon( { cls: 'arrow', iconId: item.children ? icons.chevron : undefined } ),
 				new Label( { tag: "span", cls: "", text: item.text, icon: item.iconId } ),
 			]});
 
@@ -91,6 +94,23 @@ class CTreeViewItem extends Box {
 				this._label.addClass( item.cls );
 			}
 
+			if( item.sub_cols ) {
+				const mk_col = ( _: any, index: number ) => {
+					const c = item.sub_cols[index];
+					if( c===undefined || c===null ) { 
+						return null;
+					}
+
+					if( c instanceof Component ) {
+						return c;
+					}
+						
+					return new SimpleText( { cls: `column ref-c${index+2}`, text: c } )
+				}
+				
+				this._label.appendContent( item.sub_cols.map( mk_col ) );
+			}
+
 			this._label.setInternalData( "id", item.id );
 				
 			if( item.children ) {
@@ -133,7 +153,7 @@ class CTreeViewItem extends Box {
 	}
 
 	setItems( items: TreeItem[ ] ) {
-		if( items ) {
+		if( items && items.length ) {
 			const childs = items.map( itm => {
 				return new CTreeViewItem( {}, itm );
 			})
@@ -202,10 +222,13 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 
 		const root = new CTreeViewItem( { cls: "root"}, null );
 
-		if( items ) {
+		if( items && items.length ) {
 			root.setItems( items );
 			this._view.setContent( root );
 		}
+		else {
+			this._view.setContent( new Label( { cls: "empty vertical", icon: icons.empty, text: this.props.emptyMsg ?? _tr.global.empty_list } ) );
+		}
 	}
 
 	private _on_click( ev: UIEvent ) {

package/src/core/component.ts

@@ -416,8 +416,8 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * @param name - The suffix of the `data-` attribute (e.g., for `data-foo`, use `"foo"`).
      * @returns The string value of the `data-*` attribute, or `null` if not present.
 	 * 
-	 * @cf setIntData/getIntData (number)
-	 * @cf setInternalData/getInternalData (typed data)
+	 * @cf Component.setIntData, Component.getIntData (number)
+	 * @cf Component.setInternalData, Component.getInternalData (typed data)
      */
     
 	getData( name: string ) : string {

package/src/components/treeview/chevron-down-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M267.3 395.3c-6.2 6.2-16.4 6.2-22.6 0l-192-192c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L256 361.4 436.7 180.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-192 192z"/></svg>