coprl 0.1.0 → 3.0.0.beta.1

data/views/mdc/components/actions/remove.rb

@@ -0,0 +1,10 @@
+module WebClient
+  module Actions
+    class Remove
+      def call(action, *)
+        # Type, URL, Options, Params (passed into javascript event/action classes)
+        [action.type, nil, action.options.to_h, action.params.to_h]
+      end
+    end
+  end
+end

data/views/mdc/components/actions/replaces.rb

@@ -0,0 +1,16 @@
+module WebClient
+  module Actions
+    class Replaces
+      include Coprl::Presenters::WebClient::Helpers::ExpandHash
+
+      def call(action, parent_id, grid_nesting, *)
+        # Type, URL, Options, Params (passed into javascript event/action classes)
+        trace { 'Replaces action dynamic parameters:'}
+        trace {expand_hash(action.dynamic_params)}
+        [action.type, action.url,
+         action.options.to_h.merge({grid_nesting: grid_nesting, __parent_id__: parent_id, input_tag: action.options[:input_tag]}),
+         expand_hash(action.dynamic_params)]
+      end
+    end
+  end
+end

data/views/mdc/components/actions/resolver.rb

@@ -0,0 +1,39 @@
+require "dry/inflector"
+
+module WebClient
+  module Actions
+    # This class renders a given component.
+    # First it looks for plugins that override default behavior
+    # If they don't exist then it renders the base components
+    class Resolver
+      extend Coprl::Presenters::Pluggable
+      include_plugins(:WebClientActions)
+
+      def initialize(comp, action)
+        @comp = comp
+        @action = action
+        initialize_plugins
+      end
+
+      def resolve
+        return method(:"action_data_#{@action.type}") if respond_to?(:"action_data_#{@action.type}")
+        require_relative "#{@action.type}"
+        # Delegate 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
+        ::WebClient::Actions.const_get(inflector.camelize(@action.type)).new
+      end
+
+      private
+
+      def initialize_plugins
+        self.class.include_plugins(:WebClientActions, plugins: @comp.send(:_plugins_))
+      end
+
+      def inflector
+        @inflector ||= Dry::Inflector.new
+      end
+    end
+  end
+end
+

data/views/mdc/components/actions/snackbar.rb

@@ -0,0 +1,12 @@
+module WebClient
+  module Actions
+    class Snackbar
+      include Coprl::Presenters::WebClient::Helpers::ExpandHash
+
+      def call(action, *)
+        # Type, URL, Options, Params (passed into javascript event/action classes)
+        [action.type, action.url, expand_hash(action.options), expand_hash(action.dynamic_params).merge(expand_hash(action.params))]
+      end
+    end
+  end
+end

data/views/mdc/components/actions/stepper.rb

@@ -0,0 +1,10 @@
+module WebClient
+  module Actions
+    class Stepper
+      def call(action, *)
+        # Type, URL, Options, Params (passed into javascript event/action classes)
+        [action.type, nil, action.options.to_h, action.params.to_h]
+      end
+    end
+  end
+end

data/views/mdc/components/actions/toggle_disabled.rb

@@ -0,0 +1,10 @@
+module WebClient
+  module Actions
+    class ToggleDisabled
+      def call(action, *)
+        # Type, URL, Options, Params (passed into javascript event/action classes)
+        [action.type, nil, action.options.to_h, action.params.to_h]
+      end
+    end
+  end
+end

data/views/mdc/components/actions/toggle_visibility.rb

@@ -0,0 +1,10 @@
+module WebClient
+  module Actions
+    class ToggleVisibility
+      def call(action, *)
+        # Type, URL, Options, Params (passed into javascript event/action classes)
+        [action.type, nil, action.options.to_h, action.params.to_h]
+      end
+    end
+  end
+end

data/views/mdc/components/actions/update.rb

@@ -0,0 +1,10 @@
+require_relative 'post'
+
+module WebClient
+  module Actions
+    class Update < Post
+    end
+  end
+end
+
+

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

