x4js 1.6.5 → 2.0.2

package/src/components/sizers/sizer.module.scss

@@ -0,0 +1,90 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file sizer.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.
+ **/
+
+
+.x4csizer {
+	position: absolute;
+
+	@mixin horz {
+		left: 0;
+		right: 0;
+		height: 8px;
+		z-index: 10;
+		cursor: ns-resize;
+	}
+
+	&.top {
+		@include horz;
+		top: 0;
+	}
+
+	&.bottom {
+		@include horz;
+		bottom: 0;
+	}
+
+	@mixin vert {
+		top: 0;
+		bottom: 0;
+		width: 8px;
+		z-index: 10;
+		cursor: ew-resize;
+	}
+
+	&.left {
+		@include vert;
+		left: 0;
+	}
+
+	&.right {
+		@include vert;
+		right: 0;
+	}
+
+	@mixin corner {
+		width: 8px;
+		height: 8px;
+		z-index: 11;
+	}
+
+	&.top-left {
+		@include corner;
+		left: 0;
+		top: 0;
+		cursor: nw-resize;
+	}
+
+	&.top-right {
+		@include corner;
+		right: 0;
+		top: 0;
+		cursor: ne-resize;
+	}
+
+	&.bottom-left {
+		@include corner;
+		left: 0;
+		bottom: 0;
+		cursor: ne-resize;
+	}
+
+	&.bottom-right {
+		@include corner;
+		right: 0;
+		bottom: 0;
+		cursor: nw-resize;
+	}
+}

package/src/components/sizers/sizer.ts

@@ -0,0 +1,120 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file sizer.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, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM } from '@core/component';
+import { Point } from '@core/core_tools.js';
+
+import "./sizer.module.scss"
+
+/**
+ * 
+ */
+
+interface EvSizeChange extends ComponentEvent {
+	size: number;
+}
+
+interface CSizerEvent extends ComponentEvents {
+	resize: EvSizeChange;
+}
+
+
+export class CSizer extends Component<ComponentProps,CSizerEvent> {
+
+	private _type: string;
+	private _ref: Component;
+	private _delta: Point;
+
+	constructor( type: string, target?: Component ) {
+		super( {} );
+
+		this._type = type;
+		this.addClass( type );
+
+		this.addDOMEvent( "pointerdown", ( e: PointerEvent ) => {
+			this.setCapture( e.pointerId );
+			this._ref = target ?? componentFromDOM( this.dom.parentElement );
+
+			this._delta = {x:0,y:0};
+			const rc = this._ref.getBoundingRect();
+
+			if( this._type.includes("left") ) {
+				this._delta.x = e.pageX-rc.left;
+			}
+			else {
+				this._delta.x = e.pageX-(rc.left+rc.width);
+			}
+
+			if( this._type.includes("top") ) {
+				this._delta.y = e.pageY-rc.top;
+			}
+			else {
+				this._delta.y = e.pageY-(rc.top+rc.height);
+			}
+		});
+
+		this.addDOMEvent( "pointerup", ( e: PointerEvent ) => {
+			this.releaseCapture( e.pointerId );
+			this._ref = null;
+		});
+
+		this.addDOMEvent( "pointermove", ( e: PointerEvent ) => {
+			this._onMouseMove( e );
+		});
+	}
+
+	private _onMouseMove( e: PointerEvent ) {
+		if( !this._ref ) {
+			return;
+		}
+
+		const pt = { x: e.pageX-this._delta.x, y: e.pageY-this._delta.y };
+		const rc = this._ref.getBoundingRect( );
+
+		let nr: any = {};
+		let horz = true;
+
+		if( this._type.includes("top") ) {
+			nr.top = pt.y,
+			nr.height = (rc.top+rc.height)-pt.y;
+			horz = false;
+		}
+
+		if( this._type.includes("bottom") ) {
+			//nr.top = rc.top;
+			nr.height = (pt.y-rc.top);
+			horz = false;
+		}
+
+		if( this._type.includes("left") ) {
+			nr.left = pt.x;
+			nr.width = ((rc.left+rc.width)-pt.x);
+		}
+
+		if( this._type.includes("right") ) {
+			//nr.left = rc.left;
+			nr.width = (pt.x-rc.left);
+		}
+
+		this._ref.setStyle( nr );
+
+		const nrc = this._ref.getBoundingRect( );
+		this.fire( "resize", { size: horz ? nrc.width : nrc.height })
+
+		e.preventDefault( );
+		e.stopPropagation( );
+	}
+}

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

