glib-web 4.42.1 → 4.42.3

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

@@ -0,0 +1,144 @@
+json.title 'Test Page (Storage Items)'
+
+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: 'Storage Items'
+        res.label text: 'Local storage set/get/remove/clear actions.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Overview'
+        res.label text: 'Use storage item actions for lightweight client persistence.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.button(
+          text: 'storageItems/set',
+          onClick: ->(action) do
+            action.storageItems_set key: 'glib_storage', value: "test_storage_#{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: 'storageItems/get',
+              onClick: ->(action) do
+                action.storageItems_get key: 'glib_storage'
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'storageItems/remove',
+              onClick: ->(action) do
+                action.storageItems_remove key: 'glib_storage'
+              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: 'storage_status', text: 'Status: idle'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          width: 'matchParent',
+          childViews: ->(flow) do
+            flow.button(
+              text: 'storageItems/set (onSet)',
+              onClick: ->(action) do
+                action.storageItems_set(
+                  key: 'glib_storage',
+                  value: "event_storage_#{DateTime.current.to_i}",
+                  onSet: ->(subaction) do
+                    subaction.runMultiple(
+                      childActions: ->(ssaction) do
+                        ssaction.logics_set targetId: 'storage_status', data: { text: 'Status: saved' }
+                        ssaction.snackbars_alert message: 'Saved'
+                      end
+                    )
+                  end
+                )
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'storageItems/get (onGet)',
+              onClick: ->(action) do
+                action.storageItems_get(
+                  key: 'glib_storage',
+                  onGet: ->(subaction) do
+                    subaction.logics_set targetId: 'storage_status', data: { text: 'Status: fetched' }
+                  end
+                )
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'storageItems/remove (onRemove)',
+              onClick: ->(action) do
+                action.storageItems_remove(
+                  key: 'glib_storage',
+                  onRemove: ->(subaction) do
+                    subaction.runMultiple(
+                      childActions: ->(ssaction) do
+                        ssaction.logics_set targetId: 'storage_status', data: { text: 'Status: removed' }
+                        ssaction.snackbars_alert message: 'Removed'
+                      end
+                    )
+                  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: 'storageItems/clear',
+          onClick: ->(action) do
+            action.storageItems_clear(
+              key: 'glib_storage',
+              onClear: ->(subaction) do
+                subaction.runMultiple(
+                  childActions: ->(ssaction) do
+                    ssaction.logics_set targetId: 'storage_status', data: { text: 'Status: cleared' }
+                    ssaction.snackbars_alert message: 'Cleared'
+                  end
+                )
+              end
+            )
+          end
+        )
+      end
+    )
+  end
+)

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

