refactor: Makes var names more specific, changing element to elRef

Author: microcipcip

src/components/useClickAway/stories/useClickAway.md

@@ -6,15 +6,15 @@ Vue function that triggers a callback when the user clicks outside of the target
 
 ```typescript
 useClickAway(
-  element: Ref<null | Element>,
+  elRef: Ref<null | Element>,
   onClickAway: (e: Event) => void,
   events?: string[]
 ): void;
 ```
 
 ### Parameters
 
-- `element: string` the element to check for click away events
+- `elRef: string` the element to check for click away events
 - `onClickAway: string` the callback to run when triggering a click away
 - `events: string` list of events to listen to, defaults to `['mousedown', 'touchstart']`
 

src/components/useClickAway/useClickAway.ts

@@ -3,12 +3,12 @@ import { onMounted, onUnmounted, Ref } from '../../api'
 const defaultEvents = ['mousedown', 'touchstart']
 
 export function useClickAway(
-  element: Ref<null | Element>,
+  elRef: Ref<null | Element>,
   onClickAway: (e: Event) => void,
   events = defaultEvents
 ) {
   const handler = (e: Event) => {
-    if (element.value && !element.value.contains(e.target as Node)) {
+    if (elRef.value && !elRef.value.contains(e.target as Node)) {
       onClickAway(e)
     }
   }

src/components/useHover/stories/useHover.md

@@ -5,12 +5,12 @@ Vue function that tracks mouse hover state of a given element.
 ## Reference
 
 ```typescript
-useHover(element: Ref<null | Element>): Ref<boolean>
+useHover(elRef: Ref<null | Element>): Ref<boolean>
 ```
 
 ### Parameters
 
-- `element: Ref<null | Element>` the element used for tracking the mouse hover state
+- `elRef: Ref<null | Element>` the element used for tracking the mouse hover state
 
 ### Returns
 

src/components/useHover/useHover.spec.ts

@@ -2,7 +2,6 @@ import { mount } from '../../helpers/test'
 import { ref } from '../../api'
 import { useHover } from '../../vue-use-kit'
 
-const elementContainer: any = { ref: { value: null } }
 const testComponent = () => ({
   template: `
     <div id="isHovered" v-if="isHovered"></div>

src/components/useHover/useHover.ts

@@ -1,6 +1,6 @@
 import { ref, onMounted, onUnmounted, Ref } from '../../api'
 
-export function useHover(element: Ref<null | Element>) {
+export function useHover(elRef: Ref<null | Element>) {
   const isHovered = ref(false)
 
   const mouseEnterHandler = () => {
@@ -12,15 +12,15 @@ export function useHover(element: Ref<null | Element>) {
   }
 
   onMounted(() => {
-    if (!element.value) return
-    element.value.addEventListener('mouseenter', mouseEnterHandler)
-    element.value.addEventListener('mouseleave', mouseLeaveHandler)
+    if (!elRef.value) return
+    elRef.value.addEventListener('mouseenter', mouseEnterHandler)
+    elRef.value.addEventListener('mouseleave', mouseLeaveHandler)
   })
 
   onUnmounted(() => {
-    if (!element.value) return
-    element.value.removeEventListener('mouseenter', mouseEnterHandler)
-    element.value.removeEventListener('mouseleave', mouseLeaveHandler)
+    if (!elRef.value) return
+    elRef.value.removeEventListener('mouseenter', mouseEnterHandler)
+    elRef.value.removeEventListener('mouseleave', mouseLeaveHandler)
   })
 
   return isHovered

src/components/useMouseElement/stories/useMouseElement.md

@@ -6,7 +6,7 @@ and optionally tracks the mouse position relative to a given element.
 ## Reference
 
 ```typescript
-useMouseElement(element: Ref<null | Element>): {
+useMouseElement(elRef: Ref<null | Element>): {
     docX: Ref<number>;
     docY: Ref<number>;
     elX: Ref<number>;
@@ -20,7 +20,7 @@ useMouseElement(element: Ref<null | Element>): {
 
 ### Parameters
 
-- `element: Ref<null | Element>` used for getting the `x` and `y` mouse position relative to the position of the given element
+- `elRef: Ref<null | Element>` used for getting the `x` and `y` mouse position relative to the position of the given element
 
 ### Returns
 

src/components/useMouseElement/useMouseElement.ts

@@ -1,6 +1,6 @@
 import { ref, onMounted, onUnmounted, Ref } from '../../api'
 
-export function useMouseElement(element: Ref<null | Element>) {
+export function useMouseElement(elRef: Ref<null | Element>) {
   const docX = ref(0)
   const docY = ref(0)
   const elX = ref(0)
@@ -11,10 +11,10 @@ export function useMouseElement(element: Ref<null | Element>) {
   const elInfoH = ref(0)
 
   const mouseMoveHandler = (e: MouseEvent) => {
-    if (!element.value) return
+    if (!elRef.value) return
     docX.value = e.pageX
     docY.value = e.pageY
-    const { left, top, height, width } = element.value.getBoundingClientRect()
+    const { left, top, height, width } = elRef.value.getBoundingClientRect()
     elInfoX.value = left + window.pageXOffset
     elInfoY.value = top + window.pageYOffset
     elInfoW.value = width