voom-presenters 0.1.11 → 2.0.1

data/app/demo/components/tables.pom

@@ -9,30 +9,113 @@ 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'
+    content padding: :bottom3 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
 
-      items.each do |item|
-        row do
-          column item.material
-          column item.quantity
-          column item.price
+    content padding: [:top3, :bottom3] do
+      title 'Headerless Table'
+      table do
+        drivers.each do |driver|
+          row do
+            column driver.name
+            column driver.team
+            column driver.country
+          end
         end
       end
     end
 
+    grid padding: :top3 do
+      column 6 do
+        form do
+          title 'Selectable (with form)'
+          content padding: :bottom2 do
+            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
+          button 'SUBMIT', type: :raised do
+            event :click do
+              replaces :context_list, :context_list
+            end
+          end
+        end
+      end
+      column 6 do
+        attach :context_list
+      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

@@ -9,10 +9,30 @@ Voom::Presenters.define(:text_areas) do
   indented_grid do
     headline 'Multiple line'
 
-    text_area name: :notes, rows: 3 do
-      label 'Text lines...'
+    form do
+      text_area name: :notes, rows: 3, required: true 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', rows: 10 do
+        label 'Rich Text Area'
+        hint 'Default is full width and 25 rows'
+      end
+
+      button 'Submit' do
+        event :click do
+          posts '/_echo_'
+          snackbar 'Posted to _echo_'
+        end
+      end
     end
 
     attach :code, file: __FILE__
   end
-end
+end

data/app/demo/components/text_fields.pom

@@ -13,34 +13,72 @@ Voom::Presenters.define(:text_fields) do
       label 'Text...'
     end
 
-    headline 'Password'
-
-    text_field name: :password, password: true do
-      label 'Password'
+    title 'Restricted Input'
+    grid do
+      column 3 do
+        text_field name: :password, password: true do
+          label 'Password'
+        end
+      end
+      column 3 do
+        text_field name: :upper, case_type: :upper do
+          label 'Upper Only'
+        end
+      end
+      column 3 do
+        text_field name: :lower, case_type: :lower do
+          label 'Lower Only'
+        end
+      end
     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'
-    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!'
+    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
+
+    blank
     card do
-      display 'Field Level Events'
-      heading 'Text Fields'
-      body 'This demonstrates that a change event will submit the  field value to the event action. '\
+      headline 'Client Side Validations'
+      body 'This demonstrates client side validations for text fields '
+      text_field id: :my_required_field, name: :field1, required: true do
+        label 'Data to post'
+        hint 'Hint: You must enter a valid number in the field above'
+        validation_error 'This is a custom validation error. This field is required and must be a number.'
+        pattern /-?[0-9]*(\.[0-9]+)?/
+      end
+      text_field name: :field2, required: true do
+        label 'More data to post'
+      end
+      button 'Submit' do
+        event :click do
+          posts '/_echo_'
+          snackbar 'Posted to _echo_'
+        end
+      end
+    end
+
+    blank
+    card do
+      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
         label 'Data to post'
@@ -50,7 +88,27 @@ Voom::Presenters.define(:text_fields) do
       end
       attach :context_list
     end
-    
+
+    blank
+    card do
+      form do
+        headline 'Form Level Events'
+        title 'Array of Text Fields'
+        text_field name: 'myfield[]' do
+          label 'Data to post'
+        end
+        text_field name: 'myfield[]' do
+          label 'More data to post'
+        end
+        button 'Submit' do
+          event :click do
+            posts '/_echo_'
+            snackbar 'Posted to _echo_'
+          end
+        end
+      end
+    end
+
     attach :code, file: __FILE__
   end
 end

data/app/demo/components/toggles.pom

@@ -7,26 +7,83 @@ 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'
-    icon_toggle 'format_bold', checked: true
-    icon_toggle 'format_italic'
+    title 'ICON TOGGLE'
 
-    headline 'SWITCH'
-    switch checked: true
-    switch
+    icon_toggle :format_italic do
+      tooltip 'toggle it - uses same icon'
+    end
+
+    icon_toggle :check_box_outline_blank, on_icon: :check_box do
+      tooltip 'toggle it - uses on and off icons'
+    end
+
+    icon_toggle :check_box_outline_blank, on_icon: :check_box, checked: true do
+      tooltip 'toggle it - already in a checked state'
+    end
 
