glib-web 3.0.1 → 3.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 72eecba2c1fe97bbb3ef6f0be03e4d0f79a23a4dcca8c7f16bf3d1be9083a5b7
-  data.tar.gz: 526316d03db695e57c5a2a7e81110cb52f14d73ab5524ca7866c73a6e9230ffc
+  metadata.gz: f9f3512d884ca3fac7a8f0fa5022d65f256416b884bc457db8d9e93e050a622e
+  data.tar.gz: 07cc381dff74eb7bc55749fb715f5a416f4d14eb53d73b380c44a0e9c7e3949e
 SHA512:
-  metadata.gz: fc68d49b58d90e62fa5c4f2cd82bbf2bde03123a63ecc3f3fe09875d8a886db320f0151c53c31cfc417d2cc88993f66b10350f2d9f00f8c70dda54bdccef1075
-  data.tar.gz: e4faf34c6746d568277406474f5c75ce05f52c0ce262102879adf13ac595e8f03102a169047d9a9993f952d6d3978de6f22677b9068796d14cb1b3fba3b6d878
+  metadata.gz: c500d6e5efeb141d1c2765c17847b99acb6030366c381f136712ca954dfa6cc059b3e1c6fa2c1d3865d5d6e1d86bcd57c1ab4bfc8e0edc4f2e5361d2370febfa
+  data.tar.gz: d66702989b6708278973b8446006acef18fc746de0b1a019fed36e4a3d9306ebe09abb21daa072ec2525c7440be60c4a58060ef056170300bc9642883b9af188

data/app/helpers/glib/json_ui/action_builder/dialogs.rb

@@ -47,6 +47,7 @@ class Glib::JsonUi::ActionBuilder
       string :fullscreen
       length :width
       length :height
+      bool :closeOnBlur
     end
 
     class Reload < Action

data/app/helpers/glib/json_ui/action_builder/popovers.rb

@@ -3,8 +3,10 @@ class Glib::JsonUi::ActionBuilder
     class Open < Action
       string :key
       views :childViews
-      string :location
+      string :placement
       int :offset
+      int :width
+      singleton_array :styleClass, :styleClasses
     end
 
     class Close < Action

data/app/helpers/glib/json_ui/builder/mouse_events.rb

@@ -0,0 +1,29 @@
+module Glib
+  module JsonUi
+    module Builder::MouseEvents
+      extend ActiveSupport::Concern
+
+      included do
+        action :onMouseEnter
+        action :onMouseLeave
+      end
+
+      def tooltip(options)
+        key = "tooltip_#{SecureRandom.uuid}"
+        onMouseEnter ->(action) do
+          action.popovers_open(
+            key: key,
+            placement: options[:placement] || 'top',
+            childViews: ->(view) {
+              view.p styleClass: 'tooltip', text: options[:text]
+            }
+          )
+        end
+
+        onMouseLeave ->(action) do
+          action.popovers_close key: key
+        end
+      end
+    end
+  end
+end

data/app/helpers/glib/json_ui/list_builders.rb

@@ -53,8 +53,10 @@ module Glib
         end
 
         class Thumbnail < Standard
-          menu :leftOuterButtons
+          # menu :leftOuterButtons
           int :imageSize
+
+          panels_builder :content, :header, :footer, :right
         end
 
         class CommentOutgoing < Standard

data/app/helpers/glib/json_ui/menu_builder.rb

@@ -6,36 +6,9 @@ module Glib
       end
 
       class MenuItem < JsonUiElement
-        hash :analytics
-
-        # def initialize(json, page)
-        #   super(json, page)
-
-        #   # Can be improved by making it configurable site-wide.
-        #   @analyticsEnabled = true
-        # end
+        include Builder::MouseEvents
 
