Release 2.0.0-rc.1

Author: simplesmiler

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.0.0-rc.1] - 2016-09-30
+
+Reworked for Vue 2.0
+
+### Breaking changes
+- `v-on-clickaway` used to be able to accept statements, like `v-on-clickaway="a = a + 1"` or `v-on-clickaway="doSomething(context)"`. This is no longer supported.
+
 ## [1.1.5] - 2016-09-30
 
 Skipped 1.1.4 due to publising mistake
@@ -64,3 +71,5 @@ Initial release
 [1.1.2]: https://github.com/simplesmiler/vue-clickaway/compare/1.1.1...1.1.2
 [1.1.3]: https://github.com/simplesmiler/vue-clickaway/compare/1.1.2...1.1.3
 [1.1.5]: https://github.com/simplesmiler/vue-clickaway/compare/1.1.3...1.1.5
+
+[2.0.0]: https://github.com/simplesmiler/vue-clickaway/compare/1.1.5...2.0.0

README.md

@@ -9,11 +9,13 @@
 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/bbbh5bt6/) before reading further.
+the [demo](https://jsfiddle.net/simplesmiler/4w1cs8u3/) before reading further.
 
 ## Requirements
 
-- vue: ^1.0.0
+- vue: ^2.0.0-rc.1
+
+If you need a version for Vue 1, try `[email protected]`.
 
 ## Install
 
@@ -26,9 +28,9 @@ $ npm install vue-clickaway --save
 From CDN:
 
 ``` html
-<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/1.1.5/dist/vue-clickaway.js"></script>
+<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.0.0-rc.1/dist/vue-clickaway.js"></script>
 <!-- OR -->
-<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/1.1.5/dist/vue-clickaway.min.js"></script>
+<script src="https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.0.0-rc.1/dist/vue-clickaway.min.js"></script>
 ```
 
 ## Usage
@@ -71,25 +73,12 @@ export default {
 };
 ```
 
-## Notes
-
-1. `require('vue-clickaway/mixin')` was the recommended syntax prior to `1.1.0`.
-   Although this syntax is still supported, it is recommended to use `import`
-   syntax for es6 and `require('vue-clickaway').mixin` for common-js.
-2. A version for `vue@^0.12.9` is not supported, but is availabale as
-   `[email protected]`.
-
 ## Caveats
 
 1. Pay attention to the letter case. `onClickaway` turns into `v-on-clickaway`,
    while `onClickAway` turns into `v-on-click-away`.
-2. Prior to `[email protected]` views were able to inherit assets from the parent views,
-   which made it possible to define the directive on the root view
-   and have it available across the whole view hierarchy.
-   Since `[email protected]` this is not possible. If you still want to define the directive
-   application-wide, you should `Vue.directive('on-clickaway', onClickaway);`
-   in your application entry point. But bear in mind that this introduces
-   implicit dependency for your components, making them less reusable.
+2. Prior to `vue@^2.0`, directive were able to accept statements.
+   This is no longer the case.
 
 ## License
 

dist/vue-clickaway.common.js

@@ -3,57 +3,57 @@
 var Vue = require('vue');
 Vue = 'default' in Vue ? Vue['default'] : Vue;
 
-var version = '1.1.5';
+var version = '2.0.0-rc.1';
 
-var compatible = (/^1\./).test(Vue.version);
+var compatible = (/^2\./).test(Vue.version);
 if (!compatible) {
-  Vue.util.warn('VueClickaway ' + version + ' only supports Vue 1.x, and does not support Vue ' + Vue.version);
+  Vue.util.warn('VueClickaway ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
 }
 
-var directive = {
 
-  acceptStatement: true,
-  priority: 700,
 
-  update: function(handler) {
-    if (typeof handler !== 'function') {
-      if (process.env.NODE_ENV !== 'production') {
-        Vue.util.warn(
-          this.name + '="' +
-          this.expression + '" expects a function value, ' +
-          'got ' + handler
-        );
-      }
-      return;
-    }
+// @SECTION: implementation
 
-    this.reset();
+var HANDLER = '_vue_clickaway_handler';
 
-    var el = this.el;
-    var scope = this._scope || this.vm;
+function bind(el, binding) {
+  unbind(el);
 
-    this.handler = function(ev) {
-      // @NOTE: IE 5.0+
-      // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-      if (!el.contains(ev.target)) {
-        scope.$event = ev;
-        var res = handler(ev);
-        scope.$event = null;
-        return res;
-      }
-    };
+  var callback = binding.value;
+  if (typeof callback !== 'function') {
+    if (process.env.NODE_ENV !== 'production') {
+      Vue.util.warn(
+        'v-' + binding.name + '="' +
+        binding.expression + '" expects a function value, ' +
+        'got ' + callback
+      );
+    }
+    return;
+  }
 
-    Vue.util.on(document.documentElement, 'click', this.handler);
-  },
+  el[HANDLER] = function(ev) {
+    // @NOTE: IE 5.0+
+    // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
+    if (!el.contains(ev.target)) {
+      return callback(ev);
+    }
+  };
 
-  reset: function() {
-    Vue.util.off(document.documentElement, 'click', this.handler);
-  },
+  document.documentElement.addEventListener('click', el[HANDLER], false);
+}
 
-  unbind: function() {
-    this.reset();
-  },
+function unbind(el) {
+  document.documentElement.removeEventListener('click', el[HANDLER], false);
+  delete el[HANDLER];
+}
 
+var directive = {
+  bind: bind,
+  update: function(el, binding) {
+    if (binding.value === binding.oldValue) return;
+    bind(el, binding);
+  },
+  unbind: unbind,
 };
 
 var mixin = {

dist/vue-clickaway.js

@@ -2,57 +2,57 @@
 
   Vue = 'default' in Vue ? Vue['default'] : Vue;
 
-  var version = '1.1.5';
+  var version = '2.0.0-rc.1';
 
-  var compatible = (/^1\./).test(Vue.version);
+  var compatible = (/^2\./).test(Vue.version);
   if (!compatible) {
-    Vue.util.warn('VueClickaway ' + version + ' only supports Vue 1.x, and does not support Vue ' + Vue.version);
+    Vue.util.warn('VueClickaway ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
   }
 
-  var directive = {
 
-    acceptStatement: true,
-    priority: 700,
-
-    update: function(handler) {
-      if (typeof handler !== 'function') {
-        if ('development' !== 'production') {
-          Vue.util.warn(
-            this.name + '="' +
-            this.expression + '" expects a function value, ' +
-            'got ' + handler
-          );
-        }
-        return;
-      }
 
-      this.reset();
+  // @SECTION: implementation
 
-      var el = this.el;
-      var scope = this._scope || this.vm;
+  var HANDLER = '_vue_clickaway_handler';
 
-      this.handler = function(ev) {
-        // @NOTE: IE 5.0+
-        // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-        if (!el.contains(ev.target)) {
-          scope.$event = ev;
-          var res = handler(ev);
-          scope.$event = null;
-          return res;
-        }
-      };
+  function bind(el, binding) {
+    unbind(el);
 
-      Vue.util.on(document.documentElement, 'click', this.handler);
-    },
+    var callback = binding.value;
+    if (typeof callback !== 'function') {
+      if ('development' !== 'production') {
+        Vue.util.warn(
+          'v-' + binding.name + '="' +
+          binding.expression + '" expects a function value, ' +
+          'got ' + callback
+        );
+      }
+      return;
+    }
+
+    el[HANDLER] = function(ev) {
+      // @NOTE: IE 5.0+
+      // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
+      if (!el.contains(ev.target)) {
+        return callback(ev);
+      }
+    };
 
-    reset: function() {
-      Vue.util.off(document.documentElement, 'click', this.handler);
-    },
+    document.documentElement.addEventListener('click', el[HANDLER], false);
+  }
 
-    unbind: function() {
-      this.reset();
-    },
+  function unbind(el) {
+    document.documentElement.removeEventListener('click', el[HANDLER], false);
+    delete el[HANDLER];
+  }
 
+  var directive = {
+    bind: bind,
+    update: function(el, binding) {
+      if (binding.value === binding.oldValue) return;
+      bind(el, binding);
+    },
+    unbind: unbind,
   };
 
   var mixin = {

dist/vue-clickaway.min.js

@@ -1,56 +1,56 @@
 import Vue from 'vue';
 
-export var version = '1.1.5';
+export var version = '2.0.0-rc.1';
 
-var compatible = (/^1\./).test(Vue.version);
+var compatible = (/^2\./).test(Vue.version);
 if (!compatible) {
-  Vue.util.warn('VueClickaway ' + version + ' only supports Vue 1.x, and does not support Vue ' + Vue.version);
+  Vue.util.warn('VueClickaway ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
 }
 
-export var directive = {
 
-  acceptStatement: true,
-  priority: 700,
-
-  update: function(handler) {
-    if (typeof handler !== 'function') {
-      if (process.env.NODE_ENV !== 'production') {
-        Vue.util.warn(
-          this.name + '="' +
-          this.expression + '" expects a function value, ' +
-          'got ' + handler
-        );
-      }
-      return;
-    }
 
-    this.reset();
+// @SECTION: implementation
 
-    var el = this.el;
-    var scope = this._scope || this.vm;
+var HANDLER = '_vue_clickaway_handler';
 
-    this.handler = function(ev) {
-      // @NOTE: IE 5.0+
-      // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
-      if (!el.contains(ev.target)) {
-        scope.$event = ev;
-        var res = handler(ev);
-        scope.$event = null;
-        return res;
-      }
-    };
+function bind(el, binding) {
+  unbind(el);
 
-    Vue.util.on(document.documentElement, 'click', this.handler);
-  },
+  var callback = binding.value;
+  if (typeof callback !== 'function') {
+    if (process.env.NODE_ENV !== 'production') {
+      Vue.util.warn(
+        'v-' + binding.name + '="' +
+        binding.expression + '" expects a function value, ' +
+        'got ' + callback
+      );
+    }
+    return;
+  }
+
+  el[HANDLER] = function(ev) {
+    // @NOTE: IE 5.0+
+    // @REFERENCE: https://developer.mozilla.org/en/docs/Web/API/Node/contains
+    if (!el.contains(ev.target)) {
+      return callback(ev);
+    }
+  };
 
-  reset: function() {
-    Vue.util.off(document.documentElement, 'click', this.handler);
-  },
+  document.documentElement.addEventListener('click', el[HANDLER], false);
+}
 
-  unbind: function() {
-    this.reset();
-  },
+function unbind(el) {
+  document.documentElement.removeEventListener('click', el[HANDLER], false);
+  delete el[HANDLER];
+}
 
+export var directive = {
+  bind: bind,
+  update: function(el, binding) {
+    if (binding.value === binding.oldValue) return;
+    bind(el, binding);
+  },
+  unbind: unbind,
 };
 
 export var mixin = {

index.js

@@ -1,7 +1,7 @@
 {
   "name": "vue-clickaway",
   "description": "Reusable clickaway directive for reusable Vue.js components",
-  "version": "1.1.5",
+  "version": "2.0.0-rc.1",
   "author": "Denis Karabaza <[email protected]>",
   "browserify": {
     "transform": [
@@ -33,7 +33,7 @@
   "license": "MIT",
   "main": "dist/vue-clickaway.common.js",
   "peerDependencies": {
-    "vue": "^1.0.0"
+    "vue": "^2.0.0-rc.1"
   },
   "repository": {
     "type": "git",