vhx-quartz 0.10.2 → 0.10.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: db39b7019ef57a978493c304c8b6ce1af64fc0c4
-  data.tar.gz: 225d90078555018c979b35780dc3d9794f4079ef
+  metadata.gz: bd6f9343107741c8ebd62ed965387916cc8ccfaf
+  data.tar.gz: 5129ab653f0ab685d1a2c56fa8a1009c40a63c5d
 SHA512:
-  metadata.gz: 464844b4d3c988e83f5bd2d864faf2cd127f5f90b929ac5631320d0e9148048ea5fa0f6c9839024168fd0299800d3487a6cd821aae36b07e6efbe3b98cfe550c
-  data.tar.gz: 3a00a545ff5cc79bb1ef4ab19fc9170078135b17c2eed93344accd332b2c0770a1431e52340f9e996d45a9f6e1d3cc26e15a7830b672bbdb3666f8e964bb997a
+  metadata.gz: c9e31dbd39de48aab359b98245bdebc39b42a90ecaaaa1b14939a2a0c91086b99b33d5d99b4673309e61456f45869d38564ec957b3cce24261dd6d846f173577
+  data.tar.gz: f84b6d07349bc04fb178e79e67d98ba753c129171a94650c5bb62db279a6000c7c9bbde82c15f9d4070abfbef39561e0d03892eeb5fd78130d3e72f8c99c47f2

data/lib/vhx/quartz/version.rb

@@ -1,5 +1,5 @@
 module Vhx
   module Quartz
-    VERSION = "0.10.2"
+    VERSION = "0.10.3"
   end
 end

data/vendor/assets/javascripts/vhx-quartz.select.js

@@ -10,7 +10,8 @@ vhxm.components.shared.select.controller = function (opts) {
 
     self.type = opts.type || 'standard';
     self.multiselect = opts.multiselect || false;
-    self.caret_position = opts.caret_position || 'right';
+    self.caret = opts.caret || 'right';
+    self.position = opts.position || 'bottom';
     self.model.items = opts.items;
 
     if (opts.selected) {
@@ -19,6 +20,9 @@ vhxm.components.shared.select.controller = function (opts) {
       });
     }
 
+    if (opts.isProcessing) {
+      self.state.isProcessing = opts.isProcessing;
+    }
     if (opts.onSelect) {
       self.state.onSelect = opts.onSelect;
     }
