x4js 2.0.12 → 2.0.13

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

@@ -1,46 +1,46 @@
-@use "../shared.scss";
-
-:root {
-	--tab-border-selected: var( --accent-background );
-	--tab-border-hover: var( --accent-background-hover );
-}
-
-.x4tabs {
-	.x4ctablist {
-		gap: 4px;
-		padding: 5px 5px 0 5px;
-		
-		.x4button {
-			border: none;
-			border-bottom: 2px solid transparent;
-			color: var( --color-gray-7 );
-			margin: 0;
-			outline: none;
-			transition: border-color 0.2s ease;
-
-			&.selected {
-				border-bottom-color: var( --tab-border-selected );
-				font-weight: bold;
-				color: var( --color-gray-9 );
-			}
-
-			&:hover {
-				//border-bottom-color: var( --color-60 );
-				background-color: unset;;
-				color: black;
-				border-bottom-color: var( --tab-border-hover );	
-			}
-
-			&:focus {
-				color: var( --color-60 );
-			}
-		}
-
-	}
-
-	&> .body {
-		padding: 8px;
-		border: 1px solid var( --border );
-	}
-}
-
+@use "../shared.scss";
+
+:root {
+	--tab-border-selected: var( --accent-background );
+	--tab-border-hover: var( --accent-background-hover );
+}
+
+.x4tabs {
+	.x4ctablist {
+		gap: 4px;
+		padding: 5px 5px 0 5px;
+		
+		.x4button {
+			border: none;
+			border-bottom: 2px solid transparent;
+			color: var( --color-gray-7 );
+			margin: 0;
+			outline: none;
+			transition: border-color 0.2s ease;
+
+			&.selected {
+				border-bottom-color: var( --tab-border-selected );
+				font-weight: bold;
+				color: var( --color-gray-9 );
+			}
+
+			&:hover {
+				//border-bottom-color: var( --color-60 );
+				background-color: unset;;
+				color: black;
+				border-bottom-color: var( --tab-border-hover );	
+			}
+
+			&:focus {
+				color: var( --color-60 );
+			}
+		}
+
+	}
+
+	&> .body {
+		padding: 8px;
+		border: 1px solid var( --border );
+	}
+}
+

package/lib/src/components/tabs/tabs.ts

