voom-presenters 0.1.13 → 0.2.0

data/views/mdc/components/content.erb

@@ -1,6 +1,11 @@
 <div id="<%= comp.id %>"
+     <% if comp.tag %>
+     data-input-tag="<%= comp.tag %>"
+     <% end %>
      class="v-content
-            <%= 'v-hidden' if comp.hidden %>">
+            <%= 'v-hidden' if comp.hidden %>
+            <%= comp.float  ? 'v-content--float' : 'v-content--relative'%>
+               ">
   <% if comp.shows_errors %>
     <div class="v-errors">
   <% end %>

data/views/mdc/components/datetime.erb

@@ -2,14 +2,16 @@
   time_val = comp.value ? Array([comp.value]).join(', ') : nil
 %>
 <div id="<%= comp.id %>"
-      class="mdc-text-field v-datetime
-            <%= comp.icon ? 'mdc-text-field--with-leading-icon' : 'mdc-text-field--with-trailing-icon' %>
-            <%= 'mdc-text-field--fullwidth' if comp.full_width %>
+     <% if comp.tag %>
+     data-input-tag="<%= comp.tag %>"
+     <% end %>
+     class="v-input v-datetime mdc-text-field mdc-text-field--outlined
+            <%= 'mdc-text-field--with-trailing-icon' if comp.clear_icon %>
+            <%= 'mdc-text-field--disabled' if comp.disabled %>
             <%= 'is-invalid is-dirty' if comp.error %>"
      data-config='<%= snake_to_camel(to_hash(comp.config), except: %i(time_24hr)).to_json %>'
-     data-type='<%= comp.type %>'>
-  <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-text-field__icon',
-                                          parent_id: "#{comp.id}-input"} %>
+     data-type='<%= comp.type %>'
+     style="<%= 'width:100%' if comp.full_width %>">
   <input id="<%= comp.id %>-input"
          name="<%= comp.name %>"
          type="text"
@@ -20,16 +22,22 @@
          <%= 'required' if comp.required %>
          <%= 'invalid' if comp.error %>
          <%= "pattern='#{comp.pattern}'" if comp.pattern %>
-         <%= 'readonly' if comp.readonly %>
          list="<%= comp.id %>-list"
-         <%= erb :"components/event", :locals => {events: comp.events, parent_id: "#{comp.id}-input"} %>>
-  <label class='mdc-floating-label mdc-floating-label--float-above' for="<%= comp.id %>"><%= comp.label %></label>
-  <div class="mdc-line-ripple"></div>
+         <%= erb :"components/event", :locals => {events: comp.events, parent_id:  "#{comp.id}-input"} %>>
+  <label class="mdc-floating-label" for="<%= comp.id %>-input"><%= comp.label %></label>
+  <%= erb :"components/icon", :locals => {comp: comp.clear_icon, class_name: 'mdc-text-field__icon', parent_id: "#{comp.id}-input"} %>
+  <div class="mdc-notched-outline">
+    <svg>
+      <path class="mdc-notched-outline__path"/>
+    </svg>
+  </div>
+  <div class="mdc-notched-outline__idle"></div>
   <datalist id="<%= comp.id %>-list">
   </datalist>
-  <%= erb :"components/icon", :locals => {comp: comp.clear_icon, class_name: 'v-datetime--clear mdc-text-field__icon',
-                                          parent_id: "#{comp.id}-input"} %>
 </div>
-<p id="<%= comp.id %>-input-helper-text" class="mdc-text-field-helper-text" aria-hidden="true">
+<% if comp.error || comp.hint %>
+<p id="<%= comp.id %>-input-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">
   <%= comp.error || comp.hint %>
 </p>
+<% end %>
+<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/dialog.erb

@@ -2,7 +2,10 @@
   has_form = comp.components.select{|c| eq(c.type, :form)}.any?
 %>
 <dialog id="<%= comp.id %>"
-        class="mdl-dialog v-js-dialog"
+        <% if comp.tag %>
+        data-input-tag="<%= comp.tag %>"
+        <% end %>
+        class="v-dialog mdl-dialog"
     style="<%= "width: #{comp.width}" if comp.width %>
            <%= "height: #{comp.height}" if comp.height %>"
 >

data/views/mdc/components/event.erb

