@ea-lab/reactive-json-docs 0.7.0 → 1.0.0-alpha.0

package/public/rjbuild/docs/core/element/special/DataFilter.yaml

@@ -6,35 +6,71 @@ renderView:
       The `DataFilter` component allows you to filter data from the global or template context before rendering its content. It is particularly useful for conditional display of elements based on dynamic complex criteria, such as filtering lists, trees, or data subsets.
 
       ## Properties
-      - `filters` (array, required): Array of filter objects, each specifying properties and conditions to check
-        - `subjectsWithProperty` (string): Property to check in the data, acts as namespace
-        - `andConditions` (array): List of conditions that must all be true
-        - `orConditions` (array): List of conditions where at least one must be true
-        - Available conditions:
-          - `when`: Checks a condition on a value
-          - `is`: Compares exact equality
-          - `isNot`: Checks inequality
-          - `isEmpty`: Checks if a value is empty
-          - `contains`: Checks if a value contains a substring
-          - `>=`, `<=`, `>`, `<`: Numeric comparisons
-          - `compareAsDates`: Boolean to compare values as dates
-          - `whenFilterableData`: Specifies the data path to filter, must include the namespace
-      - `context` (string, optional): Context to filter (`global` or `template`). Default: `global`
-      - `content` (object/array, required): Content to render after filtering
 
+  - type: DefinitionList
+    content:
+      - term:
+          code: filters
+          after: "(array, required)"
+        details:
+          - type: Markdown
+            content: "Array of filter objects, each specifying properties and conditions to check:"
+          - type: DefinitionList
+            content:
+              - term:
+                  code: subjectsWithProperty
+                  after: "(string)"
+                details: Property to check in the data, acts as namespace.
+              - term:
+                  code: andConditions
+                  after: "(array)"
+                details: List of conditions that must all be true.
+              - term:
+                  code: orConditions
+                  after: "(array)"
+                details: List of conditions where at least one must be true.
+              - term:
+                  code: availableConditions
+                  after: "(info)"
+                details:
+                  type: Markdown
+                  content: |
+                    Available condition keys inside conditions objects:
+                    - `when`: Checks a condition on a value.
+                    - `is`: Compares exact equality.
+                    - `isNot`: Checks inequality.
+                    - `isEmpty`: Checks if a value is empty.
+                    - `isNotEmpty`: Checks if a value is not empty.
+                    - `contains`: Checks if a value contains a substring.
+                    - `>=`, `<=`, `>`, `<`: Numeric comparisons.
+                    - `compareAsDates`: Boolean to compare values as dates.
+                    - `whenFilterableData`: Specifies the data path to filter, must include the namespace.
+      - term:
+          code: context
+          after: "(string, optional)"
+        details:
+          type: Markdown
+          content: "Context to filter (`global` or `template`). Default: `global`."
+      - term:
+          code: content
+          after: "(object|array, required)"
+        details: Content to render after filtering.
+
+  - type: Markdown
+    content: |
       ## Behavior
-      - Applies all filters to the selected context before content rendering
-      - Supports complex filtering conditions with `andConditions` and `orConditions`
-      - Allows recursive filtering while preserving data structure
-      - Can be combined with other components to create interactive filtering interfaces
+      - Applies all filters to the selected context before content rendering.
+      - Supports complex filtering conditions with `andConditions` and `orConditions`.
+      - Allows recursive filtering while preserving data structure.
+      - Can be combined with other components to create interactive filtering interfaces.
       - Supports dynamic filtering based on application state
 
       ## Filterable Data Structure
-
+      
       DataFilter uses a specific pattern to identify and filter data. This pattern relies on an identification key (namespace) that must be consistent between the data structure and filtering conditions.
-
+      
       ### Namespace Pattern
-
+      
       1. **In the data structure**:
       ```yaml
       data:
@@ -46,7 +82,7 @@ renderView:
               id: 2
               title: "..."
       ```
