@ea-lab/reactive-json-docs 0.8.0 → 1.0.0

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

@@ -55,15 +55,23 @@ renderView:
       renderView:
         - type: div
           attributes:
-            class: "container-fluid"
+            style:
+              width: "100%"
+              padding: "0 16px"
           content:
             - type: div
               attributes:
-                class: "row mb-4"
+                style:
+                  display: "flex"
+                  marginBottom: "16px"
               content:
                 - type: div
                   attributes:
-                    class: "col-md-6"
+                    style:
+                      width: "48%"
+                      display: "inline-block"
+                      verticalAlign: "top"
+                      marginRight: "2%"
                   content:
                     - type: div
                       attributes:
@@ -131,7 +139,11 @@ renderView:
                                     jsonPathPattern: "$.users[?(@.role == 'admin')]"
                 - type: div
                   attributes:
-                    class: "col-md-6"
+                    style:
+                      width: "48%"
+                      display: "inline-block"
+                      verticalAlign: "top"
+                      marginRight: "2%"
                   content:
                     - type: div
                       attributes:
@@ -153,37 +165,86 @@ renderView:
                               attributes:
                                 class: "mb-3"
                               content:
-                                - type: TextField
-                                  label: "Name:"
-                                  dataLocation: ~.newUser.name
-                                  placeholder: "Enter user name"
+                                - type: label
+                                  content: "Name:"
+                                - type: input
+                                  attributes:
+                                    type: "text"
+                                    value: ~.newUser.name
+                                    placeholder: "Enter user name"
+                                    style:
+                                      padding: "8px"
+                                      border: "1px solid #ccc"
+                                      borderRadius: "4px"
+                                      width: "100%"
+                                  actions:
+                                    - what: setData
+                                      on: input
+                                      path: ~.newUser.name
+                                      value: "<reactive-json:event-new-value>"
                             - type: div
                               attributes:
                                 class: "mb-3"
                               content:
-                                - type: SelectField
-                                  label: "Status:"
-                                  dataLocation: ~.newUser.status
-                                  options:
-                                    - label: "Active"
-                                      value: "active"
-                                    - label: "Inactive"
-                                      value: "inactive"
+                                - type: label
+                                  content: "Status:"
+                                - type: select
+                                  attributes:
+                                    value: ~.newUser.status
+                                    style:
+                                      padding: "8px"
+                                      border: "1px solid #ccc"
+                                      borderRadius: "4px"
+                                      width: "100%"
+                                  content:
+                                    - type: option
+                                      attributes:
+                                        value: "active"
+                                      content: "Active"
+                                    - type: option
+                                      attributes:
+                                        value: "inactive"
+                                      content: "Inactive"
+                                  actions:
+                                    - what: setData
+                                      on: change
+                                      path: ~.newUser.status
+                                      value: "<reactive-json:event-new-value>"
                             - type: div
                               attributes:
                                 class: "mb-3"
                               content:
-                                - type: SelectField
-                                  label: "Role:"
-                                  dataLocation: ~.newUser.role
-                                  options:
-                                    - label: "User"
-                                      value: "user"
-                                    - label: "Admin"
-                                      value: "admin"
+                                - type: label
+                                  content: "Role:"
+                                - type: select
+                                  attributes:
+                                    value: ~.newUser.role
+                                    style:
+                                      padding: "8px"
+                                      border: "1px solid #ccc"
+                                      borderRadius: "4px"
+                                      width: "100%"
+                                  content:
+                                    - type: option
+                                      attributes:
+                                        value: "user"
+                                      content: "User"
+                                    - type: option
+                                      attributes:
+                                        value: "admin"
+                                      content: "Admin"
+                                  actions:
+                                    - what: setData
+                                      on: change
+                                      path: ~.newUser.role
+                                      value: "<reactive-json:event-new-value>"
                             - type: button
                               attributes:
-                                class: "btn btn-primary"
+                                style:
+                                  padding: "8px 16px"
+                                  border: "1px solid #007bff"
+                                  borderRadius: "4px"
+                                  cursor: "pointer"
                               content: "Add User"
                               actions:
                                 - what: addData
@@ -247,8 +308,7 @@ renderView:
                   attributes:
                     class: "ms-2 badge rounded-pill"
                     style:
-                      backgroundColor: "#198754"
-                      color: "white"
+                      border: "1px solid #198754"
                   content: ~.status
                   actions:
                     - what: hide
