glib-web 2.6.2 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 626a7318bab15d6f40a56eab8a88f93168ecbf5c5848a06ac36074faffd8e4f7
-  data.tar.gz: 3dfdf7e1026acde4790640d3df5594a56cb591459ee2c12ba3623080ffd78c6e
+  metadata.gz: 1893d7f9752d6b6fa88f44c3cf3992aafff393b4b10638ca989b82859c47c716
+  data.tar.gz: 7c19f36849c4ff6d58f1e53657c7f639b1a6d69fb1d4810c1a3a4d71ad652f8b
 SHA512:
-  metadata.gz: 4c89bbef5dca79b924d5e9d8442828b1721cab5f6e51bd035d117c177557924fd20acbeb4475728cfecc39b89457763380f66489f4cbc38249be4d199dcf276e
-  data.tar.gz: 47d96447564dcecc2e2649aeb8872268564c0ab13c13a26483a00f1bbad5877863fefa280ae651e710846e964089b1cdb1bcbb890afb8ab4d4fcec6762bb17b6
+  metadata.gz: 45a1be444dc544ac2957134c50cc8035ebd1a114b2eb724fbb3f2bc9d8cb845beca2f370670a6c74f46dcdd9892e4ac1b033c73ba20704a8ee2bd243733c4b94
+  data.tar.gz: 0f31ccbe16452d786d71c0c314753c03cd7d92476b0a392b9231d3b07110a01db1c2788a1937ddf073489656a00f2fb73c92b81e6e3f6b108c97e9c4281c08d1

data/app/controllers/concerns/glib/json/libs.rb

@@ -36,6 +36,24 @@ module Glib::Json::Libs
     json_ui_app_device_os == 'web'
   end
 
+  def json_ui_etag
+    template = "#{controller_name}/#{action_name}"
+
+    # 1) It's necessary to pass in the template explicitly because of the switching between JSON
+    # and HTML rendering.
+    #
+    # 2) When a model is not provided, two pages the use the same template (e.g. `projects#show`)
+    # will produce the exact same ETAG, even though their content might be different. Presumably
+    # this is because the ETAG is calculated based on the static template as opposed to the
+    # generated output.
+    #
+    # However, this is not a problem because the browser will still treat these pages as
+    # separate because they have different URLs (e.g. `projects/1` vs `projects/2`), meaning
+    # that it will not accidentally use the cache from a different URL even though the ETAG
+    # is exactly the same.
+    fresh_when nil, template: template
+  end
+
   def json_ui_render(template, args = {})
     JSON.parse(render_to_string(template, locals: args))
   end

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

@@ -0,0 +1,14 @@
+class Glib::JsonUi::ActionBuilder
+  module Popovers
+    class Open < Action
+      string :key
+      views :childViews
+      string :location
+      int :offset
+    end
+
+    class Close < Action
+      string :key
+    end
+  end
+end

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

@@ -8,6 +8,7 @@ class Glib::JsonUi::ActionBuilder
 
       string :verticalPosition
       string :horizontalPosition
+      string :location
       singleton_array :styleClass, :styleClasses
     end
 

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

@@ -44,6 +44,9 @@ module Glib
         hash :tooltip
         array :extensions
 
+        action :onMouseEnter
+        action :onMouseLeave
+
 
         # def initialize(json, page)
         #   super(json, page)
@@ -243,6 +246,7 @@ module Glib
 
       class TabBar < View
         int :height
+        int :activeIndex
         color :color
 
         def buttons(block)

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

@@ -27,7 +27,7 @@ section.rows builder: ->(template) do
   end
 
   template.thumbnail title: 'snackbars with styling', onClick: ->(action) do
-    action.snackbars_alert message: 'This is a styled snackbar', verticalPosition: 'top', styleClass: 'success'
+    action.snackbars_alert message: 'This is a styled snackbar', location: 'top', styleClass: 'success'
   end
 
 end

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

@@ -6,42 +6,44 @@ json_ui_page json do |page|
   page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.panels_column lg: { cols: 8 }, childViews: ->(column) do
       column.h2 text: 'Tab Bar with Badge'
