From 2ab874fe8973bd3ba6d767c7a04a13847ebb9765 Mon Sep 17 00:00:00 2001
From: Cristopher Namchee <cristophernamchee12@gmail.com>
Date: Sun, 6 Sep 2020 16:03:26 +0700
Subject: [PATCH] feat: Add default pointer style reset on directives

---
 package.json            |  4 ++++
 src/directives/hover.ts | 18 +++++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 0394d6b..82aed3b 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,10 @@
     ],
     "verbose": true
   },
+  "files": [
+    "src/**/*",
+    "dist/**/*"
+  ],
   "homepage": "https://github.com/Namchee/tetikus",
   "keywords": [
     "javascript",
diff --git a/src/directives/hover.ts b/src/directives/hover.ts
index 1720a5f..fb31bf1 100644
--- a/src/directives/hover.ts
+++ b/src/directives/hover.ts
@@ -3,7 +3,11 @@ import { HoverBehavior, TransformProps } from '@/common/types';
 
 export const hoverState: Ref<HoverBehavior | null> = ref(null);
 
-const updateHoverState = (props: TransformProps, vnode: VNode) => {
+const updateHoverState = (props: TransformProps = {}, vnode: VNode) => {
+  if (!props) {
+    return;
+  }
+
   const state: HoverBehavior = {
     transformProps: props,
     domElement: vnode.el as HTMLElement,
@@ -19,12 +23,14 @@ const clearHoverState = () => {
 export const TetikusHover = {
   mounted(
     el: HTMLElement,
-    binding: DirectiveBinding<TransformProps>,
+    { value: props }: DirectiveBinding<TransformProps>,
     vnode: VNode,
   ) {
+    el.style.cursor = 'none'; // favor tetikus beautiful cursor
+
     el.addEventListener(
       'mouseover',
-      () => updateHoverState(binding.value, vnode),
+      () => updateHoverState(props, vnode),
     );
 
     el.addEventListener('mouseleave', clearHoverState);
@@ -32,12 +38,14 @@ export const TetikusHover = {
 
   beforeUnmount(
     el: HTMLElement,
-    binding: DirectiveBinding<TransformProps>,
+    { value: props }: DirectiveBinding<TransformProps>,
     vnode: VNode,
   ) {
+    el.style.cursor = 'auto';
+
     el.removeEventListener(
       'mouseover',
-      () => updateHoverState(binding.value, vnode),
+      () => updateHoverState(props, vnode),
     );
 
     el.removeEventListener('mouseout', clearHoverState);