x4js 2.0.13 → 2.0.14

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

@@ -0,0 +1,133 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 );
+}
+
+.x4dropdownlist {
+	@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;
+
+		.x4item {
+			white-space: nowrap;
+		}
+	}
+}
+
+.x4combobox {
+	@extend .hbox;
+	margin: 5px;
+	gap: 6px;
+
+	&> #label {
+		
+		&> .x4label {
+			padding: 0 6px 0 0;
+			border-bottom: 1px solid transparent;
+
+			height: 100%;
+			font-weight: 500;
+			gap: 0px;
+					
+			#text:not(.empty) {
+				&::after {
+					content: ":"
+				}
+			}
+		}
+	}
+
+	&>#edit {
+		@extend .flex;
+		border-bottom: 1px solid var( --combobox-border );
+		&:focus-within {
+			border-bottom-color: var( --combobox-border-focus );
+		}
+		
+		.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] {
+		& > #label > .x4label::before {
+			content: "*";
+			font-weight: bold;
+			color: var( --textedit-required );
+			margin-right: 2px;
+		}
+	}
+}

package/src/components/combobox/combobox.ts

@@ -0,0 +1,275 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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, ComponentEvents, ComponentProps, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
+import { class_ns, IComponentInterface, IFormElement, kbNav } from '@core/core_tools';
+import { EventCallback } from '@core/core_events';
+
+import { Listbox, ListboxID, ListItem } 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_ns( "x4" )
+export class DropdownList 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 ComboboxEvents extends ComponentEvents {
+	selectionChange: EvSelectionChange;
+}
+
+interface ComboboxProps extends Omit<ComponentProps,"content"> {
+	label?: string;
+	name?: string;
+	value?: string;
+	labelWidth?: number | string;
+	readonly?: boolean;
+	required?: boolean;
+	items: ListItem[];
+	selectionChange?: EventCallback<EvSelectionChange>,
+}
+
+@class_ns( "x4" )
+export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
+
+	private _popup: DropdownList;
+	//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.mapPropEvents( props, "selectionChange" );
+
+		const readonly = props.readonly===false ? false : true;	// by default
+
+		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( { id, type: "text", value: "", readonly: readonly, required: props.required }),
+				this._button = new Button( { icon: icon, tabindex: -1 } )
+			]} ),
+		])
+
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
+
+		if( props.required ) {
+			this.setAttribute( "required", true );
+		}
+
+		this._popup = new DropdownList( { items: props.items } );
+		const list = this._popup.getList( );
+
+		const _select = ( sel: ListboxID ) => {
+			const itm = list.getItem(sel);
+
+			//TODO: unsafehtml
+			//@ts-ignore
+			this._input.setValue( itm ? itm.text : "" );
+			
+			if( !this._prevent_close ) {
+				this._popup.show( false );
+			}
+		}
+
+		this._popup.on( "selectionChange", ( ev ) => {
+			const [sel] = ev.selection as ListboxID[];
+			if( sel!==undefined ) {	// no empty sel
+				_select( sel );			
+				this.fire( "selectionChange", ev );
+			}
+		});
+
+		if( props.value ) {
+			_select( props.value );
+		}
+
+		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._popup.show( false );
+				break;
+			}
+
+			case "ArrowUp":
+				this._prevent_close = true;
+				if( !this._popup.isOpen( ) ) {
+					this.showDropDown( );
+				}
+				else {
+					this._popup.getList().navigate( kbNav.prev );
+				}
+
+				this._prevent_close = false;
+				break;
+
+			case "ArrowDown":
+				this._prevent_close = true;
+				if( !this._popup.isOpen( ) ) {
+					this.showDropDown( );
+				}
+				else {
+					this._popup.getList().navigate( kbNav.next );
+				}
+
+				this._prevent_close = false;
+				break;
+
+			default: {
+				return;
+			}
+		}
+
+		ev.preventDefault( );
+		ev.stopPropagation( );
+	}
+
+	private _on_input( ) {
+		if( !this._popup.isOpen( ) ) {
+			this.showDropDown( );
+		}
+
+		this._popup.getList().filter( this._input.getValue( ) );
+	}
+
+	private _on_focusout( ) {
+		this._popup.show( false );
+	}
+	
+	private _on_click( ) {
+		this.showDropDown( );
+	}
+
+	showDropDown( ) {
+		if( this.isDisabled() ) {
+			return;
+		}
+		
+		const rc = this._edit.getBoundingRect( );
+		this._popup.setStyleValue( "minWidth", rc.width+"px" );
+		this._popup.displayNear( rc, "top left", "bottom left", {x:0,y:6} );
+	}
+
+	setItems( items: ListItem[] ) {
+		this._getList().setItems( items );		
+	}
+
+	getValue( ) {
+		return this._input.getValue( );
+	}
+
+	setValue( value: string ) {
+		this._input.setValue( value );
+	}
+
+	selectItem( index: ListboxID ) {
+		this._getList( ).select( index );
+	}
+
+	getSelection( ) {
+		const [sel] = this._getList( ).getSelection( );
+		return sel;
+	}
+
+	private _getList( ) {
+		return this._popup.getList( );
+	}
+
+	/**
+	 * 
+	 */
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ): any => { return this.getSelection(); },
+				setRawValue: ( v: any ) => { this.selectItem(v); },
+				isValid: ( ) => { return this._input.isValid(); }
+			};
+
+			//@ts-ignore
+			return i as T;
+		}
+		
+		return super.queryInterface( name );
+	}
+}
+
+

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/components.ts

