x4js 2.0.13 → 2.0.14

package/lib/src/components/checkbox/checkbox.ts

@@ -26,6 +26,7 @@ interface CheckboxProps extends ComponentProps {
 	label: string; 			// The text label for the checkbox.
 	checked?: boolean;		// Optional boolean indicating if the checkbox is checked by default.
 	value?: boolean | number | string;			// Optional value associated with the checkbox.
+	name?: string;
 	change?: EventCallback<EvChange>;
 }
 
@@ -59,6 +60,7 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 					this._input = new Input( { 
 						type:"checkbox", 
 						id: inputId, 
+						name: props.name,
 						checked: props.checked,
 						dom_events: {
 							change: ( ) => this._on_change( ),
@@ -77,6 +79,20 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 		svgLoader.load( icon ).then( svg => {
 			this.query<Label>( '.inner' ).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();
+		}
 	}
 
 	/**
@@ -92,8 +108,7 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 	 */
 
 	public getCheck() {
-		const d = this._input.dom as HTMLInputElement;
-		return d.checked;
+		return this._input.getCheck();
 	}
 
 	/**
@@ -102,8 +117,7 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 	 */
 
 	public setCheck(ck: boolean) {
-		const d = this._input.dom as HTMLInputElement;
-		d.checked = ck;
+		this._input.setCheck( ck );
 	}
 
 	/**

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

@@ -28,7 +28,7 @@
 	--combobox-btn-color-hover: var( --text-primary );
 }
 
-.x4dropdown {
+.x4dropdownlist {
 	@extend .shadow-xl;
 	@extend .hbox;
 
@@ -44,35 +44,42 @@
 		margin: 0;
 		width: 100%;
 		height: 200px;
+
+		.x4item {
+			white-space: nowrap;
+		}
 	}
 }
 
 .x4combobox {
 	@extend .hbox;
 	margin: 5px;
+	gap: 6px;
 
-	//&> #label {
-	//	padding: 0 6px;
-	//	border-bottom: 1px solid transparent;
-
+	&> #label {
+		
 		&> .x4label {
-			padding: 0 6px;
+			padding: 0 6px 0 0;
 			border-bottom: 1px solid transparent;
 
 			height: 100%;
-			padding: 0;
 			font-weight: 500;
-			gap: 0;
+			gap: 0px;
 					
-			#text::not(.empty)::after {
-				content: ":"
+			#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;
@@ -97,10 +104,10 @@
 				color: var( --combobox-btn-color-hover );
 			}
 
-			&:focus {
+			//&:focus {
 				//background-color: var( --color-30 );
 				//color: var( --color-10 );
-			}
+			//}
 		}
 	}
 
@@ -116,9 +123,11 @@
 	}
 	
 	&[required] {
-		.x4label::before {
+		& > #label > .x4label::before {
 			content: "*";
-			color: var( --color-90 )
+			font-weight: bold;
+			color: var( --textedit-required );
+			margin-right: 2px;
 		}
 	}
 }

package/lib/src/components/combobox/combobox.ts

@@ -14,8 +14,11 @@
  * 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 { 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';
@@ -24,7 +27,6 @@ import { HBox } from '../boxes/boxes';
 
 import "./combobox.module.scss";
 import icon from "./updown.svg";
-import { class_ns } from '@core/core_tools.js';
 
 
 
@@ -37,8 +39,9 @@ interface DropdownProps extends Omit<PopupProps,"content"> {
 	items: ListItem[];
 }
 
+
 @class_ns( "x4" )
-class Dropdown extends Popup<DropdownProps,DropdownEvents> {
+export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
 
 	private _list: Listbox;
 
@@ -70,18 +73,26 @@ class Dropdown extends Popup<DropdownProps,DropdownEvents> {
  * 
  */
 
+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> {
+export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 
-	private _dropdown: Dropdown;
-	private _label: Label;
+	private _popup: DropdownList;
+	//private _label: Label;
 	private _input: Input;
 	private _button: Button;
 	private _prevent_close = false;
@@ -92,25 +103,53 @@ export class Combobox extends Component<ComboboxProps> {
 
 		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( { type: "text", value: "", readonly: props.readonly }),
-				this._button = new Button( { icon: icon } )
+				this._input  = new Input( { id, type: "text", value: "", readonly: readonly, required: props.required }),
+				this._button = new Button( { icon: icon, tabindex: -1 } )
 			]} ),
 		])
 