@@ -44,13 +48,11 @@ vhxm.components.shared.select.controller = function (opts) {
     var selected = opts.placeholder ? opts.placeholder : 'Select...';
 
     if (self.state.selected()) {
-      self.model.items().map(function (item) {
-        if (self.state.selected()[item[opts.prop_map.key]]) {
-          selected = self.state.selected()[item[opts.prop_map.key]].label;
-        }
-      });
       if (Object.keys(self.state.selected()).length > 1) {
         selected = 'Multiple items selected';
+      } else {
+        var key = Object.keys(self.state.selected())[0];
+        selected = self.state.selected()[key].label;
       }
     }
 
@@ -99,6 +101,11 @@ vhxm.components.shared.select.controller = function (opts) {
 
   self.selectItem = function (item, isInit) {
     var selected = void 0;
+    var obj = {
+      value: item[opts.prop_map.value],
+      label: item[opts.prop_map.label]
+    };
+
     if (!self.multiselect) {
       self.state.selected({});
     }
@@ -107,12 +114,8 @@ vhxm.components.shared.select.controller = function (opts) {
 
     if (selected[item[opts.prop_map.key]]) {
       delete selected[item[opts.prop_map.key]];
-      self.state.onSelect(null, self.state.selected(), 'removed');
+      self.state.onSelect(obj, self.state.selected(), 'removed');
     } else {
-      var obj = {
-        value: item[opts.prop_map.value],
-        label: item[opts.prop_map.label]
-      };
       selected[item[opts.prop_map.key]] = obj;
       self.state.onSelect(obj, self.state.selected(), 'added');
     }
@@ -194,6 +197,7 @@ vhxm.components.shared.select.state = function () {
   this.searchInputValue = m.prop('');
   this.footerLoading = m.prop(false);
   this.focusInput = m.prop(true);
+  this.isProcessing = m.prop([]);
   this.onSelect = function () {};
   this.onAction = function (done) {
     done();
@@ -210,7 +214,7 @@ vhxm.components.shared.select.ui.container = {
     options += opts.trigger ? '.has-trigger' : '';
     options += opts.type === 'media' ? '.has-media' : '';
     options += opts.inline ? '.inline' : '';
-    options += '.caret--' + ctrl.caret_position;
+    options += '.caret--' + (ctrl.position === 'top' ? 'bottom' : 'top') + '-' + ctrl.caret;
 
     if (opts.trigger) {
       opts.trigger.attrs.onclick = ctrl.handleClick;
@@ -225,7 +229,13 @@ vhxm.components.shared.select.ui.container = {
     }, [opts.trigger ? opts.trigger : m('a.c-select--trigger.btn-dropdown-' + (opts.color ? opts.color : 'gray') + '.btn--fill' + (ctrl.state.isDropdownOpen() ? '.is-active' : ''), {
       href: '#',
       onclick: ctrl.handleClick
-    }, ctrl.selectedLabel()), m('.c-select--dropdown.bg-white.border.radius.fill-width' + (ctrl.state.isDropdownOpen() ? '.is-open' : ''), [opts.search ?
+    }, ctrl.selectedLabel()), m('.c-select--dropdown.bg-white.border.radius.fill-width' + (ctrl.state.isDropdownOpen() ? '.is-open' : ''), {
+      config: function config(el) {
+        if (ctrl.position === 'top') {
+          el.style.top = -(el.offsetHeight + 10) + 'px';
+        }
+      }
+    }, [opts.search ?
     // if search is enabled
     m('.c-select--input-container.padding-medium.absolute.bg-white.fill-width.radius', [m.component(vhxm.components.shared.search_input.ui.container, {
       config: function config(el, init) {
@@ -250,7 +260,7 @@ vhxm.components.shared.select.ui.container = {
     m('.c-select--footer.border-top', [m('a.btn-teal.btn--fill' + (ctrl.state.footerLoading() ? '.is-loading' : ''), {
       onclick: ctrl.handleAction,
       href: '#'
-    }, opts.action + (ctrl.state.searchInputValue().length ? ' \'' + ctrl.state.searchInputValue() + '\'' : ''))]) : '', m('span.c-select--caret')])]);
+    }, opts.action + (ctrl.state.searchInputValue().length ? ' \'' + ctrl.state.searchInputValue() + '\'' : ''))]) : ''])]);
   }
 };
 
@@ -278,7 +288,7 @@ vhxm.components.shared.select.ui.item_media = {
       src: item[opts.prop_map.img],
       width: 70,
       height: 40
-    })]), m('.c-media-item--content.clearfix.left', [m('p.text--navy', item[opts.prop_map.label]), m('p.text--gray', item[opts.prop_map.descriptor])]), ctrl.parent.multiselect ? m('.c-media-item--action.clearfix.right', [m('.c-item-toggle.icon--xsmall.icon-check-navy.border' + (ctrl.state.selected() && ctrl.state.selected()[item[opts.prop_map.key]] ? '.is-selected.icon-check-navy' : '.icon-plus-thin-white'))]) : '']);
+    })]), m('.c-media-item--content.clearfix.left', [m('p.text--navy', item[opts.prop_map.label]), m('p.text--gray', item[opts.prop_map.descriptor])]), ctrl.parent.multiselect ? m('.c-media-item--action.clearfix.right', [ctrl.state.isProcessing().indexOf(item[opts.prop_map.value]) >= 0 ? m('.c-item-toggle.loader-white.loader--small') : m('.c-item-toggle.icon--xsmall.icon-check-navy.border' + (ctrl.state.selected() && ctrl.state.selected()[item[opts.prop_map.key]] ? '.is-selected.icon-check-navy' : '.icon-plus-thin-white'))]) : '']);
   }
 };
 

data/vendor/assets/javascripts/vhx-quartz.tag.js

