glib-web 4.39.0 → 4.39.2

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

@@ -3,49 +3,73 @@ json.title 'Lists'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
 
-  page.list firstSection: ->(section) do
-    section.header padding: { top: 12, left: 16, right: 16, bottom: 12 }, childViews: ->(header) do
-      header.h3 text: 'Section Header'
+  page.list(
+    firstSection: ->(section) do
+      section.header(
+        padding: { top: 12, left: 16, right: 16, bottom: 12 },
+        childViews: ->(header) do
+          header.h3 text: 'Section Header'
+        end
+      )
+      section.rows(
+        builder: ->(template) do
+          template.thumbnail(
+            title: 'Click me',
+            onClick: ->(action) do
+              action.windows_open url: json_ui_garage_url(path: 'home/blank')
+            end,
+            accessory: ->(accessory) do
+              accessory.header(
+                width: 'matchParent',
+                backgroundColor: '#b3bac2',
+                padding: { top: 10, bottom: 10, left: 10, right: 10 },
+                childViews: ->(bottom) do
+                  bottom.label text: 'Custom row header'
+                end
+              )
+              accessory.footer(
+                width: 'matchParent',
+                backgroundColor: '#b3bac2',
+                padding: { top: 10, bottom: 10, left: 10, right: 10 },
+                childViews: ->(bottom) do
+                  bottom.label text: 'Custom row footer'
+                end
+              )
+            end
+          )
+          template.thumbnail title: 'Item with icon and subtitle', subtitle: 'Item subtitle', icon: 'facebook'
+          template.thumbnail(
+            title: 'Item with chips',
+            chips: ->(menu) do
+              menu.button text: 'Finished', styleClass: 'info'
+              menu.button props: { text: 'Succeeded', styleClass: 'success' }
+            end
+          )
+          template.thumbnail(
+            title: 'Item with thumbnail image',
+            subtitle: 'Item subtitle',
+            imageUrl: glib_json_image_standard_url,
+          )
+          template.featured(
+            title: 'Featured with featured image',
+            subtitle: 'Item subtitle',
+            imageUrl: glib_json_image_standard_url
+          )
+          template.thumbnail(
+            title: 'Item with **formatted** text',
+            subtitle: 'Item *subtitle*',
+            textFormat: :markdown
+          )
+          # TODO
+          # template.thumbnail title: 'Item with accessories (Experimental)', subtitle: 'Item subtitle', accessoryViews: ->(thumbnail) do
+          #   thumbnail.panels_horizontal childViews: ->(horizontal) do
+          #     horizontal.chip text: 'finished'
+          #     horizontal.spacer width: 10
+          #     horizontal.chip text: 'succeeded'
+          #   end
+          # end
+        end
+      )
     end
-
-    section.rows builder: ->(template) do
-      template.thumbnail title: 'Click me', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'home/blank')
-      end,
-      accessory: ->(accessory) do
-        accessory.header \
-          width: 'matchParent',
-          backgroundColor: '#b3bac2',
-          padding: { top: 10, bottom: 10, left: 10, right: 10 },
-          childViews: ->(bottom) do
-            bottom.label text: 'Custom row header'
-          end
-        accessory.footer \
-          width: 'matchParent',
-          backgroundColor: '#b3bac2',
-          padding: { top: 10, bottom: 10, left: 10, right: 10 },
-          childViews: ->(bottom) do
-            bottom.label text: 'Custom row footer'
-          end
-      end
-      template.thumbnail title: 'Item with icon and subtitle', subtitle: 'Item subtitle', icon: 'facebook'
-      template.thumbnail title: 'Item with chips', chips: ->(menu) do
-        menu.button text: 'Finished', styleClass: 'info'
-        menu.button props: { text: 'Succeeded', styleClass: 'success' }
-      end
-
-      template.thumbnail title: 'Item with thumbnail image', subtitle: 'Item subtitle', imageUrl: glib_json_image_standard_url
-      template.featured title: 'Featured with featured image', subtitle: 'Item subtitle', imageUrl: glib_json_image_standard_url
-
-      # TODO
-      # template.thumbnail title: 'Item with accessories (Experimental)', subtitle: 'Item subtitle', accessoryViews: ->(thumbnail) do
-      #   thumbnail.panels_horizontal childViews: ->(horizontal) do
-      #     horizontal.chip text: 'finished'
-      #     horizontal.spacer width: 10
-      #     horizontal.chip text: 'succeeded'
-      #   end
-      # end
-
-    end
-  end
+  )
 end

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
 

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

