glib-web 6.12.0 → 7.0.0.beta1

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

@@ -42,7 +42,7 @@ page.body(
           flow.button(
             text: 'Sample',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_docx_main',
                 data: { url: sample_url }
               )
@@ -52,7 +52,7 @@ page.body(
           flow.button(
             text: 'Reload same',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_docx_main',
                 data: { url: alt_url }
               )
@@ -71,7 +71,7 @@ page.body(
           flow.button(
             text: 'No URL',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_docx_main',
                 data: { url: nil }
               )
@@ -81,7 +81,7 @@ page.body(
           flow.button(
             text: 'Broken URL',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_docx_main',
                 data: { url: missing_url }
               )
@@ -91,7 +91,7 @@ page.body(
           flow.button(
             text: 'Custom messages',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_docx_main',
                 data: {
                   url: missing_url,

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

@@ -36,7 +36,7 @@ page.body(
           flow.button(
             text: 'Default size',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_video_main',
                 data: {
                   width: 560,
@@ -50,7 +50,7 @@ page.body(
           flow.button(
             text: 'Short URL',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_video_main',
                 data: { url: 'https://youtu.be/ATnpEOo3GJA' }
               )
@@ -60,7 +60,7 @@ page.body(
           flow.button(
             text: 'Match parent',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_video_main',
                 data: { width: 'matchParent', height: 240 }
               )
@@ -70,7 +70,7 @@ page.body(
           flow.button(
             text: 'Compact',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_video_main',
                 data: { width: 360, height: 200 }
               )
@@ -96,7 +96,7 @@ page.body(
           flow.button(
             text: 'Wide 16:9',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_video_main',
                 data: { width: 640, height: 360 }
               )
@@ -106,7 +106,7 @@ page.body(
           flow.button(
             text: 'Tall',
             onClick: ->(action) do
-              action.components_set(
+              action.logics_set(
                 targetId: 'multimedia_video_main',
                 data: { width: 360, height: 480 }
               )

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

@@ -16,7 +16,7 @@ page.body childViews: ->(body) do
     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' }
+      action.logics_set targetId: 'pagination_status', data: { text: 'Page changed' }
     end
     res.label id: 'pagination_status', text: 'Page status: idle'
 
@@ -27,19 +27,19 @@ page.body childViews: ->(body) do
     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 }
+        action.logics_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 }
+        action.logics_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 }
+        action.logics_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 }
+        action.logics_set targetId: 'pagination_main', data: { totalVisible: 7 }
       end
     end
 
@@ -51,7 +51,7 @@ page.body childViews: ->(body) do
     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' }
+      action.logics_set targetId: 'pagination_action_status', data: { text: 'Change status: changed' }
     end
 
     res.spacer height: 12

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

@@ -0,0 +1,244 @@
+json.title 'Test Page (Panels Bulk Edit 2)'
+
+page = json_ui_page json
+
+options = [{ text: 'yes', value: 'yes' }, { text: 'no', value: 'no' }]
+source_options = ['Generators', 'Power Station', 'Solar Panels'].map do |source|
+  { text: source, value: source }
+end
+
+default_headers = [
+  { text: 'Month', id: 'month', importable: true, tooltip: { text: 'Month', placement: 'top' } },
+  { text: 'Electricity usage', id: 'electricity_usage', importable: true },
+  { text: 'Gas usage', id: 'gas_usage', importable: true },
+  { text: 'Sources', id: 'sources', importable: true },
+  { text: 'Compliant', id: 'compliant', importable: true }
+]
+
+default_cells = [
+  ->(view) do
+    view.fields_number width: 'matchParent'
+  end,
+  ->(view) do
+    view.fields_number width: 'matchParent'
+  end,
+  ->(view) do
+    view.fields_number width: 'matchParent'
+  end,
+  ->(view) do
+    view.fields_select width: 'matchParent', options: source_options, multiple: true
+  end,
+  ->(view) do
+    view.fields_select width: 'matchParent', options: options
+  end
+]
+
+[
+  { text: 'Month', id: 'month', importable: true },
+  { text: 'Usage (kWh)', id: 'electricity_usage', importable: true },
+  { text: 'Usage (Therms)', id: 'gas_usage', importable: true }
+]
+
+[
+  ->(view) do
+    view.fields_number width: 120
+  end,
+  ->(view) do
+    view.fields_number width: 140
+  end,
+  ->(view) do
+    view.fields_number width: 140
+  end
+]
+
+import_settings = { submitUrl: json_ui_garage_url(path: 'forms/bulk_edit_post2'), paramName: 'user' }
+
+render 'json_ui/garage/test_page/header', json: json, page: page
+
+page.body(
+  childViews: ->(body) do
+    body.panels_responsive(
+      padding: glib_json_padding_body,
+      childViews: ->(res) do
+        res.h2 text: 'Overview'
+        res.p text: 'panels_bulkEdit2 renders an editable grid with import-backed rows and bulk submission events.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.panels_horizontal(
+          align: 'middle',
+          childViews: ->(horizontal) do
+            horizontal.label text: 'Loaded: '
+            horizontal.label id: 'bulk_edit_loaded_count', text: '0'
+            horizontal.spacer width: 12
+            horizontal.label text: 'Selected: '
+            horizontal.label id: 'bulk_edit_selected_count', text: '0'
+            horizontal.spacer width: 12
+            horizontal.chip id: 'bulk_edit_succeeded_count', styleClass: 'success', text: 'Uploaded: 0', displayed: false
+          end
+        )
+        res.spacer height: 8
+        res.panels_bulkEdit2(
+          id: 'bulk_edit_main',
+          width: 'matchParent',
+          paramNameForRowId: 'row_id',
+          # Files with more data rows than this are rejected wholesale with an
+          # error dialog (the header row doesn't count).
+          maxRows: 3,
+          import: import_settings,
+          viewHeaders: default_headers,
+          viewCells: default_cells,
+          onCellChange: ->(action) do
+            action.snackbars_alert debug: true, paramName: 'message', fieldName: 'row'
+          end,
+          onSubmitStart: ->(action) do
+            action.runMultiple(
+              childActions: ->(multiple) do
+                multiple.logics_set targetId: 'bulk_edit_submit_top', data: { disabled: true }
+                multiple.logics_set targetId: 'bulk_edit_submit_bottom', data: { disabled: true }
+                multiple.logics_set targetId: 'bulk_edit_cancel', data: { displayed: true }
+              end
+            )
+          end,
+          onSubmitEnd: ->(action) do
+            action.runMultiple(
+              childActions: ->(multiple) do
+                multiple.logics_set targetId: 'bulk_edit_submit_top', data: { disabled: false }
+                multiple.logics_set targetId: 'bulk_edit_submit_bottom', data: { disabled: false }
+                multiple.logics_set targetId: 'bulk_edit_cancel', data: { displayed: false }
+              end
+            )
+          end,
+          onRowsLoad: ->(action) do
+            action.runMultiple(
+              debug: true,
+              fieldName: 'data',
+              childActions: ->(multiple) do
+                multiple.logics_set(
+                  targetId: 'bulk_edit_loaded_count',
+                  debug: true,
+                  paramName: 'variables',
+                  fieldName: 'data',
+                  conditionalData: {
+                  text: { "count": [{ "var": 'data.loadedRows' }] }
+                  }
+                )
+                multiple.logics_set targetId: 'bulk_edit_submit_top', data: { displayed: true }
+                multiple.logics_set targetId: 'bulk_edit_submit_bottom', data: { displayed: true }
+              end
+            )
+          end,
+          onRowsSelect: ->(action) do
+            action.logics_set(
+              targetId: 'bulk_edit_selected_count',
+              debug: true,
+              paramName: 'variables',
+              fieldName: 'data',
+              conditionalData: {
+              text: { "count": [{ "var": 'data.selectedRows' }] }
+              }
+            )
+          end,
+          onRowsSucceed: ->(action) do
+            action.logics_set(
+              targetId: 'bulk_edit_succeeded_count',
+              debug: true,
+              paramName: 'variables',
+              fieldName: 'data',
+              conditionalData: {
+              text: {
+              "printf": [
+              'Uploaded: {0}',
+              { "count": [{ "var": 'data.succeededRows' }] }
+              ]
+              },
+              displayed: true
+              }
+            )
+          end
+        )
+        res.spacer height: 12
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              id: 'bulk_edit_submit_top',
+              text: 'Submit (top)',
+              displayed: false,
+              onClick: ->(action) do
+                action.forms_submit targetId: 'bulk_edit_main'
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              id: 'bulk_edit_submit_bottom',
+              text: 'Submit (bottom)',
+              displayed: false,
+              onClick: ->(action) do
+                action.forms_submit targetId: 'bulk_edit_main'
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              id: 'bulk_edit_cancel',
+              text: 'Cancel import',
+              displayed: false,
+              onClick: ->(action) do
+                action.components_invoke targetId: 'bulk_edit_main', name: 'cancelImport'
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        # res.h2 text: 'Variants/props'
+        # res.spacer height: 8
+        # res.panels_flow innerPadding: { bottom: 0 }, childViews: ->(flow) do
+        #   flow.button text: 'Default columns', onClick: ->(action) do
+        #     action.logics_set targetId: 'bulk_edit_main', data: { viewHeaders: default_headers, viewCells: default_cells }
+        #   end
+        #   flow.spacer width: 8
+        #   flow.button text: 'Compact columns', onClick: ->(action) do
+        #     action.logics_set targetId: 'bulk_edit_main', data: { viewHeaders: compact_headers, viewCells: compact_cells }
+        #   end
+        #   flow.spacer width: 8
+        #   flow.button text: 'Reset counts', onClick: ->(action) do
+        #     action.runMultiple childActions: ->(multiple) do
+        #       multiple.logics_set targetId: 'bulk_edit_loaded_count', data: { text: '0' }
+        #       multiple.logics_set targetId: 'bulk_edit_selected_count', data: { text: '0' }
+        #       multiple.logics_set targetId: 'bulk_edit_succeeded_count', data: { text: 'Uploaded: 0', displayed: false }
+        #     end
+        #   end
+        # end
+        # res.spacer height: 12
+        # res.hr width: 'matchParent'
+        res.h2 text: 'Actions/events'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              text: 'Submit (forms_submit)',
+              onClick: ->(action) do
+                action.forms_submit targetId: 'bulk_edit_main'
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'Cancel import (invoke)',
+              onClick: ->(action) do
+                action.components_invoke targetId: 'bulk_edit_main', name: 'cancelImport'
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Edge/advanced'
+        res.spacer height: 8
+        res.label text: 'Swap to compact headers then try editing rows before submitting.'
+      end
+    )
+  end
+)

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

@@ -83,13 +83,13 @@ page.body(
       padding: glib_json_padding_body,
       childViews: ->(res) do
         res.h2 text: 'Overview'
-        res.p text: 'panels_bulkEdit3 is the generic bulk-edit table: cells, pagination and one-POST-per-row submission, plus config-driven file parsing, row gates, read-only columns, view chips and submission extras.'
+        res.p text: 'panels_bulkEdit3 is the generic bulk-edit table: bulkEdit2’s skeleton plus config-driven file parsing, row gates, read-only columns, view chips and submission extras.'
         res.spacer height: 12
         res.hr width: 'matchParent'
 
         res.h2 text: 'Basic example (plain CSV)'
         res.spacer height: 8
-        res.p text: 'Without parse config the table takes plain CSVs: header row first, header names as field ids. maxRows 3 rejects oversized files whole.'
+        res.p text: 'Without parse config the table takes plain CSVs: header row first, header names as field ids (the bulkEdit2 shape). maxRows 3 rejects oversized files whole.'
         res.spacer height: 8
         res.panels_horizontal(
           align: 'middle',
@@ -236,7 +236,7 @@ page.body(
             action.runMultiple(
               fieldName: 'data',
               childActions: ->(multiple) do
-                multiple.components_set targetId: 'bulk_edit3_skipped_counter', data: { displayed: true }
+                multiple.logics_set targetId: 'bulk_edit3_skipped_counter', data: { displayed: true }
                 multiple.logics_set(
                   targetId: 'bulk_edit3_skipped_count',
                   paramName: 'variables',

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

@@ -39,7 +39,7 @@ page.body(
             flow.button(
               text: '35% default',
               onClick: ->(action) do
-                action.components_set(
+                action.logics_set(
                   targetId: 'progress_circle_main',
                   data: { value: 35, size: 160, width: 16, color: '#4B56D2', half: nil, text: nil }
                 )
@@ -49,21 +49,21 @@ page.body(
             flow.button(
               text: '65%',
               onClick: ->(action) do
-                action.components_set targetId: 'progress_circle_main', data: { value: 65 }
+                action.logics_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 }
+                action.logics_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 }
+                action.logics_set targetId: 'progress_circle_main', data: { size: 110 }
               end
             )
           end
@@ -82,7 +82,7 @@ page.body(
             flow.button(
               text: 'Half circle + label',
               onClick: ->(action) do
-                action.components_set(
+                action.logics_set(
                   targetId: 'progress_circle_main',
                   data: { value: 80, half: true, text: 'Section A', color: '#9E0A0A', width: 22 }
                 )
@@ -92,7 +92,7 @@ page.body(
             flow.button(
               text: 'Accent color',
               onClick: ->(action) do
-                action.components_set targetId: 'progress_circle_main', data: { color: '#F9C80E', half: nil, text: nil }
+                action.logics_set targetId: 'progress_circle_main', data: { color: '#F9C80E', half: nil, text: nil }
               end
             )
           end
@@ -111,14 +111,14 @@ page.body(
             flow.button(
               text: '0%',
               onClick: ->(action) do
-                action.components_set targetId: 'progress_circle_main', data: { value: '0', half: nil, text: nil }
+                action.logics_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 }
+                action.logics_set targetId: 'progress_circle_main', data: { value: 100, half: nil, text: nil }
               end
             )
           end

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

@@ -32,21 +32,21 @@ page.body(
             flow.button(
               text: 'Align left',
               onClick: ->(action) do
-                action.components_set targetId: 'responsive_main', data: { align: 'left' }
+                action.logics_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' }
+                action.logics_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' }
+                action.logics_set targetId: 'responsive_main', data: { align: 'right' }
               end
             )
           end
@@ -59,7 +59,7 @@ page.body(
         res.spacer height: 6
         res.panels_responsive(
           onClick: ->(action) do
-            action.components_set targetId: 'responsive_action_status', data: { text: 'Click status: clicked' }
+            action.logics_set targetId: 'responsive_action_status', data: { text: 'Click status: clicked' }
           end,
           styleClasses: ['card'],
           padding: { all: 12 },

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

@@ -28,19 +28,19 @@ page.body childViews: ->(body) do
     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 }
+        action.logics_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 }
+        action.logics_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 } }
+        action.logics_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 }
+        action.logics_set targetId: 'scroll_main', data: { padding: nil }
       end
     end
 
@@ -52,7 +52,7 @@ page.body childViews: ->(body) do
     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' }
+      action.logics_set targetId: 'scroll_status', data: { text: 'Scroll status: loaded' }
     end, childViews: ->(scroll) do
       (1..8).each do |index|
         scroll.label text: "Load item #{index}"

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

@@ -50,7 +50,7 @@ page.body(
                 left.button(
                   text: 'Update status',
                   onClick: ->(action) do
-                    action.components_set targetId: 'split_action_status', data: { text: 'Action status: clicked' }
+                    action.logics_set targetId: 'split_action_status', data: { text: 'Action status: clicked' }
                   end
                 )
               end

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

@@ -53,21 +53,21 @@ page.body(
             flow.button(
               text: 'Compact style',
               onClick: ->(action) do
-                action.components_set targetId: 'table_main', data: { styleClass: 'table--compact' }
+                action.logics_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' }
+                action.logics_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 }
+                action.logics_set targetId: 'table_main', data: { styleClass: nil }
               end
             )
           end
@@ -85,10 +85,10 @@ page.body(
             scroll.panels_table(
               height: 'matchParent',
               onScrollToTop: ->(action) do
-                action.components_set targetId: 'table_event_status', data: { text: 'Scroll events: top reached' }
+                action.logics_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' }
+                action.logics_set targetId: 'table_event_status', data: { text: 'Scroll events: bottom reached' }
               end,
               sections: [
               ->(section) do

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

@@ -44,25 +44,25 @@ page.body(
             flow.button(
               text: 'Vertical',
               onClick: ->(action) do
-                action.components_set targetId: 'timeline_main', data: { direction: 'vertical', side: 'start', truncateLine: nil }
+                action.logics_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 }
+                action.logics_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 }
+            #   action.logics_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' }
+                action.logics_set targetId: 'timeline_main', data: { truncateLine: 'both' }
               end
             )
           end
@@ -80,7 +80,7 @@ page.body(
               timeline.label(
                 text: step,
                 onClick: ->(action) do
-                  action.components_set targetId: 'timeline_action_status', data: { text: "Clicked: #{step}" }
+                  action.logics_set targetId: 'timeline_action_status', data: { text: "Clicked: #{step}" }
                 end
               )
             end

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

@@ -28,11 +28,11 @@ page.body childViews: ->(body) do
     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 } }
+        action.logics_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 }
+        action.logics_set targetId: 'ul_main', data: { styleClasses: nil, padding: nil }
       end
     end
 
@@ -44,9 +44,9 @@ page.body childViews: ->(body) do
     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' }
+      action.logics_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' }
+      action.logics_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'