-
+      
       2. **In filtering conditions**:
       ```yaml
       type: DataFilter
@@ -58,12 +94,12 @@ renderView:
                 - whenFilterableData: item.title  # <- Uses the namespace
                   contains: "..."
       ```
-
+      
       The identification key (here "item"):
-      - Can have any name (`itemXyz`, `element`, etc.)
-      - Must be consistent between data structure and conditions
-      - Serves as a namespace for accessing properties in `whenFilterableData`
-      - Is required for DataFilter to correctly identify filterable elements
+      - Can have any name (`itemXyz`, `element`, etc.).
+      - Must be consistent between data structure and conditions.
+      - Serves as a namespace for accessing properties in `whenFilterableData`.
+      - Is required for DataFilter to correctly identify filterable elements.
 
   - type: RjBuildDescriber
     title: Advanced Example
@@ -79,7 +115,11 @@ renderView:
               content:
                 - type: div
                   attributes:
-                    class: "col-md-6"
+                    style:
+                      width: "48%"
+                      display: "inline-block"
+                      verticalAlign: "top"
+                      marginRight: "2%"
                   content:
                     - type: div
                       attributes:
@@ -107,7 +147,11 @@ renderView:
                                   load: item
                 - type: div
                   attributes:
-                    class: "col-md-6"
+                    style:
+                      width: "48%"
+                      display: "inline-block"
+                      verticalAlign: "top"
+                      marginRight: "2%"
                   content:
                     - type: div
                       attributes:
@@ -167,7 +211,8 @@ renderView:
               content:
                 - type: div
                   attributes:
-                    class: "col-12"
+                    style:
+                      width: "100%"
                   content:
                     - type: div
                       attributes:
@@ -192,70 +237,140 @@ renderView:
                               content:
                                 - type: div
                                   attributes:
-                                    class: "col-md-4"
+                                    style:
+                                      width: "32%"
+                                      display: "inline-block"
+                                      verticalAlign: "top"
+                                      marginRight: "1%"
                                   content:
-                                    - type: TextField
-                                      placeholder: "Search..."
-                                      dataLocation: ~~._filters.search
+                                    - type: input
+                                      attributes:
+                                        type: "text"
+                                        placeholder: "Search..."
+                                        value: ~~._filters.search
+                                        style:
+                                          padding: "8px"
+                                          border: "1px solid #ccc"
+                                          borderRadius: "4px"
+                                          width: "100%"
+                                      actions:
+                                        - what: setData
+                                          on: input
+                                          path: ~~._filters.search
+                                          value: "<reactive-json:event-new-value>"
                                 - type: div
                                   attributes:
-                                    class: "col-md-4"
+                                    style:
+                                      width: "32%"
+                                      display: "inline-block"
+                                      verticalAlign: "top"
+                                      marginRight: "1%"
                                   content:
-                                    - # TODO: replace this by the DateField when DateField will support type="date".
-                                      type: TextField
-                                      inputType: date
-                                      dataLocation: ~~._filters.since
+                                    - type: input
+                                      attributes:
+                                        type: "date"
+                                        value: ~~._filters.since
+                                        style:
+                                          padding: "8px"
+                                          border: "1px solid #ccc"
+                                          borderRadius: "4px"
+                                      actions:
+                                        - what: setData
+                                          on: input
+                                          path: ~~._filters.since
+                                          value: "<reactive-json:event-new-value>"
                                 - type: div
                                   attributes:
-                                    class: "col-md-4"
+                                    style:
+                                      width: "32%"
+                                      display: "inline-block"
+                                      verticalAlign: "top"
+                                      marginRight: "1%"
                                   content:
