cavalion-vcl 1.1.91 → 1.1.92

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+### `2026/03/16` 1.1.92 — UI selection and data query aliases
+
+Tightens several UI and data-layer behaviors across the framework. It fixes icon state persistence, adds `from`/`select` query aliases, makes array filtering more explicit around `Source.Pending`, and improves toast ergonomics with shorthand options and live updates. On the UI side, it refines `List` click/selection handling to better distinguish clicks from drag gestures, broadens date parsing/formatting, and adds small support utilities such as column lookup by DOM node and improved root-component labeling in the console.
+
+* Fixes `Application.setIcon()` to persist `_icon` before updating the favicon link.
+* Adds `filterPending` to `src/data/Array.js` and refreshes filtering when the flag changes.
+* Changes array filtering so `Source.Pending` entries can be kept or filtered explicitly.
+* Fixes `getAttributeValue()` in `src/data/Array.js` for `null` and non-object values.
+* Adds query aliases `from` → `entity` and `select` → `attributes` in `src/entities/Query.js`.
+* Improves `App.toast` with shorthand options (`t`, `c`, `cl`), default `glassy fade` styling, and `loading` content support.
+* Adds `update()` plus `el`/`elem` aliases to the toast controller API.
+* Fixes root-component labeling in `ui/forms/util/Console.js` by preferring `_uri` for root instances.
+* Improves `src/ui/List.js` click handling by tracking short presses and reducing accidental selection during drag interactions.
+* Adds temporary `.no-select` behavior after short clicks to suppress unwanted text selection in lists.
+* Expands date detection and formatting in `src/ui/List.js` for `DD-MM-YYYY`, `YYYY-MM-DD`, numeric timestamps, and date-only display.
+* Adds `getColumnByNode()` to resolve a list column from a DOM node.
+* Updates `App.glassy` overlay styling with `z-index: 2`.
+* Adds `_draggable` state to `src/ui/ListRow.js`.
+
+
 ### `2026/01/18` 1.1.91 — UI/UX utility upgrades: visibility, filtering, sorting, and hints
 
 #### List sorting/selection fixes + date/numeric heuristics

package/package.json

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

package/src/Application.js

