voom-presenters 0.1.13 → 2.0.3

data/views/mdc/components/checkbox.erb

@@ -1,25 +1,34 @@
-<%  class_name = '' unless local_variables.include? :class_name %>
-
-<div class="mdc-checkbox">
-  <input type="checkbox"
-         id="<%=comp.id%>"
-         name="<%=comp.name%>"
-         value="<%=comp.value%>"
-         class="mdc-checkbox__native-control
-               <%= class_name %>"
-         <% 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-checkbox__background">
-    <svg class="mdc-checkbox__checkmark"
-         viewBox="0 0 24 24">
-      <path class="mdc-checkbox__checkmark-path"
-            fill="none"
-            stroke="white"
-            d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
-    </svg>
-    <div class="mdc-checkbox__mixedmark"></div>
+<% class_name = '' unless local_variables.include? :class_name
+   data_table_class_name = '' unless local_variables.include? :data_table_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-checkbox mdc-checkbox v-input
+              <%= data_table_class_name %>">
+    <input type="checkbox"
+           id="<%= comp.id %>-input"
+           name="<%= comp.name %>"
+           data-indeterminate="<%=comp.indeterminate%>"
+           <% if comp.value %>value="<%= comp.value %>"<% end %>
+           class="mdc-checkbox__native-control
+                 <%= class_name %>"
+           <% if comp.checked %>checked<% end %>
+           <% if comp.disabled %>disabled<% end %>
+           data-off="<%= comp.off_value %>"
+           <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>>
+    <div class="mdc-checkbox__background">
+      <svg class="mdc-checkbox__checkmark"
+           viewBox="0 0 24 24">
+        <path class="mdc-checkbox__checkmark-path"
+              fill="none"
+              stroke="white"
+              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+      </svg>
+      <div class="mdc-checkbox__mixedmark"></div>
+    </div>
   </div>
+  <label id="<%= comp.id %>-label" for="<%= comp.id %>-input" style="<%= "color: #{comp.text_color};" if comp.text_color %>"><%= comp.text %></label>
 </div>
-<label class="v-checkbox__label" id="<%=comp.id%>" for="<%=comp.id%>"><%=comp.text%></label>
-<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id }%>
+<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/chip.erb

@@ -1,39 +1,56 @@
-<% if comp
-     leading_icon = comp.icons.select {|i| i.position.select{|p| eq(p, :left)}.any?}.first
-     trailing_icon = comp.icons.select {|i| i.position.select{|p| eq(p, :right)}.any?}.first
-     first_chip = !eq(components[index-1]&.type, :chip)
-     last_chip = !eq(components[index+1]&.type, :chip)
-
-     child_events = (leading_icon&.events || trailing_icon&.events || comp.text&.events||[]).any?
+<%
+  require_relative "drag_and_drop/drag_and_drop"
+  if comp
+    leading_icon = comp.icons.select { |i| i.position.select { |p| eq(p, :left) }.any? }.first
+    trailing_icon = comp.icons.select { |i| i.position.select { |p| eq(p, :right) }.any? }.first
+    child_events = (leading_icon&.events || trailing_icon&.events || comp.text&.events || []).any?
 %>
-  <% if first_chip %>
-    <div class="mdc-chip-set">
-  <% end %>
   <% if comp.menu %>
     <div class="mdc-menu-anchor">
   <% end %>
 
-  <div id="<%= comp.id %>"
-       class="mdc-chip
+  <button id="<%= comp.id %>"
+          <% if comp.tag %>
+          data-input-tag="<%= comp.tag %>"
+          <% end %>
+          class="v-chip v-input mdc-chip
               <%= color_classname(comp) %>
-              v-menu-click"
-       style = "<%= color_style(comp, 'background-') %>"
-       tabindex="0"
-       <%= erb(:"components/event", locals: {events: comp.events,
-                                             parent_id: comp.id}) unless child_events %>>
+              <%= 'mdc-chip--selected' if comp.selected %>
+              v-menu-click
+              <% if comp.draggable %>v-dnd-draggable
+            <% end %>"
+          <% if comp.name %>
+          data-name="<%= comp.name %>"
+          <% end %>
+          <% if comp.value %>
+          data-value="<%= comp.value %>"
+          <% end %>
+          style="<%= color_style(comp, 'background-') %>"
+          <%= draggable_attributes(comp) %>
+          <%= drop_zone_attributes(comp) %>
+          tabindex="0"
+          <%= erb(:"components/event", locals: {comp: comp,
+                                                events: comp.events,
+                                                parent_id: comp.id}) %>>
     <%= erb(:"components/icon", :locals => {comp: leading_icon,
                                             class_name: 'mdc-chip__icon mdc-chip__icon--leading',
                                             events: child_events ? (leading_icon&.events || comp.events) : nil}) %>
