wip: Provide a directive that allows to react when an element either …

…becomes hovered or unhovered. #971

core/client/directives/index.js

@@ -0,0 +1 @@
+export * from './v-hover.js'

core/client/directives/v-hover.js

@@ -0,0 +1,23 @@
+/*
+<div v-hover="{ enter: (e) => {}, leave: (e) => {} }"></div>
+*/
+
+export const vHover = {
+
+  mounted (el, binding) {
+    el.__vHoverEnter__ = binding.value.enter || (() => {})
+    el.__vHoverLeave__ = binding.value.leave || (() => {})
+
+    // Add Event Listeners
+    el.addEventListener('mouseover', el.__vHoverEnter__)
+    el.addEventListener('mouseleave', el.__vHoverLeave__)
+  },
+
+  beforeUnmount (el, binding) {
+    // Remove Event Listeners
+    el.removeEventListener('mouseover', el.__vHoverEnter__)
+    el.removeEventListener('mouseleave', el.__vHoverLeave__)
+    delete el.__vHoverEnter__
+    delete el.__vHoverLeave__
+  }
+}

core/client/index.js

@@ -17,6 +17,7 @@ import { Exporter } from './exporter.js'
 import { Reader } from './reader.js'
 import services from './services/index.js'
 import * as utils from './utils/index.js'
+import * as directives from './directives/index.js'
 import * as composables from './composables/index.js'
 import * as mixins from './mixins/index.js'
 import * as hooks from './hooks/index.js'
@@ -40,6 +41,7 @@ export { Exporter }
 export { Reader }
 export { services }
 export { utils }
+export { directives }
 export { composables }
 export { mixins }
 export { hooks }