x4js 2.0.13 → 2.0.14

package/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/src/components/listbox/listbox.module.scss

@@ -0,0 +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-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 );
+					}
+				}
+			}
+		}
+	}
+}