glib-web 4.42.1 → 4.42.3

data/app/views/json_ui/garage/test_page/http.json.jbuilder

@@ -10,60 +10,110 @@ page.body(
       childViews: ->(res) do
         res.h2 text: 'HTTP'
         res.spacer height: 8
-        res.button text: 'http/post', onClick: ->(action) do
-          action.auth_saveCsrfToken token: form_authenticity_token, onSave: ->(subaction) do
-            subaction.http_post(
-              url: json_ui_garage_url(path: 'forms/basic_post'),
-              formData: { user: { name: { first: 'New', last: 'Joe' } } }
+        res.button(
+          text: 'http/get',
+          onClick: ->(action) do
+            action.http_get url: json_ui_garage_url(path: 'forms/index')
+          end
+        )
+        res.spacer height: 4
+        res.button(
+          text: 'http/get (error page)',
+          onClick: ->(action) do
+            action.http_get url: json_ui_garage_url(path: SecureRandom.hex(3))
+          end
+        )
+        res.spacer height: 4
+        res.button(
+          text: 'http/post',
+          onClick: ->(action) do
+            action.auth_saveCsrfToken(
+              token: form_authenticity_token,
+              onSave: ->(subaction) do
+                subaction.http_post(
+                  url: json_ui_garage_url(path: 'forms/basic_post'),
+                  formData: { user: { name: { first: 'New', last: 'Joe' } } }
+                )
+              end
             )
           end
-        end
+        )
         res.spacer height: 4
-        res.button text: 'http/post (error page)', onClick: ->(action) do
-          action.auth_saveCsrfToken token: form_authenticity_token, onSave: ->(subaction) do
-            subaction.http_post(
-              retryLimit: 5,
-              url: json_ui_garage_url(path: SecureRandom.hex(3)),
-              formData: { user: { name: { first: 'New', last: 'Joe' } } }
+        res.button(
+          text: 'http/post (error page)',
+          onClick: ->(action) do
+            action.auth_saveCsrfToken(
+              token: form_authenticity_token,
+              onSave: ->(subaction) do
+                subaction.http_post(
+                  retryLimit: 5,
+                  url: json_ui_garage_url(path: SecureRandom.hex(3)),
+                  formData: { user: { name: { first: 'New', last: 'Joe' } } }
+                )
+              end
             )
           end
-        end
+        )
         res.spacer height: 4
-        res.button text: 'http/patch', onClick: ->(action) do
-          action.auth_saveCsrfToken token: form_authenticity_token, onSave: ->(subaction) do
-            subaction.http_patch(
-              url: json_ui_garage_url(path: 'forms/basic_post'),
-              formData: { 'user[name]' => 'Edit Joe' }
+        res.button(
+          text: 'http/patch',
+          onClick: ->(action) do
+            action.auth_saveCsrfToken(
+              token: form_authenticity_token,
+              onSave: ->(subaction) do
+                subaction.http_patch(
+                  url: json_ui_garage_url(path: 'forms/basic_post'),
+                  formData: { 'user[name]' => 'Edit Joe' }
+                )
+              end
             )
           end
-        end
+        )
         res.spacer height: 4
-        res.button text: 'http/patch (error page)', onClick: ->(action) do
-          action.auth_saveCsrfToken token: form_authenticity_token, onSave: ->(subaction) do
-            subaction.http_patch(
-              url: json_ui_garage_url(path: SecureRandom.hex(3)),
-              formData: { 'user[name]' => 'Edit Joe' }
+        res.button(
+          text: 'http/patch (error page)',
+          onClick: ->(action) do
+            action.auth_saveCsrfToken(
+              token: form_authenticity_token,
+              onSave: ->(subaction) do
+                subaction.http_patch(
+                  url: json_ui_garage_url(path: SecureRandom.hex(3)),
+                  formData: { 'user[name]' => 'Edit Joe' }
+                )
+              end
             )
           end
-        end
+        )
         res.spacer height: 4
-        res.button text: 'http/delete', onClick: ->(action) do
-          action.auth_saveCsrfToken token: form_authenticity_token, onSave: ->(subaction) do
-            subaction.http_delete(
-              url: json_ui_garage_url(path: 'forms/basic_post'),
-              formData: { 'user[name]' => 'Delete Joe' }
+        res.button(
+          text: 'http/delete',
+          onClick: ->(action) do
+            action.auth_saveCsrfToken(
+              token: form_authenticity_token,
+              onSave: ->(subaction) do
+                subaction.http_delete(
+                  url: json_ui_garage_url(path: 'forms/basic_post'),
+                  formData: { 'user[name]' => 'Delete Joe' }
+                )
+              end
             )
           end
-        end
+        )
         res.spacer height: 4
-        res.button text: 'http/delete (error page)', onClick: ->(action) do
-          action.auth_saveCsrfToken token: form_authenticity_token, onSave: ->(subaction) do
-            subaction.http_delete(
-              url: json_ui_garage_url(path: SecureRandom.hex(3)),
-              formData: { 'user[name]' => 'Delete Joe' }
+        res.button(
+          text: 'http/delete (error page)',
+          onClick: ->(action) do
+            action.auth_saveCsrfToken(
+              token: form_authenticity_token,
+              onSave: ->(subaction) do
+                subaction.http_delete(
+                  url: json_ui_garage_url(path: SecureRandom.hex(3)),
+                  formData: { 'user[name]' => 'Delete Joe' }
+                )
+              end
             )
           end
-        end
+        )
       end
     )
   end

data/app/views/json_ui/garage/test_page/image.json.jbuilder

@@ -0,0 +1,145 @@
+json.title 'Test Page (Image)'
+
+page = json_ui_page json
+
+small_image_url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGQpSWjtELISLBlmugOZ6wzl1JamYXQvbFeYywpfg3E8b8DrO0Kg&s'
+
+page.body(
+  childViews: ->(body) do
+    render 'json_ui/garage/test_page/header', view: body
+
+    body.panels_responsive(
+      padding: glib_json_padding_body,
+      childViews: ->(res) do
+        res.h2 text: 'Overview'
+        res.p text: 'Image renders remote assets with sizing, fit, tooltip, and badge options.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.image(
+          id: 'image_main',
+          width: 320,
+          height: 200,
+          url: glib_json_image_standard_url,
+          fit: :clip
+        )
+
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Variants and props'
+        res.label text: 'Resize and swap the asset to confirm fit and layout.'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              text: 'Default',
+              onClick: ->(action) do
+                action.components_set(
+                  targetId: 'image_main',
+                  data: {
+                  width: 320,
+                  height: 200,
+                  url: glib_json_image_standard_url,
+                  fit: :clip,
+                  badge: nil,
+                  tooltip: nil
+                  }
+                )
+              end
+            )
+            flow.spacer width: 6
+            flow.button(
+              text: 'Crop square',
+              onClick: ->(action) do
+                action.components_set(
+                  targetId: 'image_main',
+                  data: { width: 160, height: 160, url: small_image_url, fit: :crop }
+                )
+              end
+            )
+            flow.spacer width: 6
+            flow.button(
+              text: 'Full width',
+              onClick: ->(action) do
+                action.components_set(
+                  targetId: 'image_main',
+                  data: { width: 'matchParent', height: 220, url: glib_json_image_standard_url, fit: :clip }
+                )
+              end
+            )
+            flow.spacer width: 6
+            flow.button(
+              text: 'Tall crop',
+              onClick: ->(action) do
+                action.components_set(
+                  targetId: 'image_main',
+                  data: { width: 200, height: 320, url: glib_json_image_standard_url, fit: :crop }
+                )
+              end
+            )
+          end
+        )
+
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Actions and events'
+        res.label text: 'Toggle badges and tooltips to confirm metadata rendering.'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              text: 'Show badge',
+              onClick: ->(action) do
+                action.components_set(
+                  targetId: 'image_main',
+                  data: { badge: { text: '3', backgroundColor: '#2B3A67' } }
+                )
+              end
+            )
+          end
+        )
+
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Edge and advanced'
+        res.label text: 'Confirm tiny images render without layout issues.'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              text: 'Tiny thumbnail',
+              onClick: ->(action) do
+                action.components_set(
+                  targetId: 'image_main',
+                  data: { width: 64, height: 64, url: small_image_url, fit: :crop }
+                )
+              end
+            )
+            flow.spacer width: 6
+            flow.button(
+              text: 'Restore size',
+              onClick: ->(action) do
+                action.components_set(
+                  targetId: 'image_main',
+                  data: { width: 320, height: 200, url: glib_json_image_standard_url, fit: :clip }
+                )
+              end
+            )
+          end
+        )
+      end
+    )
+  end
+)

