voom-presenters 0.1.10 → 2.0.0

data/app/demo/custom_css.pom

@@ -0,0 +1,37 @@
+require_relative 'helpers/indented_grid'
+
+Voom::Presenters.define(:custom_css) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+
+  page_title 'Custom CSS' do
+    icon :settings
+  end
+
+
+  indented_grid do
+    headline 'CSS', level: 1
+
+    body 'You can define custom CSS globally and for each namespace/presenter.'
+    blank
+    title 'Global CSS'
+    body 'Define global css in the file `public/presenters/global.css`. Styles defined here will be loaded after default styling.'
+
+    title 'Presenter CSS'
+    body 'Each `[namespace/]presenter` can have custom css.'
+    body 'Simply create a file `public/presenters/[namspace]/[presenter].css` that matches your namespace and presenter.'
+    body 'This page has a presenter css file that is located at: `public/presenters/custom_css.css`'
+
+    title 'Settings'
+    body 'You can set the default path to load css from using the following:'
+    body <<-HTML
+      ```
+        Voom::Presenters::Settings.configure do |config|
+          config.presenters.web_client.custom_css = 'public/presenters'
+        end
+    ```
+    HTML
+
+  end
+  attach :code, file: __FILE__
+end

data/app/demo/events/actions/autocomplete.pom

@@ -9,8 +9,8 @@ Voom::Presenters.define(:autocomplete_action) do
     title 'Work In Progress'
     body 'Provides a text field that when typed into will fetch a set of items to select base on what was typed.',
          'Useful for providing search clues as the user types.',
-         'The search command returned should either an array of text terms found,
-              or optionally an id that will also be sumbitted using the same name as plus `_id` as the text field.'
+         'The search command returned should either be an array of text terms found,
+              or optionally an id that will also be submitted using the same name as plus `_id` as the text field.'
 
 
     heading 'Search'
@@ -29,4 +29,4 @@ Voom::Presenters.define(:autocomplete_action) do
   end
 
   attach :code, file: __FILE__
-end
+end

data/app/demo/events/actions/clear.pom

@@ -0,0 +1,25 @@
+Voom::Presenters.define(:clear_action) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :events_drawer
+
+  indented_grid do
+    heading 'Clear'
+    body 'Allows you to clear a component.',
+         'Takes the id of the element to clear.'
+
+    text_field id: :input_to_clear do
+      label 'Input to clear'
+      value 'Value to clear'
+    end
+
+    subtitle 'Text to clear', id: :text_to_clear
+
+    button 'clear' do
+      event :click do
+        clear :input_to_clear, :text_to_clear
+      end
+    end
+  end
+  attach :code, file: __FILE__
+end

data/app/demo/events/actions/dialogs/discard.pom

@@ -0,0 +1,9 @@
+Voom::Presenters.define(:discard_dialog) do
+  dialog id: :discard_dialog do
+    title 'Discard unsaved changes?'
+    actions do
+      button :discard, id: :discard_button
+      button :cancel, type: :raised, id: :cancel_button
+    end
+  end
+end

data/app/demo/events/actions/dialogs/show_dialog.pom

@@ -3,7 +3,9 @@ Voom::Presenters.define(:show_dialog) do
     title "Show Dialog"
     body 'This is an example and event opening a dialog'
 
-    button 'Disabled action', disabled: true
-    button 'Close'
+    actions do
+      button 'Close'
+      button 'Disabled action', disabled: true
+    end
   end
 end

data/app/demo/events/actions/last_response.pom

