voom-presenters 0.2.0 → 2.0.0

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,16 +1,37 @@
-<div id="<%= comp.id %>"
-     <% if comp.tag %>
-     data-input-tag="<%= comp.tag %>"
-     <% end %>
-     class="v-content
+<%
+  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'%>
-               ">
-  <% 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>
+            <%= 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,13 +2,11 @@
   time_val = comp.value ? Array([comp.value]).join(', ') : nil
 %>
 <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-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 %>
-            <%= 'is-invalid is-dirty' if comp.error %>"
+            <%= '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 %>'
      style="<%= 'width:100%' if comp.full_width %>">
@@ -20,24 +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 %>
          list="<%= comp.id %>-list"
-         <%= erb :"components/event", :locals => {events: comp.events, parent_id:  "#{comp.id}-input"} %>>
-  <label class="mdc-floating-label" for="<%= comp.id %>-input"><%= comp.label %></label>
+         <%= 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"} %>
-  <div class="mdc-notched-outline">
-    <svg>
-      <path class="mdc-notched-outline__path"/>
-    </svg>
-  </div>
-  <div class="mdc-notched-outline__idle"></div>
+  <%= erb :"components/shared/input_label", :locals => {comp: comp} %>
   <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/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,30 +1,50 @@
 <%
-  has_form = comp.components.select{|c| eq(c.type, :form)}.any?
+  dialog_action_buttons = Array(comp&.actions&.buttons)
 %>
-<dialog id="<%= comp.id %>"
-        <% if comp.tag %>
-        data-input-tag="<%= comp.tag %>"
-        <% end %>
-        class="v-dialog mdl-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,12 +1,10 @@
 <% if events
+     require_relative "actions/resolver"
      data_events = events.map do |event|
        [event.event,
         event.actions.map do |action|
-          require_relative "actions/#{action.type}"
-          # Deligate the action data to each action class
-          # [Type, URL, Options, Params] these are passed into javascript event/action class constructors
-          # Only the type need be canonical, the rest is defined between this class and its javascript
-          Object.const_get("::WebClient::Actions::#{inflector.camelize(action.type)}").new.call(action, parent_id, @grid_nesting)
+          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

@@ -1,13 +1,17 @@
 <% if comp %>
-<div class="v-file-input mdc-text-field mdc-text-field--outlined mdc-text-field--upgraded" style="width: 100%">
-  <input id="<%= comp.id %>-input" name="<%= comp.name %>" type="file">
-  <button class="mdc-button"><%= comp.button_label %></button>
-  <label for="<%= comp.id %>-input"><%= comp.input_label %></label>
-  <div class="mdc-notched-outline">
-    <svg>
-      <path class="mdc-notched-outline__path"/>
-    </svg>
+  <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>
-  <div class="mdc-notched-outline__idle"></div>
-</div>
 <% end %>

data/views/mdc/components/form.erb

@@ -1,29 +1,14 @@
-<%
-  def buttons?(components)
-    buttons(components).any?
-  end
-
-  def buttons(components)
-    components.select {|c| eq(c.type, :button)}
-  end
-%>
 <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} %>
-    <% if buttons?(comp.components) %>
-      <div class="mdl-dialog__actions">
-        <% buttons(comp.components).reverse.each do |button| %>
-          <%= erb :"components/button", :locals => {:comp => button} %>
-        <% end %>
-      </div>
-    <% end %>
+    <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
   </div>
 </form>

data/views/mdc/components/grid.erb

@@ -1,38 +1,41 @@
 <% @grid_nesting += 1
-   def _padding_array_(padding, nesting)
-     return (%i(top0 right0 bottom0 left0)-padding.map{|p|"#{p}0".to_sym}+padding.map(&:to_sym)).sort if padding
-     nesting >1 ? %i(top right0 bottom left0).sort : []
-   end
-
-   def _padding_classes_(padding, nesting, grid_or_column)
-     "v-#{grid_or_column}__padding-#{_padding_array_(padding, nesting).join('-')}"
-   end
+   @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 %>"
      <% if comp.tag %>
      data-input-tag="<%= comp.tag %>"
      <% end %>
      class="v-grid mdc-layout-grid
-            <%= _padding_classes_(comp.padding, @grid_nesting, :grid) %>
-            <%= 'v-grid__wide' if comp.wide %>"
-     style="<%= "background-color: #{comp.color};" if comp.color %>">
-  <% unless @grid_nesting>1 %>
-  <% end %>
+            <%= _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="v-column mdc-layout-grid__cell <%= span %>
-                          <%= _padding_classes_(col.padding, 0, :col) %> v-column--relative"
-           style="<%= "background-color: #{col.color};" if col.color %>">
+                          <%= 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
 %>

data/views/mdc/components/hidden_field.erb

@@ -1,6 +1,5 @@
 <input class="v-input v-hidden-field"
        type="hidden"
-       <% if comp.tag %>
-       data-input-tag="<%= comp.tag %>"
-       <% end %>
-       id="<%= comp.id %>" name="<%= comp.name %>" value="<%= comp.value %>"/>
+       <% 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="v-icon-toggle 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 %>