coprl 0.1.0 → 3.0.0.beta.1

data/views/mdc/body/footers/_menu_item.erb

@@ -0,0 +1,6 @@
+<li class="<%= 'v-actionable' if item.events %>"
+    id="<%=item.id%>"
+    <%= partial "components/event", :locals => {comp: item, events: item.events, parent_id: item.event_parent_id} %>>
+  <%= partial "components/icon", :locals => {comp: item.icon, class_name: nil} %>
+  <%= item.text %>
+</li>

data/views/mdc/body/footers/_small.erb

@@ -0,0 +1,14 @@
+<footer class="mdl-mini-footer">
+  <div class="mdl-mini-footer__left-section">
+    <div class="mdl-logo">Title</div>
+    <% footer.menus.each do |menu| %>
+      <ul class="mdl-mini-footer__link-list">
+        <% menu.items.each do |item| %>
+          <%= partial "body/footers/menu_item", :locals => {item: item} %>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+</footer>
+
+

data/views/mdc/components/_avatar.erb

@@ -0,0 +1,31 @@
+<%
+  if comp
+    events = nil unless bound_locals_include?(:events, binding)
+    events = comp.events || events
+    if bound_locals_include?(:class_name, binding)
+      class_name ||= ''
+      class_name += ' v-avatar'
+    else
+      class_name = 'v-avatar'
+    end
+    position = comp.position unless bound_locals_include?(:position, binding)
+    position ||= []
+    position_classes = position.map {|p| "v-avatar-position-#{p}"}.join(' ')
+    size_class = "v-avatar-size-#{comp.size}" unless bound_locals_include?(:size_class, binding)
+%>
+  <% if %w(jpg gif png).include?(comp.avatar&.to_s.split('.').last) %>
+    <span class="<%=class_name%> <%=position_classes%> <%= size_class %>">
+      <img id="<%= comp.id %>"
+           class="v-avatar
+               <%= 'v-actionable' if events %>"
+         src="<%= comp.avatar %>"
+         <%= partial "components/event", :locals => {comp: comp, events: events, parent_id: comp.event_parent_id} if events&.any? %> />
+      <%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+    </span>
+  <% else %>
+    <span class="v-avatar <%=position_classes%> <%= size_class %>">
+    <%= partial "components/icon", :locals => {comp: comp, icon_name: comp.avatar, parent_id: comp.event_parent_id, position: []} if comp.avatar %>
+    </span>
+  <% end %>
+
+<% end %>

data/views/mdc/components/_badge.erb

@@ -0,0 +1,2 @@
+<%if comp.icon%><div class="material-icons mdl-badge--overlap mdl-badge" data-badge="<%=comp.badge%>"><%=comp.icon%></div>
+<%else%><span class="mdl-badge" data-badge="<%=comp.badge%>"><%=expand_text(comp.text)%></span><%end%>

data/views/mdc/components/_body.erb

@@ -0,0 +1,2 @@
+<% class_name = '' unless bound_locals_include?(:class_name, binding)%>
+<%= partial "components/typography", :locals => {comp: comp, type: comp.type, class_name: class_name} if comp %>

data/views/mdc/components/_button.erb

@@ -0,0 +1,28 @@
+<%
+  class_name = '' unless bound_locals_include?(:class_name, binding)
+  event_parent_id = nil unless bound_locals_include?(:event_parent_id, binding)
+  data_attributes = '' unless bound_locals_include?(:data_attributes, binding)
+%>
+<% if comp
+     class_name = "#{class_name} #{comp.full_width ? 'v-button-full-width' : nil}"
+%>
+  <% if comp.menu %>
+    <div class="mdc-menu-anchor">
+  <% end %>
+  <% case comp.button_type.to_sym
+        when :fab %>
+            <%= partial "components/buttons/fab", :locals => {:comp => comp, class_name: class_name, event_parent_id: event_parent_id, data_attributes: data_attributes} if comp %>
+     <% when :icon %>
+            <%= partial "components/buttons/icon", :locals => {:comp => comp, class_name: class_name, event_parent_id: event_parent_id, data_attributes: data_attributes} if comp %>
+    <% when :image %>
+            <%= partial "components/buttons/image", :locals => {:comp => comp, class_name: class_name, event_parent_id: event_parent_id, data_attributes: data_attributes} if comp %>
+    <% else  %>
+            <%= partial "components/buttons/button", :locals => {:comp => comp, class_name: class_name, event_parent_id: event_parent_id, data_attributes: data_attributes} if comp %>
+  <% end %>
+  <% if comp.menu %>
+    </div>
+  <% end %>
+<% end %>
+
+
+

data/views/mdc/components/_caption.erb

@@ -0,0 +1,2 @@
+<% class_name = '' unless bound_locals_include?(:class_name, binding) %>
+<%= partial "components/typography", :locals => {comp: comp, type: comp.type, class_name: class_name} if comp %>

data/views/mdc/components/_card.erb