-                                    - type: SelectField
-                                      dataLocation: ~~._filters.status
-                                      options:
-                                        - label: "All"
-                                          value: all
-                                        - label: "Active only"
-                                          value: active_only
+                                    - type: select
+                                      attributes:
+                                        value: ~~._filters.status
+                                        style:
+                                          padding: "8px"
+                                          border: "1px solid #ccc"
+                                          borderRadius: "4px"
+                                          width: "100%"
+                                      content:
+                                        - type: option
+                                          attributes:
+                                            value: "all"
+                                          content: "All"
+                                        - type: option
+                                          attributes:
+                                            value: "active_only"
+                                          content: "Active only"
+                                      actions:
+                                        - what: setData
+                                          on: change
+                                          path: ~~._filters.status
+                                          value: "<reactive-json:event-new-value>"
 
       templates:
         item:
           type: div
           attributes:
-            class: "list-group-item d-flex justify-content-between align-items-center border-start-0 border-end-0 py-3"
+            style:
+              display: "flex"
+              justifyContent: "space-between"
+              alignItems: "center"
+              padding: "16px 0"
+              borderTop: "1px solid #ddd"
+              borderBottom: "1px solid #ddd"
           content:
             - type: div
               attributes:
-                class: "d-flex align-items-center gap-3"
+                style:
+                  display: "flex"
+                  alignItems: "center"
+                  gap: "12px"
               content:
-                - type: CheckBoxField
+                - type: input
                   attributes:
-                    class: "form-check"
-                  options:
-                    - value: true
-                      label: ""
-                  dataLocation: ~.item.isSelected
+                    type: "checkbox"
+                    checked: ~.item.isSelected
+                    style:
+                      margin: "0 8px 0 0"
+                  actions:
+                    - what: setData
+                      on: change
+                      path: ~.item.isSelected
+                      value: "<reactive-json:event-new-value>"
                 - type: div
                   attributes:
-                    class: "d-flex flex-column"
+                    style:
+                      display: "flex"
+                      flexDirection: "column"
                   content:
                     - type: div
                       attributes:
-                        class: "fw-bold mb-1"
+                        style:
+                          fontWeight: "bold"
+                          marginBottom: "4px"
                       content: ~.item.searchableContent
                     - type: div
                       attributes:
-                        class: "text-muted small"
+                        style:
+                          color: "#6c757d"
+                          fontSize: "0.875rem"
                       content: ~.item.creationDate
             - type: div
               attributes:
-                class: "d-flex gap-2"
+                style:
+                  display: "flex"
+                  gap: "8px"
               content:
                 - type: span
                   attributes:
-                    class: "badge rounded-pill"
                     style:
-                      backgroundColor: "#198754"
-                      color: "white"
+                      border: "1px solid #198754"
+                      padding: "4px 8px"
+                      borderRadius: "12px"
+                      fontSize: "0.75rem"
                   content: ~.item.status
                   actions:
                     - what: hide
@@ -263,10 +378,11 @@ renderView:
                       isNot: active
                 - type: span
                   attributes:
-                    class: "badge rounded-pill"
                     style:
-                      backgroundColor: "#dc3545"
-                      color: "white"
+                      border: "1px solid #dc3545"
+                      padding: "4px 8px"
+                      borderRadius: "12px"
+                      fontSize: "0.75rem"
                   content: ~.item.status
                   actions:
                     - what: hide
@@ -294,22 +410,22 @@ renderView:
   - type: Markdown
     content: |
       ## Advanced Use Cases
-      - Multi-criteria filtering with combined conditions
-      - Real-time search interface
-      - Hierarchical data filtering (trees, sub-elements)
-      - Complex state management (conflicts, modifications, new elements)
-      - Integration with pagination components
-      - Date-based filtering and numeric comparisons
+      - Multi-criteria filtering with combined conditions.
+      - Real-time search interface.
+      - Hierarchical data filtering (trees, sub-elements).
+      - Complex state management (conflicts, modifications, new elements).
+      - Integration with pagination components.
+      - Date-based filtering and numeric comparisons.
 
       ## Best Practices