-		this._dropdown = new Dropdown( { items: props.items } );
+		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);
 
-		this._dropdown.on( "selectionChange", ( ev ) => {
-			const sel = ev.selection as ListItem;
-			this._input.setValue( sel ? sel.text : "" );
+			//TODO: unsafehtml
+			//@ts-ignore
+			this._input.setValue( itm ? itm.text : "" );
 			
 			if( !this._prevent_close ) {
-				this._dropdown.show( false );
+				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 ) );
@@ -125,17 +164,17 @@ export class Combobox extends Component<ComboboxProps> {
 		switch( ev.key ) {
 			case "Enter":
 			case "Escape": {
-				this._dropdown.show( false );
+				this._popup.show( false );
 				break;
 			}
 
 			case "ArrowUp":
 				this._prevent_close = true;
-				if( !this._dropdown.isOpen( ) ) {
+				if( !this._popup.isOpen( ) ) {
 					this.showDropDown( );
 				}
 				else {
-					this._dropdown.getList().navigate( kbNav.prev );
+					this._popup.getList().navigate( kbNav.prev );
 				}
 
 				this._prevent_close = false;
@@ -143,11 +182,11 @@ export class Combobox extends Component<ComboboxProps> {
 
 			case "ArrowDown":
 				this._prevent_close = true;
-				if( !this._dropdown.isOpen( ) ) {
+				if( !this._popup.isOpen( ) ) {
 					this.showDropDown( );
 				}
 				else {
-					this._dropdown.getList().navigate( kbNav.next );
+					this._popup.getList().navigate( kbNav.next );
 				}
 
 				this._prevent_close = false;
@@ -163,15 +202,15 @@ export class Combobox extends Component<ComboboxProps> {
 	}
 
 	private _on_input( ) {
-		if( !this._dropdown.isOpen( ) ) {
+		if( !this._popup.isOpen( ) ) {
 			this.showDropDown( );
 		}
 
-		this._dropdown.getList().filter( this._input.getValue( ) );
+		this._popup.getList().filter( this._input.getValue( ) );
 	}
 
 	private _on_focusout( ) {
-		this._dropdown.show( false );
+		this._popup.show( false );
 	}
 	
 	private _on_click( ) {
@@ -184,8 +223,52 @@ export class Combobox extends Component<ComboboxProps> {
 		}
 		
 		const rc = this._edit.getBoundingRect( );
-		this._dropdown.setStyleValue( "width", rc.width+"px" );
-		this._dropdown.displayNear( rc, "top left", "bottom left", {x:0,y:6} );
+		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/lib/src/components/components.ts

@@ -8,11 +8,14 @@ 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"
@@ -22,7 +25,11 @@ 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"

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

@@ -24,7 +24,7 @@
 .x4dialog {
 	@extend .shadow-xl, .vbox;
 
-	position: absolute;
+	position: absolute !important;
 	background-color: white;
 	border: 1px solid var( --border-dark );
 	min-width: min-content;
@@ -38,6 +38,12 @@
 			@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 {
@@ -52,8 +58,9 @@
 	}
 
 	&> #btnbar {
-		border-top: 1px solid var( --color-separation );
-		padding: 6px 16px;
+		border-top: 1px solid var( --border );
+		padding: 6px 20px;
+		margin: 0;
 
 		justify-content: end;
 		gap: 8px;
@@ -69,3 +76,30 @@
 	}
 }
 
+
+.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;
+}

package/lib/src/components/dialog/dialog.ts

@@ -19,20 +19,25 @@ 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 { CoreEvent, EventCallback } from '@core/core_events.js';
+import { class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '@core/core_tools.js';
+import { ComponentEvent } from '../../core/component.js';
 import { Button } from '../button/button.js';
 
 import "./dialog.module.scss"
 import close_icon from "./xmark-sharp-light.svg";
-import { CoreEvent } from '@core/core_events.js';
-import { class_ns } from '@core/core_tools.js';
+
+
+//let modal_stack: Popup[] = [];
 
 export interface DialogProps extends PopupProps {
 	icon?: string;
 	title: string;
-	form: Form;
+	form?: Form;
 	buttons: BtnGroupItem[];
-	closable?: boolean;
+	closable?: boolean | string;
+	modal?: boolean;
+	btnclick?: EventCallback<EvBtnClick>;
 }
 
 
@@ -49,46 +54,159 @@ interface DialogEvents extends PopupEvents {
  * 
  */
 
-@class_ns( "x4" )
-export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents>  extends Popup<P,E> {
+@class_ns("x4")
+export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents> extends Popup<P, E> {
+
+	private form: Form;
+
+	constructor(props: P) {
+		super({ tag: "dialog", modal: true, ...props });
 
-	constructor( props: P ) {
-		super( props );
+		this._ismodal = this.props.modal;
 
-		this.appendContent( [
-			new HBox( {
+		this.mapPropEvents(props, "btnclick");
+
+		this.appendContent([
+			new HBox({
 				cls: "caption",
 				content: [
-					new Label( { 
-						id: "title", 
+					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,
+						icon: props.icon,
+						text: props.title
+					}),
+					props.closable ? new Button({
+						id: "closebox",
+						icon: close_icon,
+						tabindex: -1,
+						click: () => { 
+							if( isString(props.closable) ) {
+								this.fire("btnclick", { button: props.closable } );
+							}
+							else {
+								this.close() 
+							}
+						}
+					}) : null,
 				]
 			}),
-			props.form,
-			new BtnGroup( {
+			this.form = props.form ? props.form : new Form({}),
+			new BtnGroup({
 				id: "btnbar",
 				reverse: true,
 				items: props.buttons,
-				btnclick: ( ev ) => { this.fire( "btnclick", ev ) }
-			}) 
-		])
+				btnclick: (ev) => { this.fire("btnclick", ev) }
+			})
+		]);
+
+		this.addDOMEvent("keydown", (ev) => {
+
+			if (ev.key == 'Escape') {
+				// todo cancel
+				ev.preventDefault();
+				ev.stopPropagation();
+			}
+			else if (ev.key == 'Enter') {
+				const def = this.query<Button>('button.default');
+				if (def) {
+					ev.preventDefault();
+					ev.stopPropagation();
+
+					def.click();
+				}
+			}
+		})
 	}
 
-	display(  ) {
-		super.displayCenter(  );
+	private focusNext( next: boolean) : boolean {
+
+		const focusable = getFocusableElements( this.dom );
+		
+		if (!focusable.length) {
+			return false;
+		}
+		else {
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const active = document.activeElement;
+
+			let newf: HTMLElement;
+			if (!next && active === first) {
+				newf = last as HTMLElement;
+			}
+			else if (next && active === last) {
+				newf = first as HTMLElement;
+			}
+			else {
+				const idx = focusable.indexOf(active);
+				if (!next) {
+					newf = focusable[idx - 1] as HTMLElement;
+				}
+				else {
+					newf = focusable[idx + 1] as HTMLElement
+				}
+			}
+
+			if (newf) {
+				newf.focus();
+				return true;
+			}
+
+			return false;
+		}
 	}
 
-	override close( ) {
-		this.fire( "close", {} );
-		super.close( );
+	/**
+	 * 
+	 */
+
+	override setContent(form: Form) {
+		this.dom.replaceChild(this.form.dom, form.dom);
+		this.form = form;
+	}
+
+	/**
+	 * 
+	 */
+
+	getForm() {
+		return this.form;
+	}
+
+	/**
+	 * 
+	 */
+
+	getValues() {
+		return this.form.getValues();
+	}
+
+	/**
+	 * 
+	 */
+
+	getButton(name: string) {
+		const btns = this.query<BtnGroup>("#btnbar");
+		return btns.getButton(name);
+	}
+
+	/**
+	 * 
+	 */
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="tab-handler" ) {
+			const i: ITabHandler = {
+				focusNext: ( n: boolean ) => { return this.focusNext( n ); }
+			};
+
+			//@ts-ignore
+			return i as T;
+		}
+		
+		return super.queryInterface( name );
 	}
 }
 
+

package/lib/src/components/filedrop/cloud-arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39L296 392c0 13.3 10.7 24 24 24s24-10.7 24-24l0-134.1 39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"/></svg>