-        # def analytics(value)
-        #   if value.is_a?(Hash)
-        #     @analyticsEnabled = true
-        #     @analyticsId = value
-        #   else
-        #     @analyticsEnabled = value == true
-        #   end
-        # end
-
-        # # Override
-        # def created
-        #   json.analytics do
-        #     if @analyticsEnabled
-        #       if @analyticsId
-        #         json.placement @analyticsId
-        #       end
-        #     else
-        #       json.disabled true
-        #     end
-        #   end
-        # end
+        hash :analytics
       end
 
       class Button < MenuItem
@@ -45,7 +18,7 @@ module Glib
         icon :icon
         action :onClick
         bool :disabled
-        hash :tooltip
+        # hash :tooltip
         singleton_array :styleClass, :styleClasses
 
         def childButtons(block)

data/app/helpers/glib/json_ui/view_builder/banners.rb

@@ -3,6 +3,7 @@ class Glib::JsonUi::ViewBuilder
 
     class Alert < View
       icon :icon
+      string :title
       string :message
       # string :message_format
       singleton_array :styleClass, :styleClasses
@@ -11,6 +12,7 @@ class Glib::JsonUi::ViewBuilder
     class Select < View
       string :id
       icon :icon
+      string :title
       string :message
       singleton_array :styleClass, :styleClasses
       color :color

data/app/helpers/glib/json_ui/view_builder/charts.rb

@@ -12,11 +12,7 @@ class Glib::JsonUi::ViewBuilder
       end
     end
 
-    class Line < View
-      include ReleaseDateIndicator
-
-      hash :nextPage
-
+    module Series
       def dataSeries(blocks)
         json.dataSeries do
           blocks.each do |block|
@@ -27,13 +23,6 @@ class Glib::JsonUi::ViewBuilder
         end
       end
 
-    end
-
-    class Column < View
-      include ReleaseDateIndicator
-
-      bool :stacked
-
       def dataGroups(blocks)
         json.dataGroups do
           blocks.each do |block|
@@ -45,16 +34,27 @@ class Glib::JsonUi::ViewBuilder
       end
     end
 
+    class Line < View
+      include Series
+
+      # idea for the future
+      # hash :nextPage
+    end
+
+    class Column < View
+      include Series
+
+      bool :stacked
+    end
+
     class Pie < View
-      def dataSeries(blocks)
-        json.dataSeries do
-          blocks.each do |block|
-            json.child! do
-              block.call
-            end
-          end
-        end
-      end
+      include Series
+
     end
+
+    class Area < View
+      include Series
+    end
+
   end
 end

data/app/helpers/glib/json_ui/view_builder.rb

@@ -32,6 +32,8 @@ module Glib
       end
 
       class View < JsonUiElement
+        include Builder::MouseEvents
+
         string :id
         length :width
         length :height
@@ -41,12 +43,9 @@ module Glib
         hash :showIf
         hash :valueIf
         hash :analytics
-        hash :tooltip
+        # hash :tooltip
         array :extensions
 
-        action :onMouseEnter
-        action :onMouseLeave
-
 
         # def initialize(json, page)
         #   super(json, page)

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

@@ -0,0 +1,23 @@
+panel.panels_list id: 'action_list', sections: [
+  ->(section) do
+    render "#{@path_prefix}/actions/reload", section: section
+  end, ->(section) do
+    render "#{@path_prefix}/actions/panels", section: section
+  end, ->(section) do
+    render "#{@path_prefix}/actions/dialogs", section: section
+  end, ->(section) do
+    render "#{@path_prefix}/actions/snackbars", section: section
+  end, ->(section) do
+    render "#{@path_prefix}/actions/sheets", section: section
+  end, ->(section) do
+    render "#{@path_prefix}/actions/windows", section: section
+  end, ->(section) do
+    render "#{@path_prefix}/actions/timeouts", section: section
+  end, ->(section) do
+    render "#{@path_prefix}/actions/http", section: section
+  end, ->(section) do
+    render "#{@path_prefix}/actions/commands", section: section
+  end, ->(section) do
+    render "#{@path_prefix}/actions/tours", section: section
+  end
+]

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