-      - Organize filters by logical category
-      - Use comments to document complex conditions
-      - Combine with UI components for interactive experience
-      - Consider performance with large datasets
-      - Use reusable templates for common filters
+      - Organize filters by logical category.
+      - Use comments to document complex conditions.
+      - Combine with UI components for interactive experience.
+      - Consider performance with large datasets.
+      - Use reusable templates for common filters.
 
       ## Limitations
-      - Filtering is based on simple comparisons
-      - Performance may be impacted with very large datasets
-      - Does not support custom filtering functions
-      - Filtering is applied recursively on the entire structure
+      - Filtering is based on simple comparisons.
+      - Performance may be impacted with very large datasets.
+      - Does not support custom filtering functions.
+      - Filtering is applied recursively on the entire structure.

package/public/rjbuild/docs/core/element/special/DelayedActions.md

@@ -1,21 +1,19 @@
 # DelayedActions
 
-## Introduction
-
 The `DelayedActions` component allows you to execute one or more actions after a delay or at regular intervals. It is useful for implementing polling, periodic updates, or delayed reactions in your Reactive-JSON applications.
 
 ## Properties
-- `delayedActions` (array, required): Array of action objects to execute after the delay or at each interval
-- `interval` (number, required): The delay or interval in milliseconds between executions
-- `once` (boolean, optional): If true, actions are executed only once after the delay; if false (default), actions repeat at each interval
-- `content` (object/array, optional): Content to render inside the component
+- `delayedActions` (array, required): Array of action objects to execute after the delay or at each interval.
+- `interval` (number, required): The delay or interval in milliseconds between executions.
+- `once` (boolean, optional): If true, actions are executed only once after the delay; if false (default), actions repeat at each interval.
+- `content` (object/array, optional): Content to render inside the component.
 
 ## Behavior
-- Executes all actions in `delayedActions` after the specified delay or at each interval
-- If `once` is true, actions are executed only once; otherwise, they repeat at each interval
-- Actions are executed without requiring a user event (time is the trigger)
-- The component can render content, but the main purpose is to trigger actions
-- If `interval` is not provided, no actions are executed
+- Executes all actions in `delayedActions` after the specified delay or at each interval.
+- If `once` is true, actions are executed only once; otherwise, they repeat at each interval.
+- Actions are executed without requiring a user event (time is the trigger).
+- The component can render content, but the main purpose is to trigger actions.
+- If `interval` is not provided, no actions are executed.
 
 ## Example
 ```yaml
@@ -45,7 +43,7 @@ data: {}
 ```
 
 ## Limitations
-- Only supports time-based triggering (no event-based delay)
-- All actions are executed in the order provided
-- No built-in error handling for action execution
-- If `interval` is missing or invalid, nothing happens 
+- Only supports time-based triggering (no event-based delay).
+- All actions are executed in the order provided.
+- No built-in error handling for action execution.
+- If `interval` is missing or invalid, nothing happens.

package/public/rjbuild/docs/core/element/special/DelayedActions.yaml

@@ -6,17 +6,36 @@ renderView:
       The `DelayedActions` component allows you to execute one or more actions after a delay or at regular intervals. It is useful for implementing polling, periodic updates, or delayed reactions in your Reactive-JSON applications.
 
       ## Properties
-      - `delayedActions` (array, required): Array of action objects to execute after the delay or at each interval
-      - `interval` (number, required): The delay or interval in milliseconds between executions
-      - `once` (boolean, optional): If true, actions are executed only once after the delay; if false (default), actions repeat at each interval
-      - `content` (object/array, optional): Content to render inside the component
+
+  - type: DefinitionList
+    content:
+      - term:
+          code: delayedActions
+          after: "(array, required)"
+        details:
+          type: Markdown
+          content: "Array of action objects to execute after the delay or at each interval."
+      - term:
+          code: interval
+          after: "(number, required)"
+        details: "The delay or interval in milliseconds between executions."
+      - term:
+          code: once
+          after: "(boolean, optional)"
+        details:
+          type: Markdown
+          content: "If `true`, actions execute only once after the delay; if `false` (default), actions repeat at each interval."
+      - term:
+          code: content
+          after: "(object|array, optional)"
+        details: "Content to render inside the component."
 
       ## Behavior