@@ -2,15 +2,11 @@
      data_events = events.map do |event|
        [event.event,
         event.actions.map do |action|
-          additional_options = case action.type.to_s
-                                when 'replaces' then
-                                  {grid_nesting:@grid_nesting, __parent_id__: parent_id}
-                                when 'update', 'post', 'delete', 'autocomplete' then
-                                  {__parent_id__: parent_id}
-                                else
-                                  {}
-                              end
-          [action.type, action.url, action.options.to_h.merge(additional_options), action.params.to_h]
+          require_relative "actions/#{action.type}"
+          # Deligate the action data to each action class
+          # [Type, URL, Options, Params] these are passed into javascript event/action class constructors
+          # Only the type need be canonical, the rest is defined between this class and its javascript
+          Object.const_get("::WebClient::Actions::#{inflector.camelize(action.type)}").new.call(action, parent_id, @grid_nesting)
         end,
        {once: false}]
      end %>

data/views/mdc/components/file_input.erb

@@ -0,0 +1,13 @@
+<% if comp %>
+<div class="v-file-input mdc-text-field mdc-text-field--outlined mdc-text-field--upgraded" style="width: 100%">
+  <input id="<%= comp.id %>-input" name="<%= comp.name %>" type="file">
+  <button class="mdc-button"><%= comp.button_label %></button>
+  <label for="<%= comp.id %>-input"><%= comp.input_label %></label>
+  <div class="mdc-notched-outline">
+    <svg>
+      <path class="mdc-notched-outline__path"/>
+    </svg>
+  </div>
+  <div class="mdc-notched-outline__idle"></div>
+</div>
+<% end %>

data/views/mdc/components/form.erb

@@ -1,4 +1,16 @@
+<%
+  def buttons?(components)
+    buttons(components).any?
+  end
+
+  def buttons(components)
+    components.select {|c| eq(c.type, :button)}
+  end
+%>
 <form role="form"
+      <% if comp.tag %>
+      data-input-tag="<%= comp.tag %>"
+      <% end %>
       id="<%= comp.id %>"
       class="v-has-errors v-form"
       style='width: 100%'
@@ -6,10 +18,12 @@
       <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.id} %>>
   <div class="v-errors">
     <%= erb :"components/render", :locals => {:components => comp.components.select {|c| !eq(c.type, :button)}, :scope => nil} %>
-    <div class="mdl-dialog__actions">
-      <% comp.components.select {|c| eq(c.type, :button)}.reverse.each do |button| %>
-        <%= erb :"components/button", :locals => {:comp => button} %>
-      <% end %>
-    </div>
+    <% if buttons?(comp.components) %>
+      <div class="mdl-dialog__actions">
+        <% buttons(comp.components).reverse.each do |button| %>
+          <%= erb :"components/button", :locals => {:comp => button} %>
+        <% end %>
+      </div>
+    <% end %>
   </div>
 </form>

data/views/mdc/components/google_map.erb

@@ -0,0 +1,9 @@
+<% if comp %>
+  <img id="<%= comp.id %>"
+       class="v-google-map-image"
+       src="<%= comp.url %>"
+       border="0"
+       height="<%= comp.height %>"
+       width="<%= comp.width %>"
+       alt="">
+<% end %>

data/views/mdc/components/grid.erb

@@ -1,7 +1,20 @@
-<% @grid_nesting += 1 %>
+<% @grid_nesting += 1
+   def _padding_array_(padding, nesting)
+     return (%i(top0 right0 bottom0 left0)-padding.map{|p|"#{p}0".to_sym}+padding.map(&:to_sym)).sort if padding
+     nesting >1 ? %i(top right0 bottom left0).sort : []
+   end
+
+   def _padding_classes_(padding, nesting, grid_or_column)
+     "v-#{grid_or_column}__padding-#{_padding_array_(padding, nesting).join('-')}"
+   end
+%>
 <div id="<%= comp.id %>"
-     class="mdc-layout-grid
-            <%= 'v-nested_grid' if @grid_nesting>1 && !comp.padded %>"
+     <% if comp.tag %>
+     data-input-tag="<%= comp.tag %>"
+     <% end %>
+     class="v-grid mdc-layout-grid
+            <%= _padding_classes_(comp.padding, @grid_nesting, :grid) %>
+            <%= 'v-grid__wide' if comp.wide %>"
      style="<%= "background-color: #{comp.color};" if comp.color %>">
   <% unless @grid_nesting>1 %>
   <% end %>
@@ -13,7 +26,8 @@
         span << " mdc-layout-grid__cell--span-#{col.send(device)}-#{device}" if col.send(device)
       end
     %>
