cavalion-vcl 1.1.86 → 1.1.90

package/.md

@@ -1,6 +1,8 @@
 * [CHANGELOG.md]() - [README.md]() -[SNIPPETS.md]() - [ISSUES.md]()
 * [.js]() - [src](:/)  - [package.json]()
 
+>> [ChatGPT suggested source for this document](CHATGPT.md)
+
 # cavalion-vcl / classes
 
 * [Factory](src/:.js) [.parse](src/Factory:.js) - [Reader](src/:.js) - [Writer](src/:.js)
@@ -8,7 +10,7 @@
 * **[Component](src/:.js)** [.query](src/Component:.js)
 	* **[Application](src/:.js)** - **[Action](src/:.js)**
 	* [data](src/:/) / [Array](src/data/:.js)
-		* [entities](src/:/) / [Query](src/entities/:.js) - [Instance](src/entities/:.js)
+	* [entities](src/:/) / [Query](src/entities/:.js) - [Instance](src/entities/:.js)
 	* **[Control](src/:.js)** < [ui](src/:/) / [Sizer](src/ui/:.js)
 		* [Element](src/ui/:.js) < [LargeIcon](src/ui/:.js) << _smdl - alert_
 			* [Input](src/ui/:.js) < [Checkbox](src/ui/:.js) - [Combobox](src/ui/:.js) - [DatePicker](src/ui/:.js) 
@@ -23,7 +25,7 @@
 				* [Popup](src/ui/:.js) - [Ace](src/ui/:.js) - [Console](src/ui/:.js)
 				* ( [Form](src/ui/:.js) - [FormContainer](src/ui/:.js) ) _where does onActive/Deactive go?_
 				* [List](src/ui/:.js) | [ListColumn](src/ui/:.js) - [ListBody](src/ui/:.js) - [ListFooter](src/ui/:.js) - [ListHeader](src/ui/:.js) - [ListRow](src/ui/:.js)
-				* [Tree](src/ui/:.js) - [Node](src/ui/:.js) [.closeable](src/ui/Node:.js)
+				* [Tree](src/ui/:.js) - **[Node](src/ui/:.js)** [.closeable](src/ui/Node:.js)
 
 # [prototypes](src/:/) `2022/04/17` 
 
@@ -55,6 +57,10 @@
 		* [Query](src/prototypes/ui/entities/:.js) - [.scaffold](src/prototypes/ui/entities/Query:.js) - [scaffold.future](src/prototypes/ui/entities/Query:.js)
 		* [QueryFilters](src/prototypes/ui/entities/:.js)
 
