Merge pull request #72 from retejs/fix/vue2-context-menu

fix(context-menu): events on vue 2

Author: Ni55aN

src/presets/context-menu/components/Block.vue

@@ -12,6 +12,7 @@
   border-bottom: 1px solid $context-color-dark;
   background-color: $context-color;
   cursor: pointer;
+  box-sizing: border-box;
   width: 100%;
   position: relative;
 

src/presets/context-menu/components/Item.vue

@@ -1,23 +1,25 @@
 <template lang="pug">
-Block.item(
+Block.block(
   :class="{ hasSubitems: subitems }"
-  @click.stop="$emit('select', $event); $emit('hide')"
-  @wheel.stop=""
-  @pointerover="hide.cancel(); visibleSubitems = true"
-  @pointerleave="hide.call()"
-  @pointerdown.stop=""
   data-testid="context-menu-item"
 )
-  slot
-  .subitems(v-if="subitems && visibleSubitems")
-    Item(
-      v-for="item of subitems"
-      :key="item.key"
-      @select="item.handler($event)"
-      :delay="delay"
-      @hide="$emit('hide')"
-      :subitems="item.subitems"
-    ) {{ item.label }}
+  .content(
+    @click.stop="$emit('select', $event); $emit('hide')"
+    @wheel.stop=""
+    @pointerover="hide.cancel(); visibleSubitems = true"
+    @pointerleave="hide.call()"
+    @pointerdown.stop=""
+  )
+    slot
+    .subitems(v-if="subitems && visibleSubitems")
+      Item(
+        v-for="item of subitems"
+        :key="item.key"
+        @select="item.handler($event)"
+        :delay="delay"
+        @hide="$emit('hide')"
+        :subitems="item.subitems"
+      ) {{ item.label }}
 </template>
 
 <script>
@@ -47,6 +49,14 @@ export default {
 <style lang="scss" scoped>
 @import "../context-vars";
 
+.block {
+  padding: 0;
+}
+
+.content {
+  padding: 4px;
+}
+
 .hasSubitems {
   &:after {
     content: '►';

src/presets/context-menu/components/Menu.vue

@@ -7,12 +7,12 @@
 )
   Block(v-if="searchBar")
     Search(:text="filter" @change="filter = $event")
-  Item.item(
+  Item(
     v-for="item of getItems()"
     :key="item.key"
     @select="item.handler($event)"
     :delay="delay"
-    @hide="$emit('hide')"
+    @hide="onHide()"
     :subitems="item.subitems"
   )
     | {{ item.label }}