Add divider option

Author: johndatserakis

README.md

@@ -95,11 +95,12 @@ Note - make sure to use `@click.prevent.stop` (or `@contextmenu.prevent.stop` fo
 
 | prop    | type  | description | required |
 |---------|-------|--------------------------------|---|
-| elementId | String | Unique String that acts as the id of your menu. | Yes |
-| options | Array | Array of menu options to show. Component will use the `name` parameter as the label. | Yes |
-| options.name | Array | Label for the option. | Yes |
-| options.class | String | A custom class that will be applied to the option. | No |
-| ref | String | Unique String that allows you to show the menu on command. | Yes |
+| elementId     | String | Unique String that acts as the id of your menu.                                                                               | Yes |
+| options       | Array  | Array of menu options to show. Component will use the `name` parameter as the label.                                          | Yes |
+| options.name  | Array  | Label for the option.                                                                                                         | Yes |
+| options.class | String | A custom class that will be applied to the option.                                                                            | No |
+| options.type  | String | Only one possible value at the moment - `divider`. Pass this to set the object as a divider.                                  | No |
+| ref           | String | Unique String that allows you to show the menu on command.                                                                    | Yes |
 
 ### Methods
 
@@ -115,7 +116,7 @@ Note - make sure to use `@click.prevent.stop` (or `@contextmenu.prevent.stop` fo
 
 ### SASS Structure
 
-```sass
+```scss
 .vue-simple-context-menu {
   &--active {
   }

example/App.vue

@@ -163,6 +163,9 @@ export default {
           name: 'Duplicate',
           slug: 'duplicate'
         },
+        {
+          type: 'divider'
+        },
         {
           name: 'Edit',
           slug: 'edit'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-simple-context-menu",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use.",
   "author": "John Datserakis <johndatserakis@gmail.com>",
   "license": "MIT",

src/vue-simple-context-menu.vue

@@ -10,7 +10,7 @@
         :key="index"
         @click.stop="optionClicked(option)"
         class="vue-simple-context-menu__item"
-        :class="option.class"
+        :class="[option.class, (option.type === 'divider' ? 'vue-simple-context-menu__divider' : '')]"
       >
         {{option.name}}
       </li>
@@ -146,6 +146,14 @@ $black: #333;
     }
   }
 
+  &__divider {
+    height: 10px;
+    background-color: $grey;
+    padding: 4px 0;
+    background-clip: content-box;
+    pointer-events: none;
+  }
+
   // Have to use the element so we can make use of `first-of-type` and
   // `last-of-type`
   li {