first version with outside directive

README.md

@@ -0,0 +1,56 @@
+# Vue Directives Library
+
+This library is a beta and has only one directive at this moment.
+
+## Directives
+
+- <b>Outside</b> - Check for events outside an element.
+
+## Install (with npm)
+```
+npm install vue-directive-library
+```
+
+# How to use
+
+## Outside
+
+Observe events outside of an element. For example a mouse click. Just import the outside directive into your component.
+
+```
+import { outside } from "vue-directives-library/lib/outside";
+
+export default {
+    ...
+    directives: {
+        outside
+    },
+    methods: {
+        doSomething: function (){
+            alert('You clicked the div!');
+        }
+    },
+    ...
+}
+```
+
+Now you can use the directive with your elements. The following example shows a div. If you click outside the div, the
+method 'doSomething' will be done.
+
+```
+<template>
+    <div>
+        <div v-outside:click="{ handler: 'doSomething' }">CLICK HERE</div>
+    </div>
+</template>
+```
+
+You can also exclude elements from the directive. That means if you click on these elements outside the element with the
+directive on it, nothing happens.
+
+```
+<div v-outside:click="{ exclude: ['mega', '#super', '.top'], handler: 'doSomething' }">CLICK HERE</div>
+```
+
+Now all elements with 'mega' as vue reference (ref), 'super' as element id or with class 'top' have no affect and dont do
+the method 'doSomething'.

lib/outside.js

@@ -0,0 +1,64 @@
+export const outside = {
+
+    bind(el, binding, vnode) {
+        el.outsideEvent = function (event) {
+
+            const {exclude, handler} = binding.value;
+            let bClickOnExcluded = false;
+
+            // Check for excluded elements
+            if (exclude) {
+                exclude.forEach(excludedEl => {
+
+                    if (!bClickOnExcluded) {
+
+                        // Get the type for excluded element (ref, class or id)
+                        let excludedElType = 'ref';
+
+                        if(excludedEl.substring(0, 1)==='.'){
+                            excludedElType = 'class';
+                        }
+
+                        if(excludedEl.substring(0, 1)==='#'){
+                            excludedElType = 'id';
+                        }
+
+                        // Check if excluded "ref" is clicked
+                        if(excludedElType==='ref'){
+                            const excludedRefs = vnode.context.$refs[excludedEl];
+                            bClickOnExcluded = excludedRefs.contains(event.target);
+                        }
+
+                        // Check if excluded "class" is clicked
+                        if(excludedElType==='class'){
+                            let sClass = excludedEl.substring(1);
+
+                            if(event.target.classList.contains(sClass)){
+                                bClickOnExcluded = true;
+                            }
+                        }
+
+                        // Check if excluded "id" is clicked
+                        if(excludedElType==='id'){
+                            let sId = excludedEl.substring(1);
+
+                            if(event.target.id === sId){
+                                bClickOnExcluded = true;
+                            }
+                        }
+                    }
+                })
+            }
+
+            if (bClickOnExcluded === false) {
+                if (!el.contains(event.target) && el !== event.target) {
+                    vnode.context[handler](event)
+                }
+            }
+
+        };
+
+        document.body.addEventListener(binding.arg, el.outsideEvent);
+    }
+
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "vue-directives-library",
+  "version": "1.0.0",
+  "description": "Extend your Vue application with directives.",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Pixelairport/vue-directives-library.git"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "directives",
+    "library",
+    "pixelairport",
+    "directive",
+    "click-outside",
+    "outside"
+  ],
+  "author": "Norman Braun",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Pixelairport/vue-directives-library/issues"
+  },
+  "homepage": "https://github.com/Pixelairport/vue-directives-library#readme"
+}