x4js 2.0.12 → 2.0.14

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

@@ -1,52 +1,76 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file label.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 {
-	--label-background: transparent;
-	--label-color: var( --text-ternary );
-	--label-icon-color: rgb(0 0 0 / 44%);
-}
-
-.x4label {
-	@extend .hbox;
-
-	color: var( --label-color );
-	background-color: var( --label-background );
-	text-align: left;
-	gap: 0.2em;
-
-	&.right {
-		text-align: right;
-	}
-
-	&.center {
-		text-align: center;
-	}
-	
-	#icon {
-		width: 1em;
-		margin: 0 0.1em;
-		color: var( --label-icon-color );
-
-		&.empty {
-			display: none;
-		}
-	}
-	
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file label.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 {
+	--label-background: transparent;
+	--label-color: var( --text-ternary );
+	--label-icon-color: rgb(0 0 0 / 44%);
+}
+
+.x4label {
+	@extend .hbox;
+
+	color: var( --label-color );
+	background-color: var( --label-background );
+	gap: 0.2em;
+
+	&.right  {
+		text-align: right;
+		justify-content: end;
+	}
+
+	&.center {
+		text-align: center;
+		justify-content: center;
+	}
+
+	#text {
+		&:empty {
+			display: none;
+		}
+	}
+	
+	#icon {
+		height: 1em;
+		margin: 0 0.1em;
+		color: var( --label-icon-color );
+
+		&.empty {
+			display: none;
+		}
+	}
+
+	&.rotate {
+		#icon {
+			animation: rotating 2s linear infinite;
+		}
+	}
+
+	&.vertical {
+		@extend .vbox;
+	}
+}
+
+
+.x4simpletext {
+	text-align: left;
+	&.al-center { text-align: center; }
+	&.al-right { text-align: right; }
+}
+
+

package/lib/src/components/label/label.ts

