x4js 1.6.5 → 2.0.2

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

@@ -0,0 +1,30 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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;
+    
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+}

package/src/components/icon/icon.ts

@@ -0,0 +1,134 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 { 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 ) => {
+						console.timeEnd( file );
+						this.cache.set( file, data );
+						const ww = this.waiters.get( file );
+						ww.forEach( cb => cb(data ) );
+					})
+			}
+		});
+	}
+
+	private async _load( file: string ): Promise<string> {
+		console.time( file );
+		const res = await fetch( file );
+		if( res.ok ) {
+			return res.text( );
+		}
+	}
+
+}
+
+export const svgLoader = new SvgLoader( );
+
+/**
+ * 
+ */
+
+export interface IconProps extends ComponentProps {
+	iconId?: string;
+}
+
+/**
+ * 
+ */
+
+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 ) {
+		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 } } ) );
+			}
+		}
+		else {
+			this.clearContent( );
+			this.addClass( "empty" );
+		}
+	}
+}
+
+
+
+

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

@@ -0,0 +1,21 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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.
+ **/
+
+
+.x-image {
+	position: relative;
+	background: none;
+}

package/src/components/image/image.ts

@@ -0,0 +1,67 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 { Component, ComponentProps } from '@core/component.js';
+
+import "./image.module.scss"
+
+export interface ImageProps extends ComponentProps {
+	src: string;
+	fit?: "contain" | "cover" | "fill" | "scale-down";
+	position?: string;
+	lazy?: boolean;
+	alt?: string;
+	draggable?: boolean;
+}
+
+/**
+ * 
+ */
+
+export class Image extends Component<ImageProps> {
+
+	private _img: Component;
+
+	constructor( props: ImageProps ) {
+		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 );
+	}
+
+	/**
+	 * 
+	 */
+	
+	setImage( src: string ) {
+		this._img.setAttribute( "src", src );
+	}
+}

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

@@ -0,0 +1,69 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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.x4input {
+	font: inherit;
+	outline: none;
+	
+	border: none;
+
+	&::selection {
+		background-color: var( --input-sel-background );
+		color: var( --input-sel-color );
+	}
+	
+	&[type="text"], 
+	&[type="password"],
+	&[type="email"] {
+		padding: 8px 4px;
+	}
+
+	&[type="checkbox"]:checked,
+	&[type="radio"]:checked {
+		accent-color: var( --color-80 );
+	}
+
+	&[type="range"] {
+		accent-color: var( --color-60 );
+	}
+
+	&::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 );
+	}
+}
+

package/src/components/input/input.ts

