x4js 2.0.20 → 2.0.22

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

@@ -1,205 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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';
-
-/**
- * 
- */
-
-
-export interface TabItem {
-	name: string;
-	title: string;
-	icon?: string;
-	content: 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;
-	
-	constructor( props: TablistProps, items: TabItem[] ) {
-		super( props );
-
-		this.setItems( items );
-		this.mapPropEvents( props, "click" );
-	}
-
-	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;
-		
-		if( this._selitem ) {
-			this._selitem.setClass( "selected", true );
-		}
-	}
-
-
-	setItems( items: TabItem[ ] ) {
-		this.clearContent( );
-		items.forEach( tab => {
-			this.addItem( tab );
-		})
-	}
-
-	addItem( tab: TabItem ) {
-		this.appendContent( new CTab( {
-			click: ( ev ) => this._on_click( ev ),
-		}, tab ) );
-	}
-
-	getTabCount( ) {
-		return this.dom.children.length;
-	}
-}
-
-
-/**
- * 
- */
-
-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;
-	private _current: string;
-
-	constructor( props: TabsProps ) {
-		super( props );
-
-		const pages = props.items?.map( x => {
-			return {
-				name: x.name,
-				content: x.content ,
-			}
-		});
-		
-		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 );
-		this._current = name;
-	}
-
-	private _onclick( ev: TablistClickEvent ) {
-		this.selectTab( ev.name );
-	}
-
-	/**
-	 * 
-	 */
-	
-	getTab( name: string ) {
-		return this._stack.getPage( name );
-	}
-
-	getCurTab( ) {
-		return this._current;
-	}
-
-	/**
-	 * 
-	 */
-
-	addTab( item: TabItem ) {
-		this._list.addItem( item );
-		this._stack.addItem( { name: item.name, content: item.content } );
-
-		if( this._list.getTabCount( )==1 ) {
-			this.selectTab( item.name );
-		}
-	}
-}
-

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

@@ -1,63 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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,125 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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';
-
-/**
- * 
- */
-
-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,116 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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;
-		}
-	}
-}

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

@@ -1,115 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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 { EventCallback } from '../../core/core_events';
-import { Component, makeUniqueComponentId } from '../../core/component';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
-
-import { HBox } from '../boxes/boxes';
-import { DateProps, Input, InputProps, NumberProps, TextInputProps, TimeProps } from "../input/input"
-import { Label } from '../label/label';
-
-import "./textedit.module.scss";
-
-//@todo: disabled
-
-/**
- * 
- */
-
-type TextEditInputs = TextInputProps | NumberProps | DateProps | TimeProps;
-
-interface TextEditBase {
-	label: string | UnsafeHtml;
-	labelWidth?: number;
-	inputWidth?: number;		
-	inputId?: string;
-	inputGadgets?: Component[];
-	inputAttrs?: any;
-}
-
-type TextEditProps = TextEditInputs & TextEditBase;
-
-/*
-not enougth precise
-interface TextEditProps extends InputProps {
-	label: string | UnsafeHtml;
-	labelWidth?: number;
-	editWidth?: number;		
-	inputId?: string;
-
-	type?: "text" | "email" | "password" | "date" | "number" | "time";
-	name?: string;
-	readonly?: boolean;
-	required?: boolean;
-	value: string | number;
-	placeholder?: string;
-	autofocus?: boolean;
-
-	inputGadgets?: Component[];
-	inputAttrs?: any;
-
-	focus?: EventCallback<EvFocus>;
-	change?: EventCallback<EvChange>;
-}
-*/
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-export class TextEdit extends HBox {
-
-	private input: Input;
-
-	constructor( props: TextEditProps ) {
-		super( props );
-
-		if( !props.inputId ) {
-			props.inputId = makeUniqueComponentId()
-		}
-
-		if( props.required ) {
-			this.setAttribute( "required", true );
-		}
-
-		const gadgets = props.inputGadgets ?? [];
-		const iprops: InputProps = { ...props, id: props.inputId, attrs: props.inputAttrs, width: props.inputWidth };
-
-		this.setContent( [
-			props.label ? new HBox( { id: "label", width: props.labelWidth, content: [
-				new Label( { tag: "label", text: props.label, labelFor: props.inputId } ),
-			]}) : null,
-			new HBox( { id: "edit", content: [
-				this.input = new Input( iprops ),
-				...gadgets,
-			]})
-		])
-	}
-
-	getValue( ) {
-		return this.input.getValue( );
-	}
-
-	setValue( value: string ) {
-		this.input.setValue( value );
-	}
-
-	getInput( ) {
-		return this.input;
-	}
-}

package/lib/src/components/themes.scss

@@ -1,88 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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-a5:  #{lighten($color--base, 35%)};
-	--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-warning-a50: #b67b0d;
-
-	--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-light: #eaeaea; // 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 );
-
-	--warning-background: var( --color-warning-a50 );
-	--warning-color: var( --color-primary-a0 );
-
-	--success-background: var( --color-success-a50 );
-	--success-background-active: var( --color-success-a60 );
-	--success-color: var( --color-success-a0 );
-}
-