wip

Author: rawilk

README.md

@@ -12,7 +12,7 @@ overridden by your own styles.
 <br><br>
 The menu disappears when you expect by utilizing `vue-clickaway` and it also optionally disappears when clicked on.
 
-![Screenshot](screenshot.jpg)
+![Screenshot](docs/images/screenshot.jpg)
 
 ## Getting Started
 

docs/api/_index.md

@@ -0,0 +1,4 @@
+---
+title: Api
+sort: 3
+---

docs/api/api.md

@@ -0,0 +1,35 @@
+---
+title: Vue-Context
+sort: 1
+---
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| default | The default slot also serves as a scoped slot which receives any data passed to the menu |
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `closeOnClick` | Boolean | `true` | If set to `false`, context menu will not automatically close when clicked on |
+| `closeOnScroll` | Boolean | `true` | If set to `true`, context menu will automatically close on window scroll |
+| `lazy` | Boolean | `false` | If set to `true`, context menu will be rendered with a `v-if` instead of `v-show` |
+| `itemSelector` | Array, String | `['.v-context-item', '.v-context > li > a']` | The selector of the menu items the menu will use to look for to set accessibility attributes and for keyboard navigation. |
+| `role` | String | `menu` | Used for the `role` attribute on the context menu |
+| `subMenuOffset` | Number | `10` | Specify the offset in pixels of the submenus |
+| `tag` | String | `ul` | Used as the root element of the context menu |
+| `heightOffset` | Number | `25` | Specify distance from the menu to top/bottom of screen |
+| `widthOffset` | Number | `25` | Specify distance from menu to left of screen |
+| `useScrollHeight` | Boolean | `false` | Use the menu's scroll height instead of offset height to calculate positioning |
+| `useScrollWidth` | Boolean | `false` | Use the menu's scroll width instead of offset width to calculate positioning |
+
+## Events
+
+| Event | Arguments | Description |
+| --- | --- | --- |
+| `close` | none | Emits when the context menu is closed |
+| `open` | `event`, `data`, `top`, `left` | Emits when the menu is opened. the event, context menu data, top and left position are all sent through as parameters |
+
+[View source](https://github.com/rawilk/vue-context/blob/master/src/js/vue-context.vue)

docs/changelog.md

@@ -0,0 +1,6 @@
+---
+title: Changelog
+sort: 4
+---
+
+All notable changes for laravel-breadcrumbs are documented [on Github](https://github.com/rawilk/vue-context/blob/master/CHANGELOG.md).

docs/demos/_index.md

@@ -0,0 +1,4 @@
+---
+title: Demos
+sort: 2
+---

docs/demos/basic.md

@@ -0,0 +1,4 @@
+---
+title: Basic Usage
+sort: 1
+---

screenshot.jpg renamed to docs/images/screenshot.jpg

@@ -0,0 +1,75 @@
+---
+title: Quickstart
+sort: 2
+---
+
+## Installation
+
+vue-context can be installed via npm:
+
+```bash
+npm i vue-context
+```
+
+## Usage
+
+Import the component and use it in your app.
+
+```js
+import Vue from 'vue';
+import VueContext from 'vue-context';
+
+new Vue({
+    components: {
+        VueContext,
+    },
+
+    methods: {
+        onClick(text) {
+            alert(`You clicked ${text}!`);
+        }
+    }
+}).$mount('#app');
+```
+
+For styling, you will need to import the component's styles into your own stylesheets, or into your JavaScript.
+It's recommended to import into a stylesheet, however. If you are using sass, you can do the following:
+
+```css
+@import '~vue-context/src/sass/vue-context';
+
+// Or
+// @import '~vue-context/dist/css/vue-context.css';
+```
+
+Now add an element to the page that will trigger the context menu to appear, and also add the context menu to the page.
+
+```html
+<div id="app">
+
+    <div>
+        <p @contextmenu.prevent="$refs.menu.open">
+            Right click on me
+        </p>
+    </div>
+
+    <vue-context ref="menu">
+        <li>
+            <a @click.prevent="onClick($event.target.innerText)">Option 1</a>
+        </li>
+        <li>
+            <a @click.prevent="onClick($event.target.innerText)">Option 2</a>
+        </li>
+    </vue-context>
+
+</div>
+```
+
+`@contextmenu.prevent` is the event listener needed to open the context menu. It is using `.prevent` as a modifier
+to prevent the default behavior. In this example, the context menu has a ref of `menu`, which is what `$refs.menu` is
+referring to. When each item is clicked on, the text of the item is sent to the `onClick` method on the Vue instance,
+which is then shown via an alert.
+
+{.tip}
+> The context menu defaults to a `<ul>` tag. For best results, make each menu item an `<a>` tag wrapped inside
+> of an `<li>` tag.

docs/installation.md

@@ -0,0 +1,21 @@
+---
+title: Introduction
+sort: 1
+---
+
+## Introduction
+
+`vue-context` provides a simple yet flexible context menu for Vue. It is styled for the standard `<ul>` tag, but any menu
+template can be used. The menu is lightweight with its only dependency being `vue-clickaway`. The menu has some basic
+styles applied to it, but they can be easily overridden by your own styles.
+
+The menu disappears when you expect by utilizing `vue-clickaway` and it also optionally disappears when clicked on.
+
+![vue-context screenshot](../images/screenshot.jpg)
+
+By default, the menu is set up to use a `<ul>` tag for the menu, which is given the attribute `role="menu"` automatically.
+The component will also automatically apply the attribute `role="menuitem"` to each menu item when the context menu is opened.
+
+## License
+
+`vue-context` uses the MIT License (MIT). Please see the [license file](https://github.com/rawilk/vue-context/blob/master/LICENSE) for more information.

docs/introduction.md

@@ -0,0 +1,9 @@
+---
+title: Questions & Issues
+sort: 3
+---
+
+Find yourself stuck using the package? Found a bug? Do you have general questions or suggestions for improving the package?
+Feel free to [create an issue on Github](https://github.com/rawilk/vue-context/issues) and I'll try to address it as soon as possible.
+
+If you've found a bug regarding security please email [[email protected]](mailto:[email protected]) instead of using the issue tracker.

docs/questions-and-issues.md

@@ -0,0 +1,4 @@
+---
+title: Usage
+sort: 1
+---