@@ -258,8 +318,7 @@ renderView:
                   attributes:
                     class: "ms-2 badge rounded-pill"
                     style:
-                      backgroundColor: "#ffc107"
-                      color: "black"
+                      border: "1px solid #ffc107"
                   content: ~.status
                   actions:
                     - what: hide
@@ -277,7 +336,12 @@ renderView:
               content:
                 - type: button
                   attributes:
-                    class: "btn btn-sm btn-outline-primary me-2"
+                    style:
+                      padding: "4px 8px"
+                      border: "1px solid #007bff"
+                      borderRadius: "4px"
+                      cursor: "pointer"
+                      marginRight: "8px"
                   content: "Toggle Status"
                   actions:
                     - what: setData
@@ -294,7 +358,11 @@ renderView:
                       is: "inactive"
                 - type: button
                   attributes:
-                    class: "btn btn-sm btn-outline-danger"
+                    style:
+                      padding: "4px 8px"
+                      border: "1px solid #dc3545"
+                      borderRadius: "4px"
+                      cursor: "pointer"
                   content: "Remove"
                   actions:
                     - what: removeData

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

@@ -115,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:
@@ -143,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:
@@ -203,7 +211,8 @@ renderView:
               content:
                 - type: div
                   attributes:
-                    class: "col-12"
+                    style:
+                      width: "100%"
                   content:
                     - type: div
                       attributes:
@@ -228,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
@@ -299,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

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

@@ -212,7 +212,7 @@ renderView:
       renderView:
         - type: ReactiveJsonSubroot
           rjOptions:
-            maybeRawAppRjBuild: '{"data":{"userName":"Alice","messageCount":3},"renderView":[{"type":"div","attributes":{"style":{"padding":"1rem","border":"1px solid #ddd","borderRadius":"8px","backgroundColor":"#f9f9f9"}},"content":[{"type":"h3","content":"~~.userName"},{"type":"p","content":["You have ","~~.messageCount"," new messages."]},{"type":"button","content":"Mark as read","attributes":{"style":{"backgroundColor":"#007bff","color":"white","border":"none","padding":"0.5rem 1rem","borderRadius":"4px"}}}]}]}'
+            maybeRawAppRjBuild: '{"data":{"userName":"Alice","messageCount":3},"renderView":[{"type":"div","attributes":{"style":{"padding":"1rem","border":"1px solid #ddd","borderRadius":"8px"}},"content":[{"type":"h3","content":"~~.userName"},{"type":"p","content":["You have ","~~.messageCount"," new messages."]},{"type":"button","content":"Mark as read","attributes":{"style":{"border":"1px solid #007bff","padding":"0.5rem 1rem","borderRadius":"4px"}}}]}]}'
 
         - type: hr
 
@@ -266,12 +266,30 @@ renderView:
                   content:
                     - type: h4
                       content: "Subroot Editor (with sharedUpdates)"
-                    - type: TextField
-                      label: "Name"
-                      dataLocation: ~.name
-                    - type: TextField
-                      label: "Email"
-                      dataLocation: ~.email
+                    - type: label
+                      content: "Name"
+                    - type: input
+                      attributes:
+                        type: text
+                        value: ~.name
+                        placeholder: "Name"
+                      actions:
+                        - what: setData
+                          on: change
+                          path: ~.name
+                          value: "<reactive-json:event-new-value>"
+                    - type: label
+                      content: "Email"
+                    - type: input
+                      attributes:
+                        type: email
+                        value: ~.email
+                        placeholder: "Email"
+                      actions:
+                        - what: setData
+                          on: change
+                          path: ~.email
+                          value: "<reactive-json:event-new-value>"
                     - type: p
                       attributes:
                         style:
@@ -352,22 +370,58 @@ renderView:
                     content:
                       - type: h5
                         content: "Edit Profile"
-                      - type: TextField
-                        label: "Name"
-                        dataLocation: ~.userProfile.name
-                      - type: NumberField
-                        label: "Age"
-                        dataLocation: ~.userProfile.age
+                      - type: label
+                        content: "Name"
+                      - type: input
+                        attributes:
+                          type: text
+                          value: ~.userProfile.name
+                          placeholder: "Name"
+                        actions:
+                          - what: setData
+                            on: change
+                            path: ~.userProfile.name
+                            value: "<reactive-json:event-new-value>"
+                      - type: label
+                        content: "Age"
+                      - type: input
+                        attributes:
+                          type: number
+                          value: ~.userProfile.age
+                          placeholder: "Age"
+                        actions:
+                          - what: setData
+                            on: change
+                            path: ~.userProfile.age
+                            value: "<reactive-json:event-new-value>"
                   - type: div
                     content:
                       - type: h5
                         content: "Edit Settings"