+    <% if comp.chipset_variant == 'filter' %>
+    <span class="mdc-chip__checkmark">
+      <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
+        <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
+              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+      </svg>
+    </span>
+    <% end %>
+
     <%= erb :"components/typography", :locals => {comp: comp.text, type: 'chip-text', class_name: 'mdc-chip__text'} %>
     <%= erb(:"components/icon", locals: {comp: trailing_icon,
                                          class_name: 'mdc-chip__icon mdc-chip__icon--trailing',
-                                         events: trailing_icon&.events || comp.events }) %>
-  </div>
+                                         events: child_events ? (trailing_icon&.events || comp.events) : nil}) %>
+  </button>
   <% if comp.menu %>
     <%= erb :"components/list/menu", :locals => {:comp => comp.menu} %>
-  </div>
-  <%end%>
-  <% if last_chip %>
     </div>
   <% end %>
   <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/chipset.erb

@@ -0,0 +1,18 @@
+<%
+  require_relative "drag_and_drop/drag_and_drop"
+  variant_classes = []
+  variant_classes << "mdc-chip-set--#{comp.variant}" if comp.variant
+  variant_classes << 'v-chip-set--selectable-variant' if eq(comp.variant, :select) || eq(comp.variant, :filter)
+%>
+<div id="<%= comp.id %>"
+     class="v-chip-set mdc-chip-set
+            <%= variant_classes.join(' ') %>
+            <% if comp.draggable %>v-dnd-draggable
+       <% end %>"
+     <%= draggable_attributes(comp) %>
+     <%= drop_zone_attributes(comp) %>
+     <%= erb(:"components/event", locals: {comp: comp,
+                                           events: comp.events,
+                                           parent_id: comp.id}) %>>
+  <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
+</div>

data/views/mdc/components/content.erb

