x4js 2.0.12 → 2.0.13

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

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

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

@@ -1,92 +1,94 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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 { 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';
+import { class_ns } from '@core/core_tools.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;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+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( );
+	}
+}
+

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

@@ -1,34 +1,34 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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 );
-
-	&>.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 );
+
+	&>.xcontainer {
+
+	}
+}
+

package/lib/src/components/form/form.ts

@@ -1,36 +1,41 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file form.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 { Box } from '../boxes/boxes.js';
-
-import "./form.module.scss"
-
-type FormValue = string | number | boolean;
-type FormValues = Record<string,FormValue>;
-
-export class Form extends Box {
-
-	setValues( values: FormValues ) {
-		const items = this.queryAll( "input[name]" );
-		console.log( items );
-	}
-
-	getValues( ): FormValues {
-		const result: FormValues = {};
-		return result;
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file form.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 { class_ns } from '@core/core_tools.js';
+import { Box, BoxProps } from '../boxes/boxes';
+
+import "./form.module.scss"
+
+type FormValue = string | number | boolean;
+type FormValues = Record<string,FormValue>;
+
+export interface FormProps extends BoxProps {
+}
+
+@class_ns( "x4" )
+export class Form<P extends FormProps = FormProps> extends Box<P> {
+
+	setValues( values: FormValues ) {
+		const items = this.queryAll( "input[name]" );
+		console.log( items );
+	}
+
+	getValues( ): FormValues {
+		const result: FormValues = {};
+		return result;
+	}
+}
+