feat(vgl-components): handle event listeners

Author: Victor

src/vgl-ghost/vgl-ghost.vue

@@ -1,7 +1,8 @@
 <template>
 <span class="vgl-ghost-wrap"
   @mouseover="startAnimating"
-  @mouseleave="stopAnimating">
+  @mouseleave="stopAnimating"
+  v-on="$listeners">
   <span
     style="originalSpanStyle"
     class="vgl-ghost-original">{{text}}</span>

src/vgl-rollup/vgl-rollup.vue

@@ -1,7 +1,8 @@
 <template>
 <span :style="{height: spanHeight}" class="vgl-rollup-wrap"
   @mouseover="startAnimating"
-  @mouseleave="stopAnimating">
+  @mouseleave="stopAnimating"
+  v-on="$listeners">
   <span
     :style="internalOriginalSpanStyle"
     class="vgl-rollup-original">{{text}}</span>

src/vgl-rotate/vgl-rotate.vue

@@ -2,7 +2,8 @@
 <span class="vgl-rotate-wrap"
   :class="{'vgl-active': active}"
   @mouseover="startAnimating"
-  @mouseleave="stopAnimating">
+  @mouseleave="stopAnimating"
+  v-on="$listeners">
   <span
     :style="internalBoldSpanStyle"
     class="vgl-rotate-bold">{{text}}</span>

src/vgl-slidein/vgl-slidein.vue

@@ -1,7 +1,8 @@
 <template>
 <span :style="{width: spanWidth}" class="vgl-slidein-wrap"
   @mouseover="startAnimating"
-  @mouseleave="stopAnimating">
+  @mouseleave="stopAnimating"
+  v-on="$listeners">
   <span
     ref="mainText"
     :style="internalOriginalSpanStyle"

src/vgl-swing/vgl-swing.vue

@@ -2,7 +2,8 @@
 <span class="vgl-swing-wrap"
   :class="{'vgl-active': active}"
   @mouseover="startAnimating"
-  @mouseleave="stopAnimating">
+  @mouseleave="stopAnimating"
+  v-on="$listeners">
   <span
     :style="internalOriginalSpanStyle"
     class="vgl-swing-original">{{text}}</span>

src/vgl-wave/vgl-wave.vue

@@ -2,7 +2,8 @@
 <span
     class="vgl-wave-wrap"
     @mouseover="startAnimating"
-    @mouseleave="stopAnimating">
+    @mouseleave="stopAnimating"
+    v-on="$listeners">
   <span
     class="vgl-lettr"
     :class="{'vgl-active': activeIndex === idx}"