voom-presenters 0.1.13 → 0.2.0

data/app/demo/components/tab_bars.pom

@@ -0,0 +1,51 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:tab_bars) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Tab Bars'
+
+  indented_grid do
+
+    title 'Standard Tab Bar'
+    tab_bar do
+      tab 'One', selected: true
+      tab 'Two'
+      tab 'Three'
+    end
+    separator
+
+    title 'Tabs with icons next to labels'
+    tab_bar do
+      tab 'One', icon: :thumb_up
+      tab 'Two', icon: :face, selected: true
+      tab 'Three', icon: :thumb_down
+    end
+    separator
+
+    title 'Tabs with icons above labels'
+    tab_bar do
+      tab 'One', icon: :thumb_up, stacked: true, selected: true
+      tab 'Two', icon: :face, stacked: true
+      tab 'Three', icon: :thumb_down, stacked: true
+    end
+    separator
+
+    title 'Scrolling Tabs'
+    tab_bar do
+      15.times do |idx|
+        tab "Tab Number-#{idx}", selected: idx == 3 do
+          event :click do
+            snackbar 'tab clicked'
+          end
+        end
+      end
+    end
+  end
+
+  attach :code, file: __FILE__
+end
+
+
+

data/app/demo/components/tables.pom

@@ -9,30 +9,102 @@ Voom::Presenters.define(:tables) do
   helpers do
     def items
       [
-          OpenStruct.new(material: 'Acrylic (Transparent)', quantity: 50, price: '$2.90'),
-          OpenStruct.new(material: 'Plywood (Birch)', quantity: 10, price: '$1.25'),
-          OpenStruct.new(material: 'Laminate (Gold on Blue)', quantity: 50, price: '$2.35')
+          OpenStruct.new(id: 1, material: 'Acrylic (Transparent)', quantity: 50, price: '$2.90'),
+          OpenStruct.new(id: 2, material: 'Plywood (Birch)', quantity: 10, price: '$1.25'),
+          OpenStruct.new(id: 3, material: 'Laminate (Gold on Blue)', quantity: 50, price: '$2.35')
+      ]
+    end
+
+    def drivers
+      [
+          OpenStruct.new(name: 'Kimi Räikkönen', team: 'Scuderia Ferrari', country: 'Finland'),
+          OpenStruct.new(name: 'Daniel Ricciardo', team: 'Red Bull', country: 'Australia'),
+          OpenStruct.new(name: 'Lewis Hamilton', team: 'Mercedes', country: 'Great Britain'),
+          OpenStruct.new(name: 'Fernando Alonso', team: 'Mclaren', country: 'Spain'),
+          OpenStruct.new(name: 'Charles LeClerc', team: 'Sauber', country: 'Monaco')
       ]
     end
   end
 
   indented_grid do
-    table selectable: true do
-      header do
-        column 'Material'
-        column 'Quantity'
-        column 'Unit price'
+    grid do
+      column 12 do
+        content id: :drivers do
+          title 'Non-Selectable'
+          table do
+            header do
+              column 'Name'
+              column 'Team'
+              column 'Country'
+            end
+            drivers.each do |driver|
+              row do
+                column driver.name
+                column driver.team
+                column driver.country
+              end
+            end
+            pagination page_size: 5,
+                       total: drivers.count,
+                       current_page: context.fetch(:page){ 1 },
+                       replace_id: 'drivers',
+                       replace_presenter: 'drivers_presenter'
+          end
+        end
       end
+    end
 
-      items.each do |item|
-        row do
-          column item.material
-          column item.quantity
-          column item.price
+    form do
+      grid do
+        column 12 do
+          title 'Selectable (with form)'
+          table selectable: true do
+            header do
+              column 'Material'
+              column 'Quantity'
+              column 'Unit price'
+            end
+            items.each do |item|
+              row name: :id, value: item.id do
+                column item.material
+                column item.quantity
+                column item.price
+              end
+            end
+          end
+        end
+        column 12 do
+          button 'SUBMIT', type: :raised do
+            event :click do
+              replaces  :context_list, :context_list
+            end
+          end
+          attach :context_list
         end
       end
     end
 
+    grid wide: true do
+      column 12 do
+        title 'Wide (scrollable)', id: :scrollable
+        table do
+          header do
+            (1..18).each do |idx|
+              column "Column #{idx}"
+            end
+          end
+          items.each do |item|
+            row do
+              (1..6).each do
+                column item.material
+                column item.quantity
+                column item.price
+              end
+            end
+          end
+        end
+      end
+    end
     attach :code, file: __FILE__
   end
 end