-      column.tabBar buttons: ->(menu) do
-        badges = [
-          {
-            text: nil,
-            backgroundColor: nil
-          },
-          {
-            text: 8,
-            backgroundColor: '#272551'
-          },
-          {
-            text: '⭐⭐⭐',
-            backgroundColor: '#008000'
-          }
-        ]
-        {
-          'FIRST' => 'home',
-          'SECOND' => 'schedule',
-          'THIRD' => 'analytics'
-        }.each_with_index do |(text, icon), index|
-          menu.button \
-            icon: icon,
-            text: text,
-            badge: badges[index],
-            disabled: params[:tab].to_i == index,
-            onClick: ->(action) do
-              action.windows_reload \
-                url: json_ui_garage_url(
-                  path: 'pages/tab_bar',
-                  tab:  index,
-                  tab_2: params[:tab_2],
-                  tab_3: params[:tab_3]
-                )
+      column.tabBar \
+        activeIndex: params[:tab].to_i,
+        buttons: ->(menu) do
+            badges = [
+              {
+                text: nil,
+                backgroundColor: nil
+              },
+              {
+                text: 8,
+                backgroundColor: '#272551'
+              },
+              {
+                text: '⭐⭐⭐',
+                backgroundColor: '#008000'
+              }
+            ]
+            {
+              'FIRST' => 'home',
+              'SECOND' => 'schedule',
+              'THIRD' => 'analytics'
+            }.each_with_index do |(text, icon), index|
+              menu.button \
+                icon: icon,
+                text: text,
+                badge: badges[index],
+                disabled: params[:tab].to_i == index,
+                onClick: ->(action) do
+                  action.windows_reload \
+                    url: json_ui_garage_url(
+                      path: 'pages/tab_bar',
+                      tab:  index,
+                      tab_2: params[:tab_2],
+                      tab_3: params[:tab_3]
+                    )
+                end
             end
-        end
-      end
+          end
       column.spacer height: 10
 
       column.label text: "Tab index #{params[:tab].to_i} selected"
@@ -55,22 +57,25 @@ json_ui_page json do |page|
 
     scroll.panels_column lg: { cols: 8 }, childViews: ->(column) do
       column.h2 text: "Tab Bar with 'full-width-divider'"
-      column.tabBar styleClass: 'full-width-divider', buttons: ->(menu) do
-        5.times do |index|
-          menu.button \
-            text: "Tab #{index}",
-            disabled: params[:tab_2].to_i == index,
-            onClick: ->(action) do
-            action.windows_reload \
-              url: json_ui_garage_url(
-                path: 'pages/tab_bar',
-                tab:  params[:tab],
-                tab_2: index,
-                tab_3: params[:tab_3]
-              )
+      column.tabBar \
+        activeIndex: params[:tab_2].to_i,
+        styleClass: 'full-width-divider',
+        buttons: ->(menu) do
+          5.times do |index|
+            menu.button \
+              text: "Tab #{index}",
+              disabled: params[:tab_2].to_i == index,
+              onClick: ->(action) do
+              action.windows_reload \
+                url: json_ui_garage_url(
+                  path: 'pages/tab_bar',
+                  tab:  params[:tab],
+                  tab_2: index,
+                  tab_3: params[:tab_3]
+                )
+            end
           end
         end
-      end
       column.spacer height: 10
 
       column.label text: "Tab-2 index #{params[:tab_2].to_i} selected"
@@ -79,22 +84,25 @@ json_ui_page json do |page|
 
     scroll.panels_column lg: { cols: 8 }, childViews: ->(column) do
       column.h2 text: "Tab Bar 'with no-grow'"
-      column.tabBar styleClass: 'no-grow', buttons: ->(menu) do
-        5.times do |index|
-          menu.button \
-            text: "Tab #{index}",
-            disabled: params[:tab_3].to_i == index,
-            onClick: ->(action) do
-            action.windows_reload \
-              url: json_ui_garage_url(
-                path: 'pages/tab_bar',
-                tab:  params[:tab],
-                tab_2: params[:tab_2],
-                tab_3: index
-              )
+      column.tabBar \
+        activeIndex: params[:tab_3].to_i,
+        styleClass: 'no-grow',
+        buttons: ->(menu) do
+          5.times do |index|
+            menu.button \
+              text: "Tab #{index}",
+              disabled: params[:tab_3].to_i == index,
+              onClick: ->(action) do
+              action.windows_reload \
+                url: json_ui_garage_url(
+                  path: 'pages/tab_bar',
+                  tab:  params[:tab],
+                  tab_2: params[:tab_2],
+                  tab_3: index
+                )
+            end
           end
         end
-      end
       column.spacer height: 10
 
       column.label text: "Tab-3 index #{params[:tab_3].to_i} selected"

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

@@ -2,7 +2,7 @@ text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
 value = ''
 i.times { value += text }
 
-hover.panels_responsive padding: {top: 24, right: 24, bottom: 24, left: 24 }, childViews: ->(responsive) do
+hover.panels_responsive padding: { top: 24, right: 24, bottom: 24, left: 24 }, childViews: ->(responsive) do
   responsive.avatar url: glib_json_image_avatar_url
 
   responsive.spacer height: 8
@@ -10,9 +10,9 @@ hover.panels_responsive padding: {top: 24, right: 24, bottom: 24, left: 24 }, ch
   responsive.spacer height: 8
 
   responsive.h2 text: 'Hover View'
