pict-section-form 1.0.199 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -41
- package/docs/Comprehensions.md +16 -16
- package/docs/Comprehensions_Advanced.md +17 -17
- package/docs/Layouts.md +10 -10
- package/docs/Pict_Section_Form_Architecture.md +5 -21
- package/docs/README.md +5 -5
- package/docs/Solvers.md +4 -4
- package/docs/Templates.md +2 -21
- package/docs/_cover.md +7 -7
- package/docs/_sidebar.md +1 -1
- package/docs/_version.json +3 -3
- package/docs/diagrams/template-hierarchy-2.excalidraw +3677 -0
- package/docs/diagrams/template-hierarchy-2.mmd +19 -0
- package/docs/diagrams/template-hierarchy-2.svg +2 -0
- package/docs/diagrams/template-hierarchy.excalidraw +2389 -0
- package/docs/diagrams/template-hierarchy.mmd +12 -0
- package/docs/diagrams/template-hierarchy.svg +2 -0
- package/docs/diagrams/views.excalidraw +405 -0
- package/docs/diagrams/views.mmd +4 -0
- package/docs/diagrams/views.svg +2 -0
- package/docs/examples/README.md +6 -6
- package/docs/examples/change_tracking/README.md +30 -30
- package/docs/examples/change_tracking/change_tracking.js +3878 -55
- package/docs/examples/dynamic_analysis/README.md +30 -30
- package/docs/examples/dynamic_analysis/chart.umd.js +14 -0
- package/docs/examples/dynamic_analysis/dynamic_analysis_application.js +2081 -53
- package/docs/examples/gradebook/README.md +42 -42
- package/docs/examples/gradebook/gradebook_application.min.js +42 -1
- package/docs/examples/ndt_field_test/README.md +31 -31
- package/docs/examples/ndt_field_test/chart.umd.js +14 -0
- package/docs/examples/ndt_field_test/index.html +1 -1
- package/docs/examples/ndt_field_test/ndt_field_test.js +3878 -55
- package/docs/examples/scope_mathematics/README.md +33 -33
- package/docs/examples/scope_mathematics/scope_mathematics.js +3878 -55
- package/docs/examples/simple_table/README.md +28 -28
- package/docs/examples/simple_table/simple_tabular_application.min.js +42 -1
- package/docs/index.html +2 -2
- package/docs/input_providers/014-rich-text.md +134 -0
- package/docs/input_providers/015-diagram.md +139 -0
- package/docs/input_providers/README.md +10 -0
- package/docs/playground/manifest.json +5 -9
- package/docs/playground/runtime/pict-section-form.min.js +1 -1
- package/docs/playground/runtime/pict-section-modal.min.js +1 -1
- package/docs/playground/runtime/pict.min.js +1 -1
- package/docs/playground.md +12 -12
- package/docs/retold-catalog.json +40 -4
- package/docs/retold-keyword-index.json +11290 -8508
- package/package.json +14 -6
- package/source/Pict-Section-Form.js +11 -1
- package/source/providers/Pict-Provider-DynamicTabularData.js +186 -0
- package/source/providers/dynamictemplates/Pict-DynamicTemplates-DefaultFormTemplates.js +46 -0
- package/source/providers/inputs/Pict-Provider-Input-Diagram-CSS.js +93 -0
- package/source/providers/inputs/Pict-Provider-Input-Diagram.js +573 -0
- package/source/providers/inputs/Pict-Provider-Input-RichText-CSS.js +142 -0
- package/source/providers/inputs/Pict-Provider-Input-RichText.js +570 -0
- package/source/providers/inputs/util/Themeify-SVG.js +105 -0
- package/source/providers/layouts/Pict-Layout-Tabular.js +24 -0
- package/source/services/ManifestFactory.js +13 -4
- package/test/Pict-Provider-Input-Diagram-Integration_tests.js +171 -0
- package/test/Pict-Provider-Input-Diagram_tests.js +181 -0
- package/test/Pict-Provider-Input-RichText-Integration_tests.js +174 -0
- package/test/Pict-Provider-Input-RichText_tests.js +206 -0
- package/test/PictSectionForm-Tabular-Features_tests.js +176 -0
- package/test/Themeify-SVG_tests.js +116 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# PICT Forms Section
|
|
2
2
|
|
|
3
|
-
> **[
|
|
3
|
+
> **[Read the Pict-Section-Form Documentation](https://fable-retold.github.io/pict-section-form/)** - an interactive guide with live, runnable examples and the full API reference.
|
|
4
4
|
|
|
5
5
|
A Form Section with programmatically definable content. Simple, extensible
|
|
6
6
|
function APIs for adding groups, rows, entry elements and documentation or
|
|
@@ -264,38 +264,38 @@ Each section is represented within a manyfest. You could have one manyfest for
|
|
|
264
264
|
}
|
|
265
265
|
```
|
|
266
266
|
|
|
267
|
-
This [manyfest](https://github.com/
|
|
267
|
+
This [manyfest](https://github.com/fable-retold/manyfest) file describes a list
|
|
268
268
|
of application state elements. And intersects these data elements with how
|
|
269
269
|
they should be presented to the user in a form. This can work for any layout
|
|
270
270
|
of data in your application.
|
|
271
271
|
|
|
272
272
|
## Documentation
|
|
273
273
|
|
|
274
|
-
The complete documentation
|
|
274
|
+
The complete documentation - an interactive guide with live examples - is hosted at **[stevenvelozo.github.io/pict-section-form](https://fable-retold.github.io/pict-section-form/)**:
|
|
275
275
|
|
|
276
276
|
| Document | Description |
|
|
277
277
|
|----------|-------------|
|
|
278
|
-
| [Getting Started](https://
|
|
279
|
-
| [Architecture](https://
|
|
280
|
-
| [Configuration](https://
|
|
281
|
-
| [Input Types](https://
|
|
282
|
-
| [Templates](https://
|
|
283
|
-
| [Solvers](https://
|
|
284
|
-
| [Providers](https://
|
|
285
|
-
| [Layouts](https://
|
|
278
|
+
| [Getting Started](https://fable-retold.github.io/pict-section-form/#/page/Getting_Started) | Quick start guide for new users |
|
|
279
|
+
| [Architecture](https://fable-retold.github.io/pict-section-form/#/page/Pict_Section_Form_Architecture) | System architecture and design |
|
|
280
|
+
| [Configuration](https://fable-retold.github.io/pict-section-form/#/page/Configuration) | Complete configuration reference |
|
|
281
|
+
| [Input Types](https://fable-retold.github.io/pict-section-form/#/page/Input_Types) | Available input types |
|
|
282
|
+
| [Templates](https://fable-retold.github.io/pict-section-form/#/page/Templates) | Template customization and macros |
|
|
283
|
+
| [Solvers](https://fable-retold.github.io/pict-section-form/#/page/Solvers) | Expression solver system |
|
|
284
|
+
| [Providers](https://fable-retold.github.io/pict-section-form/#/page/Providers) | Provider reference |
|
|
285
|
+
| [Layouts](https://fable-retold.github.io/pict-section-form/#/page/Layouts) | Layout types and customization |
|
|
286
286
|
|
|
287
287
|
### Example Applications
|
|
288
288
|
|
|
289
|
-
Live, runnable example applications
|
|
289
|
+
Live, runnable example applications - click to open one in your browser:
|
|
290
290
|
|
|
291
291
|
| Example | Description |
|
|
292
292
|
|---------|-------------|
|
|
293
|
-
| [Simple Table](https://
|
|
294
|
-
| [Gradebook](https://
|
|
295
|
-
| [Scope Mathematics](https://
|
|
296
|
-
| [Change Tracking](https://
|
|
297
|
-
| [NDT Field Test](https://
|
|
298
|
-
| [Dynamic Analysis](https://
|
|
293
|
+
| [Simple Table](https://fable-retold.github.io/pict-section-form/examples/simple_table/) | Tabular layout, reference manifests, and dot-notation access into nested data |
|
|
294
|
+
| [Gradebook](https://fable-retold.github.io/pict-section-form/examples/gradebook/) | Stacked headers, row labels, dynamic columns, row/column selection, and sorting |
|
|
295
|
+
| [Scope Mathematics](https://fable-retold.github.io/pict-section-form/examples/scope_mathematics/) | Solvers that reach across sections and the global form scope |
|
|
296
|
+
| [Change Tracking](https://fable-retold.github.io/pict-section-form/examples/change_tracking/) | A change-detecting solver state machine with bidirectional recompute |
|
|
297
|
+
| [NDT Field Test](https://fable-retold.github.io/pict-section-form/examples/ndt_field_test/) | Offline persistence, pick lists, pass/fail row solvers, and charts |
|
|
298
|
+
| [Dynamic Analysis](https://fable-retold.github.io/pict-section-form/examples/dynamic_analysis/) | Runtime section injection, solver rewriting, and solver-driven charts |
|
|
299
299
|
|
|
300
300
|
### Input Providers
|
|
301
301
|
|
|
@@ -303,19 +303,19 @@ Specialized input handlers for different data types:
|
|
|
303
303
|
|
|
304
304
|
| Provider | Description |
|
|
305
305
|
|----------|-------------|
|
|
306
|
-
| [Select](https://
|
|
307
|
-
| [DateTime](https://
|
|
308
|
-
| [Markdown](https://
|
|
309
|
-
| [HTML](https://
|
|
310
|
-
| [PreciseNumber](https://
|
|
311
|
-
| [Link](https://
|
|
312
|
-
| [Templated](https://
|
|
313
|
-
| [TemplatedEntityLookup](https://
|
|
314
|
-
| [Chart](https://
|
|
315
|
-
| [EntityBundleRequest](https://
|
|
316
|
-
| [AutofillTriggerGroup](https://
|
|
317
|
-
| [TabGroupSelector](https://
|
|
318
|
-
| [TabSectionSelector](https://
|
|
306
|
+
| [Select](https://fable-retold.github.io/pict-section-form/#/page/input_providers/001-select) | Dropdown lists with static/dynamic options |
|
|
307
|
+
| [DateTime](https://fable-retold.github.io/pict-section-form/#/page/input_providers/002-datetime) | Date and time picker |
|
|
308
|
+
| [Markdown](https://fable-retold.github.io/pict-section-form/#/page/input_providers/003-markdown) | Markdown content display |
|
|
309
|
+
| [HTML](https://fable-retold.github.io/pict-section-form/#/page/input_providers/004-html) | Raw HTML content display |
|
|
310
|
+
| [PreciseNumber](https://fable-retold.github.io/pict-section-form/#/page/input_providers/005-precise-number) | Formatted numbers with precision |
|
|
311
|
+
| [Link](https://fable-retold.github.io/pict-section-form/#/page/input_providers/006-link) | Hyperlink inputs |
|
|
312
|
+
| [Templated](https://fable-retold.github.io/pict-section-form/#/page/input_providers/007-templated) | Dynamic template rendering |
|
|
313
|
+
| [TemplatedEntityLookup](https://fable-retold.github.io/pict-section-form/#/page/input_providers/008-templated-entity-lookup) | Entity fetch with template display |
|
|
314
|
+
| [Chart](https://fable-retold.github.io/pict-section-form/#/page/input_providers/009-chart) | Chart.js visualizations |
|
|
315
|
+
| [EntityBundleRequest](https://fable-retold.github.io/pict-section-form/#/page/input_providers/010-entity-bundle-request) | Cascading entity fetches |
|
|
316
|
+
| [AutofillTriggerGroup](https://fable-retold.github.io/pict-section-form/#/page/input_providers/011-autofill-trigger-group) | Trigger-based autofill |
|
|
317
|
+
| [TabGroupSelector](https://fable-retold.github.io/pict-section-form/#/page/input_providers/012-tab-group-selector) | Tab navigation for groups |
|
|
318
|
+
| [TabSectionSelector](https://fable-retold.github.io/pict-section-form/#/page/input_providers/013-tab-section-selector) | Tab navigation for sections |
|
|
319
319
|
|
|
320
320
|
## Installation
|
|
321
321
|
|
|
@@ -345,19 +345,19 @@ formApp.pict.views.PictFormMetacontroller.render();
|
|
|
345
345
|
|
|
346
346
|
Pict Section Form is part of the Pict ecosystem:
|
|
347
347
|
|
|
348
|
-
- [pict](https://github.com/
|
|
349
|
-
- [pict-view](https://github.com/
|
|
350
|
-
- [pict-provider](https://github.com/
|
|
351
|
-
- [manyfest](https://github.com/
|
|
352
|
-
- [fable](https://github.com/
|
|
348
|
+
- [pict](https://github.com/fable-retold/pict) - Core application framework
|
|
349
|
+
- [pict-view](https://github.com/fable-retold/pict-view) - View base class
|
|
350
|
+
- [pict-provider](https://github.com/fable-retold/pict-provider) - Provider base class
|
|
351
|
+
- [manyfest](https://github.com/fable-retold/manyfest) - Schema definitions
|
|
352
|
+
- [fable](https://github.com/fable-retold/fable) - Service infrastructure
|
|
353
353
|
|
|
354
354
|
## Related Packages
|
|
355
355
|
|
|
356
|
-
- [pict](https://github.com/
|
|
357
|
-
- [pict-view](https://github.com/
|
|
358
|
-
- [pict-provider](https://github.com/
|
|
359
|
-
- [pict-template](https://github.com/
|
|
360
|
-
- [manyfest](https://github.com/
|
|
356
|
+
- [pict](https://github.com/fable-retold/pict) - MVC application framework
|
|
357
|
+
- [pict-view](https://github.com/fable-retold/pict-view) - View base class
|
|
358
|
+
- [pict-provider](https://github.com/fable-retold/pict-provider) - Data provider base class
|
|
359
|
+
- [pict-template](https://github.com/fable-retold/pict-template) - Template engine
|
|
360
|
+
- [manyfest](https://github.com/fable-retold/manyfest) - Schema-driven object navigation
|
|
361
361
|
|
|
362
362
|
## License
|
|
363
363
|
|
package/docs/Comprehensions.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
# Comprehensions
|
|
2
2
|
|
|
3
3
|
The `addComprehensionEntity` solver function builds **multi-context, multi-entity
|
|
4
|
-
comprehensions** from form data
|
|
4
|
+
comprehensions** from form data - a JSON shape that can be inspected, diffed,
|
|
5
5
|
and pushed to a Meadow REST API via
|
|
6
|
-
[`meadow-integration load_comprehension`](https://github.
|
|
6
|
+
[`meadow-integration load_comprehension`](https://fable-retold.github.io/meadow-integration/).
|
|
7
7
|
|
|
8
8
|
Think of it as the "save side" of a form: a single function call lays down one
|
|
9
9
|
property of one record under one workflow context, and many calls compose into a
|
|
@@ -17,8 +17,8 @@ addComprehensionEntity(Context, Entity, GUID, Property, Value)
|
|
|
17
17
|
|
|
18
18
|
| Parameter | Type | Meaning |
|
|
19
19
|
|---|---|---|
|
|
20
|
-
| `Context` | string (manyfest address) | Workflow bucket
|
|
21
|
-
| `Entity` | string | The entity name
|
|
20
|
+
| `Context` | string (manyfest address) | Workflow bucket - `"OnSave"`, `"OnApprovalAction.Approve"`, etc. Dots create nested branches. |
|
|
21
|
+
| `Entity` | string | The entity name - `"Book"`, `"Recipe"`, `"Fruit"`. Opaque key (not parsed). |
|
|
22
22
|
| `GUID` | string | External GUID for the record. Opaque key (dots are NOT interpreted). |
|
|
23
23
|
| `Property` | string | The field to set on the record. Opaque key. |
|
|
24
24
|
| `Value` | any | The value to write. Strings, numbers, booleans, objects, arrays. |
|
|
@@ -42,7 +42,7 @@ Given these solvers on a Book form:
|
|
|
42
42
|
]
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
...the destination ends up looking like:
|
|
46
46
|
|
|
47
47
|
```json
|
|
48
48
|
{
|
|
@@ -70,8 +70,8 @@ Given these solvers on a Book form:
|
|
|
70
70
|
}
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
Every leaf in this tree is a Meadow-shaped record keyed by external GUID
|
|
74
|
-
exact format [`load_comprehension`](https://github.
|
|
73
|
+
Every leaf in this tree is a Meadow-shaped record keyed by external GUID - the
|
|
74
|
+
exact format [`load_comprehension`](https://fable-retold.github.io/meadow-integration/)
|
|
75
75
|
expects.
|
|
76
76
|
|
|
77
77
|
## Where the result lands
|
|
@@ -88,7 +88,7 @@ metacontroller:
|
|
|
88
88
|
this.pict.views.PictFormMetacontroller.comprehensionDestinationAddress = 'AppData.MyWorkflowComprehensions';
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
-
|
|
91
|
+
...or pass it in the metacontroller view options if you're constructing the
|
|
92
92
|
metacontroller manually:
|
|
93
93
|
|
|
94
94
|
```js
|
|
@@ -100,7 +100,7 @@ If the address resolves to nothing, the function materializes an object there on
|
|
|
100
100
|
the first write. If it resolves to a non-object scalar, the call logs a warning
|
|
101
101
|
and bails (it won't overwrite a number with an object).
|
|
102
102
|
|
|
103
|
-
## Basic example
|
|
103
|
+
## Basic example - flat OnSave context
|
|
104
104
|
|
|
105
105
|
```js
|
|
106
106
|
"Sections":
|
|
@@ -125,15 +125,15 @@ the three properties.
|
|
|
125
125
|
1. **Empty GUIDs bail.** If any of `Context`, `Entity`, `GUID`, or `Property`
|
|
126
126
|
resolves to `null`, `undefined`, or the empty string, the call logs a warning
|
|
127
127
|
and returns `undefined`. Recipes with an empty `RecipeName` will not silently
|
|
128
|
-
create a `""` bucket
|
|
128
|
+
create a `""` bucket - they just no-op until the user fills the name in.
|
|
129
129
|
2. **Solver ordinals.** Solvers run in ascending ordinal order. Put your
|
|
130
130
|
`addComprehensionEntity` calls *after* any solvers they depend on (e.g. after
|
|
131
131
|
the `TotalCalories = SUM(...)` aggregate they read from). The complex_table
|
|
132
|
-
example uses ordinals 200
|
|
132
|
+
example uses ordinals 200-220 to keep them after the default-ordinal compute
|
|
133
133
|
solvers.
|
|
134
134
|
3. **Re-solves overwrite.** Each solve re-runs every solver, so each
|
|
135
135
|
`addComprehensionEntity` call overwrites the property it wrote last time
|
|
136
|
-
with the current value. This is what you want
|
|
136
|
+
with the current value. This is what you want - the comprehension always
|
|
137
137
|
reflects the current form state.
|
|
138
138
|
4. **The destination is *not* cleared between solves.** If your form removes a
|
|
139
139
|
record (e.g. deletes a row from a grid), the previous comprehension for that
|
|
@@ -165,16 +165,16 @@ Or write to a file and push from a CLI:
|
|
|
165
165
|
npx meadow-integration load_comprehension out.json --prefix MYAPP
|
|
166
166
|
```
|
|
167
167
|
|
|
168
|
-
See [meadow-integration: Comprehensions](https://github.com/
|
|
169
|
-
for the full push semantics
|
|
168
|
+
See [meadow-integration: Comprehensions](https://github.com/fable-retold/meadow-integration/blob/main/docs/comprehensions.md)
|
|
169
|
+
for the full push semantics - GUID marshaling, foreign-key resolution, batch
|
|
170
170
|
upserts, idempotency.
|
|
171
171
|
|
|
172
172
|
## See also
|
|
173
173
|
|
|
174
|
-
- [Advanced patterns](Comprehensions_Advanced.md)
|
|
174
|
+
- [Advanced patterns](Comprehensions_Advanced.md) - mixing hashes and direct
|
|
175
175
|
addresses, computed contexts, per-row `MAP VAR` generation, customized
|
|
176
176
|
destinations.
|
|
177
|
-
- [Solvers](Solvers.md)
|
|
177
|
+
- [Solvers](Solvers.md) - full solver function reference.
|
|
178
178
|
- The Complex Table example (`example_applications/complex_table/Complex-Tabular-Application.js`)
|
|
179
179
|
builds a complete `RecipeWorkflowComprehensions` tree with `OnSave` and
|
|
180
180
|
`OnApprovalAction.{Submit,Approve}` contexts off the Recipe section and the
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# Comprehensions
|
|
1
|
+
# Comprehensions - Advanced patterns
|
|
2
2
|
|
|
3
3
|
This document goes deeper than [Comprehensions](Comprehensions.md):
|
|
4
4
|
|
|
5
|
-
- **Hash vs. address arguments**
|
|
5
|
+
- **Hash vs. address arguments** - when to write `BookGUID` (bare symbol),
|
|
6
6
|
`"AppData.Bundle.BookGUID"` (string address), `getvalue("...")` (explicit
|
|
7
7
|
lookup), and when to mix them.
|
|
8
|
-
- **Computed contexts**
|
|
8
|
+
- **Computed contexts** - `IF`/ternary results as the `Context` argument so a
|
|
9
9
|
single solver routes between `OnApprovalAction.Submit` and
|
|
10
10
|
`OnApprovalAction.Approve`.
|
|
11
11
|
- **Per-row generation** with `MAP VAR` over a recordset.
|
|
@@ -14,21 +14,21 @@ This document goes deeper than [Comprehensions](Comprehensions.md):
|
|
|
14
14
|
|
|
15
15
|
The complete worked example for everything here lives at
|
|
16
16
|
`example_applications/complex_table/Complex-Tabular-Application.js`
|
|
17
|
-
|
|
17
|
+
- if you only read one thing, read that file. This page explains the *why* behind
|
|
18
18
|
the patterns it uses.
|
|
19
19
|
|
|
20
|
-
## Argument resolution
|
|
20
|
+
## Argument resolution - hashes, addresses, and quoted strings
|
|
21
21
|
|
|
22
22
|
The solver expression parser treats each argument to `addComprehensionEntity`
|
|
23
23
|
the same way it would treat any other function argument:
|
|
24
24
|
|
|
25
25
|
| Argument form | What happens |
|
|
26
26
|
|---|---|
|
|
27
|
-
| `BookGUID` | **Bare symbol**
|
|
28
|
-
| `Record.GUID` / `AppData.Bundle.X` | **Dotted symbol**
|
|
29
|
-
| `"OnSave"` / `"Book"` | **Quoted string**
|
|
30
|
-
| `getvalue("AppData.X.Y")` | **Explicit lookup**
|
|
31
|
-
| `IF(...)` / `CONCAT(...)` | **Nested function call**
|
|
27
|
+
| `BookGUID` | **Bare symbol** - resolved from the form's manifest. Looked up first by descriptor hash, then by address against the marshal destination. |
|
|
28
|
+
| `Record.GUID` / `AppData.Bundle.X` | **Dotted symbol** - resolved as an address (the parser does NOT need quotes around addresses). |
|
|
29
|
+
| `"OnSave"` / `"Book"` | **Quoted string** - taken literally, no resolution. |
|
|
30
|
+
| `getvalue("AppData.X.Y")` | **Explicit lookup** - useful when you want to force address-resolution semantics on a value built up from other solvers. |
|
|
31
|
+
| `IF(...)` / `CONCAT(...)` | **Nested function call** - the inner function's return value becomes the argument. |
|
|
32
32
|
|
|
33
33
|
In practice you mix freely:
|
|
34
34
|
|
|
@@ -60,10 +60,10 @@ the parser to look the symbol up. The first three arguments are almost always
|
|
|
60
60
|
literal strings (Context, Entity name) plus one resolved value (GUID); the
|
|
61
61
|
fourth is almost always a literal Property; the fifth is almost always resolved.
|
|
62
62
|
|
|
63
|
-
## Computed contexts
|
|
63
|
+
## Computed contexts - routing with `IF`
|
|
64
64
|
|
|
65
65
|
The `Context` argument is a manyfest address. It's also just a string that the
|
|
66
|
-
function uses to walk a nested object
|
|
66
|
+
function uses to walk a nested object - which means a *computed* string works
|
|
67
67
|
fine. The complex_table example routes between `OnApprovalAction.Submit` and
|
|
68
68
|
`OnApprovalAction.Approve` based on a `Proprietary` boolean:
|
|
69
69
|
|
|
@@ -83,7 +83,7 @@ Both `Submit` and `Approve` branches sit under `OnApprovalAction`, which lets
|
|
|
83
83
|
downstream code key off `Object.keys(comprehension.OnApprovalAction)` to discover
|
|
84
84
|
which actions fired this solve.
|
|
85
85
|
|
|
86
|
-
The same trick scales to richer routing
|
|
86
|
+
The same trick scales to richer routing - e.g. context-per-environment:
|
|
87
87
|
|
|
88
88
|
```js
|
|
89
89
|
`addComprehensionEntity(
|
|
@@ -111,7 +111,7 @@ the row bound to a name you choose (`row` is the convention). Combined with
|
|
|
111
111
|
{ Ordinal: 210, Expression: `MAP VAR row FROM FruitData.FruityVice : addComprehensionEntity("OnSave", "Fruit", row.name, "Calories", row.nutritions.calories)` }
|
|
112
112
|
```
|
|
113
113
|
|
|
114
|
-
Inside the body, `row.X.Y` resolves against each row in turn
|
|
114
|
+
Inside the body, `row.X.Y` resolves against each row in turn - so you get
|
|
115
115
|
deep-property access without writing per-row solvers.
|
|
116
116
|
|
|
117
117
|
After the solve runs against the bundled FruityVice data, the comprehension at
|
|
@@ -141,8 +141,8 @@ row, you have two reasonable options:
|
|
|
141
141
|
|
|
142
142
|
## Customizing the destination
|
|
143
143
|
|
|
144
|
-
Each metacontroller has a `comprehensionDestinationAddress` property
|
|
145
|
-
mirroring the existing `viewMarshalDestination` knob
|
|
144
|
+
Each metacontroller has a `comprehensionDestinationAddress` property -
|
|
145
|
+
mirroring the existing `viewMarshalDestination` knob - that controls where
|
|
146
146
|
`addComprehensionEntity` writes. The default is `AppData.FormEntityComprehensions`.
|
|
147
147
|
|
|
148
148
|
### Option 1: in the application constructor
|
|
@@ -290,6 +290,6 @@ comprehensions -- reach for the meadow-integration toolchain directly:
|
|
|
290
290
|
- `meadow-integration comprehensionintersect` to merge two comprehensions.
|
|
291
291
|
- The `Comprehension` object's `Object.assign` semantics for in-code merges.
|
|
292
292
|
|
|
293
|
-
See [meadow-integration: Comprehensions](https://github.com/
|
|
293
|
+
See [meadow-integration: Comprehensions](https://github.com/fable-retold/meadow-integration/blob/main/docs/comprehensions.md)
|
|
294
294
|
for those tools. The solver helper is purpose-built for "as I edit this form,
|
|
295
295
|
build the comprehension that will save it."
|
package/docs/Layouts.md
CHANGED
|
@@ -170,7 +170,7 @@ an array of cells.
|
|
|
170
170
|
| Cell property | Type | Description |
|
|
171
171
|
|---------------|------|-------------|
|
|
172
172
|
| `Label` | string | Header text |
|
|
173
|
-
| `ColumnSpan` | number | Number of data columns this cell spans (default 1)
|
|
173
|
+
| `ColumnSpan` | number | Number of data columns this cell spans (default 1) - this is how you "cluster" |
|
|
174
174
|
| `CSSClass` | string | Optional class applied to the `<th>` |
|
|
175
175
|
|
|
176
176
|
```json
|
|
@@ -201,7 +201,7 @@ of the table (before the data columns). Each entry describes one label column.
|
|
|
201
201
|
| Property | Type | Description |
|
|
202
202
|
|----------|------|-------------|
|
|
203
203
|
| `Name` | string | Header text for the label column |
|
|
204
|
-
| `Template` | string | A Pict template resolved per row
|
|
204
|
+
| `Template` | string | A Pict template resolved per row - the row record is at `Record.Value`, the row index at `Record.Key` |
|
|
205
205
|
| `RowNumber` | boolean | When `true`, the label is the 1-based row number |
|
|
206
206
|
| `SourceAddress` | string | An app-data address of a pre-slotted array; element `[rowIndex]` is the label |
|
|
207
207
|
| `Cluster` | boolean | When `true`, consecutive equal labels collapse into one cell with `rowspan` |
|
|
@@ -217,14 +217,14 @@ Provide exactly one of `Template`, `RowNumber`, or `SourceAddress` per entry.
|
|
|
217
217
|
]
|
|
218
218
|
```
|
|
219
219
|
|
|
220
|
-
`Cluster: true` is what produces the "merged cell" look
|
|
220
|
+
`Cluster: true` is what produces the "merged cell" look - a column of repeated
|
|
221
221
|
values (e.g. a class section) renders as a single tall cell spanning its run
|
|
222
222
|
of rows. Any label column may be clustered; there is no "prime" label column.
|
|
223
223
|
|
|
224
224
|
### Dynamic Columns
|
|
225
225
|
|
|
226
226
|
`DynamicColumns` generates table columns at runtime from **another array** in
|
|
227
|
-
the form data
|
|
227
|
+
the form data - for example, one grade column per assignment. Each entry is a
|
|
228
228
|
generator:
|
|
229
229
|
|
|
230
230
|
| Property | Type | Description |
|
|
@@ -233,7 +233,7 @@ generator:
|
|
|
233
233
|
| `HashTemplate` | string | Template producing each column's unique descriptor hash |
|
|
234
234
|
| `NameTemplate` | string | Template producing each column's header text |
|
|
235
235
|
| `InformaryDataAddressTemplate` | string | Template producing the per-row data address the cell binds to |
|
|
236
|
-
| `HeaderGroupTemplate` | string | Optional
|
|
236
|
+
| `HeaderGroupTemplate` | string | Optional - template producing a cluster label; auto-adds a clustered super-header row |
|
|
237
237
|
| `DataType` | string | Data type for the generated descriptors |
|
|
238
238
|
| `PictForm` | object | `PictForm` block merged onto each generated descriptor (e.g. `InputType`) |
|
|
239
239
|
| `InsertAt` | string/object | `"End"` (default), `"Start"`, or `{ "After": "<hash>" }` |
|
|
@@ -256,7 +256,7 @@ Inside each template the **source row** is the record (`Record.Field`).
|
|
|
256
256
|
|
|
257
257
|
Dynamic columns are **non-destructive**: when a source row is removed the
|
|
258
258
|
generated column disappears, but the underlying row data at the
|
|
259
|
-
`InformaryDataAddress` is left untouched
|
|
259
|
+
`InformaryDataAddress` is left untouched - re-adding the source row brings the
|
|
260
260
|
column back with its data intact. The columns re-resolve automatically as the
|
|
261
261
|
source array changes; no manual refresh call is needed.
|
|
262
262
|
|
|
@@ -272,7 +272,7 @@ controls where:
|
|
|
272
272
|
|
|
273
273
|
| Value | Behavior |
|
|
274
274
|
|-------|----------|
|
|
275
|
-
| `"right"` | Default
|
|
275
|
+
| `"right"` | Default - controls in a trailing column |
|
|
276
276
|
| `"left"` | Controls in a leading column, before the data columns |
|
|
277
277
|
| `"hidden"` | No editing controls (read-only style table) |
|
|
278
278
|
|
|
@@ -283,7 +283,7 @@ controls where:
|
|
|
283
283
|
### Suppressing the Default Header Row
|
|
284
284
|
|
|
285
285
|
Set `SuppressDefaultColumnHeaderRow: true` to omit the prime column-name row
|
|
286
|
-
entirely
|
|
286
|
+
entirely - useful when custom `Headers` rows fully describe the columns.
|
|
287
287
|
|
|
288
288
|
### Selectable Rows & Columns
|
|
289
289
|
|
|
@@ -315,8 +315,8 @@ array lives in the marshalled form data it round-trips with save / load.
|
|
|
315
315
|
|
|
316
316
|
### Column Sorting
|
|
317
317
|
|
|
318
|
-
`ColumnSorting: true` (off by default) injects a clickable sort control
|
|
319
|
-
`<span>` carrying a sort SVG glyph from Pict's icon registry
|
|
318
|
+
`ColumnSorting: true` (off by default) injects a clickable sort control - a
|
|
319
|
+
`<span>` carrying a sort SVG glyph from Pict's icon registry - into every
|
|
320
320
|
prime header cell.
|
|
321
321
|
|
|
322
322
|
```json
|
|
@@ -32,12 +32,8 @@ The framework follows several key principles:
|
|
|
32
32
|
|
|
33
33
|
The view layer consists of two primary classes:
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
MC["PictFormMetacontroller<br/>• Manages multiple form sections<br/>• Orchestrates data marshaling<br/>• Controls solver execution<br/>• Handles initial bundle loading"]
|
|
38
|
-
DF["PictViewDynamicForm<br/>• Represents a single form section<br/>• Maintains section manifest instance<br/>• Handles input provider lifecycle<br/>• Manages group and row structures"]
|
|
39
|
-
MC -->|manages| DF
|
|
40
|
-
```
|
|
35
|
+
<!-- bespoke diagram: edit diagrams/views.mmd or .hints.json, then: npx pict-renderer-graph build modules/pict/pict-section-form/docs -->
|
|
36
|
+

|
|
41
37
|
|
|
42
38
|
**PictViewDynamicForm** extends `pict-view` and represents a single form section.
|
|
43
39
|
It maintains:
|
|
@@ -87,7 +83,7 @@ for export and editing.
|
|
|
87
83
|
`ManifestFactory` parses its descriptors into groups and rows, and
|
|
88
84
|
`MetatemplateGenerator` builds the layout templates.
|
|
89
85
|
3. The forms render to the DOM through the template hierarchy.
|
|
90
|
-
4. Solvers execute
|
|
86
|
+
4. Solvers execute - expressions resolve their values.
|
|
91
87
|
5. Input providers initialize the UI controls.
|
|
92
88
|
6. Event handlers attach for change detection.
|
|
93
89
|
|
|
@@ -113,20 +109,8 @@ to map form elements to their corresponding data addresses.
|
|
|
113
109
|
|
|
114
110
|
Templates are rendered in a strict hierarchy:
|
|
115
111
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
FC["Form Container"] --> S["Section (for each)"]
|
|
119
|
-
S --> SP["Section Prefix"]
|
|
120
|
-
S --> G["Group (for each)"]
|
|
121
|
-
S --> SX["Section Postfix"]
|
|
122
|
-
G --> GP["Group Prefix"]
|
|
123
|
-
G --> R["Row (for each)"]
|
|
124
|
-
G --> GX["Group Postfix"]
|
|
125
|
-
R --> RP["Row Prefix"]
|
|
126
|
-
R --> I["Input (for each)"]
|
|
127
|
-
R --> RX["Row Postfix"]
|
|
128
|
-
I --> IT["Input Template (by InputType or DataType)"]
|
|
129
|
-
```
|
|
112
|
+
<!-- bespoke diagram: edit diagrams/template-hierarchy.mmd or .hints.json, then: npx pict-renderer-graph build modules/pict/pict-section-form/docs -->
|
|
113
|
+

|
|
130
114
|
|
|
131
115
|
Templates support three levels of customization:
|
|
132
116
|
1. **View-specific** - Templates specific to a single view instance
|
package/docs/README.md
CHANGED
|
@@ -75,8 +75,8 @@ npm install pict-section-form
|
|
|
75
75
|
|
|
76
76
|
## Related Packages
|
|
77
77
|
|
|
78
|
-
- [pict](https://github.
|
|
79
|
-
- [pict-view](https://github.
|
|
80
|
-
- [pict-provider](https://github.
|
|
81
|
-
- [manyfest](https://github.
|
|
82
|
-
- [fable](https://github.
|
|
78
|
+
- [pict](https://fable-retold.github.io/pict/) - Core application framework
|
|
79
|
+
- [pict-view](https://fable-retold.github.io/pict-view/) - View base class
|
|
80
|
+
- [pict-provider](https://fable-retold.github.io/pict-provider/) - Provider base class
|
|
81
|
+
- [manyfest](https://fable-retold.github.io/manyfest/) - Schema definitions
|
|
82
|
+
- [fable](https://fable-retold.github.io/fable/) - Service infrastructure
|
package/docs/Solvers.md
CHANGED
|
@@ -213,10 +213,10 @@ aggregate values from arrays:
|
|
|
213
213
|
|
|
214
214
|
### Tabular Row & Column Styling
|
|
215
215
|
|
|
216
|
-
These functions style a whole row or whole column of a tabular group
|
|
216
|
+
These functions style a whole row or whole column of a tabular group - every
|
|
217
217
|
cell across or down. The highlight pair toggles a CSS class on a `1` / `0`
|
|
218
218
|
flag; the color pair sets (`1`) or clears (`0`) an inline background color.
|
|
219
|
-
None of them touch form data
|
|
219
|
+
None of them touch form data - they are purely presentational and re-applied
|
|
220
220
|
on each solve.
|
|
221
221
|
|
|
222
222
|
| Function | Description |
|
|
@@ -265,7 +265,7 @@ presentation.
|
|
|
265
265
|
The `Context` argument is treated as a manyfest address, so dotted contexts
|
|
266
266
|
like `"OnApprovalAction.Approve"` produce nested context branches. Successive
|
|
267
267
|
calls accumulate properties on the same record. See [Comprehensions](Comprehensions.md)
|
|
268
|
-
for the basic walkthrough and [Comprehensions
|
|
268
|
+
for the basic walkthrough and [Comprehensions - Advanced](Comprehensions_Advanced.md)
|
|
269
269
|
for computed contexts, `MAP VAR` patterns, and customized destinations.
|
|
270
270
|
|
|
271
271
|
#### Comprehension Example
|
|
@@ -422,4 +422,4 @@ Use in solvers:
|
|
|
422
422
|
- [Architecture](Pict_Section_Form_Architecture.md) - Solver system internals
|
|
423
423
|
- [Input Types](Input_Types.md) - Input visibility control
|
|
424
424
|
- [Comprehensions](Comprehensions.md) - `addComprehensionEntity` basics
|
|
425
|
-
- [Comprehensions
|
|
425
|
+
- [Comprehensions - Advanced](Comprehensions_Advanced.md) - Computed contexts, `MAP VAR`, customized destinations
|
package/docs/Templates.md
CHANGED
|
@@ -7,27 +7,8 @@ Templates can be customized at multiple levels to achieve any desired appearance
|
|
|
7
7
|
|
|
8
8
|
Templates are rendered in a strict hierarchical order:
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
F["Form Level"]
|
|
13
|
-
F --> FH["-Template-Form-Container-Header"]
|
|
14
|
-
F --> FWP["-Template-Form-Container-Wrap-Prefix"]
|
|
15
|
-
F --> SEC["For each Section"]
|
|
16
|
-
F --> FWX["-Template-Form-Container-Wrap-Postfix"]
|
|
17
|
-
SEC --> TFC["-Template-Form-Container"]
|
|
18
|
-
SEC --> WP["-Template-Wrap-Prefix"]
|
|
19
|
-
SEC --> WX["-Template-Wrap-Postfix"]
|
|
20
|
-
WP --> SP["-Template-Section-Prefix"]
|
|
21
|
-
WP --> GRP["For each Group"]
|
|
22
|
-
WP --> SX["-Template-Section-Postfix"]
|
|
23
|
-
GRP --> GP["-Template-Group-Prefix"]
|
|
24
|
-
GRP --> ROW["For each Row"]
|
|
25
|
-
GRP --> GX["-Template-Group-Postfix"]
|
|
26
|
-
ROW --> RP["-Template-Row-Prefix"]
|
|
27
|
-
ROW --> INP["For each Input"]
|
|
28
|
-
ROW --> RX["-Template-Row-Postfix"]
|
|
29
|
-
INP --> IT["-Template-Input-InputType-… or<br/>-Template-Input-DataType-… or<br/>-TabularTemplate-…"]
|
|
30
|
-
```
|
|
10
|
+
<!-- bespoke diagram: edit diagrams/template-hierarchy-2.mmd or .hints.json, then: npx pict-renderer-graph build modules/pict/pict-section-form/docs -->
|
|
11
|
+

|
|
31
12
|
|
|
32
13
|
## Template Resolution
|
|
33
14
|
|
package/docs/_cover.md
CHANGED
|
@@ -7,16 +7,16 @@
|
|
|
7
7
|
- Expression solvers for calculated fields and conditional logic
|
|
8
8
|
- Extensible input types and flexible templates
|
|
9
9
|
|
|
10
|
-
[GitHub](https://github.com/
|
|
10
|
+
[GitHub](https://github.com/fable-retold/pict-section-form)
|
|
11
11
|
[Get Started](#pict-section-form)
|
|
12
12
|
|
|
13
13
|
<!-- docuserve:examples:start -->
|
|
14
14
|
| Example | Complexity | Launch |
|
|
15
15
|
|---------|------------|--------|
|
|
16
|
-
| [Change Tracking](examples/change%5Ftracking/README.md) | Intermediate | [
|
|
17
|
-
| [Dynamic Analysis](examples/dynamic%5Fanalysis/README.md) | Advanced | [
|
|
18
|
-
| [Gradebook](examples/gradebook/README.md) | Intermediate | [
|
|
19
|
-
| [NDT Field Test](examples/ndt%5Ffield%5Ftest/README.md) | Advanced | [
|
|
20
|
-
| [Scope Mathematics](examples/scope%5Fmathematics/README.md) | Intermediate | [
|
|
21
|
-
| [Simple Table](examples/simple%5Ftable/README.md) | Basic | [
|
|
16
|
+
| [Change Tracking](examples/change%5Ftracking/README.md) | Intermediate | [Launch](examples/change%5Ftracking/index.html) |
|
|
17
|
+
| [Dynamic Analysis](examples/dynamic%5Fanalysis/README.md) | Advanced | [Launch](examples/dynamic%5Fanalysis/index.html) |
|
|
18
|
+
| [Gradebook](examples/gradebook/README.md) | Intermediate | [Launch](examples/gradebook/index.html) |
|
|
19
|
+
| [NDT Field Test](examples/ndt%5Ffield%5Ftest/README.md) | Advanced | [Launch](examples/ndt%5Ffield%5Ftest/index.html) |
|
|
20
|
+
| [Scope Mathematics](examples/scope%5Fmathematics/README.md) | Intermediate | [Launch](examples/scope%5Fmathematics/index.html) |
|
|
21
|
+
| [Simple Table](examples/simple%5Ftable/README.md) | Basic | [Launch](examples/simple%5Ftable/index.html) |
|
|
22
22
|
<!-- docuserve:examples:end -->
|
package/docs/_sidebar.md
CHANGED
package/docs/_version.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"Name": "pict-section-form",
|
|
3
|
-
"Version": "1.0.
|
|
3
|
+
"Version": "1.0.199",
|
|
4
4
|
"Description": "Pict dynamic form sections",
|
|
5
|
-
"GeneratedAt": "2026-
|
|
6
|
-
"GitCommit": "
|
|
5
|
+
"GeneratedAt": "2026-06-04T23:17:17.789Z",
|
|
6
|
+
"GitCommit": "75962c6"
|
|
7
7
|
}
|