@@ -0,0 +1,99 @@
+json.title 'Test Page (Table)'
+
+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: 'Table panels render rows with columns and support pagination and bulk actions.'
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_table id: 'table_main', import: { submitUrl: json_ui_garage_url(path: 'forms/generic_post'), paramName: 'table' }, export: { label: 'Export', fileName: 'table_export.csv' }, sections: [
+      ->(section) do
+        section.header cellViews: ->(header) do
+          header.label text: 'Name'
+          header.label text: 'Status'
+        end
+
+        items = ['Alpha', 'Bravo', 'Charlie']
+        section.rows objects: items, builder: ->(row, item, index) do
+          status = index.even? ? 'Active' : 'Paused'
+          row.default cellViews: ->(cell) do
+            cell.label text: item
+            cell.label text: status
+          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: 'Compact style', onClick: ->(action) do
+        action.components_set targetId: 'table_main', data: { styleClass: 'table--compact' }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Striped style', onClick: ->(action) do
+        action.components_set targetId: 'table_main', data: { styleClass: 'table--striped' }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Clear style', onClick: ->(action) do
+        action.components_set targetId: 'table_main', data: { styleClass: nil }
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Actions and Events'
+    res.spacer height: 8
+    res.label id: 'table_event_status', text: 'Scroll events: idle'
+    res.spacer height: 6
+    res.panels_table height: 160, onScrollToTop: ->(action) do
+      action.components_set targetId: 'table_event_status', data: { text: 'Scroll events: top reached' }
+    end, onScrollToBottom: ->(action) do
+      action.components_set targetId: 'table_event_status', data: { text: 'Scroll events: bottom reached' }
+    end, sections: [
+      ->(section) do
+        section.header cellViews: ->(header) do
+          header.label text: 'Item'
+          header.label text: 'Value'
+        end
+        section.rows builder: ->(row) do
+          (1..12).each do |index|
+            row.default cellViews: ->(cell) do
+              cell.label text: "Row #{index}"
+              cell.label text: "Value #{index}"
+            end
+          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 table (no rows)'
+    res.panels_table sections: [
+      ->(section) do
+        section.header cellViews: ->(header) do
+          header.label text: 'Column A'
+          header.label text: 'Column B'
+        end
+        section.rows builder: ->(_row) do
+        end
+      end
+    ]
+  end
+end

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

@@ -0,0 +1,97 @@
+json.title 'Test Page (Timeline)'
+
+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: 'Timeline panels render ordered events with optional icons and layout direction.'
+        timeline_events = [
+        { icon: 'check_circle', color: 'green' },
+        { icon: 'hourglass_empty', color: 'blue' },
+        { icon: 'flag', color: 'orange' }
+        ]
+        [
+        { icon: 'check_circle', color: 'green', styleClasses: ['outlined'] },
+        { icon: 'hourglass_empty', color: 'blue', styleClasses: ['outlined'] },
+        { icon: 'flag', color: 'orange', styleClasses: ['outlined'] }
+        ]
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Basic'
+        res.spacer height: 8
+        res.panels_timeline(
+          id: 'timeline_main',
+          events: timeline_events,
+          childViews: ->(timeline) do
+            timeline.label text: 'Submitted'
+            timeline.label text: 'Processing'
+            timeline.label text: 'Completed'
+          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: 'Vertical',
+              onClick: ->(action) do
+                action.components_set targetId: 'timeline_main', data: { direction: 'vertical', side: 'start', truncateLine: nil }
+              end
+            )
+            flow.spacer width: 4
+            flow.button(
+              text: 'Horizontal',
+              onClick: ->(action) do
+                action.components_set targetId: 'timeline_main', data: { direction: 'horizontal', side: 'end', truncateLine: nil }
+              end
+            )
+            flow.spacer width: 4
+            # flow.button text: 'Outlined dots', onClick: ->(action) do
+            #   action.components_set targetId: 'timeline_main', data: { events: outline_events }
+            # end
+            # flow.spacer width: 4
+            flow.button(
+              text: 'Truncate both',
+              onClick: ->(action) do
+                action.components_set targetId: 'timeline_main', data: { truncateLine: 'both' }
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Actions and Events'
+        res.spacer height: 8
+        res.label id: 'timeline_action_status', text: 'Click a step'
+        res.spacer height: 6
+        res.panels_timeline(
+          events: timeline_events,
+          childViews: ->(timeline) do
+            ['Step A', 'Step B', 'Step C'].each do |step|
+              timeline.label(
+                text: step,
+                onClick: ->(action) do
+                  action.components_set targetId: 'timeline_action_status', data: { text: "Clicked: #{step}" }
+                end
+              )
+            end
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Edge and Advanced'
+        res.spacer height: 8
+        res.label text: 'Timeline with no child views'
+        res.panels_timeline events: []
+      end
+    )
+  end
+)

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

@@ -0,0 +1,86 @@
+json.title 'Test Page (Timeouts)'
+
+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: 'Timeouts'
+        res.label text: 'Schedule actions to run later or on an interval.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Timeouts (once)'
+        res.spacer height: 8
+        res.label id: 'timeout_once_status', text: 'Waiting for timeout...'
+        res.spacer height: 8
+        res.button(
+          text: 'timeouts/set (1s)',
+          onClick: ->(action) do
+            action.timeouts_set(
+              interval: 1000,
+              onTimeout: ->(subaction) do
+                subaction.runMultiple(
+                  childActions: ->(multi) do
+                    multi.logics_set targetId: 'timeout_once_status', data: { text: 'Timeout fired' }
+                    multi.snackbars_alert message: 'Timeout elapsed'
+                  end
+                )
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Timeouts (repeat)'
+        res.spacer height: 8
+        res.label id: 'timeout_repeat_status', text: 'Not running'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          width: 'matchParent',
+          childViews: ->(flow) do
+            flow.button(
+              text: 'timeouts/set repeat (2s)',
+              onClick: ->(action) do
+                action.runMultiple(
+                  childActions: ->(multi) do
+                    multi.logics_set targetId: 'timeout_repeat_status', data: { text: 'Running...' }
+                    multi.timeouts_set(
+                      timerId: 'timeout-repeat',
+                      interval: 2000,
+                      repeat: true,
+                      onTimeout: ->(subaction) do
+                        subaction.logics_set targetId: 'timeout_repeat_status', data: { text: 'Last tick fired' }
+                        subaction.snackbars_alert message: 'Repeat timeout elapsed'
+                      end
+                    )
+                  end
+                )
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'timeouts/clear repeat',
+              onClick: ->(action) do
+                action.runMultiple(
+                  childActions: ->(multi) do
+                    multi.timeouts_clear timerId: 'timeout-repeat', repeat: true
+                    multi.logics_set targetId: 'timeout_repeat_status', data: { text: 'Stopped' }
+                  end
+                )
+              end
+            )
+          end
+        )
+      end
+    )
+  end
+)

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

@@ -0,0 +1,68 @@
+json.title 'Test Page (Ul)'
+
+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: 'Ul panels render unordered lists similar to HTML ul/li.'
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_ul id: 'ul_main', childViews: ->(li) do
+      li.label text: 'First item'
+      li.label text: 'Second item'
+      li.label text: 'Third item'
+    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: 'Card style', onClick: ->(action) do
+        action.components_set targetId: 'ul_main', data: { styleClasses: ['card'], padding: { all: 10 } }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Clear style', onClick: ->(action) do
+        action.components_set targetId: 'ul_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: 'ul_action_status', text: 'Hover status: idle'
+    res.spacer height: 6
+    res.panels_ul onMouseEnter: ->(action) do
+      action.components_set targetId: 'ul_action_status', data: { text: 'Hover status: entered' }
+    end, onMouseLeave: ->(action) do
+      action.components_set targetId: 'ul_action_status', data: { text: 'Hover status: left' }
+    end, childViews: ->(li) do
+      li.label text: 'Hover this list'
+      li.label text: 'Second item'
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Edge and Advanced'
+    res.spacer height: 8
+    res.label text: 'Nested list'
+    res.panels_ul childViews: ->(li) do
+      li.label text: 'Parent item'
+      li.panels_ul childViews: ->(inner) do
+        inner.label text: 'Child item A'
+        inner.label text: 'Child item B'
+      end
+    end
+  end
+end

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

@@ -0,0 +1,68 @@
+json.title 'Test Page (Vertical)'
+
+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: 'Vertical panels stack child views from top to bottom with optional alignment and distribution.'
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_vertical id: 'vertical_main', width: 200, 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: 'vertical_main', data: { height: 180, distribution: 'fillEqually' }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Space equally', onClick: ->(action) do
+        action.components_set targetId: 'vertical_main', data: { height: 180, distribution: 'spaceEqually' }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Align center', onClick: ->(action) do
+        action.components_set targetId: 'vertical_main', data: { align: 'center' }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Align right', onClick: ->(action) do
+        action.components_set targetId: 'vertical_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: 'vertical_action_status', text: 'Click status: idle'
+    res.spacer height: 6
+    res.panels_vertical width: 160, height: 60, align: 'center', backgroundColor: '#e6e6e6', onClick: ->(action) do
+      action.components_set targetId: 'vertical_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: 'Empty vertical panel'
+    res.panels_vertical width: 200, height: 80, backgroundColor: '#f2f2f2', childViews: ->(_panel) do
+    end
+  end
+end

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

@@ -0,0 +1,64 @@
+json.title 'Test Page (Web)'
+
+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: 'Web panels embed external web content within a panel container.'
+
+    url_primary = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'
+    url_alt = 'https://example.com'
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Basic'
+    res.spacer height: 8
+    res.panels_web id: 'web_main', width: 'matchParent', height: 300, url: url_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: 'PDF', onClick: ->(action) do
+        action.components_set targetId: 'web_main', data: { url: url_primary }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Example.com', onClick: ->(action) do
+        action.components_set targetId: 'web_main', data: { url: url_alt }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Short height', onClick: ->(action) do
+        action.components_set targetId: 'web_main', data: { height: 180 }
+      end
+      flow.spacer width: 4
+      flow.button text: 'Tall height', onClick: ->(action) do
+        action.components_set targetId: 'web_main', data: { height: 360 }
+      end
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Actions and Events'
+    res.spacer height: 8
+    res.label id: 'web_action_status', text: 'Load status: idle'
+    res.spacer height: 6
+    res.panels_web width: 'matchParent', height: 200, url: url_alt, onLoad: ->(action) do
+      action.components_set targetId: 'web_action_status', data: { text: 'Load status: loaded' }
+    end
+
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+
+    res.h2 text: 'Edge and Advanced'
+    res.spacer height: 8
+    res.label text: 'Small viewport'
+    res.panels_web width: 'matchParent', height: 120, url: url_primary
+  end
+end