@@ -11,7 +11,12 @@ section.rows builder: ->(template) do
 
   reload_counter = params[:reload_counter].to_i
   reload_counter = 0 if reload_counter > 5
+
   template.thumbnail title: "windows/reload with URL (counter: #{reload_counter})", onClick: ->(action) do
     action.windows_reload url: json_ui_garage_url(path: 'actions/index', reload_counter: reload_counter + 1)
   end
+
+  template.thumbnail title: "components/update (counter: #{reload_counter})", onClick: ->(action) do
+    action.http_get url: json_ui_garage_url(path: 'actions/partial_update', reload_counter: reload_counter + 1)
+  end
 end

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

@@ -3,26 +3,6 @@ json.title 'Actions'
 page = json_ui_page json
 render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
 
-page.list sections: [
-  ->(section) do
-    render "#{@path_prefix}/actions/reload", section: section
-  end, ->(section) do
-    render "#{@path_prefix}/actions/panels", section: section
-  end, ->(section) do
-    render "#{@path_prefix}/actions/dialogs", section: section
-  end, ->(section) do
-    render "#{@path_prefix}/actions/snackbars", section: section
-  end, ->(section) do
-    render "#{@path_prefix}/actions/sheets", section: section
-  end, ->(section) do
-    render "#{@path_prefix}/actions/windows", section: section
-  end, ->(section) do
-    render "#{@path_prefix}/actions/timeouts", section: section
-  end, ->(section) do
-    render "#{@path_prefix}/actions/http", section: section
-  end, ->(section) do
-    render "#{@path_prefix}/actions/commands", section: section
-  end, ->(section) do
-    render "#{@path_prefix}/actions/tours", section: section
-  end
-]
+page.scroll childViews: ->(scroll) do
+  render "#{@path_prefix}/actions/list", panel: scroll
+end

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

@@ -0,0 +1,5 @@
+json_ui_response_with_view json do |action|
+  action.components_update targetId: 'action_list', views: ->(update) do
+    render "#{@path_prefix}/actions/list", panel: update
+  end
+end

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

@@ -4,32 +4,45 @@ page = json_ui_page json
 
 render "#{@path_prefix}/nav_menu", json: json, page: page
 
-page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
-  form.fields_text name: 'user[name]', width: 'matchParent', label: 'Search', placeholder: 'Enter a keyword', styleClasses: ['outlined', 'rounded']
-
-  form.spacer height: 14
-  form.fields_password name: 'user[password]', width: 'matchParent', label: 'Password', placeholder: 'Type your password', styleClass: 'outlined'
-
-  form.spacer height: 14
-  form.fields_textarea name: 'user[bio]', width: 'matchParent', label: 'Bio', placeholder: 'Enter your bio', styleClasses: ['outlined']
-
-  # form.spacer height: 14
-  # form.fields_stripeToken name: 'user[stripe_token_outlined]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'outlined'
-
-  # form.spacer height: 14
-  # form.fields_stripeToken name: 'user[stripe_token_individual]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'individual'
-
-  form.spacer height: 14
-  form.fields_creditCard name: 'user[stripe_token_outlined]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'outlined'
-
-  form.spacer height: 14
-  form.fields_creditCard name: 'user[stripe_token_individual]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'individual'
-
-  form.spacer height: 14
-  form.panels_split width: 'matchParent', content: ->(split) do
-    split.right childViews: ->(right) do
-      right.fields_submit text: 'Submit'
+page.form \
+  url: json_ui_garage_url(path: 'forms/basic_post'),
+  method: 'post',
+  padding: glib_json_padding_body,
+  childViews: ->(form) do
+    form.fields_text \
+      name: 'user[name]',
+      width: 'matchParent',
+      label: 'Search',
+      placeholder: 'Enter a keyword',
+      styleClasses: ['outlined', 'rounded']
+
+    form.spacer height: 14
+    form.fields_password \
+      name: 'user[password]',
+      width: 'matchParent',
+      label: 'Password',
+      placeholder: 'Type your password',
+      styleClasses: ['outlined', 'compact']
+
+    form.spacer height: 14
+    form.fields_textarea name: 'user[bio]', width: 'matchParent', label: 'Bio', placeholder: 'Enter your bio', styleClasses: ['outlined']
+
+    # form.spacer height: 14
+    # form.fields_stripeToken name: 'user[stripe_token_outlined]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'outlined'
+
+    # form.spacer height: 14
+    # form.fields_stripeToken name: 'user[stripe_token_individual]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'individual'
+
+    form.spacer height: 14
+    form.fields_creditCard name: 'user[stripe_token_outlined]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'outlined'
+
+    form.spacer height: 14
+    form.fields_creditCard name: 'user[stripe_token_individual]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'individual'
+
+    form.spacer height: 14
+    form.panels_split width: 'matchParent', content: ->(split) do
+      split.right childViews: ->(right) do
+        right.fields_submit text: 'Submit'
+      end
     end
   end
