voom-presenters 0.2.0 → 2.0.0

data/views/mdc/components/image_list.erb

@@ -0,0 +1,38 @@
+<%
+  types = {
+      'standard' => '',
+      'text-protection' => 'mdc-image-list--with-text-protection',
+      'masonry' => 'mdc-image-list--masonry'
+  }
+%>
+
+<ul class="mdc-image-list <%= types[comp.list_type] %> v-image-list-<%= comp.list_type %>-<%= comp.columns %>">
+  <% for image in comp.images %>
+    <%
+      styles = {
+        'border-width' => ("#{image.border}" if image.border),
+        'border-style' => ('solid' if image.border),
+        'border-radius' => (image.border_radius if image.border_radius)
+      }.compact
+    %>
+    <li class="mdc-image-list__item" <%= "style='margin: #{comp.spacing}'" if comp.spacing %>>
+      <% if comp.list_type != 'masonry' %><div class="mdc-image-list__image-aspect-container"><% end %>
+        <img id="<%= image.id %>"
+             class="mdc-image-list__image
+                    <%= 'v-actionable' if image.events %>
+                    <%= "v-image-list__border-#{image.border_color}"  if image.border_color %>"
+             src="<%= image.url %>"
+             <% if image.description %>alt="<%= image.description %>"<% end %>
+             style="<%= styles.map { |k, v| "#{k}: #{v}" }.join('; ') %>"
+             draggable="false"
+             <%= erb :"components/event", :locals => {comp: image, events: image.events, parent_id: image.event_parent_id} %>>
+        <%= erb :"components/tooltip" , :locals => {comp: image.tooltip, parent_id: image.id} %>
+      <% if comp.list_type != 'masonry' %></div><% end %>
+      <% if image.label %>
+        <div class="mdc-image-list__supporting">
+          <span class="mdc-image-list__label"><%= image.label %></span>
+        </div>
+      <% end %>
+    </li>
+    <% end %>
+</ul>

data/views/mdc/components/link.erb

@@ -1,14 +1,4 @@
-<% if link %>
-  <% if preamble %>
-    <a style="color: unset; text-decoration: none;"
-       <% unless link&.replaces %>
-         href ="<%=link.url%>"
-       <% else %>
-         onclick="new VReplaceElement('<%=link&.replaces%>','<%= link.url %>', '<%="grid_nesting=#{@grid_nesting-1}"%>').call()"
-       <% end %>
-    >
-  <% else %>
-    </a>
-  <% end %>
+<% target = "_#{comp.target}" %>
+<% if comp %>
+    <a href="<%= comp.url %>" target="<%= target %>"><%= comp.text %></a>
 <% end %>
-

data/views/mdc/components/list.erb

@@ -1,14 +1,16 @@
 <% unless comp.lines_only %>
   <ul id="<%= comp.id %>"
       class="mdc-list
+            <%= 'mdc-list--dense' if comp.dense %>
             <%= '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? %>
             <%= 'v-list__border' if comp.border %>"
       style="<%= "background-color: #{comp.color};" if comp.color %>"
-      data-total-lines="<%= comp.total_lines %>">
+      data-total-lines="<%= comp.total_lines %>"
+      <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.id}%>>
 <% end %>
 <% for line in comp.lines %>
-  <%= erb :"components/list/#{line.type}", :locals => {:line => line} %>
+  <%= erb :"components/list/#{line.type}", :locals => {:list => comp, :line => line} %>
 <% end %>
 <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
 <% unless comp.lines_only %>

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

@@ -1,5 +1,6 @@
 <% if line.avatar %>
-  <span class="mdc-list-item__graphic v-list-item--with-avatar">
+  <span class="mdc-list-item__graphic v-list-item--with-avatar"
+        <%= erb :"components/event", :locals => {comp: line, events: line.events, parent_id: line.event_parent_id} %>>
     <%= erb :"components/avatar", :locals => {comp: line.avatar, class_name: ''}%>
   </span>
 <% end %>

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

@@ -2,7 +2,10 @@
            v-list-item--header
            v-list-item--selectable-header"
     id="<%= line.id %>">
-  <%= erb :"components/checkbox", :locals => {:comp => line.checkbox, :class_name => 'v-checkbox--select-control'} if line.checkbox %>
+  <div class="v-input v-checkbox v-hidden">
+    <input class="mdc-checkbox__native-control" type="checkbox" id="select-total" name="all" value="true" data-indeterminate="false"/>
+  </div>
+  <%= erb :"components/checkbox", :locals => {:comp => line.checkbox, :class_name => 'v-checkbox--select-control', :dirtyable => false} if line.checkbox %>
   <span class="mdc-list-item__text">
     <%= expand_text(line.text&.text) %>
 
