glib-web 4.39.0 → 4.39.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 04bdbf508e9bae2d875e880a1ccff951cacb80d7eae24a543e82a816d9eaff4f
-  data.tar.gz: 3f209d236fafbb17c2a40a5cf570bfd5166be900059abbf71b0b652260e035ec
+  metadata.gz: acbdde8fcc5033a60d976bf56fc3222d3ab1e7e9a138c65c326e3e16912ed729
+  data.tar.gz: 0b4ab5237c244659ddd40351b3b480fcb76a04e103aa1660e8c63f246d72333b
 SHA512:
-  metadata.gz: 480b89089e395f1b123bab2e0b161d485406eb537c215fab96c464e8be22bd7e42a44d7ef460cf37d32396642dcf37eb46afe7625bae126e19cae89d3870f1bc
-  data.tar.gz: 3ad20d4a121a87e14b496ad5e179b4f7db2be6812a7bc086086e000ec12c52558b6768192300cdcd273a676824beed495d5db8a4fa97854aff76957310f6fee3
+  metadata.gz: 5b68ef7f7342522130b45f15b5216d07ae9df74d2267b5590ae3a7ed049d97419b4e599ba6db66bc5ba2f21d41a58afe653a547216194b331a28b2996d376287
+  data.tar.gz: 6d6d29eb399863ca102ad6658f39f78f5b69bd7c6353b14be961270de7f5ecf07b6906899e3e8bc2630f1d744e09929efe4ac2a3910a78c4a2b7ec6feb7ec110

data/app/controllers/concerns/glib/auth/policy.rb

@@ -9,6 +9,14 @@ module Glib::Auth
       include Overrides
       extend ClassMethods
 
+      class_attribute :glib_permission_test_callback
+
+      # Controllers can override this callback to implement additional permission check logics
+      # that are implemented outside of policies, which would have been skipped by the permission test.
+      glib_on_permission_test do
+        # Do nothing by default
+      end
+
       # TODO: Ultimately we want to uncomment this line, but:
       # - Need to be able to set aside some time to run rspec tests to ensure nothing gets broken
       # - Need to find a solution where we can reuse a single public policy
@@ -104,6 +112,7 @@ module Glib::Auth
       permission_test = params[:__glib_permission_test].present?
 
       if permission_test
+        instance_exec(&self.class.glib_permission_test_callback)
         render status: 200, json: { status: 'ok' }
       end
     end
@@ -112,6 +121,10 @@ module Glib::Auth
     end
 
     module ClassMethods
+      def glib_on_permission_test(&block)
+        self.glib_permission_test_callback = block
+      end
+
       # rubocop:disable Style/ClassVars
       def glib_auth_init
         @@__glib_auth_init = true

data/app/views/json_ui/garage/actions/_dialogs.json.jbuilder

@@ -5,8 +5,8 @@ end
 
 section.rows builder: ->(template) do
   template.thumbnail title: 'dialogs/alert', onClick: ->(action) do
-    action.dialogs_alert message: 'This is an alert dialog', onClose: ->(action) do
-      action.snackbars_alert message: 'Closed'
+    action.dialogs_alert message: 'This is an alert dialog', onClose: ->(subaction) do
+      subaction.snackbars_alert message: 'Closed'
     end
   end
 

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

@@ -37,7 +37,7 @@ page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', p
       template.fields_text width: 'matchParent', name: 'question', label: 'Question', placeholder: 'Question'
       template.fields_richText width: 'matchParent', name: 'description', label: 'Desc', placeholder: 'Desc'
 
-      form.panels_responsive id: 'responsive_{{entryIndex}}', childViews: ->(column) do
+      template.panels_responsive id: 'responsive_{{entryIndex}}', childViews: ->(column) do
           column.panels_split width: 'matchParent', content: ->(split) do
             split.center childViews: ->(center) do
               center.fields_dynamicSelect \
@@ -51,7 +51,7 @@ page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', p
           end
 
           options = [:rating, :yes_no, :choices, :unspecified]
-          template.fields_select \
+          column.fields_select \
             width: 'matchParent',
             name: 'type',
             label: 'Answer Type',

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