@@ -0,0 +1,40 @@
+Voom::Presenters.define(:last_response_action) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :events_drawer
+
+  indented_grid do
+    heading 'Last Response'
+    body 'You can access the last response and forward its data to a snackbar or posts|updates|deletes|replaces|loads.'
+    title 'Posts'
+    button 'quote' do
+      event :click do
+        posts '_echo_', {quote: 'Compromise is the shared hypotenuse of the conjoined triangles of success.'}
+        posts '_echo_', echo: {quote: last_response.quote}, headers: {'X-Custom'=>'Boom!'}
+        snackbar last_response.echo.quote
+      end
+    end
+
+    title 'Replaces'
+    button 'replaces' do
+      event :click do
+        posts '_echo_', {quote: 'Compromise is the shared hypotenuse of the conjoined triangles of success.'}
+        replaces :replace_me, :replace_text, text: last_response.quote
+      end
+    end
+    attach :replace_text
+
+    blank
+    title "Loads another presesnter"
+    text "Will reload this page passing a value from the last response of another action"
+    text "Quote from last response: {c:blue}#{context.fetch(:quote, nil)}{/c}" unless context.fetch(:quote, nil).nil?
+    button 'Reloads this page' do
+      event :click do
+        posts '_echo_', {quote: 'Compromise is the shared hypotenuse of the conjoined triangles of success.'}
+        loads :last_response_action, reloaded: true, quote: last_response.quote
+      end
+    end
+    heading context['reloaded'] ? "Reloaded" : 'Loaded'
+  end
+  attach :code, file: __FILE__
+end

data/app/demo/events/actions/loads.pom

@@ -1,4 +1,4 @@
-Voom::Presenters.define(:toggle_visibility_action) do
+Voom::Presenters.define(:loads_action) do
   helpers Demo::Helpers::IndentedGrid
   attach :top_nav
   attach :events_drawer
@@ -7,13 +7,23 @@ Voom::Presenters.define(:toggle_visibility_action) do
     heading 'Loads'
     body 'Loads a new presenter, replacing the whole page.'
 
-    subheading context['reloaded'] ? "Reloaded" : 'Loads'
-    button 'loads' do
-      event :click do
-        loads :events, reloaded: true
+    content do
+      subheading "#{context['reloaded'] ? "Reloaded" : 'Loads'} another presenter"
+      button 'loads this page' do
+        event :click do
+          loads :loads_action, reloaded: true, nil_value:nil
+        end
+      end
+      heading context['reloaded'] ? "Reloaded" : 'Loaded'
+    end
+    content do
+      subheading "An absolute URL loads another page"
+      button 'loads google.com' do
+        event :click do
+          loads 'https://google.com'
+        end
       end
     end
-    heading context['reloaded'] ? "Reloaded" : 'Loaded'
   end
   attach :code, file: __FILE__
 end

data/app/demo/events/actions/posts.pom

@@ -14,7 +14,7 @@ Voom::Presenters.define(:posts_action) do
     content shows_errors: false do
       button 'posts' do
         event :click do
-          posts 'postpath', {optional: :params}
+          posts 'postpath', {optional: :params, its_nil: nil}
         end
       end
     end

data/app/demo/events/actions/prompt_if_dirty.pom

@@ -0,0 +1,54 @@
+Voom::Presenters.define(:dirtyable_container) do
+  content id: :dirtyable_container do
+    grid do
+      column 6 do
+        text_field name: :a_text_field do
+          label 'Input'
+          value 'initial value'
+        end
+
+        button :save, type: :raised do
+          event :click do
+            snackbar 'Saved!'
+            replaces :dirtyable_container, :dirtyable_container
+          end
+        end
+        button :cancel do
+          event :click do
+            prompt_if_dirty :discard_dialog
+            replaces :dirtyable_container, :dirtyable_container
+          end
+        end
+      end
+    end
+  end
+end
+
+Voom::Presenters.define(:prompt_if_dirty_action) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :events_drawer
+  attach :discard_dialog
+
+  indented_grid do
+    heading 'Prompt if dirty'
+    body 'Allows you to prompt users to discard changes in fields which have unsaved changes.'
+    blank
+    body <<~MARKDOWN
+      Takes the ID of a dialog to display when one or more fields in the
+      closest container has changed.\n
+      Optionally takes an `input_tag` which has priority over the closest
+      container and can be used if no closest container is present.
+    MARKDOWN
+    blank
+    body <<~MARKDOWN
+      If the user dismisses the dialog (via the scrim or cancel button), the
+      actions following `prompt_if_dirty` are not executed.
+    MARKDOWN
+
+    blank
+    attach :dirtyable_container
+  end
+
+  attach :code, file: __FILE__
+end