-      <div id="<%= col.id %>" class="mdc-layout-grid__cell <%= span %>"
+      <div id="<%= col.id %>" class="v-column mdc-layout-grid__cell <%= span %>
+                          <%= _padding_classes_(col.padding, 0, :col) %> v-column--relative"
            style="<%= "background-color: #{col.color};" if col.color %>">
         <%= erb :"components/render", :locals => {:components => col.components, :scope => nil} %>
       </div>

data/views/mdc/components/headline.erb

@@ -1,2 +1,4 @@
+<% if comp %>
 <% class_name = '' unless local_variables.include? :class_name %>
 <%= erb :"components/typography", :locals => {comp: comp, type: comp.type, class_name: class_name} %>
+<% end %>

data/views/mdc/components/hidden_field.erb

@@ -1 +1,6 @@
-<input type="hidden" id="<%= comp.id %>" name="<%= comp.name %>" value="<%= comp.value %>"/>
+<input class="v-input v-hidden-field"
+       type="hidden"
+       <% if comp.tag %>
+       data-input-tag="<%= comp.tag %>"
+       <% end %>
+       id="<%= comp.id %>" name="<%= comp.name %>" value="<%= comp.value %>"/>

data/views/mdc/components/icon_toggle.erb

@@ -1,5 +1,5 @@
 <i id="<%= comp.id %>"
-   class="mdc-icon-toggle material-icons
+   class="v-icon-toggle mdc-icon-toggle material-icons
        <%= 'mdc-icon-toggle--disabled' if comp.disabled %>"
    role="button"
    aria-disabled="<%= comp.disabled %>"

data/views/mdc/components/list.erb

@@ -1,7 +1,10 @@
 <% unless comp.lines_only %>
-  <ul class="mdc-list
+  <ul id="<%= comp.id %>"
+      class="mdc-list
             <%= 'mdc-list--two-line' if comp.lines.select{|line| eq(line.type, :line) && line.subtitle }.any? %>
-            <%= 'mdc-list--avatar-list' if comp.lines.select{|line| eq(line.type, :line) && line.avatar }.any? %>"
+            <%= 'mdc-list--avatar-list' if comp.lines.select{|line| eq(line.type, :line) && line.avatar }.any? %>
+            <%= 'v-list__border' if comp.border %>"
+      style="<%= "background-color: #{comp.color};" if comp.color %>"
       data-total-lines="<%= comp.total_lines %>">
 <% end %>
 <% for line in comp.lines %>

data/views/mdc/components/list/actions/switch.erb

@@ -1 +1 @@
-<%= erb :"components/switch", :locals => {:comp => action.switch, class_name:nil} %>
+<%= erb :"components/switch", :locals => {:comp => action.switch, class_name:'v-list-switch-action'} %>

data/views/mdc/components/list/line.erb

@@ -1,19 +1,19 @@
 <% if line.menu %>
   <div class="mdc-menu-anchor">
 <% end %>
-<li class="mdc-list-item
+<li class="v-list-item mdc-list-item
           <%= 'mdc-list-item--selected' if line.selected %>
           <%= 'v-menu-click' if line.menu && line.actions.empty?%>
           <%= 'v-list-item--selectable' if line.selectable %>"
-    id="<%= line.id %>">
+    id="<%= line.id %>"
+    <%= erb :"components/event", :locals => {events: line.events, parent_id: line.event_parent_id} %>>
   <%= erb :"components/list/checkbox", :locals => {:line => line} %>
   <%= erb :"components/list/icon", :locals => {:line => line} %>
   <%= erb :"components/list/avatar", :locals => {:line => line} %>
   <span class="mdc-list-item__text
                <%= 'v-actionable' if line.events %>
-               <%= 'v-menu-click' if line.menu && line.actions.any? %>"
-        <%= erb :"components/event", :locals => {events: line.events, parent_id: line.event_parent_id} %>>
-    <%= expand_text(line.text&.text) %>
+               <%= 'v-menu-click' if line.menu && line.actions.any? %>">
+    <span class="mdc-list-item__primary-text"><%= expand_text(line.text&.text) %></span>
 
     <% if line.subtitle %>
       <span class="mdc-list-item__secondary-text">
@@ -32,4 +32,5 @@
 <% if line.menu %>
   <%= erb :"components/list/menu", :locals => {:comp => line.menu} %>
 </div>
