voom-presenters 0.2.0 → 2.0.0

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

@@ -1,8 +1,8 @@
 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
+    %i(search_select floating_card drag_drop).sort.each do |pattern|
+      item titleize(pattern)  do
         event :click do
           loads pattern
         end

data/app/demo/components/number_fields.pom

@@ -0,0 +1,53 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:number_fields) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Number Fields'
+
+  indented_grid do
+
+    title 'Basic'
+    number_field name: :text do
+      label 'Enter a number'
+      hint 'Enter text or scroll to your desired number'
+    end
+    blank
+
+    title 'Min/Max/Step'
+    number_field name: :min_max, min: 0, max: 100, step: 5 do
+      label 'Min/Max/Step'
+      hint 'Arrows will step in increments of 5'
+    end
+    blank
+
+    title 'Decimals'
+    number_field name: :decimal, min: 1.0, max: 100, step: 0.01 do
+      label 'Decimal'
+      hint 'Arrows will step in increments of .01'
+    end
+    blank
+
+    title 'With Leading Icon'
+    number_field name: :amount do
+      label 'Amount'
+      icon :attach_money, position: :left
+    end
+
+    title 'With Trailing Icon'
+    number_field name: :amount2 do
+      label 'Amount'
+      icon :attach_money, position: :right
+    end
+    blank
+
+    title 'Read Only'
+    number_field name: :readonly, readonly: true do
+      label 'Amount'
+      value '500'
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/padding.pom

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

@@ -28,6 +28,11 @@ Voom::Presenters.define(:sliders) do
       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

data/app/demo/components/tab_bars.pom

@@ -42,6 +42,21 @@ Voom::Presenters.define(:tab_bars) do
         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__

data/app/demo/components/tables.pom

@@ -27,61 +27,72 @@ Voom::Presenters.define(:tables) do
   end
 
   indented_grid do
-    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'
+    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
 
-    form do
-      grid do
-        column 12 do
+    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)'
-          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
+          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
-        end
-        column 12 do
           button 'SUBMIT', type: :raised do
             event :click do
-              replaces  :context_list, :context_list
+              replaces :context_list, :context_list
             end
           end
-          attach :context_list
         end
       end
+      column 6 do
+        attach :context_list
+      end
     end
 
     grid wide: true do

data/app/demo/components/text_areas.pom

@@ -9,23 +9,30 @@ Voom::Presenters.define(:text_areas) do
   indented_grid do
     headline 'Multiple line'
 
-    text_area name: :notes, rows: 3 do
-      label 'Text lines...'
-      hint 'Default behavior is full width'
+    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
 
-
-    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
+end