glib-web 4.42.2 → 4.42.4

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

@@ -0,0 +1,64 @@
+json.title 'Test Page (Pagination)'
+
+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: 'Pagination panels render page controls with change events.'
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_pagination id: 'pagination_main', length: 10, value: 1, onChange: ->(action) do
+      action.components_set targetId: 'pagination_status', data: { text: 'Page changed' }
+    end
+    res.label id: 'pagination_status', text: 'Page status: idle'
+
+    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: 'Page 1', onClick: ->(action) do
+        action.components_set targetId: 'pagination_main', data: { value: 1 }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Page 5', onClick: ->(action) do
+        action.components_set targetId: 'pagination_main', data: { value: 5 }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Show 3', onClick: ->(action) do
+        action.components_set targetId: 'pagination_main', data: { totalVisible: 3 }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Show 7', onClick: ->(action) do
+        action.components_set targetId: 'pagination_main', data: { totalVisible: 7 }
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Actions and Events'
+    res.spacer height: 8
+    res.label id: 'pagination_action_status', text: 'Change status: idle'
+    res.spacer height: 6
+    res.panels_pagination length: 4, value: 1, onChange: ->(action) do
+      action.components_set targetId: 'pagination_action_status', data: { text: 'Change status: changed' }
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Edge and Advanced'
+    res.spacer height: 8
+    res.label text: 'Single-page pagination'
+    res.panels_pagination length: 1, value: 1, totalVisible: 1
+  end
+end

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

@@ -0,0 +1,113 @@
+json.title 'Test Page (Panels Actions)'
+
+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: 'Panels'
+        res.label text: 'Scroll-related panel actions.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Overview'
+        res.label text: 'Use panels/scrollTo actions to bring content into view programmatically.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.panels_scroll id: 'panels_action_scroll', height: 180, width: 'matchParent', childViews: ->(scroll) do
+          scroll.label text: 'Top'
+          (1..8).each do |index|
+            scroll.label text: "Scrollable item #{index}"
+          end
+          scroll.label id: 'scroll_anchor', text: 'Scroll anchor'
+          (9..16).each do |index|
+            scroll.label text: "Scrollable item #{index}"
+          end
+          scroll.label text: 'Bottom'
+        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: 'panels/scrollToBottom (no animate)',
+              onClick: ->(action) do
+                action.panels_scrollToBottom animate: false
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'panels/scrollTo (placement: top)',
+              onClick: ->(action) do
+                action.panels_scrollTo viewId: 'scroll_anchor', placement: 'top'
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Actions/events'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          width: 'matchParent',
+          childViews: ->(flow) do
+            flow.button(
+              text: 'panels/scrollToBottom',
+              onClick: ->(action) do
+                action.panels_scrollToBottom animate: true, onScroll: ->(subaction) do
+                  subaction.dialogs_alert message: 'Bottom reached'
+                end
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'panels/scrollTo anchor',
+              onClick: ->(action) do
+                action.panels_scrollTo \
+                  viewId: 'scroll_anchor',
+                  force: true,
+                  animate: true,
+                  placement: 'top',
+                  onScroll: ->(subaction) do
+                    subaction.dialogs_alert message: 'Anchor in view'
+                  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: 'panels/scrollTo (force + no animate)',
+          onClick: ->(action) do
+            action.panels_scrollTo viewId: 'scroll_anchor', force: true, animate: false, placement: 'top'
+          end
+        )
+      end
+    )
+  end
+)

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