@@ -22,7 +25,6 @@
 
 <% if line.total_lines > 0 %>
   <li class="mdc-list-item hidden" id="list-item-select-all-header">
-    <input type="checkbox" name="all" value="true" id="select-total" style="display: none;" />
     <span class="mdc-list-item__secondary-text" id="list-item-select-all-toggle-off">
       All <span id="page-selection-count">10</span> records on this page are selected. <a href="#" class="toggle-total-set" data-select="on">Select all <%= line.total_lines %> records.</a>
     </span>
@@ -32,4 +34,4 @@
   </li>
 <% end %>
 
-<li role="separator" class="mdc-list-divider"></li>
+<li role="separator" class="mdc-list-divider"></li>

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

@@ -0,0 +1,3 @@
+<% if line.hidden_field %>
+  <%= erb :"components/hidden_field", :locals => {comp: line.hidden_field} %>
+<% end %>

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

@@ -1,5 +1,6 @@
 <%if line.icon%>
-  <span class="mdc-list-item__graphic">
+  <span class="mdc-list-item__graphic"
+        <%= erb :"components/event", :locals => {comp: line, events: line.events, parent_id: line.event_parent_id} %>>
   <%= erb :"components/icon", :locals => {comp: line.icon} %>
   </span>
 <%end%>

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

@@ -1,30 +1,39 @@
+<%
+  require_relative "../drag_and_drop/drag_and_drop"
+  single_line = !line.subtitle && !line.body
+  primary_text_class = single_line  ? '' : 'mdc-list-item__primary-text'
+%>
+
 <% if line.menu %>
   <div class="mdc-menu-anchor">
 <% end %>
 <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 %>"
+          <%= 'v-list-item--selectable' if line.selectable %>
+          <%= 'v-dnd-draggable' if line.draggable %>"
     id="<%= line.id %>"
-    <%= erb :"components/event", :locals => {events: line.events, parent_id: line.event_parent_id} %>>
+    <%= draggable_attributes(line) %>
+    <%= drop_zone_attributes(line) %>
+    <%= erb :"components/event", :locals => {comp: line, events: line.events, parent_id: line.event_parent_id} %>>
+  <%= erb :"components/list/hidden_field", :locals => {:line => line} %>
   <%= 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? %>">
-    <span class="mdc-list-item__primary-text"><%= expand_text(line.text&.text) %></span>
+
+    <% if line.text %>
+      <span class="<%= primary_text_class %>"><%= expand_text(line.text&.text, markdown: line.text&.markdown) %></span>
+    <% end %>
 
     <% if line.subtitle %>
-      <span class="mdc-list-item__secondary-text">
-        <%= expand_text(line.subtitle.text) %>
-      </span>
+      <span class="mdc-list-item__secondary-text"><%= expand_text(line.subtitle&.text, markdown: line.subtitle&.markdown) %></span>
     <% end %>
 
     <% if line.body %>
-      <span class="mdc-list-item__secondary-text">
-        <%= expand_text(line.body.text) %>
-      </span>
+      <span class="mdc-list-item__secondary-text"><%= expand_text(line.body&.text, markdown: line.body&.markdown) %></span>
     <% end %>
   </span>
   <%= erb :"components/list/actions", :locals => {:line => line} %>
@@ -34,3 +43,4 @@
 </div>
 <%end%>
 <%= erb :"components/tooltip", :locals => {comp: line.tooltip, parent_id: line.id} %>
+<%= erb :"components/render", :locals => {:components => line.components, :scope => nil} %>

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

@@ -1,4 +1,9 @@
-<div id="<%= comp.id %>" class="mdc-menu v-menu" data-placement="contextual" style="position: absolute;" tabindex="-1">
+<div id="<%= comp.id %>"
+      class="mdc-menu v-menu"
+      <%= 'data-hoist="false"' if !comp.hoisted %>
+      data-placement="contextual"
+      style="position: absolute;"
+      tabindex="-1">
   <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
     <% comp.items.each do |item| %>
       <% unless eq(item.type, :divider) %>
@@ -8,7 +13,7 @@
             <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} %>>
+               <%= erb :"components/event", :locals => {comp: item, events: item.events, parent_id: item.event_parent_id} %>>
           <% end %>
           <%= item.text %>
           <% unless item.disabled %>

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

