voom-presenters 0.1.0

data/views/mdc/components/buttons/button.erb

@@ -0,0 +1,20 @@
+<% class_name = '' unless local_variables.include? :class_name
+   position_classes = comp.position.map {|p| "v-button-position-#{p}"}.join(' ')
+   text_align = comp.position.select {|p| eq(p, :left)}.any? && eq(comp.button_type, :flat)%>
+
+<button
+id="<%= comp.id %>"
+class="mdc-button v-js-ripple-button <%=class_name%>
+          <%= 'mdc-button--raised' if eq(comp.button_type, :raised) %>
+          <%= 'v-secondary-filled-button' if eq(comp.button_type, :raised) && eq(comp.color, :secondary) %>
+          <%= 'v-secondary-text-button' if eq(comp.button_type, :flat) && eq(comp.color, :secondary) %>
+          <%=  position_classes %>
+           <%= "v-button-text-align-left" if text_align %>
+          <%= 'mdc-menu-anchor v-menu-click' if comp.menu%>"
+<%= 'disabled' if comp.disabled %>
+<%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} unless comp.disabled %>>
+  <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-button__icon'} %>
+  <%= comp.text %>
+  <%= erb :"components/menu", :locals => {comp: comp.menu, parent_id: comp.id} %>
+</button>
+<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/buttons/fab.erb

@@ -0,0 +1,22 @@
+<% class_name = '' unless local_variables.include? :class_name
+   position_classes = comp.position.map {|p| "v-button-fab-position-#{p}"}.join(' ')
+%>
+
+<% if comp.menu %>
+  <div class="mdc-menu-anchor" %>
+<% end %>
+<button id="<%= comp.id %>"
+        class="mdc-fab material-icons v-fab--absolute v-js-ripple-button <%= class_name %> <%= position_classes %>
+          <%= 'mdc-fab--mini' if eq(comp.size, :small) %>"
+        aria-label="<%= inflector.humanize(comp.icon.icon) %>"
+        <%= 'disabled' if comp.disabled %>
+        <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} unless comp.disabled %>>
+  <span class="mdc-fab__icon">
+  <%= comp.icon.icon %>
+  </span>
+</button>
+<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+<%= erb :"components/menu", :locals => {comp: comp.menu, parent_id: comp.id} %>
+<% if comp.menu %>
+  </div>
+<% end %>

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

@@ -0,0 +1,24 @@
+<% class_name = '' unless local_variables.include? :class_name
+   position_classes = comp.position.map {|p| "v-button-icon-position-#{p}"}.join(' ')
+%>
+
+<% if comp.menu %>
+  <div class="mdc-menu-anchor" %>
+<% end %>
+<button id="<%= comp.id %>"
+        class="mdl-button mdl-js-button mdl-button--icon  <%=class_name%> <%= position_classes %>
+         <%= 'mdl-button--colored' if eq(comp.color, :primary) %>
+         <%= 'mdl-button--accent' if eq(comp.color, :secondary) %>
+         <%= 'v-menu-click' if comp.menu%>"
+        style = "<%= color_style(comp) %>"
+        <%= 'disabled' if comp.disabled %>
+        <%= erb :'components/event', :locals => {events: comp.events, parent_id: comp.event_parent_id} unless comp.disabled %>>
+  <%= erb :'components/icon', :locals => {comp: comp.icon} %>
+  <%= comp.text %>
+</button>
+<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+<%= erb :"components/menu", :locals => {comp: comp.menu, parent_id: comp.id} %>
+
+<% if comp.menu %>
+  </div>
+<% end %>

data/views/mdc/components/card.erb

