Merge pull request #28 from johndatserakis/jd-add-divider

Add divider support
johndatserakis · Sep 6, 2020 · adb3de6 · adb3de6
2 parents bf63a8f + a53a3a0
commit adb3de6
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 12 deletions.
diff --git a/README.md b/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 {
   }
@@ -124,6 +125,8 @@ Note - make sure to use `@click.prevent.stop` (or `@contextmenu.prevent.stop` fo
     &:hover {
     }
   }
+
+  &__divider {}
 }
 ```
 

diff --git a/dist/vue-simple-context-menu.css b/dist/vue-simple-context-menu.css
diff --git a/dist/vue-simple-context-menu.esm.js b/dist/vue-simple-context-menu.esm.js
@@ -197,7 +197,12 @@ var __vue_render__ = function() {
           {
             key: index,
             staticClass: "vue-simple-context-menu__item",
-            class: option.class,
+            class: [
+              option.class,
+              option.type === "divider"
+                ? "vue-simple-context-menu__divider"
+                : ""
+            ],
             on: {
               click: function($event) {
                 $event.stopPropagation();

diff --git a/dist/vue-simple-context-menu.min.js b/dist/vue-simple-context-menu.min.js
diff --git a/dist/vue-simple-context-menu.umd.js b/dist/vue-simple-context-menu.umd.js
@@ -203,7 +203,12 @@
             {
               key: index,
               staticClass: "vue-simple-context-menu__item",
-              class: option.class,
+              class: [
+                option.class,
+                option.type === "divider"
+                  ? "vue-simple-context-menu__divider"
+                  : ""
+              ],
               on: {
                 click: function($event) {
                   $event.stopPropagation();

diff --git a/docs/build.js b/docs/build.js
diff --git a/example/App.vue b/example/App.vue
@@ -163,6 +163,9 @@ export default {
           name: 'Duplicate',
           slug: 'duplicate'
         },
+        {
+          type: 'divider'
+        },
         {
           name: 'Edit',
           slug: 'edit'

diff --git a/package.json b/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 <[email protected]>",
   "license": "MIT",

diff --git a/src/vue-simple-context-menu.vue b/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 {