glib-web 4.42.2 → 4.42.4

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

@@ -0,0 +1,143 @@
+json.title 'Test Page (Components)'
+
+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: 'Components'
+        res.label text: 'Update or replace views at runtime.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Overview'
+        res.label text: 'Use components/set to mutate an existing view or components/replace to swap it entirely.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.label id: 'components_basic', text: 'Label text: default'
+        res.spacer height: 8
+        res.button(
+          text: 'components/set text',
+          onClick: ->(action) do
+            action.components_set targetId: 'components_basic', data: { text: 'Label text: updated' }
+          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: 'Hide',
+              onClick: ->(action) do
+                action.components_set targetId: 'components_basic', data: { displayed: false }
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'Show',
+              onClick: ->(action) do
+                action.components_set targetId: 'components_basic', data: { displayed: true }
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Actions/events'
+        res.spacer height: 8
+        res.label id: 'components_status', text: 'Status: idle'
+        res.spacer height: 8
+        res.button(
+          text: 'components/set (with onSet)',
+          onClick: ->(action) do
+            action.components_set(
+              targetId: 'components_basic',
+              data: { text: 'Label text: updated again' },
+              onSet: ->(subaction) do
+                subaction.runMultiple(
+                  childActions: ->(multi) do
+                    multi.logics_set targetId: 'components_status', data: { text: 'Status: set callback fired' }
+                    multi.snackbars_alert message: 'Updated', styleClass: 'success'
+                  end
+                )
+              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 id: 'components_replace_target', text: 'Replace me'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          width: 'matchParent',
+          childViews: ->(flow) do
+            flow.button(
+              text: 'Replace with icon',
+              onClick: ->(action) do
+                action.components_replace(
+                  targetId: 'components_replace_target',
+                  newView: ->(view) do
+                    view.icon name: 'verified', size: 24, styleClasses: ['success']
+                  end
+                )
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'Replace with button',
+              onClick: ->(action) do
+                action.components_replace(
+                  targetId: 'components_replace_target',
+                  newView: ->(view) do
+                    view.button(
+                      text: 'New button',
+                      onClick: ->(subaction) do
+                        subaction.snackbars_alert message: 'Button clicked'
+                      end
+                    )
+                  end
+                )
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'Restore label',
+              onClick: ->(action) do
+                action.components_replace(
+                  targetId: 'components_replace_target',
+                  newView: ->(view) do
+                    view.label text: 'Replace me'
+                  end
+                )
+              end
+            )
+          end
+        )
+      end
+    )
+  end
+)

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

@@ -0,0 +1,109 @@
+json.title 'Test Page (Cookies)'
+
+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: 'Cookies'
+        res.label text: 'Save, remove, and clear browser cookies.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Overview'
+        res.label text: 'Use cookie actions to persist lightweight browser state and clean it up when needed.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.button(
+          text: 'cookies/save',
+          onClick: ->(action) do
+            action.cookies_save key: 'glib_cookie', value: "test_cookie_#{DateTime.current.to_i}"
+          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: 'cookies/remove',
+              onClick: ->(action) do
+                action.cookies_remove key: 'glib_cookie'
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'cookies/clear',
+              onClick: ->(action) do
+                action.cookies_clear key: 'glib_cookie'
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Actions/events'
+        res.spacer height: 8
+        res.label id: 'cookies_status', text: 'Status: idle'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          width: 'matchParent',
+          childViews: ->(flow) do
+            flow.button(
+              text: 'cookies/save (onSave)',
+              onClick: ->(action) do
+                action.cookies_save key: 'glib_cookie', value: "event_cookie_#{DateTime.current.to_i}", onSave: ->(subaction) do
+                  subaction.logics_set targetId: 'cookies_status', data: { text: 'Status: saved (callback)' }
+                  subaction.snackbars_alert message: 'Saved'
+                end
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'cookies/remove (onRemove)',
+              onClick: ->(action) do
+                action.cookies_remove key: 'glib_cookie', onRemove: ->(subaction) do
+                  subaction.logics_set targetId: 'cookies_status', data: { text: 'Status: removed (callback)' }
+                  subaction.snackbars_alert message: 'Removed'
+                end
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Edge/advanced'
+        res.spacer height: 8
+        res.button(
+          text: 'cookies/remove missing key',
+          onClick: ->(action) do
+            action.cookies_remove key: 'glib_missing_cookie', onRemove: ->(subaction) do
+              subaction.snackbars_alert message: 'Remove attempted'
+            end
+          end
+        )
+      end
+    )
+  end
+)

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

