voom-presenters 0.1.13 → 0.2.0

data/app/demo/components/{forms.pom → content.pom}

@@ -1,6 +1,6 @@
 require_relative '../helpers/indented_grid'
 
-Voom::Presenters.define(:forms) do
+Voom::Presenters.define(:content) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :component_drawer
@@ -10,10 +10,10 @@ Voom::Presenters.define(:forms) do
     column 1
     column 4 do
       card do
-        display 'Posts in Form'
+        headline 'Posts in Form'
         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
+        content do
           text_field name: :myfield do
             label 'Data to post'
           end

data/app/demo/components/date_fields.pom

@@ -50,7 +50,7 @@ Voom::Presenters.define(:date_fields) do
         date_field min_date: :today
 
         title 'Min (today), Max (14 days from now)'
-        date_field min_date: :today, max_date: DateTime.now.next_day(14) # Or in rails Time.now + 14.days
+        date_field min_date: :today, max_date: DateTime.new(2025, 4, 9) # Or in rails Time.now + 14.days
 
         title 'Disabling specific dates'
         date_field disable: ["2025-01-30", "2025-02-21", "2025-03-08", DateTime.new(2025, 4, 9)]

data/app/demo/components/datetime_fields.pom

@@ -42,6 +42,12 @@ Voom::Presenters.define(:datetime_fields) do
     end
     grid do
       column 6 do
+
+        title 'With Floating Label'
+        datetime_field name: :start_datetime do
+          label 'Date of Birth...'
+        end
+
         title 'Min Date'
         datetime_field min_date: "2020-01-01 00:15"
 

data/app/demo/components/drawers.pom

@@ -28,7 +28,7 @@ Voom::Presenters.define(:drawers) do
   end
 
   indented_grid do
-    display 'Drawers'
+    headline 'Drawers'
 
     attach :code, file: __FILE__
   end

data/app/demo/components/file_inputs.pom

@@ -0,0 +1,16 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:file_inputs) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'File Inputs'
+
+  indented_grid do
+    form do
+      file_input name: :upload
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/footers.pom

@@ -29,7 +29,7 @@ Voom::Presenters.define(:footers) do
   end
 
   indented_grid do
-    display 'Footers'
+    headline 'Footers', level: 3
 
     attach :code, file: __FILE__
   end

data/app/demo/components/google_maps.pom

@@ -0,0 +1,17 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:maps) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Maps'
+
+  indented_grid do
+    subheading 'Static Maps'
+
+    google_map address: '125 Park Street, Traverse City, MI', height: 300, width: 400
+
+    attach :code, file: __FILE__
+  end
+
+end

data/app/demo/components/headers.pom

@@ -34,7 +34,7 @@ Voom::Presenters.define(:headers) do
 
 
   indented_grid do
-    display 'Headers'
+    headline 'Headers'
     
     attach :code, file: __FILE__
   end

data/app/demo/components/layouts.pom

@@ -2,18 +2,18 @@ require_relative '../helpers/indented_grid'
 
 Voom::Presenters.define(:layouts) do
   helpers Demo::Helpers::IndentedGrid
-  
+
   attach :top_nav
   attach :component_drawer
   page_title 'Layouts'
 
   indented_grid do
 
-    display 'Grid'
+    headline 'Grid'
 
     grid do
       (1..12).each do |size|
-        column 1, color:  :lightgray do
+        column 1, color: :lightgray do
           body '1'
         end
       end
@@ -29,7 +29,14 @@ Voom::Presenters.define(:layouts) do
 
     grid do
       column 6, color: :lightgray do
-        body '6'
+        body '6 wide with sub-grid of 12'
+        grid do
+          (1..12).each do |size|
+            column 1, color: :white do
+              body '1'
+            end
+          end
+        end
       end
       column 4, color: :lightgray do
         body '4'
@@ -39,6 +46,31 @@ Voom::Presenters.define(:layouts) do
       end
     end
 