@@ -1 +1 @@
-<li role="separator" class="mdc-list-divider"></li>
+<li id="<%= line.id %>" role="separator" class="mdc-list-divider"></li>

data/views/mdc/components/menu.erb

@@ -1,4 +1,7 @@
 <% if comp %>
+  <div class='v-menu'
+       data-placement="<%= comp.placement %>"
+       <%= "data-right-offset=9999" if eq(comp.position, :right) %>>
   <% if comp.label %>
     <div class="mdc-menu-anchor">
       <span class="v-menu-click">
@@ -7,17 +10,21 @@
       </span>
   <% end %>
   <div id="<%= comp.id %>"
-       class="mdc-menu v-menu
+       class="mdc-menu mdc-menu-surface
               <%='mdc-menu--open' if comp.open %>"
-       style="position: absolute;" tabindex="-1"
-       data-placement="<%= comp.placement %>"
-       <%= "data-right-offset=9999" if eq(comp.position, :right) %>>
+       <%= 'data-hoist="false"' if !comp.hoisted %>
+       style="position: absolute;" tabindex="-1">
     <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
       <% comp.items.each do |item| %>
         <% unless eq(item.type, :divider) %>
-          <li id="<%= item.id %>" class="mdc-list-item <%= 'v-menu-item__selected' if item.selected %>" role="menuitem" tabindex="0"
+          <li id="<%= item.id %>"
+              class="mdc-list-item
+                     <%= 'v-menu-item__selected' if item.selected %>
+                     <% if item.disabled %>mdc-list-item--disabled<% end %>"
+              role="menuitem"
+              tabindex="0"
               <%= 'disabled' if item.disabled %>
-              <%= erb :"components/event", :locals => {events: item.events, parent_id: item.event_parent_id} unless item.disabled %>>
+              <%= erb :"components/event", :locals => {comp: item, events: item.events, parent_id: item.event_parent_id} unless item.disabled %>>
             <a class="v-menu-link"
                              id="<%= item.id %>"
                              href="javascript:void(0)">
@@ -34,4 +41,5 @@
   <% if comp.label %>
     </div>
   <% end %>
+  </div>
 <% end %>

data/views/mdc/components/number_field.erb

@@ -0,0 +1,38 @@
+<% 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?
+     auto_complete = comp.auto_complete&.to_sym == :off ? 'extra-off' : comp.auto_complete
+%>
+  <div id="<%= comp.id %>"
+       <%= "data-input-tag='#{comp.tag}'" if comp.tag %>
+       <%= 'data-dirtyable' if comp.dirtyable %>
+       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 %>"
+       style="<%= 'width:100%' if comp.full_width %>">
+
+    <input id="<%= comp.id %>-input"
+           name="<%= comp.name %>"
+           type="number"
+           <%= "min='#{comp.min}'" if comp.min %>
+           <%= "max='#{comp.max}'" if comp.max %>
+           <%= "step='#{comp.step}'" if comp.step %>
+           <%= 'readonly' if comp.readonly %>
+           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 %>"
+           <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: "#{comp.id}-input"} %>>
+
+    <%= 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} %>
+  </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/page_title.erb

@@ -1,4 +1,4 @@
-<h1 class="v-page-title">
-  <%= erb :"components/icon", :locals => {comp: comp.icon} %>
+<h1 id=<%= comp.id %> class="v-page-title">
+  <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
   <%= expand_text(comp.text) %>
 </h1>

data/views/mdc/components/progress.erb

@@ -0,0 +1,11 @@
+<div id="<%= comp.id %>" role="progressbar" class="v-progress mdc-linear-progress mdc-linear-progress--indeterminate mdc-linear-progress--closed"
+     data-hidden="<%= comp.hidden %>">
+  <div class="mdc-linear-progress__buffering-dots"></div>
+  <div class="mdc-linear-progress__buffer"></div>
+  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
+    <span class="mdc-linear-progress__bar-inner"></span>
+  </div>
+  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
+    <span class="mdc-linear-progress__bar-inner"></span>
+  </div>
+</div>

data/views/mdc/components/radio_button.erb

@@ -1,16 +1,15 @@
-<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-radio mdc-radio v-input">
     <input class="mdc-radio__native-control"
            type="radio"
            id="<%= comp.id %>-input"
-           value="<%= comp.value %>"
+           <% if comp.value %>value="<%= comp.value %>"<% end %>
            name="<%= comp.name %>"
            <%if comp.checked%> checked<%end%><%if comp.disabled%> disabled<%end%>
-           <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id}%> >
+           <%= erb :"components/event", :locals => {comp: comp, 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>

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>