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

@@ -1,179 +1,203 @@
 <template>
-    <div class="v-context"
-         v-show="show"
-         :style="style"
-         tabindex="-1"
-         @blur="close"
-         @click="close"
-         @contextmenu.capture.prevent
-    >
-        <slot :data="data"></slot>
-    </div>
+	<div class="v-context"
+	     v-show="show"
+	     :style="style"
+	     tabindex="-1"
+	     @blur="close"
+	     @click="onClick"
+	     @contextmenu.capture.prevent
+	>
+		<slot :data="data"></slot>
+	</div>
 </template>
 
 <script>
-    export default {
-        props: {
-            closeOnScroll: {
-                type: Boolean,
-                default: true
-            }
-        },
+	export default {
+		props: {
+			/**
+			 * Close the menu on click.
+			 *
+			 * @type {boolean}
+			 */
+			closeOnClick: {
+				type: Boolean,
+				default: true
+			},
 
-        computed: {
-            /**
-             * Generate the CSS styles for positioning the context menu.
-             *
-             * @returns {object|null}
-             */
-            style () {
-                return this.show
-                    ? { top: `${this.top}px`, left: `${this.left}px` }
-                    : null;
-            },
-        },
+			/**
+			 * Close the menu automatically on window scroll.
+			 *
+			 * @type {boolean}
+			 */
+			closeOnScroll: {
+				type: Boolean,
+				default: true
+			}
+		},
 
-        data () {
-            return {
-                top: null,
-                left: null,
-                show: false,
-                data: null
-            };
-        },
+		computed: {
+			/**
+			 * Generate the CSS styles for positioning the context menu.
+			 *
+			 * @returns {object|null}
+			 */
+			style () {
+				return this.show
+					? { top: `${this.top}px`, left: `${this.left}px` }
+					: null;
+			},
+		},
 
-        mounted () {
-            if (this.closeOnScroll) {
-                this.addScrollEventListener();
-            }
-        },
+		data () {
+			return {
+				top: null,
+				left: null,
+				show: false,
+				data: null
+			};
+		},
 
-        beforeDestroy () {
-            if (this.closeOnScroll) {
-                this.removeScrollEventListener();
-            }
-        },
+		mounted () {
+			if (this.closeOnScroll) {
+				this.addScrollEventListener();
+			}
+		},
 
-        methods: {
-            /**
-             * Add scroll event listener to close context menu.
-             */
-            addScrollEventListener () {
-                window.addEventListener('scroll', this.close);
-            },
+		beforeDestroy () {
+			if (this.closeOnScroll) {
+				this.removeScrollEventListener();
+			}
+		},
 
-            /**
-             * Close the context menu.
-             */
-            close () {
-                this.top = null;
-                this.left = null;
-                this.data = null;
-                this.show = false;
-            },
+		methods: {
+			/**
+			 * Add scroll event listener to close context menu.
+			 */
+			addScrollEventListener () {
+				window.addEventListener('scroll', this.close);
+			},
 
-            /**
-             * Open the context menu.
-             *
-             * @param {MouseEvent} event
-             * @param {array|object|string} data User provided data for the menu
-             */
-            open (event, data) {
-                this.data = data;
-                this.show = true;
+			/**
+			 * Close the context menu.
+			 */
+			close () {
+				this.top = null;
+				this.left = null;
+				this.data = null;
+				this.show = false;
+			},
 
-                this.$nextTick(() => {
-                    this.positionMenu(event.clientY, event.clientX);
-                    this.$el.focus();
-                });
-            },
+			/**
+			 * Close the menu if `closeOnClick` is set to true.
+			 */
+			onClick () {
+				if (this.closeOnClick) {
+					this.close();
+				}
+			},
 
-            /**
-             * Set the context menu top and left positions.
-             *
-             * @param {number} top
-             * @param {number} left
-             */
-            positionMenu (top, left) {
-                const largestHeight = window.innerHeight - this.$el.offsetHeight - 25;
-                const largestWidth = window.innerWidth - this.$el.offsetWidth - 25;
+			/**
+			 * Open the context menu.
+			 *
+			 * @param {MouseEvent} event
+			 * @param {array|object|string} data User provided data for the menu
+			 */
+			open (event, data) {
+				this.data = data;
+				this.show = true;
 
-                if (top > largestHeight) {
-                    top = largestHeight;
-                }
+				this.$nextTick(() => {
+					this.positionMenu(event.clientY, event.clientX);
+					this.$el.focus();
+				});
+			},
 
-                if (left > largestWidth) {
-                    left = largestWidth;
-                }
+			/**
+			 * Set the context menu top and left positions.
+			 *
+			 * @param {number} top
+			 * @param {number} left
+			 */
+			positionMenu (top, left) {
+				const largestHeight = window.innerHeight - this.$el.offsetHeight - 25;
+				const largestWidth = window.innerWidth - this.$el.offsetWidth - 25;
 
-                this.top = top;
-                this.left = left;
-            },
+				if (top > largestHeight) {
+					top = largestHeight;
+				}
 
-            /**
-             * Remove the scroll event listener to close the context menu.
-             */
-            removeScrollEventListener () {
-                window.removeEventListener('scroll', this.close);
-            }
-        },
+				if (left > largestWidth) {
+					left = largestWidth;
+				}
 
-        watch: {
-            /**
-             * Add or remove the scroll event listener when the prop value changes.
-             *
-             * @param {boolean} value
-             * @param {boolean} oldValue
-             */
-            closeOnScroll (value, oldValue) {
-                if (value === oldValue) {
-                    return;
-                }
+				this.top = top;
+				this.left = left;
+			},
 
-                if (value) {
-                    this.addScrollEventListener();
-                } else {
-                    this.removeScrollEventListener();
-                }
-            }
-        }
-    };
+			/**
+			 * Remove the scroll event listener to close the context menu.
+			 */
+			removeScrollEventListener () {
+				window.removeEventListener('scroll', this.close);
+			}
+		},
+
+		watch: {
+			/**
+			 * Add or remove the scroll event listener when the prop value changes.
+			 *
+			 * @param {boolean} value
+			 * @param {boolean} oldValue
+			 */
+			closeOnScroll (value, oldValue) {
+				if (value === oldValue) {
+					return;
+				}
+
+				if (value) {
+					this.addScrollEventListener();
+				} else {
+					this.removeScrollEventListener();
+				}
+			}
+		}
+	};
 </script>
 
 <style lang="scss" scoped>