-
-end

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

@@ -11,7 +11,7 @@ section.rows builder: ->(row) do
   array.each do |i|
     index = page_index * batch_count + i
     if local_assigns[:reorder]
-      row.thumbnail title: "Item #{index}"
+      row.thumbnail title: "Item #{index}", id: "item_#{index}"
     else
       row.thumbnail title: "Item #{index}", subtitle: "Sub Item #{index}", subsubtitle: "Sub Sub Item #{index}"
     end

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

@@ -2,7 +2,7 @@ json.title 'Lists'
 
 page_index = params[:page].to_i
 if page_index > 2
-  page_index = 2
+  page_index = 0
 end
 page = json_ui_page json
 render "#{@path_prefix}/nav_menu", json: json, page: page
@@ -13,26 +13,33 @@ page.list firstSection: ->(section) do
       title: 'Click menu (web) or swipe left (Android/iOS)',
       subtitle: "Page index: #{page_index}",
       leftButtons: ->(menu) do
-        menu.button styleClass: 'icon', icon: 'check_box', onClick: ->(subaction) do
-          subaction.dialogs_alert message: 'Tick/untick'
-        end
+        menu.button \
+          styleClasses: ['icon', 'text', 'x-small'],
+          icon: 'check_box',
+          onClick: ->(subaction) do
+            subaction.dialogs_alert message: 'Tick/untick'
+          end
       end, rightButtons: ->(menu) do
         menu.button \
-          styleClass: 'icon',
+          styleClasses: ['icon', 'text', 'x-small'],
           icon: 'share',
-          tooltip: { text: 'Share' },
-          childButtons: ->(submenu) do
-            submenu.button text: 'Dropdown item 1'
-            submenu.button text: 'Dropdown item 2'
-            submenu.button text: 'Dropdown item 3'
-          end
+          tooltip: { text: 'Share', location: 'left' }
+
+          # TODO: Use popoever
+          # childButtons: ->(submenu) do
+          #   submenu.button text: 'Dropdown item 1'
+          #   submenu.button text: 'Dropdown item 2'
+          #   submenu.button text: 'Dropdown item 3'
+          # end
+
         menu.button \
-          styleClass: 'icon',
+          styleClasses: ['icon', 'text', 'x-small'],
           icon: 'open_in_new',
           tooltip: { text: 'Open in new window' },
           onClick: ->(subaction) do
             subaction.dialogs_alert message: 'Open'
           end
+
       end, editButtons: ->(menu) do
         menu.button text: "Edit (ID: #{page_index})", onClick: ->(action) do
           action.dialogs_alert message: 'Perform Edit action'

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

@@ -18,7 +18,7 @@ else
 
   render "#{@path_prefix}/nav_menu", json: json, page: page
 