@@ -0,0 +1,49 @@
+<div id="<%=comp.id%>"
+    class="card-<%= comp.id %> mdc-card v-card
+           <%= 'v-actionable' if comp.events %>"
+     style="<%= "width: #{comp.width};" if comp.width%>
+         <%= "height: #{comp.height};" if comp.height%>
+       <%= "outline: medium solid rgb(63,81,181);" if comp.selected %>"
+     <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} %>
+>
+  <% if comp.media %>
+    <div class="v-errors">
+      <div class="mdc-card__media v-card-media
+                <%= 'mdc-card__media--square' if false && comp.media.width == comp.media.height %>"
+           style="<%= "width: #{comp.media.width};" if comp.media.width%>
+               <%= "height: #{comp.media.height};" if comp.media.height  %>
+             <%= "background-color: #{comp.media.color};" if comp.media.color %>">
+        <%= erb :"components/button", :locals => {:comp => comp.media.button, class_name: "v-card__media-menu"} %>
+        <%= erb :"components/image", :locals => {:comp => comp.media.image, class_name: 'v-card-media-image'} %>
+        <%= erb :"components/avatar", :locals => {:comp => comp.media.avatar, class_name: 'v-card-media-avatar'} %>
+        <%= erb :"components/title", :locals => {:comp => comp.media.title, class_name: "v-card-title"} %>
+      </div>
+    </div>
+  <% end %>
+  <div class="v-errors">
+    <% if comp.components.any? %>
+      <div class="v-card-content">
+        <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
+      </div>
+    <% end %>
+
+    <% if comp.actions&.buttons
+         action_buttons = comp.actions.buttons.select {|b| !eq(b.button_type, :icon)}
+         action_icons = comp.actions.buttons.select {|b| eq(b.button_type, :icon)}
+    %>
+      <div class="mdc-card__actions">
+        <div class="mdc-card__action-buttons">
+          <% action_buttons.each do |button| %>
+            <%= erb :"components/button", :locals => {:comp => button, class_name: 'mdc-card__action mdc-card__action--button'} %>
+          <% end %>
+        </div>
+        <div class="mdc-card__action-icons">
+          <% action_icons.each do |button| %>
+            <%= erb :"components/button", :locals => {:comp => button, class_name: 'mdc-card__action mdc-card__action--icon'} %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+

data/views/mdc/components/checkbox.erb

@@ -0,0 +1,22 @@
+<div class="mdc-checkbox">
+  <input type="checkbox"
+         id="<%=comp.id%>"
+         name="<%=comp.name%>"
+         value="<%=comp.value%>"
+         class="mdc-checkbox__native-control"
+         <% 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>
+  </div>
+</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 }%>

data/views/mdc/components/chip.erb

@@ -0,0 +1,31 @@
+<% 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?
+%>
+  <% if first_chip %>
+    <div class="mdc-chip-set">
+  <% end %>
+  <div id="<%= comp.id %>"
+       class="mdc-chip
+              <%= color_classname(comp) %>"
+       style = "<%= color_style(comp, 'background-') %>"
+       tabindex="0"
+       <%= erb(:"components/event", locals: {events: comp.events,
+                                             parent_id: comp.id}) unless child_events %>>
+    <%= 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}) %>
+    <%= 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>
+  <% if last_chip %>
+    </div>
+  <% end %>
+  <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+<% end %>

data/views/mdc/components/content.erb

@@ -0,0 +1,11 @@
+<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>

data/views/mdc/components/date_time.erb

@@ -0,0 +1,30 @@
+<%
+    time_val = comp.value ? comp.value.strftime("%Y-%m-%dT%H:%M:%S.%L") : nil
+%>
+<div id="<%= comp.id %>"
+     class="mdc-text-field
+            <%= 'mdc-text-field--with-trailing-icon' if comp.icon %>
+            <%= 'mdc-text-field--fullwidth' if comp.full_width %>
+            <%= 'is-invalid is-dirty' if comp.error %>">
+  <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-text-field__icon', parent_id: "#{comp.id}-input"} %>
+  <input id="<%= comp.id %>-input"
+         name="<%= comp.name %>"
+         type="datetime-local"
+         value="<%= time_val %>"
+         class="mdc-text-field__input"
+         aria-controls="<%= comp.id %>-input-helper-text"
+         <%= '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>
+  <datalist id="<%= comp.id %>-list">
+  </datalist>
+
+</div>
+<p id="<%= comp.id %>-input-helper-text" class="mdc-text-field-helper-text" aria-hidden="true">
+  <%= comp.error || comp.hint %>
+</p>

data/views/mdc/components/dialog.erb

@@ -0,0 +1,27 @@
+<%
+  has_form = comp.components.select{|c| eq(c.type, :form)}.any?
+%>
+<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} %>
+      <% end %>
+    </div>
+  <% end %>
+  </div>
+</dialog>

data/views/mdc/components/display.erb

@@ -0,0 +1,2 @@
+<% class_name = '' unless local_variables.include? :class_name %>
+<%= erb :"components/typography", :locals => {comp: comp, type: comp.type, class_name: class_name} %>