@@ -0,0 +1,274 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file input.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, ComponentProps } from '@core/component';
+import { IComponentInterface, IFormElement } from '@core/core_tools.js';
+
+import "./input.module.scss"
+
+export interface BaseProps extends ComponentProps {
+	name?: string;
+}
+
+interface CheckboxProps extends BaseProps {
+	type: "checkbox";
+	value?: boolean | number | string;
+	checked?: boolean;
+}
+
+interface RadioProps extends BaseProps {
+	type: "radio";
+	value: boolean | number | string;
+	checked?: boolean;
+}
+
+export interface RangeProps extends BaseProps {
+	type: "range";
+	value: number;
+	min: number;
+	max: number;
+	step?: number;
+}
+
+interface DateProps extends BaseProps {
+	type: "date";
+	readonly?: boolean;
+	required?: boolean;
+	value: Date | string;
+}
+
+interface NumberProps extends BaseProps {
+	type: "number";
+	readonly?: boolean;
+	required?: boolean;
+	value: number | string;
+	min?: number;
+	max?: number;
+	step?: number;
+}
+
+interface FileProps extends BaseProps {
+	type: "file";
+	accept: string | string[];
+}
+
+export interface TextInputProps extends BaseProps {
+	type: "text" | "email" | "password";
+	readonly?: boolean;
+	required?: boolean;
+	pattern?: string;
+	value: string | number;
+	placeholder?: string;
+	spellcheck?: boolean;
+}
+
+
+export type InputProps = CheckboxProps | RadioProps | TextInputProps | RangeProps | DateProps | NumberProps | FileProps;
+
+
+
+/**
+ * 
+ */
+
+export class Input extends Component<InputProps> {
+	constructor( props: InputProps ) {
+		super( { tag: "input", ...props } );
+
+		this.setAttribute( "type", props.type ?? "text" );
+		this.setAttribute( "name", props.name );
+					
+		switch( props.type ) {
+			case "checkbox":
+			case "radio": {
+				const ck = this.dom as HTMLInputElement;
+				ck.checked = props.checked;
+				ck.value = props.value+"";
+				//this.setAttribute( "checked", props.checked );
+				//this.setAttribute( "value", props.value );
+				break;
+			}
+
+			case "range": {
+				this.setAttribute( "min", props.min );
+				this.setAttribute( "max", props.max );
+				this.setAttribute( "step", props.step );
+				this.setAttribute( "value", props.value );
+				break;
+			}
+
+			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+'' );
+				break;
+			}
+
+			case "date": {
+				this.setAttribute( "required", props.required );
+
+				let v = props.value;
+				if( v instanceof Date ) {
+					//this.setAttribute( "value", formatDate( v, "Y-M-D" ) );
+				}
+				else {
+					this.setAttribute( "value", v );
+				}
+
+				break;
+			}
+
+			case "file": {
+				let v: string;
+				if( Array.isArray(props.accept) ) {
+					v = props.accept.join("," );
+				}
+				else {
+					v = props.accept;
+				}
+
+				this.setAttribute( "accept", v );
+				break;
+			}
+
+			default: {
+				this.setAttribute( "required", props.required );
+				this.setAttribute( "readonly", props.readonly );
+
+				if( props.value!==null && props.value!==undefined ) {
+					this.setAttribute( "value", props.value );
+				}
+
+				if( props.pattern!==null && props.pattern!==undefined ) {
+					this.setAttribute( "pattern", props.pattern );
+				}
+
+				if( props.placeholder!==null && props.placeholder!==undefined ) {
+					this.setAttribute( "placeholder", props.placeholder );
+				}
+
+				if( props.spellcheck===false ) {
+					this.setAttribute( "spellcheck", false );
+				}
+
+				break;
+			}
+		}
+	}
+
+	/**
+	 * @returns 
+	 */
+
+	public getValue( ) {
+		return (this.dom as HTMLInputElement).value;
+	}
+	
+	/**
+	 * 
+	 * @param value 
+	 */
+	
+	public setValue( value: string ) {
+		(this.dom as HTMLInputElement).value = value+"";
+	}
+
+	/**
+	 * 
+	 * @returns 
+	 */
+	
+	public getNumValue( ) {
+		return parseFloat( this.getValue() );
+	}
+
+	/**
+	 * 
+	 * @param value 
+	 */
+
+	public setNumValue( value: number ) {
+		this.setValue( value+"" );
+	}
+
+	/**
+	 * 
+	 */
+
+	public setReadOnly( ro: boolean ) {
+		const d = this.dom as HTMLInputElement;
+		d.readOnly = ro;
+	}
+
+	/**
+	 * select all the text
+	 */
+
+	public selectAll( ) {
+		const d = this.dom as HTMLInputElement;
+        d.select(); 
+	}
+
+	/**
+	 * select a part of the text
+	 * @param start 
+	 * @param length 
+	 */
+
+	public select( start: number, length: number = 9999 ) : void {
+		const d = this.dom as HTMLInputElement;
+		d.setSelectionRange( start, start+length );
+	}
+
+	/**
+	 * get the selection as { start, length }
+	 */
+
+	public getSelection( ) {
+		const d = this.dom as HTMLInputElement;
+
+		return {
+			start: d.selectionStart,
+			length: d.selectionEnd - d.selectionStart,
+		};
+	}
+
+	/**
+	 * 
+	 */
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ): any => { return this.getValue(); },
+				setRawValue: ( v: any ) => { this.setValue(v); }
+			};
+
+			//@ts-ignore
+			return i as T;
+		}
+		
+		return super.queryInterface( name );
+	}
+}
+
+
+
+
+

package/src/components/label/label.module.scss

@@ -0,0 +1,52 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file label.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 {
+	--label-background: transparent;
+	--label-color: var( --text-ternary );
+	--label-icon-color: rgb(0 0 0 / 44%);
+}
+
+.x4label {
+	@extend .hbox;
+
+	color: var( --label-color );
+	background-color: var( --label-background );
+	text-align: left;
+	gap: 0.2em;
+
+	&.right {
+		text-align: right;
+	}
+
+	&.center {
+		text-align: center;
+	}
+	
+	#icon {
+		width: 1em;
+		margin: 0 0.1em;
+		color: var( --label-icon-color );
+
+		&.empty {
+			display: none;
+		}
+	}
+	
+}
+

package/src/components/label/label.ts

@@ -0,0 +1,55 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file label.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, ComponentProps } from "@core/component"
+import { Icon } from "../icon/icon"
+
+import "./label.module.scss";
+import { UnsafeHtml } from '@core/core_tools.js';
+
+interface LabelProps extends ComponentProps {
+	text?: string | UnsafeHtml;
+	icon?: string;
+	labelFor?: string;
+}
+
+export class Label extends Component<LabelProps> {
+
+	constructor( p: LabelProps ) {
+		super( { ...p, content: null } );
+
+		// small hack for react:
+		//	p.content may be the text
+		
+		this.setContent( [
+			new Icon( { id:"icon", iconId: this.props.icon } ),
+			new Component( { tag: 'span', id: 'text', content: this.props.text ?? p.content } )
+		] );
+
+		if( p.labelFor ) {
+			this.setAttribute( "for", p.labelFor );
+		}
+	}
+
+	setText( text: string | UnsafeHtml ) {
+		this.query( "#text" ).setContent( text );
+	}
+
+	setIcon( icon: string ) {
+		this.query<Icon>( "#icon" ).setIcon( icon );
+	}
+}
+