Create hover.js

tmorehouse · web-flow · commit 9220ae9354eb · 2020-02-15T00:10:51.000-04:00
diff --git a/src/directives/hover/hover.js b/src/directives/hover/hover.js
@@ -0,0 +1,36 @@
+// v-b-hover directive
+import { isBrowser } from '../../utils/env'
+import { EVENT_OPTIONS_NO_CAPTURE, eventOn, eventOff } from '../../utils/events'
+import { isFunction } from '../../utils/inspect'
+
+// --- Constants ---
+
+const PROP = '__BV_hover_handler__'
+const MOUSEENTER = 'mouseenter'
+const MOUSELEAVE = 'mouseleave'
+
+// --- Directive bind/unbind/update handler ---
+
+const directive = (el, { value: callback }) {
+  if (isBrowser && isFunction(el[PROP] && el[PROP] !== callback) {
+    eventOff(el, MOUSEENTER, el[PROP], EVENT_OPTIONS_NO_CAPTURE)
+    eventOff(el, MOUSELEAVE, el[PROP], EVENT_OPTIONS_NO_CAPTURE)
+  }
+  if (isBrowser && isFunction(callback) && isBrowser) {
+    el[PROP] = evt => {
+      callback(evt.type === 'mouseenter')
+    }
+    eventOn(el, MOUSEENTER, el[PROP], EVENT_OPTIONS_NO_CAPTURE)
+    eventOn(el, MOUSELEAVE, el[PROP], EVENT_OPTIONS_NO_CAPTURE)
+  }
+}
+
+// VBHover directive
+
+export const VBHover = {
+  bind: directive,
+  componentUpdated: directive,
+  unbind(el) {
+    directive(el, { value: null }
+  }
+}
