x4js 2.0.11 → 2.0.13

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

@@ -1,125 +1,129 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file boxes.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 { Component, ComponentEvents, ComponentProps } from "../../core/component"
-
-import "./boxes.module.scss";
-
-export interface BoxProps extends ComponentProps {
-}
-
-/**
- * 
- */
-
-export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
-}
-
-
-/**
- * 
- */
-
-export class HBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
-}
-
-/**
- * 
- */
-
-export class VBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
-	constructor( p: P ) {
-		super( p );
-	}
-}
-
-
-/**
- * stack of widgets where only one widget is visible at a time
- */
-
-interface StackItem {
-	name: string;
-	content: Component;
-}
-
-interface StackedLayoutProps extends Omit<ComponentProps,"content"> {
-	default: string;
-	items: StackItem[];
-}
-
-interface _StackItem extends StackItem {
-	page: Component;
-}
-
-export class StackBox extends Box<StackedLayoutProps> {
-
-	private _items: _StackItem[];
-
-	constructor( props: StackedLayoutProps ) {
-		super( props );
-
-		this._items = props.items?.map( itm => {
-			return { ...itm, page: null };
-		});
-
-		if( props.default ) {
-			this.select( props.default );
-		}
-		else if( this._items.length ) {
-			this.select( this._items[0].name );
-		}
-	}
-
-	select( name: string ) {
-		let sel = this.query( `.selected` );
-		if( sel ) {
-			sel.setClass( "selected", false );
-		}
-
-		const pg = this._items.find( x => x.name==name );
-		if( pg ) {
-			if( !pg.page ) {
-				pg.page = this._createPage( pg );
-				this.appendContent( pg.page );
-			}
-
-			sel = pg.page;
-			if( sel ) {
-				sel.setClass( "selected", true );
-			}
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	private _createPage( page: _StackItem ) {
-		
-		let content: Component;
-		//if( page.content instanceof ComponentBuilder ) {
-		//	content = page.content.create( );
-		//}
-		//else {
-			content = page.content;
-		//}
-		
-		content?.setData( "stackname", page.name );
-		return content;
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file boxes.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 { Component, ComponentEvents, ComponentProps } from "../../core/component"
+
+import "./boxes.module.scss";
+
+export interface BoxProps extends ComponentProps {
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
+}
+
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class HBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class VBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+	constructor( p: P ) {
+		super( p );
+	}
+}
+
+
+/**
+ * stack of widgets where only one widget is visible at a time
+ */
+
+interface StackItem {
+	name: string;
+	content: Component;
+}
+
+interface StackedLayoutProps extends Omit<ComponentProps,"content"> {
+	default: string;
+	items: StackItem[];
+}
+
+interface _StackItem extends StackItem {
+	page: Component;
+}
+
+@class_ns( "x4" )
+export class StackBox extends Box<StackedLayoutProps> {
+	private _items: _StackItem[];
+
+	constructor( props: StackedLayoutProps ) {
+		super( props );
+
+		this._items = props.items?.map( itm => {
+			return { ...itm, page: null };
+		});
+
+		if( props.default ) {
+			this.select( props.default );
+		}
+		else if( this._items.length ) {
+			this.select( this._items[0].name );
+		}
+	}
+
+	select( name: string ) {
+		let sel = this.query( `.selected` );
+		if( sel ) {
+			sel.setClass( "selected", false );
+		}
+
+		const pg = this._items.find( x => x.name==name );
+		if( pg ) {
+			if( !pg.page ) {
+				pg.page = this._createPage( pg );
+				this.appendContent( pg.page );
+			}
+
+			sel = pg.page;
+			if( sel ) {
+				sel.setClass( "selected", true );
+			}
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private _createPage( page: _StackItem ) {
+		
+		let content: Component;
+		//if( page.content instanceof ComponentBuilder ) {
+		//	content = page.content.create( );
+		//}
+		//else {
+			content = page.content;
+		//}
+		
+		content?.setData( "stackname", page.name );
+		return content;
+	}
+}
+

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

@@ -0,0 +1,28 @@
+
+: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;
+		}
+	}
+}

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

@@ -0,0 +1,84 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 );
+	}
+}
+

package/lib/src/components/breadcrumb/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M299.3 244.7c6.2 6.2 6.2 16.4 0 22.6l-192 192c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L265.4 256 84.7 75.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l192 192z"/></svg>

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

