From 422d4a752932598b95ccf0f6f635c32b911b0a98 Mon Sep 17 00:00:00 2001
From: romanslonov <destabiliseus@gmail.com>
Date: Fri, 5 Apr 2019 12:55:50 +0800
Subject: [PATCH] Refactored directives, added them to docs

---
 docs/.vuepress/config.js                      |  8 ++++
 docs/directives/autofocus.md                  | 19 ++++++++
 docs/directives/clickoutside.md               | 43 +++++++++++++++++++
 src/directives/{ => autofocus}/autofocus.js   |  0
 src/directives/autofocus/index.js             |  8 ++++
 .../{ => clickoutside}/clickoutside.js        |  0
 src/directives/clickoutside/index.js          |  8 ++++
 src/directives/index.js                       |  2 +
 src/entry.js                                  |  8 ++++
 9 files changed, 96 insertions(+)
 create mode 100644 docs/directives/autofocus.md
 create mode 100644 docs/directives/clickoutside.md
 rename src/directives/{ => autofocus}/autofocus.js (100%)
 create mode 100644 src/directives/autofocus/index.js
 rename src/directives/{ => clickoutside}/clickoutside.js (100%)
 create mode 100644 src/directives/clickoutside/index.js
 create mode 100644 src/directives/index.js

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 4204205..44c4d33 100755
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -43,6 +43,14 @@ module.exports = {
           'components/textbox',
           'components/toggle',
         ]
+      },
+      {
+        title: 'Directives',
+        collapsable: false,
+        children: [
+          'directives/autofocus',
+          'directives/clickoutside'
+        ],
       }
     ]
   },
diff --git a/docs/directives/autofocus.md b/docs/directives/autofocus.md
new file mode 100644
index 0000000..e2ca4ba
--- /dev/null
+++ b/docs/directives/autofocus.md
@@ -0,0 +1,19 @@
+# Autofocus <badge text="stable" />
+
+The `v-autofocus` directive do auto focus when document is ready.
+
+## Example
+<div class="p-3 border rounded-2 my-3 flex">
+  <input v-autofocus="true" placeholder="Auto focusable input" />
+</div>
+
+
+```html
+<input v-autofocus="true" placeholder="Auto focusable input" />
+```
+
+## Arguments
+Name     | type       | Description
+-------- | -----------| -----
+main     | Boolean    | Whether auto focus is enabled or not
+
diff --git a/docs/directives/clickoutside.md b/docs/directives/clickoutside.md
new file mode 100644
index 0000000..70f99d4
--- /dev/null
+++ b/docs/directives/clickoutside.md
@@ -0,0 +1,43 @@
+# Clickoutside <badge text="stable" />
+
+The `v-clickoutside` directive allows to run callback on click out of element.
+
+## Example
+<div class="p-3 border rounded-2 my-3 flex">
+  <v-button v-clickoutside="handleClickoutside" appearance="primary">Click me or miss</v-button>
+</div>
+
+
+```html
+<v-button
+  appearance="primary"
+  v-clickoutside="handleClickoutside"
+>
+  Click me or miss
+</v-button>
+```
+
+```javascript
+export default {
+  methods: {
+    handleClickoutside() {
+      alert('You clicked outside the button!');
+    },
+  },
+};
+```
+
+<script>
+export default {
+  methods: {
+    handleClickoutside() {
+      alert('You clicked outside the button!');
+    },
+  },
+};
+</script>
+
+## Arguments
+Name     | type       | Description
+-------- | -----------| -----
+main     | Function   | Callback that will be executed on clickoutside
diff --git a/src/directives/autofocus.js b/src/directives/autofocus/autofocus.js
similarity index 100%
rename from src/directives/autofocus.js
rename to src/directives/autofocus/autofocus.js
diff --git a/src/directives/autofocus/index.js b/src/directives/autofocus/index.js
new file mode 100644
index 0000000..498df6a
--- /dev/null
+++ b/src/directives/autofocus/index.js
@@ -0,0 +1,8 @@
+import Autofocus from './autofocus';
+
+// eslint-disable-next-line func-names
+Autofocus.install = function (Vue) {
+  Vue.directive('Autofocus', Autofocus);
+};
+
+export default Autofocus;
diff --git a/src/directives/clickoutside.js b/src/directives/clickoutside/clickoutside.js
similarity index 100%
rename from src/directives/clickoutside.js
rename to src/directives/clickoutside/clickoutside.js
diff --git a/src/directives/clickoutside/index.js b/src/directives/clickoutside/index.js
new file mode 100644
index 0000000..c24d5c5
--- /dev/null
+++ b/src/directives/clickoutside/index.js
@@ -0,0 +1,8 @@
+import Clickoutside from './clickoutside';
+
+// eslint-disable-next-line func-names
+Clickoutside.install = function (Vue) {
+  Vue.directive('Clickoutside', Clickoutside);
+};
+
+export default Clickoutside;
diff --git a/src/directives/index.js b/src/directives/index.js
new file mode 100644
index 0000000..0c67c49
--- /dev/null
+++ b/src/directives/index.js
@@ -0,0 +1,2 @@
+export { default as Autofocus } from './autofocus';
+export { default as Clickoutside } from './clickoutside';
diff --git a/src/entry.js b/src/entry.js
index f719276..4e9c2b4 100755
--- a/src/entry.js
+++ b/src/entry.js
@@ -1,5 +1,6 @@
 // Import vue components
 import * as components from './components';
+import * as directives from './directives';
 
 // install function executed by Vue.use()
 function install(Vue) {
@@ -8,6 +9,9 @@ function install(Vue) {
   Object.keys(components).forEach((component) => {
     Vue.component(component, components[component]);
   });
+  Object.keys(directives).forEach((directive) => {
+    Vue.directive(directive, directives[directive]);
+  });
 }
 
 // Create module definition for Vue.use()
@@ -33,3 +37,7 @@ export default plugin;
 // To allow individual component use, export components
 // each can be registered via Vue.component()
 export * from './components';
+
+// To allow individual directive use, export directives
+// each can be registered via Vue.directive()
+export * from './directives';