-  responsive.p text:value
+  responsive.p text: value
   responsive.spacer height: 24
-  responsive.button text: 'Button', onClick:->(action) do
+  responsive.button text: 'Button', onClick: ->(action) do
     action.dialogs_alert message: 'Clicked'
   end
-end
+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
@@ -87,9 +87,9 @@ json_ui_page json do |page|
         template.thumbnail title: 'Column', subtitle: 'Adds control over layout inside a responsive panel', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/responsive')
         end
-        template.thumbnail title: 'Hover', subtitle: 'Popover triggered by hover', onClick: ->(action) do
-          action.windows_open url: json_ui_garage_url(path: 'panels/hover')
-        end
+        # template.thumbnail title: 'Hover', subtitle: 'Popover triggered by hover', onClick: ->(action) do
+        #   action.windows_open url: json_ui_garage_url(path: 'panels/hover')
+        # end
       end
     end, ->(section) do
       section.header padding: glib_json_padding_list, childViews: ->(header) do

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

@@ -27,23 +27,58 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     end
 
   scroll.spacer height: 10
-  scroll.button text: 'Button with dropdown', childButtons: ->(menu) do
-    menu.button text: 'Dropdown item 1'
-    menu.button text: 'Dropdown item 2'
-    menu.button text: 'Dropdown item 3'
+  scroll.button text: 'Button with dropdown', onClick: ->(action) do
+    action.popovers_open \
+      key: 'menu',
+      location: 'bottom',
+      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
+        end
+      end
   end
 
   scroll.spacer height: 10
-  scroll.button text: 'Button with tooltip and dropdown', tooltip: { text: 'Tooltip text' }, childButtons: ->(menu) do
-    menu.button text: 'Dropdown item 1'
-    menu.button text: 'Dropdown item 2'
-    menu.button text: 'Dropdown item 3'
-  end
+  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' },
+    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
+          end
+        end
+    end
 
   scroll.spacer height: 20
   scroll.button \
     icon: 'info',
-    styleClass: 'icon',
+    styleClasses: ['icon', 'plain'],
     tooltip: { text: 'Disabled Icon button with tooltip text and custom tooltip position', position: 'right' },
     disabled: true
   scroll.spacer height: 20

data/app/views/layouts/json_ui/renderer.html.erb

@@ -8,34 +8,27 @@
   <title>App</title>
   <%= csrf_meta_tags %>
 
-  <%= javascript_pack_tag 'vue_renderer', defer: true %>
+  <%= vite_javascript_tag 'vue_renderer', defer: true %>
   <%#= javascript_include_tag 'vue_renderer_extras', defer: true %>
 
-  <%= stylesheet_pack_tag 'vue_renderer' %>
-
+  <%= vite_stylesheet_tag 'vue_renderer' %>
+  <%# TODO: Remove this, for dev only %>
+<%# <script src="https://cdn.tailwindcss.com"></script> %>
   <link href="//fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />
-
-  <%# Without this, checkboxes and radio buttons will not display. %>
-  <link href="//cdn.materialdesignicons.com/2.1.99/css/materialdesignicons.min.css" rel="stylesheet" />
-
-  <%= yield :head %>
-
-  <% if @__glib_head_code %>
-    <%= @__glib_head_code.html_safe %>
-  <% end %>
+<%# Without this, checkboxes and radio buttons will not display. %>
+<%# <link href="//cdn.materialdesignicons.com/2.1.99/css/materialdesignicons.min.css" rel="stylesheet" /> %>
+<%= yield :head %>
+<% if @__glib_head_code %>
+  <%= @__glib_head_code.html_safe %>
+<% end %>
 </head>
-
 <body>
   <%= yield :header %>
-
   <noscript>Please enable JavaScript to view this web site.</noscript>
   <div id="app"></div>
-
   <script>
     var __page = <%= raw @__json_ui_orig_page%>;
   </script>
-
   <%= yield :footer %>
 </body>
-
 </html>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glib-web
 version: !ruby/object:Gem::Version
-  version: 2.6.2
+  version: 3.0.0
 platform: ruby
 authors:
 - ''
@@ -98,6 +98,7 @@ files:
 - app/helpers/glib/json_ui/action_builder/http.rb
 - app/helpers/glib/json_ui/action_builder/iap.rb
 - app/helpers/glib/json_ui/action_builder/panels.rb
+- app/helpers/glib/json_ui/action_builder/popovers.rb
 - app/helpers/glib/json_ui/action_builder/sheets.rb
 - app/helpers/glib/json_ui/action_builder/snackbars.rb
 - app/helpers/glib/json_ui/action_builder/tours.rb
@@ -313,7 +314,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.6
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: ''