x4js 2.0.1 → 2.0.3

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

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

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

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

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

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

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

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