@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.
Files changed (116) hide show
  1. package/package.json +7 -5
  2. package/public/rjbuild/docs/advanced-concepts/data-processors.md +2 -2
  3. package/public/rjbuild/docs/advanced-concepts/plugins/component-development-guide-llm.md +14 -14
  4. package/public/rjbuild/docs/advanced-concepts/plugins/plugin-system.md +47 -1
  5. package/public/rjbuild/docs/advanced-concepts/plugins/plugin-system.yaml +53 -1
  6. package/public/rjbuild/docs/core/action/HashChangeListener.md +1 -1
  7. package/public/rjbuild/docs/core/action/HashChangeListener.yaml +24 -6
  8. package/public/rjbuild/docs/core/action/Hide.md +2 -2
  9. package/public/rjbuild/docs/core/action/Hide.yaml +4 -3
  10. package/public/rjbuild/docs/core/action/MessageListener.md +4 -4
  11. package/public/rjbuild/docs/core/action/MessageListener.yaml +18 -6
  12. package/public/rjbuild/docs/core/action/ReactOnEvent.md +4 -4
  13. package/public/rjbuild/docs/core/action/ReactOnEvent.yaml +4 -4
  14. package/public/rjbuild/docs/core/action/Redirect.md +2 -2
  15. package/public/rjbuild/docs/core/action/Redirect.yaml +8 -2
  16. package/public/rjbuild/docs/core/action/VisuallyHide.md +2 -2
  17. package/public/rjbuild/docs/core/action/VisuallyHide.yaml +2 -2
  18. package/public/rjbuild/docs/core/dataMapping/simpleMapping.md +5 -5
  19. package/public/rjbuild/docs/core/dataMapping/simpleMapping.yaml +90 -60
  20. package/public/rjbuild/docs/core/element/debug/VariablesDebug.md +59 -0
  21. package/public/rjbuild/docs/core/element/debug/VariablesDebug.yaml +71 -0
  22. package/public/rjbuild/docs/core/element/form/Input.md +307 -0
  23. package/public/rjbuild/docs/core/element/form/Input.yaml +572 -0
  24. package/public/rjbuild/docs/core/element/html/FolderSortableTree.yaml +40 -12
  25. package/public/rjbuild/docs/core/element/html/FormatNumeral.yaml +21 -7
  26. package/public/rjbuild/docs/core/element/html/Html.yaml +26 -9
  27. package/public/rjbuild/docs/core/element/html/LabelFromValue.yaml +25 -8
  28. package/public/rjbuild/docs/core/element/html/PreformattedMarkup.yaml +23 -7
  29. package/public/rjbuild/docs/core/element/html/SortableTreeItemCollapseButton.yaml +7 -6
  30. package/public/rjbuild/docs/core/element/html/SyntaxHighlighter.yaml +56 -20
  31. package/public/rjbuild/docs/core/element/special/Count.md +8 -10
  32. package/public/rjbuild/docs/core/element/special/Count.yaml +121 -40
  33. package/public/rjbuild/docs/core/element/special/DataFilter.md +40 -41
  34. package/public/rjbuild/docs/core/element/special/DataFilter.yaml +197 -81
  35. package/public/rjbuild/docs/core/element/special/DelayedActions.md +13 -15
  36. package/public/rjbuild/docs/core/element/special/DelayedActions.yaml +32 -13
  37. package/public/rjbuild/docs/core/element/special/PageControls.md +8 -10
  38. package/public/rjbuild/docs/core/element/special/PageControls.yaml +9 -8
  39. package/public/rjbuild/docs/core/element/special/Phantom.md +9 -11
  40. package/public/rjbuild/docs/core/element/special/Phantom.yaml +22 -9
  41. package/public/rjbuild/docs/core/element/special/ReactiveJsonSubroot.md +7 -9
  42. package/public/rjbuild/docs/core/element/special/ReactiveJsonSubroot.yaml +167 -49
  43. package/public/rjbuild/docs/core/element/special/Switch.md +36 -38
  44. package/public/rjbuild/docs/core/element/special/Switch.yaml +68 -40
  45. package/public/rjbuild/docs/core/example/html.md +2 -2
  46. package/public/rjbuild/docs/core/example/html.yaml +2 -3
  47. package/public/rjbuild/docs/core/example/native-html-forms.md +245 -0
  48. package/public/rjbuild/docs/core/example/native-html-forms.yaml +393 -0
  49. package/public/rjbuild/docs/core/reaction/addData.md +17 -5
  50. package/public/rjbuild/docs/core/reaction/addData.yaml +70 -11
  51. package/public/rjbuild/docs/core/reaction/fetchData.md +1 -2
  52. package/public/rjbuild/docs/core/reaction/fetchData.yaml +84 -19
  53. package/public/rjbuild/docs/core/reaction/moveData.md +0 -4
  54. package/public/rjbuild/docs/core/reaction/moveData.yaml +28 -6
  55. package/public/rjbuild/docs/core/reaction/postMessage.md +0 -4
  56. package/public/rjbuild/docs/core/reaction/postMessage.yaml +29 -6
  57. package/public/rjbuild/docs/core/reaction/redirectNow.md +0 -4
  58. package/public/rjbuild/docs/core/reaction/redirectNow.yaml +10 -3
  59. package/public/rjbuild/docs/core/reaction/removeData.md +2 -6
  60. package/public/rjbuild/docs/core/reaction/removeData.yaml +40 -2
  61. package/public/rjbuild/docs/core/reaction/setClipboardData.md +0 -4
  62. package/public/rjbuild/docs/core/reaction/setClipboardData.yaml +10 -3
  63. package/public/rjbuild/docs/core/reaction/setData.md +18 -8
  64. package/public/rjbuild/docs/core/reaction/setData.yaml +43 -11
  65. package/public/rjbuild/docs/core/reaction/submitData.md +2 -3
  66. package/public/rjbuild/docs/core/reaction/submitData.yaml +43 -7
  67. package/public/rjbuild/docs/core/reaction/triggerEvent.md +0 -4
  68. package/public/rjbuild/docs/core/reaction/triggerEvent.yaml +25 -11
  69. package/public/rjbuild/docs/docs-components/Mermaid.md +254 -0
  70. package/public/rjbuild/docs/docs-components/Mermaid.yaml +339 -0
  71. package/public/rjbuild/docs/docs-components/index.yaml +1 -0
  72. package/public/rjbuild/docs/getting-started/actions.md +1 -1
  73. package/public/rjbuild/docs/index.yaml +2 -1
  74. package/public/rjbuild/docs/install.md +26 -29
  75. package/public/rjbuild/docs/install.yaml +4 -10
  76. package/public/rjbuild/docs/integration/bootstrap/action/Popover.md +26 -0
  77. package/public/rjbuild/docs/{core → integration/bootstrap}/action/Popover.yaml +28 -5
  78. package/public/rjbuild/docs/{core → integration/bootstrap}/action/Tooltip.md +4 -4
  79. package/public/rjbuild/docs/{core → integration/bootstrap}/action/Tooltip.yaml +16 -3
  80. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/CheckBoxField.md +8 -8
  81. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/CheckBoxField.yaml +40 -8
  82. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/DateField.md +5 -5
  83. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/DateField.yaml +27 -5
  84. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/NumberField.md +7 -7
  85. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/NumberField.yaml +32 -7
  86. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/SelectField.md +9 -9
  87. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/SelectField.yaml +46 -9
  88. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextAreaField.md +8 -8
  89. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextAreaField.yaml +36 -8
  90. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextField.md +8 -8
  91. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/TextField.yaml +38 -8
  92. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/formElementsCommon.md +2 -4
  93. package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/index.md +0 -2
  94. package/public/rjbuild/docs/integration/bootstrap/element/html/AccordionItem.md +69 -0
  95. package/public/rjbuild/docs/{core → integration/bootstrap}/element/html/AccordionItem.yaml +19 -7
  96. package/public/rjbuild/docs/integration/bootstrap/element/html/Modal.md +127 -0
  97. package/public/rjbuild/docs/{core → integration/bootstrap}/element/html/Modal.yaml +35 -12
  98. package/public/rjbuild/docs/integration/bootstrap/element/html/Tabs.md +150 -0
  99. package/public/rjbuild/docs/{core → integration/bootstrap}/element/html/Tabs.yaml +24 -15
  100. package/public/rjbuild/docs/integration/bootstrap/element/html/index.md +13 -0
  101. package/public/rjbuild/docs/{core → integration/bootstrap}/element/special/BootstrapElement.md +4 -6
  102. package/public/rjbuild/docs/integration/bootstrap/element/special/BootstrapElement.yaml +29 -0
  103. package/public/rjbuild/docs/integration/bootstrap/element/special/index.md +19 -0
  104. package/public/rjbuild/docs/integration/bootstrap/example/website.md +41 -0
  105. package/public/rjbuild/docs/integration/bootstrap/overview.md +69 -0
  106. package/public/rjbuild/docs/integration/bootstrap/overview.yaml +87 -0
  107. package/public/rjbuild/docs/core/action/Popover.md +0 -26
  108. package/public/rjbuild/docs/core/element/special/BootstrapElement.yaml +0 -18
  109. /package/public/rjbuild/docs/{core → integration/bootstrap}/element/form/index.yaml +0 -0
  110. /package/public/rjbuild/docs/{core → integration/bootstrap}/example/accordion.md +0 -0
  111. /package/public/rjbuild/docs/{core → integration/bootstrap}/example/accordion.yaml +0 -0
  112. /package/public/rjbuild/docs/{core → integration/bootstrap}/example/dynamic-content.md +0 -0
  113. /package/public/rjbuild/docs/{core → integration/bootstrap}/example/dynamic-content.yaml +0 -0
  114. /package/public/rjbuild/docs/{core → integration/bootstrap}/example/website.yaml +0 -0
  115. /package/public/rjbuild/docs/{chartjs → integration/chartjs}/components.yaml +0 -0
  116. /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 two distinct modes:
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
- The behavior depends on `refreshAppOnResponse`:
9
- - If `true` (default): Response must be a valid rjbuild (with renderView/templates/data) as it will be used to re-render the application
10
- - If `false`: Response is completely ignored - useful for webhook-like calls or server notifications
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
- class: "col-md-6"
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
- class: "btn btn-primary mb-2 w-100"
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
- class: "col-md-6"
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
- class: "btn btn-secondary mb-2 w-100"
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
- class: "btn btn-secondary"
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
- class: "col-md-4"
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
- class: "col-md-4"
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
- class: "col-md-4"
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
- - `what` (string, required): The name of the reaction, which must be `moveData`.
11
- - `on` (string, required): The name of the event that triggers the reaction.
12
- - `path` (string, optional): The path to the array element to move. Required if `target` is not used.
13
- - `target` (string, optional): If set to `currentTemplateData`, the reaction will target the data associated with the current template item.
14
- - `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.
15
- - `increment` (integer, required): 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).
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
- - `what` (string, required): The name of the reaction, which must be `redirectNow`.
11
- - `on` (string, required): The name of the event that triggers the reaction (e.g., `click`).
12
- - `to` (string, required): The URL to redirect to. This value is evaluated, so it can be a static URL or dynamically constructed from data.
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
- ### 1. Using `path` to remove a specific key
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
- ### 2. Using `target` to remove an item from a list
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: "1. Using `path` to remove a specific key"
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: "2. Using `target` to remove an item from a list"
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
- - `what` (string, required): The name of the reaction, which must be `setClipboardData`.
11
- - `on` (string, required): The name of the event that triggers the reaction (e.g., `click`).
12
- - `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.
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: TextField
60
- dataLocation: ~.username
61
- label: "Username:"
62
- placeholder: "Enter username"
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
- ### Properties
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
- ### Behavior
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: TextField
59
- dataLocation: ~.username
60
- label: "Username:"
61
- placeholder: "Enter username"
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
- #### 1. Target only the submitting control (button, input, etc.)
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
- #### 2. Target all controls globally during submission
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.