x4js 2.2.41 → 2.2.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.41",
+  "version": "2.2.43",
   "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/gridview/gridview.module.scss

@@ -113,7 +113,8 @@
 		.empty {
 			position: relative;
 			left: 50%;
-			top: 20%;
+			top: 30px;
+			transform: translateX(-50%);
 			width: fit-content;
 
 			#icon {

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.module.scss

@@ -64,6 +64,20 @@
 		&> .x4viewport {
 			overflow: hidden;
 			display: table;
+
+			.empty {
+				position: relative;
+				left: 50%;
+				top: 30px;
+				transform: translateX(-50%);
+				width: fit-content;
+
+				#icon {
+					height: 64px;
+					fill: var( --accent-background );
+					opacity: 50%;
+				}
+			}
 		}
 
 		.x4item {

package/src/components/listbox/listbox.ts

@@ -24,8 +24,12 @@ import { Header } from '../header/header';
 import { HBox } from '../boxes/boxes';
 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 {
@@ -63,6 +67,7 @@ export interface ListboxProps extends Omit<ComponentProps,'content'> {
 	footer?: Component,
 	checkable?: true,
 	multisel?: true,
+	emptyMsg?: string,
 
 	dblClick?: EventCallback<EvDblClick>;
 	selectionChange?: EventCallback<EvSelectionChange>;
@@ -120,9 +125,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 			contextmenu: (e) => this._on_ctx_menu(e),
 		} );
 
-		if( props.items ) {
-			this.setItems( props.items, false );
-		}
+		this.setItems( props.items, false );
 	}
 
 	/**
@@ -450,6 +453,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 ) {

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/treeview/treeview.module.scss

@@ -58,6 +58,20 @@
 		position: relative;
 
 		&> .x4viewport {
+			.empty {
+				position: relative;
+				left: 50%;
+				top: 30px;
+				transform: translateX(-50%);
+				width: fit-content;
+
+				#icon {
+					height: 64px;
+					fill: var( --accent-background );
+					opacity: 50%;
+				}
+			}
+			
 			// child + subitems
 			.x4ctreeviewitem {
 				&>.label {

package/src/components/treeview/treeview.ts

@@ -24,8 +24,10 @@ 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: 'arrow', 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 } ),
 			]});
 
@@ -150,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 );
 			})
@@ -203,9 +206,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 			keydown: ( ev ) => this._onkey( ev ),
 		});
 
-		if( props.items ) {
-			this.setItems( props.items );
-		}
+		this.setItems( props.items );
 	}
 
 	/**
@@ -219,10 +220,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/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>