data/app/views/json_ui/garage/test_page/list.json.jbuilder

@@ -0,0 +1,75 @@
+json.title 'Test Page (List)'
+
+page = json_ui_page json
+
+page.body childViews: ->(body) do
+  render 'json_ui/garage/test_page/header', view: body
+
+  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
+    res.h2 text: 'Overview'
+    res.p text: 'List panels render rows using templates and support pagination, drag, and edit modes.'
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_list id: 'list_main', firstSection: ->(section) do
+      section.rows builder: ->(template) do
+        template.standard title: 'Alpha', subtitle: 'Basic list row'
+        template.standard title: 'Bravo', subtitle: 'Basic list row'
+        template.standard title: 'Charlie', subtitle: 'Basic list row'
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Variants and Props'
+    res.spacer height: 8
+    res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
+      flow.button text: 'One column', onClick: ->(action) do
+        action.components_set targetId: 'list_main', data: { responsiveCols: 1 }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Three columns', onClick: ->(action) do
+        action.components_set targetId: 'list_main', data: { responsiveCols: 3 }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Card style', onClick: ->(action) do
+        action.components_set targetId: 'list_main', data: { styleClasses: ['card'], padding: glib_json_padding_list }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Clear style', onClick: ->(action) do
+        action.components_set targetId: 'list_main', data: { styleClasses: nil, padding: nil }
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Actions and Events'
+    res.spacer height: 8
+    res.label id: 'list_event_status', text: 'Scroll events: idle'
+    res.spacer height: 6
+    res.panels_list id: 'list_events', height: 180, onScrollToTop: ->(action) do
+      action.components_set targetId: 'list_event_status', data: { text: 'Scroll events: top reached' }
+    end, onScrollToBottom: ->(action) do
+      action.components_set targetId: 'list_event_status', data: { text: 'Scroll events: bottom reached' }
+    end, firstSection: ->(section) do
+      section.rows builder: ->(template) do
+        (1..12).each do |index|
+          template.standard title: "Row #{index}", subtitle: 'Scroll to trigger events'
+        end
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Edge and Advanced'
+    res.spacer height: 8
+    res.label text: 'Empty list (sections: [])'
+    res.panels_list sections: []
+  end
+end

