x4js 2.0.1 → 2.0.3

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

@@ -1,134 +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 { 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/lib/src/components/image/image.module.scss

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

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

@@ -1,67 +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 { 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/lib/src/components/input/input.module.scss

@@ -1,69 +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.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/lib/src/components/input/input.ts

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

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

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