x4js 2.0.13 → 2.0.15

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

@@ -0,0 +1,112 @@
+/**
+ * @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;
+		}
+
+		.cell:has(.x4button) {
+			padding: 4px 40px;
+		}
+	}
+}

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

@@ -0,0 +1,288 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 { Label, 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' | 'label' | 'button';
+	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 ) {
+
+		let use_hdr = true;
+
+		// 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 ) => {
+					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 if (item.type === 'label') {
+			editor = new Label({ 
+				id: item.name,
+				text: value as string, 
+			});
+		}
+		else if (item.type === 'button') {
+			use_hdr = false;
+			editor = new Button({ 
+				id: item.name,
+				label: value as string, 
+				click: ( ) => {
+					item.callback?.( item.name, '' );
+				}
+			});
+		}
+		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: [
+				use_hdr ? new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }) : null,
+				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>

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

@@ -0,0 +1,147 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file radio.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.
+ **/
+
+.x4radio {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	margin-left: 5px;
+	gap: 4px;
+	cursor: pointer;
+
+	.inner {
+		position: relative;
+		height: 1rem;
+		width: 1rem;
+
+		border-radius: 50%;
+		//color: var(--color-70);
+	
+		order: 1;
+
+		input {
+			appearance: none;
+			border-radius: 50%;
+			background-color: white;
+			cursor: pointer;
+			display: block;
+			
+			margin: 0;
+			padding: 0;
+			width: 100%;
+			height: 100%;
+			transition: opacity .1s ease;
+			
+			border-radius: 50%;
+			border: 1px solid var(--border);
+		}
+
+		svg {
+			margin: auto;
+			pointer-events: none;
+			position: absolute;
+
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			width: 100%;
+			height: 100%;
+
+			.fa-primary {
+				fill: var( --accent-background)
+			}
+
+			.fa-secondary {
+				fill: white;
+			}
+		}
+
+		&:has(input:not(:checked)) {
+			input {
+				opacity: 1;
+			}
+
+			svg {
+				opacity: 0;
+			}
+		}
+	}
+
+	label {
+		order: 2;
+		cursor: pointer;
+	}
+
+	&.left label {
+		order: 0;
+	}	
+}
+
+.x4radio.button {
+	--size: 24px;
+
+	&.outline {
+		border-radius: 22px;;
+	}
+
+	border: 1px solid transparent;
+	padding: 8px;
+	margin: 0;
+	
+	.inner {
+		display: none;
+	}
+
+	label {
+		display: flex;
+		//padding: 8px;
+		flex-grow: 1;
+
+		#text {
+			flex-grow: 1;
+			text-align: center;
+			color: var( --text-ternary );
+		}
+	
+		#icon {
+			fill: var( --text-ternary );
+			width: var( --size );
+			height: var( --size );
+		}
+	}
+
+	&:has(input:checked) {
+		background-color: var( --background-secondary );
+		border-color:  var( --accent-background );
+
+		.x4label {
+			#text {
+				color: var( --accent-background-active );
+				font-weight: bold;
+			}
+
+			#icon {
+				fill: var( --accent-background-active );
+			}
+
+			.fa-primary {
+				fill: var( --accent-background-active );
+			}
+		}
+	}
+}

package/lib/src/components/radio/radio.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" aria-hidden="true">
+	<circle class="fa-primary" cx="2.5" cy="2.5" r="2.5" ></circle>
+	<circle class="fa-secondary" cx="2.5" cy="2.5" r="1.25"></circle>
+</svg>

package/lib/src/components/radio/radio.ts

@@ -0,0 +1,142 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file radio.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, ComponentEvents, ComponentProps, EvChange, makeUniqueComponentId } from '../../core/component';
+import { class_ns } from '@core/core_tools';
+import { EventCallback } from '@core/core_events';
+
+import { Label } from '../label/label';
+import { Input } from '../input/input'
+import { HBox } from '../boxes/boxes';
+import { svgLoader } from '../components';
+
+import icon from "./radio.svg";
+import "./radio.module.scss";
+
+/**
+ * Checkbox events
+ */
+
+interface RadioEvents extends ComponentEvents {
+	change?: EvChange;
+}
+
+/**
+ * Checkbox properties.
+ */
+
+interface RadioProps extends ComponentProps {
+	label: string;
+	icon?: string;
+	name: string;	// all same names are grouped
+	value: number | string;
+	checked?: boolean;
+	change?: EventCallback<EvChange>;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Radio extends Component<RadioProps,RadioEvents> {
+
+	private _check: HBox;
+	private _input: Input;
+	private _label: Label;
+
+	constructor( props: RadioProps ) {
+		super( props );
+
+		this.mapPropEvents( props, 'change' );
+
+		const inputId = makeUniqueComponentId( );
+		this.setContent( [
+			this._check = new HBox( {cls:'inner', content: [
+				this._input = new Input( { 
+					type:"radio", 
+					id: inputId, 
+					name: props.name, 
+					value: props.value, 
+					checked: props.checked,
+					dom_events: {
+						change: ( ) => this._on_change( ),
+					}
+				}),
+			]} ),
+			this._label = new Label( { 
+				tag: 'label',
+				text: props.label, 
+				id: undefined, 
+				labelFor: inputId, 
+				icon: props.icon,
+			} ),
+		])
+
+		svgLoader.load( icon ).then( svg => {
+			this._check.dom.insertAdjacentHTML( "beforeend", svg );
+		});
+
+		this.addDOMEvent('click', (e) => this._on_click(e));	// for outside click
+	}
+
+	/**
+	 * handle click outside label & input
+	 */
+	
+	protected _on_click( ev: MouseEvent ) {
+		if( ev.target==this.dom ) {
+			(this._input.dom as HTMLInputElement).click( );
+			ev.preventDefault();
+			ev.stopPropagation();
+		}
+	}
+
+	/**
+	 * check state changed
+	 */
+
+	private _on_change() {
+		this.fire('change', { value:this.getValue() } );
+	}
+
+	/**
+	 * check the radio
+	 * @param {boolean} ck new checked value	
+	 */
+
+	public setCheck(ck: boolean) {
+		const d = this._input.dom as HTMLInputElement;
+		d.checked = ck;
+	}
+
+	/**
+	 * change the checkbox label
+	 * @param text 
+	 */
+
+	public setLabel(text: string) {
+		this._label.setText( text );
+	}
+
+	/**
+	 * returns the radio value
+	 */
+
+	getValue( ) {
+		return this._input.getValue( );
+	}
+}

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

@@ -0,0 +1,9 @@
+
+
+.x4select {
+	padding: 4px;
+	outline: none;
+
+	border: 1px solid var( --border );
+	background-color: white;
+}