voom-presenters 0.1.7 → 0.1.8

data/views/mdc/assets/js/components/text-fields.js

@@ -72,4 +72,12 @@ export class VTextField extends eventHandlerMixin(VBaseComponent) {
         }
         return null;
     }
+
+    clear(){
+        this.setValue('');
+    }
+
+    setValue(value){
+        this.input.value = value;
+    }
 }

data/views/mdc/assets/scss/components/datetime.scss

@@ -17,3 +17,8 @@
   padding-right: 48px;
   padding-left: 48px;
 }
+
+i:focus.v-datetime--clear {
+    outline: none;
+}
+

data/views/mdc/assets/scss/components/list.scss

@@ -6,4 +6,15 @@
   @include mdc-theme-prop(background-color, text-icon-on-background);
 }
 
+.v-list-item--header {
+  background-color: #F5F5F5;
+}
+
+#list-item-select-all-header {
+  height: 45px;
+  > span {
+    margin: auto;
+  }
+}
+
 

data/views/mdc/assets/scss/theme.scss

@@ -1,5 +1,52 @@
-$mdc-theme-primary: rgb(96,125,139);
-$mdc-theme-secondary: rgb(255,171,64);
+$mdc-theme-primary: #5488b2;
+$mdc-theme-secondary: #E58D36;
 $mdc-theme-background: #fff;
 
 $v-theme-error-message: #d50000;
+
+$v-header-background: #263138;
+$v-header-color: #839098;
+
+$v-drawer-background: #37424a;
+$v-drawer-color: #71818c;
+
+$v-title-background: #EBF0F4;
+
+.mdl-layout__header {
+  background-color: $v-title-background;
+  .mdl-layout__header-row {
+    background-color: $v-header-background;
+    color: $v-header-color;
+  }
+  .mdl-layout__drawer-button {
+    background-color: $v-drawer-background;
+  }
+  h1 {
+    padding-left: 24px;
+    color: $v-drawer-color;
+    font-size: 30px;
+    i {
+      font-size: 30px;
+      vertical-align: middle;
+    }
+  }
+}
+
+.mdl-layout__drawer {
+  background-color: $v-drawer-background;
+  border-right: 1px solid $v-drawer-background;
+  color: $v-drawer-color;
+  .mdl-navigation {
+    .mdl-navigation__link {
+      color: $v-drawer-color;
+      &.v-menu-item__selected {
+        color: lighten($v-drawer-color, 20%);
+        font-weight: bold;
+      }
+      &:hover {
+        background-color: $v-drawer-background;
+        color: lighten($v-drawer-color, 20%);
+      }
+    }
+  }
+}

data/views/mdc/body/drawer.erb

@@ -3,9 +3,9 @@
   <% if drawer.menu&.items %>
     <nav class="mdl-navigation">
       <% drawer.menu&.items&.each do |item| %>
-        <a class="mdl-navigation__link"
+        <a class="mdl-navigation__link <%= 'v-menu-item__selected' if item.selected %>"
            id="<%= item.id %>"
-           style="color: unset; text-decoration: none;"
+           style="text-decoration: none;"
            href="javascript:void(0)"
            <%= erb :"components/event", :locals => {events: item.events, parent_id: item.event_parent_id} %>>
           <%= erb :"components/icon", :locals => {comp: item.icon} %>

data/views/mdc/body/header.erb

@@ -22,4 +22,10 @@
       </nav>
     <% end %>
   </div>
+  <% if header.page_title&.text || header.page_title&.icon%>
+    <h1>
+      <%= erb :"components/icon", :locals => {comp: header.page_title.icon, class_name: nil} if header.page_title&.icon%>
+      <%= expand_text(header.page_title.text) if header.page_title&.text %>
+    </h1>
+  <% end %>
 </header>

data/views/mdc/components/checkbox.erb

@@ -1,9 +1,12 @@
+<%  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="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} %>
     />

data/views/mdc/components/datetime.erb

@@ -1,12 +1,12 @@
 <%
-  time_val = comp.value ? Array(comp.value).map{ |v| v.respond_to?(:strftime) ? v.strftime("%Y-%m-%dT%H:%M:%S.%L") : v}.join(', ') : nil
+  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 %>"
-     data-config='<%= snake_to_camel(comp.config, except: %i(time_24hr)).to_json %>'
+     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/views/mdc/components/expansion_panel.erb

@@ -1,4 +1,4 @@
-<details id = '<%= comp.id %>' class="v-expansion mdc-elevation--z3">
+<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>
   <div class="v-expansion__content">

data/views/mdc/components/list.erb

@@ -1,7 +1,8 @@
 <% 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? %>">
+            <%= 'mdc-list--avatar-list' if comp.lines.select{|line| eq(line.type, :line) && line.avatar }.any? %>"
+      data-total-lines="<%= comp.total_lines %>">
 <% end %>
 <% for line in comp.lines %>
   <%= erb :"components/list/#{line.type}", :locals => {:line => line} %>

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

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

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

