x4js 2.0.4 → 2.0.6

package/src/components/combobox/combobox.module.scss

@@ -0,0 +1,121 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file combobox.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 {
+	--dropdown-border: var( --border-hover );
+	--dropdown-background: var( --background-primary );
+
+	--combobox-border: var( --border );
+	--combobox-border-focus: var( --border-focus );
+
+	--combobox-btn-background: inherit;
+	--combobox-btn-color: var( --text-secondary );
+	--combobox-btn-color-hover: var( --text-primary );
+}
+
+.x4dropdown {
+	@extend .shadow-xl;
+	@extend .hbox;
+
+	max-height: 250px;
+	position: absolute;
+	background-color: var( --dropdown-background );
+	border: 1px solid var( --dropdown-border );
+
+	.x4listbox {
+		@extend .flex;
+
+		border: none;
+		margin: 0;
+		width: 100%;
+		height: 200px;
+	}
+}
+
+.x4combobox {
+	@extend .hbox;
+	margin: 5px;
+
+	&> #label {
+		padding: 0 6px;
+		border-bottom: 1px solid transparent;
+
+		&> .x4label {
+			height: 100%;
+			padding: 0;
+			font-weight: 500;
+			gap: 0;
+		}
+			
+		&::after {
+			content: ":"
+		}
+	}
+
+	&>#edit {
+		@extend .flex;
+		border-bottom: 1px solid var( --combobox-border );
+		
+		.x4input {
+			@extend .flex;
+
+			&[readonly] {
+				cursor: pointer;
+			}
+		}
+
+		.x4button {
+			margin: 0;
+			padding: 0;
+			outline: none;
+			background-color: var( --combobox-btn-background );
+			color: var( --combobox-btn-color );
+
+			#icon {
+				color: var( --combobox-btn-color );
+			}
+
+			&:hover, &:hover #icon {
+				color: var( --combobox-btn-color-hover );
+			}
+
+			&:focus {
+				//background-color: var( --color-30 );
+				//color: var( --color-10 );
+			}
+		}
+	}
+
+	&[disabled] {
+		&, * {
+			cursor: not-allowed;
+		}
+
+		#label .x4label {
+			color: var( --disabled-color-dark );
+			pointer-events: none;
+		}
+	}
+	
+	&[required] {
+		.x4label::before {
+			content: "*";
+			color: var( --color-90 )
+		}
+	}
+}

package/src/components/combobox/combobox.ts

@@ -0,0 +1,190 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file combobox.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, ComponentEvent, ComponentProps, EvChange, EvSelectionChange, makeUniqueComponentId } from '@core/component';
+import { Listbox, ListboxID, ListItem, kbNav } from '../listbox/listbox';
+import { Popup, PopupEvents, PopupProps } from '../popup/popup.js';
+import { Label } from '../label/label';
+import { Input } from '../input/input';
+import { Button } from '../button/button';
+import { HBox } from '../boxes/boxes';
+
+import "./combobox.module.scss";
+import icon from "./updown.svg";
+
+
+
+interface DropdownEvents extends PopupEvents {
+	selectionChange: EvSelectionChange;
+}
+
+
+interface DropdownProps extends Omit<PopupProps,"content"> {
+	items: ListItem[];
+}
+
+class Dropdown extends Popup<DropdownProps,DropdownEvents> {
+
+	private _list: Listbox;
+
+	constructor( props: DropdownProps, content?: ListItem[] ) {
+		super( props );
+
+		this._list = new Listbox( { items: props.items } );
+		this.setContent( this._list );
+
+		this.addDOMEvent( "mousedown", ( ev: Event ) => { 
+			console.log( "trap" );
+			ev.stopImmediatePropagation( );
+			ev.stopPropagation( );
+			ev.preventDefault( );
+		}, true );
+
+		this._list.on( "selectionChange", ( ev ) => {
+			this.fire( "selectionChange", ev );
+		})
+	}
+
+	getList( ) {
+		return this._list;
+	}
+}
+
+
+/**
+ * 
+ */
+
+interface ComboboxProps extends Omit<ComponentProps,"content"> {
+	label?: string;
+	labelWidth?: number | string;
+	readonly?: boolean;
+	items: ListItem[];
+}
+
+
+export class Combobox extends Component<ComboboxProps> {
+
+	private _dropdown: Dropdown;
+	private _label: Label;
+	private _input: Input;
+	private _button: Button;
+	private _prevent_close = false;
+	private _edit: HBox;
+				
+	constructor( props: ComboboxProps ) {
+		super( props );
+
+		const id = makeUniqueComponentId( );
+
+		this.setContent( [
+			new HBox( { id: "label", content: new Label( { tag: "label", text: props.label, labelFor: id, width: props.labelWidth } ) } ),
+			this._edit  = new HBox( { id: "edit", content: [
+				this._input  = new Input( { type: "text", value: "", readonly: props.readonly }),
+				this._button = new Button( { icon: icon } )
+			]} ),
+		])
+
+		this._dropdown = new Dropdown( { items: props.items } );
+
+		this._dropdown.on( "selectionChange", ( ev ) => {
+			const sel = ev.selection as ListItem;
+			this._input.setValue( sel ? sel.text : "" );
+			
+			if( !this._prevent_close ) {
+				this._dropdown.show( false );
+			}
+		});
+
+		this._button.addDOMEvent( "click", ( ) => this._on_click( ) );
+		this._input.addDOMEvent( "input", ( ) => this._on_input( ) );
+		this._input.addDOMEvent( "keydown", ( ev ) => this._on_key( ev ) );
+
+		this.setDOMEvents( {
+			focusout: ( ) => this._on_focusout( ),
+			click: ( ) => this._on_click( ),
+		})
+	}
+
+	private _on_key( ev: KeyboardEvent ) {
+		switch( ev.key ) {
+			case "Enter":
+			case "Escape": {
+				this._dropdown.show( false );
+				break;
+			}
+
+			case "ArrowUp":
+				this._prevent_close = true;
+				if( !this._dropdown.isOpen( ) ) {
+					this.showDropDown( );
+				}
+				else {
+					this._dropdown.getList().navigate( kbNav.prev );
+				}
+
+				this._prevent_close = false;
+				break;
+
+			case "ArrowDown":
+				this._prevent_close = true;
+				if( !this._dropdown.isOpen( ) ) {
+					this.showDropDown( );
+				}
+				else {
+					this._dropdown.getList().navigate( kbNav.next );
+				}
+
+				this._prevent_close = false;
+				break;
+
+			default: {
+				return;
+			}
+		}
+
+		ev.preventDefault( );
+		ev.stopPropagation( );
+	}
+
+	private _on_input( ) {
+		if( !this._dropdown.isOpen( ) ) {
+			this.showDropDown( );
+		}
+
+		this._dropdown.getList().filter( this._input.getValue( ) );
+	}
+
+	private _on_focusout( ) {
+		this._dropdown.show( false );
+	}
+	
+	private _on_click( ) {
+		this.showDropDown( );
+	}
+
+	showDropDown( ) {
+		if( this.isDisabled() ) {
+			return;
+		}
+		
+		const rc = this._edit.getBoundingRect( );
+		this._dropdown.setStyleValue( "width", rc.width+"px" );
+		this._dropdown.displayNear( rc, "top left", "bottom left", {x:0,y:6} );
+	}
+}
+
+

