Close on click (#9)

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+# 3.2.0 (Sep 12, 2018)
+
+### Added
+- Prop to tell context menu not to close automatically on click ([issue #8](https://github.com/rawilk/vue-context/issues/8))
+
 ## 3.1.1 (June 23, 2018)
 
 ### Updated

README.md

@@ -148,6 +148,7 @@ new Vue({
 
 | Property | 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.
 
 ## Credits

src/vue-context.vue

@@ -4,7 +4,7 @@
 	     :style="style"
 	     tabindex="-1"
 	     @blur="close"
-         @click="close"
+	     @click="onClick"
 	     @contextmenu.capture.prevent
 	>
 		<slot :data="data"></slot>
@@ -14,6 +14,21 @@
 <script>
 	export default {
 		props: {
+			/**
+			 * Close the menu on click.
+			 *
+			 * @type {boolean}
+			 */
+			closeOnClick: {
+				type: Boolean,
+				default: true
+			},
+
+			/**
+			 * Close the menu automatically on window scroll.
+			 *
+			 * @type {boolean}
+			 */
 			closeOnScroll: {
 				type: Boolean,
 				default: true
@@ -72,6 +87,15 @@
 				this.show = false;
 			},
 
+			/**
+			 * Close the menu if `closeOnClick` is set to true.
+			 */
+			onClick () {
+				if (this.closeOnClick) {
+					this.close();
+				}
+			},
+
 			/**
 			 * Open the context menu.
 			 *

test/index.html

@@ -10,7 +10,7 @@
                 Right click on me
             </p>
 
-            <vue-context ref="menu" :close-on-scroll="close">
+            <vue-context ref="menu" :close-on-scroll="close" :close-on-click="false">
                 <ul slot-scope="child">
                     <li @click="onClick(child.data)">Option 1 {{ child.data && child.data.foo }}</li>
                     <li>Option 2</li>