-  page.list nextPage: next_page, sections: [
+  page.list id: 'orderable_list', nextPage: next_page, sections: [
     ->(section) do
       section.header padding: glib_json_padding_list, childViews: ->(header) do
         header.h3 text: 'Section One'

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

@@ -133,16 +133,21 @@ json_ui_page json do |page|
 
     scroll.spacer height: 20
     scroll.h1 text: 'Drag-and-drop support'
-    scroll.panels_horizontal backgroundColor: '#b3bac2', width: 300, distribution: 'spaceEqually', childViews: ->(panel) do
-      panel.button id: 'button1', text: '1'
-      panel.button id: 'button2', text: '2'
-      panel.button id: 'button3', text: '3'
-    end, dragSupport: {
-      onDrop: {
-        action: 'dialogs/alert',
-      },
-      paramNameForFormData: 'message'
-    }
+    scroll.panels_horizontal \
+      backgroundColor: '#b3bac2',
+      id: 'orderable_panel',
+      width: 300,
+      distribution: 'spaceEqually',
+      childViews: ->(panel) do
+        panel.button id: 'button1', text: '1'
+        panel.button id: 'button2', text: '2'
+        panel.button id: 'button3', text: '3'
+      end, dragSupport: {
+        onDrop: {
+          action: 'dialogs/alert',
+        },
+        paramNameForFormData: 'message'
+      }
 
     scroll.label text: "\n"
   end

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

@@ -30,9 +30,9 @@ json_ui_page json do |page|
         template.thumbnail title: 'Unordered List', subtitle: 'Bullet points similar to HTML\'s <ul> tag', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/ul')
         end
-        # template.thumbnail title: 'Timeline', subtitle: 'Timeline component with responsive panel as the childviews', onClick: ->(action) do
-        #   action.windows_open url: json_ui_garage_url(path: 'panels/timeline')
-        # end
+        template.thumbnail title: 'Timeline', subtitle: 'Timeline component with responsive panel as the childviews', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'panels/timeline')
+        end
       end
     end, ->(section) do
       section.header padding: glib_json_padding_list, childViews: ->(header) do

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

@@ -8,43 +8,63 @@ json_ui_page json do |page|
     scroll.spacer height: 20
     scroll.h2 text: 'Basic'
     scroll.spacer height: 6
-    scroll.banners_alert width: 'matchParent', icon: 'info', message: 'This is an alert banner'
+    scroll.banners_alert \
+      width: 'matchParent',
+      icon: 'info',
+      title: 'Title',
+      message: 'This is an alert banner'
 
     scroll.spacer height: 20
     scroll.h2 text: 'With color styling'
     scroll.spacer height: 6
-    scroll.banners_alert width: 'matchParent', icon: 'info', message: 'This is an alert banner', styleClass: 'success'
+    scroll.banners_alert \
+      width: 'matchParent',
+      icon: 'info',
+      message: 'This is an alert banner',
+      styleClass: 'success'
+
+    # scroll.banners_alert \
+    #   width: 'matchParent',
+    #   icon: 'info',
+    #   message: 'This is an alert banner',
+    #   styleClass: 'warning'
 
     scroll.spacer height: 20
     scroll.h2 text: 'With select options'
     scroll.spacer height: 6
-    scroll.banners_select width: 'matchParent', icon: 'info', message: 'This is a select banner', buttons: ->(menu) do
-      menu.button icon: 'add', text: 'Add', badge: { text: 80 }, onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'home/blank')
-      end
-      menu.button icon: 'edit', text: 'Edit', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'home/slow')
-      end
-      menu.button icon: 'delete', text: 'Delete', onClick: ->(action) do
-        action.dialogs_alert message: 'Alert'
-      end
-
-      menu.button icon: 'more_vert', childButtons: ->(submenu) do
-        submenu.button \
-          icon: 'add',
-          text: 'Option1',
-          badge: { text: 3 },
-          onClick: ->(action) do
+    scroll.banners_select \
+      styleClass: 'warning',
+      width: 'matchParent',
+      icon: 'info',
+      title: 'Title',
+      message: 'This is a select banner',
+      buttons: ->(menu) do
+        menu.button icon: 'add', text: 'Add', badge: { text: 80 }, onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'home/blank')
         end
