x4js 2.0.11 → 2.0.13

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

@@ -1,121 +1,124 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file combobox.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 {
-	--dropdown-border: var( --border-hover );
-	--dropdown-background: var( --background-primary );
-
-	--combobox-border: var( --border );
-	--combobox-border-focus: var( --border-focus );
-
-	--combobox-btn-background: inherit;
-	--combobox-btn-color: var( --text-secondary );
-	--combobox-btn-color-hover: var( --text-primary );
-}
-
-.x4dropdown {
-	@extend .shadow-xl;
-	@extend .hbox;
-
-	max-height: 250px;
-	position: absolute;
-	background-color: var( --dropdown-background );
-	border: 1px solid var( --dropdown-border );
-
-	.x4listbox {
-		@extend .flex;
-
-		border: none;
-		margin: 0;
-		width: 100%;
-		height: 200px;
-	}
-}
-
-.x4combobox {
-	@extend .hbox;
-	margin: 5px;
-
-	&> #label {
-		padding: 0 6px;
-		border-bottom: 1px solid transparent;
-
-		&> .x4label {
-			height: 100%;
-			padding: 0;
-			font-weight: 500;
-			gap: 0;
-		}
-			
-		&::after {
-			content: ":"
-		}
-	}
-
-	&>#edit {
-		@extend .flex;
-		border-bottom: 1px solid var( --combobox-border );
-		
-		.x4input {
-			@extend .flex;
-
-			&[readonly] {
-				cursor: pointer;
-			}
-		}
-
-		.x4button {
-			margin: 0;
-			padding: 0;
-			outline: none;
-			background-color: var( --combobox-btn-background );
-			color: var( --combobox-btn-color );
-
-			#icon {
-				color: var( --combobox-btn-color );
-			}
-
-			&:hover, &:hover #icon {
-				color: var( --combobox-btn-color-hover );
-			}
-
-			&:focus {
-				//background-color: var( --color-30 );
-				//color: var( --color-10 );
-			}
-		}
-	}
-
-	&[disabled] {
-		&, * {
-			cursor: not-allowed;
-		}
-
-		#label .x4label {
-			color: var( --disabled-color-dark );
-			pointer-events: none;
-		}
-	}
-	
-	&[required] {
-		.x4label::before {
-			content: "*";
-			color: var( --color-90 )
-		}
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file combobox.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 {
+	--dropdown-border: var( --border-hover );
+	--dropdown-background: var( --background-primary );
+
+	--combobox-border: var( --border );
+	--combobox-border-focus: var( --border-focus );
+
+	--combobox-btn-background: inherit;
+	--combobox-btn-color: var( --text-secondary );
+	--combobox-btn-color-hover: var( --text-primary );
+}
+
+.x4dropdown {
+	@extend .shadow-xl;
+	@extend .hbox;
+
+	max-height: 250px;
+	position: absolute;
+	background-color: var( --dropdown-background );
+	border: 1px solid var( --dropdown-border );
+
+	.x4listbox {
+		@extend .flex;
+
+		border: none;
+		margin: 0;
+		width: 100%;
+		height: 200px;
+	}
+}
+
+.x4combobox {
+	@extend .hbox;
+	margin: 5px;
+
+	//&> #label {
+	//	padding: 0 6px;
+	//	border-bottom: 1px solid transparent;
+
+		&> .x4label {
+			padding: 0 6px;
+			border-bottom: 1px solid transparent;
+
+			height: 100%;
+			padding: 0;
+			font-weight: 500;
+			gap: 0;
+					
+			#text::not(.empty)::after {
+				content: ":"
+			}
+		}
+	//}
+
+	&>#edit {
+		@extend .flex;
+		border-bottom: 1px solid var( --combobox-border );
+		
+		.x4input {
+			@extend .flex;
+
+			&[readonly] {
+				cursor: pointer;
+			}
+		}
+
+		.x4button {
+			margin: 0;
+			padding: 0;
+			outline: none;
+			background-color: var( --combobox-btn-background );
+			color: var( --combobox-btn-color );
+
+			#icon {
+				color: var( --combobox-btn-color );
+			}
+
+			&:hover, &:hover #icon {
+				color: var( --combobox-btn-color-hover );
+			}
+
+			&:focus {
+				//background-color: var( --color-30 );
+				//color: var( --color-10 );
+			}
+		}
+	}
+
+	&[disabled] {
+		&, * {
+			cursor: not-allowed;
+		}
+
+		#label .x4label {
+			color: var( --disabled-color-dark );
+			pointer-events: none;
+		}
+	}
+	
+	&[required] {
+		.x4label::before {
+			content: "*";
+			color: var( --color-90 )
+		}
+	}
 }

