voom-presenters 0.2.0 → 2.1.0

data/views/mdc/components/render.erb

@@ -1,4 +1,3 @@
 <% components.each_with_index do |comp, index| %>
-  <%= erb :"components#{scope ? "/#{scope}" : nil}/#{comp.type}", :locals => {comp: comp,
-                                                                              components: components, index: index} %>
-<% end %>
+  <%= render_component(scope, comp, components, index) %>
+<% end %>

data/views/mdc/components/rich_text_area.erb

@@ -1,19 +1,22 @@
 <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>
+     id="<%= comp.id %>"
+     <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+     <% if comp.dirtyable %>data-dirtyable<% end %>
+     <% if comp.height %>data-initial-height="<%= comp.height %>"<% end %>
+     <% if comp.resizable %>data-resizable<% end %>
+     <% if comp.disabled %>disabled<% end %>>
+  <label for="<%= comp.id %>-rta"><%= expand_text(comp.label) %></label>
   <div class="v-rich-text-area"
-       id="<%= comp.id %>"
-       style="<%= 'width:100%;' if comp.full_width %>
-              <%= "height:#{comp.height};" %>"
+       id="<%= comp.id %>-rta"
+       style="<%= 'width: 100%;' if comp.full_width %>"
        data-name="<%= comp.name %>"
        <%= "data-placeholder='#{comp.placeholder}'" if comp.placeholder %>>
+    <%= comp.value %>
   </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>
+  <span class="mdl-textfield__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 %>
+    <%= comp.hint %>
   </p>
+  <div class="v-hidden v-rich-text-area--fixed-up-content" hidden aria-hidden="true"></div>
   <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
 </div>

data/views/mdc/components/select.erb

@@ -1,16 +1,22 @@
 <% if comp
   float_label = comp.options.select{|o| o.selected }.any?
 %>
-  <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%>"
+  <div class="mdc-select v-select v-input
+              <%= 'mdc-select--outlined' if comp.outlined %>
+              <% if comp.disabled %>mdc-select--disabled<% end %>"
+       <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>
+       <%= 'style="width: 100%;"' if comp.full_width %>>
+    <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-select__icon', parent_id: "#{comp.id}-input", size_class: '', position: []} %>
+    <i class="mdc-select__dropdown-icon"></i>
+    <select id="<%= comp.id %>-input"
+            <% if comp.name %> name="<%= comp.name %>" <% end %>
+            <% if comp.required %>required<% end %>
+            <% if comp.disabled %>disabled<% end %>
             class="mdc-select__native-control"
-            <%= erb(:"components/event", locals: {events: comp.events,
-                                                  parent_id: comp.id}) %>>
+            <%= erb(:"components/event", locals: {comp: comp,
+                                                  events: comp.events,
+                                                  parent_id: "#{comp.id}-input"}) %>>
       <% comp.options.each do |option| %>
         <option value="<%= option.value %>"
                 <%= 'disabled' if option.disabled %>
@@ -19,9 +25,19 @@
         </option>
       <% end %>
     </select>
-    <label class="mdc-floating-label
-               <%= 'mdc-floating-label--float-above' if float_label%>"><%= comp.label %></label>
-    <div class="mdc-select__bottom-line"></div>
+    <% if comp.outlined %>
+      <div class="mdc-notched-outline">
+        <div class="mdc-notched-outline__leading"></div>
+        <div class="mdc-notched-outline__notch">
+          <label class="mdc-floating-label <%= 'mdc-floating-label--float-above' if float_label %>"><%= comp.label %></label>
+        </div>
+        <div class="mdc-notched-outline__trailing"></div>
+      </div>
+    <% else %>
+      <label class="mdc-floating-label <%= 'mdc-floating-label--float-above' if float_label %>"><%= comp.label %></label>
+      <div class="mdc-line-ripple"></div>
+    <% end %>
   </div>
+  <%= erb :"components/shared/hint_error_display", :locals => {comp: comp} %>
   <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
 <% end %>

data/views/mdc/components/separator.erb

@@ -0,0 +1,3 @@
+<div class="<%= _padding_classes_(comp.padding) %>">
+<hr class="v-separator" />
+</div>

data/views/mdc/components/shared/hint_error_display.erb

