x4js 2.0.13 → 2.0.14

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

@@ -27,4 +27,4 @@
 		width: 100%;
 		height: 100%;
 	}
-}
+}

package/lib/src/components/icon/icon.ts

@@ -103,6 +103,8 @@ export class Icon extends Component<IconProps> {
 	 */
 
 	setIcon( iconId: string ) {
+		this.clearContent( );
+			
 		if( iconId ) {
 			if( iconId.startsWith('var:') ) {
 				do {
@@ -123,9 +125,10 @@ export class Icon extends Component<IconProps> {
 			else {
 				this.setContent( new Component( { tag: "img", attrs: { src: iconId } } ) );
 			}
+
+			this.removeClass( "empty" );
 		}
 		else {
-			this.clearContent( );
 			this.addClass( "empty" );
 		}
 	}

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

@@ -14,8 +14,15 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
+:root {
+	--image-border-drop-hover: var( --accent-background );
+}
 
-.x-image {
+.x4image {
 	position: relative;
 	background: none;
+
+	&.hit {
+		border-color: var( --image-border-drop-hover ) !important;
+	}
 }

package/lib/src/components/image/image.ts

@@ -14,11 +14,24 @@
  * 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.js';
+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";
@@ -26,6 +39,12 @@ export interface ImageProps extends ComponentProps {
 	lazy?: boolean;
 	alt?: string;
 	draggable?: boolean;
+
+	candrop?: boolean;
+	accept?: string;	// ex: 'image/*'
+
+	change?: EventCallback<EvDropChange>;
+	clear?: EventCallback<CoreEvent>;
 }
 
 /**
@@ -33,11 +52,11 @@ export interface ImageProps extends ComponentProps {
  */
 
 @class_ns( "x4" )
-export class Image extends Component<ImageProps> {
+export class Image<P extends ImageProps = ImageProps, E extends ImageEvents = ImageEvents> extends Component<P,E> {
 
 	private _img: Component;
 
-	constructor( props: ImageProps ) {
+	constructor( props: P ) {
 		super( props );
 
 		this._img = new Component( {
@@ -57,6 +76,63 @@ export class Image extends Component<ImageProps> {
 		
 		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( );
+			});
+		}
 	}
 
 	/**
@@ -64,6 +140,29 @@ export class Image extends Component<ImageProps> {
 	 */
 	
 	setImage( src: string ) {
-		this._img.setAttribute( "src", src );
+		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

@@ -19,6 +19,8 @@
 	--input-sel-color: var( --accent-color );
 	--input-placeholder: var( --disabled-background );
 	--input-error: var( --alert-background );
+
+	--input-checkbox-color: var( --accent-background );
 }
 
 input.x4input {
@@ -34,17 +36,20 @@ input.x4input {
 	
 	&[type="text"], 
 	&[type="password"],
+	&[type="date"],
+	&[type="number"],
 	&[type="email"] {
-		padding: 8px 4px;
+		padding: 4px 4px;
 	}
 
 	&[type="checkbox"]:checked,
 	&[type="radio"]:checked {
-		accent-color: var( --color-80 );
+		accent-color: var( --input-checkbox-color );
+		padding: 2px;
 	}
 
 	&[type="range"] {
-		accent-color: var( --color-60 );
+		accent-color: var( --input-checkbox-color );
 	}
 
 	&::placeholder {

package/lib/src/components/input/input.ts

@@ -14,13 +14,18 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentProps } from '../../core/component';
-import { class_ns, IComponentInterface, IFormElement } from '../../core/core_tools.js';
+import { EventCallback } from '@core/core_events.js';
+import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus } from '../../core/component';
+import { class_ns, IComponentInterface, IFormElement, isString } from '../../core/core_tools.js';
 
 import "./input.module.scss"
 
 export interface BaseProps extends ComponentProps {
 	name?: string;
+	autofocus?: boolean;
+
+	focus?: EventCallback<EvFocus>;
+	change?: EventCallback<EvChange>;
 }
 
 interface CheckboxProps extends BaseProps {
@@ -66,38 +71,51 @@ interface FileProps extends BaseProps {
 }
 
 export interface TextInputProps extends BaseProps {
-	type: "text" | "email" | "password";
+	type: "text" | "email" | "password" | "date" | "number";
 	readonly?: boolean;
 	required?: boolean;
 	pattern?: string;
-	value: string | number;
+	value?: string | number;
 	placeholder?: string;
 	spellcheck?: boolean;
+	minlength?: number;
+	maxlength?: number;
 }
 
 
 export type InputProps = CheckboxProps | RadioProps | TextInputProps | RangeProps | DateProps | NumberProps | FileProps;
 
 
+interface InputEvents extends ComponentEvent {
+	focus: EvFocus;
+	change: EvChange;
+}
+
 
 /**
  * 
  */
 
 @class_ns( "x4" )
-export class Input extends Component<InputProps> {
+export class Input extends Component<InputProps,InputEvents> {
 	constructor( props: InputProps ) {
 		super( { tag: "input", ...props } );
 
+		this.mapPropEvents( props, "focus", "change" );
+
 		this.setAttribute( "type", props.type ?? "text" );
 		this.setAttribute( "name", props.name );
+
+		if( props.autofocus===true ) {
+			this.setAttribute( "autofocus", true );
+		}
 					
 		switch( props.type ) {
 			case "checkbox":
 			case "radio": {
 				const ck = this.dom as HTMLInputElement;
 				ck.checked = props.checked;
-				ck.value = props.value+"";
+				ck.value = props.value === undefined ? "" : props.value+"";
 				//this.setAttribute( "checked", props.checked );
 				//this.setAttribute( "value", props.value );
 				break;
@@ -112,12 +130,27 @@ export class Input extends Component<InputProps> {
 			}
 
 			case "number": {
-				this.setAttribute( "required", props.required );
-				this.setAttribute( "readonly", props.readonly );
-				this.setAttribute( "min", props.min );
-				this.setAttribute( "max", props.max );
-				this.setAttribute( "step", props.step );
-				this.setAttribute( "value", props.value+'' );
+				const p = this.props as NumberProps;
+				
+				this.setAttribute( "required", p.required );
+				this.setAttribute( "readonly", p.readonly );
+				this.setAttribute( "min", p.min );
+				this.setAttribute( "max", p.max );
+				this.setAttribute( "step", p.step );
+				//this.setAttribute( "value", p.value+'' );
+				this.setNumValue( isString(p.value) ? parseFloat(p.value) : p.value, -2 );
+
+				this.addDOMEvent( "wheel", ( e: WheelEvent ) => {
+					if( this.hasFocus() ) { // only if has focus
+						e.preventDefault( );
+						let v = this.getNumValue();
+						const delta = e.deltaY < 0 ? 1 : -1;
+						v += (p.step ? p.step : 1) * delta;
+						this.setNumValue( v, -2 );
+
+						this.dom.dispatchEvent(new Event('input')); 
+					}
+				}, );
 				break;
 			}
 
@@ -168,9 +201,48 @@ export class Input extends Component<InputProps> {
 					this.setAttribute( "spellcheck", false );
 				}
 
+				if( props.minlength!==undefined ) {
+					this.setAttribute( "minlength", props.minlength );
+				}
+				
+				if( props.maxlength!==undefined ) {
+					this.setAttribute( "maxlength", props.maxlength );
+				}
+
 				break;
 			}
 		}
+
+		this.addDOMEvent( "blur", ( e ) => { this.on_focus(e,true);} );
+		this.addDOMEvent( "focus", ( e ) => { this.on_focus(e,false);} );
+		this.addDOMEvent( "input", ( e ) => { this.on_change(e as InputEvent); });
+	}
+
+	/**
+	 * 
+	 */
+
+	private on_focus( ev: FocusEvent, focus_out: boolean ) {
+		const event: EvFocus = { focus_out }
+		this.fire( "focus", event );
+
+		if( event.defaultPrevented ) {
+			ev.preventDefault( );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private on_change( ev: InputEvent ) {
+
+		const event: EvChange = { value: this.getValue() };
+		this.fire( "change", event );
+
+		if( event.defaultPrevented ) {
+			ev.preventDefault( );
+		}
 	}
 
 	/**
@@ -202,12 +274,46 @@ export class Input extends Component<InputProps> {
 	/**
 	 * 
 	 * @param value 
+	 * @param ndec number of decimals or -1 for auto, -2 as prop.step
+	 * 
 	 */
 
-	public setNumValue( value: number ) {
+	public setNumValue( value: number, ndec = -1 ) {
+		
+		if( ndec==-2 && this.props.type=='number' ) {
+			const p = this.props as NumberProps;
+
+			if( p.step ) {
+				let ndec = -Math.floor(Math.log10(p.step ?? 1) );
+				return this.setValue( value.toFixed(ndec) );
+			}
+		}
+		else if( ndec>=0 ) {
+			return this.setValue( value.toFixed(ndec) );
+		}
+
 		this.setValue( value+"" );
 	}
 
+	/**
+	 * @return the checked value
+	 */
+
+	public getCheck() {
+		const d = this.dom as HTMLInputElement;
+		return d.checked;
+	}
+
+	/**
+	 * change the checked value
+	 * @param {boolean} ck new checked value	
+	 */
+
+	public setCheck(ck: boolean) {
+		const d = this.dom as HTMLInputElement;
+		d.checked = ck;
+	}
+
 	/**
 	 * 
 	 */
@@ -250,6 +356,22 @@ export class Input extends Component<InputProps> {
 		};
 	}
 
+	/**
+	 * 
+	 */
+
+	public isValid( ) {
+
+		if( (this.props as any).required ) {
+			const v = this.getValue( );
+			if( v==="" ) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
 	/**
 	 * 
 	 */
@@ -258,7 +380,8 @@ export class Input extends Component<InputProps> {
 		if( name=="form-element" ) {
 			const i: IFormElement = {
 				getRawValue: ( ): any => { return this.getValue(); },
-				setRawValue: ( v: any ) => { this.setValue(v); }
+				setRawValue: ( v: any ) => { this.setValue(v); },
+				isValid: ( ) => { return this.isValid(); }
 			};
 
 			//@ts-ignore

package/lib/src/components/keyboard/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>

package/lib/src/components/keyboard/delete-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M576 128c0-35.3-28.7-64-64-64L205.3 64c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7L512 448c35.3 0 64-28.7 64-64l0-256zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>

package/lib/src/components/keyboard/eye-slash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="currentColor"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"/></svg>

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

@@ -0,0 +1,134 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file keyboard.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 {
+	--keyboard-key-background: #33302d;
+	--keyboard-hilite-color: #5ba921;
+}
+
+.x4keyboard {
+	z-index: 2000;
+    position: absolute !important;
+    width: 100vw;
+	height: 14rem;
+	bottom: 0;
+
+	background-color: rgba(0,0,0,0.9);
+	
+	box-sizing: border-box;
+	padding: 4px;
+
+	#kb {
+		width: 100vw;
+		max-width: 800px;
+	}
+	
+	.line {
+		flex-grow: 10;
+		position: relative;
+	}
+
+	.mi {
+		font-family: 'Material Icons';
+		font-size: 22px;
+		text-align: center;
+	}
+	
+	.tch {
+		cursor: pointer;
+
+		flex-grow: 10;
+		flex-basis: 44px;
+
+		display: flex;
+		align-items: center;
+		
+		div {
+			width: 100%;
+		}
+		
+		color: white;
+		text-align: center;
+		
+		background-color: var( --keyboard-key-background);
+		border: 1px solid var( --keyboard-key-background);
+
+		border-radius: 4px;
+		margin: 2px 4px;
+		box-sizing: border-box;
+
+		&:hover {
+			border: 1px solid var( --keyboard-hilite-color);
+		}
+
+		&:active {
+			background-color: var( --keyboard-hilite-color);
+			color: var( --keyboard-key-background);
+		}
+	}
+
+
+	.cplace {
+		visibility: hidden;
+	}
+
+	.kbicon {
+		div {
+			width: 0;
+		}
+	}
+
+	.cret {
+		color: var( --keyboard-hilite-color);
+		font-weight: bold;
+	}
+
+	.cdel,
+	.cshift,
+	.chide {
+		.x4icon {
+			margin: auto;
+			color: var( --keyboard-hilite-color);
+		}
+	}
+
+	//		color: rgba(255,255,255,0.3);
+
+	.lower,
+	.upper {
+
+		.cspace { 
+			flex-basis: 689px;
+		}
+
+		.cret {
+			flex-basis: 84px;
+		}
+
+		.cshift {
+			flex-basis: 60px;
+		}
+
+		.chide {
+			flex-basis: 88px;
+		}
+
+		.cnum {
+			flex-basis: 88px;
+		}
+	}
+}
+