@@ -1,55 +1,97 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file label.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 { Icon } from "../icon/icon"
-
-import "./label.module.scss";
-import { UnsafeHtml } from '../../core/core_tools.js';
-
-interface LabelProps extends ComponentProps {
-	text?: string | UnsafeHtml;
-	icon?: string;
-	labelFor?: string;
-}
-
-export class Label extends Component<LabelProps> {
-
-	constructor( p: LabelProps ) {
-		super( { ...p, content: null } );
-
-		// small hack for react:
-		//	p.content may be the text
-		
-		this.setContent( [
-			new Icon( { id:"icon", iconId: this.props.icon } ),
-			new Component( { tag: 'span', id: 'text', content: this.props.text ?? p.content } )
-		] );
-
-		if( p.labelFor ) {
-			this.setAttribute( "for", p.labelFor );
-		}
-	}
-
-	setText( text: string | UnsafeHtml ) {
-		this.query( "#text" ).setContent( text );
-	}
-
-	setIcon( icon: string ) {
-		this.query<Icon>( "#icon" ).setIcon( icon );
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file label.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 { Icon } from "../icon/icon"
+
+import "./label.module.scss";
+import { class_ns, UnsafeHtml } from '../../core/core_tools.js';
+
+export interface LabelProps extends ComponentProps {
+	text?: string | UnsafeHtml;
+	icon?: string;
+	labelFor?: string;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Label extends Component<LabelProps> {
+	#text: Component;
+	
+	constructor( p: LabelProps ) {
+		super( { ...p, content: null } );
+
+		this.setContent( [
+			new Icon( { id:"icon", iconId: this.props.icon } ),
+			this.#text = new Component( { tag: 'span', id: 'text' } )
+		] );
+
+		// small hack for react:
+		//	p.content may be the text
+		const text = this.props.text;
+		this.setText( text );
+	
+		if( p.labelFor ) {
+			this.setAttribute( "for", p.labelFor );
+		}
+	}
+
+	setText( text: string | UnsafeHtml ) {
+		this.#text.setContent( text );
+		this.#text.setClass( "empty", !text );
+	}
+
+	setIcon( icon: string ) {
+		this.query<Icon>( "#icon" ).setIcon( icon );
+	}
+}
+
+// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+export interface SimpleTextProps extends ComponentProps {
+	text: string | UnsafeHtml;
+	align?: "left" | "center" | "right";
+}
+
+@class_ns( "x4" )
+export class SimpleText extends Component<SimpleTextProps> {
+	
+	/**
+	 * 
+	 */
+	
+	constructor( p: SimpleTextProps ) {
+		super( { ...p } );
+
+		this.setContent( p.text );
+
+		if( p.align ) {
+			this.addClass( "al-"+p.align );
+		}
+	}	
+
+	/**
+	 * 
+	 */
+
+	setText( text: string | UnsafeHtml ) {
+		this.setContent( text );
+		this.setClass( "empty", !text );
+	}
+}

package/lib/src/components/link/link.ts

@@ -0,0 +1,81 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file link.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';
+import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { Label } from '../label/label';
+
+
+/**
+ * Link events
+ */
+
+interface LinkEvents extends ComponentEvents {
+	click: EvClick;	// context = href
+}
+
+/**
+ * 
+ */
+
+interface LinkProps extends ComponentProps {
+	href: string;
+	text?: string | UnsafeHtml;	// you can also use content for complexe content
+	icon?: string;
+	click?: EventCallback<EvClick>;
+}
+
+@class_ns( "x4" )
+export class Link extends Component<LinkProps,LinkEvents> {
+	constructor( props: LinkProps ) {
+		super( { tag: "a", ...props} );
+
+		this.setAttribute( "href", props.href );
+		this.mapPropEvents( props, "click" );
+
+		this.setContent( new Label( {
+			text: props.text,
+			icon: props.icon,
+		} ) );
+
+		this.addDOMEvent('click', (e) => this._on_click(e));
+	}
+
+	/**
+	 * 
+	 * @param text 
+	 */
+
+	setText( text: string | UnsafeHtml ) {
+		this.setContent( text );
+	}
+
+	/**
+	 * 
+	 */
+
+	protected _on_click( ev: MouseEvent ) {
+
+		const xev: EvClick = {context: this.props.href };
+		this.fire('click', xev );
+	
+		if( xev.preventDefault ) {
+			ev.preventDefault();
+			ev.stopPropagation();
+		}
+	}
+}

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

@@ -1,103 +1,161 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file listbox.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 {
-	--listbox-item-background-sel: var( --accent-background );
-	--listbox-item-color-sel: var( --accent-color );
-	--listbox-item-color-sel-disabled: var( --disabled-background );
-
-	--listbox-item-color: var( --text-primary );
-	--listbox-item-color-disabled: var( --disabled-color-dark );
-	--listbox-item-background-hover: var( --background-secondary );
-
-	--listbox-border: var( --border );
-	--listbox-border-focus: var( --accent-background-focus );
-}
-
-.x4listbox {
-	@extend .vbox;
-
-	margin: 5px;
-	border: 1px solid var( --listbox-border );
-
-	&:focus-within {
-		border-color: var( --listbox-border-focus );
-	}
-
-	outline: none;
-
-	&>.x4header {
-		border-bottom: 1px solid var( --color-gray-3 );
-	}
-
-	&>.body {
-		width: 100%;
-		flex-basis: 0;
-		overflow-y: auto;
-		overflow-x: auto;
-		outline: none;
-
-		.x4viewport {
-			display: table;
-			
-			.x4item {
-				@extend .flex;
-				
-				padding: 4px;
-				background-color: transparent;
-				color: var( --color-gray-9 );
-
-				&> .x4label {
-					color: inherit;
-					padding: 2px 6px;
-				}
-
-				&:hover {
-					background-color: var( --listbox-item-background-hover );
-				}
-
-				&.selected {
-					background-color: var( --listbox-item-background-sel );
-					color: var( --listbox-item-color-sel );
-				}
-
-				&:active{
-					//background-color: var( --color-80 );
-					//color: var(--color-0);
-				}	
-			}
-		}
-	}
-
-	&[disabled] {
-		cursor: not-allowed;
-		border-color: var( --border );
-		color: var( --listbox-item-color-disabled );
-
-		&>.body {
-			.x4viewport {
-				pointer-events: none;
-				.x4item {
-					&.selected {
-						background-color: var( --listbox-item-color-sel-disabled );
-					}
-				}
-			}
-		}
-	}
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file listbox.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 {
+	--listbox-item-background-sel: var( --accent-background );
+	--listbox-item-color-sel: var( --accent-color );
+	--listbox-item-color-sel-disabled: var( --disabled-background );
+
+	--listbox-item-color: var( --text-primary );
+	--listbox-item-color-disabled: var( --disabled-color-dark );
+	--listbox-item-background-hover: var( --background-secondary );
+
+	--listbox-icon-color: var( --text-ternary );
+
+	--listbox-background: white;
+	--listbox-border: var( --border );
+	--listbox-border-focus: var( --accent-background-focus );
+}
+
+.x4listbox {
+	@extend .vbox;
+
+	margin: 5px;
+	border: 1px solid var( --listbox-border );
+	background-color: var( --listbox-background );
+
+	&:focus-within {
+		border-color: var( --listbox-border-focus );
+	}
+
+	outline: none;
+
+	&>.x4header {
+		border-bottom: 1px solid var( --color-gray-3 );
+	}
+
+	&>.body {
+		width: 100%;
+		flex-basis: 0;
+		overflow-y: auto;
+		overflow-x: auto;
+		outline: none;
+		position: relative;
+
+		&> .x4viewport {
+			display: table;
+			
+			.x4item {
+				@extend .flex;
+				
+				padding: 4px;
+				background-color: transparent;
+				color: var( --color-gray-9 );
+
+				&> .x4label {
+					color: inherit;
+					padding: 2px 6px;
+				
+					#icon {
+						color: var( --listbox-icon-color );
+						fill: var( --listbox-icon-color );
+					}
+				}
+
+				&:hover {
+					background-color: var( --listbox-item-background-hover );
+				}
+
+				&.selected {
+					background-color: var( --listbox-item-background-sel );
+					color: var( --listbox-item-color-sel );
+
+					&> .x4label {
+						#icon {
+							color: var( --listbox-item-color-sel );
+							fill: var( --listbox-item-color-sel );
+						}
+					}
+				}
+
+				//&:active{
+					//background-color: var( --color-80 );
+					//color: var(--color-0);
+				//}	
+			}
+		}
+	}
+
+	&> #footer {
+		border-top: 1px solid var(--border);
+		margin: 0;
+
+		&.x4btngroup {
+			gap: 0px;
+
+			.x4button {
+				background-color: var( --ol-button-background );
+				margin: 0;
+				color: var( --ol-button-color );
+
+				&:disabled {
+					color: var( --ol-button-color-disabled );
+				}
+								
+				.x4icon {
+					height: 1.5em;
+					width: 1.5em;
+				}
+
+				&:hover{
+					background-color: var( --ol-button-background-hover );
+					color: var( --ol-button-color-hover );
+				}	
+
+				&:active{
+					background-color: var( --ol-button-background-active );
+					color: var( --ol-button-color-active );
+					#icon {
+						color: var( --button-icon-color );
+					}
+				}	
+
+				&:focus {
+					background-color: var( --ol-button-background-hover );
+				}
+			}
+		}
+	}		
+
+	&[disabled] {
+		cursor: not-allowed;
+		border-color: var( --border );
+		color: var( --listbox-item-color-disabled );
+
+		&>.body {
+			.x4viewport {
+				pointer-events: none;
+				.x4item {
+					&.selected {
+						background-color: var( --listbox-item-color-sel-disabled );
+					}
+				}
+			}
+		}
+	}
+}