x4js 2.0.12 → 2.0.14

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

@@ -1,59 +1,63 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file textarea.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 {
-	--textarea-border: var( --border );
-	--textarea-border-focus: var( --border-focus );
-}
-
-.x4textarea {
-	margin: 5px;
-
-	.x4label{
-		gap: 0;
-		padding: 4px 0;
-
-		&::after {
-			content: ":"
-		}
-	}
-
-	textarea {
-		@extend .flex;
-
-		border: 1px solid var( --color-gray-3 );
-		padding: 4px;
-		outline: none;
-		font: inherit;
-
-		border: 1px solid var( --textarea-border );
-
-		&:focus {
-			border: 1px solid var( --textarea-border-focus );
-		}
-
-		&::selection {
-			background-color: var( --color-90 );
-			color: white;
-		}
-
-		&[resize=false] {
-			resize: none;
-		}
-	}
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file textarea.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 {
+	--textarea-border: var( --border );
+	--textarea-border-focus: var( --border-focus );
+	--textarea-selection: var( --accent-background );
+}
+
+.x4textarea {
+	margin: 5px;
+
+	.x4label{
+		gap: 0;
+		padding: 4px 0;
+
+		&::after {
+			content: ":"
+		}
+	}
+
+	.x4label:has(.empty) {
+		display: none;
+	}
+
+	textarea {
+		@extend .flex;
+
+		padding: 4px;
+		outline: none;
+		font: inherit;
+
+		border: 1px solid var( --textarea-border );
+
+		&:focus {
+			border: 1px solid var( --textarea-border-focus );
+		}
+
+		&::selection {
+			background-color: var( --textarea-selection );
+			color: white;
+		}
+
+		&[resize=false] {
+			resize: none;
+		}
+	}
+}

package/lib/src/components/textarea/textarea.ts

@@ -1,54 +1,125 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file textarea.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 { BaseProps } from '../input/input';
-import { Component } from '../../core/component';
-
-import { Label } from '../label/label';
-import { VBox } from '../boxes/boxes';
-
-import "./textarea.module.scss";
-
-/**
- * 
- */
-
-interface TextAreaProps extends BaseProps {
-	label?: string;
-	value?: string;
-	resize?: boolean;
-}
-
-export class TextArea extends VBox {
-	
-	private _input: Component;
-
-	constructor( props: TextAreaProps ) {
-		super( props );
-
-		this.setContent( [
-			new Label( { text: props.label }),
-			this._input = new Component( { tag: "textarea" })
-		])
-
-		this._input.setAttribute( "name", props.name );
-		this._input.setAttribute( "value", props.value+'' );
-
-		if( !props.resize ) {
-			this._input.setAttribute( "resize", false );
-		}
-	}
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file textarea.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 { BaseProps } from '../input/input';
+import { Component, ComponentProps } from '../../core/component';
+
+import { Label } from '../label/label';
+import { VBox } from '../boxes/boxes';
+
+import "./textarea.module.scss";
+import { class_ns, IFormElement } from '@core/core_tools.js';
+
+/**
+ * 
+ */
+
+interface TextAreaProps extends BaseProps {
+	label?: string;
+	value?: string;
+	resize?: boolean;
+	readonly?: boolean;
+}
+
+
+/**
+ * 
+ */
+
+class SimpleTextArea extends Component {
+
+	constructor( props: TextAreaProps ) {
+		super( { ...props, tag: "textarea" } );
+
+		this.setAttribute( "name", props.name );
+		this.setAttribute( "value", props.value+'' );
+
+		if( !props.resize ) {
+			this.setAttribute( "resize", false );
+		}
+
+		if( props.readonly ) {
+			this.setAttribute( "readonly", true );
+		}
+	}
+
+	setText( text: string ) {
+		(this.dom as HTMLTextAreaElement).value = text;
+	}
+
+	getText( ) {
+		return (this.dom as HTMLTextAreaElement).value;
+	}
+
+	queryInterface<T>(name: string): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ): any => { return this.getText(); },
+				setRawValue: ( v: any ) => { this.setText( v ); },
+				isValid: ( ) => { return true; }
+			};
+
+			//@ts-ignore
+			return i as T;
+		}
+		
+		return super.queryInterface( name );
+	}
+}
+
+
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class TextArea extends VBox {
+	
+	private _input: SimpleTextArea;
+
+	constructor( props: TextAreaProps ) {
+		super( props );
+
+		this.setContent( [
+			new Label( { text: props.label }),
+			this._input = new SimpleTextArea( props )
+		])
+	}
+
+	setText( text: string ) {
+		this._input.setText( text );
+	}
+
+	getText( ) {
+		return this._input.getText( );
+	}
+
+	queryInterface<T>(name: string): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ): any => { return this.getText(); },
+				setRawValue: ( v: any ) => { this.setText( v ); },
+				isValid: ( ) => { return true; }
+			};
+
+			//@ts-ignore
+			return i as T;
+		}
+		
+		return super.queryInterface( name );
+	}
+}

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

@@ -1,114 +1,116 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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;
+		justify-content: end;
+
+		&> .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 );
+			margin-right: 2px;
+		}
+	}
+
+	&[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;
+		}
+	}
 }