-                      - type: TextField
-                        label: "Theme"
-                        dataLocation: ~.userSettings.theme
-                      - type: TextField
-                        label: "Language"
-                        dataLocation: ~.userSettings.language
+                      - type: label
+                        content: "Theme"
+                      - type: input
+                        attributes:
+                          type: text
+                          value: ~.userSettings.theme
+                          placeholder: "Theme"
+                        actions:
+                          - what: setData
+                            on: change
+                            path: ~.userSettings.theme
+                            value: "<reactive-json:event-new-value>"
+                      - type: label
+                        content: "Language"
+                      - type: input
+                        attributes:
+                          type: text
+                          value: ~.userSettings.language
+                          placeholder: "Language"
+                        actions:
+                          - what: setData
+                            on: change
+                            path: ~.userSettings.language
+                            value: "<reactive-json:event-new-value>"
 
   - type: RjBuildDescriber
     title: Example with Array References
@@ -391,9 +445,41 @@ renderView:
             - type: h4
               content: "Parent Items Display"
             - type: p
-              content: ["Item 1: ", ~~.items.0.title, " (", ~~.items.0.completed, ")"]
-            - type: p
-              content: ["Item 2: ", ~~.items.1.title, " (", ~~.items.1.completed, ")"]
+              content:
+                - "Item 1: "
+                - ~~.items.0.title
+                - " (completed: "
+                - type: span
+                  content: "Yes"
+                  actions:
+                    - what: hide
+                      when: ~~.items.0.completed
+                      is: false
+                - type: span
+                  content: "No"
+                  actions:
+                    - what: hide
+                      when: ~~.items.0.completed
+                      is: true
+                - ")"
+            - type: p  
+              content:
+                - "Item 2: "
+                - ~~.items.1.title
+                - " (completed: "
+                - type: span
+                  content: "Yes"
+                  actions:
+                    - what: hide
+                      when: ~~.items.1.completed
+                      is: false
+                - type: span
+                  content: "No"
+                  actions:
+                    - what: hide
+                      when: ~~.items.1.completed
+                      is: true
+                - ")"
         
         - type: ReactiveJsonSubroot
           sharedUpdates: true
@@ -416,22 +502,56 @@ renderView:
                       content:
                         - type: h5
                           content: "First Item"
-                        - type: TextField
-                          label: "Title"
-                          dataLocation: ~.0.title
-                        - type: CheckBoxField
-                          label: "Completed"
-                          dataLocation: ~.0.completed
+                        - type: label
+                          content: "Title"
+                        - type: input
+                          attributes:
+                            type: text
+                            value: ~.0.title
+                            placeholder: "Title"
+                          actions:
+                            - what: setData
+                              on: change
+                              path: ~.0.title
+                              value: "<reactive-json:event-new-value>"
+                        - type: label
+                          content: "Completed"
+                        - type: input
+                          attributes:
+                            type: checkbox
+                            checked: ~.0.completed
+                          actions:
+                            - what: setData
+                              on: change
+                              path: ~.0.completed
+                              value: "<reactive-json:event-new-value>"
                     - type: div
                       content:
                         - type: h5
                           content: "Second Item"
-                        - type: TextField
-                          label: "Title"
-                          dataLocation: ~.1.title
-                        - type: CheckBoxField
-                          label: "Completed"
-                          dataLocation: ~.1.completed
+                        - type: label
+                          content: "Title"
+                        - type: input
+                          attributes:
+                            type: text
+                            value: ~.1.title
+                            placeholder: "Title"
+                          actions:
+                            - what: setData
+                              on: change
+                              path: ~.1.title
+                              value: "<reactive-json:event-new-value>"
+                        - type: label
+                          content: "Completed"
+                        - type: input
+                          attributes:
+                            type: checkbox
+                            checked: ~.1.completed
+                          actions:
+                            - what: setData
+                              on: change
+                              path: ~.1.completed
+                              value: "<reactive-json:event-new-value>"
 
   - type: Markdown
     content: |