x4js 1.6.5 → 2.0.1

package/src/components/tabs/tabs.ts

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

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

@@ -0,0 +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;
+		}
+	}
+}

package/src/components/textarea/textarea.ts

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

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

@@ -0,0 +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;
+		}
+	}
+}

package/src/components/textedit/textedit.ts

@@ -0,0 +1,82 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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,
+			]})
+		])
+	}
+}

package/src/components/themes.scss

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

package/src/components/tooltips/circle-info-sharp-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"  fill="currentColor"> <!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM192 352v32h16 96 16V352H304 272V240 224H256 216 200v32h16 24v96H208 192zm88-168V136H232v48h48z"/></svg>

package/src/components/tooltips/tooltips.scss

@@ -0,0 +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;
+	}
+}

package/src/components/tooltips/tooltips.ts

@@ -0,0 +1,103 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file tooltips.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, wrapDOM } from '@core/component';
+import { Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '@core/core_tools';
+
+import { HBox } from '../boxes/boxes';
+import { Popup, PopupProps } from '../popup/popup.js';
+import { Icon } from '../icon/icon.js';
+
+import "./tooltips.scss"
+
+import icon from "./circle-info-sharp-light.svg"
+
+
+let last_hit: HTMLElement = null;
+let tooltip: Tooltip = null;
+
+const timer = new Timer( );
+
+export function initTooltips( ) {
+
+	document.addEventListener( "mouseenter", ( ev: MouseEvent ) => {
+		if( ev.target===document ) {
+			return;
+		}
+		
+		const c = wrapDOM( ev.target as HTMLElement );
+		const tt = c.getAttribute( "tooltip" );
+		if( tt ) {
+			last_hit = ev.target as HTMLElement;
+			const rc = c.getBoundingRect( );
+			showTT( tt, rc, { x:ev.pageX,y:ev.pageY } );
+		}
+
+	}, true );
+
+	document.addEventListener( "mouseleave", ( ev: Event ) => {
+		//console.log( "leave", ev.target );
+
+		if( last_hit && ev.target==last_hit ) {
+			last_hit = null;
+			closeTT( );
+		}
+
+	}, true );
+}
+
+function showTT( text: string, rc: Rect, pt: Point ) {
+	if( !tooltip ) {
+		tooltip = new Tooltip( { } );
+	}
+
+	timer.setTimeout( null, 300, ( ) => {
+		tooltip.setText( unsafeHtml(text) );
+		//tooltip.displayNear( rc, "top left", "bottom left", {x:0,y:4} );
+		tooltip.displayAt( pt.x, pt.y );
+	} );
+}
+
+function closeTT( ) {
+	tooltip.show( false );
+	timer.clearTimeout( null );
+}
+
+/**
+ * 
+ */
+
+class Tooltip extends Popup {
+
+	constructor( props: PopupProps ) {
+		super( props );
+
+		this.setContent( 
+			new HBox( {content: [
+				new Icon( { iconId: icon } ),
+				new Component( { id: "text" } )
+			]} )
+		);
+	}
+
+	/**
+	 * 
+	 */
+
+	setText( text: string|UnsafeHtml )	{
+		this.query( "#text" ).setContent( text );
+	}
+}

package/src/components/treeview/chevron-down-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M267.3 395.3c-6.2 6.2-16.4 6.2-22.6 0l-192-192c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L256 361.4 436.7 180.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-192 192z"/></svg>