@@ -0,0 +1,56 @@
+json.title 'Test Page (Custom)'
+
+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: 'Custom panels render a predefined template with custom data payloads.'
+
+    data_primary = { imageUrl: glib_json_image_standard_url, title: 'Primary', subtitle: 'Thumbnail template' }
+    data_alt = { imageUrl: glib_json_image_standard_url, title: 'Alternate', subtitle: 'Alternate data payload' }
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_custom id: 'custom_main', template: 'thumbnail', width: 'matchParent', backgroundColor: '#fafafa', data: data_primary
+
+    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: 'Primary data', onClick: ->(action) do
+        action.components_set targetId: 'custom_main', data: { data: data_primary }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Alternate data', onClick: ->(action) do
+        action.components_set targetId: 'custom_main', data: { data: data_alt }
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Actions and Events'
+    res.spacer height: 8
+    res.label id: 'custom_action_status', text: 'Action status: idle'
+    res.spacer height: 6
+    res.panels_custom template: 'thumbnail', data: data_primary, onClick: ->(action) do
+      action.components_set targetId: 'custom_action_status', data: { text: 'Action status: clicked' }
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Edge and Advanced'
+    res.spacer height: 8
+    res.label text: 'Non-existent template'
+    res.panels_custom template: 'nonExistentTemplate'
+  end
+end

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

@@ -0,0 +1,70 @@
+json.title 'Test Page (Flow)'
+
+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: 'Flow panels wrap children across rows like text flow with configurable gaps.'
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_flow id: 'flow_main', width: 240, innerPadding: { x: 6, y: 6 }, backgroundColor: '#e6e6e6', childViews: ->(flow) do
+      (1..8).each do |index|
+        flow.button text: "Item #{index}"
+      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: 'Tight gap', onClick: ->(action) do
+        action.components_set targetId: 'flow_main', data: { innerPadding: { x: 2, y: 2 } }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Loose gap', onClick: ->(action) do
+        action.components_set targetId: 'flow_main', data: { innerPadding: { x: 12, y: 12 } }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Align middle', onClick: ->(action) do
+        action.components_set targetId: 'flow_main', data: { align: 'middle' }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Align bottom', onClick: ->(action) do
+        action.components_set targetId: 'flow_main', data: { align: 'bottom' }
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Actions and Events'
+    res.spacer height: 8
+    res.label id: 'flow_action_status', text: 'Hover status: idle'
+    res.spacer height: 6
+    res.panels_flow width: 200, innerPadding: { x: 6, y: 6 }, backgroundColor: '#e6e6e6', onMouseEnter: ->(action) do
+      action.components_set targetId: 'flow_action_status', data: { text: 'Hover status: entered' }
+    end, onMouseLeave: ->(action) do
+      action.components_set targetId: 'flow_action_status', data: { text: 'Hover status: left' }
+    end, childViews: ->(flow) do
+      flow.label text: 'Hover this panel'
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Edge and Advanced'
+    res.spacer height: 8
+    res.label text: 'Empty flow panel'
+    res.panels_flow width: 200, height: 40, backgroundColor: '#f2f2f2', childViews: ->(_flow) do
+    end
+  end
+end

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

@@ -0,0 +1,105 @@
+json.title 'Test Page (Forms)'
+
+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: 'Forms'
+        res.label text: 'Programmatically submit forms or override destinations.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Overview'
+        res.label text: 'Use forms/submit to post form data from buttons, dialogs, or custom flows.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.panels_form(
+          id: 'forms_basic',
+          url: json_ui_garage_url(path: 'forms/generic_post'),
+          method: 'post',
+          childViews: ->(form) do
+            form.fields_text name: 'user[name]', label: 'Name', width: 300, placeholder: 'Full name'
+            form.spacer height: 6
+            form.fields_textarea name: 'user[notes]', label: 'Notes', width: 'matchParent'
+            form.spacer height: 6
+            form.fields_submit text: 'Submit (native)'
+          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: 'forms/submit targetId',
+              onClick: ->(action) do
+                action.forms_submit targetId: 'forms_basic'
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'forms/submit overrideUrl',
+              onClick: ->(action) do
+                action.forms_submit targetId: 'forms_basic', overrideUrl: json_ui_garage_url(path: 'forms/generic_post_all')
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Actions/events'
+        res.spacer height: 8
+        res.label id: 'forms_status', text: 'Status: idle'
+        res.spacer height: 8
+        res.button(
+          text: 'forms/submit with status update',
+          onClick: ->(action) do
+            action.logics_set targetId: 'forms_status', data: { text: 'Status: submitting' }
+            action.forms_submit targetId: 'forms_basic'
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Edge/advanced'
+        res.spacer height: 8
+        res.panels_form(
+          id: 'forms_secondary',
+          url: json_ui_garage_url(path: 'forms/generic_post_all'),
+          method: 'post',
+          childViews: ->(form) do
+            form.fields_text name: 'user[email]', label: 'Email', width: 300, placeholder: 'name@example.com'
+            form.fields_hidden name: 'user[source]', value: 'edge_case'
+          end
+        )
+        res.spacer height: 8
+        res.button(
+          text: 'forms/submit secondary form',
+          onClick: ->(action) do
+            action.forms_submit targetId: 'forms_secondary'
+          end
+        )
+      end
+    )
+  end
+)

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