package/src/components/combobox/updown.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path 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/src/components/dialog/dialog.module.scss

@@ -0,0 +1,71 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file dialog.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.
+ **/
+
+@import "../shared.scss";
+
+:root {
+	--color-dialog-caption: var( --color-primary-a80 );
+	--color-dialog-caption-text: var( --color-primary-a0 );
+}
+
+.x4dialog {
+	@extend .shadow-xl, .vbox;
+
+	position: absolute;
+	background-color: white;
+	border: 1px solid var( --border-dark );
+	min-width: min-content;
+    min-height: min-content;
+
+	&> .caption {
+		padding: 8px;
+		background-color: var(--color-dialog-caption);
+	
+		& > #title {
+			@extend .flex;
+			color: var(--color-dialog-caption-text);
+			font-weight: bold;
+		}
+
+		& > #closebox {
+			margin: 0;
+			padding: 4px;
+		}
+	}
+
+	&> .form {
+		min-height: 128px;
+		min-width: 450px;
+	}
+
+	&> #btnbar {
+		border-top: 1px solid var( --color-separation );
+		padding: 6px 16px;
+
+		justify-content: end;
+		gap: 8px;
+
+		&> .x4button {
+			min-width: 80px;
+			
+			.x-simple-label {
+				text-align: center;
+			}
+
+		}
+	}
+}
+

package/src/components/dialog/dialog.ts

@@ -0,0 +1,91 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file dialog.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 { Form } from "../form/form.js"
+import { PopupEvents, PopupProps, Popup } from '../popup/popup.js';
+import { BtnGroup, BtnGroupItem } from "../btngroup/btngroup"
+import { HBox } from '../boxes/boxes.js';
+import { Label } from '../label/label.js';
+import { ComponentContent, ComponentEvent } from '@core/component.js';
+import { Button } from '../button/button.js';
+
+import "./dialog.module.scss"
+import close_icon from "./xmark-sharp-light.svg";
+
+export interface DialogProps extends PopupProps {
+	icon?: string;
+	title: string;
+	form: Form;
+	buttons: BtnGroupItem[];
+	closable?: boolean;
+}
+
+
+export interface EvBtnClick extends Event {
+	button: string;
+}
+
+interface DialogEvents extends PopupEvents {
+	btnclick: EvBtnClick;
+	close: ComponentEvent;
+}
+
+/**
+ * 
+ */
+
+export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents>  extends Popup<P,E> {
+
+	constructor( props: P ) {
+		super( props );
+
+		this.appendContent( [
+			new HBox( {
+				cls: "caption",
+				content: [
+					new Label( { 
+						id: "title", 
+						cls: "caption-element",
+						icon: props.icon, 
+						text: props.title 
+					} ),
+					props.closable ? new Button( { 
+						id: "closebox", 
+						icon: close_icon, 
+						click:  ( ) => { this.close() }
+					} ) : null,
+				]
+			}),
+			props.form,
+			new BtnGroup( {
+				id: "btnbar",
+				reverse: true,
+				items: props.buttons,
+				btnclick: ( ev ) => { this.fire( "btnclick", ev ) }
+			}) 
+		])
+	}
+
+	display(  ) {
+		super.displayCenter(  );
+	}
+
+	override close( ) {
+		this.fire( "close", {} );
+		super.close( );
+	}
+}
+

