x4js 2.0.12 → 2.0.13

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

@@ -1,114 +1,114 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file textedit.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 {
-	--textedit-border: var( --border );
-	--textedit-border-focus: var( --border-focus );
-	--textedit-required: var( --alert-background );
-
-	--textedit-btn-background: inherit;
-	--textedit-btn-color: var( --text-secondary );
-	--textedit-btn-color-hover: var( --text-primary );
-
-	--textedit-color-disabled: var( --disabled-background );
-}
-
-.x4textedit {
-	@extend .hbox;
-	margin: 5px;
-	gap: 6px;
-
-	&> #label {		// hbox
-		border-bottom: 1px solid transparent;
-
-		&> .x4label {
-			@extend .hbox;
-			height: 100%;
-			padding: 0;
-			font-weight: 500;
-			gap: 0;
-		}
-
-		&::after {
-			content: ":"
-		}
-	}
-
-	&> #edit {
-		@extend .hbox;
-		@extend .flex;
-		border-bottom: 1px solid var( --textedit-border );
-		
-		.x4input {
-			@extend .flex;
-			outline: none;
-			margin: 0;
-		}
-
-		.x4button {
-			margin: 0;
-			padding: 0;
-			background-color: var( --textedit-btn-background );
-			color: var( --textedit-btn-color );
-
-			#icon {
-				color: var( --textedit-btn-color );
-			}
-
-			&:hover, &:hover #icon {
-				color: var( --textedit-btn-color-hover );
-			}
-
-			&:focus {
-				border-bottom-color: var( --textedit-border-focus );
-			}
-		}
-	}
-
-	&:focus-within {
-		#edit {
-			border-bottom-color: var( --textedit-border-focus );
-		}
-	
-	}
-
-	&[required] {
-		& > #label > .x4label::before {
-			content: "*";
-			font-weight: bold;
-			color: var( --textedit-required )
-		}
-	}
-
-	&[disabled] {
-		&, * {
-			cursor: not-allowed;
-		}
-		
-		#label > .x4label #text,
-		#label > .x4label::before,
-		#label::after  {
-			color: var( --textedit-color-disabled );
-		}
-
-		#edit input {
-			color: var( --textedit-color-disabled );
-			background-color: unset;
-		}
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file textedit.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 {
+	--textedit-border: var( --border );
+	--textedit-border-focus: var( --border-focus );
+	--textedit-required: var( --alert-background );
+
+	--textedit-btn-background: inherit;
+	--textedit-btn-color: var( --text-secondary );
+	--textedit-btn-color-hover: var( --text-primary );
+
+	--textedit-color-disabled: var( --disabled-background );
+}
+
+.x4textedit {
+	@extend .hbox;
+	margin: 5px;
+	gap: 6px;
+
+	&> #label {		// hbox
+		border-bottom: 1px solid transparent;
+
+		&> .x4label {
+			@extend .hbox;
+			height: 100%;
+			padding: 0;
+			font-weight: 500;
+			gap: 0;
+		}
+
+		&::after {
+			content: ":"
+		}
+	}
+
+	&> #edit {
+		@extend .hbox;
+		@extend .flex;
+		border-bottom: 1px solid var( --textedit-border );
+		
+		.x4input {
+			@extend .flex;
+			outline: none;
+			margin: 0;
+		}
+
+		.x4button {
+			margin: 0;
+			padding: 0;
+			background-color: var( --textedit-btn-background );
+			color: var( --textedit-btn-color );
+
+			#icon {
+				color: var( --textedit-btn-color );
+			}
+
+			&:hover, &:hover #icon {
+				color: var( --textedit-btn-color-hover );
+			}
+
+			&:focus {
+				border-bottom-color: var( --textedit-border-focus );
+			}
+		}
+	}
+
+	&:focus-within {
+		#edit {
+			border-bottom-color: var( --textedit-border-focus );
+		}
+	
+	}
+
+	&[required] {
+		& > #label > .x4label::before {
+			content: "*";
+			font-weight: bold;
+			color: var( --textedit-required )
+		}
+	}
+
+	&[disabled] {
+		&, * {
+			cursor: not-allowed;
+		}
+		
+		#label > .x4label #text,
+		#label > .x4label::before,
+		#label::after  {
+			color: var( --textedit-color-disabled );
+		}
+
+		#edit input {
+			color: var( --textedit-color-disabled );
+			background-color: unset;
+		}
+	}
 }

package/lib/src/components/textedit/textedit.ts