@@ -0,0 +1,112 @@
+json.title 'Test Page (Popovers)'
+
+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: 'Popovers'
+        res.label text: 'Inline and server-driven popover actions.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Overview'
+        res.label text: 'Popovers can be built inline or loaded from the server and anchored to a target.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.label id: 'popover_target', text: 'Popover anchor'
+        res.spacer height: 8
+        res.button(
+          text: 'popovers/show menu',
+          onClick: ->(action) do
+            action.popovers_show \
+              key: 'popover_menu',
+              placement: 'bottom-start',
+              targetId: 'popover_target',
+              content: ->(dialog) do
+                dialog.body styleClass: 'popover-menu', padding: glib_json_padding_body, childViews: ->(menu) do
+                  menu.label text: 'Item 1', styleClass: 'popover-menu-item', onClick: ->(subaction) do
+                    subaction.popovers_close key: 'popover_menu'
+                  end
+                  menu.label text: 'Item 2', styleClass: 'popover-menu-item', onClick: ->(subaction) do
+                    subaction.popovers_close key: 'popover_menu'
+                  end
+                  menu.label text: 'Item 3', styleClass: 'popover-menu-item', onClick: ->(subaction) do
+                    subaction.popovers_close key: 'popover_menu'
+                  end
+                end
+              end
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Variants/props'
+        res.spacer height: 8
+        res.button(
+          text: 'popovers/open (server)',
+          onClick: ->(action) do
+            action.popovers_open url: json_ui_garage_url(path: 'views/popovers_open', key: 'server_popover'), key: 'server_popover'
+          end
+        )
+        res.spacer height: 4
+        res.button(
+          text: 'popovers/open (updateExisting)',
+          onClick: ->(action) do
+            action.popovers_open \
+              url: json_ui_garage_url(path: 'views/popovers_open', key: 'server_popover'),
+              key: 'server_popover',
+              updateExisting: true
+          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: 'popovers_status', text: 'Status: open'
+        res.spacer height: 8
+        res.button(
+          text: 'popovers/close menu',
+          onClick: ->(action) do
+            action.popovers_close key: 'popover_menu'
+            action.logics_set targetId: 'popovers_status', data: { text: 'Status: closed' }
+          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: 'popovers/show (top-end)',
+          onClick: ->(action) do
+            action.popovers_show \
+              key: 'popover_note',
+              placement: 'top-end',
+              targetId: 'popover_target',
+              content: ->(dialog) do
+                dialog.body padding: glib_json_padding_body, childViews: ->(menu) do
+                  menu.label text: 'Pinned note'
+                end
+              end
+          end
+        )
+      end
+    )
+  end
+)

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

@@ -0,0 +1,119 @@
+json.title 'Test Page (Progress Circle)'
+
+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: 'ProgressCircle visualizes progress with configurable size, stroke width, and optional text.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.progressCircle(
+          id: 'progress_circle_main',
+          size: 160,
+          value: 35,
+          width: 16,
+          color: '#4B56D2'
+        )
+
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Variants and props'
+        res.label text: 'Adjust value, size, and stroke width.'
+        res.spacer height: 8
+        res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
+          flow.button(
+            text: '35% default',
+            onClick: ->(action) do
+              action.components_set(
+                targetId: 'progress_circle_main',
+                data: { value: 35, size: 160, width: 16, color: '#4B56D2', half: nil, text: nil }
+              )
+            end
+          )
+          flow.spacer width: 6
+          flow.button(
+            text: '65%',
+            onClick: ->(action) do
+              action.components_set targetId: 'progress_circle_main', data: { value: 65 }
+            end
+          )
+          flow.spacer width: 6
+          flow.button(
+            text: 'Thick stroke',
+            onClick: ->(action) do
+              action.components_set targetId: 'progress_circle_main', data: { width: 28 }
+            end
+          )
+          flow.spacer width: 6
+          flow.button(
+            text: 'Small size',
+            onClick: ->(action) do
+              action.components_set targetId: 'progress_circle_main', data: { size: 110 }
+            end
+          )
+        end
+
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Actions and events'
+        res.label text: 'Swap color and label to confirm metadata rendering.'
+        res.spacer height: 8
+        res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
+          flow.button(
+            text: 'Half circle + label',
+            onClick: ->(action) do
+              action.components_set(
+                targetId: 'progress_circle_main',
+                data: { value: 80, half: true, text: 'Section A', color: '#9E0A0A', width: 22 }
+              )
+            end
+          )
+          flow.spacer width: 6
+          flow.button(
+            text: 'Accent color',
+            onClick: ->(action) do
+              action.components_set targetId: 'progress_circle_main', data: { color: '#F9C80E', half: nil, text: nil }
+            end
+          )
+        end
+
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Edge and advanced'
+        res.label text: 'Confirm 0% and 100% values render correctly.'
+        res.spacer height: 8
+        res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
+          flow.button(
+            text: '0%',
+            onClick: ->(action) do
+              action.components_set targetId: 'progress_circle_main', data: { value: 0, half: nil, text: nil }
+            end
+          )
+          flow.spacer width: 6
+          flow.button(
+            text: '100%',
+            onClick: ->(action) do
+              action.components_set targetId: 'progress_circle_main', data: { value: 100, half: nil, text: nil }
+            end
+          )
+        end
+      end
+    )
+  end
+)

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