@@ -1,11 +1,37 @@
-<div id="<%= comp.id %>"
-     class="v-content
-            <%= 'v-hidden' if comp.hidden %>">
-  <% if comp.shows_errors %>
-    <div class="v-errors">
-  <% end %>
-     <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
-  <% if comp.shows_errors %>
-    </div>
-  <% end %>
-</div>
+<%
+  require_relative "drag_and_drop/drag_and_drop"
+  if comp
+     position_classes = comp.position.map {|p| "v-content-position-#{p}"}.join(' ')
+%>
+  <div id="<%= comp.id %>"
+       <% if comp.tag %>
+       data-input-tag="<%= comp.tag %>"
+       <% end %>
+       <%= draggable_attributes(comp) %>
+       <%= drop_zone_attributes(comp) %>
+       class="v-content
+            <%= position_classes %>
+            <%= _padding_classes_(comp.padding) %>
+            <%= 'v-hidden' if comp.hidden %>
+            <%= 'v-dnd-draggable' if comp.draggable %>
+            <%= comp.float  ? 'v-content--float' : 'v-content--relative'%>
+            <%= comp.css_class.join(' ') %>
+            <%= color_classname(comp, 'background-', :background_color)%>"
+     <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>
+       style="text-align: <%= comp.text_align %>;
+             <%= "display: inline-block;" if comp.inline %>
+             <%= "width: #{comp.width};" if comp.width %>
+             <%= "height : #{comp.height };" if comp.height  %>
+             <%= color_style(comp, 'background-', :background_color) %>"
+       data-is-container>
+    <%= erb(:"components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(top both)) %>
+    <% if comp.shows_errors %>
+      <div class="v-errors">
+    <% end %>
+    <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
+    <% if comp.shows_errors %>
+      </div>
+    <% end %>
+    <%= erb(:"components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(bottom both)) %>
+  </div>
+<% end %>

data/views/mdc/components/datetime.erb

@@ -2,14 +2,14 @@
   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 %>
-            <%= 'is-invalid is-dirty' if comp.error %>"
+     <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+     <% if comp.dirtyable %>data-dirtyable<% 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 %>"
      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"
@@ -18,18 +18,13 @@
          aria-controls="<%= comp.id %>-input-helper-text"
          data-input
          <%= '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 => {comp: comp, events: comp.events, parent_id:  "#{comp.id}-input"} %>>
+  <%= erb :"components/icon", :locals => {comp: comp.clear_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>
-  <%= 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">
-  <%= comp.error || comp.hint %>
-</p>
+<%= erb :"components/shared/hint_error_display", :locals => {comp: comp} %>
+<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/dialog.erb

@@ -1,27 +1,50 @@
 <%
-  has_form = comp.components.select{|c| eq(c.type, :form)}.any?
+  dialog_action_buttons = Array(comp&.actions&.buttons)
 %>
-<dialog id="<%= comp.id %>"
-        class="mdl-dialog v-js-dialog"
-    style="<%= "width: #{comp.width}" if comp.width %>
-           <%= "height: #{comp.height}" if comp.height %>"
->
-  <% if comp.title %>
-    <h3 class="mdl-dialog__title"><%= expand_text(comp.title.text) %></h3>
-  <% end %>
-  <div class="v-errors">
-  <div class="mdl-dialog__content
-              <%= 'v-dialog--form' if has_form %>">
-    <% comp.components.each do |dcomp| %>
-      <%= erb :"components/#{dcomp.type}", :locals => {:comp => dcomp} %>
-    <% end %>
-  </div>
-  <% if comp.buttons.any? %>
-    <div class="mdl-dialog__actions">
-      <% comp.buttons.reverse.each do |button| %>
-        <%= erb :"components/button", :locals => {:comp => button} %>
+<div id="<%= comp.id %>"
+     <% if comp.tag %>
+     data-input-tag="<%= comp.tag %>"
+     <% end %>
+     class="v-dialog mdc-dialog"
+     role="alertdialog"
+     aria-modal="true"
+     aria-labelledby="<%= comp.id %>-title"
+     aria-describedby="<%= comp.id %>-content"
+     data-is-container
+     <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>>
+  <div class="mdc-dialog__container"
+    <% if comp.percent_width || comp.percent_height %>
+      style="<%= "max-width: none; width: #{comp.percent_width}; " if comp.percent_width %>
+        <%= "height: #{comp.percent_height}; " if comp.percent_height %>"
+    <% end %>>
+    <div class="mdc-dialog__surface"
+         <% if comp.px_width || comp.px_height  || comp.percent_width%>
+              style="max-width: none;<%= " width: #{comp.px_width.to_i.to_s == comp.px_width ? comp.px_width + 'px' : comp.px_width}; " if comp.px_width %>
+                <%= "height: #{comp.px_height.to_i.to_s == comp.px_height ? comp.px_height + 'px' : comp.px_height}; " if comp.px_height %>"
+        <% end %>>
+      <%= erb(:"components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(top both))%>
+      <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
+      <% if comp.title %>
+        <h2 class="mdc-dialog__title" id="<%= comp.id %>-title"><%= expand_text(comp.title.text) %></h2>
       <% end %>
+
+      <div class="mdc-dialog__content" id="<%= comp.id %>-content">
+        <div class="v-errors">
+          <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
+          <% if dialog_action_buttons.any? %>
+            <footer class="mdc-dialog__actions">
+              <% dialog_action_buttons.each do |button| %>
+                <%= erb :"components/button",
+                        :locals => {:comp => button,
+                                    :class_name => "mdc-dialog__button",
+                                    :data_attributes => "data-mdc-dialog-action='#{button.id}' data-auto-close"} %>
+              <% end %>
+            </footer>
+          <% end %>
+        </div>
+      </div>
+      <%= erb(:"components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(bottom both))%>
     </div>
-  <% end %>
   </div>
-</dialog>
+  <div class="mdc-dialog__scrim"></div>
+</div>

data/views/mdc/components/drag_and_drop/drag_and_drop.rb

@@ -0,0 +1,16 @@
+def draggable_attributes(comp)
+  draggable_attributes = ''
+  if comp.draggable
+    draggable_attributes = "draggable=true data-drag_params='#{comp.draggable.to_h.to_json}'"
+  end
+  draggable_attributes
+end
+
+def drop_zone_attributes(comp)
+  drop_zone_attributes = ''
+  if comp.drop_zone
+    zone = comp.drop_zone[:zone]
+    drop_zone_attributes = "data-dropzone='#{zone}' data-drop_params='#{comp.drop_zone.to_h.to_json}'"
+  end
+  drop_zone_attributes
+end

data/views/mdc/components/event.erb

@@ -1,16 +1,10 @@
 <% if events
+     require_relative "actions/resolver"
      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]
+          action_proc = WebClient::Actions::Resolver.new(comp, action).resolve
+          action_proc.call(action, parent_id, @grid_nesting)
         end,
        {once: false}]
      end %>

data/views/mdc/components/expansion_panel.erb

@@ -1,11 +1,13 @@
 <details id = '<%= comp.id %>' class="v-expansion mdc-elevation--z3"<% if comp.open %> open<% end %>>
-  <summary class="v-expansion__summary"><span class="v-expansion__header"><%= expand_text(comp.text&.text) %></span>
-    <span class="v-expansion__secondary-content"><%=expand_text(comp.secondary_text&.text)%></span></summary>
+  <summary class="v-expansion__summary">
+    <% if comp.text&.text %>
+      <%= erb :"components/typography", :locals => {comp: comp.text, class_name: 'v-expansion__header', type: 'text', inline: comp.text&.inline} %>
+    <% end %>
+    <% if comp.secondary_text&.text %>
+      <%= erb :"components/typography", :locals => {comp: comp.secondary_text, class_name: 'v-expansion__secondary-content', type: 'text', inline: comp.secondary_text&.inline} %>
+    <% end %>
+  </summary>
   <div class="v-expansion__content">
     <%= erb :"components/render", :locals => {:components => comp.content.components, :scope=> nil} if comp.content %>
   </div>
-  <!--<div class="v-expansion__actions">-->
-    <!--<button class="mdc-button mdc-button&#45;&#45;raised mdc-button&#45;&#45;primary v-expansion__action">Save</button>-->
-    <!--<button class="mdc-button v-expansion__action">Cancel</button>-->
-  <!--</div>-->
 </details>

data/views/mdc/components/file_input.erb

@@ -0,0 +1,17 @@
+<% if comp %>
+  <div id="<%= comp.id %>" class="v-input v-file-input"
+       data-preview=<%= JSON.generate(Array(comp.preview)) %>
+           data-accept="<%= comp.accept %>"
+       <% if comp.dirtyable %>data-dirtyable<% end %>
+
+
+       <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.id} %>>
+    <input id="<%= comp.id %>-input"
+           name="<%= comp.name %>"
+           type="file"
+           accept="<%= comp.accept %>"
+           <% if comp.disabled %>disabled<% end %>
+    >
+    <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
+  </div>
+<% end %>

data/views/mdc/components/form.erb

@@ -1,15 +1,14 @@
 <form role="form"
+      <% if comp.tag %>
+      data-input-tag="<%= comp.tag %>"
+      <% end %>
       id="<%= comp.id %>"
-      class="v-has-errors v-form"
+      class="v-form"
       style='width: 100%'
       onsubmit="javascript:void(0);return false;"
-      <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.id} %>>
+      <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.id} %>
+      data-is-container>
   <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>
