diff --git a/README.md b/README.md index cbe057d..d24cc79 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ overridden by your own styles.

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 diff --git a/docs/api/_index.md b/docs/api/_index.md new file mode 100644 index 0000000..cafe067 --- /dev/null +++ b/docs/api/_index.md @@ -0,0 +1,4 @@ +--- +title: Api +sort: 3 +--- diff --git a/docs/api/api.md b/docs/api/api.md new file mode 100644 index 0000000..a2dbe21 --- /dev/null +++ b/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) diff --git a/docs/changelog.md b/docs/changelog.md new file mode 100644 index 0000000..007ce7c --- /dev/null +++ b/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). diff --git a/docs/demos/_index.md b/docs/demos/_index.md new file mode 100644 index 0000000..45a3a8f --- /dev/null +++ b/docs/demos/_index.md @@ -0,0 +1,4 @@ +--- +title: Demos +sort: 2 +--- diff --git a/docs/demos/basic.md b/docs/demos/basic.md new file mode 100644 index 0000000..1d20b12 --- /dev/null +++ b/docs/demos/basic.md @@ -0,0 +1,4 @@ +--- +title: Basic Usage +sort: 1 +--- diff --git a/screenshot.jpg b/docs/images/screenshot.jpg similarity index 100% rename from screenshot.jpg rename to docs/images/screenshot.jpg diff --git a/docs/installation.md b/docs/installation.md new file mode 100644 index 0000000..b56fed5 --- /dev/null +++ b/docs/installation.md @@ -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 +
+ +
+

+ Right click on me +

+
+ + +
  • + Option 1 +
    • +
  • + Option 2 +
    • +     + +
    +``` + +`@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 `