cavalion-vcl 1.1.90 → 1.1.91

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+### `2026/01/18` 1.1.91 — UI/UX utility upgrades: visibility, filtering, sorting, and hints
+
+#### List sorting/selection fixes + date/numeric heuristics
+
+- Defers row selection updates to the next tick after click dispatch to avoid selection timing issues.
+- Broadens date detection to treat epoch-millis ranges as dates (in addition to `Date` instances and ISO `...Z` strings).
+- Improves date formatting to accept numeric-string timestamps by coercing before constructing a `Date`.
+- Adds automatic numeric-column detection (samples first 100 rows) when the caller doesn’t specify `numeric`.
+- Coerces finite numeric cell values to floats during sort comparisons for consistent numeric ordering.
+- Avoids a generated CSS class name collision by renaming attribute `"fa"` to `"fa_"` for list columns.
+
+
+#### Changes
+
+- Adds `Component.debounce(name, ms, fn)` as a shorthand over named timeouts.
+- Extends component lookup to accept a predicate function and walk owners until it matches.
+- Enhances `Control.whenVisible(...)` to accept an optional callback, reuse cached promises, and optionally reject on destroy (`rejectOnDestroy`); default destroy now resolves with `null`.
+- Adds `data/Array` support for filtering out `Source.Pending` items, plus a new `filterPending` property and `setFilterPending(...)`.
+- Reduces toast spam by silencing clipboard debug prints while keeping user feedback toasts.
+- Improves the developer console helpers: adds `tap`, paste helper, and safer/clearer HTML rendering for selection metadata.
+- Adds `Element.hint` (sets DOM `title`) and ensures hints are applied when attributes update.
+- Adjusts `List` click handling to avoid selection timing issues by deferring selection to the next tick.
+- Broadens date detection/formatting in `List` to handle epoch-millis (including numeric strings) in addition to `Date` and ISO Z strings.
+- Improves `List` sorting by auto-detecting numeric columns and coercing finite numeric values before comparing.
+- Adds `List.isNumericColumn(...)` heuristic (samples up to 100 rows) to drive numeric sorting defaults.
+- Hardens `ListColumn.getAttributeClassName()` to avoid CSS-class collisions for attribute `"fa"` by renaming to `"fa_"`.
+- Minor whitespace cleanup in `Application.js` (no functional change).
+
+
+
 ### `2025/10/27` 1.1.90 — List cell formatting & selection handling
 
 * Adds `_formatNumbers: true` and `_renderCellTitles: true` defaults in `List` prototype.

package/README.md

@@ -1,6 +1,7 @@
 * [Declarative Component Format.md](docs/:)
 * [Naming Conventions.md](docs/:)
 * ...
