x4js 2.0.18 → 2.0.21

package/lib/src/components/rating/rating.ts

@@ -1,131 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file rating.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, componentFromDOM, ComponentProps, EvChange } from '../../core/component.js';
-import { EventCallback } from '../../core/core_events.js';
-import { HBox } from '../boxes/boxes.js';
-import { Input } from '../input/input.js';
-import { Icon } from '../icon/icon.js';
-
-import "./rating.module.scss"
-import star_icon from "./star-sharp-solid.svg"
-import { class_ns } from '@core/core_tools.js';
-
-interface RatingEventMap extends ComponentEvents {
-	change: EvChange;
-}
-
-
-
-export interface RatingProps extends ComponentProps {
-	steps?: number;
-	value?: number;
-	icon?: string;
-	name?: string; 
-
-	change?: EventCallback<EvChange>;
-}
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-export class Rating extends HBox<RatingProps,RatingEventMap> {
-
-	private m_els: Component[];
-	private m_input: Input;
-	
-	constructor( props: RatingProps ) {
-		super( props );
-
-		props.steps = props.steps ?? 5;
-		this._update( );
-	}
-
-	private _update( ) {
-		
-		const props = this.props;
-
-		let shape = props.icon ?? star_icon;
-		let value = props.value ?? 0;
-
-		this.m_input = new Input( {
-			type: "text",
-			hidden: true,
-			name: props.name,
-			value: ''+value
-		} );
-
-		this.addDOMEvent( 'click', (e) => this._on_click(e) );
-
-		this.m_els = [];
-		for( let i=0; i<props.steps; i++ ) {
-			
-			let cls = 'item';
-			if( i+1 <= value ) {
-				cls += ' checked';
-			}
-
-			let c = new Icon( { 
-				cls,
-				iconId: shape,
-			} );
-
-			c.setInternalData( "value", i );
-
-			this.m_els.push( c );
-		}
-
-		this.m_els.push( this.m_input );
-		this.setContent( this.m_els );
-	}
-
-	getValue( ) {
-		return this.props.value ?? 0;
-	}
-
-	setValue( v: number ) {
-		this.props.value = v;
-
-		for( let c=0; c<this.props.steps; c++ ) {
-			this.m_els[c].setClass( 'checked', this.m_els[c].getInternalData('value')<=v );
-		}
-
-		this.m_input.setValue( ''+this.props.value );
-	}
-
-	setSteps( n: number ) {
-		this.props.steps = n;
-		this._update( );
-	}
-
-	setShape( icon: string ) {
-		this.removeClass( this.props.icon );
-		this.props.icon = icon;
-	}
-
-	private _on_click( ev: MouseEvent ) {
-		let item = componentFromDOM( ev.target as HTMLElement );
-		item = item.parentElement( Icon );
-		
-		if( item ) {
-			this.setValue( item.getInternalData("value") );
-		}
-
-		this.fire( 'change', {value:this.props.value} );
-	} 
-}

package/lib/src/components/rating/star-sharp-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M374.6 164L306.1 34.3 288.1 0 270 34.3 201.5 164 57.1 189l-38.2 6.6 27 27.8L148.1 328.5 127.2 473.6 121.7 512l34.8-17.1 131.6-64.7 131.6 64.7L454.4 512l-5.5-38.4L428 328.5 530.2 223.4l27-27.8L519 189 374.6 164zM492 216.8l-86.9 89.4-11 11.3 2.2 15.6 17.8 123.5-111.9-55-14.1-6.9-14.1 6.9L162 456.5l17.8-123.5 2.2-15.6-11-11.3L84.1 216.8 207 195.5l15.5-2.7 7.3-13.9L288.1 68.6l58.2 110.3 7.3 13.9 15.5 2.7L492 216.8z"/></svg>

package/lib/src/components/rating/star-sharp-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M288.1 0l86.5 164 182.7 31.6L428 328.5 454.4 512 288.1 430.2 121.7 512l26.4-183.5L18.9 195.6 201.5 164 288.1 0z"/></svg>

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

@@ -1,9 +0,0 @@
-
-
-.x4select {
-	padding: 4px;
-	outline: none;
-
-	border: 1px solid var( --border );
-	background-color: white;
-}

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

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

@@ -1,137 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file shared.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.
- **/
-
-.box {
-	position: relative;
-}
-
-.hbox {
-	@extend .box;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-
-.vbox {
-	@extend .box;
-	display: flex;
-	flex-direction: column;
-}
-
-
-.fit {
-	position: absolute;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-}
-
-
-.rel-fit {
-	position: relative;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-}
-
-.flex {
-	flex-grow: 1;
-	flex-shrink: 0;
-	flex-basis: 0;
-	min-width: 0;
-}
-
-
-// from tailwind
-
-.shadow-sm {
-	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-
-.shadow-md {
-	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
-
-.shadow-lg {
-	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-}
-
-.shadow-xl {
-	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-}
-
-
-@keyframes rotating {
-	from {
-	  transform: rotate(0deg);
-	}
-	to {
-	  transform: rotate(360deg);
-	}
-}
-
-@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.module.scss

@@ -1,90 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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/lib/src/components/sizers/sizer.ts

@@ -1,132 +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 { class_ns, Point } from '../../core/core_tools.js';
-
-import "./sizer.module.scss"
-
-/**
- * 
- */
-
-interface EvSizeChange extends ComponentEvent {
-	size: number;
-}
-
-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: SizerType;
-	private _ref: Component;
-	private _delta: Point;
-
-	constructor( type: SizerType, 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.fire( "start", { })
-		});
-
-		this.addDOMEvent( "pointerup", ( e: PointerEvent ) => {
-			this.fire( "stop", { })
-			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( );
-	}
-}