@@ -0,0 +1,71 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file slider.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.
+ **/
+
+:root {
+	--slider-track: var( --border );
+	--slider-thumb-background: var( --accent-background );
+	--slider-thumb-border: var( --accent-background );
+	--slider-thumb-border-focus: var( --border-focus );
+}
+
+.x4slider {
+	height: 28px;
+	outline: none;
+	padding: 10px 12px;
+	touch-action: none;
+	margin: 5px 0;
+
+	.track {
+		background-color: var( --slider-track );
+		width: 100%;
+
+		position: relative;
+		top: 50%;
+		height: 3px;
+	}
+
+	.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;
+
+		top: 50%;
+		width: 16px;
+		height: 16px;
+
+		transform: translate(-50%,-50%);
+		cursor: pointer;
+	}
+
+	&:focus .thumb {
+		outline-offset: 3px;
+    	outline-color: var(--slider-thumb-border-focus);
+		outline-style: solid;
+    	outline-width: 1px;
+	}
+}

package/src/components/slider/slider.ts

@@ -0,0 +1,143 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file slider.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, ComponentEvent } from '@core/component';
+import { Rect } from '@core/core_tools.js';
+
+import { HBox } from '../boxes/boxes';
+import { Input } from '../input/input.js';
+
+import './slider.module.scss';
+
+interface ChangeEvent extends ComponentEvent {
+	value: number;
+}
+
+interface SliderEvents extends ComponentEvents {
+	change: ChangeEvent;
+}
+
+interface SliderProps extends ComponentProps {
+	value: number;
+	min: number;
+	max: number;
+	step?: number;
+}
+
+export class Slider extends Component<SliderProps,SliderEvents> {
+
+	private _mdown = false;
+	private _irect: Rect = null;
+	private _thumb: Component = null;
+	private _bar: Component = null;
+	private _range: Input = null;
+
+
+	constructor( props: SliderProps ) {
+		super( props );
+
+		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.setAttribute( "tabindex", 0 );
+
+		this.setDOMEvents( {
+			pointerdown: ( ev ) => this._on_mousedown( ev ),
+			pointermove: ( ev ) => this._on_mousemove( ev ),
+			pointerup: ( ev ) => this._on_mouseup( ev ),
+			keydown: ( ev ) => this._on_key( ev ),
+		} );
+
+		this._range.addDOMEvent( "change", ( ev: Event) => {
+			//console.log( ev );
+		})
+	}
+
+	private _on_mousedown( ev: PointerEvent ) {
+		ev.stopPropagation( );
+		ev.preventDefault( );
+
+		this.focus( );
+
+		this._mdown = true;
+		this._irect = this.getBoundingRect( );
+
+		this.setCapture( ev.pointerId );
+	}
+
+	private _on_mousemove( ev: PointerEvent ) {
+		if( this._mdown ) {
+			let pos = ev.pageX - this._irect.left;
+			if( pos<0 ) {
+				pos = 0;
+			}
+			else if( pos>this._irect.width ) {
+				pos = this._irect.width;
+			}
+
+			let perc = pos / this._irect.width * 100;
+			this._range.setNumValue( perc );
+			
+			this._update( );
+		}
+	}
+
+	private _update( ) {
+		const value = this._range.getNumValue( );
+
+		const perc = value / (this.props.max-this.props.min) * 100;
+		this._thumb.setStyleValue( "left", perc+"%" );
+		this._bar.setStyleValue( "width", perc+"%" );
+		//thumb.setAttribute( "tooltip", value );
+
+		this.fire( "change", { value } );
+	}
+
+	private _on_mouseup( ev: PointerEvent ) {
+		if( this._mdown ) {
+			this.releaseCapture( ev.pointerId );
+			this._mdown = false;
+		}
+	}
+
+	private _on_key( ev: KeyboardEvent ) {
+		console.log( ev.key );
+
+		let stp = this.props.step ?? 1;
+		let inc = 0;
+		switch( ev.key ) {
+			case "ArrowRight":
+			case "ArrowUp": inc = stp; break;
+
+			case "ArrowLeft":
+			case "ArrowDown": inc = -stp; break;
+		}
+
+		if( inc ) {
+			if( ev.ctrlKey ) {
+				inc *= 10;
+			}
+
+			this._range.setNumValue( this._range.getNumValue()+inc );
+			this._update( );
+		}
+	}
+}

