cavalion-vcl 1.1.90 → 1.1.92

package/CHANGELOG.md

@@ -1,3 +1,53 @@
+### `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
+
+- 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.92",
   "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,
@@ -303,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/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/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() {
 
@@ -16,10 +18,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 {
@@ -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/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,18 +78,20 @@ 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("");
+				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())));
 				}
@@ -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

@@ -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.setSelection(selection);
-                               this.dispatch("click", evt);
-                       }
+						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,18 +569,64 @@ workaroundColumnAlignment(this);
 workaroundColumnAlignment(this);
 			},
 			isDate: function(value) {
-				return (value instanceof Date) || (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) {
-				if(!(value instanceof Date)) value = new Date(value);
+				let time = true;
+				if(!(value instanceof Date)) {
+					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() {
@@ -668,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];
@@ -955,6 +1043,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 +1056,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 +1091,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, "-").

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() {