@@ -0,0 +1,100 @@
+json.title 'Test Page (Responsive)'
+
+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: 'Responsive panels arrange columns based on breakpoints and alignment.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Basic'
+        res.spacer height: 8
+        res.panels_responsive(
+          id: 'responsive_main',
+          width: 'matchParent',
+          childViews: ->(grid) do
+            grid.label text: 'Label inside responsive'
+          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: 'Align left',
+              onClick: ->(action) do
+                action.components_set targetId: 'responsive_main', data: { align: 'left' }
+              end
+            )
+            flow.spacer width: 4
+            flow.button(
+              text: 'Align center',
+              onClick: ->(action) do
+                action.components_set targetId: 'responsive_main', data: { align: 'center' }
+              end
+            )
+            flow.spacer width: 4
+            flow.button(
+              text: 'Align right',
+              onClick: ->(action) do
+                action.components_set targetId: 'responsive_main', data: { align: 'right' }
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Actions and Events'
+        res.spacer height: 8
+        res.label id: 'responsive_action_status', text: 'Click status: idle'
+        res.spacer height: 6
+        res.panels_responsive(
+          onClick: ->(action) do
+            action.components_set targetId: 'responsive_action_status', data: { text: 'Click status: clicked' }
+          end,
+          styleClasses: ['card'],
+          padding: { all: 12 },
+          childViews: ->(grid) do
+            grid.panels_column(
+              xs: { cols: 12 },
+              childViews: ->(col) do
+                col.label text: 'Click this panel'
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Edge and Advanced'
+        res.spacer height: 8
+        res.label text: 'Column hidden on medium screens and below'
+        res.panels_responsive(
+          width: 'matchParent',
+          childViews: ->(grid) do
+            grid.panels_column(
+              mdAndDown: { hide: true },
+              lg: { cols: 6 },
+              childViews: ->(col) do
+                col.label text: 'Visible on large screens only'
+              end
+            )
+            grid.panels_column(
+              lg: { cols: 6 },
+              childViews: ->(col) do
+                col.label text: 'Always visible'
+              end
+            )
+          end
+        )
+      end
+    )
+  end
+)

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

@@ -0,0 +1,77 @@
+json.title 'Test Page (Scroll)'
+
+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: 'Scroll panels provide a container with overflow handling for long content.'
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_scroll id: 'scroll_main', height: 160, width: 'matchParent', childViews: ->(scroll) do
+      (1..12).each do |index|
+        scroll.label text: "Scrollable 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: 'Short', onClick: ->(action) do
+        action.components_set targetId: 'scroll_main', data: { height: 120 }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Tall', onClick: ->(action) do
+        action.components_set targetId: 'scroll_main', data: { height: 240 }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Add padding', onClick: ->(action) do
+        action.components_set targetId: 'scroll_main', data: { padding: { all: 12 } }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Clear padding', onClick: ->(action) do
+        action.components_set targetId: 'scroll_main', data: { 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: 'scroll_status', text: 'Scroll status: idle'
+    res.spacer height: 6
+    res.panels_scroll height: 120, onLoad: ->(action) do
+      action.components_set targetId: 'scroll_status', data: { text: 'Scroll status: loaded' }
+    end, childViews: ->(scroll) do
+      (1..8).each do |index|
+        scroll.label text: "Load item #{index}"
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Edge and Advanced'
+    res.spacer height: 8
+    res.label text: 'Nested scroll'
+    res.panels_scroll height: 140, childViews: ->(outer) do
+      outer.label text: 'Outer start'
+      outer.panels_scroll height: 80, childViews: ->(inner) do
+        (1..6).each do |index|
+          inner.label text: "Inner item #{index}"
+        end
+      end
+      outer.label text: 'Outer end'
+    end
+  end
+end

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

@@ -0,0 +1,82 @@
+json.title 'Test Page (Split)'
+
+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: 'Split panels provide left, center, and right sub-panels for multi-column layouts.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Basic'
+        res.spacer height: 8
+        res.panels_split(
+          id: 'split_main',
+          width: 'matchParent',
+          content: ->(content) do
+            content.left(
+              childViews: ->(left) do
+                left.label text: 'Left'
+              end
+            )
+            content.center(
+              childViews: ->(center) do
+                center.label text: 'Center content'
+              end
+            )
+            content.right(
+              childViews: ->(right) do
+                right.label text: 'Right'
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Actions and Events'
+        res.spacer height: 8
+        res.label id: 'split_action_status', text: 'Action status: idle'
+        res.spacer height: 6
+        res.panels_split(
+          width: 'matchParent',
+          content: ->(content) do
+            content.left(
+              childViews: ->(left) do
+                left.button(
+                  text: 'Update status',
+                  onClick: ->(action) do
+                    action.components_set targetId: 'split_action_status', data: { text: 'Action status: clicked' }
+                  end
+                )
+              end
+            )
+            content.center(
+              childViews: ->(center) do
+                center.label text: 'Center'
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Edge and Advanced'
+        res.spacer height: 8
+        res.label text: 'Split with only center content'
+        res.panels_split(
+          width: 'matchParent',
+          content: ->(content) do
+            content.center(
+              childViews: ->(center) do
+                center.label text: 'Only center is defined'
+              end
+            )
+          end
+        )
+      end
+    )
+  end
+)