coprl 0.1.0 → 3.0.0.beta.5

data/app/demo/components/padding.pom

@@ -0,0 +1,96 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:padding) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Padding'
+
+  indented_grid do
+
+    headline 'Padding'
+    text %(Block containers (grid/column, content, card) have default padding that can be modified.)
+    blank
+    text %(There are four levels of padding: 0 = off, 1 = gutter_width/4, 2 = gutter_width/2, 3 = gutter_width)
+    text %(You can also specify :all, :none or true (same as :all) and false (same as :none))
+    text %(Each block container defines its default values (top,bottom,right,left) padding differently.)
+
+
+    blank
+    title 'Grid padding'
+    text %(Top level grid padding by default is level 3: top3, right3, bottom3, left3.
+          Specifying padding: top is the same as padding: top3.)
+    text %(Column padding defaults to :none. The definition of column padding for [top,bottom,right,left] is equal to [top2,right2,bottom2,left2])
+  end
+  grid color: :darkgrey do
+    column 12, color: :lightgray do
+      body 'top level default grid padding'
+    end
+  end
+  indented_grid do
+    blank
+    text %(A grid nested in another grid turns off padding for the right and left by default: top3, right0, bottom3: left0.)
+
+    grid color: :darkgrey do
+      column 12, color: :lightgray do
+        body 'nested default level grid padding'
+      end
+    end
+    blank
+    text %(You can control the padding for each dimension.)
+
+    grid color: :darkgrey, padding: [:left0, :top3, :bottom2, :right1] do
+      column 12, color: :lightgray, padding: [:left3, :top1, :bottom2, :right0] do
+        body 'Custom padding (view source to see this)'
+      end
+    end
+    blank
+
+    title 'Content padding'
+    text %(A content block by default has `:none` padding. The default level is level 2. So :all is equal to [:top2,:right2,:bottom2,:left2])
+    grid color: :darkgrey, padding: :none do
+      column 12, color: :lightgray, padding: :none do
+        content do
+          body 'No padding'
+        end
+      end
+    end
+    blank
+    grid color: :darkgrey, padding: :none do
+      column 12, color: :lightgray, padding: :none do
+        content padding: :all do
+          body 'default :all padding is level 2'
+        end
+      end
+    end
+    blank
+    grid color: :darkgrey, padding: :none do
+      column 12, color: :lightgray, padding: :none do
+        content padding: [:top3, :bottom0, :right1, :left2] do
+          body 'Custom padding'
+        end
+      end
+    end
+    blank
+    title 'Card padding'
+    text %(A card defaults its padding to `:all`. The default level is level 2. So :all is equal to [:top2,:right2,:bottom2,:left2])
+    grid color: :darkgrey, padding: :none do
+      column 12, color: :lightgray, padding: :none do
+        card do
+          body 'Defaults to :all, level2'
+        end
+      end
+    end
+    blank
+    grid color: :darkgrey, padding: :none do
+      column 12, color: :lightgray, padding: :none do
+        card padding: [:top3, :bottom0, :right1, :left2] do
+          body 'Custom padding'
+        end
+      end
+    end
+    blank
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/progress.pom

@@ -0,0 +1,71 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::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

@@ -0,0 +1,69 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:selects) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Select Fields'
+
+  indented_grid do
+    content do
+      select full_width: false do
+        label 'Default (outlined) 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 outlined: false do
+        label 'Alternate style ...'
+        option
+        option selected: true 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__
+  end
+end

data/app/demo/components/sliders.pom

@@ -0,0 +1,54 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::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

@@ -0,0 +1,35 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:snackbar) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Snackbar'
+
+  indented_grid do
+    title 'On Page'
+    body 'You can attach a snackbar on the server side and will render after load.'
+    snackbar 'Top Level Important Information!'
+
+    attach :snackbar_attached
+
+    title 'As Event'
+    button 'Show Snackbar', id: :show_snackbar do
+      event :click 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__
+end

data/app/demo/components/snackbar_attached.pom

@@ -0,0 +1,6 @@
+
+Coprl::Presenters.define(:snackbar_attached) do
+  title 'In Attached'
+  body  'This can be done in an attached presenter as well'
+  snackbar 'Attached Snackbar Displayed!'
+end

data/app/demo/components/steppers.pom

@@ -0,0 +1,178 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::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
+
+Coprl::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
+
+Coprl::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
+
+Coprl::Presenters.define(:step2_type2_form) do
+  headline 'Form of Type2'
+end
+
+