x4js 2.0.18 → 2.0.21

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

@@ -1,370 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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 { asap, class_ns, isArray, isNumber, isString } from '@core/core_tools.js';
-import { Component, ComponentContent, ComponentEvents, ComponentProps, EvSelectionChange } from "../../core/component"
-
-import "./boxes.module.scss";
-import { EventCallback } from '@core/core_events.js';
-
-export interface BoxProps extends ComponentProps {
-	tag?: string;
-}
-
-/**
- * 
- */
-
-@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
- */
-
-type ContentBuilder = ( ) => Component;
-
-interface StackItem {
-	name: string;
-	content: Component | ContentBuilder;
-	title?: string;
-}
-
-/**
- * 
- */
-
-interface StackeBoxEvents extends ComponentEvents {
-	pageChange?: EvSelectionChange;
-}
-
-export interface StackBoxProps extends Omit<ComponentProps,"content"> {
-	default: string;
-	items: StackItem[];
-	pageChange?: EventCallback<EvSelectionChange>;
-}
-
-/**
- * 
- */
-
-interface StackItemEx extends StackItem {
-	page: Component;
-}
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeBoxEvents = StackeBoxEvents>  extends Box<StackBoxProps,StackeBoxEvents> {
-	
-	protected _items: StackItemEx[];
-	protected _cur: number;
-
-	constructor( props: StackBoxProps ) {
-		super( props );
-
-		this.mapPropEvents( props, "pageChange" );
-
-		this._items = props.items?.map( itm => {
-			return { ...itm, page: null as any};
-		});
-
-		if( props.default ) {
-			this.select( props.default );
-		}
-		else if( this._items.length ) {
-			this.select( this._items[0].name );
-		}
-	}
-
-	addItem( item: StackItem ) {
-		this._items.push( {
-			name: item.name,
-			content: item.content,
-			page: null
-		});
-	}
-
-	select( name: string ) {
-		let sel = this.query( `:scope > .selected` );
-		if( sel ) {
-			sel.setClass( "selected", false );
-		}
-
-		this._cur = this._items.findIndex( x => x.name==name );
-		const pg = this._items[this._cur];
-
-		if( pg ) {
-			if( !pg.page ) {
-				pg.page = this._createPage( pg );
-				this.appendContent( pg.page );
-			}
-
-			sel = pg.page;
-			if( sel ) {
-				(sel as any).activate?.( );
-				sel.setClass( "selected", true );
-			}
-
-			asap( ( ) => this.fire( "pageChange", { selection: pg.name, empty: !sel } ) );
-		}
-
-		return pg?.page;
-	}
-
-	/**
-	 * 
-	 */
-
-	private _createPage( page: StackItemEx ) {
-		
-		let content: Component;
-		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;
-	}
-
-	getItem( name: string ) {
-		const pg = this._items.find( x => x.name==name );
-		return pg;
-	}
-
-	/**
-	 * 
-	 */
-
-	getCurPage( ) {
-		const c = this._items[this._cur];
-		return c?.name;
-	}
-}
-
-// :: ASSIST BOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-
-@class_ns( "x4" )
-export class AssistBox extends StackBox {
-	selectNextPage( nxt = true ) {
-		let p;
-		if( nxt && this._cur<this._items.length-1 ) {
-			p = this._items[this._cur+1];
-		}
-		else if( !nxt && this._cur>0 ) {
-			p = this._items[this._cur-1];
-		}
-
-		if( p ) {
-			this.select( p.name );
-		}
-	}
-
-	isFirstPage( ) {
-		return this._cur==0;
-	}
-
-	isLastPage( ) {
-		return this._cur==this._items.length-1;
-	}
-}
-
-
-
-// :: GRIDBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-interface GridBoxItem {
-	row: number;	// starts at 0
-	col: number;	// starts at 0
-	item: Component;
-}
-
-export interface GridBoxProps extends Omit<BoxProps,"content"> {
-	rows?: number | string | string[];
-	columns?: number | string | string[];
-	items?: GridBoxItem[];
-}
-
-@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 );
-		}
-
-		if( props.items ) {
-			this.setItems( props.items );
-		}
-	}
-
-	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(" ") );
-	}
-
-	setItems( items: GridBoxItem[] ) {
-		items.forEach( x => {
-			x.item.setStyle( {
-				gridColumn: (x.col+1)+"",
-				gridRow: (x.row+1)+"",
-			} );
-		});
-
-		this.setContent( items.map( x => x.item ) );
-	}
-}
-
-
-// :: 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,56 +0,0 @@
-
-: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,93 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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/breadcrumb/chevron-right.svg

@@ -1 +0,0 @@
-<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,41 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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.
- **/
-
- :root {
-	--btngroup-background: white;
- }
-
-.x4btngroup {
-	align-content: start;
-	margin: 5px;
-	gap: 4px;
-
-	background: var( --btngroup-background );
-
-	&.align-right {
-		justify-content: end;
-	}
-
-	&.align-center {
-		justify-content: center;
-	}
-
-	.x4button:disabled {
-		.fa-primary {
-			fill: var( --border );
-		}
-	}
-}

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

@@ -1,153 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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, 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'
-
-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"
-import { Input } from '../components.js';
-
-/**
- * accept "ok" or "ok.<classname>"
- */
-
-type predefined = 		`ok${ "" | `.${string}`}` 
-					| 	`cancel${ "" | `.${string}`}` 
-					| 	`yes${ "" | `.${string}`}`
-					|	`no${ "" | `.${string}`}`
-					| 	`retry${ "" | `.${string}`}`
-					| 	`abort${ "" | `.${string}`}`
-					| 	"-" | ">>"	// - = Flex
-					|   "~";		// space
-
-export type BtnGroupItem = predefined | Button | Label | Input;
-
-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[] = [];
-
-		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==="-" || 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,...def] = nm.split( "." );
-
-				let cls = "";
-				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, 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 );
-		});
-
-		super.setContent( childs );
-	}
-
-	getButton( id: string ) {
-		return this.query<Button>( '#'+id );
-	}
-}