+# `2025/10/27`
+
+[![20251027-113521-QdwuC4](https://raw.githubusercontent.com/relluf/screenshots/master/uPic/202510/20251027-113521-QdwuC4.png)](https://chatgpt.com/codex/tasks/task_e_68ffae27cfd48326bd19cad3da60b005)
+
 # `2024/03/24` In the wild: veldapps-gds-devtools@2.0.16
 
 * Features dynamic content property :-p

package/CHANGELOG.md

@@ -1,3 +1,86 @@
+### `2025/10/27` 1.1.90 — List cell formatting & selection handling
+
+* Adds `_formatNumbers: true` and `_renderCellTitles: true` defaults in `List` prototype.
+* Exposes `formatDates`, `formatNumbers`, and `renderCellTitles` as public boolean properties.
+* Adds number formatting: when `typeof value === "number"` and `formatNumbers !== false`, applies `Math.f(value)`.
+* Breaking: numbers are now formatted by default; set `formatNumbers = false` to restore previous raw rendering.
+* Adds optional cell titles: when `renderCellTitles === true`, sets `cell.title` to the rendered value; clears title for empty cells.
+* Preserves date formatting via `formatDates` (still `true` by default).
+* Refactors click selection flow: moves `setSelection(selection)` and `dispatch("click")` outside conditional branches for consistent dispatch.
+* Maintains Ctrl/Cmd toggle and Shift range selection logic; cleans up selection state handling.
+* Adjusts array rendering: joins primitives; for object arrays shows `"%s, ... (%d)"`.
+* Keeps `textContent` vs `innerHTML` rendering path; updates `autoWidth` call unchanged.
+* In `ListRow`, increases selected-row specificity to `"&.selected.selected.selected"` to ensure highlight wins.
+
+### `2025/10/27` — onProcessPage
+
+* Adds `onProcessPage`-property to Query....
+
+### `2025/10/02` 1.1.89
+
+**Component: Enhances override handling and specialization utilities**
+
+* Improves `override` logic:
+  * Functions are now wrapped and bound via selectors as before.
+  * Non-function values fall back to direct assignment with a console warning.
+* Adds `chain(name, link)` helper to attach a method while preserving its inherited reference.
+* Refines event override: ensures `onSomeEvent` property-style handlers are set correctly, preparing for inherited chaining support.
+
+**Misc UX and robustness tweaks**
+
+* **Factory**: Only sets `Method.setInherited` when a previous value exists, avoiding undefined inheritance chains.
+* **Console**: `open-alphaview` now uses `on(evt)`; **Alt** key opens an exploratory selection (All/Roots/Trees/Lists/etc.), otherwise focuses the active Console.
+* **Glassy**: Disables runtime SVG “glass-distortion” injection and related `.distorted` rules (commented out).
+* **App.openform**: Supports `App.openform.prefix` for URI prefixing in both modal and non-modal flows; forwards `sender || this`.
+* **App.toast**: Adds `margin-bottom` animation to `.fade` for smoother collapse.
+* **App.v1**: Removes default zoom CSS class from the main FormContainer.
+
+### `2025/07/28`
+
+* **Improves `getSpecializer`**  
+  Split into `getSpecializer_raw` and `getSpecializer`, adding fallback logic using `Component.getFactories()` when no specializer is found.
+
+* **Improves event binding in `Component.js`**  
+  Wraps event handlers in a function (`f`) that retains the original `method` and applies `Method.setName` and `Method.setInherited` when appropriate.
+
+* **Cleans up `CssRules.js`**  
+  Removes empty JSDoc comments and adds commented-out placeholder logic for empty CSS selectors.
+
+* **Improves `Factory.js` property method handling**  
+  Calls `Method.setInherited` only when the property already has a value.
+
+* **Improves `open-alphaview` hotkey behavior**  
+  Differentiates between Alt + MetaCtrl+F3 and MetaCtrl+F3, showing an extended selection list (`All`, `Application`, `Roots`, etc.) when Alt is pressed.
+
+* **Improves toast transition**  
+  Adds `margin-bottom 250ms ease-in` to the `.fade` transition.
+
+* **Adds `H.i` shortcut in Console utilities**  
+  Enables quick opening of `devtools/Alphaview.csv` with a preselected object.
+
+### `2025/06/25` - 1.1.88
+
+* improves/refactores/cleans css styles
+* updates tree node styles prevents NOde to become selected when .close is clicked
+* sets z-index above Hover<>
+* introduces selection-hover class selects parent upon destroy while selected
+* generalizes sorting
+* improves H() to accept opts
+* reinstates (dedeprecates) Component.prototype.findOwner introduces Component.up(ctor) => findOwner
+* tweaks default zoom settings for mac and win (125% and 109%)
+* adds better support for Windows
+
+### `2025/06/08` - 1.1.87
+
+* enhances nodeNeeded to return node by name introduces qsan() as an alias to qsna() enhances click event handling
+* adds support reloading cavalion-blocks<>-components with click-gesture
+* finds #console more consistently and uses H()
+* fixes sorting issue
+* fixes an issue where getValue() was not consistent with _node.value
+* adds specific styles for input elements in Safari updates general styles
+* fixes the regexp-behaviour matching attribute values adds support for Action go()
+* introduces support for setInterval (like setTimeout) adds get/set/has/clear/Interval and clearIntervals
+
 ### `2025/04/03` - 1.1.86
 
 * 20250403 fixes bug in sorting by column (List) improves selecting console nodes with keyboard
@@ -88,7 +171,6 @@
 
 * **App.v1**: Hacking CSS - makes Hovers closing X hardly visible, appears when hovered
 
-
 ### `2023/10/06` - 1.1.79
 
 * **List**: Introduces options for behaviour of auto creating columns updates sorting updates auto-widthing updates the docs
@@ -103,7 +185,7 @@
 * comments
 * see previous comment
 * :root => isRootComponent enchances toasting Sizer selection
-* fixes reloadChildNodes-situation changes behavior of ui/Console, ignores <a>nchors, activates console on dblclick
+* fixes reloadChildNodes-situation changes behavior of ui/Console, ignores \<a>nchors, activates console on dblclick
 * adds css styles to App.v1 simplifies code
 * adds css styles to App.v1 simplifies code
 * adjusts Component:setTimeout to automatically name unnamed timeout fixes Control:selectVisible which was pretty buggy - noticeably when trying to make workspace console or navigator visible fixes Node:childNodesNeeded so that callback is made correctly (fixes Cmd+F10 #resource-focus as well)

package/CHATGPT.md

@@ -0,0 +1,47 @@
+# [prototypes][3] `2022/04/17` 
+
+> 
+* [cavalion-blocks][4]
+* [App][5] - <= _#window is instantiated here (weirdly not in .desktop)_
+	* [.console][5] << _hotkeys_ _probably deprecated_ 
+	* [.desktop][5] << _#client [ui/forms/Portal<>][9]_ _used at all?_
+	* [.framework7][5] - [.scaffold][5]
+	* [.v1][5] - <= _#client [ui/forms/Portal<>][9]_ _(used by cavalion-code and veldoffice-vcl-comps)_
+	* [.v2][5] - <= _Main<>_ 
+		* [.glassy][5] [.openform][5] [.toast][5]
+* [make][3] / [Build][7]
+* [ui][9]
+	* [Form][10] - [forms][9]
+		* [Home][11] [.list][11] [.tree][11]
+		* [Portal][9] - [View][9]
+		* [util][12] / [Console][13] - << _used by cavalion-code and veldoffice-MODULE-vcl_
+	* [controls][9] / [SizeHandle][15] - [Toolbar][15]
+	* [dygraphs][9] / [LineChart][17] - [Timeline][17] - _deprecated?_
+	* [entities][18]
+		* [AttributeInput][19] 
+			* [.@checkbox][19] - [.@input][19] - [.@textarea][19] - [.boolean][19] - [.date][19] - [.double][19]  
+			[.int][19] - [.long][19] - [.ref][19] - [.scaffold][19] - [.set][19] - [.string][19] - [.text][19] - [.timestamp][19]
+		* [Edit][20] - [.modal][20] - [.scaffold][20]
+		* [Home][18]
+		* [Instance][18]	
+		* [ModelNavigator][18]
+		* [Query][21] - [.scaffold][21] - [scaffold.future][21]
+		* [QueryFilters][18]
+
+##
+
+[3]: src/prototypes/:/
+[4]: src/prototypes/:.js
+[5]: src/prototypes/App:.js
+[7]: src/prototypes/make/:.js
+[9]: src/prototypes/ui/:/
+[10]: src/prototypes/ui/:.js
+[11]: src/prototypes/ui/forms/:.js
+[12]: src/prototypes/ui/forms/:/
+[13]: src/prototypes/ui/forms/util/:.js
+[15]: src/prototypes/ui/controls/:.js
+[17]: src/prototypes/ui/dygraphs/:.js
+[18]: src/prototypes/ui/entities/:.js
+[19]: src/prototypes/ui/entities/AttributeInput:.js
+[20]: src/prototypes/ui/entities/Edit:.js
+[21]: src/prototypes/ui/entities/Query:.js

package/README.md

@@ -1,14 +1,30 @@
-# Component
+* [Declarative Component Format.md](docs/:)
+* [Naming Conventions.md](docs/:)
+* ...
 
-# Control
+# cavalion-vcl
 
-* setCss() => this._cssRules.setRules(normalized(css))
+This packages is inspired by [Visual Component Library](https://en.wikipedia.org/wiki/Visual_Component_Library) and consists of a lightweight, modular UI framework built on top of a JavaScript component model. It is designed to support the development of browser-based applications. 
 
-# Panel
+## Component model
 
-# Bar
+## Declarative
 
-* align: top;
-* autoSize: height;
+In cavalion-vcl UIs are defined declaratively in JavaScript by structuring trees of arrays and objects. At runtime these definitions are parsed and  can be instantiated at will into live components. 
 
-# Tabs
+![20250618-124346-bwrIkP](https://raw.githubusercontent.com/relluf/screenshots/master/uPic/202506/20250618-124346-bwrIkP.png)
+
+A [declarative way to define user interfaces](docs/Declarative%20Component%20Format.md) using JavaScript-class-based components, supporting dynamic behavior, event handling and layout composition. 
+
+
+The framework emphasizes reusability and flexibility, allowing developers to extend or override behavior via multiple inheritance and lifecycle hooks. 
+
+It integrates well with tools like OpenLayers and AmCharts for building rich, data-driven applications.
+
+## Specializations
+
+For instance, consider a componentclass "veldapps/ListOf" and custom piece of might want to instantiate a list of projects by passing on the following
+
+["veldapps/ListOf<Project>"]
+
+## Designers

package/docs/Declarative Component Format.md

@@ -0,0 +1,225 @@
+* `inherits` can refer to a component-class or a component(-prototype)
+* `inherits` can refer to a "inherited"-component
+	* `#button-calculate` - specific calculation example
+* `inherits` can be implicit ("")
+* `inherits` can be specialized automatically by <>
+
+### Concepts
+
+* Factory: source, uri, root component, specializer, 
+* Component: properties, children, parent, owner, name
+* Component.query: qs(), qsa(), ud(), udr(), ...
+
+
+# Declarative Component Format
+
+Cavalion allows defining UI trees using **JavaScript arrays** that are parsed into live components by `Factory.parse`. This format supports **shorthand syntax**, **nesting**, and **metadata injection**, and is parsed at runtime into full component objects.
+
+### Core Syntax
+
+The declarative syntax supports several variations, all eventually parsed into this full form:
+
+> ```js
+{
+	inherits: ["vcl/ui/Panel"],  // or: className: "vcl/ui/Panel"
+	name: "mainPanel",
+	properties: { align: "client", css: "background: red;" },
+	children: [ /* ... nested components ... */ ]
+}
+
+
+#### Common shorthand
+
+> ```js
+["vcl/ui/Panel", "mainPanel", { align: "client" }, [
+	["vcl/ui/Button", "myButton", { content: "Click me!" }]
+]]
+
+Is parsed into:
+
+> ```js
+{
+	inherits: ["vcl/ui/Panel"],
+	name: "mainPanel",
+	properties: { align: "client" },
+	children: [
+		{
+			inherits: ["vcl/ui/Button"],
+			name: "myButton",
+			properties: { content: "Click me!" },
+			children: []
+		}
+	]
+}
+
+### How parsing works
+
+#### In `vcl/Factory.parse.js` and `blocks/Factory.parse.js`:
+
+* Both define a recursive parser function `$()` that:
+
+  * Normalizes input like `["Class", "name", { props }, [ children ]]`
+  * Defaults missing fields (`name`, `properties`, `children`)
+  * Converts short strings like `"vcl-panel"` into full `"vcl/ui/Panel"`
+  * Converts `"vcl/ui/Panel#main"` → `className = "vcl/ui/Panel", name = "main"`
+  * Supports `"@uri"` syntax (via `PropertyValue`) for lazy-loading properties
+
+#### Blocks factory:
+
+* Adds additional logic for `inherits`, replacing `<>` with real prototype URIs.
+* Also supports resolving blocks as base templates.
+
+## Describing VCL Components with Arrays
+
+Cavalion-VCL uses a flexible **array-based declarative syntax** to define components. These arrays are parsed by `vcl/Factory.parse` into a component tree. The parser normalizes various syntaxes into a unified structure.
+
+### Supported Formats
+
+#### 1. Full object structure (normalized form)
+
+```js
+{
+	inherits: ["vcl/ui/Button"],
+	name: "button-save",
+	properties: { content: "Save", align: "left" },
+	children: []
+}
+```
+
+This is the canonical form resulting from parsing.
+
+#### 2. Shorthand array form
+
+```js
+["vcl/ui/Button", "button-save", { content: "Save" }]
+```
+
+This gets expanded to the full object above. Fields can be omitted:
+
+```js
+["vcl/ui/Panel"]                // Only inherits
+["vcl/ui/Panel", "main"]        // Inherits and name
+["vcl/ui/Panel", { align: "top" }]  // Inherits and properties
+```
+
+#### 3. Children as fourth parameter
+
+```js
+["vcl/ui/Panel", "main", { align: "client" }, [
+	["vcl/ui/Label", "label-status", { content: "Status" }]
+]]
+```
+
+This represents a nested component tree.
+
+#### 4. Only children (used for inheritance cases)
+
+```js
+[["vcl/ui/Label", "label1"], ["vcl/ui/Label", "label2"]]
+```
+
+This is interpreted as children of a root panel when no explicit root is defined. The parser wraps this in a root component.
+
+#### 5. Special string-based syntax (less common)
+
+```js
+["vcl/ui/Panel#main"]
+```
+
+Is split into:
+
+* `className`: `"vcl/ui/Panel"`
+* `name`: `"main"`
+
+Also supported:
+
+* `"@some/uri"` → a `PropertyValue` (lazy-resolved)
+* `"vcl-panel"` → shorthand expanded to `vcl/ui/Panel`
+
+## The Root Component
+
+In `Factory.parse.js`, the **root-component** is the **top-level component** of the resulting UI tree. It is the entry point that wraps or defines the rest of the hierarchy.
+
+### Responsibilities of the root component:
+
+* Owns the component tree (via `.children`)
+* Defines the context for inherited prototypes or classes
+* Provides `uri`, `inherits`, and optionally a `className`
+
+### Automatic root wrapping
+
+If the source is a list of children (i.e., an array of arrays), the factory will automatically wrap them in a root component of class `vcl/Component` or another default.
+
+Example:
+
+```js
+// This is not a complete component
+[
+	["vcl/ui/Button", "btn-1"],
+	["vcl/ui/Button", "btn-2"]
+]
+```
+
+→ Is wrapped as:
+
+```js
+{
+	inherits: ["vcl/Component"],
+	children: [
+		{ inherits: ["vcl/ui/Button"], name: "btn-1", properties: {} },
+		{ inherits: ["vcl/ui/Button"], name: "btn-2", properties: {} }
+	]
+}
+```
+
+This wrapper becomes the **root**.
+
+## Summary
+
+| Form                              | Description                     |
+| --------------------------------- | ------------------------------- |
+| `["Class"]`                       | Class only                      |
+| `["Class", "name"]`               | Class and name                  |
+| `["Class", { props }]`            | Class with properties           |
+| `["Class", "name", { props }]`    | Full definition                 |
+| `["Class", ..., ..., [children]]` | With nested children            |
+| `[ [child1], [child2] ]`          | Implicit root wrapping          |
+| `@uri` or `#name`                 | Special PropertyValue reference |
+
+The root component ensures the component tree is properly anchored, parsed, and linked to a source URI and inheritance chain.
+
+
+## Best Practices (Initial Draft)
+
+Here are best practices based on how the parser and component model work:
+
+### Naming
+
+* Use **camelCase** for component `name` fields: `mainPanel`, `submitBtn`.
+* Use **meaningful names** for `id`s and `actions` to support `qs`/`ud` querying.
+
+### Structure
+
+* Prefer **flat, readable hierarchies** over deeply nested ones. If logic grows complex, extract nested arrays into separate `.js` files and `require` them.
+* Use folders to group component categories (`ui`, `actions`, `forms`, etc.)
+
+### Styling
+
+* Use `css: "..."` for inline styles that override existing class styles.
+* Avoid `style: {}` unless dynamically updated in JS.
+* For layout, standardize usage: `align: "client"`, `width: 200`, etc.
+
+### Localization
+
+* Wrap visible text using `locale("key")`, e.g., `{ content: locale("save_button") }`
+* Store localized strings in a separate dictionary module (e.g., `locale/nl.js`)
+
+### Customization
+
+* Use `vars: {}` to inject configuration into subcomponents
+* Use `onLoad`, `onRender`, `onDispatchChildEvent` for lifecycle hooks
+* Define `overrides` when extending functionality with existing base components
+
+### Reuse
+
+* Define shared UI fragments (e.g., button toolbars, sidebars) as standalone `.js` blocks and `require()` or `["./SubComponent"]` them into parents.

package/docs/Naming Conventions.md

@@ -0,0 +1,60 @@
+## Naming Conventions
+
+* **Use kebab-case**: lowercase words separated by dashes.
+* **Prefix with component type**: e.g. `button-close`, `input-username`, `tab-editor`.
+* **Be specific and semantic**: avoid `button1`, prefer `button-generate`.
+* **Avoid underscores and camelCase**: stick to `input-sample-id`, not `input_sampleId`.
+* **Consistent structure**: `[type]-[purpose]-[modifier]` (modifier optional).
+* **Names should be easily queryable**: via `qs()` or `ud()` in code.
+
+Standardized names improve clarity, maintainability, and tooling support in Cavalion’s declarative UI framework.
+
+
+### General Pattern
+
+Component names follow the pattern:
+
+```
+[type]-[specific-purpose]-[optional-modifier]
+```
+
+This structure provides clarity, supports query-based access via `qs()` or `ud()`, and ensures semantic meaning.
+
+### Examples
+
+| Type     | Name               | Meaning                                   |
+| -------- | ------------------ | ----------------------------------------- |
+| `button` | `button-close`     | A button intended to close something      |
+| `input`  | `input-username`   | Input field for username                  |
+| `group`  | `group-failure`    | A logical group of related UI elements    |
+| `tab`    | `tab-measurements` | A tab control labeled “Measurements”      |
+| `select` | `select-sample-1`  | A dropdown for selecting the first sample |
+
+---
+
+### Guidelines
+
+#### 1. Casing and separators
+
+* Use **kebab-case** (lowercase with dashes)
+* Avoid underscores (`_`) or camelCase
+* Keep naming consistent across modules
+
+#### 2. Type-prefixing
+
+Prefix names with the **component type** (e.g., `button-`, `group-`, `input-`) to:
+
+* Improve readability
+* Support filtering and pattern matching
+* Prevent naming collisions
+
+#### 3. Specificity
+
+* Use clear, purpose-based identifiers (`button-generate`, `input-stage-index`)
+* Avoid ambiguous or generic names (`button1`, `tab1`, etc.)
+
+#### 4. Modifiers
+
+* Append modifiers if needed to indicate context or variation
+* Examples: `input-weight-readonly`, `tab-config-alt`
+

package/package.json

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

package/src/Action.js

@@ -62,9 +62,10 @@ define(function (require) {
                     }
                 }
             },
-            go: function() {
-            	Action.prototype.go = Action.prototype.execute;
-            	return this.go.apply(this, arguments);
+            go: function(opts) {
+            	if(this.isEnabled() && this.isVisible()) {
+            		return this.execute.apply(this, arguments);
+            	}
             },
             execute: function (evt, sender) {
             	return this.onexecute(evt, sender);