@@ -0,0 +1,9 @@
+<div class="mdc-text-field-helper-line">
+  <div id="<%= comp.id %>-input-helper-text"
+       class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent<%= ' v-hidden' unless comp.hint %>"
+       role="alert"
+       aria-live="polite"
+       <% if comp.validation_error %>data-validation-error="<%= comp.validation_error %>"<% end %>>
+      <%= comp.hint %>
+  </div>
+</div>

data/views/mdc/components/shared/input_label.erb

@@ -0,0 +1,7 @@
+<div class="mdc-notched-outline">
+  <div class="mdc-notched-outline__leading"></div>
+  <div class="mdc-notched-outline__notch">
+    <label for="<%= comp.id %>-input" class="mdc-floating-label"><%= expand_text(comp.label) %></label>
+  </div>
+  <div class="mdc-notched-outline__trailing"></div>
+</div>

data/views/mdc/components/slider.erb

@@ -11,11 +11,13 @@
      <% if comp.step %>
      data-step="<%= comp.step %>"
      <% end %>
+     <% if comp.dirtyable %>data-dirtyable<% end %>
      aria-valuemin="<%= comp.value_min %>"
      aria-valuemax="<%= comp.value_max %>"
      aria-valuenow="<%= comp.value unless comp.value.nil? %>"
+     <% if comp.disabled %>aria-disabled<% end %>
      aria-label="Select Value"
-    <%= erb :"components/event", :locals => {events: comp.events, parent_id: "#{comp.id}-input"} %>>
+    <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: "#{comp.id}-input"} %>>
 <div class="mdc-slider__track-container">
     <div class="mdc-slider__track"></div>
 

data/views/mdc/components/stepper.erb

@@ -6,7 +6,7 @@
       <% if comp.tag %>
       data-input-tag="<%= comp.tag %>"
       <% end %>
-      class="mdl-stepper v-stepper v-has-errors
+      class="mdl-stepper v-stepper
             <%= ' mdl-stepper--horizontal' if horizontal %>
             <%= ' mdl-stepper--linear' if comp.linear %>">
     <% for step in comp.steps %>

data/views/mdc/components/stepper/step.erb

@@ -12,7 +12,7 @@
 
   <% if vertical %>
     <div id="<%= comp.id %>-content"
-      class="mdl-step__content v-content v-has-errors">
+      class="mdl-step__content v-content">
         <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
     </div>
   <% end %>

data/views/mdc/components/switch.erb

@@ -1,11 +1,10 @@
 <% class_name = '' unless local_variables.include? :class_name
 %>
 
-<div class="mdc-form-field">
+<div class="v-form-field mdc-form-field">
   <div id="<%= comp.id %>"
-       <% if comp.tag %>
-       data-input-tag="<%= comp.tag %>"
-       <% end %>
+       <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>
        class="v-switch v-input mdc-switch
       <%= 'mdc-switch--disabled' if comp.disabled %>
       <%= class_name %>">
@@ -17,9 +16,11 @@
                type="checkbox"
                class="mdc-switch__native-control"
                role="switch"
-               <% if comp.checked %> checked
-        <% end %>
-               <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} %>/>
+               <% if comp.value %>value="<%= comp.value %>"<% end %>
+               data-off="<%= comp.off_value %>"
+               <%= ' checked ' if comp.checked %>
+               <%= ' disabled ' if comp.disabled %>
+               <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>/>
       </div>
     </div>
   </div>

data/views/mdc/components/tab_bar.erb

@@ -9,7 +9,7 @@
                     <%= 'mdc-tab--active' if tab.selected %>
                     <%= 'mdc-tab--stacked' if tab.stacked %>"
                   role="tab" aria-selected="<%= tab.selected %>" tabindex="0"
-                  <%= erb :"components/event", :locals => {events: tab.events, parent_id: tab.event_parent_id}%>>
+                  <%= erb :"components/event", :locals => {comp: tab, events: tab.events, parent_id: tab.event_parent_id}%>>
           <span class="mdc-tab__content">
            <% if tab.icon %>
             <span class="mdc-tab__icon material-icons"><%= tab.icon %></span>
@@ -27,3 +27,9 @@
     </div>
   </div>
 </div>
