x4js 2.0.13 → 2.0.14

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

@@ -18,6 +18,9 @@
 
 .x4hbox {
 	@extend .hbox;
+	&.align-start {
+		align-items: start;
+	}
 }
 
 .x4vbox {
@@ -25,6 +28,8 @@
 }
 
 .x4stackbox {
+	display: flex;
+	
 	&>* {
 		@extend .fit;
 		position: relative !important;
@@ -35,3 +40,15 @@
 	}
 }
 
+.x4gridbox {
+	display: grid;
+}
+
+.x4masonrybox {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
+	grid-auto-rows: 10px;
+
+	overflow: hidden;
+}

package/lib/src/components/boxes/boxes.ts

@@ -14,12 +14,13 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '@core/core_tools.js';
-import { Component, ComponentEvents, ComponentProps } from "../../core/component"
+import { class_ns, isArray, isNumber, isString } from '@core/core_tools.js';
+import { Component, ComponentContent, ComponentEvents, ComponentProps } from "../../core/component"
 
 import "./boxes.module.scss";
 
 export interface BoxProps extends ComponentProps {
+	tag?: string;
 }
 
 /**
@@ -55,9 +56,11 @@ export class VBox<P extends BoxProps=BoxProps,E extends ComponentEvents=Componen
  * stack of widgets where only one widget is visible at a time
  */
 
