x4js 2.0.13 → 2.0.14

package/src/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,56 @@
+
+: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/src/components/breadcrumb/breadcrumb.ts

@@ -0,0 +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 { 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/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/src/components/btngroup/btngroup.module.scss

@@ -0,0 +1,41 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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/src/components/btngroup/btngroup.ts

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

package/src/components/button/button.module.scss

@@ -0,0 +1,173 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file button.module.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.
+ **/
+
+@use "../shared.scss";
+
+:root {
+	--button-background: var( --accent-background );
+	--button-color: var( --accent-color );
+
+	--button-background-hover: var( --accent-background-hover );
+	--button-color-hover: var( --accent-color-hover );
+
+	--button-background-active: var( --accent-background-active );
+	--button-color-active: var( --accent-color-active );
+
+	--button-background-focus: var( --accent-background-focus );
+	--button-color-focus: var( --accent-color-focus );
+
+	--button-background-disabled: var( --disabled-background );
+	--button-color-disabled: var( --disabled-color );
+
+	--button-icon-color: rgb(255 255 255 / 64%);
+
+	// outline
+	--ol-button-background: var( --background-primary );
+	--ol-button-background-active: #ccc;
+	--ol-button-color-active: var( --text-primary );
+	--ol-button-background-hover: #eee;
+	--ol-button-color-hover: var( --text-primary );
+	--ol-button-color-disabled: #ccc;
+
+	--ol-button-color: var( --text-primary );
+	--ol-button-border: var( --border );
+	--ol-button-icon-color: var( --text-primary );
+
+	--ol-button-border-focus: var( --accent-background-focus );
+	--ol-button-color-focus: var( --accent-background );
+}
+
+.x4button {
+	@extend .hbox;
+	
+	margin: 5px;
+	gap: 4px;
+
+	font-size: inherit;
+	font-family: inherit;
+	
+	padding: 8px;
+	margin: 2px;
+	transition: background-color 0.3s, color 0.3s;
+	
+	border: none;
+	outline: none;
+	cursor: pointer;
+	
+	background-color: var( --button-background );
+	color: var( --button-color );
+
+	gap: 0.4em;
+		
+	&> #icon {
+		transition: color 0.3s, fill 0.3s;
+		fill: var( --button-color );
+
+		width: 1em;
+		height: 1em;
+		//color: var( --button-icon-color );
+
+		&.empty {
+			display: none;
+		}
+	}
+
+	&> #label {
+		flex-grow: 1;
+
+		padding: 0;
+		color: inherit;
+
+		&.empty {
+			display: none;
+		}
+	}
+
+	&:focus {
+		background-color: var( --button-background-focus );
+		color: var( --button-color-focus );
+		#icon {
+			color: var( --button-color-focus );
+		}
+
+		#label {
+			text-decoration: underline;
+		}
+	}
+
+	&:hover {
+		background-color: var( --button-background-hover );
+		color: var( --button-color-hover );
+	}
+
+	&:active{
+		background-color: var( --button-background-active );
+		color: var( --button-color-active );
+	}	
+
+	&[disabled] {
+		cursor: not-allowed;
+		background-color: var( --button-background-disabled );
+		color: var( --button-color-disabled );
+	}
+}
+
+.x4button.outline {
+	background-color: var( --ol-button-background );
+	border: 1px solid var( --ol-button-border );
+	color: var( --ol-button-color );
+
+	#icon {
+		color: var( --ol-button-icon-color );
+		fill: var(--ol-button-icon-color);
+	}
+
+	&:focus{
+		border-color: var( --ol-button-border-focus );
+		color: var( --ol-button-color-focus );
+		fill: var( --ol-button-color-focus );
+		#icon {
+			color: var( --ol-button-color-focus );
+			fill: var( --ol-button-color-focus );
+		}
+	}
+
+	&:hover{
+		background-color: var( --ol-button-background-hover );
+		color: var( --ol-button-color-hover );
+		fill: var( --ol-button-color-hover );
+	}	
+
+	&:active{
+		background-color: var( --ol-button-background-active );
+		color: var( --ol-button-color-active );
+		fill: var( --ol-button-color-active );
+
+		#icon {
+			color: var( --button-icon-color );
+			fill: var( --button-icon-color );
+		}
+	}	
+}
+
+.x4button.danger:not([disabled]) {
+	background-color: var( --alert-background );
+	color: var( --alert-color );
+
+	&:active {
+		background-color: var( --alert-background-active );
+	}
+}

package/src/components/button/button.ts

@@ -0,0 +1,185 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file button.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, EvClick } from "../../core/component"
+import { EventCallback } from '../../core/core_events.js';
+import { class_ns, UnsafeHtml } from '../../core/core_tools.js';
+
+import { Icon } from "../icon/icon"
+
+import "./button.module.scss";
+
+
+/**
+ * Button events
+ */
+
+interface ButtonEvents extends ComponentEvents {
+	click: EvClick;
+}
+
+/**
+ * Button properties.
+ */
+
+export interface ButtonProps extends ComponentProps {
+	label?: string;
+	icon?: string;
+	tabindex?: boolean | number;
+	autorepeat?: number | boolean;
+	click?: EventCallback<EvClick>;
+}
+
+/**
+ * Button component.
+ */
+
+@class_ns( "x4" )
+export class Button extends Component<ButtonProps,ButtonEvents> {
+
+	#text: Component;
+
+	/**
+     * Creates an instance of Button.
+     * 
+     * @param props - The properties for the button component, including label and icon.
+     * @example
+     * const button = new Button({ label: 'Submit', icon: 'check-icon' });
+     */
+
+	constructor( props: ButtonProps ) {
+		super( { ...props, tag: 'button', content: null } );
+
+		this.mapPropEvents( props, 'click' );
+
+		if( props.autorepeat ) {
+			this.addDOMEvent('pointerdown', (e) => this._on_mouse(e) );
+			this.addDOMEvent('pointerup', (e) => this._on_mouse(e) );
+		}
+		else {
+			this.addDOMEvent('click', (e) => this._on_click(e));
+		}
+
+		this.addDOMEvent('keydown', (e) => this._on_keydown(e) );
+
+		this.setContent( [
+			new Icon( { id: "icon", iconId: this.props.icon } ),
+			this.#text = new Component( { id: "label" } ),
+		] );
+
+		this.setText( props.label );
+
+		if( props.tabindex!==false ) {
+			this.setAttribute( 'tabindex', props.tabindex );
+		}
+	}
+
+	/**
+	 * called by the system on click event
+	 */
+
+	protected _on_click( ev: MouseEvent ) {
+
+		//if (this.m_props.menu) {
+		//	let menu = new Menu({
+		//		items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
+		//	});
+		//
+		//	let rc = this.getBoundingRect();
+		//	menu.displayAt(rc.left, rc.bottom, 'tl');
+		//}
+		//else {
+			this.fire('click', {} );
+		//}
+
+		ev.preventDefault();
+		ev.stopPropagation();
+	}
+
+	protected _on_mouse( e: PointerEvent ) {
+
+		let count = 0;
+
+		if( e.type=='pointerdown' ) {
+			this.dom.setPointerCapture( e.pointerId );
+
+			const rt = this.props.autorepeat===true ? 200 : this.props.autorepeat as number;
+
+			this.setTimeout( 'repeat', 500, ( ) => {
+				count++;
+
+				this.fire('click', {} );
+				this.setInterval( 'repeat', rt, ( ) => {
+					this.fire('click', {} );
+				})
+			} );
+		}
+		else {
+			this.clearTimeout( 'repeat' );
+
+			if( !count ) {
+				this.fire('click', {} );
+			}
+		}
+	}
+
+	/**
+	 * simulate a click
+	 */
+
+	click( ) {
+		(this.dom as HTMLButtonElement).click( );
+	}
+
+	/**
+	 * called on key down
+	 */
+
+	protected _on_keydown( e: KeyboardEvent ) {
+		if( e.key=='Enter' ) {
+			this.click( );
+			e.preventDefault( );
+		}
+	}
+
+	/**
+     * Sets the text content of the button's label.
+     * 
+     * @param text - The new text or HTML content for the label.
+     * @example
+     * button.setText('Click Me');
+     * button.setText(new UnsafeHtml('<b>Bold Text</b>'));
+     */
+
+	public setText( text: string | UnsafeHtml ) {
+		this.#text.setContent( text );
+		this.#text.setClass( "empty", !text );
+	}
+	
+	/**
+     * Sets the icon of the button.
+     * 
+     * @param icon - The new icon ID to set on the button.
+     * @example
+     * button.setIcon('new-icon-id');
+     */
+
+	public setIcon( icon: string ) {
+		this.query<Icon>( "#icon" ).setIcon( icon );
+	}
+
+}
+

package/src/components/calendar/calendar-check-sharp-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M128 16l0-16L96 0l0 16 0 48L32 64 0 64 0 96l0 64 0 32L0 480l0 32 32 0 384 0 32 0 0-32 0-288 0-32 0-64 0-32-32 0-64 0 0-48 0-16L320 0l0 16 0 48L128 64l0-48zM32 192l384 0 0 288L32 480l0-288zm0-96l384 0 0 64L32 160l0-64zM331.3 283.3L342.6 272 320 249.4l-11.3 11.3L208 361.4l-52.7-52.7L144 297.4 121.4 320l11.3 11.3 64 64L208 406.6l11.3-11.3 112-112z"/></svg>