x4js 2.0.13 → 2.0.15

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

@@ -13,22 +13,29 @@
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
+ @use "../shared.scss";
 
 :root {
-	--treeitem-backgound: var( );
-	--treeitem-color: var( );
+
+	--treeview-background: white;
 
 	--treeitem-backgound-hover: var( --background-secondary );
 	--treeitem-color-hover: var( );
 
 	--treeitem-background-sel: var( --accent-background );
 	--treeitem-color-sel: var( --accent-color );
+	
+	--treeview-item-color-sel-disabled: var( --disabled-background );
+	--treeview-item-color-disabled: var( --disabled-color-dark );
+
 
 	--treeitem-backgound-active: var( --accent-background-active);
 	--treeitem-color-active: var( --accent-color-active );
 }
 
 .x4treeview {
+	@extend .vbox;
+
 	overflow-y: auto;
 	height: 100%;
 	margin: 5px;
@@ -36,79 +43,141 @@
 	outline: none;
 	
 	border: 1px solid var( --border );
+	background: var( --treeview-background );
 
 	&:focus {
 		border: 1px solid var( --border-focus );
 	}
 
-	// child + subitems
-	.x4ctreeviewitem {
-		&>.label {
-			gap: 4px;
-
-			.x4label, .x4icon {
-				color: inherit;
-			}
-
-			.x4icon {
-				width: 16px;
-			}
+	&>.body {
+		width: 100%;
+		flex-basis: 0;
+		overflow-y: auto;
+		overflow-x: auto;
+		outline: none;
+		position: relative;
+
+		&> .x4viewport {
+			// child + subitems
+			.x4ctreeviewitem {
+				&>.label {
+					gap: 4px;
+
+					.x4label, .x4icon {
+						color: inherit;
+					}
+
+					.x4icon {
+						width: 16px;
+					}
+
+					padding: 4px;
+
+					&:hover {
+						background-color: var( --treeitem-backgound-hover );
+					}
+
+					&.selected {
+						background-color: var( --treeitem-background-sel );
+						color: var( --treeitem-color-sel );
+					}
+
+					&:active{
+						background-color: var( --accent-background-active );
+						color: var( --accent-color-active );
+					}	
+				}
 
-			padding: 4px;
+				&>.body:not(:first-child) {
+					padding-left: 24px;
+				}
 
-			&:hover {
-				background-color: var( --treeitem-backgound-hover );
-			}
+				&>.body {
+					transition: opacity 0.5s ease;
+				}
 
-			&.selected {
-				background-color: var( --treeitem-background-sel );
-				color: var( --treeitem-color-sel );
+				&.folder {
+					&> .label {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+
+						&>.x-icon {
+							transform: rotate( 0deg );
+							transition: transform 0.2s ease;
+
+							width: 16px;
+							height: 16px;
+
+							cursor: pointer;
+						}
+					}
+
+					&>.body {
+						overflow: hidden;
+					}
+				
+					&:not(.open) {
+						&>.body {
+							//display: none;
+							height: 0;
+							opacity: 0;
+						}
+
+						&>.label>.x4icon {
+							transform: rotate( -90deg );
+						}
+					}
+				}
 			}
-
-			&:active{
-				background-color: var( --accent-background-active );
-				color: var( --accent-color-active );
-			}	
 		}
+	}
 
-		&>.body:not(:first-child) {
-			padding-left: 24px;
-		}
-
-		&>.body {
-			transition: opacity 0.5s ease;
-		}
-
-		&.folder {
-			&> .label {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-
-				&>.x-icon {
-					transform: rotate( 0deg );
-					transition: transform 0.2s ease;
-
-					width: 16px;
-					height: 16px;
-
-					cursor: pointer;
+	&> #footer {
+		border-top: 1px solid var(--border);
+		margin: 0;
+
+		&.x4btngroup {
+			gap: 0px;
+
+			.x4button {
+				background-color: var( --ol-button-background );
+				color: var( --ol-button-color );
+				margin: 0;
+								
+				.x4icon {
+					height: 1.5em;
+					width: 1.5em;
 				}
-			}
 
-			&>.body {
-				overflow: hidden;
+				&:hover{
+					background-color: var( --ol-button-background-hover );
+					color: var( --ol-button-color-hover );
+				}	
+
+				&:active{
+					background-color: var( --ol-button-background-active );
+					color: var( --ol-button-color-active );
+					#icon {
+						color: var( --button-icon-color );
+					}
+				}	
 			}
-		
-			&:not(.open) {
-				&>.body {
-					//display: none;
-					height: 0;
-					opacity: 0;
-				}
+		}
+	}
+
+	&[disabled] {
+		cursor: not-allowed;
+		border-color: var( --border );
+		color: var( --treeview-item-color-disabled );
 
-				&>.label>.x4icon {
-					transform: rotate( -90deg );
+		&>.body {
+			.x4viewport {
+				pointer-events: none;
+				.x4item {
+					&.selected {
+						background-color: var( --treeview-item-color-sel-disabled );
+					}
 				}
 			}
 		}

package/lib/src/components/treeview/treeview.ts

@@ -14,16 +14,18 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM } from '../../core/component';
+import { class_ns } from '@core/core_tools';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvSelectionChange, componentFromDOM } from '../../core/component';
 
+import { ScrollView, Viewport } from '../viewport/viewport';
 import { Label } from '../label/label';
 import { ListboxID, ListItem, kbNav } from '../listbox/listbox';
 import { Box, BoxProps, HBox, VBox } from '../boxes/boxes';
-import { Icon } from '../icon/icon.js';
+import { Icon } from '../icon/icon';
 
 import "./treeview.module.scss";
 import folder_icon from "./chevron-down-light.svg"
-import { class_ns } from '@core/core_tools.js';
+
 
 //import folder_closed from "./folder-minus-light.svg"
 
@@ -49,6 +51,7 @@ export interface TreeItem extends ListItem {
 
 interface TreeviewProps extends Omit<ComponentProps,"content"> {
 	items: TreeItem[];
+	footer?: Component;
 }
 
 interface ChangeEvent extends ComponentEvent {
@@ -56,7 +59,7 @@ interface ChangeEvent extends ComponentEvent {
 }
 
 interface TreeviewEvents extends ComponentEvents {
-	change: ChangeEvent;
+	selectionChange?: EvSelectionChange;
 }
 
 /**
@@ -78,8 +81,8 @@ class CTreeViewItem extends Box {
 
 		if( item ) {
 			this._label = new HBox( {cls:"label item", content: [
-				this._icon = new Icon( { iconId: item.children? folder_icon : item.iconId } ),
-				new Label( { tag: "span", cls: "", text: item.text } ),
+				this._icon = new Icon( { iconId: item.children ? folder_icon : undefined } ),
+				new Label( { tag: "span", cls: "", text: item.text, icon: item.iconId } ),
 			]});
 
 			this._label.setData( "id", item.id+"" );
@@ -136,12 +139,19 @@ class CTreeViewItem extends Box {
 	}
 }
 
+
+// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+
+
 /**
  * 
  */
 
 @class_ns( "x4" )
 export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
+
+	private _view: Viewport;
 	private _selection: ListboxID;
 	private _selitem: Component;
 	private _items: TreeItem[];
@@ -149,8 +159,16 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 	constructor( props: TreeviewProps ) {
 		super( props );
 
-		if( props.items ) {
-			this.setItems( props.items );
+		const scroller = new ScrollView( { cls: "body" } );
+		this._view = scroller.getViewport( );
+
+		this.setContent( [
+			scroller,
+			props.footer,
+		] );
+
+		if( props.footer ) {
+			props.footer.setAttribute( "id", "footer" );
 		}
 
 		this.setAttribute( "tabindex", 0 );
@@ -158,6 +176,10 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 			click: ( ev ) => this._onclick( ev ),
 			keydown: ( ev ) => this._onkey( ev ),
 		});
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
 	}
 
 	/**
@@ -165,11 +187,16 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 	 */
 
 	setItems( items: TreeItem[ ] ) {
+		this.clearSelection( );
+		this._view.clearContent( );
 		this._items = items;
 
 		const root = new CTreeViewItem( { cls: "root"}, null );
-		root.setItems( items );
-		this.setContent( root );
+
+		if( items ) {
+			root.setItems( items );
+			this._view.setContent( root );
+		}
 	}
 
 	private _onclick( ev: UIEvent ) {
@@ -386,7 +413,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		}
 
 		const itm = this._findItem( id );
-		this.fire( "change", { selection: itm } );
+		this.fire( "selectionChange", { selection: itm, empty: false } );
 	}
 
 	private _findItem( id: ListboxID ) {
@@ -405,6 +432,14 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		}
 
 		this._selection = undefined;
-		this.fire( "change", { selection: undefined } );
+		this.fire( "selectionChange", { selection: undefined, empty: true } );
+	}
+
+	/**
+	 * 
+	 */
+
+	getSelection( ) {
+		return this._selection;
 	}
 }

package/lib/src/components/viewport/viewport.module.scss

@@ -18,6 +18,13 @@
 
 .x4scrollview {
 	@extend .flex;
+
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	left: 0;
+	top: 0;
+	overflow: auto;
 }
 
 .x4viewport {