voom-presenters 0.1.10 → 2.0.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

@@ -0,0 +1,22 @@
+<div class="v-rich-text-area-container v-input"
+     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 %>-rta"
+       style="<%= 'width: 100%;' if comp.full_width %>"
+       data-name="<%= comp.name %>"
+       <%= "data-placeholder='#{comp.placeholder}'" if comp.placeholder %>>
+    <%= comp.value %>
+  </div>
+  <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.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,12 +1,22 @@
 <% if comp
   float_label = comp.options.select{|o| o.selected }.any?
 %>
-  <div class="mdc-select">
-    <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 %>
@@ -15,9 +25,19 @@
         </option>
       <% end %>
     </select>
-    <div class="mdc-select__label
-               <%= 'mdc-floating-label--float-above' if float_label%>"><%= comp.label %></div>
-    <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

@@ -0,0 +1,43 @@
+<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 %>
+     <% 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 => {comp: comp, 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
+            <%= ' 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>
+
+

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

@@ -0,0 +1,33 @@
+<li id="<%= comp.id %>"
+  class="v-step mdl-step
+      <%= ' mdl-step--editable' if comp.editable %>
+      <%= ' mdl-step--optional' if comp.optional %>
+      <%= ' is-active' if comp.selected %>">
+  <span class="mdl-step__label">
+    <span class="mdl-step__title">
+      <span class="mdl-step__title-text"><%= comp.label %></span>
+      <span class="mdl-step__title-message"></span>
+    </span>
+  </span>
+
+  <% if vertical %>
+    <div id="<%= comp.id %>-content"
+      class="mdl-step__content v-content">
+        <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
+    </div>
+  <% end %>
+
+  <div class="mdl-step__actions">
+    <!--    This needs to be here for the existing mdl-stepper styling to work - cleanup later -->
+    <% if vertical %>
+      <% if comp.actions&.buttons %>
+        <% comp.actions.buttons.each do |button| %>
+          <%= erb :"components/button", :locals => {:comp => button,
+                                                    data_attributes: "data-stepper-#{button.stepper_type}",
+                                                    event_parent_id: "#{comp.id}-content" }
+          %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+</li>

data/views/mdc/components/switch.erb

@@ -1,13 +1,29 @@
-<label id="<%=comp.id%>"
-       class="mdl-switch mdl-js-switch mdl-js-ripple-effect v-switch"
-       for="<%=comp.id%>-input" >
-  <input id="<%= comp.id %>-input"
-         name="<%= comp.name %>"
-         type="checkbox"
-         class="mdl-switch__input"
-         <%if comp.checked%> checked<%end%><%if comp.disabled%> disabled<%end%>
-         <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id}%>/>
-  <span id=<%=comp.id%>-label
-            class="mdl-switch__label"><%=comp.text%></span>
-</label>
+<% class_name = '' unless local_variables.include? :class_name
+%>
+
+<div class="v-form-field mdc-form-field">
+  <div id="<%= comp.id %>"
+       <% 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 %>">
+    <div class="mdc-switch__track"></div>
+    <div class="mdc-switch__thumb-underlay">
+      <div class="mdc-switch__thumb">
+        <input id="<%= comp.id %>-input"
+               name="<%= comp.name %>"
+               type="checkbox"
+               class="mdc-switch__native-control"
+               role="switch"
+               <% 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>
+  <label class="v-switch__label" for="<%= comp.id %>-input"><%= comp.text %></label>
+</div>
 <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/tab_bar.erb

@@ -0,0 +1,35 @@
+<div id="<%= comp.id %>"
+  class="v-tab-bar mdc-tab-bar" role="tablist">
+  <div class="mdc-tab-scroller">
+    <div class="mdc-tab-scroller__scroll-area">
+      <div class="mdc-tab-scroller__scroll-content">
+
+        <% for tab in comp.tabs %>
+          <button class="mdc-tab
+                    <%= 'mdc-tab--active' if tab.selected %>
+                    <%= 'mdc-tab--stacked' if tab.stacked %>"
+                  role="tab" aria-selected="<%= tab.selected %>" tabindex="0"
+                  <%= 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>
+            <% end %>
+            <span class="mdc-tab__text-label"><%= tab.label %></span>
+          </span>
+            <span class="mdc-tab-indicator
+                    <%= 'mdc-tab-indicator--active' if tab.selected %>">
+            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+          </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+        <% end %>
+      </div>
+    </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,13 +1,28 @@
-<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp<%= ' mdl-data-table--selectable' if comp.selectable %>">
-  <% 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>
-<%# WIP = erb :"components/table/pagination", :locals => {} %>
+<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} %>
+<% end %>

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

@@ -0,0 +1,20 @@
+<% if row.checkbox %>
+  <% if type == 'header' %>
+    <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 %>" 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'),
+                          data_table_class_name: (type == 'header' ? 'mdc-data-table__header-row-checkbox' : 'mdc-data-table__row-checkbox')}  %>
+    </span>
+  <% end %>
+  <% if type == 'header' %>
+    </th>
+  <% else %>
+    </td>
+  <% end %>
+<%end%>

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,7 +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%>"><%=expand_text(col.value&.text)%></th>
+    <th id="<%= col.id%>"
+        class="mdc-data-table__header-cell
+               <%= "v-align-#{col.align}" %>
+               <%= 'v-actionable' if col.events %>"
+        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>
+</tr>