@@ -0,0 +1,27 @@
+<% class_name = '' unless bound_locals_include?(:class_name, binding)
+   position_classes = comp.position.map {|p| "v-button-position-#{p}"}.join(' ')
+   event_parent_id = nil unless bound_locals_include?(:event_parent_id, binding)
+   data_attributes = '' unless bound_locals_include?(:data_attributes, binding)
+%>
+<button id="<%= comp.id %>"
+         class="v-button v-button--button mdc-button <%=class_name%>
+         <%= 'v-hidden' if comp.hidden %>
+         <%= '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-menu-click' if comp.menu%>
+         <%= 'v-nowrap' unless comp.wrap_text%>
+         <%= color_classname(comp, 'background-', :background_color)%>"
+         style="<%= color_style(comp) %> <%= color_style(comp, 'background-', :background_color) %>"
+         <%= data_attributes %>
+        data-disabled-on-post-finished="<%= comp.disabled_on_post_finished %>"
+<%= 'disabled ' if comp.disabled %>
+<%= "type='#{eq(comp.button_type, :raised) ? 'submit' : 'button'}'" %>
+<%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: event_parent_id || comp.event_parent_id} if comp.events&.any? %>>
+  <%= partial "components/icon", :locals => {comp: comp.icon, class_name: 'mdc-button__icon'} if comp.icon %>
+  <%= partial "components/image", :locals => {comp: comp.image} if comp.image %>
+  <%= comp.text %>
+</button>
+<%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+<%= partial "components/menu", :locals => {comp: comp.menu, parent_id: comp.id} if comp.menu %>

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

@@ -0,0 +1,23 @@
+<% class_name = '' unless bound_locals_include?(:class_name, binding)
+   position_classes = comp.position.map {|p| "v-button-fab-position-#{p}"}.join(' ')
+   event_parent_id = nil unless bound_locals_include?(:event_parent_id, binding)
+   data_attributes = '' unless bound_locals_include?(:data_attributes, binding)
+%>
+
+<button id="<%= comp.id %>"
+        <%= data_attributes %>
+        data-disabled-on-post-finished="<%= comp.disabled_on_post_finished %>"
+        class="v-button v-button--fab mdc-fab material-icons v-fab--absolute
+          <%= 'v-hidden' if comp.hidden %>
+          <%= class_name %>
+          <%= position_classes %>
+          <%= 'mdc-fab--mini' if eq(comp.size, :small) %>"
+        aria-label="<%= inflector.humanize(comp.icon.icon) %>"
+        <%= 'disabled' if comp.disabled %>
+        <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: event_parent_id || comp.event_parent_id} if comp.events&.any? %>>
+  <span class="mdc-fab__icon">
+  <%= comp.icon.icon %>
+  </span>
+</button>
+<%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+<%= partial "components/menu", :locals => {comp: comp.menu, parent_id: comp.id} if comp.menu %>

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

@@ -0,0 +1,24 @@
+<% class_name = '' unless bound_locals_include?(:class_name, binding)
+   position_classes = comp.position.map {|p| "v-button-icon-position-#{p}"}.join(' ')
+   event_parent_id = nil unless bound_locals_include?(:event_parent_id, binding)
+   data_attributes = '' unless bound_locals_include?(:data_attributes, binding)
+%>
+
+<button id="<%= comp.id %>"
+        <%= data_attributes %>
+        data-disabled-on-post-finished="<%= comp.disabled_on_post_finished %>"
+        class="v-button v-button--icon mdl-button mdl-js-button mdl-button--icon
+         <%= 'v-hidden' if comp.hidden %>
+         <%=class_name%>
+         <%= position_classes %>
+         <%= 'v-menu-click' if comp.menu%>"
+        style = "<%= color_style(comp) %>"
+        <%= 'disabled' if comp.disabled %>
+        <%= "type='#{eq(comp.button_type, :raised) ? 'submit' : 'button'}'" %>
+        <%= partial 'components/event', :locals => {comp: comp, events: comp.events, parent_id: event_parent_id || comp.event_parent_id} if comp.events&.any? %>>
+  <%= partial 'components/icon', :locals => {comp: comp.icon} if comp.icon %>
+  <%= comp.text %>
+  <%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+</button>
+<%= partial "components/menu", :locals => {comp: comp.menu, parent_id: comp.id} if comp.menu %>
+

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