package/lib/src/components/combobox/combobox.ts

@@ -1,190 +1,192 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file combobox.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, ComponentEvent, ComponentProps, EvChange, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
-import { Listbox, ListboxID, ListItem, kbNav } from '../listbox/listbox';
-import { Popup, PopupEvents, PopupProps } from '../popup/popup.js';
-import { Label } from '../label/label';
-import { Input } from '../input/input';
-import { Button } from '../button/button';
-import { HBox } from '../boxes/boxes';
-
-import "./combobox.module.scss";
-import icon from "./updown.svg";
-
-
-
-interface DropdownEvents extends PopupEvents {
-	selectionChange: EvSelectionChange;
-}
-
-
-interface DropdownProps extends Omit<PopupProps,"content"> {
-	items: ListItem[];
-}
-
-class Dropdown extends Popup<DropdownProps,DropdownEvents> {
-
-	private _list: Listbox;
-
-	constructor( props: DropdownProps, content?: ListItem[] ) {
-		super( props );
-
-		this._list = new Listbox( { items: props.items } );
-		this.setContent( this._list );
-
-		this.addDOMEvent( "mousedown", ( ev: Event ) => { 
-			console.log( "trap" );
-			ev.stopImmediatePropagation( );
-			ev.stopPropagation( );
-			ev.preventDefault( );
-		}, true );
-
-		this._list.on( "selectionChange", ( ev ) => {
-			this.fire( "selectionChange", ev );
-		})
-	}
-
-	getList( ) {
-		return this._list;
-	}
-}
-
-
-/**
- * 
- */
-
-interface ComboboxProps extends Omit<ComponentProps,"content"> {
-	label?: string;
-	labelWidth?: number | string;
-	readonly?: boolean;
-	items: ListItem[];
-}
-
-
-export class Combobox extends Component<ComboboxProps> {
-
-	private _dropdown: Dropdown;
-	private _label: Label;
-	private _input: Input;
-	private _button: Button;
-	private _prevent_close = false;
-	private _edit: HBox;
-				
-	constructor( props: ComboboxProps ) {
-		super( props );
-
-		const id = makeUniqueComponentId( );
-
-		this.setContent( [
-			new HBox( { id: "label", content: new Label( { tag: "label", text: props.label, labelFor: id, width: props.labelWidth } ) } ),
-			this._edit  = new HBox( { id: "edit", content: [
-				this._input  = new Input( { type: "text", value: "", readonly: props.readonly }),
-				this._button = new Button( { icon: icon } )
-			]} ),
-		])
-
-		this._dropdown = new Dropdown( { items: props.items } );
-
-		this._dropdown.on( "selectionChange", ( ev ) => {
-			const sel = ev.selection as ListItem;
-			this._input.setValue( sel ? sel.text : "" );
-			
-			if( !this._prevent_close ) {
-				this._dropdown.show( false );
-			}
-		});
-
-		this._button.addDOMEvent( "click", ( ) => this._on_click( ) );
-		this._input.addDOMEvent( "input", ( ) => this._on_input( ) );
-		this._input.addDOMEvent( "keydown", ( ev ) => this._on_key( ev ) );
-
-		this.setDOMEvents( {
-			focusout: ( ) => this._on_focusout( ),
-			click: ( ) => this._on_click( ),
-		})
-	}
-
-	private _on_key( ev: KeyboardEvent ) {
-		switch( ev.key ) {
-			case "Enter":
-			case "Escape": {
-				this._dropdown.show( false );
-				break;
-			}
-
-			case "ArrowUp":
-				this._prevent_close = true;
-				if( !this._dropdown.isOpen( ) ) {
-					this.showDropDown( );
-				}
-				else {
-					this._dropdown.getList().navigate( kbNav.prev );
-				}
-
-				this._prevent_close = false;
-				break;
-
-			case "ArrowDown":
-				this._prevent_close = true;
-				if( !this._dropdown.isOpen( ) ) {
-					this.showDropDown( );
-				}
-				else {
-					this._dropdown.getList().navigate( kbNav.next );
-				}
-
-				this._prevent_close = false;
-				break;
-
-			default: {
-				return;
-			}
-		}
-
-		ev.preventDefault( );
-		ev.stopPropagation( );
-	}
-
-	private _on_input( ) {
-		if( !this._dropdown.isOpen( ) ) {
-			this.showDropDown( );
-		}
-
-		this._dropdown.getList().filter( this._input.getValue( ) );
-	}
-
-	private _on_focusout( ) {
-		this._dropdown.show( false );
-	}
-	
-	private _on_click( ) {
-		this.showDropDown( );
-	}
-
-	showDropDown( ) {
-		if( this.isDisabled() ) {
-			return;
-		}
-		
-		const rc = this._edit.getBoundingRect( );
-		this._dropdown.setStyleValue( "width", rc.width+"px" );
-		this._dropdown.displayNear( rc, "top left", "bottom left", {x:0,y:6} );
-	}
-}
-
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file combobox.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, ComponentEvent, ComponentProps, EvChange, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
+import { Listbox, ListboxID, ListItem, kbNav } from '../listbox/listbox';
+import { Popup, PopupEvents, PopupProps } from '../popup/popup.js';
+import { Label } from '../label/label';
+import { Input } from '../input/input';
+import { Button } from '../button/button';
+import { HBox } from '../boxes/boxes';
+
+import "./combobox.module.scss";
+import icon from "./updown.svg";
+import { class_ns } from '@core/core_tools.js';
+
+
+
+interface DropdownEvents extends PopupEvents {
+	selectionChange: EvSelectionChange;
+}
+
+
+interface DropdownProps extends Omit<PopupProps,"content"> {
+	items: ListItem[];
+}
+
+@class_ns( "x4" )
+class Dropdown extends Popup<DropdownProps,DropdownEvents> {
+
+	private _list: Listbox;
+
+	constructor( props: DropdownProps, content?: ListItem[] ) {
+		super( props );
+
+		this._list = new Listbox( { items: props.items } );
+		this.setContent( this._list );
+
+		this.addDOMEvent( "mousedown", ( ev: Event ) => { 
+			console.log( "trap" );
+			ev.stopImmediatePropagation( );
+			ev.stopPropagation( );
+			ev.preventDefault( );
+		}, true );
+
+		this._list.on( "selectionChange", ( ev ) => {
+			this.fire( "selectionChange", ev );
+		})
+	}
+
+	getList( ) {
+		return this._list;
+	}
+}
+
+
+/**
+ * 
+ */
+
+interface ComboboxProps extends Omit<ComponentProps,"content"> {
+	label?: string;
+	labelWidth?: number | string;
+	readonly?: boolean;
+	items: ListItem[];
+}
+
+@class_ns( "x4" )
+export class Combobox extends Component<ComboboxProps> {
+
+	private _dropdown: Dropdown;
+	private _label: Label;
+	private _input: Input;
+	private _button: Button;
+	private _prevent_close = false;
+	private _edit: HBox;
+				
+	constructor( props: ComboboxProps ) {
+		super( props );
+
+		const id = makeUniqueComponentId( );
+
+		this.setContent( [
+			new HBox( { id: "label", content: new Label( { tag: "label", text: props.label, labelFor: id, width: props.labelWidth } ) } ),
+			this._edit  = new HBox( { id: "edit", content: [
+				this._input  = new Input( { type: "text", value: "", readonly: props.readonly }),
+				this._button = new Button( { icon: icon } )
+			]} ),
+		])
+
+		this._dropdown = new Dropdown( { items: props.items } );
+
+		this._dropdown.on( "selectionChange", ( ev ) => {
+			const sel = ev.selection as ListItem;
+			this._input.setValue( sel ? sel.text : "" );
+			
+			if( !this._prevent_close ) {
+				this._dropdown.show( false );
+			}
+		});
+
+		this._button.addDOMEvent( "click", ( ) => this._on_click( ) );
+		this._input.addDOMEvent( "input", ( ) => this._on_input( ) );
+		this._input.addDOMEvent( "keydown", ( ev ) => this._on_key( ev ) );
+
+		this.setDOMEvents( {
+			focusout: ( ) => this._on_focusout( ),
+			click: ( ) => this._on_click( ),
+		})
+	}
+
+	private _on_key( ev: KeyboardEvent ) {
+		switch( ev.key ) {
+			case "Enter":
+			case "Escape": {
+				this._dropdown.show( false );
+				break;
+			}
+
+			case "ArrowUp":
+				this._prevent_close = true;
+				if( !this._dropdown.isOpen( ) ) {
+					this.showDropDown( );
+				}
+				else {
+					this._dropdown.getList().navigate( kbNav.prev );
+				}
+
+				this._prevent_close = false;
+				break;
+
+			case "ArrowDown":
+				this._prevent_close = true;
+				if( !this._dropdown.isOpen( ) ) {
+					this.showDropDown( );
+				}
+				else {
+					this._dropdown.getList().navigate( kbNav.next );
+				}
+
+				this._prevent_close = false;
+				break;
+
+			default: {
+				return;
+			}
+		}
+
+		ev.preventDefault( );
+		ev.stopPropagation( );
+	}
+
+	private _on_input( ) {
+		if( !this._dropdown.isOpen( ) ) {
+			this.showDropDown( );
+		}
+
+		this._dropdown.getList().filter( this._input.getValue( ) );
+	}
+
+	private _on_focusout( ) {
+		this._dropdown.show( false );
+	}
+	
+	private _on_click( ) {
+		this.showDropDown( );
+	}
+
+	showDropDown( ) {
+		if( this.isDisabled() ) {
+			return;
+		}
+		
+		const rc = this._edit.getBoundingRect( );
+		this._dropdown.setStyleValue( "width", rc.width+"px" );
+		this._dropdown.displayNear( rc, "top left", "bottom left", {x:0,y:6} );
+	}
+}
+
+

