x4js 2.0.12 → 2.0.14

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

@@ -1,82 +1,84 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file notification.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 {
-	--notification-border: var( --border );
-
-	--notification-icon-default: var( --accent-background );
-	--notification-icon-success: var( --success-background );
-	--notification-icon-danger: var( --alert-background );
-}
-
-.x4notification {
-	@extend .shadow-xl;
-
-	padding: 8px;
-	border: 1px solid var(--notification-border);
-	border-left: 3px solid var( --accent-background );
-		
-	&> .x4hbox {
-		gap: 8px;
-	}
-	
-	.x4icon {
-		width: 24px;
-		color: var( --notification-icon-default );
-	}
-	
-	.body {
-		
-		.title {
-			font-weight: bold;
-			padding: 6px 6px 3px 6px;
-		}
-
-		.text {
-			padding: 3px 6px 6px 6px;
-			color: var( --color-gray-7 );
-		}
-	}
-
-	
-	&.success {
-		border-left-color: var( --notification-icon-success );
-
-		.x4icon {	
-			color: var( --notification-icon-success );
-		}
-	}
-
-	&.danger {
-		border-left-color: var( --notification-icon-danger );;
-
-		.x4icon {	
-			color: var( --notification-icon-danger );
-		}
-	}
-
-	.x4button {
-		height: 24px;
-		color: var( --color-gray-7 );
-		border: none;
-
-		&:hover {
-			//background-color: var( -- );;
-		}
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file notification.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 {
+	--notification-border: var( --border );
+	--notification-background: white;
+
+	--notification-icon-default: var( --accent-background );
+	--notification-icon-success: var( --success-background );
+	--notification-icon-danger: var( --alert-background );
+}
+
+.x4notification {
+	@extend .shadow-xl;
+
+	padding: 8px;
+	border: 1px solid var(--notification-border);
+	border-left: 3px solid var( --accent-background );
+	background-color: var( --notification-background );
+		
+	&> .x4hbox {
+		gap: 8px;
+	}
+	
+	.x4icon {
+		width: 2em;
+		height: 2em;
+		color: var( --notification-icon-default );
+	}
+	
+	.body {
+		.title {
+			font-weight: bold;
+			padding: 6px 6px 3px 6px;
+		}
+
+		.text {
+			padding: 3px 6px 6px 6px;
+			color: var( --color-gray-7 );
+		}
+	}
+
+	
+	&.success {
+		border-left-color: var( --notification-icon-success );
+
+		.x4icon {	
+			color: var( --notification-icon-success );
+		}
+	}
+
+	&.danger {
+		border-left-color: var( --notification-icon-danger );;
+
+		.x4icon {	
+			color: var( --notification-icon-danger );
+		}
+	}
+
+	.x4button {
+		height: 24px;
+		color: var( --color-gray-7 );
+		border: none;
+
+		&:hover {
+			//background-color: var( -- );;
+		}
+	}
 }

package/lib/src/components/notification/notification.ts

@@ -1,108 +1,107 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file notification.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 { ComponentProps } from '../../core/component.js';
-import { Rect, UnsafeHtml } from '../../core/core_tools.js';
-
-import { Popup } from '../popup/popup.js';
-import { HBox, VBox } from '../boxes/boxes.js';
-import { Icon } from '../icon/icon.js';
-import { Label } from '../label/label.js';
-import { Button } from '../button/button.js';
-
-import "./notification.module.scss";
-
-import def_icon from "./circle-check-solid.svg";
-import danger_icon from "./circle-exclamation-solid.svg"
-import spin_icon from "./circle-notch-light.svg";
-import close_icon from "./xmark-sharp-light.svg";
-
-/**
- * 
- */
-
-interface NotificationProps extends ComponentProps {
-	loading?: boolean;
-	iconId?: string;
-	closable?: boolean;
-	mode?: "success" | "danger";
-
-	title: string;
-	text: string | UnsafeHtml;
-}
-
-/**
- * 
- */
-
-export class Notification extends Popup {
-	constructor( props: NotificationProps ) {
-		super( { } );
-
-		let icon = props.iconId;
-		if( !icon ) {
-			if( props.loading ) {
-				icon = spin_icon;
-				this.addClass( "")
-			}
-			else if( props.mode=="danger" ) {
-				icon = danger_icon;
-			}
-			else {
-				icon = def_icon;
-			}
-		}
-
-		this.addClass( props.mode );
-
-		const _icon = new Icon( { iconId: icon } );
-		if( props.loading ) {
-			_icon.addClass( "rotate" );
-			this.props.modal = true;
-		}
-
-		this.setContent( new HBox( { 
-			content: [
-				_icon,
-				new VBox( { cls: "body", content: [ 
-					new Label( { cls: "title", text: props.title } ),
-					new Label( { cls: "text", text: props.text } ),
-				] }),
-				new Button( { cls: "outline", icon: close_icon, click: ( ) => {
-					this.close( );
-				} } )
-			]
-		}) );
-	}
-
-	close( ) {
-		this.clearTimeout( "close" );
-		super.close( );
-	}
-
-	display( time_in_s = 0 ) {
-		const r = new Rect( 0, 0, window.innerWidth, window.innerHeight );
-		this.displayNear( r, "bottom right", "bottom right", { x: -20, y: -10 } );
-
-		if( time_in_s ) {
-			this.setTimeout( "close", time_in_s*1000, ( ) => { 
-				this.close() 
-			} );
-		}
-	}
-}
-
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file notification.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 { ComponentProps } from '../../core/component.js';
+import { class_ns, Rect, UnsafeHtml } from '../../core/core_tools.js';
+
+import { Popup } from '../popup/popup.js';
+import { HBox, VBox } from '../boxes/boxes.js';
+import { Icon } from '../icon/icon.js';
+import { Label } from '../label/label.js';
+import { Button } from '../button/button.js';
+
+import "./notification.module.scss";
+
+import def_icon from "./circle-check-solid.svg";
+import danger_icon from "./circle-exclamation-solid.svg"
+import spin_icon from "./circle-notch-light.svg";
+import close_icon from "./xmark-sharp-light.svg";
+
+/**
+ * 
+ */
+
+interface NotificationProps extends ComponentProps {
+	loading?: boolean;
+	iconId?: string;
+	closable?: boolean;
+	mode?: "success" | "danger";
+
+	title: string;
+	text: string | UnsafeHtml;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Notification extends Popup {
+	constructor( props: NotificationProps ) {
+		super( { } );
+
+		let icon = props.iconId;
+		if( !icon ) {
+			if( props.loading ) {
+				icon = spin_icon;
+				this.addClass( "")
+			}
+			else if( props.mode=="danger" ) {
+				icon = danger_icon;
+			}
+			else {
+				icon = def_icon;
+			}
+		}
+
+		this.addClass( props.mode );
+
+		const _icon = new Icon( { iconId: icon } );
+		if( props.loading ) {
+			_icon.addClass( "rotate" );
+			this.props.modal = true;
+		}
+
+		this.setContent( new HBox( { 
+			content: [
+				_icon,
+				new VBox( { cls: "body", content: [ 
+					props.title ? new Label( { cls: "title", text: props.title } ) : null,
+					new Label( { cls: "text", text: props.text } ),
+				] }),
+				props.closable ? new Button( { cls: "outline", icon: close_icon, click: ( ) => {this.close( );} } ) : null
+			]
+		}) );
+	}
+
+	close( ) {
+		this.clearTimeout( "close" );
+		super.close( );
+	}
+
+	display( time_in_s = 0 ) {
+		const r = new Rect( 0, 0, window.innerWidth, window.innerHeight );
+		this.displayNear( r, "bottom right", "bottom right", { x: -20, y: -10 } );
+
+		if( time_in_s ) {
+			this.setTimeout( "close", time_in_s*1000, ( ) => { 
+				this.close() 
+			} );
+		}
+	}
+}
+
+

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

@@ -1,48 +1,60 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file panel.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 {
-	--panel-border: var( --border );
-	--panel-title-color: var( --border );
-}
-
-
-.x4panel {
-	border: 1px solid var( --panel-border );
-	border-radius: 4px;
-	margin: 5px;
-	padding: 8px;
-	position: relative;
-
-	& > legend {
-		padding: 0 5px;
-		position: absolute;
-		left: 4px;
-		top: -0.7em;
-		background-color: white;
-		font-weight: bold;
-		color: var(--color-gray-9);
-	}
-
-	& > .body {
-		@extend .rel-fit;
-		overflow: hidden;
-		justify-content: start;
-		padding: 8px;
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file panel.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 {
+	--panel-border: var( --border );
+	--panel-title-color: var( --border );
+}
+
+
+.x4panel {
+	border: 1px solid var( --panel-border );
+	border-radius: 4px;
+	margin: 5px;
+	padding: 8px;
+	position: relative;
+
+	& > legend {
+		padding: 0 5px;
+		position: absolute;
+		left: 4px;
+		top: -0.7em;
+		background-color: white;
+		font-weight: bold;
+		color: var(--color-gray-9);
+	}
+
+	& > .body {
+		@extend .rel-fit;
+		overflow: hidden;
+		justify-content: start;
+		padding: 8px;
+	}
+}
+
+.x4panel.inline {
+	border: none;
+	border-top: 1px solid var( --border );
+	margin-top: 1.5em;
+
+	legend {
+		background: none;
+		top: -1.4em;
+		left: 0;
+	}
 }

package/lib/src/components/panel/panel.ts

@@ -1,57 +1,58 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file panel.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, ComponentContent, ComponentProps } from '../../core/component';
-import { UnsafeHtml, Constructor } from '../../core/core_tools';
-
-import { VBox } from '../boxes/boxes';
-import { Label } from '../label/label';
-
-import "./panel.module.scss";
-
-interface PanelProps extends ComponentProps {
-	title: string;
-	icon?: string;
-	bodyModel?: Constructor<Component>;
-}
-
-/**
- * 
- */
-
-export class Panel extends VBox<PanelProps> {
-
-	private _title: Component;
-	private _body: Component;
-
-	constructor( props: PanelProps ) {
-		super( { ...props, content: undefined } );
-
-		const model = props.bodyModel ?? VBox;
-		super.setContent( [
-			this._title = new Label( { tag: "legend", text: props.title, icon: props.icon } ),
-			this._body  = new model( { cls: "body", content: props.content } )
-		] );
-	}
-
-	setContent( content: ComponentContent ) {
-		this._body.setContent( content );
-	}
-
-	setTitle( title: string | UnsafeHtml ) {
-		this._title.setContent( title )
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file panel.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, ComponentContent, ComponentProps } from '../../core/component';
+import { UnsafeHtml, Constructor, class_ns } from '../../core/core_tools';
+
+import { VBox } from '../boxes/boxes';
+import { Label } from '../label/label';
+
+import "./panel.module.scss";
+
+interface PanelProps extends ComponentProps {
+	title: string;
+	icon?: string;
+	bodyModel?: Constructor<Component>;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Panel extends VBox<PanelProps> {
+
+	private _title: Component;
+	private _body: Component;
+
+	constructor( props: PanelProps ) {
+		super( { ...props, content: undefined } );
+
+		const model = props.bodyModel ?? VBox;
+		super.setContent( [
+			this._title = new Label( { tag: "legend", text: props.title, icon: props.icon } ),
+			this._body  = new model( { cls: "body", content: props.content } )
+		] );
+	}
+
+	setContent( content: ComponentContent ) {
+		this._body.setContent( content );
+	}
+
+	setTitle( title: string | UnsafeHtml ) {
+		this._title.setContent( title )
+	}
 }