x4js 2.0.35 → 2.1.0-manual

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

@@ -1,70 +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 );
-		}
-	}	
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.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/src/components/filedrop/filedrop.ts

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

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

@@ -1,38 +1,38 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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 );
-
-	&.no-flex {
-		flex-grow: 0;
-	}
-
-	&>.xcontainer {
-
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 );
+
+	&.no-flex {
+		flex-grow: 0;
+	}
+
+	&>.xcontainer {
+
+	}
+}
+