x4js 2.0.35 → 2.1.0-manual

package/src/components/rating/rating.ts

@@ -1,131 +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';
-import { EventCallback } from '../../core/core_events';
-import { HBox } from '../boxes/boxes';
-import { Input } from '../input/input';
-import { Icon } from '../icon/icon';
-
-import "./rating.module.scss"
-import star_icon from "./star-sharp-solid.svg"
-import { class_ns } from '../../core/core_tools';
-
-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} );
-	} 
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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';
+import { EventCallback } from '../../core/core_events';
+import { HBox } from '../boxes/boxes';
+import { Input } from '../input/input';
+import { Icon } from '../icon/icon';
+
+import "./rating.module.scss"
+import star_icon from "./star-sharp-solid.svg"
+import { class_ns } from '../../core/core_tools';
+
+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/src/components/select/select.module.scss

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

package/src/components/select/select.ts

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