voom-presenters 0.1.11 → 2.0.1

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,5 @@
-<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 %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>
+       id="<%= comp.id %>" name="<%= comp.name %>" value="<%= comp.value %>"/>

data/views/mdc/components/icon.erb

@@ -16,17 +16,19 @@
        icon_class_name = "material-icons"
        icon = icon_name
      end
+     size_class = "v-icon-size-#{comp.size}" unless locals.include? :size_class
 %>
   <i id="<%= comp.id %>"
-     class="<%= class_name %> <%= icon_class_name %>
+     class="<%= class_name %> <%= icon_class_name %> <%= size_class %>
+            <%= 'v-hidden' if comp.respond_to?(:hidden) && comp.hidden %>
             <%= 'v-actionable' if comp.events %>
             <%= color_classname(comp) %>"
       <%= "data-#{data}" if data %>
-       style = "<%= color_style(comp) %>
-                <%= "font-size: #{comp.size}" if comp.size %>"
-     <%= 'tabindex="1"' if class_name.include?('mdc-text-field__icon') && comp.events %>
-       <%= erb :"components/event", :locals => {events: events, parent_id: parent_id} %>>
+      style="<%= color_style(comp) %>"
+      <%= 'tabindex="0"' if comp.events %>
+      <%= erb :"components/event", :locals => {comp: comp, events: events, parent_id: parent_id} %>>
     <%= icon %>
   </i>
   <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+  <%= expand_text(comp.text) if comp.respond_to?(:text) %>
 <% end %>

data/views/mdc/components/icon_toggle.erb

@@ -1,15 +1,16 @@
-<i id="<%= comp.id %>"
-   class="mdc-icon-toggle material-icons
-       <%= 'mdc-icon-toggle--disabled' if comp.disabled %>"
+<button id="<%= comp.id %>"
+   class="v-icon-toggle mdc-icon-button
+       <%= 'mdc-icon-button--on' if comp.checked %>"
+   <%= 'disabled' if comp.disabled %>
    role="button"
    aria-disabled="<%= comp.disabled %>"
    aria-pressed="<%= comp.checked %>"
    data-checked="<%= comp.checked %>"
    aria-label="" tabindex="0"
    data-name="<%= comp.name %>"
-   data-toggle-on='{"label": "", "content": "<%= comp.icon %>" ,"cssClass": "v-toggle-icon--on"}'
-   data-toggle-off='{"label": "", "content": "<%= comp.icon  %>", "cssClass": "v-toggle-icon--off"}'
-   <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} %>>
-  <%= comp.icon  %>
-</i>
+   data-off="<%= comp.off_value %>"
+   <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>>
+  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on"><%= comp.on_icon  %></i>
+  <i class="material-icons mdc-icon-button__icon"><%= comp.icon  %></i>
+</button>
 <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/image.erb

@@ -1,7 +1,25 @@
 <% if comp
-     position_classes = comp.position.map {|p| "v-image-position-#{p}"}.join(' ') %>
+     fit_class = comp.fit ? "v-image--fit-#{comp.fit}" : ''
+     position = comp.position ? comp.position.map(&:to_s).join(' ') : nil
+     styles = {
+          'min-width' => (comp.min_width if comp.min_width),
+          'width' => (comp.width if comp.width),
+          'max-width' => (comp.max_width if comp.max_width),
+          'min-height' => (comp.min_height if comp.min_height),
+          'height' => (comp.height if comp.height),
+          'max-height' => (comp.max_height if comp.max_height),
+          'border' => ("#{comp.border} solid" if comp.border),
+          'border-color' => (comp.border_color if comp.border_color),
+          'border-radius' => (comp.border_radius if comp.border_radius),
+          'object-position' => (position unless position.empty?)
+     }.compact
+%>
 <img id="<%= comp.id %>"
-     class="v-image <%=position_classes%>"
-     src="<%= comp.url %>" height="<%= comp.height %>" width="<%= comp.width %>" border="0" alt="">
-<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
-<% end %>
+     class="v-image <%= fit_class %> <%= 'v-actionable' if comp.events %>"
+     src="<%= comp.url %>"
+     <% if comp.description %>alt="<%= comp.description %>"<% end %>
+     style="<%= styles.map { |k, v| "#{k}: #{v}" }.join('; ') %>"
+     draggable="false"
+     <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>>
+<%= erb :"components/tooltip" , :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+<% end %>

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,11 +1,16 @@
 <% unless comp.lines_only %>
-  <ul class="mdc-list
+  <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? %>"
-      data-total-lines="<%= comp.total_lines %>">
+            <%= '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 %>"
+      <%= 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/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/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="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 %>">
+          <%= 'v-list-item--selectable' if line.selectable %>
+          <%= 'v-dnd-draggable' if line.draggable %>"
+    id="<%= line.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? %>"
-        <%= 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? %>">
+
+    <% 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} %>
@@ -32,4 +41,6 @@
 <% 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} %>
+<%= 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,27 +10,27 @@
       </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 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 %>
+                     <% if item.disabled %>mdc-list-item--disabled<% end %>"
+              role="menuitem"
+              tabindex="0"
+              <%= 'disabled' if 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)">
             <%= 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>
@@ -38,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,11 +1,20 @@
-<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="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-radio mdc-radio v-input">
+    <input class="mdc-radio__native-control"
+           type="radio"
+           id="<%= comp.id %>-input"
+           <% if comp.value %>value="<%= comp.value %>"<% end %>
            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 => {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>
+    </div>
+  </div>
+  <label for="<%=comp.id%>-input"><%=comp.text%></label>
+  <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id }%>
+</div>