@@ -11,44 +11,44 @@ page.body padding: glib_json_padding_body, childViews: ->(body) do
       method: 'post',
       width: 300,
       childViews: ->(form) do
-        res.fields_text id: 'first', name: 'user[full_name]', label: 'Full name', placeholder: 'Full name', width: 'matchParent'
-        res.spacer height: 4
-        res.fields_number id: 'second', name: 'user[age]', label: 'Age', placeholder: 'Age', width: 'matchParent'
-        res.spacer height: 4
-        res.fields_textarea id: 'third', name: 'user[boi]', label: 'Bio', placeholder: 'Bio', width: 'matchParent'
-        res.spacer height: 4
-        res.fields_date id: 'fourth', name: 'user[birth_date]', label: 'Birth date', placeholder: 'Birth date', width: 'matchParent'
-        res.spacer height: 4
-        res.panels_horizontal childViews: ->(hori) do
-          res.button text: 'focus1', onClick: ->(action) do
+        form.fields_text id: 'first', name: 'user[full_name]', label: 'Full name', placeholder: 'Full name', width: 'matchParent'
+        form.spacer height: 4
+        form.fields_number id: 'second', name: 'user[age]', label: 'Age', placeholder: 'Age', width: 'matchParent'
+        form.spacer height: 4
+        form.fields_textarea id: 'third', name: 'user[boi]', label: 'Bio', placeholder: 'Bio', width: 'matchParent'
+        form.spacer height: 4
+        form.fields_date id: 'fourth', name: 'user[birth_date]', label: 'Birth date', placeholder: 'Birth date', width: 'matchParent'
+        form.spacer height: 4
+        form.panels_horizontal childViews: ->(hori) do
+          hori.button text: 'focus1', onClick: ->(action) do
             action.fields_focus targetId: 'first'
           end
-          res.spacer width: 4
-          res.button text: 'focus2', onClick: ->(action) do
+          hori.spacer width: 4
+          hori.button text: 'focus2', onClick: ->(action) do
             action.fields_focus targetId: 'second'
           end
-          res.spacer width: 4
-          res.button text: 'focus3', onClick: ->(action) do
+          hori.spacer width: 4
+          hori.button text: 'focus3', onClick: ->(action) do
             action.fields_focus targetId: 'third'
           end
-          res.spacer width: 4
-          res.button text: 'focus4', onClick: ->(action) do
+          hori.spacer width: 4
+          hori.button text: 'focus4', onClick: ->(action) do
             action.fields_focus targetId: 'fourth'
           end
-          res.spacer width: 4
-          res.button text: 'blur', onClick: ->(action) do
+          hori.spacer width: 4
+          hori.button text: 'blur', onClick: ->(action) do
             action.fields_focus targetId: 'first', onFocus: ->(saction) do
               saction.timeouts_set interval: 1000, onTimeout: ->(ssaction) { ssaction.fields_blur }
             end
           end
-          res.spacer width: 4
-          res.button text: 'reset', onClick: ->(action) do
+          hori.spacer width: 4
+          hori.button text: 'reset', onClick: ->(action) do
             action.fields_reset targetIds: ['first', 'second', 'third', 'fourth'], onReset: ->(saction) do
               saction.snackbars_alert styleClasses: ['success'], message: 'Reset full name!'
             end
           end
-          res.spacer width: 4
-          res.fields_submit text: 'submit'
+          hori.spacer width: 4
+          hori.fields_submit text: 'submit'
         end
       end
 

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

@@ -27,6 +27,8 @@ json_ui_page json do |page|
       "\n" +
       '~~Strikethrough~~' + "\n" +
       "\n" +
+      '<u>Underlined</u>' + "\n" +
+      "\n" +
       'https://www.google.com' + "\n"
 
     scroll.spacer height: 20

data/config/routes.rb

@@ -6,6 +6,10 @@ Glib::Web::Engine.routes.draw do
     delete 'json_ui_garage', to: 'home#json_ui_garage'
     post 'chat', to: 'home#chat'
 
+    get 'json_ui_api', to: 'api_docs#index'
+    get 'json_ui_api/:category', to: 'api_docs#show', as: :json_ui_api_category
+    get 'json_ui_api/:category/:component', to: 'api_docs#component', as: :json_ui_api_component
+
     resources :glib_direct_uploads, only: [:create]
     resources :blob_url_generators, only: [:create]
     resources :errors, only: [:create]