Added some docs

Author: Yev

deploy.sh

@@ -11,7 +11,7 @@ cd docs/.vuepress/dist
 
 git init
 git add -A
-git commit -m 'deploy docs'
+git commit -m 'Deplying docs'
 
 git push -f [email protected]:euvl/vue-js-modal.git master:gh-pages
 

docs/.vuepress/config.js

@@ -1,5 +1,20 @@
+const sidebar = require('./sidebar')
+
 module.exports = {
   base: '/vue-js-modal/',
   title: 'Vue.js Modal',
-  description: 'Simple, flexible, Vue.js modal plugin'
+  description: 'Simple, flexible, Vue.js modal plugin',
+  themeConfig: {
+    displayAllHeaders: false,
+
+    sidebar,
+    nav: [
+      {
+        text: 'Sponsorship',
+        link: 'https://github.com/sponsors/euvl'
+      },
+      { text: 'Github', link: 'https://github.com/euvl/vue-js-modal' },
+      { text: 'Examples', link: '/examples/' }
+    ]
+  }
 }

docs/.vuepress/sidebar.js

@@ -0,0 +1,7 @@
+module.exports = [
+  {
+    title: 'Guide',
+    collapsable: false,
+    children: ['/Installation', '/Usage', '/Properties']
+  }
+]

docs/Installation.md

@@ -0,0 +1,40 @@
+---
+sidebarDepth: 0
+---
+
+## Installation
+
+```bash
+npm install vue-js-modal --save
+```
+
+Import plugin in your main file:
+
+```js
+import VModal from 'vue-js-modal'
+
+Vue.use(VModal)
+```
+
+Or as a Nuxt.js plugin:
+
+```js
+import Vue from 'vue'
+import VModal from 'vue-js-modal/dist/ssr.nocss'
+
+// import from 'vue-js-modal/dist/styles.css
+
+Vue.use(VModal)
+
+export default function(_, inject) {
+  inject('modal', VModal)
+}
+```
+
+::: tip Extracted CSS
+The `/dist` directory contains a version of the build with extracted CSS files. This is useful for SSR but also can be used with the purely client-side implementation when you need more flexibility in controlling your stylesheets.
+
+* `ssr.index.js` - SSR build with inline CSS
+* `ssr.nocss.js` - SSR build without inline CSS
+* `styles.css` - File with required styles
+:::

docs/Properties.md

@@ -0,0 +1,5 @@
+---
+sidebarDepth: 0
+---
+
+### Properties

docs/README.md

@@ -1 +1 @@
-# This is readme
+# Guide

docs/Usage.md

@@ -0,0 +1,99 @@
+---
+sidebarDepth: 0
+---
+
+## Usage
+
+There are 2 types of modals, static and dynamic. **Static** are defined explicitly though the template and **dynamic** are generated based on the configuration passed into the "show modal" function.
+
+### Static modals
+
+Modals are defined by simply using the `<modal />` component. To control it's visibility - use `$modal.show` / `$modal.hide` functions, for example:
+
+```html
+<template>
+    <modal name="my-first-modal">
+        This is my first modal
+    </modal>
+</template>
+```
+```js{5,8}
+export default {
+    name: 'MyComponent',
+    methods: {
+        show () {
+            this.$modal.show('my-first-modal');
+        },
+        hide () {
+            this.$modal.hide('my-first-modal');
+        }
+    },
+    mount () {
+        this.show()
+    }
+} 
+```
+
+### Dynamic modals
+
+In order to instantiate modals at runtime (for lazy-loading or de-cluttering templates), it is possible to create modals dynamically.
+
+
+To show dynamic modal you can use the same `$modal.show` function with extended API: 
+
+```js
+this.$modal.show(
+    component_definition, 
+    component_properties, 
+    modal_properties,
+    modal_events
+)
+```
+
+* `component_definition` - either inline or imported Vue component definition
+* `component_properties` - any properties that are used within the `component_definition`
+* `modal_properties` -modal component properties (see Properties section)
+* `modal_events` - modal event handlers (see Events section)
+
+Examples:
+
+Using inline component definition:
+
+```js
+export default {
+    name: 'App',
+    mount () {
+        this.$modal.show(
+            {
+                template: `
+                    <div>
+                    <h1>This is created inline</h1>
+                    <p>{{ text }}</p>
+                    </div>
+                `,
+                props: ['text']
+            },
+            { text: 'This text is passed as a property' },
+            { height: 'auto' }, 
+            { 'before-close': (event) => {} }
+        )
+    }
+}
+```
+
+Using imported component definition:
+
+```js
+import MyComponent from './MyComponent.vue'
+
+export default {
+    name: 'App',
+    mount () {
+        this.$modal.show(
+            MyComponent, 
+            { text: 'This text is passed as a property' }, 
+            { draggable: true }
+        )
+    }
+}
+```