-        submenu.button icon: 'edit', text: 'Option2', onClick: ->(action) do
+        menu.button icon: 'edit', text: 'Edit', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'home/slow')
         end
-        submenu.button icon: 'delete', text: 'Long Option3', onClick: ->(action) do
+        menu.button icon: 'delete', text: 'Delete', onClick: ->(action) do
           action.dialogs_alert message: 'Alert'
         end
+
+        menu.button icon: 'more_vert', childButtons: ->(submenu) do
+          submenu.button \
+            icon: 'add',
+            text: 'Option1',
+            badge: { text: 3 },
+            onClick: ->(action) do
+            action.windows_open url: json_ui_garage_url(path: 'home/blank')
+          end
+          submenu.button icon: 'edit', text: 'Option2', onClick: ->(action) do
+            action.windows_open url: json_ui_garage_url(path: 'home/slow')
+          end
+          submenu.button icon: 'delete', text: 'Long Option3', onClick: ->(action) do
+            action.dialogs_alert message: 'Alert'
+          end
+        end
       end
-    end
 
     scroll.spacer height: 20
     scroll.h2 text: 'Alert banner with frameless styling (Experimental)'

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

@@ -12,18 +12,8 @@ else
     render "#{@path_prefix}/nav_menu", json: json, page: page
 
     page.scroll padding: { top: 20, left: 20, right: 20, bottom: 20 }, childViews: ->(scroll) do