package/src/components/dialog/xmark-sharp-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M192 233.4L59.5 100.9 36.9 123.5 169.4 256 36.9 388.5l22.6 22.6L192 278.6 324.5 411.1l22.6-22.6L214.6 256 347.1 123.5l-22.6-22.6L192 233.4z"/></svg>

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

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

package/src/components/form/form.ts

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

package/src/components/header/header.module.scss

@@ -0,0 +1,40 @@
+@use "../shared.scss";
+
+:root {
+	--header-background-hover: rgba(100,100,100,0.1);
+	--header-sizer-hover: var( --border-hover );
+}
+
+.x4header {
+	@extend .flex;
+	width: 100%;
+
+	overflow: hidden;
+	min-height: 2em;
+	border-bottom: 1px solid var( --border );
+
+
+	.cell {
+		border-bottom: 1px solid transparent;
+		overflow: hidden;
+		min-width: 3rem;
+
+		transition: border-color 0.5s ease;
+		padding: 4px;
+
+		span {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+		
+		&:hover {
+			background-color: var( --header-background-hover );
+		}
+
+		.x4csizer:hover {
+			border-right: 1px solid var( --header-sizer-hover );
+		}
+	}
+
+}

package/src/components/header/header.ts

@@ -0,0 +1,124 @@
+import { Component, ComponentProps } from '@core/component.js';
+import { HBox } from '../boxes/boxes.js';
+import { Label } from '../label/label.js';
+import { CSizer } from '../sizers/sizer.js';
+
+import "./header.module.scss"
+
+interface HeaderItem {
+	name: string;
+	title: string;
+	iconId?: string;
+	width?: number;	// <0 for flex
+}
+
+interface HeaderProps extends Omit<ComponentProps,"content"> {
+	items: HeaderItem[]
+}
+
+export class Header extends HBox<HeaderProps> {
+
+	private _els: Component[];
+	private _vwp: Component;
+
+	constructor( props: HeaderProps ) {
+		super( props );
+
+		this._els = props.items?.map( x => {
+			const cell = new Label( { cls: "cell", text: x.title, icon: x.iconId } );
+			const sizer = new CSizer( "right" );
+			
+			if( x.width>0 ) {
+				cell.setStyleValue( "width", x.width+'px' );
+				cell.setInternalData( "width", x.width );
+			}
+			else if( x.width<0 ) {
+				cell.setInternalData( "flex", -x.width );
+			}
+			else {
+				cell.setInternalData( "width", 0 );
+			}
+
+			sizer.addDOMEvent( "dblclick", ( e: MouseEvent ) => {
+				cell.setInternalData( "flex", 1 );
+				this._calc_sizes( );
+			})
+
+			sizer.on( "resize", ( ev ) => {
+				//cell.setStyleValue( "flexGrow", "0" );
+				cell.setInternalData("flex",0);
+				cell.setInternalData("width",ev.size);
+				this._calc_sizes( );
+			});
+
+			cell.appendContent( sizer );
+			cell.setInternalData( "data", x );
+
+			return cell;
+		});
+
+		this.addDOMEvent( "resized", ( ) => this._on_resize() );
+		this.addDOMEvent( "created", ( ) => this._calc_sizes( ) );
+
+		this._vwp = new HBox( { content: this._els } );
+		this.setContent(  this._vwp );
+	}
+
+	private _calc_sizes( ) {
+
+		let count = 0;
+		let filled = 0;
+
+		this._els.forEach( c => {
+			const flex = c.getInternalData( "flex" );
+			if( flex ) {
+				count += flex;
+			}
+			else {
+				let width = c.getInternalData( "width" );
+				if( width==0 ) {
+					const rc = c.getBoundingRect( );
+					width = Math.ceil( rc.width )+2;
+					c.setInternalData( "width", width );
+				}
+					
+				filled += width;
+			}
+		} );
+
+		const rc = this.getBoundingRect( );
+		
+		let rest = (rc.width-filled);
+		const unit = Math.ceil( rest/count );
+
+		console.log( "filled", filled );
+		console.log( "count", count );
+		console.log( "rest", rest );
+		console.log( "unit", unit );
+		
+		let fullw = 0;
+		this._els.forEach( c => {
+			let width = 0;
+
+			const flex = c.getInternalData( "flex" );
+			if( flex ) {
+				width = Math.min( unit*flex, rest );
+				rest -= width;
+			}
+			else {
+				width = c.getInternalData( "width" );
+			}
+
+			c.setWidth( width );
+			fullw += width;
+		} );
+
+		this._vwp.setWidth( fullw );
+	}
+
+	private _on_resize( ) {
+		this._calc_sizes( );
+	}
+
+
+}