+    <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
   </div>
 </form>

data/views/mdc/components/grid.erb

@@ -1,24 +1,41 @@
-<% @grid_nesting += 1 %>
+<% @grid_nesting += 1
+   @gutters ||= [true]
+   # gutters once turned off are turned off for all nested grids
+   @gutters.push comp.gutter.nil? ? @gutters.last : comp.gutter
+%>
 <div id="<%= comp.id %>"
-     class="mdc-layout-grid
-            <%= 'v-nested_grid' if @grid_nesting>1 && !comp.padded %>"
-     style="<%= "background-color: #{comp.color};" if comp.color %>">
-  <% unless @grid_nesting>1 %>
-  <% end %>
+     <% if comp.tag %>
+     data-input-tag="<%= comp.tag %>"
+     <% end %>
+     class="v-grid mdc-layout-grid
+            <%= _padding_classes_(comp.padding, @grid_nesting) %>
+            <%= 'v-grid__wide' if comp.wide %>
+            <%= comp.css_class.join(' ') %>"
+     style="<%= "background-color: #{comp.color};" if comp.color %><%= "height:#{comp.height};" if comp.height %>"
+     <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>>
+  <%= erb(:"components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(top both))%>
 
-  <div class="mdc-layout-grid__inner">
+  <div class="<%= @gutters.last ? nil : 'v-gutter-none' %> mdc-layout-grid__inner"
+       style="<%= "height:#{comp.height};" if comp.height %>">
     <% comp.columns.each do |col|
       span = "mdc-layout-grid__cell--span-#{col.size}"
       %i(desktop tablet phone).each do |device|
         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 %>"
-           style="<%= "background-color: #{col.color};" if col.color %>">
+     %>
+      <div id="<%= col.id %>" class="v-column mdc-layout-grid__cell <%= span %>
+                          <%= col.overflow ? nil : 'v-column-hide-overflow' %>
+                          <%= _padding_classes_(col.padding) %> v-column--relative <%= _alignment_class_(col.align) %> <%= col.css_class.join(' ') %>"
+           style="<%= "background-color: #{col.color};" if col.color %><%= "height:#{comp.height};" if comp.height %>"
+           <%= erb :"components/event", :locals => {comp: col, events: col.events, parent_id: col.event_parent_id} %>>
+        <%= erb(:"components/progress", :locals => {:comp => col.progress}) if col.progress && includes_one?(Array(col.progress.position), %i(top both))%>
         <%= erb :"components/render", :locals => {:components => col.components, :scope => nil} %>
+        <%= erb(:"components/progress", :locals => {:comp => col.progress}) if col.progress && includes_one?(Array(col.progress.position), %i(bottom both))%>
       </div>
     <% end %>
   </div>
+  <%= erb(:"components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(bottom both))%>
 </div>
 <% @grid_nesting -= 1
+   @gutters.pop
 %>