@@ -1,157 +1,168 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file tabs.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, EvClick } from '../../core/component';
-import { CoreEvent } from '../../core/core_events';
-
-import { Button, ButtonProps } from '../button/button';
-import { HBox, VBox, StackBox } from '../boxes/boxes';
-
-import "./tabs.module.scss"
-
-/**
- * 
- */
-
-
-export interface TabItem {
-	name: string;
-	title: string;
-	icon?: string;
-	tab: Component;
-}
-
-
-class CTab extends Button {
-	constructor( props: ButtonProps, item: TabItem ) {
-		super( props );
-
-		this.addClass( "outline" );
-		this.setIcon( item.icon );
-		this.setText( item.title );
-		this.setData( "tabname", item.name );
-	}
-}
-
-/**
- * 
- */
-
-interface TablistClickEvent extends CoreEvent {
-	name: string;
-}
-
-interface TablistProps extends ComponentProps {
-	click: ( ev: TablistClickEvent ) => void;
-}
-
-interface TablistEvents extends ComponentEvents {
-	click: TablistClickEvent;
-}
-
-/**
- * bar containing buttons
- */
-class CTabList extends HBox<TablistProps,TablistEvents> {
-
-	private _selitem: Button;
-	private _selection: string;
-	
-	constructor( props: TablistProps, content: TabItem[] ) {
-		super( props );
-
-		const tabs = content.map( tab => {
-			return new CTab( {
-				click: ( ev ) => this._on_click( ev ),
-			}, tab );
-		})
-
-		this.mapPropEvents( props, "click" );
-		this.setContent( tabs );
-	}
-
-	private _on_click( ev: EvClick ) {
-		const name = (ev.source as Component).getData( "tabname" );
-		this.fire( "click", {name} );
-	}
-
-	select( name: string ) {
-		const tab = this.query<Button>( `[data-tabname="${name}"]` );
-		if( this._selitem ) {
-			this._selitem.setClass( "selected", false );
-		}
-
-		this._selitem = tab;
-		this._selection = name;
-		
-		if( this._selitem ) {
-			this._selitem.setClass( "selected", true );
-		}
-	}
-}
-
-
-/**
- * 
- */
-
-interface TabsProps extends Omit<ComponentProps,"content"> {
-	default: string;
-	items: TabItem[]
-}
-
-
-export class Tabs extends VBox<TabsProps> {
-
-	private _list: CTabList;
-	private _stack: StackBox;
-
-	constructor( props: TabsProps ) {
-		super( props );
-
-		const pages = props.items?.map( x => {
-			return {
-				name: x.name,
-				content: x.tab ,
-			}
-		});
-		
-		this.setContent( [
-			this._list = new CTabList( { 
-				click: ( ev ) => this._onclick( ev ) }, 
-				props.items 
-			),
-			this._stack = new StackBox( { 
-				cls: "body x4flex", 
-				default: props.default,
-				items: pages,  
-			} ),
-		]);
-
-		if( props.default ) {
-			this.selectTab( props.default );
-		}
-	}
-
-	selectTab( name: string ) {
-		this._list.select( name );
-		this._stack.select( name );
-	}
-
-	private _onclick( ev: TablistClickEvent ) {
-		this.selectTab( ev.name );
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file tabs.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, EvClick } from '../../core/component';
+import { CoreEvent } from '../../core/core_events';
+
+import { Button, ButtonProps } from '../button/button';
+import { HBox, VBox, StackBox } from '../boxes/boxes';
+
+import "./tabs.module.scss"
+import { class_ns } from '@core/core_tools.js';
+
+/**
+ * 
+ */
+
+
+export interface TabItem {
+	name: string;
+	title: string;
+	icon?: string;
+	tab: Component;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+class CTab extends Button {
+	constructor( props: ButtonProps, item: TabItem ) {
+		super( props );
+
+		this.addClass( "outline" );
+		this.setIcon( item.icon );
+		this.setText( item.title );
+		this.setData( "tabname", item.name );
+	}
+}
+
+/**
+ * 
+ */
+
+interface TablistClickEvent extends CoreEvent {
+	name: string;
+}
+
+interface TablistProps extends ComponentProps {
+	click: ( ev: TablistClickEvent ) => void;
+}
+
+interface TablistEvents extends ComponentEvents {
+	click: TablistClickEvent;
+}
+
+/**
+ * bar containing buttons
+ */
+
+@class_ns( "x4" )
+class CTabList extends HBox<TablistProps,TablistEvents> {
+
+	private _selitem: Button;
+	private _selection: string;
+	
+	constructor( props: TablistProps, content: TabItem[] ) {
+		super( props );
+
+		const tabs = content.map( tab => {
+			return new CTab( {
+				click: ( ev ) => this._on_click( ev ),
+			}, tab );
+		})
+
+		this.mapPropEvents( props, "click" );
+		this.setContent( tabs );
+	}
+
+	private _on_click( ev: EvClick ) {
+		const name = (ev.source as Component).getData( "tabname" );
+		this.fire( "click", {name} );
+	}
+
+	select( name: string ) {
+		const tab = this.query<Button>( `[data-tabname="${name}"]` );
+		if( this._selitem ) {
+			this._selitem.setClass( "selected", false );
+		}
+
+		this._selitem = tab;
+		this._selection = name;
+		
+		if( this._selitem ) {
+			this._selitem.setClass( "selected", true );
+		}
+	}
+}
+
+
+/**
+ * 
+ */
+
+interface TabsProps extends Omit<ComponentProps,"content"> {
+	default: string;
+	items: TabItem[]
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Tabs extends VBox<TabsProps> {
+
+	private _list: CTabList;
+	private _stack: StackBox;
+
+	constructor( props: TabsProps ) {
+		super( props );
+
+		const pages = props.items?.map( x => {
+			return {
+				name: x.name,
+				content: x.tab ,
+			}
+		});
+		
+		this.setContent( [
+			this._list = new CTabList( { 
+				click: ( ev ) => this._onclick( ev ) }, 
+				props.items 
+			),
+			this._stack = new StackBox( { 
+				cls: "body x4flex", 
+				default: props.default,
+				items: pages,  
+			} ),
+		]);
+
+		if( props.default ) {
+			this.selectTab( props.default );
+		}
+	}
+
+	selectTab( name: string ) {
+		this._list.select( name );
+		this._stack.select( name );
+	}
+
+	private _onclick( ev: TablistClickEvent ) {
+		this.selectTab( ev.name );
+	}
+}
+

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

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

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

@@ -1,54 +1,60 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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 } from '../../core/component';
+
+import { Label } from '../label/label';
+import { VBox } from '../boxes/boxes';
+
+import "./textarea.module.scss";
+import { class_ns } from '@core/core_tools.js';
+
+/**
+ * 
+ */
+
+interface TextAreaProps extends BaseProps {
+	label?: string;
+	value?: string;
+	resize?: boolean;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+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 );
+		}
+	}
+}