@@ -58,7 +58,7 @@ page.form \
      form.h2 text: 'Field Upload', styleClass: 'pb-4'
      form.label text: 'placeholder image', styleClass: 'pb-1'
      form.panels_flow styleClass: 'align-center', xs: { gap: { all: 4 } }, childViews: ->(flow) do
-       form.fields_upload properties.merge(
+       flow.fields_upload properties.merge(
          name: 'user[file_placeholderView]',
          id: 'pv1',
          placeholderView: { type: 'image', url: image&.url, width: 144, height: 144 }

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

@@ -5,13 +5,13 @@ render "#{@path_prefix}/nav_menu", json: json, page: page
 
 page.scroll childViews: ->(scroll) do
   scroll.panels_vertical padding: glib_json_padding_body, childViews: ->(vertical) do
-    scroll.h2 text: 'Partial update'
-    scroll.spacer height: 8
-    scroll.label text: 'The content below will be updated. This is a more efficient alternative to windows_reload.'
-    scroll.spacer height: 8
-    scroll.label text: 'The updated content should be committed to the page history as the user navigates back and forward.'
-    scroll.spacer height: 18
-    scroll.panels_vertical id: 'greeting', childViews: ->(inner) do
+    vertical.h2 text: 'Partial update'
+    vertical.spacer height: 8
+    vertical.label text: 'The content below will be updated. This is a more efficient alternative to windows_reload.'
+    vertical.spacer height: 8
+    vertical.label text: 'The updated content should be committed to the page history as the user navigates back and forward.'
+    vertical.spacer height: 18
+    vertical.panels_vertical id: 'greeting', childViews: ->(inner) do
       inner.fields_hidden name: 'name', value: '<uninitialized>'
       inner.label text: 'Hello'
     end
@@ -21,11 +21,11 @@ page.scroll childViews: ->(scroll) do
   scroll.hr width: 'matchParent'
 
   scroll.panels_form url: json_ui_garage_url(path: 'forms/partial_update_response'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
-    scroll.h2 text: 'Update via POST request'
-    scroll.spacer height: 8
-    scroll.fields_text name: 'name', width: 'matchParent', label: 'Name', value: 'Jane'
-    scroll.spacer height: 8
-    scroll.fields_submit text: 'Submit'
+    form.h2 text: 'Update via POST request'
+    form.spacer height: 8
+    form.fields_text name: 'name', width: 'matchParent', label: 'Name', value: 'Jane'
+    form.spacer height: 8
+    form.fields_submit text: 'Submit'
   end
 
   scroll.spacer height: 18

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

@@ -20,7 +20,7 @@ page.form id: 'form', url: json_ui_garage_url(path: 'forms/generic_post'), metho
     options = languages.map do |k, v|
       { value: k, text: v }
     end
-    form.fields_select \
+    column.fields_select \
       name: 'user[city]',
       width: 'matchParent',
       clearable: true,

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

@@ -153,6 +153,61 @@ page.form \
     form.label id: 'radiolabel1', text: 'Yes'
     form.label id: 'radiolabel2', text: 'No'
 
+    form.spacer height: 20
+
+    form.fields_radioGroup name: 'user[radio10]', value: 'no', childViews: ->(group) do
+      group.panels_horizontal childViews: ->(horizontal) do
+        horizontal.fields_radio label: 'Hourly rate', value: 'hourly_rate'
+        horizontal.spacer width: 20
+        horizontal.fields_radio label: 'Fixed amount', value: 'fixed_amount'
+      end
+    end, onChangeAndLoad: ->(action) do
+      action.runMultiple childActions: ->(multiple) do
+        multiple.logics_set \
+          targetId: 'pricing_hourly_rate_field',
+          conditionalData: {
+            displayed: {
+              "==": [
+                { "var": 'user[radio10]' },
+                'hourly_rate'
+              ]
+            }
+          }
+
+        multiple.logics_set \
+          targetId: 'pricing_fixed_amount_field',
+          conditionalData: {
+            displayed: {
+              "==": [
+                { "var": 'user[radio10]' },
+                'fixed_amount'
+              ]
+            }
+          }
+      end
+    end
+
+    form.fields_number \
+      id: 'pricing_hourly_rate_field',
+      name: 'user[pricing_hourly_rate]',
+      width: 160,
+      styleClass: 'outlined',
+      leftIcon: 'attach_money',
+      rightText: '.00'
+
+    form.panels_horizontal \
+      id: 'pricing_fixed_amount_field', \
+      width: 'matchParent', \
+      align: 'middle', \
+      childViews: ->(horizontal) do
+        horizontal.fields_number \
+          name: 'user[pricing_fixed_amount]',
+          width: 160,
+          styleClass: 'outlined',
+          leftIcon: 'attach_money',
+          rightText: '.00'
+      end
+
     form.spacer height: 20
     form.h1 text: 'Radio Group'
     form.fields_radioGroup \
@@ -372,19 +427,19 @@ page.form \
       id: 'panel1',
       width: 'matchParent',
       childViews: ->(res) do
-        form.fields_text name: 'user[loadif_target2]', width: 'matchParent', value: 'Value 1'
-        form.spacer height: 4
-        form.fields_textarea name: 'user[loadif_target3]', width: 'matchParent', value: 'Value 2'
-        form.spacer height: 4
+        res.fields_text name: 'user[loadif_target2]', width: 'matchParent', value: 'Value 1'
+        res.spacer height: 4
+        res.fields_textarea name: 'user[loadif_target3]', width: 'matchParent', value: 'Value 2'
+        res.spacer height: 4
       end
 
     form.panels_responsive \
       id: 'panel2',
       width: 'matchParent',
       childViews: ->(res) do
-        form.fields_richText name: 'user[loadIf_target4]', width: 'matchParent', value: 'Value 3'
-        form.spacer height: 4
-        form.fields_radioGroup name: 'user[loadIf_target5]', width: 'matchParent', value: 'choice_1', childViews: ->(group) do
+        res.fields_richText name: 'user[loadIf_target4]', width: 'matchParent', value: 'Value 3'
+        res.spacer height: 4
+        res.fields_radioGroup name: 'user[loadIf_target5]', width: 'matchParent', value: 'choice_1', childViews: ->(group) do
           group.fields_radio label: 'Choice 1', value: 'choice_1'
           group.fields_radio label: 'Choice 2', value: 'choice_2'
           group.fields_radio label: 'Choice 3', value: 'choice_3'

data/app/views/json_ui/garage/lists/edit_mode.json.jbuilder

@@ -33,18 +33,18 @@ page.form \
           header.panels_horizontal childViews: ->(horizontal) do
             horizontal.fields_check name: 'user[check_all]', label: 'All', checkValue: true
 
-            header.spacer width: 20
+            horizontal.spacer width: 20
             # header.fields_text width: 'matchParent', styleClass: 'outlined', name: 'user[new_name]', label: 'Item name'
             statuses = [:pending, :active]
-            header.fields_select \
+            horizontal.fields_select \
               styleClass: 'outlined',
               name: 'user[status]',
               width: 'matchParent',
               label: 'Status',
               options: statuses.map { |status| { value: status, text: status.to_s.humanize } }
 
-            header.spacer width: 20
-            header.fields_submit text: 'Update'
+            horizontal.spacer width: 20
+            horizontal.fields_submit text: 'Update'
           end
         end
         section.rows builder: ->(row) do

data/app/views/json_ui/garage/pages/custom_style_class.json.jbuilder

@@ -26,7 +26,7 @@ end
 page.body padding: glib_json_padding_body, childViews: ->(scroll) do
   scroll.panels_vertical width: 'matchParent', styleClass: 'card', padding: glib_json_padding_body, childViews: ->(vertical) do
     (1..100).each do |index|
-      scroll.label text: 'Content'
+      vertical.label text: 'Content'
     end
   end
 end

data/app/views/json_ui/garage/pages/nav_buttons.json.jbuilder

@@ -4,18 +4,36 @@ page = json_ui_page json
 
 render "#{@path_prefix}/nav_menu", json: json, page: page
 
-page.navBar backgroundColor: '#a8c4e3', color: '#ffffff', showTitle: true, rightButtons: ->(menu) do
-  menu.button icon: 'search', text: 'Search', onClick: ->(action) do
-    action.dialogs_alert message: 'Perform some action'
+page.navBar(
+  backgroundColor: '#a8c4e3',
+  color: '#ffffff',
+  showTitle: true,
+  rightButtons: ->(menu) do
+    menu.button(
+      icon: 'search',
+      text: 'Search',
+      onClick: ->(action) do
+        action.dialogs_alert message: 'Perform some action'
+      end
+    )
+    menu.button(
+      icon: { name: 'star', badge: { text: '1', backgroundColor: '#ff0000' } },
+      onClick: ->(action) do
+        action.dialogs_alert message: 'Perform some action'
+      end
+    )
+    menu.button(
+      icon: { name: 'map', badge: '2' },
+      onClick: ->(action) do
+        action.dialogs_alert message: 'Perform some action'
+      end
+    )
   end
-  menu.button icon: { name: 'star', badge: { text: '1', backgroundColor: '#ff0000' } }, onClick: ->(action) do
-    action.dialogs_alert message: 'Perform some action'
-  end
-  menu.button icon: { name: 'map', badge: '2' }, onClick: ->(action) do
-    action.dialogs_alert message: 'Perform some action'
-  end
-end
+)
 
-page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
-  scroll.label text: 'See the right menu buttons on the nav bar'
-end
+page.scroll(
+  padding: glib_json_padding_body,
+  childViews: ->(scroll) do
+    scroll.label text: 'See the right menu buttons on the nav bar'
+  end
+)

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

@@ -54,23 +54,23 @@ page.scroll backgroundColor: '#fafafa', padding: { top: 10, right: 10, bottom: 1
   scroll.panels_responsive width: 'matchParent', childViews: ->(horizontal) do
     gap = { top: 12, left: 10, right: 10, bottom: 12 }
     horizontal.panels_column lg: { cols: 4 }, padding: gap, childViews: ->(column) do
-      column.panels_vertical styleClasses: styleClasses, width: 'matchParent', padding: glib_json_padding_body, childViews: ->(column) do
-        column.button text: '1'
+      column.panels_vertical styleClasses: styleClasses, width: 'matchParent', padding: glib_json_padding_body, childViews: ->(subcolumn) do
+        subcolumn.button text: '1'
       end
     end
     horizontal.panels_column lg: { cols: 4 }, padding: gap, childViews: ->(column) do
-      column.panels_vertical styleClasses: styleClasses, width: 'matchParent', padding: glib_json_padding_body, childViews: ->(column) do
-        column.button text: '2'
+      column.panels_vertical styleClasses: styleClasses, width: 'matchParent', padding: glib_json_padding_body, childViews: ->(subcolumn) do
+        subcolumn.button text: '2'
       end
     end
     horizontal.panels_column lg: { cols: 4 }, padding: gap, childViews: ->(column) do
-      column.panels_vertical styleClasses: styleClasses, width: 'matchParent', padding: glib_json_padding_body, childViews: ->(column) do
-        column.button text: '3'
+      column.panels_vertical styleClasses: styleClasses, width: 'matchParent', padding: glib_json_padding_body, childViews: ->(subcolumn) do
+        subcolumn.button text: '3'
       end
     end
     horizontal.panels_column lg: { cols: 4 }, padding: gap, childViews: ->(column) do
-      column.panels_vertical styleClasses: styleClasses, width: 'matchParent', padding: glib_json_padding_body, childViews: ->(column) do
-        column.button text: '4'
+      column.panels_vertical styleClasses: styleClasses, width: 'matchParent', padding: glib_json_padding_body, childViews: ->(subcolumn) do
+        subcolumn.button text: '4'
       end
     end
   end

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

@@ -23,8 +23,8 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
   9.times do |i|
     scroll.panels_column lg: { cols: 4 }, padding: { top: 18, right: 14, bottom: 18, left: 14 }, childViews: ->(column) do
       column.panels_responsive styleClasses: ['card'], padding: { top: 48, right: 24, bottom: 48, left: 24 }, childViews: ->(responsive) do
-        column.h2 text: "Item #{i}"
-        column.p text: "Hover view with #{i} sentence(s)"
+        responsive.h2 text: "Item #{i}"
+        responsive.p text: "Hover view with #{i} sentence(s)"
       end, hoverViews: ->(hover) do
         render 'json_ui/garage/panels/hover_views_content', hover: hover, i: i
       end, onClick: ->(action) do

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

@@ -46,31 +46,31 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
       timeline.panels_vertical childViews: ->(vertical) do
         vertical.h4 text: 'Order submitted'
         vertical.spacer height: 2
-        timeline.label text: '15 minutes ago'
+        vertical.label text: '15 minutes ago'
       end
 
       timeline.panels_vertical childViews: ->(vertical) do
         vertical.h4 text: 'Finding you a driver'
         vertical.spacer height: 2
-        timeline.label text: '15 minutes ago'
+        vertical.label text: '15 minutes ago'
       end
 
       timeline.panels_vertical childViews: ->(vertical) do
         vertical.h4 text: 'Driver found'
         vertical.spacer height: 2
-        timeline.label text: '12 minutes ago'
+        vertical.label text: '12 minutes ago'
       end
 
       timeline.panels_vertical childViews: ->(vertical) do
         vertical.h4 text: 'On the way'
         vertical.spacer height: 2
-        timeline.label text: 'Duration: 11 minutes'
+        vertical.label text: 'Duration: 11 minutes'
       end
 
       timeline.panels_vertical childViews: ->(vertical) do
         vertical.h4 text: 'Arrived'
         vertical.spacer height: 2
-        timeline.label text: '1 minute ago'
+        vertical.label text: '1 minute ago'
       end
     end
 

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

@@ -31,7 +31,7 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
       vertical.spacer height: 6
       vertical.p text: 'The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.'
       vertical.spacer height: 6
-      ul.panels_ul childViews: ->(inner_ul) do
+      vertical.panels_ul childViews: ->(inner_ul) do
         inner_ul.label text: 'Sub item 1'
         inner_ul.label text: 'Sub item 2'
       end

data/app/views/json_ui/garage/tables/bulk_edit.json.jbuilder

@@ -61,7 +61,7 @@ page.scroll childViews: ->(scroll) do
         displayed: false
     end
 
-    scroll.panels_bulkEdit2 \
+    wres.panels_bulkEdit2 \
       id: 'import_table',
       width: 'matchParent',
       paramNameForRowId: 'row_id',

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

@@ -67,7 +67,7 @@ page.form(
       styleClass: 'align-center',
       xs: { gap: { all: 4 } },
       childViews: ->(flow) do
-        form.fields_upload(
+        flow.fields_upload(
           properties.merge(
             name: 'user[file_placeholderView]',
             id: 'pv1',

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

@@ -89,17 +89,17 @@ page.body childViews: ->(body) do
         form.fields_select clearable: true, multiple: true, width: 'matchParent', name: 'user[select][]', id: 'select', options: options, value: ['option1', 'option2'], validation: validation
         form.hr width: 'matchParent'
         form.panels_flow innerPadding: { bottom: 0 }, width: 'matchParent', id: 'select1', childViews: ->(flow) do
-          form.fields_select clearable: true, width: 'matchParent', name: 'user[select1]', options: options_with_icon, value: 'option1'
-          form.hr width: 'matchParent'
+          flow.fields_select clearable: true, width: 'matchParent', name: 'user[select1]', options: options_with_icon, value: 'option1'
+          flow.hr width: 'matchParent'
         end
         form.panels_horizontal id: 'select2', width: 'matchParent', childViews: ->(hori) do
-          form.fields_select clearable: true, width: 'matchParent', name: 'user[select2]', options: options_with_image, value: 'option2'
-          form.hr width: 'matchParent'
+          hori.fields_select clearable: true, width: 'matchParent', name: 'user[select2]', options: options_with_image, value: 'option2'
+          hori.hr width: 'matchParent'
         end
         form.panels_split id: 'select3', width: 'matchParent', content: ->(split) do
           split.left childViews: ->(right) do
-            form.fields_select clearable: true, width: 'matchParent', name: 'user[select3]', options: options, value: 'option3'
-            form.hr width: 'matchParent'
+            right.fields_select clearable: true, width: 'matchParent', name: 'user[select3]', options: options, value: 'option3'
+            right.hr width: 'matchParent'
           end
         end
         form.fields_chipGroup width: 'matchParent', name: 'user[chip_group]', id: 'chip_group', options: options, value: ['option2'], validation: validation

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

@@ -36,9 +36,9 @@ page.body childViews: ->(body) do
             template.fields_hidden name: 'error_message'
             template.fields_text width: 'matchParent', name: 'question', label: 'Question', placeholder: 'Question', styleClass: 'question'
 
-            form.panels_responsive id: 'responsive_{{entryIndex}}', childViews: ->(column) do
+            template.panels_responsive id: 'responsive_{{entryIndex}}', childViews: ->(column) do
                 options = [:rating, :yes_no, :choices, :unspecified]
-                template.fields_select \
+                column.fields_select \
                   width: 'matchParent',
                   name: 'type',
                   label: 'Answer Type',

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

@@ -0,0 +1,94 @@
+json.title 'Test Page (Logics Set)'
+
+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: 'Logics Set - Icon Badge'
+    res.spacer height: 8
+
+    res.panels_flow innerPadding: { bottom: 0 }, width: 'matchParent', childViews: ->(flow) do
+      flow.button text: 'Set badge to "5"', onClick: ->(action) do
+        action.logics_set targetId: 'test_icon', conditionalData: {
+          'badge.text': '5',
+          'badge.backgroundColor': 'primary'
+        }
+      end
+
+      flow.spacer width: 8
+
+      flow.button text: 'Set badge to "99"', onClick: ->(action) do
+        action.logics_set targetId: 'test_icon', conditionalData: {
+          'badge.text': '99',
+          'badge.backgroundColor': 'warning'
+        }
+      end
+
+      flow.spacer width: 8
+
+      flow.button text: 'Clear badge', onClick: ->(action) do
+        action.logics_set targetId: 'test_icon', data: {
+          badge: nil
+        }
+      end
+    end
+
+    res.spacer height: 16
+    res.hr width: 'matchParent'
+    res.spacer height: 16
+
+    res.icon \
+      id: 'test_icon',
+      name: 'notifications',
+      badge: { text: '1', backgroundColor: 'error' }
+
+    res.spacer height: 24
+    res.h2 text: 'Button with Icon Badge'
+    res.spacer height: 8
+
+    res.panels_flow innerPadding: { bottom: 0 }, width: 'matchParent', childViews: ->(flow) do
+      flow.button text: 'Set button badge to "3"', onClick: ->(action) do
+        action.logics_set targetId: 'test_button', conditionalData: {
+          'icon.badge.text': '3',
+          'icon.badge.backgroundColor': 'success'
+        }
+      end
+
+      flow.spacer width: 8
+
+      flow.button text: 'Set button badge to "10"', onClick: ->(action) do
+        action.logics_set targetId: 'test_button', conditionalData: {
+          'icon.badge.text': '10',
+          'icon.badge.backgroundColor': 'error'
+        }
+      end
+
+      flow.spacer width: 8
+
+      flow.button text: 'Clear button badge', onClick: ->(action) do
+        action.logics_set targetId: 'test_button', data: {
+          'icon.badge': nil
+        }
+      end
+    end
+
+    res.spacer height: 16
+    res.hr width: 'matchParent'
+    res.spacer height: 16
+
+    res.button \
+      id: 'test_button',
+      text: 'Notifications',
+      icon: {
+        name: 'notifications',
+        badge: { text: '5', backgroundColor: 'warning' }
+      },
+      onClick: ->(action) do
+        action.snackbars_alert message: 'Button clicked!'
+      end
+
+    res.spacer height: 16
+  end
+end

data/app/views/json_ui/garage/views/components_replace.json.jbuilder

@@ -24,9 +24,9 @@ small_image_url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGQpSWj
 page.body padding: glib_json_padding_body, childViews: ->(body) do
   body.panels_responsive width: 'matchParent', childViews: ->(res) do
     res.panels_column lg: { cols: 3 }, childViews: ->(col) do
-      res.h3 text: 'Props changes'
-      res.spacer height: 8
-      res.panels_flow innerPadding: { top: 4, right: 4, bottom: 4, left: 4 }, childViews: ->(hori) do
+      col.h3 text: 'Props changes'
+      col.spacer height: 8
+      col.panels_flow innerPadding: { top: 4, right: 4, bottom: 4, left: 4 }, childViews: ->(hori) do
         hori.button text: 'change bgcolor', onClick: ->(action) do
           action.runMultiple childActions: ->(saction) do
             comp_ids.each do |id, method|
@@ -70,10 +70,10 @@ page.body padding: glib_json_padding_body, childViews: ->(body) do
           end
         end
       end
-      res.spacer height: 16
-      res.h3 text: 'Childviews changes'
-      res.spacer height: 8
-      res.panels_flow innerPadding: { top: 4, right: 4, bottom: 4, left: 4 }, childViews: ->(hori) do
+      col.spacer height: 16
+      col.h3 text: 'Childviews changes'
+      col.spacer height: 8
+      col.panels_flow innerPadding: { top: 4, right: 4, bottom: 4, left: 4 }, childViews: ->(hori) do
         hori.button text: 'Add child to panel', onClick: ->(action) do
           action.runMultiple childActions: ->(saction) do
             panels_ids.each do |id, method|
@@ -104,7 +104,7 @@ page.body padding: glib_json_padding_body, childViews: ->(body) do
           end
         end
       end
-      res.spacer height: 16
+      col.spacer height: 16
     end
 
     res.panels_column lg: { cols: 9 }, childViews: ->(col) do
@@ -142,12 +142,12 @@ page.body padding: glib_json_padding_body, childViews: ->(body) do
         url: json_ui_garage_url(path: 'forms/generic_post'),
         method: 'post',
         childViews: ->(form) do
-          col.fields_text id: 'inp-text', name: 'user[full_name]', width: 300, label: 'Full name', placeholder: 'Full name'
-          col.spacer height: 4
+          form.fields_text id: 'inp-text', name: 'user[full_name]', width: 300, label: 'Full name', placeholder: 'Full name'
+          form.spacer height: 4
 
-          col.fields_select id: 'inp-select', options: cities, width: 300, name: 'user[city]'
-          col.spacer height: 4
-          col.fields_submit text: 'Submit'
+          form.fields_select id: 'inp-select', options: cities, width: 300, name: 'user[city]'
+          form.spacer height: 4
+          form.fields_submit text: 'Submit'
         end
       col.spacer height: 8
       col.icon id: 'icon', name: 'pending', size: 32, styleClasses: ['warning']

data/app/views/json_ui/garage/views/components_set.json.jbuilder

@@ -19,14 +19,14 @@ page.body padding: glib_json_padding_body, childViews: ->(body) do
       url: json_ui_garage_url(path: 'forms/generic_post'),
       method: 'post',
       childViews: ->(form) do
-        res.fields_text id: 'ftext', name: 'user[full_name]', value: 'John Doe', label: 'Full name', placeholder: 'Full name', width: 300
-        res.spacer height: 8
-        res.panels_horizontal childViews: ->(hori) do
-        res.button text: 'set', onClick: ->(action) do
+        form.fields_text id: 'ftext', name: 'user[full_name]', value: 'John Doe', label: 'Full name', placeholder: 'Full name', width: 300
+        form.spacer height: 8
+        form.panels_horizontal childViews: ->(hori) do
+        hori.button text: 'set', onClick: ->(action) do
           action.components_set targetId: 'ftext', data: { name: 'user[city]', value: 'Taipei', label: 'City', placeholder: 'City' }
         end
-        res.spacer width: 4
-        res.fields_submit text: 'submit'
+        hori.spacer width: 4
+        hori.fields_submit text: 'submit'
       end
       end