Merge branch 'master' into patch-2

Author: simplesmiler

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [2.2.0] - 2018-04-08
+
+### Changed
+- Refer to `event.path` instead of `element.contains(event.target)` for more reliable containment check (fixes #23), kudos to @jonobr1
+
 ## [2.1.0] - 2016-11-24
 
 ### Changed
@@ -17,7 +22,7 @@ Reworked for Vue 2.0
 
 ## [1.1.5] - 2016-09-30
 
-Skipped 1.1.4 due to publising mistake
+Skipped 1.1.4 due to publishing mistake
 
 ### Changed
 - Exposed version

README.md

@@ -3,13 +3,14 @@
 > Reusable clickaway directive for reusable [Vue.js](https://github.com/vuejs/vue) components
 
 [![npm version](https://img.shields.io/npm/v/vue-clickaway.svg)](https://www.npmjs.com/package/vue-clickaway)
+[![CDNJS](https://img.shields.io/cdnjs/v/vue-clickaway.svg)](https://cdnjs.com/libraries/vue-clickaway)
 
 ## Overview
 
 Sometimes you need to detect clicks **outside** of the element (to close a modal
 window or hide a dropdown select). There is no native event for that, and Vue.js
 does not cover you either. This is why `vue-clickaway` exists. Please check out
-the [demo](https://jsfiddle.net/simplesmiler/4w1cs8u3/) before reading further.
+the [demo](https://jsfiddle.net/simplesmiler/4w1cs8u3/150/) before reading further.
 
 ## Requirements
 
@@ -25,18 +26,10 @@ From npm:
 $ npm install vue-clickaway --save
 ```
 
-From CDN:
+From CDN (minified):
 ``` html
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-clickaway.js"></script>
-<!-- OR -->
-<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.1.0/dist/vue-clickaway.js"></script>
-```
-
-For minified version include one of these
-```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-clickaway.min.js"></script>
-<!-- OR -->
-<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.1.0/dist/vue-clickaway.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-clickaway.min.js"></script>
+<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.2.0/dist/vue-clickaway.min.js"></script>
 ```
 
 ## Usage
@@ -84,7 +77,14 @@ export default {
 1. Pay attention to the letter case. `onClickaway` turns into `v-on-clickaway`,
    while `onClickAway` turns into `v-on-click-away`.
 2. Prior to `vue@^2.0`, directive were able to accept statements.
-   This is no longer the case.
+   This is no longer the case. If you need to pass arguments, just do
+   `v-on-clickaway="() => away(arg1)"`.
+3. There is a common issue with dropdowns (and modals) inside an element with
+   `v-on-clickaway`. Some UI libraries chose to implement these UI elements
+   by attaching the DOM element directly to the body. This makes clicks on
+   a dropped element trigger away handler. To combat that, you have to add
+   an extra check in the handler, for where the event originated from.
+   See #9 for an example.
 
 ## License
 

dist/vue-clickaway.common.js

@@ -3,7 +3,7 @@
 var Vue = require('vue');
 Vue = 'default' in Vue ? Vue['default'] : Vue;
 
-var version = '2.1.0';
+var version = '2.2.0';
 
 var compatible = (/^2\./).test(Vue.version);
 if (!compatible) {
@@ -44,9 +44,11 @@ function bind(el, binding) {
   }, 0);
 
   el[HANDLER] = function(ev) {
-    // @NOTE: IE 5.0+
-    // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-    if (initialMacrotaskEnded && !el.contains(ev.target)) {
+    // @NOTE: this test used to be `el.containts`, but `ev.path` is better,
+    //        because it tests whether the element was there at the time of
+    //        the click, not whether it is there now, that the event has arrived
+    //        to the top.
+    if (initialMacrotaskEnded && ev.path.indexOf(el) < 0) {
       return callback(ev);
     }
   };

dist/vue-clickaway.js

@@ -2,7 +2,7 @@
 
   Vue = 'default' in Vue ? Vue['default'] : Vue;
 
-  var version = '2.1.0';
+  var version = '2.2.0';
 
   var compatible = (/^2\./).test(Vue.version);
   if (!compatible) {
@@ -43,9 +43,11 @@
     }, 0);
 
     el[HANDLER] = function(ev) {
-      // @NOTE: IE 5.0+
-      // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-      if (initialMacrotaskEnded && !el.contains(ev.target)) {
+      // @NOTE: this test used to be `el.containts`, but `ev.path` is better,
+      //        because it tests whether the element was there at the time of
+      //        the click, not whether it is there now, that the event has arrived
+      //        to the top.
+      if (initialMacrotaskEnded && ev.path.indexOf(el) < 0) {
         return callback(ev);
       }
     };

dist/vue-clickaway.min.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 
-export var version = '2.1.0';
+export var version = '2.2.0';
 
 var compatible = (/^2\./).test(Vue.version);
 if (!compatible) {
@@ -41,9 +41,11 @@ function bind(el, binding) {
   }, 0);
 
   el[HANDLER] = function(ev) {
-    // @NOTE: IE 5.0+
-    // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-    if (initialMacrotaskEnded && !el.contains(ev.target)) {
+    // @NOTE: this test used to be `el.containts`, but `ev.path` is better,
+    //        because it tests whether the element was there at the time of
+    //        the click, not whether it is there now, that the event has arrived
+    //        to the top.
+    if (initialMacrotaskEnded && ev.path.indexOf(el) < 0) {
       return callback(ev);
     }
   };