-      - Executes all actions in `delayedActions` after the specified delay or at each interval
-      - If `once` is true, actions are executed only once; otherwise, they repeat at each interval
-      - Actions are executed without requiring a user event (time is the trigger)
-      - The component can render content, but the main purpose is to trigger actions
-      - If `interval` is not provided, no actions are executed
+      - Executes all actions in `delayedActions` after the specified delay or at each interval.
+      - If `once` is true, actions are executed only once; otherwise, they repeat at each interval.
+      - Actions are executed without requiring a user event (time is the trigger).
+      - The component can render content, but the main purpose is to trigger actions.
+      - If `interval` is not provided, no actions are executed.
 
   - type: RjBuildDescriber
     title: Example
@@ -49,7 +68,7 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - Only supports time-based triggering (no event-based delay)
-      - All actions are executed in the order provided
-      - No built-in error handling for action execution
-      - If `interval` is missing or invalid, nothing happens 
+      - Only supports time-based triggering (no event-based delay).
+      - All actions are executed in the order provided.
+      - No built-in error handling for action execution.
+      - If `interval` is missing or invalid, nothing happens.

package/public/rjbuild/docs/core/element/special/PageControls.md

@@ -1,16 +1,14 @@
 # PageControls
 
-## Introduction
-
 The `PageControls` component displays the pagination controls provided by the current `PaginationContext`. It is useful for rendering navigation controls (such as next/previous buttons or page numbers) in paginated lists or tables.
 
 ## Properties
-- (none)
+None.
 
 ## Behavior
-- Renders the pagination controls from the current `PaginationContext` if available
-- If no pagination controls are present in the context, renders nothing
-- Intended to be used inside paginated views or lists
+- Renders the pagination controls from the current `PaginationContext` if available.
+- If no pagination controls are present in the context, renders nothing.
+- Intended to be used inside paginated views or lists.
 
 ## Pagination Context
 The pagination context is provided by components like `Switch` when the `paginated` property is set to `true`.
@@ -120,7 +118,7 @@ data:
 ```
 
 ## Limitations
-- Only works if a `PaginationContext` is present and provides controls
-- Does not manage pagination state itself; only renders controls from the context
-- No customization of the controls via props
-- Entirely depends on the parent component (like Switch) for pagination logic 
+- Only works if a `PaginationContext` is present and provides controls.
+- Does not manage pagination state itself; only renders controls from the context.
+- No customization of the controls via props.
+- Entirely depends on the parent component (like Switch) for pagination logic.

package/public/rjbuild/docs/core/element/special/PageControls.yaml

@@ -6,12 +6,13 @@ renderView:
       The `PageControls` component displays the pagination controls provided by the current `PaginationContext`. It is useful for rendering navigation controls (such as next/previous buttons or page numbers) in paginated lists or tables.
 
       ## Properties
-      - (none)
+
+      None.
 
       ## Behavior
-      - Renders the pagination controls from the current `PaginationContext` if available
-      - If no pagination controls are present in the context, renders nothing
-      - Intended to be used inside paginated views or lists
+      - Renders the pagination controls from the current `PaginationContext` if available.
+      - If no pagination controls are present in the context, renders nothing.
+      - Intended to be used inside paginated views or lists.
 
       ## Pagination Context
       The pagination context is provided by components like `Switch` when the `paginated` property is set to `true`.
@@ -123,10 +124,10 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - Only works if a `PaginationContext` is present and provides controls
-      - Does not manage pagination state itself; only renders controls from the context
-      - No customization of the controls via props
-      - Entirely depends on the parent component (like Switch) for pagination logic
+      - Only works if a `PaginationContext` is present and provides controls.
+      - Does not manage pagination state itself; only renders controls from the context.
+      - No customization of the controls via props.
+      - Entirely depends on the parent component (like Switch) for pagination logic.
 
 templates:
 

package/public/rjbuild/docs/core/element/special/Phantom.md

@@ -1,18 +1,16 @@
 # Phantom
 
-## Introduction
-
 The `Phantom` component allows you to define actions or logic in your rjbuild without rendering any DOM element. It is useful for triggering actions, conditions, or data manipulations invisibly, without affecting the visual structure of your application.
 
 ## Properties
-- `content` (object/array/string, optional): Content to evaluate or trigger (actions, conditions, etc.)
-- `actions` (array, optional): Actions to attach to the phantom logic (e.g., Tooltip)
+- `content` (object/array/string, optional): Content to evaluate or trigger (actions, conditions, etc.).
+- `actions` (array, optional): Actions to attach to the phantom logic (e.g., Tooltip).
 
 ## Behavior
-- Does not render any visible DOM element
-- Can be used to attach actions, conditions, or data manipulations without UI
-- The `content` property can include any valid Reactive-JSON view, action, or string
-- The `actions` property allows you to attach logic such as tooltips or data updates
+- Does not render any visible DOM element.
+- Can be used to attach actions, conditions, or data manipulations without UI.
+- The `content` property can include any valid Reactive-JSON view, action, or string.
+- The `actions` property allows you to attach logic such as tooltips or data updates.
 
 ## Example
 ```yaml