+    icon_toggle :toggle_off, on_icon: :toggle_on, disabled: true do
+      tooltip 'Im disabled'
+    end
+
+    title 'SWITCH'
+    grid do
+      column 6 do
+        switch checked: true
+      end
+    end
+    grid do
+      column 6 do
+        switch do
+          tooltip 'I will reset my state when clicked as a result of a failed event action'
+          event :click do
+            posts '_echo_', status: 500
+          end
+        end
+      end
+    end
     grid do
       column 6 do
-        display 'Field Level Events'
-        heading 'Text Fields'
+        switch disabled: true do
+          tooltip 'I am disabled'
+        end
+      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
+        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 +91,18 @@ Voom::Presenters.define(:toggles) do
             replaces :context_list, :context_list
           end
         end
-       
-        display 'Posts in Form'
+        blank
+        body 'Toggle components (switches, checkboxes, and icon toggles)',
+             'can take `on_value` and `off_value` attributes to represent both states. ',
+             'The default is `"on"` and `nil`.'
+        switch name: :miller_lite, on_value: 'Great taste', off_value: 'Less filling' do
+          event :change do
+            replaces :context_list, :context_list
+          end
+        end
+
+        blank
+        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 +119,4 @@ Voom::Presenters.define(:toggles) do
     end
     attach :code, file: __FILE__
   end
-end
+end

data/app/demo/components/tooltips.pom

@@ -54,8 +54,10 @@ Voom::Presenters.define(:tooltips) do
     end
 
     headline 'Chips'
-    chip 'Hover over me' do
-      tooltip 'I have this tip!'
+    chipset do
+      chip 'Hover over me' do
+        tooltip 'I have this tip!'
+      end
     end
 
     headline 'Tables'
@@ -84,9 +86,11 @@ Voom::Presenters.define(:tooltips) do
     radio_button do
       tooltip 'select it'
     end
-    icon_toggle 'format_italic' do
-      tooltip 'toggle it'
+
+    icon_toggle :star_border, on_icon: :star do
+      tooltip 'toggle it - uses on and off icons'
     end
+
     switch do
       tooltip 'switch it'
     end
@@ -95,12 +99,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/components/unordered_list.pom

@@ -0,0 +1,81 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:unordered_lists) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Unordered Lists'
+  helpers do
+    def actors
+      [OpenStruct.new(name: "Bryan Cranston", episodes: 62, body: 'Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle.'),
+       OpenStruct.new(name: "Aaron Paul", episodes: 62, body: 'Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie'),
+       OpenStruct.new(name: "Bob Odenkirk", episodes: 62, body: 'Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul".'),
+       OpenStruct.new(name: "Giancarlo Esposito", episodes: 24, body: 'Giancarlo Giuseppe Alessandro Esposito played the role of Gustavo "Gus" Fring on the AMC shows Breaking Bad and Better Call Saul.')]
+    end
+  end
+
+  indented_grid do
+
+    headline 'List with Default Bullets'
+    unordered_list do
+      actors.each do |actor|
+         list_item do
+          text actor.name
+        end
+      end
+    end
+
+    headline 'List with Numbers'
+    subtitle '_(Any valid `list-style` works)_'
+    unordered_list list_style: :decimal do
+      actors.each do |actor|
+        list_item do
+          text actor.name
+        end
+      end
+    end
+
+    headline 'Nested Lists'
+    unordered_list do
+      list_item do
+        text 'Breaking Bad'
+        unordered_list do
+          actors.each do |actor|
+            list_item {text actor.name}
+          end
+        end
+      end
+      list_item do
+        text 'The Wire'
+        unordered_list do
+          list_item { text 'Dominic West'}
+          list_item { text 'Wendell Pierce'}
+          list_item { text 'Michael K. Williams'}
+          list_item { text 'Sonja Sohn'}
+        end
+      end
+    end
+
+    headline 'List with Icons'
+    unordered_list do
+      list_item do
+        text 'Money'
+        icon :attach_money
+      end
+      list_item do
+        text 'No Money'
+        icon :money_off
+      end
+      list_item do
+        text 'Font Awesome'
+        icon 'fa-arrow-circle-right'
+      end
+      list_item do
+        text 'Cat'
+        icon 'fa-cat'
+      end
+    end
+
+  end
+
+end