x4js 2.2.39 → 2.2.41

package/package.json

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

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

@@ -22,7 +22,7 @@ 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 "./listbox.module.scss"
 
@@ -31,6 +31,7 @@ export type ListboxID = number | string;
 export interface ListItem {
 	id: ListboxID;
 	text: string | UnsafeHtml;
+	sub_cols?: (string | UnsafeHtml | Component)[];	// extra columns
 
 	iconId?: string;
 	data?: any;
@@ -477,9 +478,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/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,7 +19,7 @@ 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';
@@ -83,7 +83,7 @@ class CTreeViewItem extends Box {
 
 		if( item ) {
 			this._label = new HBox( {cls:"label item", content: [
-				this._icon = new Icon( { iconId: item.children ? folder_icon : undefined } ),
+				this._icon = new Icon( { cls: 'arrow', iconId: item.children ? folder_icon : undefined } ),
 				new Label( { tag: "span", cls: "", text: item.text, icon: item.iconId } ),
 			]});
 
@@ -91,6 +91,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 ) {

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/core/core_tools.ts

@@ -115,7 +115,7 @@ export function unsafeHtml(x: string): UnsafeHtml {
 
 export function unsafe(strings: TemplateStringsArray, ...values: any[]): UnsafeHtml {
 	const result = strings.reduce((acc, str, i) => {
-		return acc + str + (values[i] ?? '');
+		return acc + str + sanitizeHtml(values[i] ?? '');
 	}, '');
 	return unsafeHtml(result);
 }
@@ -1032,6 +1032,10 @@ const _rx_escape = /[&<>"']/g;
  */
 
 export function sanitizeHtml( input: string ): string {
+	if( input===undefined || input===null || input==="" ) {
+		return "";
+	}
+
 	if( !_rx_escape.test( input ) ) {
 		return input;
 	}