-    $blue600: #1e88e5;
-    $gray74: #bdbdbd;
-    $gray93: #ededed;
-    $gray98: #fafafa;
+	$blue600: #1e88e5;
+	$gray74: #bdbdbd;
+	$gray93: #ededed;
+	$gray98: #fafafa;
 
-    .v-context {
-        background: $gray98;
-        border: 1px solid $gray74;
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-        display: block;
-        margin: 0;
-        padding: 0;
-        position: fixed;
-        width: 250px;
-        z-index: 99999;
+	.v-context {
+		background: $gray98;
+		border: 1px solid $gray74;
+		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+		display: block;
+		margin: 0;
+		padding: 0;
+		position: fixed;
+		width: 250px;
+		z-index: 99999;
 
-        ul {
-            list-style: none;
-            padding: 10px 0;
-            margin: 0;
-            font-size: 12px;
-            font-weight: 600;
+		ul {
+			list-style: none;
+			padding: 10px 0;
+			margin: 0;
+			font-size: 12px;
+			font-weight: 600;
 
-            li {
-                margin: 0;
-                padding: 10px 35px;
-                cursor: pointer;
+			li {
+				margin: 0;
+				padding: 10px 35px;
+				cursor: pointer;
 
-                &:hover {
-                    background: $blue600;
-                    color: $gray98;
-                }
-            }
-        }
-    }
+				&:hover {
+					background: $blue600;
+					color: $gray98;
+				}
+			}
+		}
+	}
 </style>

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>