+<% comp.tabs.each_with_index do |tab, index|
+  next unless tab.components.any? %>
+  <div class="v-tab-content <%=tab.selected ? nil : 'v-hidden' %>" data-tab-id="<%=index%>">
+    <%= erb :"components/render", :locals => {:components => tab.components, :scope=> nil} if tab.components.any? %>
+  </div>
+<% end %>

data/views/mdc/components/table.erb

@@ -1,15 +1,28 @@
-<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
-  <% if comp.header %>
-    <thead>
-      <%= erb :"components/table/header", :locals => {:row=> comp.header} %>
-    </thead>
-  <% end %>
-  <tbody>
-      <% comp.rows.each do |row| %>
-        <%= erb :"components/table/row", :locals => {:row=> row} %>
-      <% end %>
-  </tbody>
-</table>
+<div class="v-data-table mdc-data-table <%= 'v-no-border' unless comp.border %>" style="<%= "width:#{comp.width};" if comp.width %>">
+  <table class="mdc-data-table__table"
+         <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.id} %>>
+    <% if comp.header %>
+      <thead>
+      <%= erb :"components/table/header", :locals => {:row => comp.header} %>
+      </thead>
+    <% else
+      # This is a workaround for the MDCDataTable component that currently throws an error if it can't find an
+      # mdc-data-table__header-row element. Allos us to create headerless table without JS errors
+    %>
+      <div class="mdc-data-table__header-row v-hidden"/>
+    <% end %>
+    <tbody class="mdc-data-table__content">
+    <% comp.rows.each do |row| %>
+      <%= erb :"components/table/row", :locals => {:row => row} %>
+    <% end %>
+    </tbody>
+    <% if comp.footer %>
+      <tfoot>
+        <%= erb :"components/table/footer", :locals => {:row => comp.footer} %>
+      </tfoot>
+    <% end %>
+  </table>
+</div>
 <% if comp.pagination %>
-  <%= erb :"components/table/pagination", :locals => {:comp=> comp.pagination} %>
+  <%= erb :"components/table/pagination", :locals => {:comp => comp.pagination} %>
 <% end %>

data/views/mdc/components/table/checkbox.erb

@@ -1,14 +1,17 @@
 <% if row.checkbox %>
   <% if type == 'header' %>
-    <th>
+    <th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader" scope="col">
   <% else %>
-    <td style="<%= "background-color: #{row.color};" if row.color %>">
+    <td style="<%= "background-color: #{row.color};" if row.color %>" class="mdc-data-table__cell mdc-data-table__cell--checkbox">
   <% end %>
+  <% unless type == 'footer' %>
     <span class="mdc-list-item__graphic">
       <%= erb :"components/checkbox",
               :locals => {comp: row.checkbox,
-                          class_name: (type == 'header' ? 'v-checkbox--select-control' : 'v-table-item--selectable-checkbox')} %>
+                          class_name: (type == 'header' ? 'v-checkbox--select-control' : 'v-table-item--selectable-checkbox'),
+                          data_table_class_name: (type == 'header' ? 'mdc-data-table__header-row-checkbox' : 'mdc-data-table__row-checkbox')}  %>
     </span>
+  <% end %>
   <% if type == 'header' %>
     </th>
   <% else %>

data/views/mdc/components/table/column.erb

@@ -0,0 +1,18 @@
+<% if type == 'header' %>
+  <th
+<% else %>
+  <td
+<% end %>
+    id="<%= col.id%>"
+    class="<%= 'mdl-data-table__cell--non-numeric' unless col.numeric? %>
+               <%= 'v-actionable' if col.events %>"
+    <%= erb :"components/event", :locals => {comp: col, events: col.events, parent_id: col.event_parent_id}%>
+    style="<%= "background-color: #{col.color};" if col.color %>"
+    <%= " colspan=#{col.colspan}" if col.colspan %>>
+  <%= expand_text(col.value&.text) %>
+  <%= erb :"components/render", :locals => {:components => col.components, :scope => nil} %>
+<% if type == 'header' %>
+  </th>
+<% else %>
+  </td>
+<% end %>

data/views/mdc/components/table/footer.erb

