voom-presenters 0.1.12 → 2.0.2

data/app/demo/components/cards.pom

@@ -25,8 +25,15 @@ Voom::Presenters.define(:cards) do
       end
     end
 
-    headline 'Square'
-    card width: '330px' do
+    blank
+    headline 'Square', inline: true
+    switch checked: true do
+      tooltip 'Hide/Show Square Card'
+      event :click do
+        toggle_visibility 'square_card'
+      end
+    end
+    card id: 'square_card', width: '330px' do
       media height: '200px', color: '#46B6AC' do
         image 'img/demo/dog.png', position: [:bottom, :right]
         title 'Update', color: :white, position: :bottom
@@ -55,8 +62,8 @@ Voom::Presenters.define(:cards) do
               color: :white, position: :top
       end
       actions do
-        button 'Add to Calendar'
-        button icon: :event
+        button 'Add to Calendar', color: :secondary
+        button icon: :event, color: :secondary
       end
     end
 

data/app/demo/components/chips.pom

@@ -7,84 +7,97 @@ Voom::Presenters.define(:chips) do
   page_title 'Chips'
 
   indented_grid do
-    chip 'Chip 1'
-    chip 'Chip 1', color: :primary
-    chip 'Chip 2', color: :secondary
-    chip color: :hotpink do
-      text 'Chip 3', color: :white
+    chipset do
+      chip 'Chip 1'
+      chip 'Chip 1', color: :primary
+      chip 'Chip 2', color: :secondary
+      chip color: :hotpink do
+        text 'Chip 3', color: :white
+      end
     end
-
     subheading 'leading icon'
-    chip 'Jane Smith', icon: :face
+    chipset do
+      chip 'Jane Smith', icon: :face
+    end
 
     subheading 'trailing icon'
-    chip 'Jane Smith' do
-      icon :more_vert, position: :right
+    chipset do
+      chip 'Jane Smith' do
+        icon :more_vert, position: :right
+      end
     end
 
     subheading 'leading and trailing icon'
-    chip 'Jane Smith' do
-      icon :face, position: :left
-      icon :more_vert, position: :right
-    end
-    heading 'Events'
-
-    chip 'Jane Smith' do
-      icon :face, position: :left
-      icon :more_vert, position: :right
-      event :click do
-        snackbar 'chip clicked!'
+    chipset do
+      chip 'Jane Smith' do
+        icon :face, position: :left
+        icon :more_vert, position: :right
       end
     end
+    heading 'Events'
 
-    chip do
-      text 'Jane Smith' do
+    chipset do
+      chip 'Jane Smith' do
+        icon :face, position: :left
+        icon :more_vert, position: :right
         event :click do
-          snackbar 'text clicked'
+          snackbar 'chip clicked!'
         end
       end
-      icon :face, position: :left
-      icon :more_vert, position: :right
-      event :click do
-        snackbar 'chip clicked!'
-      end
-    end
-
-    chip do
-      text 'Jane Smith' do
-        event :click do
-          snackbar 'text clicked'
+      chip do
+        text 'Jane Smith' do
+          event :click do
+            snackbar 'text clicked'
+          end
         end
-      end
-      icon :face, position: :left do
+        icon :face, position: :left
+        icon :more_vert, position: :right
         event :click do
-          snackbar 'left icon clicked'
+          snackbar 'chip clicked!'
         end
       end
-      icon :more_vert, position: :right
-      event :click do
-        snackbar 'chip clicked!'
-      end
-    end
 
-    chip do
-      text 'Jane Smith' do
-        event :click do
-          snackbar 'text clicked'
+      chip do
+        text 'Jane Smith' do
+          event :click do
+            snackbar 'text clicked'
+          end
         end
-      end
-      icon :face, position: :left do
+        icon :face, position: :left do
+          event :click do
+            snackbar 'left icon clicked'
+          end
+        end
+        icon :more_vert, position: :right
         event :click do
-          snackbar 'left icon clicked'
+          snackbar 'chip clicked!'
         end
       end
-      icon :more_vert, position: :right do
-        event :click do
-          snackbar 'right icon clicked'
+
+      chip do
+        text 'Jane Smith' do
+          event :click do
+            snackbar 'text clicked'
+          end
+        end
+        icon :face, position: :left do
+          event :click do
+            snackbar 'left icon clicked'
+          end
+        end
+        icon :more_vert, position: :right do
+          event :click do
+            snackbar 'right icon clicked'
+          end
         end
       end
     end
 