data/app/demo/components/text_areas.pom

@@ -11,8 +11,21 @@ Voom::Presenters.define(:text_areas) do
 
     text_area name: :notes, rows: 3 do
       label 'Text lines...'
+      hint 'Default behavior is full width'
     end
 
+
+    text_area name: :notes, rows: 5, cols: 60, full_width: false do
+      label 'Five by Sixty'
+      hint 'Or specify using rows and columns'
+    end
+
+    rich_text_area name: :notes, placeholder: 'Text entered here is saved as HTML' do
+      label 'Rich Text Area'
+      hint 'Default is full width and 25 rows'
+    end
+
+
     attach :code, file: __FILE__
   end
 end

data/app/demo/components/text_fields.pom

@@ -13,33 +13,45 @@ Voom::Presenters.define(:text_fields) do
       label 'Text...'
     end
 
-    headline 'Password'
+    title 'Password'
 
     text_field name: :password, password: true do
       label 'Password'
     end
 
     headline 'Numeric'
-
     # Client side validation with hints
-    headline 'With Hints'
+    title 'With Hints'
     text_field name: :numeric do
       label 'Number...'
       pattern /-?[0-9]*(\.[0-9]+)?/
-      hint 'Input is not a number!'
+      hint 'Input should be a number!'
     end
 
-    headline 'With Errors'
+    title 'With Errors'
     text_field name: :guess_me do
       label 'Guess a number...'
       pattern /-?[0-9]*(\.[0-9]+)?/
       value '7'
-      error 'Input is not a the right number!'
+      error 'Input is not the right number!'
+    end
+
+
+    title 'With Leading Icon'
+    text_field name: :numeric do
+      label 'Amount'
+      icon :attach_money, position: :left
+    end
+
+    title 'With Trailing Icon'
+    text_field name: :numeric do
+      label 'Name'
+      icon :remove_red_eye
     end
 
     card do
-      display 'Field Level Events'
-      heading 'Text Fields'
+      headline 'Field Level Events'
+      title 'Text Fields'
       body 'This demonstrates that a change event will submit the  field value to the event action. '\
                  'This works with posts and replace actions'
       text_field name: :myfield do

data/app/demo/components/toggles.pom

@@ -7,26 +7,62 @@ Voom::Presenters.define(:toggles) do
   page_title 'Toggles'
 
   indented_grid do
-    headline 'CHECKBOX'
+    title 'CHECKBOX'
     checkbox
-    checkbox checked: true
+    checkbox checked: true, text: "I am initially checked"
+    checkbox indeterminate: true, text: "I am indeterminate"
+    checkbox disabled: true, text: "I am disabled"
 
-    headline 'RADIO BUTTON'
-    radio_button checked: true
-    radio_button
+    title 'RADIO BUTTON'
+    radio_button name: :radio, value: 'one', checked: true, text: "One"
+    radio_button name: :radio, value: 'two', text: "Two"
 
-    headline 'ICON TOGGLE'
+    title 'ICON TOGGLE'
     icon_toggle 'format_bold', checked: true
     icon_toggle 'format_italic'
 
-    headline 'SWITCH'
-    switch checked: true
-    switch
+    title 'SWITCH'
+    grid do
+      column 6 do
+        switch checked: true
+      end
+    end
+    grid do
+      column 6 do
+        switch
+      end
+    end
+    grid do
+      column 6 do
+        switch disabled: true
+      end
+    end
+    grid do
+      column 10, padding: :none do
+        switch text: "This is a long text label that should display even longer wraps to another line?"
+      end
+      column 10, padding: :none  do
+        checkbox text: "This is a long text label that should display even longer wraps to another line?"
+      end
+    end
+
+
+    button :on_dialog do
+      event :click do
+        dialog :toggle_dlg
+      end
+    end
+    dialog id: :toggle_dlg, width: '30rem' do
+      form do
+        switch name: :reset_password_email, checked: true, text: 'Send reset password email'
+      end
+    end
+
 
     grid do
       column 6 do
-        display 'Field Level Events'
-        heading 'Text Fields'
+        headline 'Field Level Events', level: 3
+        title 'Text Fields'
         body 'This demonstrates that a change event will submit the  field value to the event action. '\
                  'This works with posts and replace actions'
         switch name: :myfield do