@@ -0,0 +1,25 @@
+<% class_name = '' unless bound_locals_include?(:class_name, binding)
+   position_classes = comp.position.map {|p| "v-button-position-#{p}"}.join(' ')
+   event_parent_id = nil unless bound_locals_include?(:event_parent_id, binding)
+   data_attributes = '' unless bound_locals_include?(:data_attributes, binding)
+%>
+
+<button
+  id="<%= comp.id %>"
+  class="v-button v-button--image mdc-button <%=class_name%>
+          <%= 'v-hidden' if comp.hidden %>
+          <%= '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-menu-click' if comp.menu%>"
+  style="background-image: url(<%= comp.image.url %>);"
+  <%= data_attributes %>
+  data-disabled-on-post-finished="<%= comp.disabled_on_post_finished %>"
+  <%= 'disabled' if comp.disabled %>
+  <%= "type='#{eq(comp.button_type, :raised) ? 'submit' : 'button'}'" %>
+  <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: event_parent_id || comp.event_parent_id} if comp.events&.any? %>>
+  <%= partial "components/icon", :locals => {comp: comp.icon, class_name: 'mdc-button__icon', position: [:right, :center]} if comp.icon %>
+</button>
+<%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+<%= partial "components/menu", :locals => {comp: comp.menu, parent_id: comp.id} if comp.menus %>

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

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

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

@@ -0,0 +1,6 @@
+<% if line.avatar %>
+  <span class="mdc-list-item__graphic v-list-item--with-avatar"
+        <%= partial "components/event", :locals => {comp: line, events: line.events, parent_id: line.event_parent_id} if line.events&.any? %>>
+    <%= partial "components/avatar", :locals => {comp: line.avatar, class_name: ''} if line.avatar %>
+  </span>
+<% end %>

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

@@ -0,0 +1,5 @@
+<% if line.checkbox %>
+  <span class="mdc-list-item__graphic">
+    <%= partial "components/checkbox", :locals => {comp: line.checkbox, class_name: 'v-list-item--selectable-checkbox'} if line.checkbox %>
+  </span>
+<%end%>

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

@@ -0,0 +1,37 @@
+<li class="mdc-list-item
+           v-list-item--header
+           v-list-item--selectable-header"
+    id="<%= line.id %>">
+  <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>
+  <%= partial "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) %>
+
+    <% if line.subtitle %>
+      <span class="mdc-list-item__secondary-text">
+        <%= expand_text(line.subtitle.text) %>
+      </span>
+    <% end %>
+
+    <% if line.body %>
+      <span class="mdc-list-item__secondary-text">
+        <%= expand_text(line.body.text) %>
+      </span>
+    <% end %>
+  </span>
+</li>
+
+<% if line.total_lines > 0 %>
+  <li class="mdc-list-item hidden" id="list-item-select-all-header">
+    <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>
+    <span class="mdc-list-item__secondary-text hidden" id="list-item-select-all-toggle-on">
+      All <%= line.total_lines %> records selected. <a href="#" class="toggle-total-set" data-select="off">Clear selection</a>
+    </span>
+  </li>
+<% end %>
+
+<li role="separator" class="mdc-list-divider"></li>

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

@@ -0,0 +1,3 @@
+<% if line.hidden_field %>
+  <%= partial "components/hidden_field", :locals => {comp: line.hidden_field} %>
+<% end %>

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

@@ -0,0 +1,6 @@
+<%if line.icon%>
+  <span class="mdc-list-item__graphic"
+        <%= partial "components/event", :locals => {comp: line, events: line.events, parent_id: line.event_parent_id} if line.events&.any? %>>
+  <%= partial "components/icon", :locals => {comp: line.icon} if line.icon %>
+  </span>
+<%end%>

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

@@ -0,0 +1 @@
+<%if line.info%><span class="mdc-list-item__meta"><%=expand_text(line.info.text)%></span><%end%>

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