data/app/demo/events/actions/toggle_visiblity.pom

@@ -7,9 +7,10 @@ Voom::Presenters.define(:toggle_visibility_action) do
     heading 'Toggle Visibility'
     body 'Allows you to toggle visibility of content on and off on events.',
          'Takes the id of the element to toggle.',
-         "Optionally takes :on or :off to force visibility."
-
-    subheading 'Toggle Visibility'
+         "Optionally takes :on or :off to force visibility.",
+         "`show :toggle_me` **is the same as** `toggle_visibility :toggle_me, on: true`",
+         "`hide :toggle_me` **is the same as** `toggle_visibility :toggle_me, on: false`"
+    
     button 'toggle visibility' do
       event :click do
         toggle_visibility :toggle_me

data/app/demo/events/content_as_form.pom

@@ -0,0 +1,313 @@
+Voom::Presenters.define(:response_content) do
+  helpers do
+    def params
+      return {} unless context[:id]
+
+      {tag: context[:id]}
+    end
+  end
+
+  content id: :response_content, **params do
+    text context[:content]
+  end
+end
+
+Voom::Presenters.define(:content_as_form) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :top_nav
+  attach :events_drawer
+
+  attach :response_content
+
+  indented_grid do
+    card id: :form_1 do
+      title 'Form'
+      form do
+        text_field name: :text1 do
+          label 'Text 1'
+        end
+
+        checkbox name: :on, value: true, off_value: false, text: 'Checkbox'
+
+        blank
+
+        grid padding: :none do
+          column 12 do
+            button 'Submit, grid > column', type: :raised do
+              event :click do
+                posts '/_echo_'
+                replaces :response_content, :response_content,
+                         content: last_response,
+                         id: 1
+              end
+            end
+          end
+        end
+
+        content do
+          button 'Submit, content', type: :raised do
+            event :click do
+              posts '/_echo_'
+              replaces :response_content, :response_content,
+                       content: last_response,
+                       id: 2
+            end
+          end
+        end
+
+        button 'Submit', type: :raised do
+          event :click do
+            posts '/_echo_'
+            replaces :response_content, :response_content,
+                     content: last_response,
+                     id: 3
+          end
+        end
+      end
+    end
+  end
+
+  indented_grid do
+    card do
+      title 'Content'
+      content id: :content_1 do
+        text_field name: :text1 do
+          label 'Text 1'
+        end
+
+        checkbox name: :on, value: true, off_value: false, text: 'Checkbox'
+
+        blank
+
+        grid padding: :none do
+          column 12 do
+            button 'Submit, grid > column', type: :raised do
+              event :click do
+                posts '/_echo_'
+                replaces :response_content, :response_content,
+                         content: last_response,
+                         id: 1
+              end
+            end
+          end
+        end
+
+        content do
+          button 'Submit, content', type: :raised do
+            event :click do
+              posts '/_echo_'
+              replaces :response_content, :response_content,
+                       content: last_response,
+                       id: 2
+            end
+          end
+        end
+
+        button 'Submit', type: :raised do
+          event :click do
+            posts '/_echo_'
+            replaces :response_content, :response_content,
+                     content: last_response,
+                     id: 3
+          end
+        end
+      end
+    end
+  end
+
+  grid do
+    column 12 do
+      text_field id: :input_tag_extra, name: :whatever, tag: :test_input_tag do
+        value 'foo bar'
+      end
+    end
+  end
+
+  indented_grid do
+    card do
+      title 'Content with input_tag'
+      content id: :content_2, tag: :test_input_tag do
+        text_field name: :text1 do
+          label 'Text 1'
+        end
+
+        checkbox name: :on, value: true, off_value: false, text: 'Checkbox'
+
+        blank
+
+        grid padding: :none do
+          column 12 do
+            button 'Submit, grid > column', type: :raised do
+              event :click do
+                posts '/_echo_',
+                      input_tag: :test_input_tag
+                replaces :response_content, :response_content,
+                         content: last_response,
+                         id: 1
+              end
+            end
+          end
+        end
+
+        content do
+          button 'Submit, content', type: :raised do
+            event :click do
+              posts '/_echo_',
+                    input_tag: :test_input_tag
+              replaces :response_content, :response_content,
+                       content: last_response,
+                       id: 2
+            end
+          end
+        end
+
+        button 'Submit', type: :raised do
+          event :click do
+            posts '/_echo_',
+                  input_tag: :test_input_tag
+            replaces :response_content, :response_content,
+                     content: last_response,
+                     id: 3
+          end
+        end
+      end
+    end
+  end
+
+  indented_grid do
+    content id: :content_array do
+      card do
+        title 'Array'
+
+        content do
+          text_field name: 'inputs[]' do
+            value 'Value1'
+          end
+
+          text_field name: 'inputs[]' do
+            value 'Value2'
+          end
+
+          text_field name: 'inputs[]' do
+            value 'Value3'
+          end
+
+          checkbox name: :on, value: true, off_value: false, text: 'Checkbox'
+
+          button :submit, type: :raised do
+            event :click do
+              posts '/_echo_'
+              replaces :response_content, :response_content,
+                       content: last_response,
+                       id: 1
+            end
+          end
+        end
+      end
+    end
+  end
+
+  # Dialog tests:
+  attach :dialog_a
+  attach :dialog_b
+  attach :dialog_c
+  attach :dialog_d
+
+  button 'dialog_a' do
+    event :click do
+      dialog :dialog_a
+    end
+  end
+
+  button 'dialog_b' do
+    event :click do
+      dialog :dialog_b
+    end
+  end
+
+  button 'dialog_c' do
+    event :click do
+      dialog :dialog_c
+    end
+  end
+
+  button 'dialog_d' do
+    event :click do
+      dialog :dialog_d
+    end
+  end
+end
+
+Voom::Presenters.define(:dialog_a) do
+  dialog id: :dialog_a do
+    form do
+      text_field name: :dialog_text_field do
+        value 'whatever'
+      end
+    end
+    actions do
+      button 'Submit', type: :raised do
+        event :click do
+          posts '/_echo_'
+        end
+      end
+    end
+  end
+end
+
+Voom::Presenters.define(:dialog_b) do
+  dialog id: :dialog_b do
+    content do
+      text_field name: :dialog_text_field do
+        value 'whatever'
+      end
+    end
+    actions do
+      button 'Submit, untagged content', type: :raised do
+        event :click do
+          posts '/_echo_'
+        end
+      end
+    end
+  end
+end
+
+Voom::Presenters.define(:dialog_c) do
+  dialog id: :dialog_c do
+    content tag: :some_dialog_tag do
+      text_field name: :dialog_text_field do
+        value 'whatever'
+      end
+    end
+
+    actions do
+      button 'Submit, input_tag', type: :raised do
+        event :click do
+          posts '/_echo_',
+                input_tag: :some_dialog_tag
+        end
+      end
+    end
+  end
+end
+
+Voom::Presenters.define(:dialog_d) do
+  dialog id: :dialog_d do
+    grid do
+      column 12 do
+        text_field name: :dialog_text_field do
+          value 'whatever'
+        end
+      end
+    end
+
+    actions do
+      button 'Submit, no viable container', type: :raised do
+        event :click do
+          posts '/_echo_'
+        end
+      end
+    end
+  end
+end