feat: Add default pointer style reset on directives

Namchee · Sep 6, 2020 · 2ab874f · 2ab874f
1 parent ae1844e
commit 2ab874f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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,25 +23,29 @@ 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);
   },
 
   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);