Merge pull request #11 from rawilk/CloseEvent

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+# 3.3.0 (Oct 15, 2018)
+
+## Added
+- Context menu now emits events when opened and closed ([issue #10](https://github.com/rawilk/vue-context/issues/10))
+
 # 3.2.0 (Sep 12, 2018)
 
 ### Added
@@ -47,4 +52,4 @@
 - Bottom border from context menu line items.
 
 ## 2.0.0 (Aug 17, 2017)
-- Initial release
+- Initial release

README.md

@@ -146,10 +146,17 @@ new Vue({
 
 ## Props
 
-| Property | Type | Default | Description
+| Property | Type | Default | Description |
-| -------- | ---- | ------- | -----------
+| --- | --- | --- | --- |
-| `closeOnClick` | Boolean | `true` | If set to false, context menu will not automatically close when clicked on.
+| `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.
+| `closeOnScroll` | Boolean | `true` | If set to true, context menu will automatically close on window scroll. |
+
+## Events
+
+| Event | Params | 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 as well. |
 
 ## Credits
 
@@ -159,4 +166,4 @@ vue-context is intended to provide a simple and lightweight context menu for Vue
 
 ## License
 
-The MIT License (MIT). Please see the [License file](https://github.com/rawilk/vue-context/blob/master/LICENSE) for more information.
+The MIT License (MIT). Please see the [License file](https://github.com/rawilk/vue-context/blob/master/LICENSE) for more information.

src/vue-context.vue

@@ -45,7 +45,7 @@
 				return this.show
 					? { top: `${this.top}px`, left: `${this.left}px` }
 					: null;
-			},
+			}
 		},
 
 		data () {
@@ -77,22 +77,28 @@
 				window.addEventListener('scroll', this.close);
 			},
 
-			/**
+            /**
-			 * Close the context menu.
+             * Close the context menu.
-			 */
+             *
-			close () {
+             * @param {boolean|Event} emit Used to prevent event being emitted twice from when menu is clicked and closed
-				this.top = null;
+             */
-				this.left = null;
+            close (emit = true) {
-				this.data = null;
+                this.top = null;
-				this.show = false;
+                this.left = null;
-			},
+                this.data = null;
+                this.show = false;
+
+                if (emit) {
+                    this.$emit('close');
+                }
+            },
 
 			/**
 			 * Close the menu if `closeOnClick` is set to true.
 			 */
 			onClick () {
 				if (this.closeOnClick) {
-					this.close();
+					this.close(false);
 				}
 			},
 
@@ -109,6 +115,8 @@
 				this.$nextTick(() => {
 					this.positionMenu(event.clientY, event.clientX);
 					this.$el.focus();
+
+                    this.$emit('open', event, this.data, this.top, this.left);
 				});
 			},
 
@@ -200,4 +208,4 @@
 			}
 		}
 	}
-</style>
+</style>

test/index.html

@@ -10,7 +10,10 @@
                 Right click on me
             </p>
 
-            <vue-context ref="menu" :close-on-scroll="close" :close-on-click="false">
+            <vue-context ref="menu" :close-on-scroll="close"
+                         @close="onClose"
+                         @open="onOpen"
+            >
                 <ul slot-scope="child">
                     <li @click="onClick(child.data)">Option 1 {{ child.data && child.data.foo }}</li>
                     <li>Option 2</li>
@@ -20,4 +23,4 @@
 
         <script src="js/dist/index.js"></script>
     </body>
-</html>
+</html>

test/js/src/index.js

@@ -12,7 +12,15 @@ new Vue({
 
     methods: {
         onClick (data) {
-            console.log(data);
+            // console.log(data);
         },
+
+        onClose () {
+            console.log('closing');
+        },
+
+        onOpen (event, data, top, left) {
+            console.log(data, top, left);
+        }
     },
-}).$mount('#app');
+}).$mount('#app');