data/app/views/json_ui/garage/test_page/lists_append.json.jbuilder

@@ -0,0 +1,151 @@
+json.title 'Test Page (Lists Append)'
+
+page = json_ui_page json
+
+page.body(
+  childViews: ->(body) do
+    render 'json_ui/garage/test_page/header', view: body
+    body.panels_responsive(
+      padding: glib_json_padding_body,
+      childViews: ->(res) do
+        res.h2 text: 'Lists Append'
+        res.label text: 'Append rows to list panels from actions for live updates.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Overview'
+        res.label text: 'Use lists/append when a list should grow without a full refresh.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.label id: 'lists_append_status', text: 'Status: idle'
+        res.spacer height: 8
+        res.panels_list id: 'list_append_demo', firstSection: ->(section) do
+          section.rows builder: ->(template) do
+            template.thumbnail title: 'Starter row', subtitle: 'Existing item'
+          end
+        end
+        res.spacer height: 8
+        res.button(
+          text: 'lists/append (thumbnail)',
+          onClick: ->(action) do
+            action.lists_append(
+              targetId: 'list_append_demo',
+              row: {
+                template: 'thumbnail',
+                title: "New row #{DateTime.current.to_i}",
+                subtitle: 'Appended via action'
+              },
+              onAppend: ->(subaction) do
+                subaction.logics_set targetId: 'lists_append_status', data: { text: 'Status: appended' }
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Variants/props'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          width: 'matchParent',
+          childViews: ->(flow) do
+            flow.button(
+              text: 'Append standard row',
+              onClick: ->(action) do
+                action.lists_append(
+                  targetId: 'list_append_demo',
+                  row: {
+                    template: 'standard',
+                    title: 'Standard row',
+                    subtitle: 'Uses the standard template'
+                  }
+                )
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'Append + snackbar',
+              onClick: ->(action) do
+                action.lists_append(
+                  targetId: 'list_append_demo',
+                  row: {
+                    template: 'thumbnail',
+                    title: 'Snackbar row',
+                    subtitle: 'onAppend triggers feedback'
+                  },
+                  onAppend: ->(subaction) do
+                    subaction.snackbars_alert message: 'Row appended'
+                  end
+                )
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Actions/events'
+        res.spacer height: 8
+        res.button(
+          text: 'Append two rows',
+          onClick: ->(action) do
+            action.runMultiple(
+              childActions: ->(multi) do
+                multi.lists_append(
+                  targetId: 'list_append_demo',
+                  row: {
+                    template: 'thumbnail',
+                    title: 'Batch row A',
+                    subtitle: 'RunMultiple append'
+                  }
+                )
+                multi.lists_append(
+                  targetId: 'list_append_demo',
+                  row: {
+                    template: 'thumbnail',
+                    title: 'Batch row B',
+                    subtitle: 'RunMultiple append'
+                  }
+                )
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Edge/advanced'
+        res.spacer height: 8
+        res.label text: 'Append into an empty list'
+        res.spacer height: 8
+        res.panels_list id: 'list_append_empty', sections: []
+        res.spacer height: 8
+        res.button(
+          text: 'lists/append (empty list)',
+          onClick: ->(action) do
+            action.lists_append(
+              targetId: 'list_append_empty',
+              row: {
+                template: 'standard',
+                title: 'First row',
+                subtitle: 'Created from empty list'
+              }
+            )
+          end
+        )
+      end
+    )
+  end
+)

data/app/views/json_ui/garage/test_page/logics_set.json.jbuilder

@@ -2,7 +2,7 @@ json.title 'Test Page (Logics Set)'
 
 page = json_ui_page json
 
-page.body(
+page.form(
   childViews: ->(body) do
     render 'json_ui/garage/test_page/header', view: body
     body.panels_responsive(
@@ -122,18 +122,19 @@ page.body(
           end
         )
         res.spacer height: 16
+        res.fields_text label: 'Say', name: 'user[say]', width: 300, value: 'Hello'
+        res.fields_hidden name: 'user[say]', value: 'Silent'
         res.button(
-          text: 'Update duplicate labels',
+          text: 'Update label',
           onClick: ->(action) do
             action.logics_set(
-              targetId: 'duplicate_label',
-              data: { text: 'Updated label text' }
+              targetId: 'say_label',
+              conditionalData: { text:  { "var": 'user[say]' } }
             )
           end
         )
         res.spacer height: 8
-        res.label id: 'duplicate_label', text: 'Visible label text'
-        res.label id: 'duplicate_label', text: 'Hidden label text', displayed: false
+        res.label id: 'say_label', text: 'Visible label text'
       end
     )
   end

data/app/views/json_ui/garage/test_page/multimedia_video.json.jbuilder

@@ -0,0 +1,118 @@
+json.title 'Test Page (Multimedia Video)'
+
+page = json_ui_page json
+
+page.body(
+  childViews: ->(body) do
+    render 'json_ui/garage/test_page/header', view: body
+
+    body.panels_responsive(
+      padding: glib_json_padding_body,
+      childViews: ->(res) do
+        res.h2 text: 'Overview'
+        res.p text: 'Multimedia video embeds external media with configurable sizing.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.multimedia_video(
+          id: 'multimedia_video_main',
+          width: 560,
+          height: 315,
+          url: 'https://www.youtube.com/watch?v=947op8yKJRY'
+        )
+
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Variants and props'
+        res.label text: 'Swap sizing and URL formats.'
+        res.spacer height: 8
+        res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
+          flow.button(
+            text: 'Default size',
+            onClick: ->(action) do
+              action.components_set(
+                targetId: 'multimedia_video_main',
+                data: {
+                  width: 560,
+                  height: 315,
+                  url: 'https://www.youtube.com/watch?v=947op8yKJRY'
+                }
+              )
+            end
+          )
+          flow.spacer width: 6
+          flow.button(
+            text: 'Short URL',
+            onClick: ->(action) do
+              action.components_set(
+                targetId: 'multimedia_video_main',
+                data: { url: 'https://youtu.be/ATnpEOo3GJA' }
+              )
+            end
+          )
+          flow.spacer width: 6
+          flow.button(
+            text: 'Match parent',
+            onClick: ->(action) do
+              action.components_set(
+                targetId: 'multimedia_video_main',
+                data: { width: 'matchParent', height: 240 }
+              )
+            end
+          )
+          flow.spacer width: 6
+          flow.button(
+            text: 'Compact',
+            onClick: ->(action) do
+              action.components_set(
+                targetId: 'multimedia_video_main',
+                data: { width: 360, height: 200 }
+              )
+            end
+          )
+        end
+
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Actions and events'
+        res.label text: 'Use the buttons above to validate updates without remounting.'
+        res.spacer height: 12
+
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Edge and advanced'
+        res.label text: 'Test wide and tall ratios for responsive layouts.'
+        res.spacer height: 8
+        res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
+          flow.button(
+            text: 'Wide 16:9',
+            onClick: ->(action) do
+              action.components_set(
+                targetId: 'multimedia_video_main',
+                data: { width: 640, height: 360 }
+              )
+            end
+          )
+          flow.spacer width: 6
+          flow.button(
+            text: 'Tall',
+            onClick: ->(action) do
+              action.components_set(
+                targetId: 'multimedia_video_main',
+                data: { width: 360, height: 480 }
+              )
+            end
+          )
+        end
+      end
+    )
+  end
+)