@@ -0,0 +1,68 @@
+json.title 'Test Page (Grid)'
+
+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: 'Grid panels arrange child views in a responsive grid with min/max box sizing.'
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_grid id: 'grid_main', width: 'matchParent', boxMinWidth: 140, columnGap: 12, rowGap: 12, childViews: ->(box) do
+      (1..6).each do |index|
+        box.panels_vertical height: 70, backgroundColor: '#e6e6e6', align: 'center', childViews: ->(panel) do
+          panel.label text: "Box #{index}"
+        end
+      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: 'Small boxes', onClick: ->(action) do
+        action.components_set targetId: 'grid_main', data: { boxMinWidth: 100, columnGap: 8, rowGap: 8 }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Large boxes', onClick: ->(action) do
+        action.components_set targetId: 'grid_main', data: { boxMinWidth: 180, columnGap: 16, rowGap: 16 }
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Actions and Events'
+    res.spacer height: 8
+    res.label id: 'grid_action_status', text: 'Hover status: idle'
+    res.spacer height: 6
+    res.panels_grid width: 'matchParent', boxMinWidth: 120, columnGap: 8, rowGap: 8, onMouseEnter: ->(action) do
+      action.components_set targetId: 'grid_action_status', data: { text: 'Hover status: entered' }
+    end, onMouseLeave: ->(action) do
+      action.components_set targetId: 'grid_action_status', data: { text: 'Hover status: left' }
+    end, childViews: ->(box) do
+      (1..4).each do |index|
+        box.panels_vertical height: 50, backgroundColor: '#e6e6e6', align: 'center', childViews: ->(panel) do
+          panel.label text: "Tile #{index}"
+        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 grid'
+    res.panels_grid width: 'matchParent', boxMinWidth: 120, columnGap: 8, rowGap: 8, childViews: ->(_box) do
+    end
+  end
+end

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

@@ -0,0 +1,68 @@
+json.title 'Test Page (Horizontal)'
+
+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: 'Horizontal panels lay out children left to right with spacing and alignment controls.'
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_horizontal id: 'horizontal_main', width: 240, backgroundColor: '#e6e6e6', childViews: ->(panel) do
+      panel.button text: 'One'
+      panel.button text: 'Two'
+      panel.button text: 'Three'
+    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: 'Fill equally', onClick: ->(action) do
+        action.components_set targetId: 'horizontal_main', data: { width: 300, distribution: 'fillEqually' }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Space equally', onClick: ->(action) do
+        action.components_set targetId: 'horizontal_main', data: { width: 300, distribution: 'spaceEqually' }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Overlap 3', onClick: ->(action) do
+        action.components_set targetId: 'horizontal_main', data: { distribution: 'overlap-3' }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Align middle', onClick: ->(action) do
+        action.components_set targetId: 'horizontal_main', data: { align: 'middle' }
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Actions and Events'
+    res.spacer height: 8
+    res.label id: 'horizontal_action_status', text: 'Click status: idle'
+    res.spacer height: 6
+    res.panels_horizontal width: 180, height: 60, align: 'middle', backgroundColor: '#e6e6e6', onClick: ->(action) do
+      action.components_set targetId: 'horizontal_action_status', data: { text: 'Click status: clicked' }
+    end, childViews: ->(panel) do
+      panel.label text: 'Click panel'
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Edge and Advanced'
+    res.spacer height: 8
+    res.label text: 'Horizontal with no children'
+    res.panels_horizontal width: 200, height: 40, backgroundColor: '#f2f2f2', childViews: ->(_panel) do
+    end
+  end
+end