+    headline 'Grid Padding'
+    body 'You can control the grid padding with the `padding` attribute.',
+    'By default a top most grid has padding on all four sides.',
+     'A nested grid has top and bottom padding only. (No right and left padding.)',
+     'Vaid values are `:all`, `:none` and an array that specifies sides to pad: `[:top, :right, :bottom, :left]`. (Same as `:none`)',
+    'You can also pad columns. Column padding is half as wide as grid padding.  '
+    grid padding: :top do
+      column 6, color: :lightgray do
+        body '6 wide with sub-grid of 12'
+        grid padding: :none do
+          (1..12).each do |size|
+            column 1, color: :white do
+              body '1'
+            end
+          end
+        end
+      end
+      column 4, color: :lightgray, padding: [:top, :left, :bottom] do
+        body '4'
+      end
+      column 2, color: :lightgray do
+        body '2'
+      end
+    end
+
     attach :code, file: __FILE__
   end
 end

data/app/demo/components/lists.pom

@@ -91,6 +91,31 @@ Voom::Presenters.define(:lists) do
       end
     end
 
+    headline 'Multiple controls'
+    list do
+      actors.each_with_index do |actor, index|
+        line do
+          text actor.name
+          actions do
+            case index%4
+            when 0
+              checkbox
+              icon :delete
+            when 1
+              radio_button
+              icon :delete
+            when 2
+              switch
+              icon :delete
+            when 3
+              icon_toggle :star
+              icon :delete
+            end
+          end
+        end
+      end
+    end
+
     headline 'Two line'
 
     list do

data/app/demo/components/nav/menu.pom

@@ -1,8 +1,15 @@
 Voom::Presenters.define('component_menu') do
   helpers Voom::Presenters::Helpers::Inflector
   menu side: :left do
-    %i(cards lists expansion_panels tables text_fields selects buttons fabs fabs_mini dialogs layouts headers drawers
-         footers menus toggles chips snackbar badges tooltips hidden_fields text_areas forms icons datetime_fields date_fields time_fields).sort.each do |comp|
+    %i(
+      cards lists expansion_panels tables text_fields
+      selects buttons fabs fabs_mini dialogs
+      layouts headers drawers footers menus
+      toggles chips snackbar badges tooltips
+      hidden_fields text_areas steppers sliders tab_bars
+      content icons datetime_fields date_fields time_fields
+      maps file_inputs
+    ).sort.each do |comp|
       item titleize(comp) do
         event :click do
           loads comp

data/app/demo/components/nav/pattern_drawer.pom

@@ -0,0 +1,5 @@
+Voom::Presenters.define(:pattern_drawer) do
+  drawer 'Patterns' do
+    attach :pattern_menu
+  end
+end

data/app/demo/components/nav/pattern_menu.pom

@@ -0,0 +1,12 @@
+Voom::Presenters.define('pattern_menu') do
+  helpers Voom::Presenters::Helpers::Inflector
+  menu side: :left do
+    %i(search_select).sort.each do |pattern|
+      item titleize(pattern) do
+        event :click do
+          loads pattern
+        end
+      end
+    end
+  end
+end

data/app/demo/components/sliders.pom

@@ -0,0 +1,49 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:sliders) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Sliders'
+
+  indented_grid do
+
+    title 'Continuous Slider'
+    slider discrete: false
+
+    title 'Discrete Slider'
+    slider discrete: true
+
+    title 'Discrete Slider with tick marks'
+    subheading '1 to 50 in steps of 2'
+    slider discrete: true, show_tracker_marks: true, value_min: 0, value_max: 50, step: 2 do
+      value 10
+    end
+
+    title 'Slider with change event'
+    slider discrete: true, show_tracker_marks: true, value_min: 0, value_max: 50, step: 2 do
+      value 10
+      event :change do
+        snackbar "Slider value changed"
+      end
+    end
+
+    button 'Show hidden slider', type: :flat, color: :secondary do
+      event :click do
+        toggle_visibility :hidden_slider, action: :show
+      end
+    end
+    content id: :hidden_slider, hidden: true do
+      title 'I was a hidden slider'
+      subheading 'This slider was hidden when the page was first rendered. Now that it was made visible, it should work properly.'
+      slider discrete: true, show_tracker_marks: true, value_min: 0, value_max: 50, step: 2 do
+        value 10
+      end
+    end
+
+  end
+
+  attach :code, file: __FILE__
+end
+
+