-<%end%>
+<%end%>
+<%= erb :"components/tooltip", :locals => {comp: line.tooltip, parent_id: line.id} %>

data/views/mdc/components/menu.erb

@@ -15,19 +15,15 @@
     <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
       <% comp.items.each do |item| %>
         <% unless eq(item.type, :divider) %>
-          <li class="mdc-list-item <%= 'v-menu-item__selected' if item.selected %>" role="menuitem" tabindex="0"
-              <%= 'disabled' if item.disabled %>>
-            <% unless item.disabled %>
-              <a class="v-menu-link"
-                 id="<%= item.id %>"
-                 href="javascript:void(0)"
-                 <%= erb :"components/event", :locals => {events: item.events, parent_id: item.event_parent_id} %>>
-            <% end %>
+          <li id="<%= item.id %>" class="mdc-list-item <%= 'v-menu-item__selected' if item.selected %>" role="menuitem" tabindex="0"
+              <%= 'disabled' if item.disabled %>
+              <%= erb :"components/event", :locals => {events: item.events, parent_id: item.event_parent_id} unless item.disabled %>>
+            <a class="v-menu-link"
+                             id="<%= item.id %>"
+                             href="javascript:void(0)">
             <%= expand_text(item.text) %>
-            <% unless item.disabled %>
-              </a>
-              <%= erb(:"components/icon", locals: {comp: item.icon, position: [:right, :center]}) %>
-            <% end %>
+            </a>
+            <%= erb(:"components/icon", locals: {comp: item.icon, position: [:right, :center]}) %>
           </li>
         <% else %>
           <li class="mdc-list-divider" role="separator"></li>

data/views/mdc/components/radio_button.erb

@@ -1,11 +1,21 @@
-<label id="<%=comp.id%>" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="<%=comp.id%>-input">
-  <input id="<%= comp.id %>-input"
+<div class="mdc-form-field">
+  <div id="<%= comp.id %>"
+       <% if comp.tag %>
+       data-input-tag="<%= comp.tag %>"
+       <% end %>
+       class="v-radio mdc-radio v-input">
+    <input class="mdc-radio__native-control"
+           type="radio"
+           id="<%= comp.id %>-input"
+           value="<%= comp.value %>"
            name="<%= comp.name %>"
-         type="radio"
-         class="mdl-radio__button"
-         value="<%=comp.value%>"
-         <%if comp.checked%> checked<%end%><%if comp.disabled%> disabled<%end%>
-         <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id}%> />
-  <span class="mdl-radio__label"><%=comp.text%></span>
-</label>
-<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id }%>
+           <%if comp.checked%> checked<%end%><%if comp.disabled%> disabled<%end%>
+           <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id}%> >
+    <div class="mdc-radio__background">
+      <div class="mdc-radio__outer-circle"></div>
+      <div class="mdc-radio__inner-circle"></div>
+    </div>
+  </div>
+  <label for="<%=comp.id%>-input"><%=comp.text%></label>
+  <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id }%>
+</div>

data/views/mdc/components/rich_text_area.erb

@@ -0,0 +1,19 @@
+<div class="v-rich-text-area-container v-input"
+     <% if comp.tag %>
+     data-input-tag="<%= comp.tag %>"
+     <% end %>>
+  <label for="<%= comp.id %>"><%= expand_text(comp.label) %></label>
+  <div class="v-rich-text-area"
+       id="<%= comp.id %>"
+       style="<%= 'width:100%;' if comp.full_width %>
+              <%= "height:#{comp.height};" %>"
+       data-name="<%= comp.name %>"
+       <%= "data-placeholder='#{comp.placeholder}'" if comp.placeholder %>>
+  </div>
+  <input type="hidden" name="<%= comp.name %>" value="<%= comp.value %>"/>
+  <span class="mdl-textfield__error <% if comp.error %> is-invalid<%end%>" ><%= comp.error || comp.hint%></span>
+  <p id="<%= comp.id %>-input-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">
+    <%= comp.error || comp.hint %>
+  </p>
+  <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+</div>

data/views/mdc/components/select.erb

@@ -1,7 +1,11 @@
 <% if comp
   float_label = comp.options.select{|o| o.selected }.any?
 %>
-  <div class="mdc-select">
+  <div class="v-select mdc-select v-input"
+       <% if comp.tag %>
+       data-input-tag="<%= comp.tag %>"
+       <% end %>
+       <%= 'style="width: 100%;"' if comp.full_width %> <%= "#{comp.full_width}" %>>
     <select id="<%= comp.id %>"
             name="<%= comp.name%>"
             class="mdc-select__native-control"
