Refactored directives, added them to docs

Author: romanslonov

docs/.vuepress/config.js

@@ -43,6 +43,14 @@ module.exports = {
           'components/textbox',
           'components/toggle',
         ]
+      },
+      {
+        title: 'Directives',
+        collapsable: false,
+        children: [
+          'directives/autofocus',
+          'directives/clickoutside'
+        ],
       }
     ]
   },

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
+

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

src/directives/autofocus.js renamed to src/directives/autofocus/autofocus.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;

src/directives/autofocus/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;

src/directives/clickoutside.js renamed to src/directives/clickoutside/clickoutside.js

@@ -0,0 +1,2 @@
+export { default as Autofocus } from './autofocus';
+export { default as Clickoutside } from './clickoutside';

src/directives/clickoutside/index.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';