+type ContentBuilder = ( ) => Component;
+
 interface StackItem {
 	name: string;
-	content: Component;
+	content: Component | ContentBuilder;
 }
 
 interface StackedLayoutProps extends Omit<ComponentProps,"content"> {
@@ -65,19 +68,19 @@ interface StackedLayoutProps extends Omit<ComponentProps,"content"> {
 	items: StackItem[];
 }
 
-interface _StackItem extends StackItem {
+interface StackItemEx extends StackItem {
 	page: Component;
 }
 
 @class_ns( "x4" )
 export class StackBox extends Box<StackedLayoutProps> {
-	private _items: _StackItem[];
+	private _items: StackItemEx[];
 
 	constructor( props: StackedLayoutProps ) {
 		super( props );
 
 		this._items = props.items?.map( itm => {
-			return { ...itm, page: null };
+			return { ...itm, page: null as any};
 		});
 
 		if( props.default ) {
@@ -88,8 +91,16 @@ export class StackBox extends Box<StackedLayoutProps> {
 		}
 	}
 
+	addItem( item: StackItem ) {
+		this._items.push( {
+			name: item.name,
+			content: item.content,
+			page: null
+		});
+	}
+
 	select( name: string ) {
-		let sel = this.query( `.selected` );
+		let sel = this.query( `:scope > .selected` );
 		if( sel ) {
 			sel.setClass( "selected", false );
 		}
@@ -103,27 +114,165 @@ export class StackBox extends Box<StackedLayoutProps> {
 
 			sel = pg.page;
 			if( sel ) {
+				(sel as any).activate?.( );
 				sel.setClass( "selected", true );
 			}
 		}
+
+		return pg?.page;
 	}
 
 	/**
 	 * 
 	 */
 
-	private _createPage( page: _StackItem ) {
+	private _createPage( page: StackItemEx ) {
 		
 		let content: Component;
-		//if( page.content instanceof ComponentBuilder ) {
-		//	content = page.content.create( );
-		//}
-		//else {
+		if( page.content instanceof Function ) {
+			content = page.content( );
+			page.content = content;	// keep it
+		}
+		else {
 			content = page.content;
-		//}
+		}
 		
 		content?.setData( "stackname", page.name );
 		return content;
 	}
+
+	/**
+	 * 
+	 */
+	
+	getPage( name: string ) {
+		const pg = this._items.find( x => x.name==name );
+		return pg ? pg.content : null;
+	}
+}
+
+// :: GRIDBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+
+export interface GridboxProps extends BoxProps {
+	rows?: number | string | string[];
+	columns?: number | string | string[];
+}
+
+@class_ns("x4")
+export class GridBox<P extends GridboxProps=GridboxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+
+	constructor( props: P ) {
+		super( props );
+
+		if( props.rows!==undefined ) {
+			this.setRows( props.rows );
+		}
+
+		if( props.columns!==undefined ) {
+			this.setCols( props.columns );
+		}
+	}
+
+	setRows( r: number | string | string[] ) {
+		if( isArray(r) ) {
+			r = r.join( " " );
+		}
+		else if( isNumber(r) ) {
+			r = `repeat( ${r}, 1fr )`;
+		}
+
+		this.setStyleValue( "gridTemplateRows", r );
+	}
+
+	setCols( r: number | string | string[] ) {
+		if( isArray(r) ) {
+			r = r.join( " " );
+		}
+		else if( isNumber(r) ) {
+			r = `repeat( ${r}, 1fr )`;
+		}
+
+		this.setStyleValue( "gridTemplateColumns", r );
+	}
+
+	setRowCount( n: number ) {
+		this.setStyleValue( "gridTemplateRows", `repeat(${n})` );
+	}
+
+	setColCount( n: number ) {
+		this.setStyleValue( "gridTemplateColumns", `repeat(${n})` );
+	}
+
+	/**
+	 * @param t "a a a" "b c c" "b c c"
+	 * user item.setAttribute( "grid-area", "a" );
+	 */
+
+	setTemplate( t: string[] ) {
+		this.setAttribute( "grid-template-area", t.map( x => '"' + x + '"' ).join(" ") );
+	}
+}
+
+
+// :: MASONRY ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+// from a nice article of Andy Barefoot
+//	https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
+
+interface MasonryProps extends Omit<BoxProps,"content"> {
+	items: Component[];
+}
+
+@class_ns("x4")
+export class MasonryBox extends Box<MasonryProps> {
+
+	constructor(props: MasonryProps ) {
+		super(props);
+
+		this.addDOMEvent( 'resized', () => {
+			this.resizeAllItems( );
+		});
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
+	}
+
+	resizeItem(item: Component) {
+		const style = this.getComputedStyle();
+
+		const rowHeight = parseInt(style['gridAutoRows']);
+		const rowGap = parseInt(style['rowGap']);
+
+		let content = item.query('.content');
+		if( !content ) {
+			content = item;
+		}
+
+		if (content && (rowHeight + rowGap)) {
+			const rc = content.getBoundingRect();
+			const rowSpan = Math.ceil( (rc.height + rowGap) / (rowHeight + rowGap) );
+			item.setStyleValue('gridRowEnd', "span " + rowSpan);
+		}
+	}
+	  
+	resizeAllItems( ) {
+		const els = this.queryAll( ".item" );
+		els.forEach( itm => {;
+			this.resizeItem( itm );
+		} );
+	}
+
+	setItems( items: Component[] ) {
+		const els = items.map( x => {
+			return new Box( {
+				cls: 'item',
+				content: x
+			} );
+		});
+		
+		this.setContent( els );
+	}
 }
 

package/lib/src/components/breadcrumb/breadcrumb.scss

@@ -1,28 +1,56 @@
-
-:root {
-	--link-color: var( --accent-background );
-}
-
-.x4breadcrumbs {
-	border-bottom: 1px solid var( --border );
-	padding: 8px 0;
-	font-size: 120%;
-	margin-bottom: 2em;
-		
-	&> .x4button {
-		border: none;
-		background-color: transparent;
-		color: var( --link-color );
-		border-radius: 16px;
-		padding: 6px 8px;
-		min-width: 60px;
-	
-		&:hover {
-			border-bottom-color: var( --link-color );
-		}
-
-		&:last-child {
-			font-weight: bold;
-		}
-	}
-}
+
+:root {
+	--breadcrumbs-background: var( --background-primary );
+	--breadcrumbs-icon-color: var( --text-ternary );
+	--breadcrumbs-link-color: var( --text-ternary );
+	--breadcrumbs-active-color: var( --accent-background );
+}
+
+.x4breadcrumbs {
+	background-color: var( --breadcrumbs-background );
+	border-bottom: 1px solid var( --border );
+	padding: 8px 0;
+	margin-bottom: 2em;
+		
+	&> .x4button {
+		border: none;
+		background-color: transparent;
+		color: var( --breadcrumbs-link-color );
+		padding: 6px 8px;
+		padding-right: 0;
+		min-width: 60px;
+
+		#icon {
+			fill: var( --breadcrumbs-icon-color );
+		}
+
+		&:not(:last-child):after {
+			content: ">"
+		}
+	
+		&:hover:not(:last-child) {
+			background-color: transparent;
+			color: var( --accent-background );
+			fill:  var( --accent-background );
+			border-bottom-color: var( --breadcrumbs-link-color );
+			#text {
+				text-decoration: underline;
+			}
+		}
+
+		&:last-child {
+			font-weight: bold;
+			color: var( --breadcrumbs-active-color );
+
+			#icon {
+				fill:  var( --breadcrumbs-active-color );
+			}
+
+			cursor: auto;
+			&:hover {
+				background-color: transparent;
+				color: var( --breadcrumbs-link-color );
+			}
+		}
+	}
+}