data/views/mdc/components/event.erb

@@ -0,0 +1,18 @@
+<% if events
+     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]
+        end,
+       {once: false}]
+     end %>
+  data-events = '<%= data_events.to_json %>'
+<% end %>

data/views/mdc/components/expansion_panel.erb

@@ -0,0 +1,11 @@
+<details id = '<%= comp.id %>' class="v-expansion mdc-elevation--z3">
+  <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>
+  <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/form.erb

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

data/views/mdc/components/grid.erb

@@ -0,0 +1,24 @@
+<% @grid_nesting += 1 %>
+<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 %>
+
+  <div class="mdc-layout-grid__inner">
+    <% 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 %>">
+        <%= erb :"components/render", :locals => {:components => col.components, :scope => nil} %>
+      </div>
+    <% end %>
+  </div>
+</div>
+<% @grid_nesting -= 1
+%>

data/views/mdc/components/headline.erb

@@ -0,0 +1,2 @@
+<% class_name = '' unless local_variables.include? :class_name %>
+<%= erb :"components/typography", :locals => {comp: comp, type: comp.type, class_name: class_name} %>

data/views/mdc/components/hidden_field.erb

@@ -0,0 +1 @@
+<input type="hidden" id="<%= comp.id %>" name="<%= comp.name %>" value="<%= comp.value %>"/>

data/views/mdc/components/icon.erb

@@ -0,0 +1,30 @@
+<% class_name = '' unless local_variables.include? :class_name
+%>
+<% if comp
+     parent_id = comp.event_parent_id unless locals.include? :parent_id
+     icon_name = comp.icon unless locals.include? :icon_name
+     events = comp.events unless locals.include? :events
+     position = comp.position||[] unless locals.include? :position
+     position_classes = position.map {|p| "v-icon-position-#{p}"}.join(' ')
+     class_name= "#{class_name} #{position_classes}"
+     if icon_name =~ /^(fa[srlb]\s)*fa-/
+       icon_class_name = "#{icon_name} v-icon__fa"
+       icon_class_name = "fas #{icon_class_name}" unless icon_class_name=~ /^(fas)|(fal)|(fab)/
+       icon = ''
+     else
+       icon_class_name = "material-icons"
+       icon = icon_name
+     end
+%>
+  <i id="<%= comp.id %>"
+     class="<%= class_name %> <%= icon_class_name %>
+            <%= 'v-actionable' if comp.events %>
+            <%= color_classname(comp) %>"
+       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} %>>
+    <%= icon %>
+  </i>
+  <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+<% end %>

data/views/mdc/components/icon_toggle.erb

@@ -0,0 +1,15 @@
+<i id="<%= comp.id %>"
+   class="mdc-icon-toggle material-icons
+       <%= 'mdc-icon-toggle--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>
+<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>

data/views/mdc/components/image.erb

@@ -0,0 +1,7 @@
+<% if comp
+     position_classes = comp.position.map {|p| "v-image-position-#{p}"}.join(' ') %>
+<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 %>

data/views/mdc/components/link.erb

@@ -0,0 +1,14 @@
+<% 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 %>
+<% end %>
+

data/views/mdc/components/list.erb

@@ -0,0 +1,14 @@
+<% unless comp.lines_only %>
+  <ul class="mdc-list
+            <%= '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? %>">
+<% end %>
+<% for line in comp.lines %>
+  <%= erb :"components/list/#{line.type}", :locals => {:line => line} %>
+<% end %>
+<%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
+<% unless comp.lines_only %>
+  </ul>
+<% end %>
+
+

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

@@ -0,0 +1,6 @@
+<span class="mdc-list-item__meta">
+  <%= erb :"components/list/info", :locals => {:line => line} %>
+<% line.actions.each do |action| %>
+    <%= erb :"components/list/actions/#{action.action_type}", :locals => {action: action} %>
+<% end %>
+</span>

data/views/mdc/components/list/actions/button.erb

@@ -0,0 +1 @@
+<%= erb :"components/button", :locals => {:comp => action.button, class_name:nil} %>

data/views/mdc/components/list/actions/checkbox.erb

@@ -0,0 +1 @@
+<%= erb :"components/checkbox", :locals => {:comp => action.checkbox, class_name:nil} %>