@@ -0,0 +1,35 @@
+<li class="mdc-list-item
+           v-list-item--header
+           v-list-item--selectable-header"
+    id="<%= line.id %>">
+  <%= erb :"components/checkbox", :locals => {:comp => line.checkbox, :class_name => 'v-checkbox--select-control'} 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">
+    <input type="checkbox" name="all" value="true" id="select-total" style="display: none;" />
+    <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/line.erb

@@ -3,7 +3,8 @@
 <% end %>
 <li class="mdc-list-item
           <%= 'mdc-list-item--selected' if line.selected %>
-          <%= 'v-menu-click' if line.menu && line.actions.empty?%>"
+          <%= 'v-menu-click' if line.menu && line.actions.empty?%>
+          <%= 'v-list-item--selectable' if line.selectable %>"
     id="<%= line.id %>">
   <%= erb :"components/list/checkbox", :locals => {:line => line} %>
   <%= erb :"components/list/icon", :locals => {:line => line} %>

data/views/mdc/components/menu.erb

@@ -7,7 +7,7 @@
     <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"
+          <li class="mdc-list-item <%= 'v-menu-item__selected' if item.selected %>" role="menuitem" tabindex="0"
               <%= 'disabled' if item.disabled %>>
             <% unless item.disabled %>
               <a class="v-menu-link"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: voom-presenters
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.8
 platform: ruby
 authors:
 - Russell Edens
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-05-16 00:00:00.000000000 Z
+date: 2018-06-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: ice_nine
@@ -326,6 +326,7 @@ files:
 - lib/voom/presenters/dsl/components/input.rb
 - lib/voom/presenters/dsl/components/list.rb
 - lib/voom/presenters/dsl/components/lists/action.rb
+- lib/voom/presenters/dsl/components/lists/header.rb
 - lib/voom/presenters/dsl/components/lists/line.rb
 - lib/voom/presenters/dsl/components/lists/separator.rb
 - lib/voom/presenters/dsl/components/menu.rb
@@ -409,6 +410,9 @@ files:
 - public/scripts.js
 - public/style-bundle.js
 - public/styles.css
+- scripts/bump.sh
+- scripts/deploy-demo.sh
+- scripts/release.sh
 - views/mdc/.gitignore
 - views/mdc/assets/js/app.js
 - views/mdc/assets/js/components/base-component.js
@@ -421,15 +425,15 @@ files:
 - views/mdc/assets/js/components/events.js
 - views/mdc/assets/js/components/events/autocomplete.js
 - views/mdc/assets/js/components/events/base.js
+- views/mdc/assets/js/components/events/clears.js
 - views/mdc/assets/js/components/events/dialog.js
 - views/mdc/assets/js/components/events/errors.js
 - views/mdc/assets/js/components/events/loads.js
 - views/mdc/assets/js/components/events/navigates.js
 - views/mdc/assets/js/components/events/posts.js
 - views/mdc/assets/js/components/events/replaces.js
-- views/mdc/assets/js/components/events/selects.js
 - views/mdc/assets/js/components/events/snackbar.js
-- views/mdc/assets/js/components/events/toggle_visiblity.js
+- views/mdc/assets/js/components/events/toggle_visibility.js
 - views/mdc/assets/js/components/forms.js
 - views/mdc/assets/js/components/icon-toggles.js
 - views/mdc/assets/js/components/initialize.js
@@ -512,6 +516,7 @@ files:
 - views/mdc/components/list/actions/switch.erb
 - views/mdc/components/list/avatar.erb
 - views/mdc/components/list/checkbox.erb
+- views/mdc/components/list/header.erb
 - views/mdc/components/list/icon.erb
 - views/mdc/components/list/info.erb
 - views/mdc/components/list/line.erb

data/views/mdc/assets/js/components/events/selects.js

@@ -1,28 +0,0 @@
-export class VSelects {
-    constructor(options, params, event) {
-        this.target = options.target;
-        this.params = params;
-        this.event = event;
-    }
-
-    call(results) {
-        let targetFields =document.querySelectorAll('input[name="'+this.target+'"]');
-        let checked = this.event.target.checked;
-        new Promise(function (resolve) {
-            if (targetFields) {
-                if (checked) {
-                    for (let i = 0; i < targetFields.length; i++) {
-                        console.log(i);
-                        targetFields[i].checked = true;
-                    }
-                } else {
-                    for (let i = 0; i < targetFields.length; i++) {
-                        targetFields[i].checked = false;
-                    }
-                }
-            }
-            results.push({action:'selects', statusCode: 200});
-            resolve(results);
-        });
-    }
-}

data/views/mdc/assets/js/components/events/toggle_visiblity.js

@@ -1,19 +0,0 @@
-export class VToggleVisiblity  {
-    constructor(options, params, event) {
-        this.targetId = options.target;
-        this.params = params;
-        this.event = event;
-    }
-
-    call(results) {
-        var targetId = this.targetId;
-        var promiseObj = new Promise(function (resolve) {
-            console.log("Toggling visiblity on: " + targetId);
-            var elem = document.getElementById(targetId);
-            elem.classList.toggle("v-hidden");
-            results.push({action:'toggle_visiblity', statusCode: 200});
-            resolve(results);
-        });
-        return promiseObj;
-    }
-}