x4js 2.0.12 → 2.0.14

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

@@ -1,34 +1,38 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file form.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 {
-	--form--background: var( --background-primary );
-}
-
-.x4form {
-	@extend .vbox;
-	@extend .flex;
-
-	padding: 16px;
-	background-color: var( --color-form );
-
-	&>.xcontainer {
-
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file form.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 {
+	--form--background: var( --background-primary );
+}
+
+.x4form {
+	@extend .vbox;
+	@extend .flex;
+
+	padding: 16px;
+	background-color: var( --color-form );
+
+	&.no-flex {
+		flex-grow: 0;
+	}
+
+	&>.xcontainer {
+
+	}
+}
+

package/lib/src/components/form/form.ts

@@ -1,36 +1,172 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file form.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 { Box } from '../boxes/boxes.js';
-
-import "./form.module.scss"
-
-type FormValue = string | number | boolean;
-type FormValues = Record<string,FormValue>;
-
-export class Form extends Box {
-
-	setValues( values: FormValues ) {
-		const items = this.queryAll( "input[name]" );
-		console.log( items );
-	}
-
-	getValues( ): FormValues {
-		const result: FormValues = {};
-		return result;
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file form.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, IFormElement } from '@core/core_tools.js';
+import { Box, BoxProps } from '../boxes/boxes';
+
+import "./form.module.scss"
+
+//type FormValue = string | number | boolean;
+export type FormValues = Record<string,string>;
+
+export interface FormProps extends BoxProps {
+	autoComplete?: boolean;
+}
+
+type ValidationFn = ( values: FormValues, is_valid: boolean ) => boolean;
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Form<P extends FormProps = FormProps> extends Box<P> {
+	
+	private validator: ValidationFn;
+
+	constructor( props: P ) {
+		super( { tag: "form", ...props } );
+
+		if( props.flex===false ) {
+			this.addClass( "no-flex" );
+		}
+
+		if( props.autoComplete!==undefined ) {
+			this.setAutoComplete( props.autoComplete );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private _get_inputs( ) {
+		return this.queryAll( "[name]" );
+	}
+
+	/**
+	 * 
+	 */
+
+	setValues( values: FormValues ) {
+		const items = this._get_inputs( );
+		
+		items.forEach( x => {
+			const ifx = x.queryInterface( "form-element" ) as IFormElement;
+			
+			if( ifx ) {
+				const nme = x.getAttribute( "name" );
+				if( values.hasOwnProperty( nme) ) {
+					ifx.setRawValue( values[nme] );
+				}
+			}
+		});
+
+	}
+
+	/**
+	 * 
+	 */
+
+	getValues( ): FormValues {
+		const result: FormValues = {}
+		const items = this._get_inputs( );
+
+		items.forEach( x => {
+			const ifx = x.queryInterface( "form-element" ) as IFormElement;
+			
+			if( ifx ) {
+				const nme = x.getAttribute( "name" );
+				result[nme] = ifx.getRawValue( );
+			}
+		});
+
+		return result;
+	}
+
+	/**
+	 * 
+	 */
+
+	setAutoComplete( on = true ) {
+		const items = this._get_inputs( );
+		items.forEach( x => {		
+			x.setAttribute( "autocomplete", on ? "on" : "off" );
+		} );
+	}
+
+	/**
+	 * 
+	 */
+
+	setValidator( validator: ValidationFn ) {
+
+		if( !this.validator ) {
+			this.validator = validator;
+			
+			// validation en live des valeurs
+			// disable du bouton ok si pas bon
+			this.addDOMEvent( "focusout", ( ) => this.validate() );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	validate( ): FormValues {
+
+		const items = this._get_inputs( );
+		
+		let result: FormValues = {};
+		let is_valid = true;
+
+		for( let x of items ) {
+			const ifx = x.queryInterface( "form-element" ) as IFormElement;
+			
+			if( ifx ) {
+				const nme = x.getAttribute( "name" );
+				result[nme] = ifx.getRawValue( );
+				if( !ifx.isValid() ) {
+					is_valid = false;
+				}
+			}
+		}
+
+		if( this.validator ) {
+			let new_values = {...result};
+			if( !this.validator( new_values, is_valid ) ) {
+				return null;
+			}
+
+			for( let name in result ) {
+				if( new_values[name] != result[name] ) {
+					const x = this.query( `input[${name}"]` );
+					const ifx = x.queryInterface( "form-element" ) as IFormElement;
+					ifx.setRawValue( new_values[name] );
+				}
+			}
+
+			result = new_values;
+		}
+		else if( !is_valid ) {
+			result = null;
+		}
+
+		return result;
+	}
+}
+

package/lib/src/components/gridview/arrow-down-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="rgba(0,0,0,0.7)"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M180.7 475.3c6.2 6.2 16.4 6.2 22.6 0l176-176c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L208 425.4 208 48c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 377.4L27.3 276.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l176 176z"/></svg>

package/lib/src/components/gridview/arrow-up-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="rgba(0,0,0,0.7)"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M203.3 36.7c-6.2-6.2-16.4-6.2-22.6 0l-176 176c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L176 86.6V464c0 8.8 7.2 16 16 16s16-7.2 16-16V86.6L356.7 235.3c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-176-176z"/></svg>

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

@@ -0,0 +1,324 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file gridview.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 {
+	--gridview-background: white;
+	--gridview-border: var( --border );
+	
+	--gridview-header-cell-background: white;
+	--gridview-header-cell-color: black;
+	--gridview-header-cell-vline: #f0f0f0;
+	--gridview-header-cell-border: #cccccc;
+
+	--grid-check-background: var( --accent-background );
+	--grid-check-color: white;
+	--grid-check-background-hover: white;
+	--grid-check-color-hover: var( --accent-background );
+
+	--grid-perc-background: var( --accent-background );
+	--grid-perc-color: white;
+	--grid-perc-background-hover: white;
+	--grid-perc-color-hover: var( --accent-background );
+
+
+	--gridview-cell-color: black;
+	--gridview-cell-color-sel: white;
+	--gridview-cell-vline: var( --border );
+
+	--gridview-row-background: white;
+	--gridview-row-odd-background: white;
+	--gridview-row-border: var( --border );
+
+	--gridview-row-background-hover: var( --background-secondary );
+	--gridview-row-background-hover-sel: var(--color-primary-a50);
+	--gridview-row-background-sel: var( --accent-background );
+	--gridview-row-color-sel: var( --accent-color );
+
+	--gridview-fix-border: var( --accent-background );
+}
+
+
+
+.x4gridview {
+
+	--left: 0px;
+	--top: 0px;
+	
+	--fixed-width: 0;
+	--fixed-height: 30px;
+	--footer-height: 24px;
+
+	--row-height: 30px;
+	
+	position: relative;
+	overflow: hidden;
+	margin: 5px;
+	outline: none;
+
+	background-color: var( --gridview-background );
+	border: 1px solid var( --gridview-border );
+		
+	.cell {
+		padding: 4px;
+		display: flex;
+		align-items: center;
+		transition: border-bottom-color 0.3s ease, background-color 0.3s ease;
+		min-width: 16px;
+
+		.cell-check {
+			width: 16px;
+			height: 16px;
+			background-color: var( --grid-check-background );
+			color: var( --grid-check-color );
+			padding: 4px;
+			border-radius: 8px;
+			margin: 0 auto;
+		}
+	}
+
+
+	.x4viewport {
+		position: absolute;
+		overflow: auto;
+		right: 0;
+		bottom: var( --footer-height );	
+		left: var( --fixed-width );
+		top: var( --fixed-height );	
+		width: unset;
+	}
+
+	.body {
+		position: absolute;
+		overflow: hidden;
+
+		right: var( --scrollbar-size );
+		bottom: var( --scrollbar-size );
+		left: 0;
+		top: 0;
+	}
+	.row {
+		position: absolute;
+		left: 0;
+		top: 0;
+		display: flex;
+
+		overflow: hidden;
+		height: var( --row-height );
+		border-bottom: 1px solid var( --gridview-row-border );
+
+		.cell {
+			height: 100%;
+			overflow: hidden;
+			white-space: nowrap;
+
+			border-right: 1px solid var( --gridview-cell-vline );
+
+			&> .x4icon:not(.cell-check) {
+				height: 100%;
+			}
+
+			&> .x4image {
+				width: 100%;
+				height: 100%;
+			}
+
+			.percent {
+				width: 100%;
+				border: 1px solid var( --border );
+				height: 8px;
+				background-color: white;
+				overflow: hidden;
+
+				div {
+					background-color: var(--grid-perc-background);
+					height: 100%;
+				}
+			}
+		}
+	}
+
+	.row.selected {
+		background-color: var( --gridview-row-background-sel );
+		color: var( --gridview-cell-color-sel );
+		
+		.cell {
+			
+			.cell-check {
+				background-color: var( --grid-check-background-hover );
+				color: var( --grid-check-color-hover );
+			}
+		}
+	}
+
+	.row:hover:not(.selected),
+	.row.hover:not(.selected) {
+		background-color: var( --gridview-row-background-hover );
+
+		.cell {
+			.cell-check {
+				background-color: var( --grid-check-background-hover );
+				color: var( --grid-check-color-hover );
+			}
+		}
+	}
+
+	.row:hover.selected,
+	.row.hover.selected {
+		background-color: var( --gridview-row-background-hover-sel );
+	//	color: var( --gridview-cell-color );
+	}
+
+	.col-header,
+	.col-footer {
+		position: absolute;
+		background-color: var( --gridview-header-cell-background );
+		touch-action: none;
+
+		
+		left: calc( var( --fixed-width ) + var( --left ) );
+		&.fixed {
+			left: 0;
+			z-index: 2;
+		}
+		
+		z-index: 1;
+
+		display: inline-flex;
+		align-items: center;
+
+		color: black;
+		font-weight: 500;
+		justify-content: center;
+
+		.cell {
+			position: relative;
+			height: 100%;
+			display: flex;
+
+			justify-content: center;
+			border-right: 1px solid var( --gridview-header-cell-vline );
+
+			&> .x4simpletext {
+				flex-grow: 1;
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+
+			.sorter {
+				display: none;
+				flex-shrink: 0;
+				width: 1em;
+			}
+
+			&.sorted .sorter {
+				background-image: url("./arrow-down-light.svg");
+				display: block;
+				width: 20px;
+				height: 0.7em;
+				background-repeat: no-repeat;
+				background-position: 50% 50%;
+			}
+			
+			&.sorted.desc .sorter {
+				background-image: url("./arrow-up-light.svg");
+			}
+			
+			.x-c-sizer:hover {
+				width: 8px;
+			}
+		}
+
+		&.fixed .cell:last-child {
+			border-right-color: var( --gridview-fix-border );
+		}
+
+		&:hover .cell {
+			border-right-color: var( --border-hover );
+		}
+	}
+
+	.col-header {
+		top: 0;
+		height: var( --fixed-height );
+		
+		border-bottom: 1px solid var( --gridview-header-cell-border );
+		
+		.cell {
+			overflow: hidden;
+			border-bottom: 1px solid transparent;
+			
+			&:hover {
+				//background-color: var( --color-10 );
+				border-bottom-color: var( --gridview-row-background-hover );
+			}
+		}
+	}
+	
+	.col-footer {
+		border-top: 1px solid var( --gridview-header-cell-border );
+		height: var( --footer-height );
+		
+		bottom: 0;
+
+		.cell {
+			border-top: 1px solid transparent;
+			
+			&:hover {
+				//background-color: var( --color-10 );
+				//border-top-color: var( --gridview-row-background-hover );
+				background-color: var( --gridview-row-background-hover );
+			}
+		}
+	}
+
+	.row-header {
+		position: absolute;
+		left: 0;
+		top: calc( var( --fixed-height ) + var( --top ) );
+		width: var( --fixed-width );
+		bottom: 0;
+		
+		background-color: white;
+		z-index: 1;
+
+		.row {
+			position: absolute;
+			display: inline-flex;
+		}
+
+		.cell {
+			border-right: 1px solid var( --gridview-cell-vline );
+			border-bottom: 1px solid var(--gridview-row-border );
+			height: var( --row-height );
+
+			&> .x4simpletext {
+				margin: 0 auto;
+			}
+
+			&:last-child {
+				border-right: 1px solid var( --gridview-fix-border );
+			}
+		}
+
+		.cell-out {
+			position: absolute;
+			background-color: var( --color-gray-0 );
+			width: 100%;
+			height: var( --row-height );
+		}
+	}
+}