x4js 2.0.13 → 2.0.14

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>

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;
+}

package/lib/src/components/select/select.ts

@@ -0,0 +1,134 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file select.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2025 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 { EventCallback } from '../../core/core_events.js';
+import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus  } from '../../core/component';
+import { class_ns } from '../../core/core_tools';
+
+import { ListItem } from '../components';
+
+import "./select.module.scss"
+
+/**
+ * 
+ */
+
+export interface SelectProps extends ComponentProps {
+	name?: string;
+	value: string;
+	items: ListItem[];
+	multiple?: boolean;
+	change?: EventCallback<EvChange>;
+	focus?: EventCallback<EvFocus>;
+}
+
+interface SelectEvents extends ComponentEvent {
+	focus: EvFocus;
+	change: EvChange;
+}
+
+
+/**
+ * simple select
+ */
+
+@class_ns( "x4" )
+export class Select extends Component<SelectProps,SelectEvents> {
+
+	constructor( props: SelectProps ) {
+		super( { tag: "select", ...props } );
+
+		this.mapPropEvents( props, "focus", "change" );
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
+
+		this.setItems( props.items );
+		
+		this.addDOMEvent( "blur", ( e ) => { this.on_focus(e,true);} );
+		this.addDOMEvent( "focus", ( e ) => { this.on_focus(e,false);} );
+		this.addDOMEvent( "input", ( e ) => { this.on_change(e as InputEvent); });
+
+		if( props.multiple ) {
+			this.setAttribute( "multiple", true );
+		}
+
+		if( props.value ) {
+			this.setValue( props.value );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private on_focus( ev: FocusEvent, focus_out: boolean ) {
+		const event: EvFocus = { focus_out }
+		this.fire( "focus", event );
+
+		if( event.defaultPrevented ) {
+			ev.preventDefault( );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private on_change( ev: InputEvent ) {
+
+		const event: EvChange = { value: this.getValue() };
+		this.fire( "change", event );
+
+		if( event.defaultPrevented ) {
+			ev.preventDefault( );
+		}
+	}
+
+	/**
+	 * 
+ 	 */
+
+	setItems( items: ListItem[] ) {
+		this.setContent( items.map( x => {
+			return new Component( {
+				tag: "option",
+				attrs: { value: x.id },
+				content: x.text,
+			});
+		} ));
+	}
+
+	/**
+	 * @returns 
+	 */
+
+	public getValue( ) {
+		return (this.dom as HTMLSelectElement).value;
+	}
+
+	/**
+	 * 
+	 * @param value 
+	 */
+	
+	public setValue( value: string ) {
+		(this.dom as HTMLSelectElement).value = value+"";
+	}
+}
+
+