x4js 2.0.13 → 2.0.15

package/lib/src/components/select/select.ts

@@ -0,0 +1,134 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file select.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2025 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.js';
+import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus  } from '../../core/component';
+import { class_ns } from '../../core/core_tools';
+
+import { ListItem } from '../components';
+
+import "./select.module.scss"
+
+/**
+ * 
+ */
+
+export interface SelectProps extends ComponentProps {
+	name?: string;
+	value: string;
+	items: ListItem[];
+	multiple?: boolean;
+	change?: EventCallback<EvChange>;
+	focus?: EventCallback<EvFocus>;
+}
+
+interface SelectEvents extends ComponentEvent {
+	focus: EvFocus;
+	change: EvChange;
+}
+
+
+/**
+ * simple select
+ */
+
+@class_ns( "x4" )
+export class Select extends Component<SelectProps,SelectEvents> {
+
+	constructor( props: SelectProps ) {
+		super( { tag: "select", ...props } );
+
+		this.mapPropEvents( props, "focus", "change" );
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
+
+		this.setItems( props.items );
+		
+		this.addDOMEvent( "blur", ( e ) => { this.on_focus(e,true);} );
+		this.addDOMEvent( "focus", ( e ) => { this.on_focus(e,false);} );
+		this.addDOMEvent( "input", ( e ) => { this.on_change(e as InputEvent); });
+
+		if( props.multiple ) {
+			this.setAttribute( "multiple", true );
+		}
+
+		if( props.value ) {
+			this.setValue( props.value );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private on_focus( ev: FocusEvent, focus_out: boolean ) {
+		const event: EvFocus = { focus_out }
+		this.fire( "focus", event );
+
+		if( event.defaultPrevented ) {
+			ev.preventDefault( );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private on_change( ev: InputEvent ) {
+
+		const event: EvChange = { value: this.getValue() };
+		this.fire( "change", event );
+
+		if( event.defaultPrevented ) {
+			ev.preventDefault( );
+		}
+	}
+
+	/**
+	 * 
+ 	 */
+
+	setItems( items: ListItem[] ) {
+		this.setContent( items.map( x => {
+			return new Component( {
+				tag: "option",
+				attrs: { value: x.id },
+				content: x.text,
+			});
+		} ));
+	}
+
+	/**
+	 * @returns 
+	 */
+
+	public getValue( ) {
+		return (this.dom as HTMLSelectElement).value;
+	}
+
+	/**
+	 * 
+	 * @param value 
+	 */
+	
+	public setValue( value: string ) {
+		(this.dom as HTMLSelectElement).value = value+"";
+	}
+}
+
+

package/lib/src/components/shared.scss

@@ -85,6 +85,53 @@
 	}
 }
 
+@keyframes shaking {
+    0% {
+        transform: rotate(-15deg)
+    }
+
+    4% {
+        transform: rotate(15deg)
+    }
+
+    8%,24% {
+        transform: rotate(-18deg)
+    }
+
+    12%,28% {
+        transform: rotate(18deg)
+    }
+
+    16% {
+        transform: rotate(-22deg)
+    }
+
+    20% {
+        transform: rotate(22deg)
+    }
+
+    32% {
+        transform: rotate(-12deg)
+    }
+
+    36% {
+        transform: rotate(12deg)
+    }
+
+    40% {
+        transform: rotate(0deg)
+    }
+}
+
+
 .x4rotate {
 	animation: rotating 2s linear infinite;
+}
+
+.x4shake {
+	animation-name: shaking;
+    animation-duration: 5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-direction: reverse;
 }

package/lib/src/components/sizers/sizer.ts

@@ -29,20 +29,25 @@ interface EvSizeChange extends ComponentEvent {
 
 interface CSizerEvent extends ComponentEvents {
 	resize: EvSizeChange;
+	start: ComponentEvent;
+	stop: ComponentEvent;
 }
 
+type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+
 /**
  * 
  */
 
+
 @class_ns( "x4" )
 export class CSizer extends Component<ComponentProps,CSizerEvent> {
 
-	private _type: string;
+	private _type: SizerType;
 	private _ref: Component;
 	private _delta: Point;
 
-	constructor( type: string, target?: Component ) {
+	constructor( type: SizerType, target?: Component ) {
 		super( {} );
 
 		this._type = type;
@@ -68,9 +73,12 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			else {
 				this._delta.y = e.pageY-(rc.top+rc.height);
 			}
+
+			this.fire( "start", { })
 		});
 
 		this.addDOMEvent( "pointerup", ( e: PointerEvent ) => {
+			this.fire( "stop", { })
 			this.releaseCapture( e.pointerId );
 			this._ref = null;
 		});

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

@@ -22,46 +22,93 @@
 }
 
 .x4slider {
-	height: 28px;
 	outline: none;
-	padding: 10px 12px;
 	touch-action: none;
-	margin: 5px 0;
+	overflow: hidden;
 
-	.track {
-		background-color: var( --slider-track );
-		width: 100%;
+	&:not(.vertical) {
+		padding: 10px 12px;
+		margin: 5px 0;
+		height: 28px;
+		
+		.track {
+			background-color: var( --slider-track );
+			width: 100%;
 
-		position: relative;
-		top: 50%;
-		height: 3px;
-	}
+			position: relative;
+			top: 50%;
+			height: 3px;
+		}
 
-	.bar {
-		position: absolute;
-		width: 61%;
-		height: 3px;
-		//padding: 4px 0;
-		background-color: var( --color-60 );
-	}
+		.bar {
+			position: absolute;
+			width: 61%;
+			height: 3px;
+			//padding: 4px 0;
+			//background-color: var( --color-60 );
+		}
 
-	.thumb {
-		position: absolute;
-		left: 61%;
-		outline: none;
-		
-		background-color: var( --slider-thumb-background );
-		border: 3px solid var( --slider-thumb-border );
-		border-radius: 8px;
+		.thumb {
+			position: absolute;
+			left: 61%;
+			outline: none;
+			
+			background-color: var( --slider-thumb-background );
+			border: 3px solid var( --slider-thumb-border );
+			border-radius: 8px;
 
-		top: 50%;
-		width: 16px;
-		height: 16px;
+			top: 50%;
+			width: 16px;
+			height: 16px;
 
-		transform: translate(-50%,-50%);
-		cursor: pointer;
+			transform: translate(-50%,-50%);
+			cursor: pointer;
+		}
 	}
 
+	&.vertical {
+		padding: 12px 10px;
+		margin: 0 5px;
+		width: 28px;
+
+		.track {
+			background-color: var( --slider-track );
+			height: 100%;
+	
+			position: relative;
+			left: 50%;
+			width: 3px;
+		}
+	
+		.bar {
+			position: absolute;
+			width: 3px;
+			height: 61%;
+			//padding: 4px 0;
+			//background-color: var( --color-60 );
+		}
+	
+		.thumb {
+			position: absolute;
+			left: 50%;
+			outline: none;
+			
+			background-color: var( --slider-thumb-background );
+			border: 3px solid var( --slider-thumb-border );
+			border-radius: 8px;
+	
+			top: 61%;
+			width: 16px;
+			height: 16px;
+	
+			transform: translate(-50%,-50%);
+			cursor: pointer;
+		}
+	
+	}
+
+
+	
 	&:focus .thumb {
 		outline-offset: 3px;
     	outline-color: var(--slider-thumb-border-focus);

package/lib/src/components/slider/slider.ts

@@ -14,7 +14,8 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvents, ComponentProps, ComponentEvent } from '../../core/component';
+import { EventCallback } from '@core/core_events.js';
+import { Component, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
 import { class_ns, Rect } from '../../core/core_tools.js';
 
 import { HBox } from '../boxes/boxes';
@@ -22,12 +23,8 @@ import { Input } from '../input/input.js';
 
 import './slider.module.scss';
 
-interface ChangeEvent extends ComponentEvent {
-	value: number;
-}
-
 interface SliderEvents extends ComponentEvents {
-	change: ChangeEvent;
+	change: EvChange;
 }
 
 interface SliderProps extends ComponentProps {
@@ -35,6 +32,8 @@ interface SliderProps extends ComponentProps {
 	min: number;
 	max: number;
 	step?: number;
+	vertical?: boolean;
+	change?: EventCallback<EvChange>;
 }
 
 /**
@@ -54,12 +53,25 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 	constructor( props: SliderProps ) {
 		super( props );
 
+		this.mapPropEvents( props, "change" );
+
+		if( props.vertical ) {
+			this.addClass( 'vertical' );
+		}
+
 		this.setContent( [
 			new HBox( { cls: "track", content: [
 				this._bar = new Component( { cls: "bar" } ),
 				this._thumb = new Component( { cls: "thumb" } ),
 			] }),
-			this._range = new Input( { type: "range", hidden: true, value: props.value, min: props.min, max: props.max, step: props.step } )
+			this._range = new Input( { 
+				type: "range", 
+				hidden: true, 
+				value: props.value, 
+				min: props.min, 
+				max: props.max, 
+				step: props.step,
+			} )
 		]);
 
 		this.setAttribute( "tabindex", 0 );
@@ -71,9 +83,7 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 			keydown: ( ev ) => this._on_key( ev ),
 		} );
 
-		this._range.addDOMEvent( "change", ( ev: Event) => {
-			//console.log( ev );
-		})
+		this._update( );
 	}
 
 	private _on_mousedown( ev: PointerEvent ) {
@@ -88,30 +98,55 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 		this.setCapture( ev.pointerId );
 	}
 
+	private _getMinMax( ) {
+		const min = parseInt( this._range.getAttribute( 'min' ) );
+		const max = parseInt( this._range.getAttribute( 'max' ) );
+		return [min,max];
+	}
+
 	private _on_mousemove( ev: PointerEvent ) {
 		if( this._mdown ) {
-			let pos = ev.pageX - this._irect.left;
-			if( pos<0 ) {
-				pos = 0;
+
+			let pos: number;
+			let size: number;
+			
+			if( !this.props.vertical ) {
+				pos = ev.offsetX;	// - this._irect.left;
+				size = this._irect.width;
+			}
+			else {
+				pos  = ev.offsetY;	// - this._irect.top;
+				size = this._irect.height;
 			}
-			else if( pos>this._irect.width ) {
-				pos = this._irect.width;
+		
+			let perc = pos / size;
+			if( this.props.vertical ) {
+				perc = 1-perc;
 			}
 
-			let perc = pos / this._irect.width * 100;
-			this._range.setNumValue( perc );
-			
+			const [min,max] = this._getMinMax( );
+
+			this._range.setNumValue( min + (perc * (max-min) ) );
 			this._update( );
 		}
 	}
 
 	private _update( ) {
 		const value = this._range.getNumValue( );
+		const [min,max] = this._getMinMax( );
+
+		let perc = max>min ? value / Math.abs(max-min) * 100 : 0;
 
-		const perc = value / (this.props.max-this.props.min) * 100;
-		this._thumb.setStyleValue( "left", perc+"%" );
-		this._bar.setStyleValue( "width", perc+"%" );
-		//thumb.setAttribute( "tooltip", value );
+		if( !this.props.vertical ) {
+			this._thumb.setStyleValue( "left", perc+"%" );
+			this._bar.setStyleValue( "width", perc+"%" );
+		}
+		else {
+			// 0 is at bottom
+			perc = 100-perc;
+			this._thumb.setStyleValue( "top", perc+"%" );
+			this._bar.setStyleValue( "height", perc+"%" );
+		}
 
 		this.fire( "change", { value } );
 	}
@@ -145,4 +180,19 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 			this._update( );
 		}
 	}
+
+	setMin( min: number ) {
+		this._range.setAttribute( 'min', min+'' );
+		this._update( );
+	}
+
+	setMax( max: number ) {
+		this._range.setAttribute( 'max', max+'' );
+		this._update( );
+	}
+
+	setValue( v: number ) {
+		this._range.setNumValue( v );
+		this._update( );
+	}
 }

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

@@ -25,14 +25,13 @@
 			}
 
 			&:hover {
-				//border-bottom-color: var( --color-60 );
 				background-color: unset;;
 				color: black;
 				border-bottom-color: var( --tab-border-hover );	
 			}
 
 			&:focus {
-				color: var( --color-60 );
+				//color: var( --color-60 );
 			}
 		}
 

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

@@ -31,7 +31,7 @@ export interface TabItem {
 	name: string;
 	title: string;
 	icon?: string;
-	tab: Component;
+	content: Component;
 }
 
 /**
@@ -74,19 +74,12 @@ interface TablistEvents extends ComponentEvents {
 class CTabList extends HBox<TablistProps,TablistEvents> {
 
 	private _selitem: Button;
-	private _selection: string;
 	
-	constructor( props: TablistProps, content: TabItem[] ) {
+	constructor( props: TablistProps, items: TabItem[] ) {
 		super( props );
 
-		const tabs = content.map( tab => {
-			return new CTab( {
-				click: ( ev ) => this._on_click( ev ),
-			}, tab );
-		})
-
+		this.setItems( items );
 		this.mapPropEvents( props, "click" );
-		this.setContent( tabs );
 	}
 
 	private _on_click( ev: EvClick ) {
@@ -101,12 +94,29 @@ class CTabList extends HBox<TablistProps,TablistEvents> {
 		}
 
 		this._selitem = tab;
-		this._selection = name;
 		
 		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;
+	}
 }
 
 
@@ -128,6 +138,7 @@ export class Tabs extends VBox<TabsProps> {
 
 	private _list: CTabList;
 	private _stack: StackBox;
+	private _current: string;
 
 	constructor( props: TabsProps ) {
 		super( props );
@@ -135,7 +146,7 @@ export class Tabs extends VBox<TabsProps> {
 		const pages = props.items?.map( x => {
 			return {
 				name: x.name,
-				content: x.tab ,
+				content: x.content ,
 			}
 		});
 		
@@ -159,10 +170,36 @@ export class Tabs extends VBox<TabsProps> {
 	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

@@ -19,6 +19,7 @@
 :root {
 	--textarea-border: var( --border );
 	--textarea-border-focus: var( --border-focus );
+	--textarea-selection: var( --accent-background );
 }
 
 .x4textarea {
@@ -33,10 +34,13 @@
 		}
 	}
 
+	.x4label:has(.empty) {
+		display: none;
+	}
+
 	textarea {
 		@extend .flex;
 
-		border: 1px solid var( --color-gray-3 );
 		padding: 4px;
 		outline: none;
 		font: inherit;
@@ -48,7 +52,7 @@
 		}
 
 		&::selection {
-			background-color: var( --color-90 );
+			background-color: var( --textarea-selection );
 			color: white;
 		}