@@ -5,6 +5,9 @@ vhxm.components.shared.tag.controller = function (opts) {
 
   self.state = new vhxm.components.shared.tag.state();
 
+  if (opts.isProcessing) {
+    self.state.isProcessing = opts.isProcessing;
+  }
   if (opts.onShow) {
     self.state.onShow = opts.onShow;
   }
@@ -15,6 +18,7 @@ vhxm.components.shared.tag.controller = function (opts) {
 vhxm.components.shared.tag.state = function () {
   this.isHover = m.prop(false);
   this.isRemoveHover = m.prop(false);
+  this.isProcessing = m.prop(false);
   this.onShow = function () {};
   this.onRemove = function () {};
 };
@@ -29,7 +33,7 @@ vhxm.components.shared.tag.ui.container = {
       onmouseout: function onmouseout() {
         ctrl.state.isHover(false);
       }
-    }, [m('button.c-tag--button' + (ctrl.state.isHover() ? '.btn-teal.is-hover' : '.btn-gray'), {
+    }, [m('button.c-tag--button' + (ctrl.state.isHover() ? '.btn-teal.is-hover' : '.btn-gray') + (ctrl.state.isProcessing() ? '.is-processing' : ''), {
       onclick: function onclick(event) {
         event.preventDefault();
         ctrl.state.onShow(event);

data/vendor/assets/stylesheets/vhx-quartz.select.css

@@ -33,16 +33,10 @@
   min-height: 150px; }
 .c-select--container.has-search .c-select--options {
   margin-top: 80px; }
-.c-select--container.caret--left .c-select--caret {
-  left: 22px; }
-.c-select--container.caret--center .c-select--caret {
-  left: 50%; }
-.c-select--container.caret--right .c-select--caret {
-  right: 22px; }
 
 .c-select--dropdown {
   position: absolute;
-  max-height: 282px;
+  max-height: 323px;
   top: 55px;
   left: 0;
   z-index: 2147483600;
@@ -50,27 +44,71 @@
   .c-select--dropdown.is-open {
     display: block; }
 
-.c-select--caret {
+.c-select--dropdown:after, .c-select--dropdown:before {
   border: solid transparent;
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #D7DDE1;
-  border-width: 10px;
-  margin-right: -11px;
-  bottom: 100%;
-  right: 22px;
+  content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none; }
-  .c-select--caret:before {
-    position: absolute;
-    bottom: -10px;
-    right: -9px;
-    content: ' ';
-    display: block;
-    border: solid transparent;
-    border-bottom-color: #ffffff;
-    border-width: 9px; }
+.c-select--dropdown:after {
+  border-color: rgba(255, 255, 255, 0);
+  border-width: 10px;
+  z-index: 0; }
+.c-select--dropdown:before {
+  border: solid transparent;
+  border-width: 9px;
+  z-index: 1; }
+
+.caret--bottom-center .c-select--dropdown:after, .caret--bottom-center .c-select--dropdown:before {
+  top: 100%;
+  left: 50%; }
+
+.caret--bottom-left .c-select--dropdown:after, .caret--bottom-left .c-select--dropdown:before {
+  top: 100%;
+  left: 22px; }
+
+.caret--bottom-right .c-select--dropdown:after, .caret--bottom-right .c-select--dropdown:before {
+  top: 100%;
+  right: 22px; }
+.caret--bottom-right .c-select--dropdown:before {
+  right: 23px; }
+
+.caret--bottom-right .c-select--dropdown:after,
+.caret--bottom-left .c-select--dropdown:after,
+.caret--bottom-center .c-select--dropdown:after {
+  border-top-color: #D7DDE1;
+  margin-left: -11px; }
+.caret--bottom-right .c-select--dropdown:before,
+.caret--bottom-left .c-select--dropdown:before,
+.caret--bottom-center .c-select--dropdown:before {
+  border-top-color: #ffffff;
+  margin-left: -10px; }
+
+.caret--top-center .c-select--dropdown:after, .caret--top-center .c-select--dropdown:before {
+  bottom: 100%;
+  left: 50%; }
+
+.caret--top-left .c-select--dropdown:after, .caret--top-left .c-select--dropdown:before {
+  bottom: 100%;
+  left: 22px; }
+
+.caret--top-right .c-select--dropdown:after, .caret--top-right .c-select--dropdown:before {
+  bottom: 100%;
+  right: 22px; }
+.caret--top-right .c-select--dropdown:before {
+  right: 23px; }
+
+.caret--top-right .c-select--dropdown:after,
+.caret--top-left .c-select--dropdown:after,
+.caret--top-center .c-select--dropdown:after {
+  border-bottom-color: #D7DDE1;
+  margin-left: -11px; }
+.caret--top-right .c-select--dropdown:before,
+.caret--top-left .c-select--dropdown:before,
+.caret--top-center .c-select--dropdown:before {
+  border-bottom-color: #ffffff;
+  margin-left: -10px; }
 
 .c-select--input-container {
   z-index: 2;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vhx-quartz
 version: !ruby/object:Gem::Version
-  version: 0.10.2
+  version: 0.10.3
 platform: ruby
 authors:
 - Scott Robertson, Courtney Burton, Steven Bone, David Gonzalez
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-09-17 00:00:00.000000000 Z
+date: 2016-09-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties