x4js 2.0.13 → 2.0.15

package/src/components/header/header.module.scss

@@ -0,0 +1,40 @@
+@use "../shared.scss";
+
+:root {
+	--header-background-hover: rgba(100,100,100,0.1);
+	--header-sizer-hover: var( --border-hover );
+}
+
+.x4header {
+	@extend .flex;
+	width: 100%;
+
+	overflow: hidden;
+	min-height: 2em;
+	border-bottom: 1px solid var( --border );
+
+
+	.cell {
+		border-bottom: 1px solid transparent;
+		overflow: hidden;
+		min-width: 3rem;
+
+		transition: border-color 0.5s ease;
+		padding: 4px;
+
+		span {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+		
+		&:hover {
+			background-color: var( --header-background-hover );
+		}
+
+		.x4csizer:hover {
+			border-right: 1px solid var( --header-sizer-hover );
+		}
+	}
+
+}

package/src/components/header/header.ts

@@ -0,0 +1,130 @@
+import { class_ns } from '@core/core_tools.js';
+import { Component, ComponentProps } from '../../core/component.js';
+import { HBox } from '../boxes/boxes.js';
+import { Label } from '../label/label.js';
+import { CSizer } from '../sizers/sizer.js';
+
+import "./header.module.scss"
+
+interface HeaderItem {
+	name: string;
+	title: string;
+	iconId?: string;
+	width?: number;	// <0 for flex
+}
+
+interface HeaderProps extends Omit<ComponentProps,"content"> {
+	items: HeaderItem[]
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Header extends HBox<HeaderProps> {
+
+	private _els: Component[];
+	private _vwp: Component;
+
+	constructor( props: HeaderProps ) {
+		super( props );
+
+		this._els = props.items?.map( x => {
+			const cell = new Label( { cls: "cell", text: x.title, icon: x.iconId } );
+			const sizer = new CSizer( "right" );
+			
+			if( x.width>0 ) {
+				cell.setStyleValue( "width", x.width+'px' );
+				cell.setInternalData( "width", x.width );
+			}
+			else if( x.width<0 ) {
+				cell.setInternalData( "flex", -x.width );
+			}
+			else {
+				cell.setInternalData( "width", 0 );
+			}
+
+			sizer.addDOMEvent( "dblclick", ( e: MouseEvent ) => {
+				cell.setInternalData( "flex", 1 );
+				this._calc_sizes( );
+			})
+
+			sizer.on( "resize", ( ev ) => {
+				//cell.setStyleValue( "flexGrow", "0" );
+				cell.setInternalData("flex",0);
+				cell.setInternalData("width",ev.size);
+				this._calc_sizes( );
+			});
+
+			cell.appendContent( sizer );
+			cell.setInternalData( "data", x );
+
+			return cell;
+		});
+
+		this.addDOMEvent( "resized", ( ) => this._on_resize() );
+		this.addDOMEvent( "created", ( ) => this._calc_sizes( ) );
+
+		this._vwp = new HBox( { content: this._els } );
+		this.setContent(  this._vwp );
+	}
+
+	private _calc_sizes( ) {
+
+		let count = 0;
+		let filled = 0;
+
+		this._els.forEach( c => {
+			const flex = c.getInternalData( "flex" );
+			if( flex ) {
+				count += flex;
+			}
+			else {
+				let width = c.getInternalData( "width" );
+				if( width==0 ) {
+					const rc = c.getBoundingRect( );
+					width = Math.ceil( rc.width )+2;
+					c.setInternalData( "width", width );
+				}
+					
+				filled += width;
+			}
+		} );
+
+		const rc = this.getBoundingRect( );
+		
+		let rest = (rc.width-filled);
+		const unit = Math.ceil( rest/count );
+
+		console.log( "filled", filled );
+		console.log( "count", count );
+		console.log( "rest", rest );
+		console.log( "unit", unit );
+		
+		let fullw = 0;
+		this._els.forEach( c => {
+			let width = 0;
+
+			const flex = c.getInternalData( "flex" );
+			if( flex ) {
+				width = Math.min( unit*flex, rest );
+				rest -= width;
+			}
+			else {
+				width = c.getInternalData( "width" );
+			}
+
+			c.setWidth( width );
+			fullw += width;
+		} );
+
+		this._vwp.setWidth( fullw );
+	}
+
+	private _on_resize( ) {
+		this._calc_sizes( );
+	}
+
+
+}

package/src/components/icon/icon.module.scss

@@ -0,0 +1,31 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file icon.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";
+
+.x4icon {
+	@extend .hbox;	
+
+	min-width: 10px;
+	height: 10px;
+    overflow: hidden;
+	aspect-ratio: 1 / 1;
+    
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+}

package/src/components/icon/icon.ts

@@ -0,0 +1,137 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file icon.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, ComponentProps } from '../../core/component';
+
+import "./icon.module.scss"
+
+type solveCallback = (data:string)=>void;
+
+/**
+ * 
+ */
+
+class SvgLoader {
+	private cache: Map<string,string>;
+	private waiters: Map<string,solveCallback[]>;
+
+	constructor( ) {
+		this.cache = new Map( );
+		this.waiters = new Map( );
+	}
+
+	async load( file: string ): Promise<string> {
+
+		if( this.cache.has(file) ) {
+			return Promise.resolve( this.cache.get(file) );
+		}
+
+		return new Promise( (resolve,reject) => {
+			if( this.waiters.has(file) ) {
+				this.waiters.get(file).push( resolve );
+			}
+			else {
+				this.waiters.set( file, [resolve] );
+				this._load( file )
+					.then( ( data: string ) => {
+						this.cache.set( file, data );
+						const ww = this.waiters.get( file );
+						ww.forEach( cb => cb(data ) );
+					})
+			}
+		});
+	}
+
+	private async _load( file: string ): Promise<string> {
+		const res = await fetch( file );
+		if( res.ok ) {
+			return res.text( );
+		}
+	}
+
+}
+
+export const svgLoader = new SvgLoader( );
+
+/**
+ * 
+ */
+
+export interface IconProps extends ComponentProps {
+	iconId?: string;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Icon extends Component<IconProps> {
+
+	constructor( props: IconProps ) {
+		super( props );
+
+		this.setIcon( props.iconId );
+	}
+
+	/**
+	 * change the icon content
+	 * @param iconId if name is starting with var: then we use css variable name a path
+	 * @example
+	 * 
+	 * setIcon( "var:home" )
+	 * 
+	 * import myicon from "./myicon.svg"
+	 * setIcon( myicon );
+	 * 
+	 */
+
+	setIcon( iconId: string ) {
+		this.clearContent( );
+			
+		if( iconId ) {
+			if( iconId.startsWith('var:') ) {
+				do {
+					const path = iconId.substring( 4 );
+					iconId = document.documentElement.style.getPropertyValue( path );
+				} while( iconId.startsWith('var:') );
+			} 
+
+			if( iconId.startsWith("data:image/svg+xml,<svg") ) {
+				this.dom.insertAdjacentHTML('beforeend', iconId.substring(19) );
+			}
+			else if( iconId.endsWith(".svg") ) {
+				svgLoader.load( iconId ).then( svg => {
+					this.clearContent( );
+					this.dom.insertAdjacentHTML('beforeend', svg );
+				});
+			}
+			else {
+				this.setContent( new Component( { tag: "img", attrs: { src: iconId } } ) );
+			}
+
+			this.removeClass( "empty" );
+		}
+		else {
+			this.addClass( "empty" );
+		}
+	}
+}
+
+
+
+

package/src/components/image/image.module.scss

@@ -0,0 +1,28 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file image.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.
+ **/
+
+:root {
+	--image-border-drop-hover: var( --accent-background );
+}
+
+.x4image {
+	position: relative;
+	background: none;
+
+	&.hit {
+		border-color: var( --image-border-drop-hover ) !important;
+	}
+}

package/src/components/image/image.ts

@@ -0,0 +1,168 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file image.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';
+import { Component, ComponentEvents, ComponentProps } from '../../core/component';
+import { EventCallback, CoreEvent } from '../../core/core_events.js';
+import { dragManager } from '../../core/core_dragdrop.js';
+
+import { EvDropChange, FileDialog } from '../filedrop/filedrop';
+import { Menu } from '../menu/menu';
+
+
+
+import "./image.module.scss"
+import { _tr } from '@core/core_i18n.js';
+
+
+interface ImageEvents extends ComponentEvents {
+	change: EvDropChange;
+	clear: CoreEvent;
+}
+export interface ImageProps extends ComponentProps {
+	src: string;
+	fit?: "contain" | "cover" | "fill" | "scale-down";
+	position?: string;
+	lazy?: boolean;
+	alt?: string;
+	draggable?: boolean;
+
+	candrop?: boolean;
+	accept?: string;	// ex: 'image/*'
+
+	change?: EventCallback<EvDropChange>;
+	clear?: EventCallback<CoreEvent>;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Image<P extends ImageProps = ImageProps, E extends ImageEvents = ImageEvents> extends Component<P,E> {
+
+	private _img: Component;
+
+	constructor( props: P ) {
+		super( props );
+
+		this._img = new Component( {
+			tag: "img",
+			attrs: {
+				loading: props.lazy,
+				alt: props.alt,
+				draggable: props.draggable ?? false,
+			},
+			style: {
+				width: "100%",
+				height: "100%",
+				objectFit: props.fit,
+				objectPosition: props.position,
+			}
+		})
+		
+		this.setContent( this._img );
+		this.setImage( props.src );
+
+		if( props.candrop ) {
+			this.mapPropEvents( props, "change", "clear" );
+
+			let fileDialog = new FileDialog( {
+				accept: props.accept,
+				multiple: false,
+				callback: ( files ) => {
+					this.fire( "change", { files } );
+				},
+			});
+
+			this.appendContent( fileDialog );
+
+			this.addDOMEvent( "click", ( ) => fileDialog.showDialog() );
+
+			const filterInput = ( _: Component, data: DataTransfer ) => {
+				// check that input is of type image
+				if( data.items?.length ) {
+					const type = data.items[0].type;
+					if( /image\/.*/.test(type) ) {
+						return true;
+					}
+				}	
+
+				return false;
+			}
+
+			dragManager.registerDropTarget( this, async ( cmd, el, infos ) => {
+				if( cmd=="enter" ) {
+					this.addClass( "hit" );
+				}
+				else if( cmd=='leave' ) {
+					this.removeClass( "hit" );
+				}
+				else if( cmd=='drop' ) {
+					if( infos.data.files && infos.data.files.length>0 ) {
+						const files = infos.data.files;
+						this.fire( "change", { files } );
+					}
+				}
+			}, filterInput );
+
+			this.addDOMEvent( "contextmenu", ( ev ) => {
+				const menu = new Menu( {
+					items: [
+						{ text: _tr.global.cut, click: ( ) => {
+							this.fire( "clear", {} );
+						} },
+					]
+				});
+
+				menu.displayAt( ev.pageX, ev.pageY );
+				ev.stopPropagation( );
+				ev.preventDefault( );
+			});
+		}
+	}
+
+	/**
+	 * 
+	 */
+	
+	setImage( src: string ) {
+		if( src ) {
+			this._img.setAttribute( "src", src );
+		}
+		else {
+			this.clear( );
+		}
+	}
+
+	/**
+	 * 
+	 */
+	
+	setBase64( mime: string, base64: string ) {
+		this.setImage( "data:"+mime+";base64,"+base64 );
+	}
+
+	/**
+	 * 
+	 */
+
+	clear( ) {
+		this._img.setAttribute( "src", 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' );
+	}
+}
+
+

package/src/components/input/input.module.scss

@@ -0,0 +1,74 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file input.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.
+ **/
+
+:root {
+	--input-sel-background: var( --accent-background );
+	--input-sel-color: var( --accent-color );
+	--input-placeholder: var( --disabled-background );
+	--input-error: var( --alert-background );
+
+	--input-checkbox-color: var( --accent-background );
+}
+
+input.x4input {
+	font: inherit;
+	outline: none;
+	
+	border: none;
+
+	&::selection {
+		background-color: var( --input-sel-background );
+		color: var( --input-sel-color );
+	}
+	
+	&[type="text"], 
+	&[type="password"],
+	&[type="date"],
+	&[type="number"],
+	&[type="email"] {
+		padding: 4px 4px;
+	}
+
+	&[type="checkbox"]:checked,
+	&[type="radio"]:checked {
+		accent-color: var( --input-checkbox-color );
+		padding: 2px;
+	}
+
+	&[type="range"] {
+		accent-color: var( --input-checkbox-color );
+	}
+
+	&::placeholder {
+		color: var( --input-placeholder );
+		font-style: italic;
+		font-weight: 90%;
+
+	}
+
+	&[type="password"] {
+		font-weight: bold;
+	}
+
+	&:disabled {
+		background-color: transparent;
+	}
+
+	&:invalid {
+		color: var( --input-error );
+	}
+}
+