@@ -0,0 +1,45 @@
+<%
+  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="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 %>
+          <%= 'v-dnd-draggable' if line.draggable %>"
+    id="<%= line.id %>"
+    <%= draggable_attributes(line) %>
+    <%= drop_zone_attributes(line) %>
+    <%= partial "components/event", :locals => {comp: line, events: line.events, parent_id: line.event_parent_id} if line.events&.any? %>>
+  <%= partial "components/list/hidden_field", :locals => {:line => line} if line.hidden_field %>
+  <%= partial "components/list/checkbox", :locals => {:line => line} if line.checkbox %>
+  <%= partial "components/list/icon", :locals => {:line => line} if line.icon %>
+  <%= partial "components/list/avatar", :locals => {:line => line} if line.avatar %>
+  <span class="mdc-list-item__text
+               <%= 'v-actionable' if line.events %>
+               <%= '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, markdown: line.subtitle&.markdown) %></span>
+    <% end %>
+
+    <% if line.body %>
+      <span class="mdc-list-item__secondary-text"><%= expand_text(line.body&.text, markdown: line.body&.markdown) %></span>
+    <% end %>
+  </span>
+  <%= partial "components/list/actions", :locals => {:line => line} if line.actions.any? || line.info %>
+</li>
+<% if line.menu %>
+  <%= partial "components/list/menu", :locals => {:comp => line.menu} %>
+</div>
+<%end%>
+<%= partial "components/tooltip", :locals => {comp: line.tooltip, parent_id: line.id} if line.tooltip %>
+<%= partial "components/render", :locals => {:components => line.components, :scope => nil} if line.components.any? %>

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

@@ -0,0 +1,28 @@
+<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) %>
+        <li class="mdc-list-item" role="menuitem" tabindex="0"
+            <%= 'disabled' if item.disabled %>>
+          <% unless item.disabled %>
+            <a class="v-menu-link"
+               id="<%= item.id %>"
+               href="javascript:void(0)"
+               <%= partial "components/event", :locals => {comp: item, events: item.events, parent_id: item.event_parent_id} if item.events&.any? %>>
+          <% end %>
+          <%= item.text %>
+          <% unless item.disabled %>
+            </a>
+          <% end %>
+        </li>
+      <% else %>
+        <li class="mdc-list-divider" role="separator"></li>
+      <% end %>
+    <% end %>
+  </ul>
+</div>

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

@@ -0,0 +1 @@
+<li id="<%= line.id %>" role="separator" class="mdc-list-divider"></li>

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+<%= partial "components/switch", :locals => {:comp => action.switch, class_name:'v-list-switch-action'} if action.switch %>

data/views/mdc/components/shared/_hint_error_display.erb

@@ -0,0 +1,9 @@
+<div class="mdc-text-field-helper-line">
+  <div id="<%= comp.id %>-input-helper-text"
+       class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent<%= ' v-hidden' unless comp.hint %>"
+       role="alert"
+       aria-live="polite"
+       <% if comp.validation_error %>data-validation-error="<%= comp.validation_error %>"<% end %>>
+      <%= comp.hint %>
+  </div>
+</div>

data/views/mdc/components/shared/_input_label.erb

@@ -0,0 +1,7 @@
+<div class="mdc-notched-outline">
+  <div class="mdc-notched-outline__leading"></div>
+  <div class="mdc-notched-outline__notch">
+    <label for="<%= comp.id %>-input" class="mdc-floating-label"><%= expand_text(comp.label) %></label>
+  </div>
+  <div class="mdc-notched-outline__trailing"></div>
+</div>

data/views/mdc/components/stepper/_step.erb

@@ -0,0 +1,33 @@
+<li id="<%= comp.id %>"
+  class="v-step mdl-step
+      <%= ' mdl-step--editable' if comp.editable %>
+      <%= ' mdl-step--optional' if comp.optional %>
+      <%= ' is-active' if comp.selected %>">
+  <span class="mdl-step__label">
+    <span class="mdl-step__title">
+      <span class="mdl-step__title-text"><%= comp.label %></span>
+      <span class="mdl-step__title-message"></span>
+    </span>
+  </span>
+
+  <% if vertical %>
+    <div id="<%= comp.id %>-content"
+      class="mdl-step__content v-content">
+        <%= partial "components/render", :locals => {:components => comp.components, :scope => nil} if comp.components.any? %>
+    </div>
+  <% end %>
+
+  <div class="mdl-step__actions">
+    <!--    This needs to be here for the existing mdl-stepper styling to work - cleanup later -->
+    <% if vertical %>
+      <% if comp.actions&.buttons %>
+        <% comp.actions.buttons.each do |button| %>
+          <%= partial "components/button", :locals => {:comp => button,
+                                                    data_attributes: "data-stepper-#{button.stepper_type}",
+                                                    event_parent_id: "#{comp.id}-content" }
+          %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+</li>