x4js 2.0.12 → 2.0.13

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

@@ -1,57 +1,57 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file progress.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 {
-	--progress-background: var( --border );
-	--progress-color: var( --accent-background );
-}
-
-.x4progress {
-	background-color: var( --progress-background );
-	position: relative;
-	height: 6px;
-	margin: 0 5px;
-	border-radius: 3px;
-
-	.bar {
-		position: absolute;
-		left: 0;
-		top: 0;
-		bottom: 0;
-		width: 0;
-
-		background-color: var( --progress-color );
-		border-radius: 3px;
-
-		transition: width ease 0.2s;
-	}
-
-	&.indeterm .bar {
-		background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
-		background-size: 20px 20px;
-		animation: slide 1s linear infinite;
-	}
-}
-
-@keyframes slide {
-	0% {
-        background-position: 0 0
-    }
-
-    to {
-        background-position: 2.5rem 0
-    }
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file progress.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 {
+	--progress-background: var( --border );
+	--progress-color: var( --accent-background );
+}
+
+.x4progress {
+	background-color: var( --progress-background );
+	position: relative;
+	height: 6px;
+	margin: 0 5px;
+	border-radius: 3px;
+
+	.bar {
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 0;
+
+		background-color: var( --progress-color );
+		border-radius: 3px;
+
+		transition: width ease 0.2s;
+	}
+
+	&.indeterm .bar {
+		background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
+		background-size: 20px 20px;
+		animation: slide 1s linear infinite;
+	}
+}
+
+@keyframes slide {
+	0% {
+        background-position: 0 0
+    }
+
+    to {
+        background-position: 2.5rem 0
+    }
 }

package/lib/src/components/progress/progress.ts

@@ -1,43 +1,44 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file progress.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 } from '../../core/component';
-
-import "./progress.module.scss";
-
-interface ProgressProps extends ComponentProps {
-	value: number;
-	min: number;
-	max: number;
-}
-
-
-export class Progress extends Component<ProgressProps> {
-
-	private _bar: Component;
-
-	constructor( props: ProgressProps ) {
-		super( props );
-
-		this.setContent( this._bar=new Component( { cls: "bar" } ) );
-		this.setValue( props.value );
-	}
-
-	setValue( value: number ) {
-		const perc = value / (this.props.max-this.props.min) * 100;
-		this._bar.setStyleValue( "width", perc+"%" );
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file progress.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 { class_ns } from '@core/core_tools.js';
+import { Component, ComponentProps } from '../../core/component';
+
+import "./progress.module.scss";
+
+interface ProgressProps extends ComponentProps {
+	value: number;
+	min: number;
+	max: number;
+}
+
+@class_ns( "x4" )
+export class Progress extends Component<ProgressProps> {
+
+	private _bar: Component;
+
+	constructor( props: ProgressProps ) {
+		super( props );
+
+		this.setContent( this._bar=new Component( { cls: "bar" } ) );
+		this.setValue( props.value );
+	}
+
+	setValue( value: number ) {
+		const perc = value / (this.props.max-this.props.min) * 100;
+		this._bar.setStyleValue( "width", perc+"%" );
+	}
 }

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

@@ -1,23 +1,23 @@
-:root {
-	--rating: var( --border );
-	--rating-hover: var( --border-hover );
-	--rating-checked: var( --accent-background );
-}
-
-.x4rating {
-	gap: 2px;
-
-	.item {
-		width: 16px;
-		height: 16px;
-		color: var( --rating );
-	}
-
-	.item:hover {
-		color: var( --rating-hover );
-	}
-
-	.item.checked {
-		color: var( --rating-checked );
-	}
+:root {
+	--rating: var( --border );
+	--rating-hover: var( --border-hover );
+	--rating-checked: var( --accent-background );
+}
+
+.x4rating {
+	gap: 2px;
+
+	.item {
+		width: 16px;
+		height: 16px;
+		color: var( --rating );
+	}
+
+	.item:hover {
+		color: var( --rating-hover );
+	}
+
+	.item.checked {
+		color: var( --rating-checked );
+	}
 }

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

@@ -1,125 +1,131 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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"
-
-interface RatingEventMap extends ComponentEvents {
-	change: EvChange;
-}
-
-
-
-export interface RatingProps extends ComponentProps {
-	steps?: number;
-	value?: number;
-	icon?: string;
-	name?: string; 
-
-	change?: EventCallback<EvChange>;
-}
-
-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} );
-	} 
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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/shared.scss

@@ -1,76 +1,90 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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);
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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);
+	}
+}
+
+.x4rotate {
+	animation: rotating 2s linear infinite;
+}