data/app/demo/components/snackbar.pom

@@ -19,6 +19,16 @@ Voom::Presenters.define(:snackbar) do
         snackbar 'You clicked snackbar the button!'
       end
     end
+
+    blank
+
+    title 'Response from a POST'
+    body 'You can return a string or array of strings in your CRUD response (`messages.snackbar`) and it will display after the event fires.'
+    button 'Show Snackbar from Response' do
+      event :click do
+        posts '/_echo_snackbar_', snackbar_echo: 'Your operation succeeded!'
+      end
+    end
   end
 
   attach :code, file: __FILE__

data/app/demo/components/steppers.pom

@@ -0,0 +1,178 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:steppers) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Stepper'
+
+  indented_grid do
+
+    title 'Horizontal Stepper'
+    stepper id: :my_stepper_id do
+      step id: :step1 do
+        label 'Step 1'
+
+        card do
+          text 'Make a choice:'
+
+          select name: :step_type do
+            option do
+              value ''
+              text 'Select something...'
+            end
+            option do
+              value 'type1'
+              text 'Step 2 Variation 1'
+            end
+            option do
+              value 'type2'
+              text 'Step 2 Variation 2'
+            end
+            event :change do
+              replaces :step2_content, :step2_form
+              stepper :continue
+            end
+          end
+
+          text_field do
+            label 'Text...'
+          end
+
+          text_field do
+            label 'Text...'
+          end
+
+        end
+
+        actions do
+          continue do
+            event :click do
+              posts 'to_nowhere_fails' # stepper should NOT advance
+            end
+          end
+        end
+
+      end
+
+      step id: :step2 do
+        label 'Middle Step'
+        attach :step2_form, step_type: :type1
+        actions do
+          continue
+          back
+          cancel
+        end
+      end
+
+      step id: :step3 do
+        label 'Final Step'
+        actions do
+          continue
+          back
+          cancel
+        end
+      end
+    end
+
+    title 'Vertical Stepper'
+
+    stepper orientation: :vertical do
+      step id: :step1 do
+        label 'Step 1'
+        headline 'Look at me:'
+        text_area
+
+        text_field do
+          label 'Text...'
+        end
+
+        text_field do
+          label 'Text...'
+        end
+
+        text_field do
+          label 'Text...'
+        end
+
+        text_field do
+          label 'Text...'
+        end
+
+        actions do
+          continue
+          cancel
+        end
+      end
+      step id: :step2 do
+        label 'Step 2'
+        headline 'Hey Now!'
+        select do
+          label 'Text...'
+          option do
+            value 'value1'
+            text 'First value'
+          end
+          option do
+            value 'value2'
+            text 'Second value'
+          end
+          event :change do
+            snackbar 'item changed'
+          end
+        end
+
+
+        actions do
+          continue
+          back
+          cancel
+        end
+      end
+
+      step id: :step3 do
+        label 'Step 3'
+
+        headline 'Finally:'
+        text_field name: :numeric do
+          label 'Number...'
+          pattern /-?[0-9]*(\.[0-9]+)?/
+          hint 'Input is not a number!'
+        end
+
+        actions do
+          continue
+          back
+          cancel
+        end
+      end
+    end
+
+  end
+
+  attach :code, file: __FILE__
+end
+
+Voom::Presenters.define(:step2_form) do
+  content id: :step2_content do
+    type = context.fetch('step_type') {context.fetch(:step_type) {nil}}
+    attach "step2_#{type}_form" if type
+  end
+end
+
+Voom::Presenters.define(:step2_type1_form) do
+  helpers Demo::Helpers::IndentedGrid
+  indented_grid do
+    headline 'Form of Type1'
+    title 'Continuous Slider'
+    slider discrete: true, show_tracker_marks: true, value_min: 0, value_max: 50, step: 2 do
+      value 10
+    end
+  end
+end
+
+Voom::Presenters.define(:step2_type2_form) do
+  headline 'Form of Type2'
+end
+
+