@@ -15,8 +19,8 @@
         </option>
       <% end %>
     </select>
-    <div class="mdc-select__label
-               <%= 'mdc-floating-label--float-above' if float_label%>"><%= comp.label %></div>
+    <label class="mdc-floating-label
+               <%= 'mdc-floating-label--float-above' if float_label%>"><%= comp.label %></label>
     <div class="mdc-select__bottom-line"></div>
   </div>
   <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/slider.erb

@@ -0,0 +1,41 @@
+<div id="<%= comp.id %>"
+     <% if comp.tag %>
+     data-input-tag="<%= comp.tag %>"
+     <% end %>
+    class="v-slider v-input mdc-slider
+      <%= 'mdc-slider--discrete' if comp.discrete %>
+      <%= 'mdc-slider--display-markers' if comp.show_tracker_marks %>"
+     tabindex="0"
+     role="slider"
+     data-name="<%= comp.name %>"
+     <% if comp.step %>
+     data-step="<%= comp.step %>"
+     <% end %>
+     aria-valuemin="<%= comp.value_min %>"
+     aria-valuemax="<%= comp.value_max %>"
+     aria-valuenow="<%= comp.value unless comp.value.nil? %>"
+     aria-label="Select Value"
+    <%= erb :"components/event", :locals => {events: comp.events, parent_id: "#{comp.id}-input"} %>>
+<div class="mdc-slider__track-container">
+    <div class="mdc-slider__track"></div>
+
+    <% if comp.show_tracker_marks %>
+    <div class="mdc-slider__track-marker-container"></div>
+    <% end %>
+
+  </div>
+  <div class="mdc-slider__thumb-container">
+
+    <% if comp.discrete %>
+    <div class="mdc-slider__pin">
+      <span class="mdc-slider__pin-value-marker"></span>
+    </div>
+    <% end %>
+
+    <svg class="mdc-slider__thumb" width="21" height="21">
+      <circle cx="10.5" cy="10.5" r="7.875"></circle>
+    </svg>
+    <div class="mdc-slider__focus-ring"></div>
+  </div>
+</div>
+

data/views/mdc/components/snackbar.erb

@@ -6,12 +6,8 @@
           ]]
 %>
   <div id="<%=comp.id%>"
-       class="v-snackbar"
+       class="v-hidden"
        aria-hidden="true"
        data-events='<%= data_events.to_json %>'>
-    <div class="mdc-snackbar__text"></div>
-    <div class="mdc-snackbar__action-wrapper">
-      <button type="button" class="mdc-snackbar__action-button"></button>
-    </div>
   </div>
-<% end %>
+<% end %>

data/views/mdc/components/stepper.erb

@@ -0,0 +1,47 @@
+<%
+  horizontal = eq(comp.orientation, :horizontal)
+%>
+<div class="v-errors">
+  <ul id="<%= comp.id %>"
+      <% if comp.tag %>
+      data-input-tag="<%= comp.tag %>"
+      <% end %>
+      class="mdl-stepper v-stepper v-has-errors
+            <%= ' mdl-stepper--horizontal' if horizontal %>
+            <%= ' mdl-stepper--linear' if comp.linear %>">
+    <% for step in comp.steps %>
+      <%= erb :"components/stepper/#{step.type}", :locals => {:comp => step, vertical: !horizontal} %>
+    <% end %>
+  </ul>
+
+  <% if horizontal %>
+  <div id="<%= comp.id %>-content">
+    <% for step in comp.steps %>
+      <div id="<%= step.id %>-content"
+           <% if step.tag %>
+           data-input-tag="<%= step.tag %>"
+           <% end %>
+           class="v-content v-step__content v-step__content-<%= step.id %>
+            <%= ' is-active' if step.selected %>
+            <%= ' v-step--horizontal' if horizontal %>">
+
+        <%= erb :"components/render", :locals => {:components => step.components, :scope => nil} %>
+
+        <% if step.actions&.buttons %>
+          <div class="v-step__actions v-step__actions-<%= step.id %>">
+            <% step.actions.buttons.each do |button| %>
+              <%= erb :"components/button", :locals => {:comp => button,
+                                                        data_attributes: "data-stepper-#{button.stepper_type}",
+                                                        event_parent_id: "#{step.id}-content"}
+              %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+   <% end %>
+
+</div>
+
+