+    title 'Chips as input', id: :input_chips
+    body 'You can set the name and value attributes of a chip, they then can be posted.
+          An example of this can be found in the [search select](/search_select) pattern demo.'
+
+
     attach :code, file: __FILE__
   end
 end

data/app/demo/components/content.pom

@@ -0,0 +1,111 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:content) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Content'
+
+  indented_grid do
+    headline 'Content blocks are wrappers for content and layout'
+    body %(They have many uses this demo will outline their attributes and their common use cases.)
+    blank
+    body %(See the [padding demo](#{presenters_path(:padding)}) for example on how padding works in content blocks.)
+    blank
+
+    title 'Content as a block element'
+    content do
+      text 'A content block with no attributes can turn an inline element into a block element', inline: true
+    end
+    text '..continuing text', inline: true
+    blank
+
+    title 'Attribute: `inline`'
+    content padding: :bottom3 do
+      text 'Inline controls the behavior of the content block within its context. It does not afffect the layout or flow' +
+               'of components within it. This provides a powerful method for building custom layouts'
+      content do
+        content inline: true, width: '500px', background_color: :cyan, padding: :full do
+          card do
+            text 'Section One (Chips in a block)'
+            chipset do
+              chip 'Chip 1'
+              chip 'Chip 1', color: :primary
+              chip 'Chip 2', color: :secondary
+              chip color: :hotpink do
+                text 'Chip 3', color: :white
+              end
+            end
+          end
+        end
+        content inline: false, width: '20%', position: [:top, :right] do
+          card do
+            text 'Section Two'
+          end
+        end
+        content inline: true, width: '20%' do
+          card do
+            text 'Section Three'
+          end
+        end
+      end
+    end
+    blank
+
+    title 'Attribute: `hidden`'
+    text 'A content block can be hidden and shown in response to page events.'
+    content id: :peekaboo, hidden: true do
+      title 'Peekabo'
+    end
+    button :show_hide do
+      event :click do
+        toggle_visibility :peekaboo
+      end
+    end
+    blank
+
+    title 'Attributes: `width` and `height`'
+    text 'A content block can set its width and height. Units can be pixels, rems or percentages.'
+    content width: '50%', height: '8rem' do
+      card do
+        title "I'm wider! and taller!"
+      end
+    end
+    blank
+
+    title 'Attributes: `position`'
+    text 'A content block can be positioned to be :top, :right, :bottom, :left or a combination of the container its inside'
+    content id: :parent, width: '50%', height: '8rem' do
+      content position: [:bottom, :right] do
+        card do
+          title "I'm on the bottom right"
+        end
+      end
+    end
+    blank
+
+    title 'Attributes: `text_align`'
+    text %(A content block can define how its typography will be alligned inside it.
+               Valid values: left|right|center|justify)
+    content width: '50%', height: '8rem' do
+      content text_align: :center do
+        title "I'm centered text", inline: 'true'
+        title ".. me 2", inline: 'true'
+      end
+    end
+    blank
+
+    title 'Attribute: `float`'
+    text 'A content block can float above the other content. This is useful for things like type ahead previews. Or hovering previews.'
+    content float: true do
+      card do
+        title "I'm floating!"
+      end
+    end
+    text "xxxxxxxxxxxxxxxx I'm text that is obscured by the floating card in the content block above me"
+    blank
+
+
+    attach :code, file: __FILE__
+  end
+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/dialogs.pom

@@ -2,11 +2,79 @@ require_relative '../helpers/indented_grid'
 
 Voom::Presenters.define(:dialogs) do
   helpers Demo::Helpers::IndentedGrid
+  helpers do
+    def dlg_form
+      form do
+        text_field name: :myfield do
+          label 'Data to post'
+        end
+        grid padding: :none do
+          column 4, padding: :none do
+            date_field do
+              label 'Date Field'
+            end
+          end
+          column 4
+          column 4 do
+            time_field do
+              label 'Time Field'
+            end
+          end
+        end
+        text_field name: :myfield2 do
+          label 'More Data to post'
+        end
+      end
+    end
+
+    def shakespeare
+      <<-HEREDOC
+          This is a really really long description. Shakespeare once said:
+                          To be, or not to be: that is the question:
+                          Whether 'tis nobler in the mind to suffer
+                          The slings and arrows of outrageous fortune,
+                          Or to take arms against a sea of troubles,
+                          And by opposing end them? To die: to sleep;
+                          No more; and by a sleep to say we end
+                          The heart-ache and the thousand natural shocks
+                          That flesh is heir to, 'tis a consummation
+                          Devoutly to be wish'd. To die, to sleep;
+                          To sleep: perchance to dream: ay, there's the rub;
+                          For in that sleep of death what dreams may come
+                          When we have shuffled off this mortal coil,
+                          Must give us pause: there's the respect
+                          That makes calamity of so long life;
+                          For who would bear the whips and scorns of time,
+                          The oppressor's wrong, the proud man's contumely,
+                          The pangs of despised love, the law's delay,
+                          The insolence of office and the spurns
+                          That patient merit of the unworthy takes,
+                          When he himself might his quietus make
+                          With a bare bodkin? who would fardels bear,
+                          To grunt and sweat under a weary life,
+                          But that the dread of something after death,
+                          The undiscover'd country from whose bourn
+                          No traveller returns, puzzles the will
+                          And makes us rather bear those ills we have
+                          Than fly to others that we know not of?
+                          Thus conscience does make cowards of us all;
+                          And thus the native hue of resolution
+                          Is sicklied o'er with the pale cast of thought,
+                          And enterprises of great pith and moment
+                          With this regard their currents turn awry,
+                          And lose the name of action.--Soft you now!
+                          The fair Ophelia! Nymph, in thy orisons
+                          Be all my sins remember'd!
+      HEREDOC
+    end
+  end
   attach :top_nav
   attach :component_drawer
   page_title 'Dialogs'
 
+
   indented_grid do
+    body 'Simple dialog with disabled button'
     button 'Show Dialog' do
       event :click do
         dialog :hold_on
@@ -14,13 +82,114 @@ Voom::Presenters.define(:dialogs) do
     end
 
     dialog id: :hold_on do
-      title "MDL Dialog"
-      body 'This is an example of the Material Design Lite dialog component. Please use responsibly.'
+      title "MDC Dialog"
+      body 'This is an example of the Material Design Component for the web dialog component. Please use responsibly.'
+
+      actions do
+        button 'Close'
+        button 'Disabled action', disabled: true
+      end
+    end
+
+    body 'Dialog with width set'
+    button 'Show Dialog' do
+      event :click do
+        dialog :width_demo
+      end
+    end
+
+    dialog id: :width_demo, width: '400px' do
+      title "MDC Dialog"
+      body shakespeare
+
+      actions do
+        button 'Close'
+      end
+    end
+
+    grid do
+      column 9 do
+        body 'Dialog with form'
+        button 'With Form' do
+          event :click do
+            dialog :with_form
+          end
+        end
+        body 'Dialog with multiple forms'
+        button 'Muliple Forms' do
+          event :click do
+            dialog :multi_form_dialog
+          end
+        end
+        body 'Dialog with height and width'
+        button 'Height/Width' do
+          event :click do
+            dialog :height_width_dialog
+          end
+        end
+
+      end
+      column 3 do
+        attach :context_list
+      end
+    end
+
+    dialog id: :with_form do
+      title "Dialog with Form"
+      dlg_form
+      actions do
+        button 'Close'
+        button 'Update' do
+          event :click do
+            replaces :context_list, :context_list
+          end
+        end
+      end
+    end
 
-      button 'Disabled action', disabled: true
-      button 'Close'
+    dialog id: :multi_form_dialog do
+      title "Dialog with Multiple Forms"
+      subtitle
+      form do
+        text_field name: :myfield do
+          label 'Data to post'
+        end
+        text_field name: :myfield2 do
+          label 'More Data to post'
+        end
+        subtitle "These are normal buttons and will not automatically close the dialog. However, you can call 'close_dialog' to programatically close the dialog."
+        button 'Close' do
+          event :click do
+            close_dialog :multi_form_dialog
+          end
+        end
+        button 'Update (and remain open)' do
+          event :click do
+            replaces :context_list, :context_list
+          end
+        end
+      end
+      separator
+      content tag: :second_form_input do
+        dlg_form
+      end
+      subtitle 'The buttons below are Dialog Action buttons. When clicked, they will process any configured actions, then automatically clsoe the dialog.'
+      actions do
+        button 'Close'
+        button 'Update' do
+          event :click do
+            replaces :context_list, :context_list, input_tag: :second_form_input
+          end
+        end
+      end
     end
 
-    attach :code, file: __FILE__
+    dialog id: :height_width_dialog, height: '500px', width: '500px' do
+      title "Dialog with set dimensions"
+      body "MDC dialogs have default styles of max-width 560px (for 592px viewport or larger) and min-width 280px."
+    end
   end
-end
+
+  attach :code, file: __FILE__
+end
+