+* [Application Events.md](docs/:)
 
 # cavalion-vcl
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cavalion-vcl",
-  "version": "1.1.90",
+  "version": "1.1.91",
   "description": "Visual Component Library for vcl-comps",
   "main": "index.js",
   "scripts": {

package/src/Application.js

@@ -8,8 +8,6 @@ define(function(require) {
 	var CssRules = 			require("./CssRules");
 
 	var instances = [];
-	
-
 
 	return (Application = Application(require, {
 		inherits: Component,

package/src/Component.js

@@ -269,6 +269,9 @@ define(function (require) {
             	}
             	return this.setTimeout(name, f, 0, args);
             },
+            debounce(name, ms, f) {
+            	return this.setTimeout(name, f, ms);
+            },
             setTimeout: function(name, f, ms, args) {
 	            /**
 	             * @param name {String} [optional] Used to identify the timeout. Successive calls will cancel a previous timeout with the same name.
@@ -820,6 +823,18 @@ define(function (require) {
             		}
             		return selector;
             	}
+
+            	
+            	if(typeof selector === "function") {
+            		let c = this.getOwner();
+            		while(c !== null) {
+            			if(selector(c) == true) {
+            				break;
+            			}
+            			c = c.getOwner();
+            		}
+            		return c;
+            	}
             	
 	            /*- Queries all components for the given selector and filters out
 	                those matches which are an owner of the calling component. The

package/src/Control.js

@@ -1112,22 +1112,29 @@ define(function(require) {
 	                return r === true ? r : r === "always";
 	        },
 			whenVisible: function(options) {
+				let cb;
+				if (typeof options === "function") {
+					cb = options;
+					options = {};
+				}
 				options = options || {};
 			
+				const rejectOnDestroy = options.rejectOnDestroy === true;
+			
 				// Already visible → reuse a cached resolved promise (no new allocs).
 				if (this.isShowing() === true) {
-					return this._wv_resolved || (this._wv_resolved = Promise.resolve(this));
+					const p = this._wv_resolved || (this._wv_resolved = Promise.resolve(this));
+					return cb ? p.then(() => cb(this), () => undefined) : p;
 				}
 			
 				// Already waiting → return the same pending promise.
-				if (this._wv_pending) return this._wv_pending;
+				if (this._wv_pending) {
+					return cb ? this._wv_pending.then(v => (v && cb(v), v)) : this._wv_pending;
+				}
 			
-				// If a parent must become visible first, start our listeners now, but don't
-				// allocate a *second* promise for us — we still reuse _wv_pending below.
 				if (this._parent && this._parent !== this &&
-				    typeof this._parent.whenVisible === "function" &&
-				    this._parent.isShowing() === false) {
-					// Fire and forget: when parent shows, we’ll re-check via resolveVisible().
+					typeof this._parent.whenVisible === "function" &&
+					this._parent.isShowing() === false) {
 					this._parent.whenVisible(options).then(() => { this.update(); });
 				}
 			
@@ -1137,30 +1144,33 @@ define(function(require) {
 					if (destroyLis !== undefined) { this.un(destroyLis); destroyLis = undefined; }
 				};
 			
-				// Create exactly one pending promise and cache it.
 				this._wv_pending = new Promise((resolve, reject) => {
 					const settle = (fn, v) => { cleanup(); this._wv_pending = null; return fn(v); };
 			
 					const resolveVisible = () => {
 						if (this.isShowing() === true) {
-							// Cache a resolved promise for next time.
 							this._wv_resolved = this._wv_resolved || Promise.resolve(this);
 							return settle(resolve, this);
 						}
 					};
 			
-					const rejectVisible = (err) => settle(reject, err);
-			
 					showLis = this.on("show", resolveVisible);
-					destroyLis = this.on("destroy",
-						() => rejectVisible(new Error("Control destroyed before becoming visible")));
 			
-					// Nudge layout/visibility and do a synchronous re-check.
+					destroyLis = this.on("destroy", () => {
+						if (rejectOnDestroy) {
+							return settle(reject, new Error("Control destroyed before becoming visible"));
+						}
+						// Cancellation/no-op by default: resolves to null/undefined.
+						return settle(resolve, null);
+					});
+			
 					this.update();
 					resolveVisible();
 				});
 			
-				return this._wv_pending;
+				return cb
+					? this._wv_pending.then(v => (v && cb(v), v))
+					: this._wv_pending;
 			},
 	        isControlVisible: function(control) {
 	                return this.hasState(ControlState.acceptChildNodes) && this.isVisible();

package/src/data/Array.js

@@ -20,6 +20,8 @@ define(function(require) {
 			_onFilterObject: null,
     		_notifications: null,
     		
+    		_filterPending: false,
+    		
 			_onUpdate: null,
 			_onChange: null,
     		_onBusyChanged: null,
@@ -121,6 +123,10 @@ define(function(require) {
 				/** @overrides ../data/Source.prototype.getAttributeValue */
 				this.assertArray(index);
 				var obj = this.getObject(index || 0);
+				if(obj === null || typeof obj !== "object") {
+					return obj;
+				}
+				
 				if(name === ".") {
 					return obj;
 				}
@@ -189,7 +195,10 @@ define(function(require) {
 					this._arr = this._array;
 					for(var i = 0; i < this._array.length; ++i) {
 						var obj = this._array[i];
-						if(obj === Source.Pending || this.fire("onFilterObject", [obj, i, context]) !== true) {
+						if(
+							(obj === Source.Pending && !this._filterPending) || 
+							this.fire("onFilterObject", [obj, i, context]) !== true
+						) {
 							arr.push(obj);
 						}
 					}
@@ -250,6 +259,12 @@ define(function(require) {
 					this.notify(SourceEvent.layoutChanged);
 				}
 			},
+			setFilterPending: function(value) {
+				if(this._filterPending !== value) {
+					this._filterPending = value;
+					this.updateFilter();
+				}
+			},
 			arrayChanged: function() {
 				this.updateFilter(false);
 				//this.notify(SourceEvent.layoutChanged);
@@ -357,6 +372,10 @@ define(function(require) {
 			"array": {
 				type: Type.ARRAY,
 				set: Function
+    		},
+			"filterPending": {
+				type: Type.BOOLEAN,
+				set: Function
     		},
     		"onActiveChanged": {
     			type: Type.EVENT

package/src/prototypes/App.toast.js

@@ -16,10 +16,10 @@ const Clipboard = req("util/Clipboard");
 		};
 		
 		Clipboard.onPaste.addListener(e => { 
-			this.print("onPaste", e);
+			// this.print("onPaste", e);
 			this.toast(js.sf("Pasted %d bytes...", e.length ))});
 		Clipboard.onCopy.addListener(e => { 
-			this.print("onCopy", e);
+			// this.print("onCopy", e);
 			if(typeof e === "string" && e.length > 150) {
 				this.toast(js.sf("Copied %d bytes", e.length ));
 			} else {

package/src/prototypes/App.v1.js

@@ -30,14 +30,6 @@ const default_zoom = Browser.win ? "zoom-109" : "zoom-112";
     		
     	return this.inherited(arguments);
 	},
-	onDispatchChildEvent: function(component, name, evt, f, args) {
-		if(name === "touchstart") {
-			if(!Fullscreen.hasRequested()) {
-				Fullscreen.request(document.documentElement);
-			}
-		}
-        return this.inherited(arguments);
-	},
     onGetState: function() {
         var scope = this.getScope();
         var form = scope.client._form;
@@ -64,6 +56,8 @@ const default_zoom = Browser.win ? "zoom-109" : "zoom-112";
 			'font-size': font_size,
 			'letter-spacing': letter_spacing,
 
+		    '.right': "float: right;",
+	    
 			'.{Button}': {
 				'font-size': font_size,
 				'font-family': font_family,

package/src/prototypes/ui/forms/util/Console.js

@@ -36,14 +36,13 @@ const deselect = () => {
 const H = (uri, vars, opts) => B.i(["Hover<>", { vars: js.mi({ uri: uri }, vars)}], opts);
 H.i = (obj) => H("devtools/Alphaview.csv", { sel: [obj] });
 
+const tap = fn => x => (fn(x), x);
 const cc = (text) => Clipboard.copy(text);
+const cp = (cb) => Clipboard.paste(cb);
 const cl = console.log;
 const facts = (comp) => Component.getFactories(comp);
 
-window.B = B; window.H = H;
-window.facts = facts;
-window.cc = cc;
-window.cl = cl;
+js.mi(window, { B, H, facts, cc, cp, cl, tap });
 
 [["ui/Form"], {
     activeControl: "console",
@@ -79,16 +78,18 @@ window.cl = cl;
 
             if (value !== null) {
                 // `#CVLN-20200904-3`
-                content.push(js.sf("%s%s%s", 
+                content.push(js.sf("%H%H%H", 
                 	value.isRootComponent() ? ":root" : "", 
                 	value.isSelected && value.isSelected() ? ":selected" : "", 
                 	value.isEnabled && value.isEnabled() ? "" : ":disabled"));
 
         		if(value['@factory']) {
-        			content.push(js.n(value['@factory']).split("#").slice(0, -1).join("!"));
+        			content.push(js.sf("<small>%H</small>", js.n(value['@factory']).split("#").slice(0, -1).join("!")));
+        		} else {
+        			content.push("<i>no-factory</i>");
         		}
 
-        		content.push(js.sf("[%s]", value));
+        		content.push(js.sf("<b>[%H]</b>", value));
         		
 				var props = [], hashAndNameOrUri = (c) => [c.hashCode(), c._name ? "#" + c._name : " " + c._uri].filter(s => s !== "").join("");
 				if(value.up()) {
@@ -115,10 +116,14 @@ window.cl = cl;
 					consoles.forEach(c => c.getNode("input").value = js.sf("#%d", value.hashCode()));
 					consoles.forEach(c => c.focus());
 				}
+				
+				content.splice(0, 0, js.sf("<b>%H#%s</b>", value._name, value.hashCode()));
             }
-            scope.sizer_selection.setContent(String.format("%H", content.join(" ")));
-            
+
+            scope.sizer_selection.setContent(content.join(" "));
+
             if(value !== null) {
+	            
             	if(!content[0]) content.shift();
                 // content.pop();
     			app.toast({ title: js.sf("%n", value), content: " " || js.sf("<ul style='padding:0;padding-left:8px;'><li>%s</li></ul>", content.join("</li><li>")), classes: "glassy fade"});

package/src/ui/Element.js

@@ -93,6 +93,9 @@ define(function(require) {
 				for(var k in value) {
 					this._node.setAttribute(k, value[k]);
 				}
+				if(this._hint) {
+					this._node.title = this._hint;
+				}
 				return this.inherited(arguments);
 			},
 
@@ -106,6 +109,15 @@ define(function(require) {
 					this.recreateNode();
 				}
 			},
+			setHint: function(value) {
+				if(this._hint !== value) {
+					this._hint = value;
+					
+					if(this._node) {
+						this._node.title = value;
+					}
+				}
+			},
 			sourceNotifyEvent: function(event, data) {
 				switch(event) {
 
@@ -149,6 +161,10 @@ define(function(require) {
 				stored: false,
 				type: Type.OBJECT,
 				set: Function
+			},
+			"hint": {
+				type: Type.STRING,
+				set: Function
 			}
 		},
 		statics: {

package/src/ui/List.js

@@ -349,8 +349,8 @@ workaroundColumnAlignment(this);
                                        selection = [component._rowIndex];
                                        evt.preventDefault();
                                }
-                               this.setSelection(selection);
                                this.dispatch("click", evt);
+                               this.nextTick(() => this.setSelection(selection));
                        }
                }
 				return this.inherited(arguments);
@@ -531,11 +531,18 @@ workaroundColumnAlignment(this);
 workaroundColumnAlignment(this);
 			},
 			isDate: function(value) {
-				return (value instanceof Date) || (typeof value === "string" && 
-					value.length === 24 && value.endsWith("Z"));
+				return (value instanceof Date) || 
+					(value > 946706400000 && value < 1893477600000) ||
+					(typeof value === "string" && value.length === 24 && value.endsWith("Z"));
 			},
 			formatDate: function(value, opts) {
-				if(!(value instanceof Date)) value = new Date(value);
+				if(!(value instanceof Date)) {
+					if(typeof value === "string" && value.match(/^\d+$/)) {
+						value = parseInt(value, 10);
+					}
+					value = new Date(value);
+				}
+				
 				if(opts && opts.utc) {
 					return js.sf("%d/%02d/%02d %02d:%02d", value.getUTCFullYear(), value.getUTCMonth() + 1,
 							value.getUTCDate(), value.getUTCHours(), value.getUTCMinutes());
@@ -955,6 +962,10 @@ workaroundColumnAlignment(this);
 				} else if(typeof column === "number") {
 					column = this.getColumn(column);
 				}
+				
+				if(numeric === undefined) {
+					numeric = this.isNumericColumn(column);
+				}
 
 				const sv = column.get("onSortValues") || Array.sortValues;
 				this._source.sort((i1, i2) => {
@@ -964,6 +975,11 @@ workaroundColumnAlignment(this);
 					i1 = this.valueByColumnAndRow(column, row1);
 					i2 = this.valueByColumnAndRow(column, row2);
 					
+					if(numeric) {
+						i1 = isFinite(i1) ? parseFloat(i1) : i1;
+						i2 = isFinite(i2) ? parseFloat(i2) : i2;
+					}
+					
 					return dir * sv(i1, i2);
 				});
 				// (i1, i2) => {
@@ -994,6 +1010,13 @@ workaroundColumnAlignment(this);
 				// 	});
 			},
 			
+			isNumericColumn(column) {
+				return this._source._array
+					.slice(0, 100)
+					.every((o, i) => 
+						isFinite(this.valueByColumnAndRow(column, i)));
+			},
+			
 			hasSelection: function() {
 				return this._selection.length > 0;
 			},

package/src/ui/ListColumn.js

@@ -281,7 +281,13 @@ define(function(require) {
 				}
 			},
 			getAttributeClassName: function() {
-				return Array.from(this._attribute).map(char => /[\w-]/.test(char) ? char : '_').join('');
+				let r = Array.from(this._attribute).map(char => /[\w-]/.test(char) ? char : '_').join('');
+				
+				if(r === "fa") {
+					r += "_";
+				}
+				
+				return r;
 				
 				// return this._attribute.
 				// 	replace(/\#/g, "-").