x4js 2.0.20 → 2.0.22

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

@@ -1,40 +0,0 @@
-@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/lib/src/components/header/header.ts

@@ -1,130 +0,0 @@
-import { class_ns } from '../../core/core_tools';
-import { Component, ComponentProps } from '../../core/component';
-import { HBox } from '../boxes/boxes';
-import { Label } from '../label/label';
-import { CSizer } from '../sizers/sizer';
-
-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/lib/src/components/icon/icon.module.scss

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

@@ -1,137 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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';
-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/lib/src/components/image/image.module.scss

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

@@ -1,168 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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';
-import { dragManager } from '../../core/core_dragdrop';
-
-import { EvDropChange, FileDialog } from '../filedrop/filedrop';
-import { Menu } from '../menu/menu';
-
-
-
-import "./image.module.scss"
-import { _tr } from '../../core/core_i18n';
-
-
-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/lib/src/components/input/input.module.scss

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