voom-presenters 0.2.0 → 2.1.0

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

@@ -2,13 +2,45 @@ 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 steppers sliders tab_bars
-      content icons datetime_fields date_fields time_fields
-      maps file_inputs
+      avatars
+      badges
+      buttons
+      cards
+      chips
+      content
+      date_fields
+      datetime_fields
+      dialogs
+      drawers
+      expansion_panels
+      fabs
+      fabs_mini
+      file_inputs
+      footers
+      headers
+      hidden_fields
+      icons
+      images
+      image_lists
+      layouts
+      lists
+      number_fields
+      maps
+      menus
+      multi_selects
+      progress
+      selects
+      sliders
+      snackbar
+      steppers
+      tab_bars
+      tables
+      text_areas
+      text_fields
+      time_fields
+      toggles
+      tooltips
+      unordered_lists
     ).sort.each do |comp|
       item titleize(comp) do
         event :click do

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,50 @@ 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
+        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__

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