@ea-lab/reactive-json-docs 0.7.0 → 1.0.0-alpha.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/package.json +7 -5
- package/public/rjbuild/docs/advanced-concepts/data-processors.md +2 -2
- package/public/rjbuild/docs/advanced-concepts/plugins/component-development-guide-llm.md +14 -14
- package/public/rjbuild/docs/advanced-concepts/plugins/plugin-system.md +47 -1
- package/public/rjbuild/docs/advanced-concepts/plugins/plugin-system.yaml +53 -1
- package/public/rjbuild/docs/core/action/HashChangeListener.md +1 -1
- package/public/rjbuild/docs/core/action/HashChangeListener.yaml +24 -6
- package/public/rjbuild/docs/core/action/Hide.md +2 -2
- package/public/rjbuild/docs/core/action/Hide.yaml +4 -3
- package/public/rjbuild/docs/core/action/MessageListener.md +4 -4
- package/public/rjbuild/docs/core/action/MessageListener.yaml +18 -6
- package/public/rjbuild/docs/core/action/ReactOnEvent.md +4 -4
- package/public/rjbuild/docs/core/action/ReactOnEvent.yaml +4 -4
- package/public/rjbuild/docs/core/action/Redirect.md +2 -2
- package/public/rjbuild/docs/core/action/Redirect.yaml +8 -2
- package/public/rjbuild/docs/core/action/VisuallyHide.md +2 -2
- package/public/rjbuild/docs/core/action/VisuallyHide.yaml +2 -2
- package/public/rjbuild/docs/core/dataMapping/simpleMapping.md +5 -5
- package/public/rjbuild/docs/core/dataMapping/simpleMapping.yaml +90 -60
- package/public/rjbuild/docs/core/element/debug/VariablesDebug.md +59 -0
- package/public/rjbuild/docs/core/element/debug/VariablesDebug.yaml +71 -0
- package/public/rjbuild/docs/core/element/form/Input.md +307 -0
- package/public/rjbuild/docs/core/element/form/Input.yaml +572 -0
- package/public/rjbuild/docs/core/element/html/FolderSortableTree.yaml +40 -12
- package/public/rjbuild/docs/core/element/html/FormatNumeral.yaml +21 -7
- package/public/rjbuild/docs/core/element/html/Html.yaml +26 -9
- package/public/rjbuild/docs/core/element/html/LabelFromValue.yaml +25 -8
- package/public/rjbuild/docs/core/element/html/PreformattedMarkup.yaml +23 -7
- package/public/rjbuild/docs/core/element/html/SortableTreeItemCollapseButton.yaml +7 -6
- package/public/rjbuild/docs/core/element/html/SyntaxHighlighter.yaml +56 -20
- package/public/rjbuild/docs/core/element/special/Count.md +8 -10
- package/public/rjbuild/docs/core/element/special/Count.yaml +121 -40
- package/public/rjbuild/docs/core/element/special/DataFilter.md +40 -41
- package/public/rjbuild/docs/core/element/special/DataFilter.yaml +197 -81
- package/public/rjbuild/docs/core/element/special/DelayedActions.md +13 -15
- package/public/rjbuild/docs/core/element/special/DelayedActions.yaml +32 -13
- package/public/rjbuild/docs/core/element/special/PageControls.md +8 -10
- package/public/rjbuild/docs/core/element/special/PageControls.yaml +9 -8
- package/public/rjbuild/docs/core/element/special/Phantom.md +9 -11
- package/public/rjbuild/docs/core/element/special/Phantom.yaml +22 -9
- package/public/rjbuild/docs/core/element/special/ReactiveJsonSubroot.md +7 -9
- package/public/rjbuild/docs/core/element/special/ReactiveJsonSubroot.yaml +167 -49
- package/public/rjbuild/docs/core/element/special/Switch.md +36 -38
- package/public/rjbuild/docs/core/element/special/Switch.yaml +68 -40
- package/public/rjbuild/docs/core/example/html.md +2 -2
- package/public/rjbuild/docs/core/example/html.yaml +2 -3
- package/public/rjbuild/docs/core/example/native-html-forms.md +245 -0
- package/public/rjbuild/docs/core/example/native-html-forms.yaml +393 -0
- package/public/rjbuild/docs/core/reaction/addData.md +17 -5
- package/public/rjbuild/docs/core/reaction/addData.yaml +70 -11
- package/public/rjbuild/docs/core/reaction/fetchData.md +1 -2
- package/public/rjbuild/docs/core/reaction/fetchData.yaml +84 -19
- package/public/rjbuild/docs/core/reaction/moveData.md +0 -4
- package/public/rjbuild/docs/core/reaction/moveData.yaml +28 -6
- package/public/rjbuild/docs/core/reaction/postMessage.md +0 -4
- package/public/rjbuild/docs/core/reaction/postMessage.yaml +29 -6
- package/public/rjbuild/docs/core/reaction/redirectNow.md +0 -4
- package/public/rjbuild/docs/core/reaction/redirectNow.yaml +10 -3
- package/public/rjbuild/docs/core/reaction/removeData.md +2 -6
- package/public/rjbuild/docs/core/reaction/removeData.yaml +40 -2
- package/public/rjbuild/docs/core/reaction/setClipboardData.md +0 -4
- package/public/rjbuild/docs/core/reaction/setClipboardData.yaml +10 -3
- package/public/rjbuild/docs/core/reaction/setData.md +18 -8
- package/public/rjbuild/docs/core/reaction/setData.yaml +43 -11
- package/public/rjbuild/docs/core/reaction/submitData.md +2 -3
- package/public/rjbuild/docs/core/reaction/submitData.yaml +43 -7
- package/public/rjbuild/docs/core/reaction/triggerEvent.md +0 -4
- package/public/rjbuild/docs/core/reaction/triggerEvent.yaml +25 -11
- package/public/rjbuild/docs/docs-components/Mermaid.md +254 -0
- package/public/rjbuild/docs/docs-components/Mermaid.yaml +339 -0
- package/public/rjbuild/docs/docs-components/index.yaml +1 -0
- package/public/rjbuild/docs/getting-started/actions.md +1 -1
- package/public/rjbuild/docs/index.yaml +2 -1
- package/public/rjbuild/docs/install.md +26 -29
- package/public/rjbuild/docs/install.yaml +4 -10
- package/public/rjbuild/docs/integration/bootstrap/action/Popover.md +26 -0
- package/public/rjbuild/docs/{core → integration/bootstrap}/action/Popover.yaml +28 -5
- package/public/rjbuild/docs/{core → integration/bootstrap}/action/Tooltip.md +4 -4
- package/public/rjbuild/docs/{core → integration/bootstrap}/action/Tooltip.yaml +16 -3
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/CheckBoxField.md +8 -8
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/CheckBoxField.yaml +40 -8
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/DateField.md +5 -5
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/DateField.yaml +27 -5
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/NumberField.md +7 -7
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/NumberField.yaml +32 -7
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/SelectField.md +9 -9
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/SelectField.yaml +46 -9
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextAreaField.md +8 -8
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextAreaField.yaml +36 -8
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextField.md +8 -8
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextField.yaml +38 -8
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/formElementsCommon.md +2 -4
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/index.md +0 -2
- package/public/rjbuild/docs/integration/bootstrap/element/html/AccordionItem.md +69 -0
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/html/AccordionItem.yaml +19 -7
- package/public/rjbuild/docs/integration/bootstrap/element/html/Modal.md +127 -0
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/html/Modal.yaml +35 -12
- package/public/rjbuild/docs/integration/bootstrap/element/html/Tabs.md +150 -0
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/html/Tabs.yaml +24 -15
- package/public/rjbuild/docs/integration/bootstrap/element/html/index.md +13 -0
- package/public/rjbuild/docs/{core → integration/bootstrap}/element/special/BootstrapElement.md +4 -6
- package/public/rjbuild/docs/integration/bootstrap/element/special/BootstrapElement.yaml +29 -0
- package/public/rjbuild/docs/integration/bootstrap/element/special/index.md +19 -0
- package/public/rjbuild/docs/integration/bootstrap/example/website.md +41 -0
- package/public/rjbuild/docs/integration/bootstrap/overview.md +69 -0
- package/public/rjbuild/docs/integration/bootstrap/overview.yaml +87 -0
- package/public/rjbuild/docs/core/action/Popover.md +0 -26
- package/public/rjbuild/docs/core/element/special/BootstrapElement.yaml +0 -18
- /package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/index.yaml +0 -0
- /package/public/rjbuild/docs/{core → integration/bootstrap}/example/accordion.md +0 -0
- /package/public/rjbuild/docs/{core → integration/bootstrap}/example/accordion.yaml +0 -0
- /package/public/rjbuild/docs/{core → integration/bootstrap}/example/dynamic-content.md +0 -0
- /package/public/rjbuild/docs/{core → integration/bootstrap}/example/dynamic-content.yaml +0 -0
- /package/public/rjbuild/docs/{core → integration/bootstrap}/example/website.yaml +0 -0
- /package/public/rjbuild/docs/{chartjs → integration/chartjs}/components.yaml +0 -0
- /package/public/rjbuild/docs/{chartjs → integration/chartjs}/overview.yaml +0 -0
|
@@ -3,21 +3,50 @@ renderView:
|
|
|
3
3
|
content: |
|
|
4
4
|
# fetchData
|
|
5
5
|
|
|
6
|
-
fetchData is a reaction that allows making HTTP requests to a server. It operates in
|
|
6
|
+
`fetchData` is a reaction that allows making HTTP requests to a server. It operates in multiple modes, depending on configuration values.
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
|
|
12
|
-
**Important**: Dynamic URLs are not supported. URLs must be static strings.
|
|
8
|
+
- Supports configurable HTTP methods (GET by default for backward compatibility)
|
|
9
|
+
- Only one request can be active at a time
|
|
10
|
+
- The URL is evaluated via the template system before sending, but must resolve to a static string
|
|
11
|
+
- The response can refresh the app (default) or be ignored
|
|
13
12
|
|
|
14
13
|
## Properties
|
|
15
|
-
- `url` (string, required): The URL to call (must be a static string, dynamic URLs are not supported)
|
|
16
|
-
- `httpMethod` (string, optional): The HTTP method to use (default: "get"). Supports: get, post, put, patch, delete, etc.
|
|
17
|
-
- `refreshAppOnResponse` (boolean, optional): If true (default), the response will update the application. If false, the response is ignored (webhook mode).
|
|
18
|
-
- `updateOnlyData` (boolean, optional): When true and `refreshAppOnResponse` is true, only updates the data section instead of replacing the entire RjBuild. Preserves templates and renderView. Default: false.
|
|
19
|
-
- `updateDataAtLocation` (string, optional): When `updateOnlyData` is true, specifies where to place the response data using template path syntax (e.g., "~~.userProfile", "~.config.settings"). If not specified, replaces the entire data object.
|
|
20
14
|
|
|
15
|
+
- type: DefinitionList
|
|
16
|
+
content:
|
|
17
|
+
- term:
|
|
18
|
+
code: httpMethod
|
|
19
|
+
after: "(string, optional)"
|
|
20
|
+
details:
|
|
21
|
+
type: Markdown
|
|
22
|
+
content: "The HTTP method to use (default: \"get\"). Supports: get, post, put, patch, delete, etc."
|
|
23
|
+
- term:
|
|
24
|
+
code: refreshAppOnResponse
|
|
25
|
+
after: "(boolean, optional)"
|
|
26
|
+
details:
|
|
27
|
+
type: Markdown
|
|
28
|
+
content: "If true (default), the response will update the application. If false, the response is ignored (webhook mode)"
|
|
29
|
+
- term:
|
|
30
|
+
code: updateDataAtLocation
|
|
31
|
+
after: "(string, optional)"
|
|
32
|
+
details:
|
|
33
|
+
type: Markdown
|
|
34
|
+
content: "When `updateOnlyData` is true, specifies where to place the response data using template path syntax (e.g., \"~~.userProfile\", \"~.config.settings\"). If not specified, replaces the entire data object"
|
|
35
|
+
- term:
|
|
36
|
+
code: updateOnlyData
|
|
37
|
+
after: "(boolean, optional)"
|
|
38
|
+
details:
|
|
39
|
+
type: Markdown
|
|
40
|
+
content: "When true and `refreshAppOnResponse` is true, only updates the data section instead of replacing the entire RjBuild. Preserves templates and renderView. Default: false"
|
|
41
|
+
- term:
|
|
42
|
+
code: url
|
|
43
|
+
after: "(string, required)"
|
|
44
|
+
details:
|
|
45
|
+
type: Markdown
|
|
46
|
+
content: "The URL to call (must be a static string, dynamic URLs are not supported)"
|
|
47
|
+
|
|
48
|
+
- type: Markdown
|
|
49
|
+
content: |
|
|
21
50
|
## Behavior
|
|
22
51
|
- Supports configurable HTTP methods (GET by default for backward compatibility)
|
|
23
52
|
- Only one request can be active at a time
|
|
@@ -176,12 +205,22 @@ renderView:
|
|
|
176
205
|
content:
|
|
177
206
|
- type: div
|
|
178
207
|
attributes:
|
|
179
|
-
|
|
208
|
+
style:
|
|
209
|
+
width: "48%"
|
|
210
|
+
display: "inline-block"
|
|
211
|
+
verticalAlign: "top"
|
|
212
|
+
marginRight: "2%"
|
|
180
213
|
content:
|
|
181
214
|
- type: BsButton
|
|
182
215
|
content: "Complete Data Replacement"
|
|
183
216
|
attributes:
|
|
184
|
-
|
|
217
|
+
style:
|
|
218
|
+
padding: "8px 16px"
|
|
219
|
+
margin: "8px 0"
|
|
220
|
+
border: "1px solid #007bff"
|
|
221
|
+
borderRadius: "4px"
|
|
222
|
+
cursor: "pointer"
|
|
223
|
+
width: "100%"
|
|
185
224
|
actions:
|
|
186
225
|
- what: fetchData
|
|
187
226
|
on: click
|
|
@@ -197,12 +236,22 @@ renderView:
|
|
|
197
236
|
|
|
198
237
|
- type: div
|
|
199
238
|
attributes:
|
|
200
|
-
|
|
239
|
+
style:
|
|
240
|
+
width: "48%"
|
|
241
|
+
display: "inline-block"
|
|
242
|
+
verticalAlign: "top"
|
|
243
|
+
marginRight: "2%"
|
|
201
244
|
content:
|
|
202
245
|
- type: BsButton
|
|
203
246
|
content: "Targeted Data Update"
|
|
204
247
|
attributes:
|
|
205
|
-
|
|
248
|
+
style:
|
|
249
|
+
padding: "8px 16px"
|
|
250
|
+
margin: "8px 0"
|
|
251
|
+
border: "1px solid #6c757d"
|
|
252
|
+
borderRadius: "4px"
|
|
253
|
+
cursor: "pointer"
|
|
254
|
+
width: "100%"
|
|
206
255
|
actions:
|
|
207
256
|
- what: fetchData
|
|
208
257
|
on: click
|
|
@@ -224,7 +273,11 @@ renderView:
|
|
|
224
273
|
- type: BsButton
|
|
225
274
|
content: "🔄 Reset to Initial Data"
|
|
226
275
|
attributes:
|
|
227
|
-
|
|
276
|
+
style:
|
|
277
|
+
padding: "8px 16px"
|
|
278
|
+
border: "1px solid #6c757d"
|
|
279
|
+
borderRadius: "4px"
|
|
280
|
+
cursor: "pointer"
|
|
228
281
|
actions:
|
|
229
282
|
- what: fetchData
|
|
230
283
|
on: click
|
|
@@ -240,7 +293,11 @@ renderView:
|
|
|
240
293
|
content:
|
|
241
294
|
- type: div
|
|
242
295
|
attributes:
|
|
243
|
-
|
|
296
|
+
style:
|
|
297
|
+
width: "32%"
|
|
298
|
+
display: "inline-block"
|
|
299
|
+
verticalAlign: "top"
|
|
300
|
+
marginRight: "1%"
|
|
244
301
|
content:
|
|
245
302
|
- type: h6
|
|
246
303
|
content: "👤 User Profile"
|
|
@@ -266,7 +323,11 @@ renderView:
|
|
|
266
323
|
|
|
267
324
|
- type: div
|
|
268
325
|
attributes:
|
|
269
|
-
|
|
326
|
+
style:
|
|
327
|
+
width: "32%"
|
|
328
|
+
display: "inline-block"
|
|
329
|
+
verticalAlign: "top"
|
|
330
|
+
marginRight: "1%"
|
|
270
331
|
content:
|
|
271
332
|
- type: h6
|
|
272
333
|
content: "⚙️ Settings"
|
|
@@ -292,7 +353,11 @@ renderView:
|
|
|
292
353
|
|
|
293
354
|
- type: div
|
|
294
355
|
attributes:
|
|
295
|
-
|
|
356
|
+
style:
|
|
357
|
+
width: "32%"
|
|
358
|
+
display: "inline-block"
|
|
359
|
+
verticalAlign: "top"
|
|
360
|
+
marginRight: "1%"
|
|
296
361
|
content:
|
|
297
362
|
- type: h6
|
|
298
363
|
content: "📊 Status"
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
# Reaction: moveData
|
|
2
2
|
|
|
3
|
-
## Introduction
|
|
4
|
-
|
|
5
3
|
The `moveData` reaction changes the position of an element within an array in the global data context. This is particularly useful for reordering items in a list, for example, moving an item up or down. Like `removeData`, it can operate in `path` mode or `target` mode.
|
|
6
4
|
|
|
7
5
|
## Properties
|
|
8
6
|
|
|
9
|
-
- `what` (string, required): The name of the reaction, which must be `moveData`.
|
|
10
|
-
- `on` (string, required): The name of the event that triggers the reaction.
|
|
11
7
|
- `path` (string, optional): The path to the array element to move. Required if `target` is not used.
|
|
12
8
|
- `target` (string, optional): If set to `currentTemplateData`, the reaction will target the data associated with the current template item.
|
|
13
9
|
- `parentLevel` (number, optional): Used with `target: 'currentTemplateData'`. Specifies how many levels to go up from the current data path to find the element to move.
|
|
@@ -7,13 +7,35 @@ renderView:
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
- type: DefinitionList
|
|
11
|
+
content:
|
|
12
|
+
- term:
|
|
13
|
+
code: path
|
|
14
|
+
after: "(string, optional)"
|
|
15
|
+
details:
|
|
16
|
+
type: Markdown
|
|
17
|
+
content: "The path to the array element to move. Required if `target` is not used"
|
|
18
|
+
- term:
|
|
19
|
+
code: target
|
|
20
|
+
after: "(string, optional)"
|
|
21
|
+
details:
|
|
22
|
+
type: Markdown
|
|
23
|
+
content: "If set to `currentTemplateData`, the reaction will target the data associated with the current template item"
|
|
24
|
+
- term:
|
|
25
|
+
code: parentLevel
|
|
26
|
+
after: "(number, optional)"
|
|
27
|
+
details:
|
|
28
|
+
type: Markdown
|
|
29
|
+
content: "Used with `target: 'currentTemplateData'`. Specifies how many levels to go up from the current data path to find the element to move"
|
|
30
|
+
- term:
|
|
31
|
+
code: increment
|
|
32
|
+
after: "(integer, required)"
|
|
33
|
+
details:
|
|
34
|
+
type: Markdown
|
|
35
|
+
content: "The number of positions to move the element. A positive integer moves it down (towards the end of the array), and a negative integer moves it up (towards the beginning)"
|
|
16
36
|
|
|
37
|
+
- type: Markdown
|
|
38
|
+
content: |
|
|
17
39
|
## Behavior
|
|
18
40
|
|
|
19
41
|
- When triggered, `moveData` repositions an element within an array.
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
# Reaction: postMessage
|
|
2
2
|
|
|
3
|
-
## Introduction
|
|
4
|
-
|
|
5
3
|
The `postMessage` reaction sends a message to another window or frame using the standard `window.postMessage` Web API. This is useful for communication between your Reactive-JSON application and a parent window (if embedded in an iframe) or for other cross-origin communication scenarios.
|
|
6
4
|
|
|
7
5
|
## Properties
|
|
8
6
|
|
|
9
|
-
- `what` (string, required): The name of the reaction, must be `postMessage`.
|
|
10
|
-
- `on` (string, required): The event that triggers the reaction (e.g., `click`, `change`).
|
|
11
7
|
- `message` (any, required): The data to send as the message. This value is evaluated and can be any serializable type (string, number, object, array).
|
|
12
8
|
- `messageTarget` (string, optional): The target window for the message. Can be `'parent'` (the default) or `'self'`.
|
|
13
9
|
- `targetOrigin` (string, optional): Specifies the origin of the target window for security. Defaults to the current window's origin (`window.location.origin`). Use `"*"` for any origin, but be aware of the security implications.
|
|
@@ -17,13 +17,36 @@ renderView:
|
|
|
17
17
|
- type: Markdown
|
|
18
18
|
content: |
|
|
19
19
|
## Properties
|
|
20
|
-
- `what` (string, required): The name of the reaction, must be `postMessage`.
|
|
21
|
-
- `on` (string, required): The event that triggers the reaction (e.g., `click`, `change`).
|
|
22
|
-
- `message` (any, required): The data to send as the message. This value is evaluated and can be any serializable type (string, number, object, array).
|
|
23
|
-
- `messageTarget` (string, optional): The target window for the message. Can be `'parent'` (the default) or `'self'`.
|
|
24
|
-
- `targetOrigin` (string, optional): Specifies the origin of the target window for security. Defaults to the current window's origin (`window.location.origin`). Use `"*"` for any origin, but be aware of the security implications.
|
|
25
|
-
- `includeChangedValue` (boolean, optional): If the trigger event is `change` on an input element, setting this to `true` will add the input's new value to the message payload under the key `changedValue`. Currently, this is only supported for checkboxes.
|
|
26
20
|
|
|
21
|
+
- type: DefinitionList
|
|
22
|
+
content:
|
|
23
|
+
- term:
|
|
24
|
+
code: message
|
|
25
|
+
after: "(any, required)"
|
|
26
|
+
details:
|
|
27
|
+
type: Markdown
|
|
28
|
+
content: "The data to send as the message. This value is evaluated and can be any serializable type (string, number, object, array)"
|
|
29
|
+
- term:
|
|
30
|
+
code: messageTarget
|
|
31
|
+
after: "(string, optional)"
|
|
32
|
+
details:
|
|
33
|
+
type: Markdown
|
|
34
|
+
content: "The target window for the message. Can be 'parent' (the default) or 'self'"
|
|
35
|
+
- term:
|
|
36
|
+
code: targetOrigin
|
|
37
|
+
after: "(string, optional)"
|
|
38
|
+
details:
|
|
39
|
+
type: Markdown
|
|
40
|
+
content: "Specifies the origin of the target window for security. Defaults to the current window's origin (`window.location.origin`). Use \"*\" for any origin, but be aware of the security implications"
|
|
41
|
+
- term:
|
|
42
|
+
code: includeChangedValue
|
|
43
|
+
after: "(boolean, optional)"
|
|
44
|
+
details:
|
|
45
|
+
type: Markdown
|
|
46
|
+
content: "If the trigger event is `change` on an input element, setting this to `true` will add the input's new value to the message payload under the key `changedValue`. Currently, this is only supported for checkboxes"
|
|
47
|
+
|
|
48
|
+
- type: Markdown
|
|
49
|
+
content: |
|
|
27
50
|
## Behavior
|
|
28
51
|
- When triggered, the reaction evaluates the `message` content.
|
|
29
52
|
- It identifies the target window based on `messageTarget` and the target origin from `targetOrigin`.
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
# Reaction: redirectNow
|
|
2
2
|
|
|
3
|
-
## Introduction
|
|
4
|
-
|
|
5
3
|
The `redirectNow` reaction performs an immediate browser redirection to a specified URL. It is useful for navigating to a new page after an action is completed, such as after submitting a form or clicking a link.
|
|
6
4
|
|
|
7
5
|
## Properties
|
|
8
6
|
|
|
9
|
-
- `what` (string, required): The name of the reaction, which must be `redirectNow`.
|
|
10
|
-
- `on` (string, required): The name of the event that triggers the reaction (e.g., `click`).
|
|
11
7
|
- `to` (string, required): The URL to redirect to. This value is evaluated, so it can be a static URL or dynamically constructed from data.
|
|
12
8
|
|
|
13
9
|
## Behavior
|
|
@@ -7,10 +7,17 @@ renderView:
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
-
|
|
10
|
+
- type: DefinitionList
|
|
11
|
+
content:
|
|
12
|
+
- term:
|
|
13
|
+
code: to
|
|
14
|
+
after: "(string, required)"
|
|
15
|
+
details:
|
|
16
|
+
type: Markdown
|
|
17
|
+
content: "The URL to redirect to. This value is evaluated, so it can be a static URL or dynamically constructed from data"
|
|
13
18
|
|
|
19
|
+
- type: Markdown
|
|
20
|
+
content: |
|
|
14
21
|
## Behavior
|
|
15
22
|
|
|
16
23
|
- When triggered, the reaction evaluates the `to` property to get the target URL.
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
# Reaction: removeData
|
|
2
2
|
|
|
3
|
-
## Introduction
|
|
4
|
-
|
|
5
3
|
The `removeData` reaction deletes data from a specific location in the global data context. It is essential for dynamically managing lists, removing items, or clearing parts of the application state. It can operate in two modes: `path` mode (to target a specific data location) or `target` mode (to target the current template's data).
|
|
6
4
|
|
|
7
5
|
## Properties
|
|
8
6
|
|
|
9
|
-
- `what` (string, required): The name of the reaction, which must be `removeData`.
|
|
10
|
-
- `on` (string, required): The name of the event that triggers the reaction (e.g., `click`).
|
|
11
7
|
- `path` (string, optional): The target location in the data context to delete. Required if `target` is not used.
|
|
12
8
|
- `target` (string, optional): If set to `currentTemplateData`, the reaction will remove the data associated with the current template item.
|
|
13
9
|
- `parentLevel` (number, optional): Used with `target: 'currentTemplateData'`. Specifies how many levels to go up from the current data path before removing. `0` means the current level.
|
|
@@ -22,7 +18,7 @@ The `removeData` reaction deletes data from a specific location in the global da
|
|
|
22
18
|
|
|
23
19
|
## Examples
|
|
24
20
|
|
|
25
|
-
###
|
|
21
|
+
### Using `path` to remove a specific key
|
|
26
22
|
|
|
27
23
|
This example shows how to delete a specific user profile field by clicking a button.
|
|
28
24
|
|
|
@@ -42,7 +38,7 @@ data:
|
|
|
42
38
|
email: "john.doe@example.com"
|
|
43
39
|
```
|
|
44
40
|
|
|
45
|
-
###
|
|
41
|
+
### Using `target` to remove an item from a list
|
|
46
42
|
|
|
47
43
|
This example shows a list of users where each user can be removed by clicking a "Remove" button next to their name. The reaction targets the current item in the iteration.
|
|
48
44
|
|
|
@@ -5,8 +5,46 @@ renderView:
|
|
|
5
5
|
|
|
6
6
|
The `removeData` reaction deletes data from a specific location in the global data context. It can operate in two modes: `path` mode or `target` mode.
|
|
7
7
|
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
- type: DefinitionList
|
|
11
|
+
content:
|
|
12
|
+
- term:
|
|
13
|
+
code: path
|
|
14
|
+
after: "(string, optional)"
|
|
15
|
+
details:
|
|
16
|
+
type: Markdown
|
|
17
|
+
content: "Path to the data to remove. Required if `target` is not used"
|
|
18
|
+
- term:
|
|
19
|
+
code: target
|
|
20
|
+
after: "(string, optional)"
|
|
21
|
+
details:
|
|
22
|
+
type: Markdown
|
|
23
|
+
content: "If set to `currentTemplateData`, the reaction will target the data associated with the current template item"
|
|
24
|
+
- term:
|
|
25
|
+
code: parentLevel
|
|
26
|
+
after: "(number, optional)"
|
|
27
|
+
details:
|
|
28
|
+
type: Markdown
|
|
29
|
+
content: "Used with `target: 'currentTemplateData'`. Specifies how many levels to go up from the current data path before removing. `0` means the current level"
|
|
30
|
+
|
|
31
|
+
- type: Markdown
|
|
32
|
+
content: |
|
|
33
|
+
## Behavior
|
|
34
|
+
|
|
35
|
+
- When triggered, `removeData` deletes the data at the specified location.
|
|
36
|
+
- **Path Mode**: Uses the `path` property to identify what to remove.
|
|
37
|
+
- **Target Mode**: Uses `target: 'currentTemplateData'` to remove the current template data item from its parent array.
|
|
38
|
+
- The reaction has no effect if the target data doesn't exist.
|
|
39
|
+
|
|
40
|
+
## Limitations
|
|
41
|
+
|
|
42
|
+
- Either `path` or `target` must be specified.
|
|
43
|
+
- With `target` mode, the data must be part of an array for removal to work.
|
|
44
|
+
- Removing non-existent data has no effect (no error is thrown).
|
|
45
|
+
|
|
8
46
|
- type: RjBuildDescriber
|
|
9
|
-
title: "
|
|
47
|
+
title: "Using `path` to remove a specific key"
|
|
10
48
|
description: "This example shows how to delete a specific user profile field by clicking a button."
|
|
11
49
|
toDescribe:
|
|
12
50
|
renderView:
|
|
@@ -24,7 +62,7 @@ renderView:
|
|
|
24
62
|
email: "john.doe@example.com"
|
|
25
63
|
|
|
26
64
|
- type: RjBuildDescriber
|
|
27
|
-
title: "
|
|
65
|
+
title: "Using `target` to remove an item from a list"
|
|
28
66
|
description: |
|
|
29
67
|
This example shows a list of users where each user can be removed by clicking a "Remove" button next to their name.
|
|
30
68
|
The reaction uses `target: currentTemplateData` to identify which item to remove from the list.
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
# Reaction: setClipboardData
|
|
2
2
|
|
|
3
|
-
## Introduction
|
|
4
|
-
|
|
5
3
|
The `setClipboardData` reaction copies a specified value to the user's clipboard. This is useful for creating "Copy to clipboard" buttons for sharing information like referral codes, URLs, or any text-based data.
|
|
6
4
|
|
|
7
5
|
## Properties
|
|
8
6
|
|
|
9
|
-
- `what` (string, required): The name of the reaction, which must be `setClipboardData`.
|
|
10
|
-
- `on` (string, required): The name of the event that triggers the reaction (e.g., `click`).
|
|
11
7
|
- `value` (any, required): The value to be copied to the clipboard. The value is evaluated, so it can be a literal string or a path to data.
|
|
12
8
|
|
|
13
9
|
## Behavior
|
|
@@ -7,10 +7,17 @@ renderView:
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
-
|
|
10
|
+
- type: DefinitionList
|
|
11
|
+
content:
|
|
12
|
+
- term:
|
|
13
|
+
code: value
|
|
14
|
+
after: "(any, required)"
|
|
15
|
+
details:
|
|
16
|
+
type: Markdown
|
|
17
|
+
content: "The value to be copied to the clipboard. The value is evaluated, so it can be a literal string or a path to data"
|
|
13
18
|
|
|
19
|
+
- type: Markdown
|
|
20
|
+
content: |
|
|
14
21
|
## Behavior
|
|
15
22
|
|
|
16
23
|
- When triggered, the reaction evaluates the `value` property.
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
# Reaction: setData
|
|
2
2
|
|
|
3
|
-
## Introduction
|
|
4
|
-
|
|
5
3
|
The `setData` reaction updates the data at a specific location in the global data context. It is one of the most fundamental reactions for managing state and making applications interactive. It can be used to set simple values, objects, or the result of a template evaluation.
|
|
6
4
|
|
|
7
5
|
## Properties
|
|
8
6
|
|
|
9
|
-
- `what` (string, required): The name of the reaction, which must be `setData`.
|
|
10
|
-
- `on` (string, required): The name of the event that triggers the reaction (e.g., `click`, `change`).
|
|
11
7
|
- `path` (string, required): The target location in the data context where the value will be set. It supports `~.` notation for relative paths.
|
|
12
8
|
- `value` (any, required): The value to set at the specified path. This value is evaluated, so it can be a literal, a path to other data, or a template string.
|
|
13
9
|
- **Conditional properties** (optional): Like all reactions, `setData` supports conditional execution using `when`, `is`, `isNot`, `isEmpty`, `contains`, `>`, `<`, `>=`, `<=`, `andConditions`, `orConditions`.
|
|
@@ -56,10 +52,24 @@ This example shows how to use conditions with `setData` to only execute when cer
|
|
|
56
52
|
|
|
57
53
|
```yaml
|
|
58
54
|
renderView:
|
|
59
|
-
- type:
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
55
|
+
- type: label
|
|
56
|
+
content: "Username:"
|
|
57
|
+
- type: input
|
|
58
|
+
attributes:
|
|
59
|
+
type: "text"
|
|
60
|
+
value: ~.username
|
|
61
|
+
placeholder: "Enter username"
|
|
62
|
+
style:
|
|
63
|
+
padding: "8px"
|
|
64
|
+
margin: "8px 0"
|
|
65
|
+
border: "1px solid #ccc"
|
|
66
|
+
borderRadius: "4px"
|
|
67
|
+
width: "200px"
|
|
68
|
+
actions:
|
|
69
|
+
- what: setData
|
|
70
|
+
on: input
|
|
71
|
+
path: ~.username
|
|
72
|
+
value: "<reactive-json:event-new-value>"
|
|
63
73
|
- type: button
|
|
64
74
|
content: "Set Welcome Message"
|
|
65
75
|
actions:
|
|
@@ -5,14 +5,32 @@ renderView:
|
|
|
5
5
|
|
|
6
6
|
The `setData` reaction updates the data at a specific location in the global data context. It is one of the most fundamental reactions for managing state and making applications interactive. It can be used to set simple values, objects, or the result of a template evaluation.
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
- `what` (string, required): The name of the reaction, which must be `setData`.
|
|
10
|
-
- `on` (string, required): The name of the event that triggers the reaction (e.g., `click`, `change`).
|
|
11
|
-
- `path` (string, required): The target location in the data context where the value will be set. It supports `~.` notation for relative paths.
|
|
12
|
-
- `value` (any, required): The value to set at the specified path. This value is evaluated, so it can be a literal, a path to other data, or a template string.
|
|
13
|
-
- **Conditional properties** (optional): Like all reactions, `setData` supports conditional execution using `when`, `is`, `isNot`, `isEmpty`, `contains`, `>`, `<`, `>=`, `<=`, `andConditions`, `orConditions`.
|
|
8
|
+
## Properties
|
|
14
9
|
|
|
15
|
-
|
|
10
|
+
- type: DefinitionList
|
|
11
|
+
content:
|
|
12
|
+
- term:
|
|
13
|
+
code: path
|
|
14
|
+
after: "(string, required)"
|
|
15
|
+
details:
|
|
16
|
+
type: Markdown
|
|
17
|
+
content: "The target location in the data context where the value will be set. It supports `~.` notation for relative paths"
|
|
18
|
+
- term:
|
|
19
|
+
code: value
|
|
20
|
+
after: "(any, required)"
|
|
21
|
+
details:
|
|
22
|
+
type: Markdown
|
|
23
|
+
content: "The value to set at the specified path. This value is evaluated, so it can be a literal, a path to other data, or a template string"
|
|
24
|
+
- term:
|
|
25
|
+
code: conditionalProperties
|
|
26
|
+
after: "(optional)"
|
|
27
|
+
details:
|
|
28
|
+
type: Markdown
|
|
29
|
+
content: "Like all reactions, `setData` supports conditional execution using `when`, `is`, `isNot`, `isEmpty`, `contains`, `>`, `<`, `>=`, `<=`, `andConditions`, `orConditions`"
|
|
30
|
+
|
|
31
|
+
- type: Markdown
|
|
32
|
+
content: |
|
|
33
|
+
## Behavior
|
|
16
34
|
- When triggered by the specified event (`on`), `setData` evaluates the `value` property within the current context.
|
|
17
35
|
- It then updates the data at the location specified by `path`.
|
|
18
36
|
- If the `value` is an object or an array, it is deep-cloned before being set to prevent shared-state mutations.
|
|
@@ -55,10 +73,24 @@ renderView:
|
|
|
55
73
|
description: "This example shows how to use conditions with `setData` to only execute when certain criteria are met."
|
|
56
74
|
toDescribe:
|
|
57
75
|
renderView:
|
|
58
|
-
- type:
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
76
|
+
- type: label
|
|
77
|
+
content: "Username:"
|
|
78
|
+
- type: input
|
|
79
|
+
attributes:
|
|
80
|
+
type: "text"
|
|
81
|
+
value: ~.username
|
|
82
|
+
placeholder: "Enter username"
|
|
83
|
+
style:
|
|
84
|
+
padding: "8px"
|
|
85
|
+
margin: "8px 0"
|
|
86
|
+
border: "1px solid #ccc"
|
|
87
|
+
borderRadius: "4px"
|
|
88
|
+
width: "200px"
|
|
89
|
+
actions:
|
|
90
|
+
- what: setData
|
|
91
|
+
on: input
|
|
92
|
+
path: ~.username
|
|
93
|
+
value: "<reactive-json:event-new-value>"
|
|
62
94
|
- type: button
|
|
63
95
|
content: "Set Welcome Message"
|
|
64
96
|
actions:
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
# Reactive-JSON submitData Documentation
|
|
2
2
|
|
|
3
|
-
## Introduction
|
|
4
3
|
`submitData` is a reaction that allows sending data to a server via HTTP requests (usually POST). It's especially useful for form submissions and API interactions.
|
|
5
4
|
|
|
6
5
|
- The payload can be customized with the `data` property.
|
|
@@ -44,7 +43,7 @@ This limitation is intentional to avoid data consistency issues but may be restr
|
|
|
44
43
|
### Styling Submitting State (CSS)
|
|
45
44
|
You can visually disable form controls during submission using CSS. There are two main approaches:
|
|
46
45
|
|
|
47
|
-
####
|
|
46
|
+
#### Target only the submitting control (button, input, etc.)
|
|
48
47
|
The element that triggered the submission receives `data-is-submitting="true"` during the request:
|
|
49
48
|
|
|
50
49
|
```css
|
|
@@ -58,7 +57,7 @@ textarea[data-is-submitting="true"] {
|
|
|
58
57
|
}
|
|
59
58
|
```
|
|
60
59
|
|
|
61
|
-
####
|
|
60
|
+
#### Target all controls globally during submission
|
|
62
61
|
While a submission is in progress, the `<body>` receives `data-html-builder-is-submitting="true"`. You can use this to disable all form controls:
|
|
63
62
|
|
|
64
63
|
```css
|
|
@@ -10,14 +10,50 @@ renderView:
|
|
|
10
10
|
- The response can refresh the app (default) or be ignored.
|
|
11
11
|
|
|
12
12
|
## Properties
|
|
13
|
-
- `url` (string, required): The destination URL for the request
|
|
14
|
-
- `httpMethod` (string, optional): The HTTP method to use (default: "post")
|
|
15
|
-
- `data` (object, optional): The data to send. If not specified, data is sent in an object with the structure `{ data: globalDataContext.templateData }`. If `__state` exists in the context, it is automatically added.
|
|
16
|
-
- `refreshAppOnResponse` (boolean, optional): If true (default), reloads the application with the server response. If false, the response is ignored and **no change is made to the application's state or display** (just like `fetchData`).
|
|
17
|
-
- `submitSilently` (boolean, optional): If true, doesn't apply visual disabling styles during submission
|
|
18
|
-
- `updateOnlyData` (boolean, optional): When true and `refreshAppOnResponse` is true, only updates the data section instead of replacing the entire RjBuild. Preserves templates and renderView. Default: false.
|
|
19
|
-
- `updateDataAtLocation` (string, optional): When `updateOnlyData` is true, specifies where to place the response data using template path syntax (e.g., "~~.userProfile", "~.config.settings"). If not specified, replaces the entire data object.
|
|
20
13
|
|
|
14
|
+
- type: DefinitionList
|
|
15
|
+
content:
|
|
16
|
+
- term:
|
|
17
|
+
code: url
|
|
18
|
+
after: "(string, required)"
|
|
19
|
+
details: "The destination URL for the request"
|
|
20
|
+
- term:
|
|
21
|
+
code: httpMethod
|
|
22
|
+
after: "(string, optional)"
|
|
23
|
+
details:
|
|
24
|
+
type: Markdown
|
|
25
|
+
content: "The HTTP method to use (default: \"post\")"
|
|
26
|
+
- term:
|
|
27
|
+
code: data
|
|
28
|
+
after: "(object, optional)"
|
|
29
|
+
details:
|
|
30
|
+
type: Markdown
|
|
31
|
+
content: "The data to send. If not specified, data is sent in an object with the structure `{ data: globalDataContext.templateData }`. If `__state` exists in the context, it is automatically added"
|
|
32
|
+
- term:
|
|
33
|
+
code: refreshAppOnResponse
|
|
34
|
+
after: "(boolean, optional)"
|
|
35
|
+
details:
|
|
36
|
+
type: Markdown
|
|
37
|
+
content: "If true (default), reloads the application with the server response. If false, the response is ignored and **no change is made to the application's state or display** (just like `fetchData`)"
|
|
38
|
+
- term:
|
|
39
|
+
code: submitSilently
|
|
40
|
+
after: "(boolean, optional)"
|
|
41
|
+
details: "If true, doesn't apply visual disabling styles during submission"
|
|
42
|
+
- term:
|
|
43
|
+
code: updateOnlyData
|
|
44
|
+
after: "(boolean, optional)"
|
|
45
|
+
details:
|
|
46
|
+
type: Markdown
|
|
47
|
+
content: "When true and `refreshAppOnResponse` is true, only updates the data section instead of replacing the entire RjBuild. Preserves templates and renderView. Default: false"
|
|
48
|
+
- term:
|
|
49
|
+
code: updateDataAtLocation
|
|
50
|
+
after: "(string, optional)"
|
|
51
|
+
details:
|
|
52
|
+
type: Markdown
|
|
53
|
+
content: "When `updateOnlyData` is true, specifies where to place the response data using template path syntax (e.g., \"~~.userProfile\", \"~.config.settings\"). If not specified, replaces the entire data object"
|
|
54
|
+
|
|
55
|
+
- type: Markdown
|
|
56
|
+
content: |
|
|
21
57
|
## Behavior
|
|
22
58
|
- Only one submission can be active at a time (global lock)
|
|
23
59
|
- The default HTTP method is POST, but can be customized
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
# Reaction: triggerEvent
|
|
2
2
|
|
|
3
|
-
## Introduction
|
|
4
|
-
|
|
5
3
|
The `triggerEvent` reaction programmatically dispatches an event on one or more target elements found via a CSS selector. This allows for indirect interactions, such as one button triggering the `click` event of another element, or simulating user actions on specific components.
|
|
6
4
|
|
|
7
5
|
## Properties
|
|
8
6
|
|
|
9
|
-
- `what` (string, required): The name of the reaction, must be `triggerEvent`.
|
|
10
|
-
- `on` (string, required): The event that triggers this reaction.
|
|
11
7
|
- `eventName` (string, required): The name of the event to dispatch on the target element(s) (e.g., `click`, `focus`).
|
|
12
8
|
- `selector` (string, required): A CSS selector to identify the target element(s) that will receive the event.
|
|
13
9
|
- `selectorBase` (string, optional): Defines the starting point for the `selector` search.
|