@@ -26,6 +24,6 @@ renderView:
 ```
 
 ## Limitations
-- Does not produce any visible output in the DOM
-- Only useful for logic, actions, or invisible data manipulations
-- Not intended for displaying content to the user 
+- Does not produce any visible output in the DOM.
+- Only useful for logic, actions, or invisible data manipulations.
+- Not intended for displaying content to the user.

package/public/rjbuild/docs/core/element/special/Phantom.yaml

@@ -6,14 +6,27 @@ renderView:
       The `Phantom` component allows you to define actions or logic in your rjbuild without rendering any DOM element. It is useful for triggering actions, conditions, or data manipulations invisibly, without affecting the visual structure of your application.
 
       ## Properties
-      - `content` (object/array/string, optional): Content to evaluate or trigger (actions, conditions, etc.)
-      - `actions` (array, optional): Actions to attach to the phantom logic (e.g., Tooltip)
 
+  - type: DefinitionList
+    content:
+      - term:
+          code: content
+          after: "(object|array|string, optional)"
+        details:
+          type: Markdown
+          content: "Content to evaluate or trigger (actions, conditions, etc.)."
+      - term:
+          code: actions
+          after: "(array, optional)"
+        details: "Actions to attach to the phantom logic (e.g., Tooltip)."
+
+  - type: Markdown
+    content: |
       ## Behavior
-      - Does not render any visible DOM element
-      - Can be used to attach actions, conditions, or data manipulations without UI
-      - The `content` property can include any valid Reactive-JSON view, action, or string
-      - The `actions` property allows you to attach logic such as tooltips or data updates
+      - Does not render any visible DOM element.
+      - Can be used to attach actions, conditions, or data manipulations without UI.
+      - The `content` property can include any valid Reactive-JSON view, action, or string.
+      - The `actions` property allows you to attach logic such as tooltips or data updates.
 
   - type: RjBuildDescriber
     title: Example
@@ -29,6 +42,6 @@ renderView:
   - type: Markdown
     content: |
       ## Limitations
-      - Does not produce any visible output in the DOM
-      - Only useful for logic, actions, or invisible data manipulations
-      - Not intended for displaying content to the user
+      - Does not produce any visible output in the DOM.
+      - Only useful for logic, actions, or invisible data manipulations.
+      - Not intended for displaying content to the user.