package/lib/src/components/breadcrumb/breadcrumb.ts

@@ -1,84 +1,93 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file breadcrumb.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * 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.
- **/
-
-import { class_ns } from '@core/core_tools.js';
-import { BoxProps, Button, HBox, Icon, Link } from '../components';
-import { Component, ComponentEvents, EvClick } from '@core/component.js';
-import { EventCallback } from '@core/core_events.js';
-
-import "./breadcrumb.scss"
-
-import icon_sep from "./chevron-right.svg"
-
-/**
- * Breadcrumb events
- */
-
-interface BreadcrumbEvents extends ComponentEvents {
-	click: EvClick;	// context = item name
-}
-
-/**
- * 
- */
-
-interface BreadcrumbElement {
-	icon?: string;
-    name:  string;
-    label: string;
-}
-
-/**
- * 
- */
-
-interface BreadcrumbsProps extends BoxProps{
-	items: BreadcrumbElement[];
-	click?: EventCallback<EvClick>;
-}
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-export class Breadcrumbs extends HBox<BreadcrumbsProps,BreadcrumbEvents> {
-
-	constructor( props: BreadcrumbsProps ) {
-		super( props );
-
-		this.mapPropEvents( props, "click" );
-		
-		const items: Component[] = [];
-		
-		props.items?.map( (x: BreadcrumbElement, idx ) => {
-			items.push( new Button( {
-				label: x.label,
-				icon: x.icon,
-				click: ( ) => {
-					this.fire( "click", { context: x.name } );
-				}
-			}) );
-
-			if( idx!=props.items.length-1 ) {
-				items.push( new Icon( { iconId: icon_sep } ) );
-			}
-		});
-
-		this.setContent( items );
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file breadcrumb.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * 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.
+ **/
+
+import { class_ns } from '@core/core_tools.js';
+import { parseRoute, Router } from '@core/core_router.js';
+
+import { BoxProps, Button, HBox, Icon } from '../components';
+import { Component, ComponentEvents, EvClick } from '@core/component.js';
+import { EventCallback } from '@core/core_events.js';
+
+import "./breadcrumb.scss"
+
+import icon_sep from "./chevron-right.svg"
+
+/**
+ * Breadcrumb events
+ */
+
+interface BreadcrumbEvents extends ComponentEvents {
+	click: EvClick;	// context = item name
+}
+
+/**
+ * 
+ */
+
+interface BreadcrumbElement {
+	name?: string;
+	icon?: string;
+    label: string;
+	click?: ( name: string ) => void;
+}
+
+/**
+ * 
+ */
+
+interface BreadcrumbsProps extends BoxProps{
+	items: BreadcrumbElement[];
+	click?: EventCallback<EvClick>;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Breadcrumbs extends HBox<BreadcrumbsProps,BreadcrumbEvents> {
+
+	constructor( props: BreadcrumbsProps ) {
+		super( props );
+
+		this.mapPropEvents( props, "click" );
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
+	}
+
+	setItems( elements: BreadcrumbElement[ ] ) {
+
+		const items = elements.map( itm => {
+			return new Button( {
+				label: itm.label,
+				icon: itm.icon,
+				click: ( ) => {
+					if( itm.click ) {
+						itm.click( itm.name );
+					}
+					else {
+						this.fire( "click", { context: itm.name } );
+					}
+				}
+			})
+		});
+
+		this.setContent( items );
+	}
+}
+

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

@@ -14,11 +14,17 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
+ :root {
+	--btngroup-background: white;
+ }
+
 .x4btngroup {
 	align-content: start;
 	margin: 5px;
 	gap: 4px;
 
+	background: var( --btngroup-background );
+
 	&.align-right {
 		justify-content: end;
 	}
@@ -26,4 +32,10 @@
 	&.align-center {
 		justify-content: center;
 	}
+
+	.x4button:disabled {
+		.fa-primary {
+			fill: var( --border );
+		}
+	}
 }

package/lib/src/components/btngroup/btngroup.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, Flex } from '../../core/component';
+import { Component, ComponentEvents, ComponentProps, Flex, Space } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
 import { class_ns, isString } from '../../core/core_tools';
 import { _tr } from '../../core/core_i18n'
@@ -25,6 +25,7 @@ import { Label } from '../label/label.js';
 import { EvBtnClick } from '../dialog/dialog.js';
 
 import "./btngroup.module.scss"
+import { Input } from '../components.js';
 
 /**
  * accept "ok" or "ok.<classname>"
@@ -36,9 +37,10 @@ type predefined = 		`ok${ "" | `.${string}`}`
 					|	`no${ "" | `.${string}`}`
 					| 	`retry${ "" | `.${string}`}`
 					| 	`abort${ "" | `.${string}`}`
-					| 	"-";	// - = flex
+					| 	"-" | ">>"	// - = Flex
+					|   "~";		// space
 
-export type BtnGroupItem = predefined | Button | Label;
+export type BtnGroupItem = predefined | Button | Label | Input;
 
 interface BtnGroupEvents extends ComponentEvents {
 	btnclick: EvBtnClick;
@@ -86,18 +88,31 @@ export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 
 		const childs: Component[] = [];
 
+		const hasOption = ( options: string[], value: string ) => {
+			const idx = options.indexOf( value );
+			if( idx>=0 ) {
+				options.splice( idx, 1 );
+				return true;
+			}
+		}
+
+
 		btns?.forEach( (b: string | Component) => {
 
-			if( b==="-" ) {
+			if( b==="-" || b===">>" ) {
 				b = new Flex( );
 			}
+			else if( b=='~' ) {
+				b = new Space( "1em" );
+			}
 			else if( isString(b) ) {
 				let title: string;
 
 				const nm = (b as predefined);
 
-				let [txt,cls] = nm.split( "." );
-								
+				let [txt,...def] = nm.split( "." );
+
+				let cls = "";
 				switch( txt as predefined ) {
 					case "ok": 		title = _tr.global.ok; break;
 					case "cancel": 	title = _tr.global.cancel; break;
@@ -107,9 +122,23 @@ export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 					case "retry":	title = _tr.global.retry; break;
 				}
 
-				b = new Button( { cls, label: title, click: ( ) => {
-					this.fire( "btnclick", {button:nm as string} )
+				b = new Button( { cls, id: txt, label: title, click: ( ) => {
+					this.fire( "btnclick", {button:txt as string} )
 				} } );
+
+				if( hasOption( def, "default" ) ) {
+					b.addClass( 'default' );
+				}
+
+				if( hasOption( def, "autofocus" ) ) {
+					b.setAttribute( 'autofocus', true );
+				}
+				
+				if( hasOption( def, "disabled" ) ) {
+					b.enable( false );
+				}
+
+				b.addClass( def.join(" ") );
 			}
 
 			childs.push( b );
@@ -117,4 +146,8 @@ export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 
 		super.setContent( childs );
 	}
+
+	getButton( id: string ) {
+		return this.query<Button>( '#'+id );
+	}
 }