x4js 2.0.12 → 2.0.14

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

@@ -0,0 +1 @@
+<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/src/components/rating/star-sharp-solid.svg

@@ -0,0 +1 @@
+<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/src/components/select/select.module.scss

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

package/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/src/components/shared.scss

@@ -0,0 +1,137 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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/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,131 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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";
+
+/**
+ * 
+ */
+
+@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( );
+	}
+}

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

@@ -0,0 +1,118 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 {
+	outline: none;
+	touch-action: none;
+	overflow: hidden;
+
+	&:not(.vertical) {
+		padding: 10px 12px;
+		margin: 5px 0;
+		height: 28px;
+		
+		.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;
+		}
+	}
+
+	&.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);
+		outline-style: solid;
+    	outline-width: 1px;
+	}
+}