@@ -0,0 +1,8 @@
+<tr
+  style="<%= "background-color: #{row.color};" if row.color %>">
+  <%= erb :"components/table/checkbox", :locals => {:row=> row, :type=> 'footer'} %>
+  <% row.columns.each do |col| %>
+    <%= erb :"components/table/column", :locals => {:col=> col, :type=> 'footer'} %>
+    <%= erb :"components/tooltip", :locals => {comp: col.tooltip, parent_id: col.id} %>
+  <% end %>
+</tr>

data/views/mdc/components/table/header.erb

@@ -1,16 +1,17 @@
-<tr
+<tr class="mdc-data-table__header-row"
   style="<%= "background-color: #{row.color};" if row.color %>">
   <%= erb :"components/table/checkbox", :locals => {:row=> row, :type=> 'header'} %>
   <% row.columns.each do |col| %>
     <th id="<%= col.id%>"
-        class="<%= 'mdl-data-table__cell--non-numeric' unless col.numeric %>
+        class="mdc-data-table__header-cell
+               <%= "v-align-#{col.align}" %>
                <%= 'v-actionable' if col.events %>"
-        <%= erb :"components/event", :locals => {events: col.events, parent_id: col.event_parent_id}%>
+        role="columnheader" scope="col"
+        <%= erb :"components/event", :locals => {comp: col, events: col.events, parent_id: col.event_parent_id}%>
         style="<%= "background-color: #{col.color};" if col.color %>">
       <%= expand_text(col.value&.text) %>
       <%= erb :"components/render", :locals => {:components => col.components, :scope => nil} %>
     </th>
     <%= erb :"components/tooltip", :locals => {comp: col.tooltip, parent_id: col.id} %>
-
   <% end %>
 </tr>

data/views/mdc/components/table/pagination.erb

@@ -6,10 +6,6 @@
   <span class="v-paging__count">
     <%= comp.range&.join(' - ') %> of <%= comp.total %>
   </span>
-  <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon v-paging__prev">
-    <%= erb :"components/icon", :locals => {:comp=>comp.previous_button} %>
-  </button>
-  <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon v-paging__next">
-    <%= erb :"components/icon", :locals => {:comp=>comp.next_button} %>
-  </button>
+  <%= erb :'components/button', locals: { comp: comp.previous_button, class_name: 'v-actionable v-button--pagination v-button--pagination--previous v-paging__prev' } %>
+  <%= erb :'components/button', locals: { comp: comp.next_button, class_name: 'v-actionable v-button--pagination v-button--pagination--next v-paging__next' } %>
 </div>

data/views/mdc/components/table/row.erb

@@ -1,16 +1,16 @@
-<tr
+<tr id="<%= row.id %>" class="mdc-data-table__row"
   style="<%= "background-color: #{row.color};" if row.color %>">
   <%= erb :"components/table/checkbox", :locals => {:row=> row, :type=> 'row'} %>
   <% row.columns.each do |col| %>
     <td id="<%= col.id%>"
-        class="<%= 'mdl-data-table__cell--non-numeric' unless col.numeric %>
+        class="mdc-data-table__cell
+               <%= "v-align-#{col.align}" %>
                <%= 'v-actionable' if col.events %>"
-        <%= erb :"components/event", :locals => {events: col.events, parent_id: col.event_parent_id}%>
+        <%= erb :"components/event", :locals => {comp: col, events: col.events, parent_id: col.event_parent_id}%>
         style="<%= "background-color: #{col.color};" if col.color %>">
-      <%= expand_text(col.value&.text) %>
+      <%= expand_text(col.value&.text, markdown: col.value&.markdown) %>
       <%= erb :"components/render", :locals => {:components => col.components, :scope => nil} %>
     </td>
     <%= erb :"components/tooltip", :locals => {comp: col.tooltip, parent_id: col.id} %>
-
   <% end %>
 </tr>

data/views/mdc/components/text_area.erb

@@ -1,20 +1,18 @@
 <div id="<%= comp.id %>" class="v-input v-text-field mdc-text-field mdc-text-field--textarea
-            <%= ' is-invalid is-dirty' if comp.error%>"
-     <% if comp.tag %>
-     data-input-tag="<%= comp.tag %>"
-     <% end %>
+            <% if comp.disabled %>mdc-text-field--disabled<% end %>"
+     <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+     <% if comp.dirtyable %>data-dirtyable<% end %>
      style="<%= 'width:100%' if comp.full_width %>">
   <textarea id="<%= comp.id %>-input"
             name="<%= comp.name %>"
             class="mdc-text-field__input"