@@ -0,0 +1,41 @@
+export * from "./boxes/boxes"
+export * from "./breadcrumb/breadcrumb"
+export * from "./btngroup/btngroup"
+export * from "./button/button"
+export * from "./calendar/calendar"
+export * from "./checkbox/checkbox"
+export * from "./colorinput/colorinput"
+export * from "./colorpicker/colorpicker"
+export * from "./combobox/combobox"
+export * from "./dialog/dialog"
+export * from "./filedrop/filedrop"
+export * from "./form/form"
+export * from "./gridview/gridview"
+export * from "./header/header"
+export * from "./icon/icon"
+export * from "./image/image"
+export * from "./input/input"
+export * from "./keyboard/keyboard"
+export * from "./label/label"
+export * from "./link/link"
+export * from "./listbox/listbox"
+export * from "./menu/menu"
+export * from "./messages/messages"
+export * from "./notification/notification"
+export * from "./panel/panel"
+export * from "./popup/popup"
+export * from "./progress/progress"
+export * from "./propgrid/propgrid"
+export * from "./radio/radio"
+export * from "./rating/rating"
+export * from "./tickline/tickline"
+export * from "./select/select"
+export * from "./sizers/sizer"
+export * from "./slider/slider"
+export * from "./switch/switch"
+export * from "./tabs/tabs"
+export * from "./textarea/textarea"
+export * from "./textedit/textedit"
+export * from "./tooltips/tooltips"
+export * from "./treeview/treeview"
+export * from "./viewport/viewport"

package/src/components/dialog/dialog.module.scss

@@ -0,0 +1,105 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 !important;
+	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;
+			font-size: 120%;
+
+			#icon {
+				color: var(--color-dialog-caption-text);
+				fill: var(--color-dialog-caption-text);
+			}
+		}
+
+		& > #closebox {
+			margin: 0;
+			padding: 4px;
+		}
+	}
+
+	&> .form {
+		min-height: 128px;
+		min-width: 450px;
+	}
+
+	&> #btnbar {
+		border-top: 1px solid var( --border );
+		padding: 6px 20px;
+		margin: 0;
+
+		justify-content: end;
+		gap: 8px;
+
+		&> .x4button {
+			min-width: 80px;
+			
+			.x-simple-label {
+				text-align: center;
+			}
+
+		}
+	}
+}
+
+
+.x4dialog.danger {
+	
+	&> .caption {
+		background-color: var( --alert-background );
+		color: var( --alert-color );
+
+		#closebox {
+			background-color: transparent;
+			color: var( --alert-color );
+		}
+	}
+
+	&> #btnbar {
+		&> .x4button:not(.outline) {
+			&:not(:disabled) {
+				background-color: var( --alert-background );
+				color: var( --alert-color );
+			}
+		}
+	}
+}
+
+.x4dialogex {
+	padding: 0;
+	margin: 0;
+}