x4js 2.0.12 → 2.0.14

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

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

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

@@ -1,92 +1,212 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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";
-import { CoreEvent } from '@core/core_events.js';
-
-export interface DialogProps extends PopupProps {
-	icon?: string;
-	title: string;
-	form: Form;
-	buttons: BtnGroupItem[];
-	closable?: boolean;
-}
-
-
-export interface EvBtnClick extends CoreEvent {
-	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( );
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 { 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";
+
+
+//let modal_stack: Popup[] = [];
+
+export interface DialogProps extends PopupProps {
+	icon?: string;
+	title: string;
+	form?: Form;
+	buttons: BtnGroupItem[];
+	closable?: boolean | string;
+	modal?: boolean;
+	btnclick?: EventCallback<EvBtnClick>;
+}
+
+
+export interface EvBtnClick extends CoreEvent {
+	button: string;
+}
+
+interface DialogEvents extends PopupEvents {
+	btnclick: EvBtnClick;
+	close: ComponentEvent;
+}
+
+/**
+ * 
+ */
+
+@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 });
+
+		this._ismodal = this.props.modal;
+
+		this.mapPropEvents(props, "btnclick");
+
+		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,
+						tabindex: -1,
+						click: () => { 
+							if( isString(props.closable) ) {
+								this.fire("btnclick", { button: props.closable } );
+							}
+							else {
+								this.close() 
+							}
+						}
+					}) : null,
+				]
+			}),
+			this.form = props.form ? props.form : new Form({}),
+			new BtnGroup({
+				id: "btnbar",
+				reverse: true,
+				items: props.buttons,
+				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();
+				}
+			}
+		})
+	}
+
+	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 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>

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

@@ -0,0 +1,70 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file filedrop.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.
+ **/
+
+:root {
+	--filedrop-border: var( --border );
+	--filedrop-icon-color: var( --accent-background );
+	--filedrop-border-drop-hover: var( --accent-background );
+	--filedrop-icon-color-hover: var( --alert-background );
+}
+
+.x4filedrop {
+	border: 1px solid var( --filedrop-border );
+	border-radius: 4px;
+	cursor: pointer;
+	width: fit-content;
+    padding: 8px;
+	margin: 5px;
+
+	//justify-content: center;
+	align-items: center;
+
+	.x4icon {
+		width: 2em;
+		height: 2em;
+		color: var( --filedrop-icon-color );
+		fill: var( --filedrop-icon-color );
+	}
+
+	&.hit {
+		border-color: var( --filedrop-border-drop-hover );
+		.x4icon {
+			color: var( --filedrop-icon-color-hover );
+			fill: var( --filedrop-icon-color-hover );
+		}
+	}
+
+	&:focus{
+		border-color: var( --ol-button-border-focus );
+		color: var( --ol-button-color-focus );
+		#icon {
+			color: var( --ol-button-color-focus );
+		}
+	}
+
+	&:hover{
+		background-color: var( --ol-button-background-hover );
+		color: var( --ol-button-color-hover );
+	}	
+
+	&:active{
+		background-color: var( --ol-button-background-active );
+		color: var( --ol-button-color-active );
+		#icon {
+			color: var( --button-icon-color );
+		}
+	}	
+ }

package/lib/src/components/filedrop/filedrop.ts

@@ -0,0 +1,131 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file filedrop.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 } from '../../core/component';
+import { _tr } from '../../core/core_i18n';
+import { dragManager } from '../../core/core_dragdrop';
+import { CoreEvent, EventCallback } from '../../core/core_events';
+import { class_ns, UnsafeHtml } from '../../core/core_tools';
+
+import { VBox } from '../boxes/boxes';
+import { SimpleText } from '../label/label';
+import { Icon } from '../icon/icon';
+
+import icon_drop from "./cloud-arrow-up.svg"
+import "./filedrop.module.scss"
+
+type LoadCallback = ( files: FileList ) => void;
+
+
+interface FileDialogProps extends ComponentProps {
+	accept: string;	// "image/png,image/jpeg"
+	multiple?: boolean;
+	callback: LoadCallback;
+}
+
+export class FileDialog extends Component {
+
+	constructor( props: FileDialogProps ) {
+		super( { 
+			tag: "input",
+			style: { 
+				display: "none" 
+			},
+			attrs: {
+				type: "file",
+				multiple: props.multiple ?? false,
+				accept: props.accept
+			},
+			dom_events: {
+				change: ( ) => {
+					const files = (this.dom as HTMLInputElement).files;
+					props.callback( files );
+				}
+			}
+		} );
+	}
+
+	showDialog( ) {
+		(this.dom as HTMLInputElement).click( );
+	}
+}
+
+
+
+// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+export interface EvDropChange extends CoreEvent {
+	files: FileList;
+}
+
+interface FileDropEvents extends ComponentEvents {
+	change: EvDropChange;
+}
+
+interface FileDropProps extends ComponentProps {
+	label?: string | UnsafeHtml;
+	icon?: string;
+	multiple?: boolean;
+	accept: string;	// ex: 'image/*'
+	change: EventCallback<EvDropChange>;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class FileDrop extends VBox<FileDropProps,FileDropEvents> {
+
+	constructor( props: FileDropProps ) {
+		super( props );
+
+		this.mapPropEvents( props, "change" );
+
+		let fileDialog = new FileDialog( {
+			accept: props.accept,
+			multiple: props.multiple,
+			callback: ( files ) => {
+				this.fire( "change", { files } );
+			},
+		});
+
+		this.setContent( [
+			fileDialog,
+			new Icon( { iconId: props.icon ?? icon_drop } ),
+			new SimpleText( { text: props.label ?? _tr.global.filedrop } ),
+		])
+
+		this.setAttribute( "tabIndex", 0 );
+		this.addDOMEvent( "click", ( ) => fileDialog.showDialog() );
+		this.addDOMEvent( "keydown", ( e ) => { if( e.key==" " ) { fileDialog.showDialog() } } );
+
+		dragManager.registerDropTarget( this, async ( cmd, el, infos ) => {
+			if( cmd=="enter" ) {
+				this.addClass( "hit" );
+			}
+			else if( cmd=='leave' ) {
+				this.removeClass( "hit" );
+			}
+			else if( cmd=='drop' ) {
+				if( infos.data.files && infos.data.files.length>0 ) {
+					const files = infos.data.files;
+					this.fire( "change", { files } );
+				}
+			}
+		} );
+	}
+}