x4js 2.3.17 → 2.3.19

package/cli/dev.mjs

@@ -5,7 +5,7 @@ import { parseArgs } from "node:util";
 import esbuild from "esbuild";
 import { DEFAULT_CONFIG_FILE, expandEnv, loadConfig, loadEnvFile, resolveConfigFile, resolveTls } from "./config.mjs";
 import { createBuildOptions } from "./build-options.mjs";
-import { info, success, failure } from "./log.mjs";
+import { info, success, failure, warning } from "./log.mjs";
 
 function openBrowser(url) {
     let command;
@@ -28,6 +28,9 @@ function openBrowser(url) {
         detached: true,
         stdio: "ignore",
     });
+
+    // no browser could be started (xdg-open missing...): the server goes on
+    child.on("error", (error) => warning(`cannot open the browser: ${error.message}`));
     child.unref();
 }
 

package/cli/less-plugin.mjs

@@ -28,7 +28,11 @@ export function lessPlugin(projectRoot) {
         setup(build) {
             build.onLoad({ filter: /\.less$/ }, async (args) => {
                 const source = await fs.readFile(args.path, "utf8");
-                lessPromise ??= loadLess(projectRoot);
+                // not kept when it fails: less can be installed while dev runs
+                lessPromise ??= loadLess(projectRoot).catch((error) => {
+                    lessPromise = undefined;
+                    throw error;
+                });
                 const less = await lessPromise;
 
                 const result = await less.render(source, {

package/cli/main.mjs

@@ -25,17 +25,27 @@ Usage:
   x4js build [--config <file>] [--env <file>] [--debug]
 
 Options:
-  --config <file>  Config file (default: x4.config.json)
-  --env <file>     File of NAME=value lines, for $NAME in the config
-  -h, --help       Show help
-  -v, --version    Show version`);
+  --config <file>          Config file (default: x4.config.json)
+  --env <file>             File of NAME=value lines, for $NAME in the config
+  -t, --template <name>    create: template to use (default: app)
+  --no-install             create: do not run npm install
+  --host <host>            dev: address to listen on (default: 127.0.0.1)
+  --port <port>            dev: port to listen on (default: the first free port from 8000)
+  --http, --https          dev: force the protocol, whatever the config says
+  --open                   dev: open the browser once the server is ready
+  --debug                  build: not minified, with source maps
+  -h, --help               Show help
+  -v, --version            Show version`);
 }
 
 const version = getVersion();
 const [command, ...argv] = process.argv.slice(2);
 
+// x4js <command> --help: the help, that gives the options of every command
+const help = argv.includes("--help") || argv.includes("-h");
+
 try {
-    switch (command) {
+    switch (help ? "help" : command) {
         case "create": {
             const { create } = await import("./create.mjs");
             await create(argv, { version });

package/cli/rawfile-plugin.mjs

@@ -8,15 +8,35 @@ export function rawFilePlugin({ filter, mime }) {
         name: "x4-raw-file",
 
         setup(build) {
-            build.onResolve({ filter }, (args) => {
+            build.onResolve({ filter }, async (args) => {
                 // Seulement les imports JS/TS.
+                // pluginData: the call of build.resolve below, which esbuild resolves itself
                 if (
-                    args.kind !== "import-statement" &&
-                    args.kind !== "dynamic-import"
+                    (args.kind !== "import-statement" &&
+                    args.kind !== "dynamic-import") ||
+                    args.pluginData === namespace
                 ) {
                     return;
                 }
 
+                // a package: esbuild finds it in node_modules. Its file is read here
+                // too, in base64: Icon inserts the svg of the url as it is, a "%23"
+                // of a url in text would stay in it
+                if (!args.path.startsWith(".") && !path.isAbsolute(args.path)) {
+                    const found = await build.resolve(args.path, {
+                        kind: args.kind,
+                        resolveDir: args.resolveDir,
+                        importer: args.importer,
+                        pluginData: namespace,
+                    });
+
+                    if (found.errors.length) {
+                        return { errors: found.errors };
+                    }
+
+                    return { path: found.path, namespace };
+                }
+
                 return {
                     path: path.resolve(args.resolveDir, args.path),
                     namespace,

package/cli/templates.mjs

@@ -1,7 +1,11 @@
+import { parseArgs } from "node:util";
 import { fetchTemplates } from "./templates-source.mjs";
 import { color } from "./log.mjs";
 
-export async function templates(_argv = [], { version = "unknown" } = {}) {
+export async function templates(argv = [], { version = "unknown" } = {}) {
+    // takes no argument: one given is an error
+    parseArgs({ args: argv, options: {}, strict: true });
+
     const manifest = await fetchTemplates(version);
     const names = Object.keys(manifest).sort();
     const width = names.reduce((max, name) => Math.max(max, name.length), 0) + 3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.3.17",
+  "version": "2.3.19",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/calendar/calendar.module.scss

@@ -41,7 +41,10 @@
 .x4calendar {
 	border: 1px solid var( --border );
 	padding: 4px;
-	
+
+	// too short for its weeks (6 in some months): what does not fit is cut, not drawn over what follows
+	overflow: hidden;
+
 	.month-sel {
 		height: 2em;
 		align-items: center;
@@ -147,6 +150,18 @@
 				color: var( --calendard-day-color-hover );
 			}
 		}
+
+		// out of minDate..maxDate: cannot be chosen
+		.disabled {
+			color: var( --calendar-out-color );
+			text-decoration: line-through;
+			cursor: default;
+		}
+
+		.disabled:hover .text {
+			background-color: transparent;
+			color: var( --calendar-out-color );
+		}
 	}
 
 	.header {

package/src/components/calendar/calendar.ts

@@ -78,7 +78,7 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 		super(props);
 
 		this.mapPropEvents( props, 'change' );
-		this.m_date = props.date ? date_clone( props.date ) : new Date();
+		this.m_date = this._clamp( props.date ? date_clone( props.date ) : new Date() );
 
 		this._update( );
 	}
@@ -130,7 +130,7 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 				}),
 				new Flex( ),
 				new Button({ icon: icon_prev, click: () => this._next(false) } ),
-				new Button({ icon: icon_today, click: () => this.setDate(new Date()), tooltip: _tr.global.today } ),
+				new Button({ icon: icon_today, click: () => this.setDate( this._clamp( new Date() ) ), tooltip: _tr.global.today } ),
 				new Button({ icon: icon_next, click: () => this._next(true) } )
 			]
 		});
@@ -159,6 +159,9 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 		}));
 
 		let cmonth = this.m_date.getMonth();
+		const { minDate, maxDate } = this.props;
+		const min_hash = minDate ? date_hash( minDate ) : null;
+		const max_hash = maxDate ? date_hash( maxDate ) : null;
 
 		// weeks
 		let first = true;
@@ -184,6 +187,13 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 					cls += ' out';
 				}
 
+				// out of minDate..maxDate: shown, not chosen
+				const hash = date_hash( dte );
+				const off = (min_hash!==null && hash < min_hash) || (max_hash!==null && hash > max_hash);
+				if( off ) {
+					cls += ' disabled';
+				}
+
 				const mkItem = ( dte: Date ) => {
 					return new HBox({
 						cls,
@@ -192,7 +202,7 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 							cls: "text",
 							content: unsafeHtml( `<span>${formatIntlDate(dte, 'd')}</span>` ),
 						}),
-						dom_events: {
+						dom_events: off ? undefined : {
 							click: () => this.select(dte)
 						}
 					})
@@ -230,8 +240,40 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 	 */
 
 	private _next(n: boolean) {
-		this.m_date.setMonth(this.m_date.getMonth() + (n ? 1 : -1));
-		this._update();
+		this._goto( this.m_date.getFullYear( ), this.m_date.getMonth() + (n ? 1 : -1) );
+	}
+
+	/**
+	 * shows another month: the day is kept, not past the end of the month
+	 * (31 January → 28 February), and the date stays between minDate and maxDate
+	 */
+
+	private _goto( year: number, month: number ) {
+		const day = this.m_date.getDate( );
+		const d = date_clone( this.m_date );
+		d.setDate( 1 );
+		d.setFullYear( year, month );		// month 12: January of the next year
+		d.setDate( Math.min( day, new Date( d.getFullYear( ), d.getMonth( )+1, 0 ).getDate( ) ) );
+
+		this.m_date = this._clamp( d );
+		this._update( );
+	}
+
+	/**
+	 * the date brought between minDate and maxDate
+	 */
+
+	private _clamp( d: Date ) {
+		const { minDate, maxDate } = this.props;
+		if( minDate && d < minDate ) {
+			return date_clone( minDate );
+		}
+
+		if( maxDate && d > maxDate ) {
+			return date_clone( maxDate );
+		}
+
+		return d;
 	}
 
 	/**
@@ -246,7 +288,7 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 			for (let m = 0; m < 12; m++) {
 				items.push(({
 					text: _tr.global.month_long[m],
-					click: () => { this.m_date.setMonth(m); this._update(); }
+					click: () => { this._goto( this.m_date.getFullYear( ), m ); }
 				}));
 			}
 		}
@@ -258,7 +300,7 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 			for (let m = max; m >= min; m--) {
 				items.push({
 					text: '' + m,
-					click: () => { this.m_date.setFullYear(m); this._update(); }
+					click: () => { this._goto( m, this.m_date.getMonth( ) ); }
 				});
 			}
 		}
@@ -271,12 +313,13 @@ export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 		menu.displayAt(rc.left, rc.top);
 	}
 
+	// a copy: the calendar and its caller do not share the object
 	getDate() {
-		return this.m_date;
+		return date_clone( this.m_date );
 	}
 
 	setDate(date: Date) {
-		this.m_date = date;
+		this.m_date = date_clone( date );
 		this._update();
 	}
 }

package/src/components/checkbox/checkbox.ts

@@ -71,6 +71,7 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 						type:"checkbox", 
 						id: inputId, 
 						name: props.name,
+						value: props.value,		// sent by a <form> of the browser when checked; a Form of x4 reads a boolean
 						checked: props.checked,
 						dom_events: {
 							change: ( ) => this._on_change( ),

package/src/components/combobox/combobox.ts

@@ -144,30 +144,15 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 		}
 
 		this._popup = new DropdownList( { items: props.items, renderer: props.renderer } );
-		const list = this._popup.getList( );
-
-		const _select = ( sel: ListboxID ) => {
-			const itm = list.getItem(sel);
-			if( itm ) {
-				list.select( sel, false );
-				this._input.setValue( itm.text as string );
-			}
-
-			if( !this._prevent_close ) {
-				this._popup.show( false );
-			}
-		}
-
 		this._popup.on( "click", ( ev ) => {
 			const sel = ev.context as ListboxID;
 			if( sel!==undefined ) {	// no empty sel
-				_select( sel );			
-				this.fire( "selectionChange", { selection: [sel], empty: false }  );
+				this._choose( sel, true );
 			}
 		});
 
 		if( props.value!==undefined && props.value!==null ) {
-			_select( props.value );
+			this._choose( props.value, false );
 		}
 
 		this._button.addDOMEvent( "click", ( ) => this._on_click( ) );
@@ -180,6 +165,27 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 		})
 	}
 
+	/**
+	 * the item chosen: by a click, by the arrows (the popup stays open), or by the props
+	 */
+
+	private _choose( sel: ListboxID, notify: boolean ) {
+		const list = this._getList( );
+		const itm = list.getItem( sel );
+		if( itm ) {
+			list.select( sel, false );
+			this._input.setValue( itm.text as string );
+		}
+
+		if( !this._prevent_close ) {
+			this._popup.show( false );
+		}
+
+		if( notify ) {
+			this.fire( "selectionChange", { selection: [sel], empty: false } );
+		}
+	}
+
 	private _on_key( ev: KeyboardEvent ) {
 		switch( ev.key ) {
 			case "Enter":
@@ -197,7 +203,13 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 					this.showDropDown( );
 				}
 				else {
-					this._popup.getList().navigate( kbNav.prev );
+					// the item reached is chosen at once
+					const list = this._getList( );
+					list.navigate( kbNav.prev );
+					const [sel] = list.getSelection( );
+					if( sel!==undefined ) {
+						this._choose( sel, true );
+					}
 				}
 
 				this._prevent_close = false;
@@ -209,7 +221,13 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 					this.showDropDown( );
 				}
 				else {
-					this._popup.getList().navigate( kbNav.next );
+					// the item reached is chosen at once
+					const list = this._getList( );
+					list.navigate( kbNav.next );
+					const [sel] = list.getSelection( );
+					if( sel!==undefined ) {
+						this._choose( sel, true );
+					}
 				}
 
 				this._prevent_close = false;
@@ -229,7 +247,18 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 			this.showDropDown( );
 		}
 
-		this._popup.getList().filter( this._input.getValue( ) );
+		// the text typed is no longer the one of the item chosen: none is chosen
+		const list = this._getList( );
+		const sel = this.getSelection( );
+		if( sel!==undefined ) {
+			const itm = list.getItem( sel );
+			if( !itm || itm.text!==this._input.getValue( ) ) {
+				list.clearSelection( false );
+				this.fire( "selectionChange", { selection: [], empty: true } );
+			}
+		}
+
+		list.filter( this._input.getValue( ) );
 	}
 
 	private _on_focusout( ) {
@@ -268,10 +297,9 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 	selectItem( index: ListboxID ) {
 		const list = this._getList( );
 		list.select( index );
+		// no item (null...): the text is emptied too
 		const el = list.getItem( index );
-		if( el ) {
-			this.setValue( el.text as string );
-		}
+		this.setValue( el ? el.text as string : "" );
 	}
 
 	getSelection( ) {

package/src/components/dialog/dialog.ts

@@ -257,11 +257,14 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 
 			this.on( "btnclick", ( ev ) => {
 				asap( ( ) => {
-					this.close( );
 					resolve( ev.button );
+					this.close( );
 				});
 			});
 
+			// closed without a button (Escape, the close box): nothing was chosen
+			this.on( "closed", ( ) => resolve( null ) );
+
 			this.show();
 		} );
 	}

package/src/components/form/form.ts

@@ -117,13 +117,14 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 
 	setValidator( validator: ValidationFn ) {
 
+		// focusout: once, the first time
 		if( !this.validator ) {
-			this.validator = validator;
-			
 			// validation en live des valeurs
 			// disable du bouton ok si pas bon
 			this.addDOMEvent( "focusout", ( ) => this.validate() );
 		}
+
+		this.validator = validator;
 	}
 
 	/**
@@ -155,11 +156,14 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 				return null;
 			}
 
-			for( let name in result ) {
+			// the elements already found: a select, a textarea, a rating... every radio of a group
+			for( const x of items ) {
+				const name = x.getAttribute( "name" );
 				if( new_values[name] != result[name] ) {
-					const x = this.query( `input[name="${name}"]` );
 					const ifx = x.queryInterface( "form-element" ) as IFormElement;
-					ifx.setRawValue( new_values[name] );
+					if( ifx ) {
+						ifx.setRawValue( new_values[name] );
+					}
 				}
 			}