x4js 2.0.12 → 2.0.14

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

@@ -0,0 +1,147 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file radio.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.
+ **/
+
+.x4radio {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	margin-left: 5px;
+	gap: 4px;
+	cursor: pointer;
+
+	.inner {
+		position: relative;
+		height: 1rem;
+		width: 1rem;
+
+		border-radius: 50%;
+		//color: var(--color-70);
+	
+		order: 1;
+
+		input {
+			appearance: none;
+			border-radius: 50%;
+			background-color: white;
+			cursor: pointer;
+			display: block;
+			
+			margin: 0;
+			padding: 0;
+			width: 100%;
+			height: 100%;
+			transition: opacity .1s ease;
+			
+			border-radius: 50%;
+			border: 1px solid var(--border);
+		}
+
+		svg {
+			margin: auto;
+			pointer-events: none;
+			position: absolute;
+
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			width: 100%;
+			height: 100%;
+
+			.fa-primary {
+				fill: var( --accent-background)
+			}
+
+			.fa-secondary {
+				fill: white;
+			}
+		}
+
+		&:has(input:not(:checked)) {
+			input {
+				opacity: 1;
+			}
+
+			svg {
+				opacity: 0;
+			}
+		}
+	}
+
+	label {
+		order: 2;
+		cursor: pointer;
+	}
+
+	&.left label {
+		order: 0;
+	}	
+}
+
+.x4radio.button {
+	--size: 24px;
+
+	&.outline {
+		border-radius: 22px;;
+	}
+
+	border: 1px solid transparent;
+	padding: 8px;
+	margin: 0;
+	
+	.inner {
+		display: none;
+	}
+
+	label {
+		display: flex;
+		//padding: 8px;
+		flex-grow: 1;
+
+		#text {
+			flex-grow: 1;
+			text-align: center;
+			color: var( --text-ternary );
+		}
+	
+		#icon {
+			fill: var( --text-ternary );
+			width: var( --size );
+			height: var( --size );
+		}
+	}
+
+	&:has(input:checked) {
+		background-color: var( --background-secondary );
+		border-color:  var( --accent-background );
+
+		.x4label {
+			#text {
+				color: var( --accent-background-active );
+				font-weight: bold;
+			}
+
+			#icon {
+				fill: var( --accent-background-active );
+			}
+
+			.fa-primary {
+				fill: var( --accent-background-active );
+			}
+		}
+	}
+}

package/lib/src/components/radio/radio.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" aria-hidden="true">
+	<circle class="fa-primary" cx="2.5" cy="2.5" r="2.5" ></circle>
+	<circle class="fa-secondary" cx="2.5" cy="2.5" r="1.25"></circle>
+</svg>

package/lib/src/components/radio/radio.ts

@@ -0,0 +1,142 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file radio.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, EvChange, makeUniqueComponentId } from '../../core/component';
+import { class_ns } from '@core/core_tools';
+import { EventCallback } from '@core/core_events';
+
+import { Label } from '../label/label';
+import { Input } from '../input/input'
+import { HBox } from '../boxes/boxes';
+import { svgLoader } from '../components';
+
+import icon from "./radio.svg";
+import "./radio.module.scss";
+
+/**
+ * Checkbox events
+ */
+
+interface RadioEvents extends ComponentEvents {
+	change?: EvChange;
+}
+
+/**
+ * Checkbox properties.
+ */
+
+interface RadioProps extends ComponentProps {
+	label: string;
+	icon?: string;
+	name: string;	// all same names are grouped
+	value: number | string;
+	checked?: boolean;
+	change?: EventCallback<EvChange>;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Radio extends Component<RadioProps,RadioEvents> {
+
+	private _check: HBox;
+	private _input: Input;
+	private _label: Label;
+
+	constructor( props: RadioProps ) {
+		super( props );
+
+		this.mapPropEvents( props, 'change' );
+
+		const inputId = makeUniqueComponentId( );
+		this.setContent( [
+			this._check = new HBox( {cls:'inner', content: [
+				this._input = new Input( { 
+					type:"radio", 
+					id: inputId, 
+					name: props.name, 
+					value: props.value, 
+					checked: props.checked,
+					dom_events: {
+						change: ( ) => this._on_change( ),
+					}
+				}),
+			]} ),
+			this._label = new Label( { 
+				tag: 'label',
+				text: props.label, 
+				id: undefined, 
+				labelFor: inputId, 
+				icon: props.icon,
+			} ),
+		])
+
+		svgLoader.load( icon ).then( svg => {
+			this._check.dom.insertAdjacentHTML( "beforeend", svg );
+		});
+
+		this.addDOMEvent('click', (e) => this._on_click(e));	// for outside click
+	}
+
+	/**
+	 * handle click outside label & input
+	 */
+	
+	protected _on_click( ev: MouseEvent ) {
+		if( ev.target==this.dom ) {
+			(this._input.dom as HTMLInputElement).click( );
+			ev.preventDefault();
+			ev.stopPropagation();
+		}
+	}
+
+	/**
+	 * check state changed
+	 */
+
+	private _on_change() {
+		this.fire('change', { value:this.getValue() } );
+	}
+
+	/**
+	 * check the radio
+	 * @param {boolean} ck new checked value	
+	 */
+
+	public setCheck(ck: boolean) {
+		const d = this._input.dom as HTMLInputElement;
+		d.checked = ck;
+	}
+
+	/**
+	 * change the checkbox label
+	 * @param text 
+	 */
+
+	public setLabel(text: string) {
+		this._label.setText( text );
+	}
+
+	/**
+	 * returns the radio value
+	 */
+
+	getValue( ) {
+		return this._input.getValue( );
+	}
+}

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/select/select.module.scss

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