@@ -0,0 +1,71 @@
+<div id="<%= comp.id %>" class="<%= 'v-hidden' if comp.hidden %>">
+  <div
+  <% if comp.tag %>
+  data-input-tag="<%= comp.tag %>"
+  <% end %>
+  <%= draggable_attributes(comp) %>
+  <%= drop_zone_attributes(comp) %>
+  class="v-card card-<%= comp.id %> mdc-card
+           <%= 'v-actionable' if comp.events && !comp.draggable %>
+           <%= 'v-dnd-draggable' if comp.draggable %>
+           <%= 'v-card-selected' if comp.selected %>
+           <%= comp.css_class.join(' ') %>
+           <%= color_classname(comp, 'background-', :background_color)%>"
+  style="<%= "width: #{comp.width};" if comp.width%>
+    <%= "height: #{comp.height};" if comp.height %>
+    <%= color_style(comp, 'background-', :background_color) %>"
+  <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} if comp %>
+  data-is-container>
+    <%= partial("components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(top both)) %>
+    <% if comp.media %>
+      <div class="v-errors">
+        <div id="<%= comp.media.id %>"
+             class="mdc-card__media v-card-media
+                <%= 'v-hidden' if comp.media.hidden %>
+                <%= '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 %>">
+          <%= partial "components/render", :locals => {:components => comp.media.components, :scope => nil} if comp.media.components.any? %>
+          <%= partial "components/button", :locals => {:comp => comp.media.button, class_name: "v-card__media-menu"} if comp.media.button %>
+          <%= partial "components/image", :locals => {:comp => comp.media.image, class_name: 'v-card-media-image'} if comp.media.image %>
+          <%= partial "components/avatar", :locals => {:comp => comp.media.avatar, class_name: 'v-card-media-avatar'} if comp.media.avatar %>
+          <%= partial "components/headline", :locals => {:comp => comp.media.title, class_name: "v-card-title"} if comp.media.title %>
+          <%= partial "components/headline", :locals => {:comp => comp.media.subtitle, class_name: "v-card-title"} if comp.media.subtitle %>
+        </div>
+      </div>
+    <% end %>
+    <div class="v-errors" style="<%= "height: #{comp.height};" if comp.height %>">
+      <% if comp.components.any? %>
+        <div class="v-card-content
+                  <%= _padding_classes_(comp.padding, subclass: :col) %>"
+             style="<%= "height: #{comp.height};" if comp.height %>">
+          <%= partial "components/render", :locals => {:components => comp.components, :scope => nil} if comp.components.any? %>
+        </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 v-card--actions">
+          <div class="mdc-card__action-buttons">
+            <% action_buttons.each do |button| %>
+              <%= partial "components/button", :locals => {:comp => button, class_name: 'mdc-card__action mdc-card__action--button'} if button %>
+            <% end %>
+          </div>
+          <div class="mdc-card__action-icons">
+            <% action_icons.each do |button| %>
+              <%= partial "components/button", :locals => {:comp => button, class_name: 'mdc-card__action mdc-card__action--icon'} if button %>
+            <% end %>
+            <% comp.actions.switches.each do |switch| %>
+              <%= partial "components/switch", :locals => {:comp => switch, class_name: 'mdc-card__action'} if switch %>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+    <%= partial("components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(bottom both)) %>
+  </div>
+</div>
+

data/views/mdc/components/_checkbox.erb

@@ -0,0 +1,34 @@
+<% class_name = '' unless bound_locals_include?(:class_name, binding)
+   data_table_class_name = '' unless bound_locals_include?(:data_table_class_name, binding)
+%>
+<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 %>"
+           <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} if comp.events&.any? %>>
+    <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>
+<%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>

data/views/mdc/components/_chip.erb

@@ -0,0 +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
+    child_events = (leading_icon&.events || trailing_icon&.events || comp.text&.events || []).any?
+%>
+  <% if comp.menu %>
+    <div class="mdc-menu-anchor">
+  <% end %>
+
+  <button id="<%= comp.id %>"
+          <% if comp.tag %>
+          data-input-tag="<%= comp.tag %>"
+          <% end %>
+          class="v-chip v-input mdc-chip
+              <%= color_classname(comp) %>
+              <%= '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"
+          <%= partial("components/event", locals: {comp: comp,
+                                                events: comp.events,
+                                                parent_id: comp.id}) if comp.events&.any? %>>
+    <%= partial("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 leading_icon %>
+    <% 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 %>
+
+    <%= partial "components/typography", :locals => {comp: comp.text, type: 'chip-text', class_name: 'mdc-chip__text'} if comp.text  %>
+    <%= partial("components/icon", locals: {comp: trailing_icon,
+                                         class_name: 'mdc-chip__icon mdc-chip__icon--trailing',
+                                         events: child_events ? (trailing_icon&.events || comp.events) : nil}) if trailing_icon %>
+  </button>
+  <% if comp.menu %>
+    <%= partial "components/list/menu", :locals => {:comp => comp.menu} %>
+    </div>
+  <% end %>
+  <%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+<% end %>

data/views/mdc/components/_chipset.erb

@@ -0,0 +1,17 @@
+<%
+  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) %>
+     <%= partial("components/event", locals: {comp: comp,
+                                           events: comp.events,
+                                           parent_id: comp.id}) if comp.events&.any? %>>
+  <%= partial "components/render", :locals => {:components => comp.components, :scope => nil} if comp.components.any? %>
+</div>

data/views/mdc/components/_content.erb

@@ -0,0 +1,36 @@
+<%
+  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)%>"
+     <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} if comp.events&.any? %>
+       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>
+    <%= partial("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 %>
+    <%= partial "components/render", :locals => {:components => comp.components, :scope => nil} if comp.components.any? %>
+    <% if comp.shows_errors %>
+      </div>
+    <% end %>
+    <%= partial("components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(bottom both)) %>
+  </div>
+<% end %>

data/views/mdc/components/_date.erb

@@ -0,0 +1 @@
+<%= partial "components/datetime", :locals => {comp: comp} if comp %>

data/views/mdc/components/_datetime.erb

@@ -0,0 +1,33 @@
+<%
+  time_val = comp.value ? Array([comp.value]).join(', ') : nil
+  type_class = comp.picker ? 'v-datetime' : 'v-date-text'
+%>
+<div id="<%= comp.id %>"
+     <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+     <% if comp.dirtyable %>data-dirtyable<% end %>
+     class="v-input <%= type_class %> 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 %>'
+     style="<%= 'width:100%' if comp.full_width %>">
+  <input id="<%= comp.id %>-input"
+         name="<%= comp.name %>"
+         type="text"
+         value="<%= time_val %>"
+         class="mdc-text-field__input"
+         aria-controls="<%= comp.id %>-input-helper-text"
+         data-input
+         <%= 'required' if comp.required %>
+         <%= "pattern='#{comp.pattern}'" if comp.pattern %>
+         list="<%= comp.id %>-list"
+         <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id:  "#{comp.id}-input"} if comp.events&.any? %>>
+  <%= partial "components/icon", :locals => {comp: comp.clear_icon, class_name: 'mdc-text-field__icon', parent_id: "#{comp.id}-input"}  if comp.picker && comp.clear_icon%>
+  <%= partial "components/shared/input_label", :locals => {comp: comp} if comp %>
+  <% if comp.picker %>
+    <datalist id="<%= comp.id %>-list">
+    </datalist>
+    <% end %>
+</div>
+<%= partial "components/shared/hint_error_display", :locals => {comp: comp} if comp %>
+<%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip%>

data/views/mdc/components/_dialog.erb

@@ -0,0 +1,50 @@
+<%
+  dialog_action_buttons = Array(comp&.actions&.buttons)
+%>
+<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
+     <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} if comp.events&.any? %>>
+  <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 %>>
+      <%= partial("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">
+          <%= partial "components/render", :locals => {:components => comp.components, :scope => nil} if comp.components.any? %>
+          <% if dialog_action_buttons.any? %>
+            <footer class="mdc-dialog__actions">
+              <% dialog_action_buttons.each do |button| %>
+                <%= partial "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>
+      <%= partial("components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(bottom both))%>
+    </div>
+  </div>
+  <div class="mdc-dialog__scrim"></div>
+</div>

data/views/mdc/components/_event.erb

@@ -0,0 +1,12 @@
+<% if events
+     require_relative "actions/resolver"
+     data_events = events.map do |event|
+       [event.event,
+        event.actions.map do |action|
+          action_proc = WebClient::Actions::Resolver.new(comp, action).resolve
+          action_proc.call(action, parent_id, @grid_nesting)
+        end,
+       {once: false}]
+     end %>
+  data-events = '<%= data_events.to_json %>'
+<% end %>

data/views/mdc/components/_expansion_panel.erb

@@ -0,0 +1,13 @@
+<details id = '<%= comp.id %>' class="v-expansion mdc-elevation--z3"<% if comp.open %> open<% end %>>
+  <summary class="v-expansion__summary">
+    <% if comp.text&.text %>
+      <%= partial "components/typography", :locals => {comp: comp.text, class_name: 'v-expansion__header', type: 'text', inline: comp.text&.inline} if comp.text %>
+    <% end %>
+    <% if comp.secondary_text&.text %>
+      <%= partial "components/typography", :locals => {comp: comp.secondary_text, class_name: 'v-expansion__secondary-content', type: 'text', inline: comp.secondary_text&.inline} if comp.secondary_text%>
+    <% end %>
+  </summary>
+  <div class="v-expansion__content">
+    <%= partial "components/render", :locals => {:components => comp.content.components, :scope=> nil} if comp.content &&  comp.content.components.any? %>
+  </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 %>
+
+
+       <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.id} if comp.events&.any? %>>
+    <input id="<%= comp.id %>-input"
+           name="<%= comp.name %>"
+           type="file"
+           accept="<%= comp.accept %>"
+           <% if comp.disabled %>disabled<% end %>
+    >
+    <%= partial "components/render", :locals => {:components => comp.components, :scope => nil} if comp.components.any? %>
+  </div>
+<% end %>