x4js 2.0.12 → 2.0.14

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

@@ -1,57 +1,57 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file progress.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 {
-	--progress-background: var( --border );
-	--progress-color: var( --accent-background );
-}
-
-.x4progress {
-	background-color: var( --progress-background );
-	position: relative;
-	height: 6px;
-	margin: 0 5px;
-	border-radius: 3px;
-
-	.bar {
-		position: absolute;
-		left: 0;
-		top: 0;
-		bottom: 0;
-		width: 0;
-
-		background-color: var( --progress-color );
-		border-radius: 3px;
-
-		transition: width ease 0.2s;
-	}
-
-	&.indeterm .bar {
-		background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
-		background-size: 20px 20px;
-		animation: slide 1s linear infinite;
-	}
-}
-
-@keyframes slide {
-	0% {
-        background-position: 0 0
-    }
-
-    to {
-        background-position: 2.5rem 0
-    }
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file progress.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 {
+	--progress-background: var( --border );
+	--progress-color: var( --accent-background );
+}
+
+.x4progress {
+	background-color: var( --progress-background );
+	position: relative;
+	height: 6px;
+	margin: 0 5px;
+	border-radius: 3px;
+
+	.bar {
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 0;
+
+		background-color: var( --progress-color );
+		border-radius: 3px;
+
+		transition: width ease 0.2s;
+	}
+
+	&.indeterm .bar {
+		background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
+		background-size: 20px 20px;
+		animation: slide 1s linear infinite;
+	}
+}
+
+@keyframes slide {
+	0% {
+        background-position: 0 0
+    }
+
+    to {
+        background-position: 2.5rem 0
+    }
 }

package/lib/src/components/progress/progress.ts

@@ -1,43 +1,44 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file progress.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 "./progress.module.scss";
-
-interface ProgressProps extends ComponentProps {
-	value: number;
-	min: number;
-	max: number;
-}
-
-
-export class Progress extends Component<ProgressProps> {
-
-	private _bar: Component;
-
-	constructor( props: ProgressProps ) {
-		super( props );
-
-		this.setContent( this._bar=new Component( { cls: "bar" } ) );
-		this.setValue( props.value );
-	}
-
-	setValue( value: number ) {
-		const perc = value / (this.props.max-this.props.min) * 100;
-		this._bar.setStyleValue( "width", perc+"%" );
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file progress.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.js';
+import { Component, ComponentProps } from '../../core/component';
+
+import "./progress.module.scss";
+
+interface ProgressProps extends ComponentProps {
+	value: number;
+	min: number;
+	max: number;
+}
+
+@class_ns( "x4" )
+export class Progress extends Component<ProgressProps> {
+
+	private _bar: Component;
+
+	constructor( props: ProgressProps ) {
+		super( props );
+
+		this.setContent( this._bar=new Component( { cls: "bar" } ) );
+		this.setValue( props.value );
+	}
+
+	setValue( value: number ) {
+		const perc = value / (this.props.max-this.props.min) * 100;
+		this._bar.setStyleValue( "width", perc+"%" );
+	}
 }

package/lib/src/components/propgrid/folder-closed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M32 224l448 0 0 224L32 448l0-224z"/><path class="fa-primary" d="M32 32l192 0 48 64 208 0 32 0 0 32 0 320 0 32-32 0L32 480 0 480l0-32L0 64 0 32l32 0zm240 96l-16 0-9.6-12.8L208 64 32 64l0 128 448 0 0-64-208 0zM32 224l0 224 448 0 0-224L32 224z"/></svg>

package/lib/src/components/propgrid/folder-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M32 64l0 280.4L108.2 192 448 192l0-64-176 0-13.3 0-9.4-9.4L194.7 64 32 64zM51.8 448L384 448l44.2 0 96-192-376.4 0-96 192z"/><path class="fa-primary" d="M272 96L208 32 32 32 0 32 0 64 0 448l0 32 32 0 3.8 0L384 480l64 0L560 256l16-32-35.8 0L128 224 32 416 32 64l162.7 0 54.6 54.6 9.4 9.4 13.3 0 176 0 0 64 32 0 0-64 0-32-32 0L272 96zM51.8 448l96-192 376.4 0-96 192L384 448 51.8 448z"/></svg>

package/lib/src/components/propgrid/progrid.module.scss

@@ -0,0 +1,108 @@
+/**
+ * @file progrid.module.scss
+ * @author Etienne Cochard 
+ * @copyright (c) 2025 InCare
+ **/
+
+:root {
+	--propertygrid-background: white;
+}
+
+.x4propertygrid {
+	background: var( --propertygrid-background );
+	border: 1px solid var(--color-primary-a50);
+	overflow-y: auto;
+    flex-basis: 0;
+	
+	.root {
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-template-rows: auto;
+	}
+
+	.group {
+		padding: 6px 4px 4px 4px;
+		min-height: 2em;
+		font-weight: bold;
+		background-color: white;
+		color: var(--color-primary-a50);
+
+		.x4box > .desc {
+			font-style: italic;
+			font-weight: normal;
+			font-size: 90%;
+			color: var( --text-ternary );
+		}
+
+		&:not(:first-child ) {
+			border-top: 1px solid var(--color-primary-a50);
+		}
+
+		&:not( :last-child ) {
+			border-bottom: 1px solid var(--color-primary-a50);
+			box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
+		}
+		
+		display: flex;
+		align-items: center;
+		padding-left: 8px;
+		gap: 8px;
+
+		&>.x4box {
+			flex-grow: 1;
+		}
+
+		&>.x4icon {
+			.fa-secondary,
+			.fa-primary {
+				fill: var( --color-primary-a50 );
+			}
+
+			width: 1em;
+			height: 1em;
+		}
+
+		&>.x4button {
+			background-color: transparent;
+			color: var(--color-primary-a50);
+		}
+	}
+
+	.row {
+		border-bottom: 1px solid var( --border-light );
+		//border-top: none;
+		//border-left: 1px solid var(--color-primary-a50);
+		//border-right: 1px solid var(--color-primary-a50);
+
+		&:has(:focus) {
+			background-color: var(--color-primary-a20);
+		}
+
+		&:hover {
+			background-color: var(--color-primary-a10);
+		}
+		
+		.cell {
+			flex-grow: 1;
+			flex-basis: 10px;
+	    	padding: 4px;
+
+			&>* {
+				width: 100%;
+			}
+
+			input {
+				background: rgba(255,255,255,0.6);
+			}
+		}
+
+		.cell:first-child {
+			border-right: 1px solid var( --border );
+		}
+
+		.hdr {
+			padding: 8px;
+			padding-left: 34px;
+		}
+	}
+}

package/lib/src/components/propgrid/propgrid.ts

@@ -0,0 +1,271 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file propgrid.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 { Select } from "../select/select"
+import { Button } from "../button/button"
+import { Component, ComponentProps, EvChange, EvFocus } from "../../core/component"
+import { HBox, VBox } from "../boxes/boxes"
+import { Input, InputProps } from "../input/input"
+import { ListItem } from "../listbox/listbox"
+import { SimpleText } from "../label/label"
+import { class_ns, isFunction } from '../../core/core_tools';
+import { Icon } from '../components.js'
+
+import "./progrid.module.scss"
+import updown_icon from "./updown.svg"
+
+
+type IValue = boolean | number | string;
+type IValueCB = ( name: string) => IValue;
+
+export interface PropertyValue {
+	type: 'boolean' | 'number' | 'string' | 'password' | 'options';
+	title?: string;
+	desc?: string;
+	name?: string;
+	value: IValue | IValueCB;
+	options?: ListItem[];
+	callback: ( name: string, value: any ) => void;
+	step?: number;	// for numbers
+	live?: boolean;	// for live update 
+	cls?: string;
+}
+
+export interface PropertyGroup {
+	title: string;
+	desc?: string;
+	icon?: string;
+	cls?: string;
+	collapsible?: boolean;
+
+	items: PropertyValue[];
+}
+
+export interface PropertyProps extends ComponentProps {
+	groups: PropertyGroup[];
+}
+
+@class_ns( "x4" )
+export class PropertyGrid extends VBox {
+
+	private root: Component;
+	private groups: PropertyGroup[];
+
+	constructor(props: PropertyProps) {
+		super(props);
+
+		this.root = new Component({ cls: "root" });
+		this.setContent( this.root );
+
+		if( props.groups ) {
+			this.setItems( props.groups );
+		}
+	};
+
+	/**
+	 * 
+	 */
+
+	setItems( _grps: PropertyGroup[] ) {
+
+		this.groups = _grps;
+		this.groups.sort( (a,b) => {return a.title>b.title ? 1 : 0} );
+
+		let items: Component[] = [];
+
+		for( const g of this.groups ) {
+			items.push( this.makeGroupHeader(g) );
+			g.items.forEach( i => {
+				items.push( this.makePropertyRow(i) );
+			});
+		}
+
+		this.root.setContent( items );
+	}
+
+	/**
+	 * Gets the html of a group header row
+	 * @param {string} displayName - The group display name
+	 * @param {boolean} isCollapsible - Whether the group should support expand/collapse
+	 */
+
+	makeGroupHeader( g: PropertyGroup ) {
+
+		const toggle = (e: Component) => {
+
+			let visible: boolean;
+			if (!e.hasClass("collapsed")) {
+				e.addClass("collapsed");
+				visible = false;
+			}
+			else {
+				e.removeClass("collapsed");
+				visible = true;
+			}
+
+			let p = e.nextElement();
+			while (p && p.hasClass("row")) {
+				p.show(visible);
+				p = p.nextElement();
+			}
+		}
+
+		const tr = new HBox({
+			cls: 'group',
+			content: [
+				g.icon ? new Icon({ id: "icon", iconId: g.icon }) : null,
+				new VBox( { content: [
+					new SimpleText({ cls: "title", text: g.title }),
+					g.desc ? new SimpleText({ cls: "desc", text: g.desc }) : null,
+				]}),
+				g.collapsible? new Button({ icon: updown_icon, click: (e) => toggle(tr) }) : null,
+			]
+		});
+
+		tr.setClass("collapsible", g.collapsible );
+		return tr;
+	}
+
+	/**
+	 * 
+	 */
+	
+	makePropertyRow( item: PropertyValue ) {
+
+		// If boolean create checkbox
+		let editor: Component;
+		let value = isFunction(item.value) ? item.value( item.name ) : item.value;
+		item.value = value;
+
+		if (item.type === 'boolean') {
+			editor = new Input({ 
+				type: "checkbox", 
+				id: item.name,
+				name: item.name, 
+				checked: value as boolean, 
+				dom_events: {
+					change: ( e: Event ) => {
+						item.callback?.( item.name, (editor.dom as HTMLInputElement).checked );
+					}
+				}
+			});
+			
+		}
+		else if (item.type === 'options') {
+			editor = new Select( {
+				value: value as string,
+				id: item.name,
+				items: item.options,
+				name: item.name,
+				change: ( e: EvChange ) => {
+					debugger;
+					item.callback?.( item.name, e.value );
+				}
+			});
+		}
+		else if (item.type === 'password') {
+			editor = new Input({ 
+				type: 'password',
+				id: item.name,
+				name: item.name, 
+				value: value as string, 
+				focus: ( e: EvFocus ) => {
+					if( e.focus_out ) {
+						item.callback?.( item.name, (editor as Input).getValue() );
+					}
+				}
+			});
+		}
+		else if (item.type === 'number') {
+			editor = new Input({ 
+				type: 'number', 
+				id: item.name,
+				name: item.name, 
+				value: value as string,
+				step: item.step,
+				focus: ( e: EvFocus ) => {
+					if( e.focus_out ) {
+						item.callback?.( item.name, (editor as Input).getNumValue() );
+					}
+				},
+				change: ( ) => {
+					if( item.live ) {
+						item.callback?.( item.name, (editor as Input).getNumValue() );
+					}
+				}
+			});
+		}
+		else {
+			editor = new Input({ 
+				type: 'text', 
+				id: item.name,
+				name: item.name, 
+				value: value as string,
+				focus: ( e: EvFocus ) => {
+					if( e.focus_out ) {
+						item.callback?.( item.name, (editor as Input).getValue() );
+					}
+				}
+			});
+		}
+
+		return new HBox({
+			cls: 'row',
+			content: [
+				new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }),
+				new Component({ cls: 'cell', tag: "label", attrs: { "labelFor": item.name }, content: editor })
+			]
+		});
+	}
+
+	/**
+	 * 
+	 */
+
+	setPropValue( name: string, value: any ) {
+		const all = this.groups.flatMap( x => [ ...x.items ] ) ;
+		const item = all.find( x => x.name==name );
+		if( !item ) {
+			return;
+		}
+
+		if (item.type === 'boolean') {
+			const editor = this.root.query<Input>( '#'+item.name );
+			if( editor ) {
+				editor.setCheck( value as boolean );
+			}
+		}
+		else if (item.type === 'options') {
+			const editor = this.root.query<Select>( '#'+item.name );
+			if( editor ) {
+				editor.setValue( value as string );
+			}
+		}
+		else if (item.type === 'number') {
+			const editor = this.root.query<Input>( '#'+item.name );
+			if( editor ) {
+				editor.setNumValue( value as number, -2 );
+			}
+		}
+		else {
+			const editor = this.root.query<Input>( '#'+item.name );
+			if( editor ) {
+				editor.setValue( value as string );
+			}
+		}
+	}
+}
+

package/lib/src/components/propgrid/updown.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path class="fa-primary" d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
+	</path>
+</svg>