package/lib/src/components/combobox/updown.svg

@@ -1,4 +1,4 @@
-<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
-	</path>
+<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
+	</path>
 </svg>

package/lib/src/components/components.ts

@@ -0,0 +1,34 @@
+export * from "./boxes/boxes"
+export * from "./breadcrumb/breadcrumb"
+export * from "./btngroup/btngroup"
+export * from "./button/button"
+export * from "./calendar/calendar"
+export * from "./checkbox/checkbox"
+export * from "./colorinput/colorinput"
+export * from "./colorpicker/colorpicker"
+export * from "./combobox/combobox"
+export * from "./dialog/dialog"
+export * from "./form/form"
+export * from "./header/header"
+export * from "./icon/icon"
+export * from "./image/image"
+export * from "./input/input"
+export * from "./label/label"
+export * from "./link/link"
+export * from "./listbox/listbox"
+export * from "./menu/menu"
+export * from "./messages/messages"
+export * from "./notification/notification"
+export * from "./panel/panel"
+export * from "./popup/popup"
+export * from "./progress/progress"
+export * from "./rating/rating"
+export * from "./sizers/sizer"
+export * from "./slider/slider"
+export * from "./switch/switch"
+export * from "./tabs/tabs"
+export * from "./textarea/textarea"
+export * from "./textedit/textedit"
+export * from "./tooltips/tooltips"
+export * from "./treeview/treeview"
+export * from "./viewport/viewport"