@@ -1,29 +1,29 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file btngroup.model.scss
- * @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.
- **/
-
-.x4btngroup {
-	align-content: start;
-	margin: 5px;
-	gap: 4px;
-
-	&.align-right {
-		justify-content: end;
-	}
-
-	&.align-center {
-		justify-content: center;
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file btngroup.model.scss
+ * @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.
+ **/
+
+.x4btngroup {
+	align-content: start;
+	margin: 5px;
+	gap: 4px;
+
+	&.align-right {
+		justify-content: end;
+	}
+
+	&.align-center {
+		justify-content: center;
+	}
 }

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

@@ -1,102 +1,120 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file btngroup.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 { Component, ComponentEvent, ComponentEvents, ComponentProps, Flex } from '../../core/component';
-import { EventCallback } from '../../core/core_events';
-import { isString } from '../../core/core_tools';
-import { _tr } from '../../core/core_i18n'
-
-import { Button } from '../button/button';
-import { Box } from '../boxes/boxes.js';
-import { Label } from '../label/label.js';
-import { EvBtnClick } from '../dialog/dialog.js';
-
-import "./btngroup.module.scss"
-
-
-type predefined = "ok" | "cancel" | "yes" | "no" | "retry" | "abort" | "-";	// - = flex
-export type BtnGroupItem = predefined | Button | Label;
-
-interface BtnGroupEvents extends ComponentEvents {
-	btnclick: EvBtnClick;
-}
-
-interface BtnGroupProps extends Omit<ComponentProps,"content"> {
-	align?: "left" | "center" | "right";	// left default
-	vertical?: boolean;					
-	items: BtnGroupItem[];
-	reverse?: boolean,
-	btnclick?: EventCallback<EvBtnClick>;
-}
-
-export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
-
-	constructor( props: BtnGroupProps ) {
-		super( props );
-
-		if( props.align ) {
-			this.addClass( "align-"+props.align );
-		}
-
-		this.addClass( props.vertical ? "x4vbox" : "x4hbox" );
-
-		if( props.items ) {
-			this.setButtons( props.items );
-		}
-
-		this.mapPropEvents( props, "btnclick" );
-	}
-
-	/**
-	 * 
-	 * @param btns 
-	 */
-
-	setButtons( btns: BtnGroupItem[] ) {
-
-		this.clearContent( );
-
-		const childs: Component[] = [];
-
-		btns?.forEach( (b: string | Component) => {
-
-			if( b==="-" ) {
-				b = new Flex( );
-			}
-			else if( isString(b) ) {
-				let title: string;
-				const nm = b as predefined;
-
-				switch( b as predefined ) {
-					case "ok": 		title = _tr.global.ok; break;
-					case "cancel": 	title = _tr.global.cancel; break;
-					case "abort":	title = _tr.global.abort; break;
-					case "no":		title = _tr.global.no; break;
-					case "yes":		title = _tr.global.yes; break;
-					case "retry":	title = _tr.global.retry; break;
-				}
-
-				b = new Button( { label: title, click: ( ) => {
-					this.fire( "btnclick", {button:nm as string} )
-				} } );
-			}
-
-			childs.push( b );
-		});
-
-		super.setContent( childs );
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file btngroup.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 { Component, ComponentEvent, ComponentEvents, ComponentProps, Flex } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { class_ns, isString } from '../../core/core_tools';
+import { _tr } from '../../core/core_i18n'
+
+import { Button } from '../button/button';
+import { Box } from '../boxes/boxes.js';
+import { Label } from '../label/label.js';
+import { EvBtnClick } from '../dialog/dialog.js';
+
+import "./btngroup.module.scss"
+
+/**
+ * accept "ok" or "ok.<classname>"
+ */
+
+type predefined = 		`ok${ "" | `.${string}`}` 
+					| 	`cancel${ "" | `.${string}`}` 
+					| 	`yes${ "" | `.${string}`}`
+					|	`no${ "" | `.${string}`}`
+					| 	`retry${ "" | `.${string}`}`
+					| 	`abort${ "" | `.${string}`}`
+					| 	"-";	// - = flex
+
+export type BtnGroupItem = predefined | Button | Label;
+
+interface BtnGroupEvents extends ComponentEvents {
+	btnclick: EvBtnClick;
+}
+
+interface BtnGroupProps extends Omit<ComponentProps,"content"> {
+	align?: "left" | "center" | "right";	// left default
+	vertical?: boolean;					
+	items: BtnGroupItem[];
+	reverse?: boolean,
+	btnclick?: EventCallback<EvBtnClick>;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
+
+	constructor( props: BtnGroupProps ) {
+		super( props );
+
+		if( props.align ) {
+			this.addClass( "align-"+props.align );
+		}
+
+		this.addClass( props.vertical ? "x4vbox" : "x4hbox" );
+
+		if( props.items ) {
+			this.setButtons( props.items );
+		}
+
+		this.mapPropEvents( props, "btnclick" );
+	}
+
+	/**
+	 * 
+	 * @param btns 
+	 */
+
+	setButtons( btns: BtnGroupItem[] ) {
+
+		this.clearContent( );
+
+		const childs: Component[] = [];
+
+		btns?.forEach( (b: string | Component) => {
+
+			if( b==="-" ) {
+				b = new Flex( );
+			}
+			else if( isString(b) ) {
+				let title: string;
+
+				const nm = (b as predefined);
+
+				let [txt,cls] = nm.split( "." );
+								
+				switch( txt as predefined ) {
+					case "ok": 		title = _tr.global.ok; break;
+					case "cancel": 	title = _tr.global.cancel; break;
+					case "abort":	title = _tr.global.abort; break;
+					case "no":		title = _tr.global.no; break;
+					case "yes":		title = _tr.global.yes; break;
+					case "retry":	title = _tr.global.retry; break;
+				}
+
+				b = new Button( { cls, label: title, click: ( ) => {
+					this.fire( "btnclick", {button:nm as string} )
+				} } );
+			}
+
+			childs.push( b );
+		});
+
+		super.setContent( childs );
+	}
 }