@@ -1,82 +1,83 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file textedit.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, ComponentProps, makeUniqueComponentId } from '../../core/component';
-import { UnsafeHtml } from '../../core/core_tools';
-
-import { HBox } from '../boxes/boxes';
-import { Input, TextInputProps } from "../input/input"
-import { Label } from '../label/label';
-
-import "./textedit.module.scss";
-
-//@todo: disabled
-
-/**
- * 
- */
-
-interface TextEditProps extends ComponentProps {
-	label: string | UnsafeHtml;
-	labelWidth?: number;
-	inputId?: string;
-
-	type?: "text" | "email" | "password";
-	readonly?: boolean;
-	required?: boolean;
-	value: string | number;
-	placeholder?: string;
-
-	inputGadgets?: Component[];
-}
-
-/**
- * 
- */
-
-export class TextEdit extends HBox {
-	constructor( props: TextEditProps ) {
-		super( props );
-
-		if( !props.inputId ) {
-			props.inputId = makeUniqueComponentId()
-		}
-
-		if( props.required ) {
-			this.setAttribute( "required", true );
-		}
-
-		const gadgets = props.inputGadgets ?? [];
-
-		this.setContent( [
-			new HBox( { id: "label", width: props.labelWidth, content: [
-				new Label( { tag: "label", text: props.label, labelFor: props.inputId } ),
-			]}),
-			new HBox( { id: "edit", content: [
-				new Input( { 
-					type: props.type ?? "text", 
-					readonly: props.readonly, 
-					value: props.value, 
-					id: props.inputId, 
-					required: props.required, 
-					disabled: props.disabled, 
-					placeholder: props.placeholder 
-				} ),
-				...gadgets,
-			]})
-		])
-	}
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file textedit.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, ComponentProps, makeUniqueComponentId } from '../../core/component';
+import { class_ns, UnsafeHtml } from '../../core/core_tools';
+
+import { HBox } from '../boxes/boxes';
+import { Input, TextInputProps } from "../input/input"
+import { Label } from '../label/label';
+
+import "./textedit.module.scss";
+
+//@todo: disabled
+
+/**
+ * 
+ */
+
+interface TextEditProps extends ComponentProps {
+	label: string | UnsafeHtml;
+	labelWidth?: number;
+	inputId?: string;
+
+	type?: "text" | "email" | "password";
+	readonly?: boolean;
+	required?: boolean;
+	value: string | number;
+	placeholder?: string;
+
+	inputGadgets?: Component[];
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class TextEdit extends HBox {
+	constructor( props: TextEditProps ) {
+		super( props );
+
+		if( !props.inputId ) {
+			props.inputId = makeUniqueComponentId()
+		}
+
+		if( props.required ) {
+			this.setAttribute( "required", true );
+		}
+
+		const gadgets = props.inputGadgets ?? [];
+
+		this.setContent( [
+			new HBox( { id: "label", width: props.labelWidth, content: [
+				new Label( { tag: "label", text: props.label, labelFor: props.inputId } ),
+			]}),
+			new HBox( { id: "edit", content: [
+				new Input( { 
+					type: props.type ?? "text", 
+					readonly: props.readonly, 
+					value: props.value, 
+					id: props.inputId, 
+					required: props.required, 
+					disabled: props.disabled, 
+					placeholder: props.placeholder 
+				} ),
+				...gadgets,
+			]})
+		])
+	}
+}

package/lib/src/components/themes.scss

@@ -1,77 +1,81 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file themes.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 {
-	--color-primary-a0: #ffffff;
-	--color-primary-a10: #e0eaf7;
-	--color-primary-a20: #c0d6ef;
-	--color-primary-a30: #a0c2e7;
-	--color-primary-a40: #7dafde;
-	--color-primary-a50: #569cd6;
-	--color-primary-a55: #{lighten(#477ba7,5%)};
-	--color-primary-a60: #477ba7;
-	--color-primary-a70: #375b7a;
-	--color-primary-a80: #283d51;
-	--color-primary-a90: #18212a;
-	--color-primary-a100: #000000;
-
-	--color-danger-a50: #c01010;
-	--color-danger-a60: #{darken(#c01010,10%)};
-
-	--color-success-a50: #10c01f;
-	--color-success-a60: #{darken(#10c01f,10%)};
-}
-
-:root {
-	// Backgrounds
-	--background-primary: var(--color-primary-a0); // Fond principal
-	--background-secondary: var(--color-primary-a10); // Fond secondaire
-
-	// Texts
-	--text-primary: var(--color-primary-a100); // Texte principal
-	--text-secondary: #999; // Texte secondaire
-	--text-ternary: #666; // Texte tertiaire
-
-	// disabled
-	--disabled-background: #ccc;
-	--disabled-color: white;
-	--disabled-color-dark: #aaa;
-
-	// accents
-	--accent-background: var(--color-primary-a60); 
-	--accent-background-hover: var(--color-primary-a55); 
-	--accent-background-focus: var(--color-primary-a70);
-	--accent-background-active: var(--color-primary-a80); 
-
-	--accent-color: var(--color-primary-a0); 
-	--accent-color-hover: var(--color-primary-a0); 
-	--accent-color-focus: var(--color-primary-a0);
-	--accent-color-active: var(--color-primary-a0); 
-
-	// Borders
-	--border: #e1e1e1; // Bordures
-	--border-hover: #c2c2c2; // Bordures au survol
-	--border-focus: var( --accent-background ); // Bordures si focus
-
-	--alert-background: var( --color-danger-a50 );
-	--alert-background-active: var( --color-danger-a60 );
-	--alert-color: var( --color-primary-a0 );
-
-	--success-background: var( --color-success-a50 );
-	--success-background-active: var( --color-success-a60 );
-	--success-color: var( --color-success-a0 );
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file themes.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.
+ **/
+
+
+$color--base: #569cd6;
+$color--interval: 8.4%;
+
+:root {
+	--color-primary-a0: #ffffff;
+	--color-primary-a10:  #{lighten($color--base, $color--interval * 4)};
+	--color-primary-a20: #{lighten($color--base, $color--interval * 3)};
+	--color-primary-a30: #{lighten($color--base, $color--interval * 2)};
+	--color-primary-a40: #{lighten($color--base, $color--interval)};
+	--color-primary-a50: #{$color--base};
+	--color-primary-a55: #{darken($color--base,5%)};
+	--color-primary-a60: #{darken($color--base, $color--interval )};
+	--color-primary-a70: #{darken($color--base, $color--interval * 2)};
+	--color-primary-a80: #{darken($color--base, $color--interval * 3)};
+	--color-primary-a90: #{darken($color--base, $color--interval * 4)};
+	--color-primary-a100: #000000;
+
+	--color-danger-a50: #c01010;
+	--color-danger-a60: #{darken(#c01010,10%)};
+
+	--color-success-a50: #10c01f;
+	--color-success-a60: #{darken(#10c01f,10%)};
+}
+
+:root {
+	// Backgrounds
+	--background-primary: var(--color-primary-a0); // Fond principal
+	--background-secondary: var(--color-primary-a10); // Fond secondaire
+
+	// Texts
+	--text-primary: var(--color-primary-a100); // Texte principal
+	--text-secondary: #999; // Texte secondaire
+	--text-ternary: #666; // Texte tertiaire
+
+	// disabled
+	--disabled-background: #ccc;
+	--disabled-color: white;
+	--disabled-color-dark: #aaa;
+
+	// accents
+	--accent-background: var(--color-primary-a60); 
+	--accent-background-hover: var(--color-primary-a55); 
+	--accent-background-focus: var(--color-primary-a70);
+	--accent-background-active: var(--color-primary-a80); 
+
+	--accent-color: var(--color-primary-a0); 
+	--accent-color-hover: var(--color-primary-a0); 
+	--accent-color-focus: var(--color-primary-a0);
+	--accent-color-active: var(--color-primary-a0); 
+
+	// Borders
+	--border: #e1e1e1; // Bordures
+	--border-hover: #c2c2c2; // Bordures au survol
+	--border-focus: var( --accent-background ); // Bordures si focus
+
+	--alert-background: var( --color-danger-a50 );
+	--alert-background-active: var( --color-danger-a60 );
+	--alert-color: var( --color-primary-a0 );
+
+	--success-background: var( --color-success-a50 );
+	--success-background-active: var( --color-success-a60 );
+	--success-color: var( --color-success-a0 );
+}
+

package/lib/src/components/tooltips/tooltips.scss

@@ -1,51 +1,51 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file tooltips.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 {
-	--tooltip-background: var( --color-primary-a70 );
-	--tooltip-color: var( --color-primary-a0 );
-	--tooltip-border: var( --border-dark );
-}
-
-.x4tooltip {
-	@extend .shadow-lg;
-	display: flex;
-	flex-direction: row;
-	border: none;
-	font-size: 90%;
-	position: absolute;
-
-	.x4icon {
-		width: 1.6em;
-		height: 100%;
-		padding: 2px 4px;
-		svg {
-			max-height: 100%;
-		}
-
-		background-color: var( --tooltip-background );
-		color: var( --tooltip-color );
-		border: 1px solid var( --tooltip-border );
-	}
-
-	#text {
-		background-color: var( --tooltip-background );
-		color: var( --tooltip-color );
-		padding: 4px;
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file tooltips.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 {
+	--tooltip-background: var( --color-primary-a70 );
+	--tooltip-color: var( --color-primary-a0 );
+	--tooltip-border: var( --border-dark );
+}
+
+.x4tooltip {
+	@extend .shadow-lg;
+	display: flex;
+	flex-direction: row;
+	border: none;
+	font-size: 90%;
+	position: absolute;
+
+	.x4icon {
+		width: 1.6em;
+		height: 100%;
+		padding: 2px 4px;
+		svg {
+			max-height: 100%;
+		}
+
+		background-color: var( --tooltip-background );
+		color: var( --tooltip-color );
+		border: 1px solid var( --tooltip-border );
+	}
+
+	#text {
+		background-color: var( --tooltip-background );
+		color: var( --tooltip-color );
+		padding: 4px;
+	}
 }