x4js 2.0.11 → 2.0.13

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

@@ -1,55 +1,64 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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 );
+	}
+}
+

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

@@ -0,0 +1,78 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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.js';
+import { class_ns, UnsafeHtml } from '@core/core_tools';
+
+
+/**
+ * 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
+	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" );
+
+		if( props.text ) {
+			this.setContent( props.text );
+		}
+
+		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,103 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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-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 );
+					}
+				}
+			}
+		}
+	}
+}