@@ -301,6 +301,7 @@ define(function(require) {
 			},
 			setIcon: function(value) {
                 if(this._icon !== value) {
+                    this._icon = value;
                     var link = document.querySelectorAll("html head link[rel='icon shortcut']")[0];
                     if(link === undefined) {
                         link = document.createElement("link");

package/src/entities/Query.js

@@ -609,6 +609,11 @@ define(function(require) {
 					this.notify(SourceEvent.changed);
 				}
 			},
+
+			getFrom() { return this._entity; },
+			setFrom(value) { return this.setEntity(value); },
+			getSelect() { return this._attributes; },
+			setSelect(value) { return this.setAttributes(value); },
 			
 			assign: function(query) {
 				var wasActive = this.isActive();
@@ -651,6 +656,10 @@ define(function(require) {
     		"entity": {
     			type: Type.STRING
     		},
+    		
+			"from": { type: Type.STRING, get: Function, set: Function },
+			"select": { type: Type.STRING, get: Function, set: Function },
+    		
     		"filterBy": {
     			type: Type.ARRAY
     		},

package/src/prototypes/App.glassy.js

@@ -41,7 +41,7 @@ function animate() {
 			".transparent": "background-color:transparent;",
 			".glassy-overlay": {
 				"": "pointer-events: none; color:rgba(5,5,5,0.95);",
-		 		".glassy": "background-color: rgba(215, 215, 215, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);",
+		 		".glassy": "background-color: rgba(215, 215, 215, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 2;",
 				".loading": "background: url(/shared/vcl/images/loading.gif) 50% 50% no-repeat;",
 				".rounded": "padding: 4px; border-radius: 5px;",
 				".animate-width-height": "transition: width 250ms ease-in, height 250ms ease-in;",

package/src/prototypes/App.toast.js

@@ -2,6 +2,8 @@
 
 const Clipboard = req("util/Clipboard");
 
+let IMG_LOADING = "https://veldapps.com/shared/vcl/images/loading.gif";
+
 ["", {
 	onLoad() {
 
@@ -40,17 +42,23 @@ const Clipboard = req("util/Clipboard");
 				- remove: API to remove toast
 		*/
 
-		var Element = require("vcl/ui/Element");
-		var scope = this.getScope();
-		var elem = new Element(this);
+		const Element = require("vcl/ui/Element");
+		const scope = this.getScope();
+		const elem = new Element(this);
 
-		var timeout = options.ms || (options.hasOwnProperty("timeout") ? options.timeout : 1500);
-		var content = options.content || "No toast content";
-		var classes = options.classes || "fade";
+		const timeout = options.ms ?? (options.hasOwnProperty("timeout") ? options.timeout : 1500);
+		const classes = options.cl ?? options.classes ?? "glassy fade";
+		const title = options.t ?? options.title;
 
-		if(options.title !== undefined) {
+		let content = options.c ?? options.content ?? "No toast content";
+		
+		if(title !== undefined) {
 			content = js.sf("<b>%s</b><div>%s</div>", options.title, content);
 		}
+		
+		if(options.loading === true) {
+			content += " &nbsp; " + IMG_LOADING;
+		}
 
 		elem.setContent(content);
 		elem.setParent(scope.toasts);
@@ -58,7 +66,9 @@ const Clipboard = req("util/Clipboard");
 		elem.update(() => elem.addClass("appear"));
 
 		const controller = {
-			element: elem,
+			element: elem, el: elem, elem,
+			
+			update: (content) => controller.el.setContent(content),
 			remove(timeout_) {
 				elem.setTimeout("disappear", () => {
 

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

@@ -91,7 +91,7 @@ js.mi(window, { B, H, facts, cc, cp, cl, tap });
 
         		content.push(js.sf("<b>[%H]</b>", value));
         		
-				var props = [], hashAndNameOrUri = (c) => [c.hashCode(), c._name ? "#" + c._name : " " + c._uri].filter(s => s !== "").join("");
+				var props = [], hashAndNameOrUri = (c) => [c.hashCode(), c.isRootComponent() ? c._uri : c._name ? "#" + c._name : " " + c._uri].filter(s => s !== "").join("");
 				if(value.up()) {
 					props.push(js.sf("up(): #%s", hashAndNameOrUri(value.up())));
 				}

package/src/ui/List.js

@@ -10,6 +10,7 @@ define(function(require) {
 	var Source = require("../../data/Source");
 	var SourceEvent = require("../../data/SourceEvent");
 	var Component = require("../Component");
+	var Control = require("../Control");
 	var Panel = require("./Panel");
 	var ListColumn = require("./ListColumn");
 	var ListHeader = require("./ListHeader");
@@ -17,6 +18,9 @@ define(function(require) {
 	var ListBody = require("./ListBody");
 	var ListRow = require("./ListRow");
 	
+	const CLICK_INTERVAL = 350;
+	const MAX_PRESS_DURATION = 180;
+
 	// require("stylesheet!./List.less");
 	
 	// TODO centralize/utilize :-p
@@ -52,6 +56,7 @@ define(function(require) {
 			'@css': {
 				overflow: "hidden",
 				'overflow-x': "auto",
+				'&.no-select': "user-select: none; -webkit-user-select: none;",
 				'&.busy': {
 					'background': "url(/shared/vcl/images/loading.gif) no-repeat 4px 32px",
 					'.body': {
@@ -268,90 +273,100 @@ workaroundColumnAlignment(this);
 			},
 			dispatchChildEvent: function(component, name, evt, f, args) {
 				/** @overrides ../Control.prototype.dispatchChildEvent */
-				if(name === "mousedown" && evt.shiftKey === true) {
-					// prevent selection with mouse
-					evt.preventDefault();
-				} else if(component instanceof ListRow) {
-					if(["dblclick", "dragenter", "dragover", "dragleave", "drop"].indexOf(name) !== -1) {
+				// if(name === "mousedown" && evt.shiftKey === true) {
+				// 	// prevent selection with mouse
+				// 	evt.preventDefault();
+				// } else 
+				if(component instanceof ListRow) {
+					if(["dblclick", "dragenter", "dragover", "dragleave", "drop", 
+						"mousedown", "mouseup"].indexOf(name) !== -1) {
 						this.dispatch(name, evt);
+						
+						if(name === "mousedown") {
+							this._lastMouseDown = Date.now();
+						}
+						
 					} else if(name === "click") {
-						var rowIndex = component._rowIndex;
-                               var selection;
-                               if(evt.ctrlKey === true || evt.metaKey === true) {
-                                       if(this.isRowSelected(rowIndex)) {
-                                               var index = this._selection.indexOf(rowIndex);
-                                               selection = [].concat(this._selection);
-                                               selection.splice(index, 1);
-                                       } else {
-                                               selection = this._selection.concat([rowIndex]);
-                                       }
-
-                               } else if(evt.shiftKey === true) {
-                                       var length = this._selection.length;
-                                       var i;
-
-                                       HtmlElement.clearSelection();
-
-                                       if(this._shiftSelectFromLast === true) {
-                                               var anchor = length > 0 ? this._selection[length - 1] : 0;
-                                               if(anchor === rowIndex) {
-                                                       selection = this._selection;
-                                               } else {
-                                                       selection = [];
-                                                       if(this.isRowSelected(anchor)) {
-                                                               selection.push(anchor);
-                                                       }
-                                                       if(anchor < rowIndex) {
-                                                               for(i = anchor + 1; i <= rowIndex; ++i) {
-                                                                       if(!this.isRowSelected(i)) {
-                                                                               selection.push(i);
-                                                                       }
-                                                               }
-                                                       } else {
-                                                               for(i = anchor - 1; i >= rowIndex; --i) {
-                                                                       if(!this.isRowSelected(i)) {
-                                                                               selection.push(i);
-                                                                       }
-                                                               }
-                                                       }
-                                               }
-                                       } else {
-                                               var start = length > 0 ? Math.min.apply(Math, this._selection) : 0;
-                                               var end = length > 0 ? Math.max.apply(Math, this._selection) : 0;
-
-                                               if(length === 0) {
-                                                       start = Math.min(0, rowIndex);
-                                                       end = Math.max(0, rowIndex);
-                                               } else if(rowIndex < start) {
-                                                       start = rowIndex;
-                                               } else if(rowIndex > end) {
-                                                       end = rowIndex;
-                                               } else {
-                                                       if(rowIndex - start < end - rowIndex) {
-                                                               start = rowIndex;
-                                                       } else {
-                                                               end = rowIndex;
-                                                       }
-                                               }
-
-                                               selection = [];
-                                               if(start <= end) {
-                                                       for(i = start; i <= end; ++i) {
-                                                               selection.push(i);
-                                                       }
-                                               } else {
-                                                       for(i = start; i >= end; --i) {
-                                                               selection.push(i);
-                                                       }
-                                               }
-                                       }
-                               } else {
-                                       selection = [component._rowIndex];
-                                       evt.preventDefault();
-                               }
-                               this.dispatch("click", evt);
-                               this.nextTick(() => this.setSelection(selection));
-                       }
+						if(Date.now() - this._lastMouseDown < 150) {
+							var rowIndex = component._rowIndex;
+							var selection;
+							if(evt.ctrlKey === true || evt.metaKey === true) {
+						       if(this.isRowSelected(rowIndex)) {
+					               var index = this._selection.indexOf(rowIndex);
+					               selection = [].concat(this._selection);
+					               selection.splice(index, 1);
+						       } else {
+					               selection = this._selection.concat([rowIndex]);
+						       }
+							
+							} else if(evt.shiftKey === true) {
+							       var length = this._selection.length;
+							       var i;
+							
+							       HtmlElement.clearSelection();
+							
+							       if(this._shiftSelectFromLast === true) {
+							               var anchor = length > 0 ? this._selection[length - 1] : 0;
+							               if(anchor === rowIndex) {
+							                       selection = this._selection;
+							               } else {
+							                       selection = [];
+							                       if(this.isRowSelected(anchor)) {
+							                               selection.push(anchor);
+							                       }
+							                       if(anchor < rowIndex) {
+							                               for(i = anchor + 1; i <= rowIndex; ++i) {
+							                                       if(!this.isRowSelected(i)) {
+							                                               selection.push(i);
+							                                       }
+							                               }
+							                       } else {
+							                               for(i = anchor - 1; i >= rowIndex; --i) {
+							                                       if(!this.isRowSelected(i)) {
+							                                               selection.push(i);
+							                                       }
+							                               }
+							                       }
+							               }
+							       } else {
+							               var start = length > 0 ? Math.min.apply(Math, this._selection) : 0;
+							               var end = length > 0 ? Math.max.apply(Math, this._selection) : 0;
+							
+							               if(length === 0) {
+							                       start = Math.min(0, rowIndex);
+							                       end = Math.max(0, rowIndex);
+							               } else if(rowIndex < start) {
+							                       start = rowIndex;
+							               } else if(rowIndex > end) {
+							                       end = rowIndex;
+							               } else {
+							                       if(rowIndex - start < end - rowIndex) {
+							                               start = rowIndex;
+							                       } else {
+							                               end = rowIndex;
+							                       }
+							               }
+							
+							               selection = [];
+							               if(start <= end) {
+							                       for(i = start; i <= end; ++i) {
+							                               selection.push(i);
+							                       }
+							               } else {
+							                       for(i = start; i >= end; --i) {
+							                               selection.push(i);
+							                       }
+							               }
+							       }
+							} else {
+							       selection = [component._rowIndex];
+							       evt.preventDefault();
+							}
+							//this.nextTick(() => this.setSelection(selection));
+							this.setSelection(selection);
+							this.dispatch("click", evt);
+                    	}
+					}
                }
 				return this.inherited(arguments);
 			},
@@ -396,6 +411,29 @@ workaroundColumnAlignment(this);
 				}
 				return r;
 			},
+			onmouseup: function(evt) {
+				/** @overrides ../Control.prototype.onmouseup */
+				var r = this.inherited(arguments);
+
+				this.nextTick(() => {
+					if(r === false || evt.button !== 0) return r;
+		
+					const now = Date.now();
+					const pressDuration = now - (this._lastMouseDown || now);
+					const sinceLastUp = now - (this._lastMouseUpTime || 0);
+		
+					this._lastMouseUpTime = now;
+		
+					if(pressDuration <= MAX_PRESS_DURATION) {
+						// Only arms no-select when the press was short (so, probably not a drag)
+						this.update(() => this.syncClass("no-select", true));
+					}
+	
+					this.setTimeout("no-select", () => this.syncClass("no-select", false), CLICK_INTERVAL);
+				});
+				
+				return r;
+			},
 
 			notifyEvent: function(event, data) {
 				if(event === "columnsChanged") {
@@ -531,25 +569,64 @@ workaroundColumnAlignment(this);
 workaroundColumnAlignment(this);
 			},
 			isDate: function(value) {
-				return (value instanceof Date) || 
-					(value > 946706400000 && value < 1893477600000) ||
-					(typeof value === "string" && value.length === 24 && value.endsWith("Z"));
+				if(value instanceof Date) return true;
+
+				if((value > 946706400000 && value < 1893477600000)) return true;
+				
+				if(typeof value === "string") {
+					if(value.length === 24 && value.endsWith("Z")) {
+						return true;
+					}
+					if(value.length === 10 && /\d\d[\-\/]\d\d[\-\/]\d\d\d\d/.test(value)) {
+						return true;
+					}
+					if(value.length === 10 && /\d\d\d\d[\-\/]\d\d[\-\/]\d\d/.test(value)) {
+						return true;
+					}
+					if(value.endsWith(", JJJJ-MM-DD)")) {
+						return true;
+					}
+				}
 			},
 			formatDate: function(value, opts) {
+				let time = true;
 				if(!(value instanceof Date)) {
-					if(typeof value === "string" && value.match(/^\d+$/)) {
-						value = parseInt(value, 10);
+					if(typeof value === "string") {
+						if(value.endsWith(", JJJJ-MM-DD)")) {
+							value = value.substring(1, 11);
+							time = false;
+						}
+
+						if(value.match(/^\d+$/)) {
+							value = parseInt(value, 10);
+							
+						} else if(/\d\d[\-\/]\d\d[\-\/]\d\d\d\d/.test(value)) {
+							const d = value.charAt(2);
+							value = value.split(d).reverse().join("/");
+							time = false;
+						}
 					}
 					value = new Date(value);
 				}
 				
+				if(time === true) {
+					if(opts && opts.utc) {
+						return js.sf("%d/%02d/%02d %02d:%02d", value.getUTCFullYear(), value.getUTCMonth() + 1,
+								value.getUTCDate(), value.getUTCHours(), value.getUTCMinutes());
+					}
+					
+					return js.sf("%d/%02d/%02d %02d:%02d", value.getFullYear(), value.getMonth() + 1,
+							value.getDate(), value.getHours(), value.getMinutes());
+				}
+
 				if(opts && opts.utc) {
-					return js.sf("%d/%02d/%02d %02d:%02d", value.getUTCFullYear(), value.getUTCMonth() + 1,
-							value.getUTCDate(), value.getUTCHours(), value.getUTCMinutes());
+					return js.sf("%d/%02d/%02d", value.getUTCFullYear(), value.getUTCMonth() + 1,
+							value.getUTCDate());
 				}
 				
-				return js.sf("%d/%02d/%02d %02d:%02d", value.getFullYear(), value.getMonth() + 1,
-						value.getDate(), value.getHours(), value.getMinutes());
+				return js.sf("%d/%02d/%02d", value.getFullYear(), value.getMonth() + 1,
+						value.getDate());
+
 			},
 
 			getBodyWidth: function() {
@@ -675,6 +752,10 @@ workaroundColumnAlignment(this);
 				}
 				return null;
 			},
+			getColumnByNode: function(node) {
+				node = node.soup(".ListCell");
+				return node && this._columns.find(col => node.matches(col._rule.selectorText));
+			},
 			getColumnByName: function(name) {
 				for(var i = 0, l = this._columns.length; i < l; ++i) {
 					var c = this._columns[i];

package/src/ui/ListRow.js

@@ -33,6 +33,7 @@ define(function(require) {
 			_autoSize: "width",
 			_rowIndex: -1,
 			_list: null,
+			_draggable: false,
 
 			getInnerHtml: function() {
 				/** @overrides ../Control.prototype.getInnerHtml */

package/src/ui/Select.js

@@ -61,10 +61,10 @@ define(function(require) {
 			},
 			hasValue: function() { return !!this.getValue(); },
 			getValue: function() {
-				if(this.isLoading() || this.hasState("invalidated")) {
+				if(!this._node || this.isLoading() || this.hasState("invalidated")) {
 					return this._value;
 				}
-			    return this.nodeNeeded().value;
+			    return this._node ? this._node.value : this._value;
 			},
 			setValue: function(value, force) {
 				if(this.isLoading()) {
@@ -72,6 +72,8 @@ define(function(require) {
 				} else if(force || (this._value !== value || (this._node && this._node.value !== value))) {
 					this.nodeNeeded().value = (this._value = value);
 					this.dispatch("change");
+				} else {
+					this._value = value;
 				}
 			},
 			getOption: function() {