coprl 0.1.0 → 3.0.0.beta.1

data/app/demo/components/date_fields.pom

@@ -0,0 +1,106 @@
+require 'date'
+
+Coprl::Presenters.define(:date_fields) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Date Fields'
+
+  indented_grid do
+    body <<~DOC
+      A date separates user display format from the value format.  
+      
+      The default date user display [format](/formatting_tokens#date) can be configured globally using the following:      
+      
+      ````
+      Coprl::Presenters::Settings.configure do |config|
+        config.presenters.components.defaults.date.format = 'F j, Y'
+      end
+      ````
+            
+      The value format for date times can be the following:
+
+      * Ruby Time/DateTime objects.
+      * ISO/Chronologically Date Strings, e.g. "2017-02-26"
+    DOC
+    grid do
+      column 6 do
+        date_field name: :skydive_at,
+                       format: 'F j, Y' do
+          label 'Select your date to skydive'
+          icon :event
+          event :change do
+            replaces :context_list, :context_list
+          end
+        end
+      end
+      column 6 do
+        attach :context_list
+      end
+    end
+    grid do
+      column 6 do
+        title 'Min Date'
+        date_field min_date: "2020-01-01"
+
+        title 'Max Date'
+        date_field max_date: "2017-12-15"
+
+        title 'Min Date (today)'
+        date_field min_date: :today
+
+        title 'Min (today), Max (14 days from now)'
+        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)]
+
+        title 'Disable range of dates'
+        date_field disable: [
+            {
+                from: "2025-04-01",
+                to: "2025-05-01"
+            },
+            {
+                from: "2025-09-01",
+                to: "2025-12-01"
+            }
+        ]
+
+        title 'Enabling specific dates'
+        date_field enable: [
+            {
+                from: "2025-04-01",
+                to: "2025-05-01"
+            },
+            {
+                from: "2025-09-01",
+                to: "2025-12-01"
+            }
+        ]
+        title 'Selecting multiple dates'
+        date_field mode: :multiple
+
+        title 'Preloading multiple dates'
+        date_field mode: :multiple do
+          value ["2016-10-20", "2016-11-04"]
+        end
+
+        title 'Range'
+        date_field mode: :range
+      end
+    end
+
+    grid do
+      column 6 do
+        title 'As a simple text field'
+        text 'You can use the date field without a picker and get a simple auto-formatting text input.'
+        date_field picker: false do
+          label 'Birthdate'
+        end
+      end
+    end
+
+  end
+  attach :code, file: __FILE__
+end

data/app/demo/components/datetime_fields.pom

@@ -0,0 +1,113 @@
+require 'date'
+
+Coprl::Presenters.define(:datetime_fields) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Date Time'
+
+  indented_grid do
+    body <<~DOC
+      A date time separates user display format from the value format.  
+      
+      The default date time user display [format](/formatting_tokens#date) can be configured globally using the following:      
+      
+      ````
+      Coprl::Presenters::Settings.configure do |config|
+        config.presenters.components.defaults.datetime.format = 'F j, Y H:i'
+      end
+      ````
+            
+      The value format for date times can be the following:
+
+      * Ruby Time/DateTime objects.
+      * ISO Date Strings, e.g. "2017-02-26T19:40:03.243Z"
+      * Chronologically Date Strings, e.g., YYYY-MM-DD HH:MM
+    DOC
+    grid do
+      column 6 do
+        datetime_field name: :skydive_at,
+                       format: 'F j, Y h:i K' do
+          value Time.new(2019, 10, 31)
+          label 'Select your date and time to skydive'
+          icon :event
+          event :change do
+            replaces :context_list, :context_list
+          end
+        end
+      end
+      column 6 do
+        attach :context_list
+      end
+    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"
+
+        title 'Max Date'
+        datetime_field max_date: "2017-12-15 02:00"
+
+        title 'Min Date (today)'
+        datetime_field min_date: :today
+
+        title 'Min (today), Max (Halloween 2025)'
+        datetime_field min_date: :today, max_date: Time.new(2025, 10, 31) # Or in rails Time.now + 14.days
+
+        title 'Disabling specific dates'
+        datetime_field disable: ["2025-01-30", "2025-02-21", "2025-03-08", DateTime.new(2025, 4, 9)]
+
+        title 'Disable range of dates'
+        datetime_field disable: [
+            {
+                from: "2025-04-01",
+                to: "2025-05-01"
+            },
+            {
+                from: "2025-09-01",
+                to: "2025-12-01"
+            }
+        ]
+
+        title 'Enabling specific dates'
+        datetime_field enable: [
+            {
+                from: "2025-04-01",
+                to: "2025-05-01"
+            },
+            {
+                from: "2025-09-01",
+                to: "2025-12-01"
+            }
+        ]
+        title 'Selecting multiple dates'
+        datetime_field mode: :multiple
+
+        title 'Preloading multiple dates'
+        datetime_field mode: :multiple do
+          value ["2016-10-20", "2016-11-04"]
+        end
+
+        title 'Min Time'
+        datetime_field min_time: "9:00"
+
+        title 'Max Time'
+        datetime_field max_time: "20:00"
+
+        title 'Range'
+        datetime_field mode: :range
+
+        title '24 hour time'
+        datetime_field time_24hr: true, format: 'H:i'
+      end
+    end
+
+  end
+  attach :code, file: __FILE__
+end

data/app/demo/components/dialogs.pom

@@ -0,0 +1,195 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::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
+      end
+    end
+
+    dialog id: :hold_on do
+      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
+
+    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
+
+    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
+
+  attach :code, file: __FILE__
+end
+

data/app/demo/components/drawers.pom

@@ -0,0 +1,35 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:drawers) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  page_title 'Drawers'
+
+  drawer do
+    menu do
+      item 'About (Drawer)' do
+        event :click do
+          loads :index
+        end
+      end
+
+      item 'Components (Drawer)' do
+        event :click do
+          loads :components
+        end
+      end
+
+      item 'Styles (Drawer)' do
+        event :click do
+          loads :styles
+        end
+      end
+    end
+  end
+
+  indented_grid do
+    headline 'Drawers'
+
+    attach :code, file: __FILE__
+  end
+end