voom-presenters 0.1.10 → 2.0.0

data/app/demo/components/progress.pom

@@ -0,0 +1,71 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:progress) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Progress'
+
+  indented_grid do
+    body <<~DOC
+      Linear Progress bars have special placement and event handling behavior.     
+
+      They automatically show themselves when an posts/updates/deletes action starts and hide themselves when an it finishes. 
+
+      All you need to do is place your progress bars where you want them. (You can have more than one.)
+
+      The following components allow progress bars:  `cards`, `content`, `dialog`, and `grid or column`.
+
+      You can position them on top and/or on the bottom using `position: :top|:bottom|:both`
+    DOC
+    title 'Card'
+    card do
+      progress
+      text 'card progress'
+    end
+
+    title 'Content'
+    content do
+      text 'content progress - top and bottom'
+      progress position: :both
+    end
+
+    title 'Dialog'
+    dialog id: :progress_dlg do
+      text 'dialog progress - bottom'
+      progress position: :bottom
+      actions do
+        button :start do
+          event :click do
+            posts '/_slow_', seconds: 5
+            snackbar 'done'
+          end
+        end
+      end
+    end
+    button :open do
+      event :click do
+        dialog :progress_dlg
+      end
+    end
+
+    title 'Grid'
+    grid do
+      progress
+      column 6 do
+        progress position: :bottom
+        text 'column progress bottom'
+      end
+    end
+
+    button :start do
+      event :click do
+        posts '/_slow_', seconds: 5
+        snackbar 'done'
+      end
+    end
+
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/selects.pom

@@ -7,9 +7,9 @@ Voom::Presenters.define(:selects) do
   page_title 'Select Fields'
 
   indented_grid do
-    form do
-      select do
-        label 'Text...'
+    content do
+      select full_width: false do
+        label 'Default (outlined) style ...'
         option do
           value 'value1'
           text 'First value'
@@ -18,10 +18,49 @@ Voom::Presenters.define(:selects) do
           value 'value2'
           text 'Second value'
         end
-        event :change do
-          snackbar 'item changed'
+        # event :change do
+        #   snackbar 'item changed'
+        # end
+      end
+      blank
+
+      select outlined: false do
+        label 'Alternate style ...'
+        option do
+          value 'value1'
+          text 'First value'
         end
+        option do
+          value 'value2'
+          text 'Second value'
+        end
+        # event :change do
+        #   snackbar 'item changed'
+        # end
       end
+
+      blank
+
+      select full_width: false do
+        icon :filter_list
+        label 'Default (outlined) style ...'
+        option disabled: true do
+          text 'Pick One'
+        end
+        option do
+          value 'value1'
+          text '    One value'
+        end
+        option do
+          value 'value2'
+          text '    Second value'
+        end
+         event :change do
+           snackbar 'item changed'
+         end
+      end
+
+
     end
     
     attach :code, file: __FILE__

data/app/demo/components/sliders.pom

@@ -0,0 +1,54 @@
+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
+
+    title 'Disabled slider'
+    slider disabled: true, value_min: 0, value_max: 100 do
+      value 42
+    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
+
+

data/app/demo/components/tab_bars.pom

@@ -0,0 +1,66 @@
+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
+    separator
+
+    title 'Content is automatically displayed/hidden'
+    tab_bar do
+      tab 'One', selected: true do
+        heading3 'Tab 1'
+      end
+      tab 'Two' do
+        heading3 'Tab 2'
+      end
+      tab 'Three' do
+        heading3 'Tab 3'
+      end
+    end
+
+  end
+
+  attach :code, file: __FILE__
+end
+
+
+