@@ -34,8 +70,8 @@ Voom::Presenters.define(:toggles) do
             replaces :context_list, :context_list
           end
         end
-       
-        display 'Posts in Form'
+
+        headline 'Posts in Form', level: 3
         body 'This demonstrates that a change event on **ANY** form input will send all the form inputs to the event action. '\
                  'This works with posts and replace actions'
         form do
@@ -52,4 +88,4 @@ Voom::Presenters.define(:toggles) do
     end
     attach :code, file: __FILE__
   end
-end
+end

data/app/demo/components/tooltips.pom

@@ -95,12 +95,8 @@ Voom::Presenters.define(:tooltips) do
     end
 
 
-    display 'Styles'
-
-    display 'Typography', level: 4 do
-      tooltip 'I do nothing.'
-    end
-
+    headline 'Styles', level: 3
+    
     headline 'Headline' do
       tooltip 'I do nothing.'
     end

data/app/demo/events/actions/clear.pom

@@ -0,0 +1,23 @@
+Voom::Presenters.define(:clear_action) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :events_drawer
+
+  indented_grid do
+    heading 'Clear'
+    body 'Allows you to clear an input control.',
+         'Takes the id of the element to clear.'
+
+    text_field id: :input_to_clear do
+      label 'Input to clear'
+      value 'Clear me'
+    end
+
+    button 'clear' do
+      event :click do
+        clear :input_to_clear
+      end
+    end
+  end
+  attach :code, file: __FILE__
+end

data/app/demo/events/actions/loads.pom

@@ -1,4 +1,4 @@
-Voom::Presenters.define(:toggle_visibility_action) do
+Voom::Presenters.define(:loads_action) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :events_drawer
@@ -7,13 +7,23 @@ Voom::Presenters.define(:toggle_visibility_action) do
     heading 'Loads'
     body 'Loads a new presenter, replacing the whole page.'
 
-    subheading context['reloaded'] ? "Reloaded" : 'Loads'
-    button 'loads' do
-      event :click do
-        loads :events, reloaded: true
+    content do
+      subheading "#{context['reloaded'] ? "Reloaded" : 'Loads'} another presenter"
+      button 'loads this page' do
+        event :click do
+          loads :loads_action, reloaded: true, nil_value:nil
+        end
+      end
+      heading context['reloaded'] ? "Reloaded" : 'Loaded'
+    end
+    content do
+      subheading "An absolute URL loads another page"
+      button 'loads google.com' do
+        event :click do
+          loads 'https://google.com'
+        end
       end
     end
-    heading context['reloaded'] ? "Reloaded" : 'Loaded'
   end
   attach :code, file: __FILE__
 end

data/app/demo/events/actions/posts.pom

@@ -14,7 +14,7 @@ Voom::Presenters.define(:posts_action) do
     content shows_errors: false do
       button 'posts' do
         event :click do
-          posts 'postpath', {optional: :params}
+          posts 'postpath', {optional: :params, its_nil: nil}
         end
       end
     end

data/app/demo/events/actions/toggle_visiblity.pom

@@ -7,9 +7,10 @@ Voom::Presenters.define(:toggle_visibility_action) do
     heading 'Toggle Visibility'
     body 'Allows you to toggle visibility of content on and off on events.',
          'Takes the id of the element to toggle.',
-         "Optionally takes :on or :off to force visibility."
-
-    subheading 'Toggle Visibility'
+         "Optionally takes :on or :off to force visibility.",
+         "`show :toggle_me` **is the same as** `toggle_visibility :toggle_me, on: true`",
+         "`hide :toggle_me` **is the same as** `toggle_visibility :toggle_me, on: false`"
+    
     button 'toggle visibility' do
       event :click do
         toggle_visibility :toggle_me

data/app/demo/events/nav/drawer.pom

@@ -2,14 +2,14 @@ Voom::Presenters.define(:events_drawer) do
   helpers Voom::Presenters::Helpers::Inflector
   drawer 'Events' do
     menu do
-      %i(field_level_events form_level_events).sort.each do |comp|
+      %i(field_level_events form_level_events tagged_input).sort.each do |comp|
         item titleize(comp) do
           event :click do
             loads comp
           end
         end
       end
-      %i(dialog autocomplete replaces toggle_visibility snackbar updates deletes posts).sort.each do |comp|
+      %i(dialog replaces loads toggle_visibility snackbar updates deletes posts clear).sort.each do |comp|
         item titleize(comp) do
           event :click do
             loads "#{comp}_action"