x4js 2.0.12 → 2.0.14

package/lib/src/components/button/button.ts

@@ -1,117 +1,185 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file button.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, EvClick } from "../../core/component"
-import { EventCallback } from '../../core/core_events.js';
-import { UnsafeHtml } from '../../core/core_tools.js';
-
-import { Icon } from "../icon/icon"
-
-import "./button.module.scss";
-
-
-/**
- * Button events
- */
-
-interface ButtonEvents extends ComponentEvents {
-	click: EvClick;
-}
-
-/**
- * Button properties.
- */
-
-export interface ButtonProps extends ComponentProps {
-	label?: string;
-	icon?: string;
-	click?: EventCallback<EvClick>;
-}
-
-/**
- * Button component.
- */
-
-export class Button extends Component<ButtonProps,ButtonEvents> {
-
-	/**
-     * Creates an instance of Button.
-     * 
-     * @param props - The properties for the button component, including label and icon.
-     * @example
-     * const button = new Button({ label: 'Submit', icon: 'check-icon' });
-     */
-
-	constructor( props: ButtonProps ) {
-		super( { ...props, tag: 'button', content: null } );
-
-		this.mapPropEvents( props, 'click' );
-		this.addDOMEvent('click', (e) => this._on_click(e));
-
-		this.setContent( [
-			new Icon( { id: "icon", iconId: this.props.icon } ),
-			new Component( { id: "label", content: this.props.label } ),
-		] );
-	}
-
-	/**
-	 * called by the system on click event
-	 */
-
-	protected _on_click( ev: MouseEvent ) {
-
-		//if (this.m_props.menu) {
-		//	let menu = new Menu({
-		//		items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
-		//	});
-		//
-		//	let rc = this.getBoundingRect();
-		//	menu.displayAt(rc.left, rc.bottom, 'tl');
-		//}
-		//else {
-			this.fire('click', {} );
-		//}
-
-		ev.preventDefault();
-		ev.stopPropagation();
-	}
-
-	/**
-     * Sets the text content of the button's label.
-     * 
-     * @param text - The new text or HTML content for the label.
-     * @example
-     * button.setText('Click Me');
-     * button.setText(new UnsafeHtml('<b>Bold Text</b>'));
-     */
-
-	public setText( text: string | UnsafeHtml ) {
-		this.query( "#label" ).setContent( text );
-	}
-
-	/**
-     * Sets the icon of the button.
-     * 
-     * @param icon - The new icon ID to set on the button.
-     * @example
-     * button.setIcon('new-icon-id');
-     */
-
-	public setIcon( icon: string ) {
-		this.query<Icon>( "#icon" ).setIcon( icon );
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file button.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, EvClick } from "../../core/component"
+import { EventCallback } from '../../core/core_events.js';
+import { class_ns, UnsafeHtml } from '../../core/core_tools.js';
+
+import { Icon } from "../icon/icon"
+
+import "./button.module.scss";
+
+
+/**
+ * Button events
+ */
+
+interface ButtonEvents extends ComponentEvents {
+	click: EvClick;
+}
+
+/**
+ * Button properties.
+ */
+
+export interface ButtonProps extends ComponentProps {
+	label?: string;
+	icon?: string;
+	tabindex?: boolean | number;
+	autorepeat?: number | boolean;
+	click?: EventCallback<EvClick>;
+}
+
+/**
+ * Button component.
+ */
+
+@class_ns( "x4" )
+export class Button extends Component<ButtonProps,ButtonEvents> {
+
+	#text: Component;
+
+	/**
+     * Creates an instance of Button.
+     * 
+     * @param props - The properties for the button component, including label and icon.
+     * @example
+     * const button = new Button({ label: 'Submit', icon: 'check-icon' });
+     */
+
+	constructor( props: ButtonProps ) {
+		super( { ...props, tag: 'button', content: null } );
+
+		this.mapPropEvents( props, 'click' );
+
+		if( props.autorepeat ) {
+			this.addDOMEvent('pointerdown', (e) => this._on_mouse(e) );
+			this.addDOMEvent('pointerup', (e) => this._on_mouse(e) );
+		}
+		else {
+			this.addDOMEvent('click', (e) => this._on_click(e));
+		}
+
+		this.addDOMEvent('keydown', (e) => this._on_keydown(e) );
+
+		this.setContent( [
+			new Icon( { id: "icon", iconId: this.props.icon } ),
+			this.#text = new Component( { id: "label" } ),
+		] );
+
+		this.setText( props.label );
+
+		if( props.tabindex!==false ) {
+			this.setAttribute( 'tabindex', props.tabindex );
+		}
+	}
+
+	/**
+	 * called by the system on click event
+	 */
+
+	protected _on_click( ev: MouseEvent ) {
+
+		//if (this.m_props.menu) {
+		//	let menu = new Menu({
+		//		items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
+		//	});
+		//
+		//	let rc = this.getBoundingRect();
+		//	menu.displayAt(rc.left, rc.bottom, 'tl');
+		//}
+		//else {
+			this.fire('click', {} );
+		//}
+
+		ev.preventDefault();
+		ev.stopPropagation();
+	}
+
+	protected _on_mouse( e: PointerEvent ) {
+
+		let count = 0;
+
+		if( e.type=='pointerdown' ) {
+			this.dom.setPointerCapture( e.pointerId );
+
+			const rt = this.props.autorepeat===true ? 200 : this.props.autorepeat as number;
+
+			this.setTimeout( 'repeat', 500, ( ) => {
+				count++;
+
+				this.fire('click', {} );
+				this.setInterval( 'repeat', rt, ( ) => {
+					this.fire('click', {} );
+				})
+			} );
+		}
+		else {
+			this.clearTimeout( 'repeat' );
+
+			if( !count ) {
+				this.fire('click', {} );
+			}
+		}
+	}
+
+	/**
+	 * simulate a click
+	 */
+
+	click( ) {
+		(this.dom as HTMLButtonElement).click( );
+	}
+
+	/**
+	 * called on key down
+	 */
+
+	protected _on_keydown( e: KeyboardEvent ) {
+		if( e.key=='Enter' ) {
+			this.click( );
+			e.preventDefault( );
+		}
+	}
+
+	/**
+     * Sets the text content of the button's label.
+     * 
+     * @param text - The new text or HTML content for the label.
+     * @example
+     * button.setText('Click Me');
+     * button.setText(new UnsafeHtml('<b>Bold Text</b>'));
+     */
+
+	public setText( text: string | UnsafeHtml ) {
+		this.#text.setContent( text );
+		this.#text.setClass( "empty", !text );
+	}
+	
+	/**
+     * Sets the icon of the button.
+     * 
+     * @param icon - The new icon ID to set on the button.
+     * @example
+     * button.setIcon('new-icon-id');
+     */
+
+	public setIcon( icon: string ) {
+		this.query<Icon>( "#icon" ).setIcon( icon );
+	}
+
+}
+

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

@@ -1,163 +1,163 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file calendar.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.
- **/
-
-@use "../shared.scss";
-
-:root {
-	--calendar-btn-background: inherit;
-	--calendar-btn-color: var( --text-secondary );
-	--calendar-btn-color-hover: var( --text-primary );
-
-	--calendar-week-color: var( --accent-background );
-	--calendar-week-color-hover: var( --accent-background-hover );
-
-	--calendard-day-background-hover: var( --accent-background-hover );
-	--calendard-day-color-hover: var( --accent-color-hover );
-
-	--calendar-sel-background: var( --accent-background );
-	--calendar-sel-color: var( --accent-color );
-
-	--calendar-today-background: var( --alert-background );
-	--calendar-today-color: var( --alert-color );
-	--calendar-today-border: var( --accent-background );
-
-	--calendar-header-color: var( --text-primary );
-	--calendar-out-color: var( --disabled-color-dark );
-}
-
-.x4calendar {
-	border: 1px solid var( --border );
-	padding: 4px;
-	
-	.month-sel {
-		height: 2em;
-		align-items: center;
-		padding-left: 2em;
-
-		.month {
-			padding-right: 4px;
-		}
-
-		.year {
-			cursor: pointer;
-		}
-
-		.month, 
-		.year {
-			cursor: pointer;
-			&:hover {
-				text-decoration: underline;		
-			}
-		}
-				
-		.x4label {
-			font-weight: bold;
-		}
-
-		.x4button {
-			height: auto;
-			background-color: var( --calendar-btn-background );
-			color: var( --calendar-btn-color );
-
-			&:hover {
-				color: var( --calendar-btn-color-hover );
-			}
-		}
-
-		margin-bottom: 8px;
-	}
-
-	.week {
-		@extend .flex;
-		align-items: center;
-		padding: 2px;
-				
-		.cell {
-			@extend .flex;
-			min-width: 28px;
-			min-height: 28px;
-			
-			color: var( --gray-900 );
-			text-align: center;
-			
-			.text {
-				@extend .hbox;
-
-				transition: background-color 0.3s, color 0.3s;
-				justify-content: center;
-				border: 1px solid transparent;
-				margin: auto;
-				border-radius: 14px;
-				width: 28px;
-				height: 28px;
-			}
-		}
-		
-		.today {
-			.text {
-				font-weight: bold;
-				background-color: var( --calendar-today-background );
-				color: var( --calendar-today-color );
-				//border-color: var( --calendar-today-border );
-			}
-		}
-
-		.selection {
-			.text {
-				background-color: var( --calendar-sel-background );
-				color: var( --calendar-sel-color );
-			}
-		}
-
-		.weeknum {
-			width: 2em;
-			color: var( --calendar-week-color );
-			font-size: 70%;
-		}
-
-		&:hover .weeknum {
-			font-weight: bold;
-		}
-
-		.day {
-			cursor: pointer;
-		}
-
-		.out {
-			color: var( --calendar-out-color );
-			font-size: 80%;
-		}
-
-		.day:hover {
-			.text {
-				background-color: var( --calendard-day-background-hover );
-				color: var( --calendard-day-color-hover );
-			}
-		}
-	}
-
-	.header {
-		.cell {
-			color: var( --calendar-header-color );
-			height: 1.5em;
-			justify-content: center;
-		}
-
-		&:hover {
-			background-color: inherit;
-		}
-	}	
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file calendar.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.
+ **/
+
+@use "../shared.scss";
+
+:root {
+	--calendar-btn-background: inherit;
+	--calendar-btn-color: var( --text-secondary );
+	--calendar-btn-color-hover: var( --text-primary );
+
+	--calendar-week-color: var( --accent-background );
+	--calendar-week-color-hover: var( --accent-background-hover );
+
+	--calendard-day-background-hover: var( --accent-background-hover );
+	--calendard-day-color-hover: var( --accent-color-hover );
+
+	--calendar-sel-background: var( --accent-background );
+	--calendar-sel-color: var( --accent-color );
+
+	--calendar-today-background: var( --alert-background );
+	--calendar-today-color: var( --alert-color );
+	--calendar-today-border: var( --accent-background );
+
+	--calendar-header-color: var( --text-primary );
+	--calendar-out-color: var( --disabled-color-dark );
+}
+
+.x4calendar {
+	border: 1px solid var( --border );
+	padding: 4px;
+	
+	.month-sel {
+		height: 2em;
+		align-items: center;
+		padding-left: 2em;
+
+		.month {
+			padding-right: 4px;
+		}
+
+		.year {
+			cursor: pointer;
+		}
+
+		.month, 
+		.year {
+			cursor: pointer;
+			&:hover {
+				text-decoration: underline;		
+			}
+		}
+				
+		.x4label {
+			font-weight: bold;
+		}
+
+		.x4button {
+			height: auto;
+			background-color: var( --calendar-btn-background );
+			color: var( --calendar-btn-color );
+
+			&:hover {
+				color: var( --calendar-btn-color-hover );
+			}
+		}
+
+		margin-bottom: 8px;
+	}
+
+	.week {
+		@extend .flex;
+		align-items: center;
+		padding: 2px;
+				
+		.cell {
+			@extend .flex;
+			min-width: 28px;
+			min-height: 28px;
+			
+			color: var( --gray-900 );
+			text-align: center;
+			
+			.text {
+				@extend .hbox;
+
+				transition: background-color 0.3s, color 0.3s;
+				justify-content: center;
+				border: 1px solid transparent;
+				margin: auto;
+				border-radius: 14px;
+				width: 28px;
+				height: 28px;
+			}
+		}
+		
+		.today {
+			.text {
+				font-weight: bold;
+				background-color: var( --calendar-today-background );
+				color: var( --calendar-today-color );
+				//border-color: var( --calendar-today-border );
+			}
+		}
+
+		.selection {
+			.text {
+				background-color: var( --calendar-sel-background );
+				color: var( --calendar-sel-color );
+			}
+		}
+
+		.weeknum {
+			width: 2em;
+			color: var( --calendar-week-color );
+			font-size: 70%;
+		}
+
+		&:hover .weeknum {
+			font-weight: bold;
+		}
+
+		.day {
+			cursor: pointer;
+		}
+
+		.out {
+			color: var( --calendar-out-color );
+			font-size: 80%;
+		}
+
+		.day:hover {
+			.text {
+				background-color: var( --calendard-day-background-hover );
+				color: var( --calendard-day-color-hover );
+			}
+		}
+	}
+
+	.header {
+		.cell {
+			color: var( --calendar-header-color );
+			height: 1.5em;
+			justify-content: center;
+		}
+
+		&:hover {
+			background-color: inherit;
+		}
+	}	
 }