x4js 2.0.12 → 2.0.14

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

@@ -1,29 +1,41 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file btngroup.model.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.
- **/
-
-.x4btngroup {
-	align-content: start;
-	margin: 5px;
-	gap: 4px;
-
-	&.align-right {
-		justify-content: end;
-	}
-
-	&.align-center {
-		justify-content: center;
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file btngroup.model.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.
+ **/
+
+ :root {
+	--btngroup-background: white;
+ }
+
+.x4btngroup {
+	align-content: start;
+	margin: 5px;
+	gap: 4px;
+
+	background: var( --btngroup-background );
+
+	&.align-right {
+		justify-content: end;
+	}
+
+	&.align-center {
+		justify-content: center;
+	}
+
+	.x4button:disabled {
+		.fa-primary {
+			fill: var( --border );
+		}
+	}
 }

package/lib/src/components/btngroup/btngroup.ts

@@ -1,102 +1,153 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file btngroup.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, ComponentEvents, ComponentProps, Flex } from '../../core/component';
-import { EventCallback } from '../../core/core_events';
-import { isString } from '../../core/core_tools';
-import { _tr } from '../../core/core_i18n'
-
-import { Button } from '../button/button';
-import { Box } from '../boxes/boxes.js';
-import { Label } from '../label/label.js';
-import { EvBtnClick } from '../dialog/dialog.js';
-
-import "./btngroup.module.scss"
-
-
-type predefined = "ok" | "cancel" | "yes" | "no" | "retry" | "abort" | "-";	// - = flex
-export type BtnGroupItem = predefined | Button | Label;
-
-interface BtnGroupEvents extends ComponentEvents {
-	btnclick: EvBtnClick;
-}
-
-interface BtnGroupProps extends Omit<ComponentProps,"content"> {
-	align?: "left" | "center" | "right";	// left default
-	vertical?: boolean;					
-	items: BtnGroupItem[];
-	reverse?: boolean,
-	btnclick?: EventCallback<EvBtnClick>;
-}
-
-export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
-
-	constructor( props: BtnGroupProps ) {
-		super( props );
-
-		if( props.align ) {
-			this.addClass( "align-"+props.align );
-		}
-
-		this.addClass( props.vertical ? "x4vbox" : "x4hbox" );
-
-		if( props.items ) {
-			this.setButtons( props.items );
-		}
-
-		this.mapPropEvents( props, "btnclick" );
-	}
-
-	/**
-	 * 
-	 * @param btns 
-	 */
-
-	setButtons( btns: BtnGroupItem[] ) {
-
-		this.clearContent( );
-
-		const childs: Component[] = [];
-
-		btns?.forEach( (b: string | Component) => {
-
-			if( b==="-" ) {
-				b = new Flex( );
-			}
-			else if( isString(b) ) {
-				let title: string;
-				const nm = b as predefined;
-
-				switch( b as predefined ) {
-					case "ok": 		title = _tr.global.ok; break;
-					case "cancel": 	title = _tr.global.cancel; break;
-					case "abort":	title = _tr.global.abort; break;
-					case "no":		title = _tr.global.no; break;
-					case "yes":		title = _tr.global.yes; break;
-					case "retry":	title = _tr.global.retry; break;
-				}
-
-				b = new Button( { label: title, click: ( ) => {
-					this.fire( "btnclick", {button:nm as string} )
-				} } );
-			}
-
-			childs.push( b );
-		});
-
-		super.setContent( childs );
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file btngroup.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, Flex, Space } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { class_ns, isString } from '../../core/core_tools';
+import { _tr } from '../../core/core_i18n'
+
+import { Button } from '../button/button';
+import { Box } from '../boxes/boxes.js';
+import { Label } from '../label/label.js';
+import { EvBtnClick } from '../dialog/dialog.js';
+
+import "./btngroup.module.scss"
+import { Input } from '../components.js';
+
+/**
+ * accept "ok" or "ok.<classname>"
+ */
+
+type predefined = 		`ok${ "" | `.${string}`}` 
+					| 	`cancel${ "" | `.${string}`}` 
+					| 	`yes${ "" | `.${string}`}`
+					|	`no${ "" | `.${string}`}`
+					| 	`retry${ "" | `.${string}`}`
+					| 	`abort${ "" | `.${string}`}`
+					| 	"-" | ">>"	// - = Flex
+					|   "~";		// space
+
+export type BtnGroupItem = predefined | Button | Label | Input;
+
+interface BtnGroupEvents extends ComponentEvents {
+	btnclick: EvBtnClick;
+}
+
+interface BtnGroupProps extends Omit<ComponentProps,"content"> {
+	align?: "left" | "center" | "right";	// left default
+	vertical?: boolean;					
+	items: BtnGroupItem[];
+	reverse?: boolean,
+	btnclick?: EventCallback<EvBtnClick>;
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
+
+	constructor( props: BtnGroupProps ) {
+		super( props );
+
+		if( props.align ) {
+			this.addClass( "align-"+props.align );
+		}
+
+		this.addClass( props.vertical ? "x4vbox" : "x4hbox" );
+
+		if( props.items ) {
+			this.setButtons( props.items );
+		}
+
+		this.mapPropEvents( props, "btnclick" );
+	}
+
+	/**
+	 * 
+	 * @param btns 
+	 */
+
+	setButtons( btns: BtnGroupItem[] ) {
+
+		this.clearContent( );
+
+		const childs: Component[] = [];
+
+		const hasOption = ( options: string[], value: string ) => {
+			const idx = options.indexOf( value );
+			if( idx>=0 ) {
+				options.splice( idx, 1 );
+				return true;
+			}
+		}
+
+
+		btns?.forEach( (b: string | Component) => {
+
+			if( b==="-" || b===">>" ) {
+				b = new Flex( );
+			}
+			else if( b=='~' ) {
+				b = new Space( "1em" );
+			}
+			else if( isString(b) ) {
+				let title: string;
+
+				const nm = (b as predefined);
+
+				let [txt,...def] = nm.split( "." );
+
+				let cls = "";
+				switch( txt as predefined ) {
+					case "ok": 		title = _tr.global.ok; break;
+					case "cancel": 	title = _tr.global.cancel; break;
+					case "abort":	title = _tr.global.abort; break;
+					case "no":		title = _tr.global.no; break;
+					case "yes":		title = _tr.global.yes; break;
+					case "retry":	title = _tr.global.retry; break;
+				}
+
+				b = new Button( { cls, id: txt, label: title, click: ( ) => {
+					this.fire( "btnclick", {button:txt as string} )
+				} } );
+
+				if( hasOption( def, "default" ) ) {
+					b.addClass( 'default' );
+				}
+
+				if( hasOption( def, "autofocus" ) ) {
+					b.setAttribute( 'autofocus', true );
+				}
+				
+				if( hasOption( def, "disabled" ) ) {
+					b.enable( false );
+				}
+
+				b.addClass( def.join(" ") );
+			}
+
+			childs.push( b );
+		});
+
+		super.setContent( childs );
+	}
+
+	getButton( id: string ) {
+		return this.query<Button>( '#'+id );
+	}
 }

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

@@ -1,154 +1,173 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file button.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 {
-	--button-background: var( --accent-background );
-	--button-color: var( --accent-color );
-
-	--button-background-hover: var( --accent-background-hover );
-	--button-color-hover: var( --accent-color-hover );
-
-	--button-background-active: var( --accent-background-active );
-	--button-color-active: var( --accent-color-active );
-
-	--button-background-focus: var( --accent-background-focus );
-	--button-color-focus: var( --accent-color-focus );
-
-	--button-background-disabled: var( --disabled-background );
-	--button-color-disabled: var( --disabled-color );
-
-	--button-icon-color: rgb(255 255 255 / 64%);
-
-	// outline
-	--ol-button-background: var( --background-primary );
-	--ol-button-background-active: #eee;
-	--ol-button-color: var( --text-primary );
-	--ol-button-border: var( --border );
-	--ol-button-icon-color: var( --text-primary );
-
-	--ol-button-border-focus: var( --accent-background-focus );
-	--ol-button-color-focus: var( --accent-background );
-}
-
-.x4button {
-	@extend .hbox;
-	
-	margin: 5px;
-	gap: 4px;
-
-	font-size: inherit;
-	font-family: inherit;
-	
-	padding: 8px;
-	margin: 2px;
-	transition: background-color 0.3s, color 0.3s;
-	
-	border: none;
-	outline: none;
-	cursor: pointer;
-	
-	background-color: var( --button-background );
-	color: var( --button-color );
-
-	gap: 0.4em;
-		
-	&> #icon {
-		transition: color 0.3s;
-		width: 1em;
-		height: 1em;
-		//color: var( --button-icon-color );
-
-		&.empty {
-			display: none;
-		}
-	}
-
-	&> #label {
-		@extend .flex;
-
-		padding: 0;
-		color: inherit;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	&:focus {
-		background-color: var( --button-background-focus );
-		color: var( --button-color-focus );
-		#icon {
-			color: var( --button-color-focus );
-		}
-
-		#label {
-			text-decoration: underline;
-		}
-	}
-
-	&:hover {
-		background-color: var( --button-background-hover );
-		color: var( --button-color-hover );
-	}
-
-	&:active{
-		background-color: var( --button-background-active );
-		color: var( --button-color-active );
-	}	
-
-	&[disabled] {
-		cursor: not-allowed;
-		background-color: var( --button-background-disabled );
-		color: var( --button-color-disabled );
-	}
-}
-
-.x4button.outline {
-	background-color: var( --ol-button-background );
-	border: 1px solid var( --ol-button-border );
-	color: var( --ol-button-color );
-
-	#icon {
-		color: var( --ol-button-icon-color );
-	}
-
-	&:focus{
-		border-color: var( --ol-button-border-focus );
-		color: var( --ol-button-color-focus );
-		#icon {
-			color: var( --ol-button-color-focus );
-		}
-	}
-
-	&:active{
-		background-color: var( --ol-button-background-active );
-		color: var( --button-color-active );
-		#icon {
-			color: var( --button-icon-color );
-		}
-	}	
-}
-
-.x4button.danger {
-	background-color: var( --alert-background );
-	color: var( --alert-color );
-
-	&:active {
-		background-color: var( --alert-background-active );
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file button.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 {
+	--button-background: var( --accent-background );
+	--button-color: var( --accent-color );
+
+	--button-background-hover: var( --accent-background-hover );
+	--button-color-hover: var( --accent-color-hover );
+
+	--button-background-active: var( --accent-background-active );
+	--button-color-active: var( --accent-color-active );
+
+	--button-background-focus: var( --accent-background-focus );
+	--button-color-focus: var( --accent-color-focus );
+
+	--button-background-disabled: var( --disabled-background );
+	--button-color-disabled: var( --disabled-color );
+
+	--button-icon-color: rgb(255 255 255 / 64%);
+
+	// outline
+	--ol-button-background: var( --background-primary );
+	--ol-button-background-active: #ccc;
+	--ol-button-color-active: var( --text-primary );
+	--ol-button-background-hover: #eee;
+	--ol-button-color-hover: var( --text-primary );
+	--ol-button-color-disabled: #ccc;
+
+	--ol-button-color: var( --text-primary );
+	--ol-button-border: var( --border );
+	--ol-button-icon-color: var( --text-primary );
+
+	--ol-button-border-focus: var( --accent-background-focus );
+	--ol-button-color-focus: var( --accent-background );
+}
+
+.x4button {
+	@extend .hbox;
+	
+	margin: 5px;
+	gap: 4px;
+
+	font-size: inherit;
+	font-family: inherit;
+	
+	padding: 8px;
+	margin: 2px;
+	transition: background-color 0.3s, color 0.3s;
+	
+	border: none;
+	outline: none;
+	cursor: pointer;
+	
+	background-color: var( --button-background );
+	color: var( --button-color );
+
+	gap: 0.4em;
+		
+	&> #icon {
+		transition: color 0.3s, fill 0.3s;
+		fill: var( --button-color );
+
+		width: 1em;
+		height: 1em;
+		//color: var( --button-icon-color );
+
+		&.empty {
+			display: none;
+		}
+	}
+
+	&> #label {
+		flex-grow: 1;
+
+		padding: 0;
+		color: inherit;
+
+		&.empty {
+			display: none;
+		}
+	}
+
+	&:focus {
+		background-color: var( --button-background-focus );
+		color: var( --button-color-focus );
+		#icon {
+			color: var( --button-color-focus );
+		}
+
+		#label {
+			text-decoration: underline;
+		}
+	}
+
+	&:hover {
+		background-color: var( --button-background-hover );
+		color: var( --button-color-hover );
+	}
+
+	&:active{
+		background-color: var( --button-background-active );
+		color: var( --button-color-active );
+	}	
+
+	&[disabled] {
+		cursor: not-allowed;
+		background-color: var( --button-background-disabled );
+		color: var( --button-color-disabled );
+	}
+}
+
+.x4button.outline {
+	background-color: var( --ol-button-background );
+	border: 1px solid var( --ol-button-border );
+	color: var( --ol-button-color );
+
+	#icon {
+		color: var( --ol-button-icon-color );
+		fill: var(--ol-button-icon-color);
+	}
+
+	&:focus{
+		border-color: var( --ol-button-border-focus );
+		color: var( --ol-button-color-focus );
+		fill: var( --ol-button-color-focus );
+		#icon {
+			color: var( --ol-button-color-focus );
+			fill: var( --ol-button-color-focus );
+		}
+	}
+
+	&:hover{
+		background-color: var( --ol-button-background-hover );
+		color: var( --ol-button-color-hover );
+		fill: var( --ol-button-color-hover );
+	}	
+
+	&:active{
+		background-color: var( --ol-button-background-active );
+		color: var( --ol-button-color-active );
+		fill: var( --ol-button-color-active );
+
+		#icon {
+			color: var( --button-icon-color );
+			fill: var( --button-icon-color );
+		}
+	}	
+}
+
+.x4button.danger:not([disabled]) {
+	background-color: var( --alert-background );
+	color: var( --alert-color );
+
+	&:active {
+		background-color: var( --alert-background-active );
+	}
 }