-      scroll.h1 text: 'Line chart'
-      scroll.charts_line lineVertical: [
-        -> do
-          json.text 'A feature released'
-          json.x Date.new(2018, 11, 15)
-        end,
-        -> do
-          json.text 'A feature released'
-          json.x Date.new(2018, 11, 13)
-        end
-      ],
-      dataSeries: [
+      scroll.h2 text: 'Line chart'
+      scroll.charts_line dataSeries: [
         -> do
           json.title 'Line 1'
 
@@ -54,9 +44,9 @@ else
         end
       ]
 
-      scroll.spacer height: 20
-      scroll.h1 text: 'Line chart using remote data'
-      render "#{@path_prefix}/views/chart_data", json: json, builder: scroll
+      # scroll.spacer height: 20
+      # scroll.h1 text: 'Line chart using remote data'
+      # render "#{@path_prefix}/views/chart_data", json: json, builder: scroll
 
       scroll.h2 text: 'Column chart (Clustered)'
       scroll.charts_column dataGroups: [
@@ -131,6 +121,26 @@ else
           json.value 25
         end
       ]
+
+      scroll.h2 text: 'Area chart'
+      scroll.charts_area dataSeries: [
+        -> do
+          json.title 'Jan'
+          json.value 25
+        end,
+        -> do
+          json.title 'Feb'
+          json.value 55
+        end,
+        -> do
+          json.title 'Mar'
+          json.value 60
+        end,
+        -> do
+          json.title 'June'
+          json.value 20
+        end
+      ]
     end
   end
 

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

@@ -12,9 +12,12 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
   end
 
   scroll.spacer height: 10
-  scroll.button text: 'Button with built-in classes', styleClasses: ['rounded', 'outlined', 'tile', 'depressed'], onClick: ->(action) do
-    action.dialogs_alert message: 'Perform action'
-  end
+  scroll.button \
+    text: 'Button with built-in classes',
+    styleClasses: ['rounded', 'outlined', 'tile', 'depressed', 'small'],
+    onClick: ->(action) do
+      action.dialogs_alert message: 'Perform action'
+    end
 
   scroll.spacer height: 10
   scroll.button \
@@ -30,7 +33,7 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
   scroll.button text: 'Button with dropdown', onClick: ->(action) do
     action.popovers_open \
       key: 'menu',
-      location: 'bottom',
+      placement: 'left',
       childViews: ->(view) do
         view.panels_responsive styleClass: 'popover-menu', width: 200, childViews: ->(res) do
           res.label text: 'Item 1', styleClass: 'popover-menu-item', onClick: ->(saction) do
@@ -49,28 +52,22 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
   scroll.spacer height: 10
   scroll.button \
     text: 'Button with tooltip and dropdown',
-    onMouseEnter: ->(action) {
-      action.popovers_open \
-        key: 'tooltip',
-        location: 'top',
-        childViews: ->(view) { view.p styleClass: 'tooltip', text: 'Tooltip 1' }
-    },
-    onMouseLeave: ->(action) { action.popovers_close key: 'tooltip' },
+    tooltip: { text: 'Tooltip 1' },
     onClick: ->(action) do
       action.popovers_open \
         key: 'menu',
-        location: 'right',
-        childViews: ->(view) do
-          view.panels_responsive styleClass: 'popover-menu', width: 200, childViews: ->(res) do
-            res.label text: 'Item 1', styleClass: 'popover-menu-item', onClick: ->(saction) do
-              saction.popovers_close key: 'menu'
-            end
-            res.label text: 'Item 2', styleClass: 'popover-menu-item', onClick: ->(saction) do
-              saction.popovers_close key: 'menu'
-            end
-            res.label text: 'Item 3', styleClass: 'popover-menu-item', onClick: ->(saction) do
-              saction.popovers_close key: 'menu'
-            end
+        placement: 'bottom-start',
+        styleClass: 'popover-menu',
+        width: 200,
+        childViews: ->(res) do
+          res.label text: 'Item 1', styleClass: 'popover-menu-item', onClick: ->(saction) do
+            saction.popovers_close key: 'menu'
+          end
+          res.label text: 'Item 2', styleClass: 'popover-menu-item', onClick: ->(saction) do
+            saction.popovers_close key: 'menu'
+          end
+          res.label text: 'Item 3 with very very very very very long name', styleClass: 'popover-menu-item', onClick: ->(saction) do
+            saction.popovers_close key: 'menu'
           end
         end
     end
@@ -81,7 +78,14 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     styleClasses: ['icon', 'plain'],
     tooltip: { text: 'Disabled Icon button with tooltip text and custom tooltip position', position: 'right' },
     disabled: true
+
   scroll.spacer height: 20
+  scroll.button \
+    icon: 'info',
+    styleClasses: ['icon', 'text'],
+    onClick: ->(action) do
+      action.dialogs_alert message: 'Perform action'
+    end
 
 
 
@@ -93,11 +97,16 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     text: 'Success',
     tooltip: { text: 'Tooltip text' }
   scroll.spacer height: 10
-  scroll.chip text: 'With Action', onClick: ->(action) do
-    action.dialogs_alert message: 'Perform action'
-  end
+  scroll.chip \
+    text: 'With Action',
+    onClick: ->(action) do
+      action.dialogs_alert message: 'Perform action'
+    end
   scroll.spacer height: 10
-  scroll.chip text: 'With Badge', badge: { text: '99' }
+  scroll.chip \
+    text: 'With Badge',
+    styleClasses: ['compact'],
+    badge: { text: '99' }
 
   scroll.spacer height: 20
   scroll.h2 text: 'Switch'

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

@@ -10,7 +10,8 @@ json_ui_page json do |page|
       end
 
       section.rows builder: ->(template) do
-        ['texts', 'controls', 'images', 'multimedia', 'charts', 'banners', 'maps', 'misc', 'icons', 'progress', 'shareButton'].each do |component|
+        ['texts', 'controls', 'images', 'multimedia', 'charts', 'banners',
+         'maps', 'misc', 'icons', 'progress', 'shareButton', 'steppers'].each do |component|
           template.thumbnail title: component.humanize, onClick: ->(action) do
             action.windows_open url: json_ui_garage_url(path: "views/#{component}")
           end

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

@@ -21,6 +21,16 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
 
       f.spacer width: 10
 
+      f.shareButton \
+        network: 'email',
+        url: '',
+        text: 'Email',
+        onClick: ->(action) do
+          action.windows_openWeb url: 'mailto://test@email.com'
+        end
+
+      f.spacer width: 10
+
       # For testing: https://developers.facebook.com/tools/debug/
       f.shareButton \
         network: 'facebook',

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

@@ -0,0 +1,40 @@
+json.title 'Views'
+
+page = json_ui_page json
+
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+page.scroll padding: { top: 20, left: 20, right: 20, bottom: 20 }, childViews: ->(scroll) do
+  scroll.h1 text: 'Steppers'
+
+  # scroll.spacer height: 20
+  # scroll.h1 text: 'Line chart using remote data'
+  # render "#{@path_prefix}/views/chart_data", json: json, builder: scroll
+
+  # data = {
+  #   divider_icon: 'arrow_forward',
+  #   steps: [*1..5].map do |index|
+  #     {
+  #       detail: "Item #{index}",
+  #       url: root_url
+  #     }
+  #   end,
+  #   show_numbers: true,
+  #   small: true
+  # }
+
+  # # scroll.h2 text: 'Pie chart'
+  # scroll.stepper dataSeries: [
+  #   -> do
+  #     json.title 'Straberry'
+  #     json.value 25
+
+  #     # json.title 'Straberry'
+  #     # json.value 25
+  #   end,
+  #   -> do
+  #     json.title 'Banana'
+  #     json.value 25
+  #   end
+  # ]
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glib-web
 version: !ruby/object:Gem::Version
-  version: 3.0.1
+  version: 3.0.2
 platform: ruby
 authors:
 - ''
@@ -104,6 +104,7 @@ files:
 - app/helpers/glib/json_ui/action_builder/tours.rb
 - app/helpers/glib/json_ui/action_builder/windows.rb
 - app/helpers/glib/json_ui/analytics_helper.rb
+- app/helpers/glib/json_ui/builder/mouse_events.rb
 - app/helpers/glib/json_ui/dynamic_field_builders.rb
 - app/helpers/glib/json_ui/generic_builders.rb
 - app/helpers/glib/json_ui/list_builders.rb
@@ -135,6 +136,7 @@ files:
 - app/views/json_ui/garage/actions/_dialogs.json.jbuilder
 - app/views/json_ui/garage/actions/_dialogs_show.json.jbuilder
 - app/views/json_ui/garage/actions/_http.json.jbuilder
+- app/views/json_ui/garage/actions/_list.json.jbuilder
 - app/views/json_ui/garage/actions/_panels.json.jbuilder
 - app/views/json_ui/garage/actions/_reload.json.jbuilder
 - app/views/json_ui/garage/actions/_sheets.json.jbuilder
@@ -144,6 +146,7 @@ files:
 - app/views/json_ui/garage/actions/_windows.json.jbuilder
 - app/views/json_ui/garage/actions/dialogs_oauth_post.json.jbuilder
 - app/views/json_ui/garage/actions/index.json.jbuilder
+- app/views/json_ui/garage/actions/partial_update.json.jbuilder
 - app/views/json_ui/garage/forms/_alert_post_data.json.jbuilder
 - app/views/json_ui/garage/forms/_conditional_banner.json.jbuilder
 - app/views/json_ui/garage/forms/_partial_update_execute.json.jbuilder
@@ -263,6 +266,7 @@ files:
 - app/views/json_ui/garage/views/multimedia.json.jbuilder
 - app/views/json_ui/garage/views/progress.json.jbuilder
 - app/views/json_ui/garage/views/shareButton.json.jbuilder
+- app/views/json_ui/garage/views/steppers.json.jbuilder
 - app/views/json_ui/garage/views/texts.json.jbuilder
 - app/views/layouts/json_ui/renderer.html.erb
 - config/routes.rb