+            aria-controls="<%= comp.id %>-input-helper-text"
+            <%= 'required' if comp.required %>
             rows="<%= comp.rows %>"
-            cols="<%= comp.cols %>"> <%= comp.value %> </textarea>
-  <label for="<%= comp.id %>-input" class="mdc-floating-label"><%= expand_text(comp.label) %></label>
+            cols="<%= comp.cols %>"
+            <% if comp.disabled %>disabled<% end %>><%= comp.value %></textarea>
+  <%= erb :"components/shared/input_label", :locals => {comp: comp} %>
 </div>
-<% 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/shared/hint_error_display", :locals => {comp: comp} %>
 <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
 

data/views/mdc/components/text_field.erb

@@ -1,47 +1,39 @@
 <% if comp
-     leading_icon = comp.icon && comp.icon.position.select{|p| eq(p, :left)}.any?
-     trailing_icon = comp.icon && comp.icon.position.select{|p| eq(p, :right)}.any?
+     leading_icon = comp.icon && comp.icon.position.select {|p| eq(p, :left)}.any?
+     trailing_icon = comp.icon && comp.icon.position.select {|p| eq(p, :right)}.any?
+     auto_complete = comp.auto_complete&.to_sym == :off ? 'extra-off' : comp.auto_complete
+     behavior = comp.behavior || 'text'
 %>
   <div id="<%= comp.id %>"
-       <% if comp.tag %>
-       data-input-tag="<%= comp.tag %>"
-       <% end %>
-       class="v-input v-text-field mdc-text-field mdc-text-field--outlined
+       <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>
+       class="v-input v-text-field v-focusable mdc-text-field mdc-text-field--outlined
             <%= 'mdc-text-field--with-leading-icon' if leading_icon %>
             <%= 'mdc-text-field--with-trailing-icon' if trailing_icon %>
-            <%= 'mdc-text-field--disabled' if comp.disabled %>
-            <%= 'is-invalid is-dirty' if comp.error %>"
-            style="<%= 'width:100%' if comp.full_width %>">
+            <%= 'mdc-text-field--disabled' if comp.disabled %>"
+            data-case_type="<%= comp.case_type %>"
+       style="<%= 'width:100%' if comp.full_width %>">
 
-  <input id="<%= comp.id %>-input"
-         name="<%= comp.name %>"
-         type="<%= comp.password ? 'password' : 'text' %>"
-         value="<%= comp.value %>"
-         class="mdc-text-field__input"
-         aria-controls="<%= comp.id %>-input-helper-text"
-         <%= 'required' if comp.required %>
-         <%= 'invalid' if comp.error %>
-         <%= "pattern='#{comp.pattern}'" if comp.pattern %>
-         autocomplete="<%= comp.auto_complete ? 'on' : 'off'%>"
-         list="<%= comp.id %>-list"
-         <%= erb :"components/event", :locals => {events: comp.events, parent_id:  "#{comp.id}-input"} %>>
+    <input id="<%= comp.id %>-input"
+           name="<%= comp.name %>"
+           <%= behavior %>
+           value="<%= comp.value %>"
+           class="mdc-text-field__input"
+           aria-controls="<%= comp.id %>-input-helper-text"
+           <% if comp.disabled %>disabled<% end %>
+           <%= 'required' if comp.required %>
+           <%= "pattern='#{comp.pattern}'" if comp.pattern %>
+           autocomplete="<%= auto_complete %>"
+           list="<%= comp.id %>-list"
+           <%= erb :"components/event", :locals => {comp: comp, 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.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>
+    <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-text-field__icon', parent_id: "#{comp.id}-input"} %>
+
+    <%= erb :"components/shared/input_label", :locals => {comp: comp} %>
+    <datalist id="<%= comp.id %>-list">
+    </datalist>
   </div>
-  <div class="mdc-notched-outline__idle"></div>
-  <datalist id="<%= comp.id %>-list">
-  </datalist>
-</div>
-<% 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} %>
+  <%= erb :"components/shared/hint_error_display", :locals => {comp: comp} %>
+  <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
 <% end %>