package/src/components/switch/switch.module.scss

@@ -0,0 +1,127 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file switch.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 {
+	--switch-border: var( --border );
+	--switch-background: #eee;
+	--switch-background-disabled: var( --disabled-background );
+	--switch-checked: var( --accent-background );
+}
+
+.x4switch {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	position: relative;
+    
+	gap: 4px;
+	margin-left: 5px;
+	padding: 4px;
+	cursor: pointer;
+
+	label {
+		cursor: pointer;
+	}
+
+	&:focus-within {
+		.x4label {
+			span {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	.switch {
+		width: 2.2rem;
+		height: 18px;
+		position: relative;
+
+		input {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			appearance: none;
+			padding: 0;
+			margin: 0;
+			left: 0;
+			top: 0;
+			cursor: pointer;
+		}
+			
+		.track {
+			position: absolute;
+			pointer-events: none;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			border: 1px solid var( --switch-border );
+
+			background-color: var( --switch-background );
+			border-radius: 9px;
+
+			transition: background-color ease 0.2s;
+		}
+
+		.thumb {
+			position: absolute;
+			pointer-events: none;
+			left: 0.05rem;
+			top: 1px;
+
+			width: 1rem;
+			height: 1rem;
+
+			border-radius: 8px;
+			background-color: white;
+			box-shadow: 0 0 2px rgba(0,0,0,0.5);
+
+			transition: left ease 0.2s;
+		}
+	}
+
+	&:has(input:checked) {
+		.switch .thumb {
+			left: 1.15rem;
+		}
+		.switch .track {
+			background-color: var( --switch-checked );
+			//border-color: var( --color-70 );
+		}
+	}
+
+	&[disabled] {
+		&, * {
+			cursor: not-allowed;
+		}
+		
+		input {
+			pointer-events: none;
+		}
+
+		label {
+			pointer-events: none;
+			color: var( --checkbox-color-disabled );
+		}
+
+		.switch .track,
+		&.x4switch:has(input:checked) .switch .track {
+			background-color: var( --switch-background-disabled );
+		}
+	}
+}

package/src/components/switch/switch.ts

@@ -0,0 +1,56 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file switch.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 { Checkbox } from '@controls/controls.js';
+import { Input } from '../input/input';
+import { Label } from '../label/label';
+import { HBox } from '../boxes/boxes.js';
+
+import "./switch.module.scss";
+
+interface SwitchProps extends ComponentProps {
+	label: string;
+	checked?: boolean;
+	value?: string;
+}
+
+export class Switch extends HBox<SwitchProps> {
+	constructor(props: SwitchProps ) {
+		super( props );
+
+		const inputId = makeUniqueComponentId( );
+
+		this.setContent( [
+			new Component( {
+				cls: "switch",
+				content: [
+					new Input( { type: "checkbox", id: inputId, checked: props.checked } ),
+					new Component( { cls: "track" } ),
+					new Component( { cls: "thumb" } ),
+				]
+	 		} ),
+			new Label( {
+				tag: "label",
+				text: props.label,
+				labelFor: inputId,
+			}),
+		])
+
+		
+	}
+}

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

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