feat: add useMouseDistanceFromElement (#578)

* feat: add `useMouseDistanceFromElement` * chore: improvements * chore: add tests * docs: wip docs * chore: does it work? * chore: fix tests
pikax · Oct 11, 2020 · a09cb69 · a09cb69
1 parent bc5debc
commit a09cb69
Show file tree

Hide file tree

Showing 15 changed files with 468 additions and 80 deletions.
diff --git a/docs/.vuepress/components/MouseDistanceFromElementExample.vue b/docs/.vuepress/components/MouseDistanceFromElementExample.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    Mouse distance: <b>{{ distance }}px</b>
+
+    <div ref="el" style="height: 10px; width: 10px; background: red"></div>
+  </div>
+</template>
+
+<script>
+import { ref } from "@vue/composition-api";
+import { useMouseDistanceFromElement } from "vue-composable";
+export default {
+  setup() {
+    const el = ref(null);
+    const { distance } = useMouseDistanceFromElement(el);
+
+    return {
+      el,
+      distance,
+    };
+  },
+};
+</script>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -1,7 +1,7 @@
 module.exports = {
   define: {
     __VUE_2__: true,
-    "process.env.SSR": true
+    "process.env.SSR": true,
   },
   title: "vue-composable",
   description:
@@ -12,65 +12,65 @@ module.exports = {
       "@vuepress/pwa",
       {
         serviceWorker: true,
-        updatePopup: true
-      }
-    ]
+        updatePopup: true,
+      },
+    ],
   ],
   base: process.env.DOCS_BASE || "",
   head: [
     ["meta", { charset: "utf-8" }],
     ["meta", { name: "msapplication-TileColor", content: "#ffffff" }],
     [
       "meta",
-      { name: "msapplication-TileImage", content: "/img/ms-icon-144x144.png" }
+      { name: "msapplication-TileImage", content: "/img/ms-icon-144x144.png" },
     ],
     ["meta", { name: "theme-color", content: "#41b883" }],
     [
       "meta",
-      { name: "viewport", content: "width=device-width, initial-scale=1" }
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
     ],
     ["meta", { property: "og:image", content: "/img/favicon-32x32.png" }],
     [
       "link",
       {
         rel: "apple-touch-icon",
-        href: "/img/apple-touch-icon.png"
-      }
+        href: "/img/apple-touch-icon.png",
+      },
     ],
     [
       "link",
       {
         rel: "icon",
         type: "image/png",
         sizes: "192x192",
-        href: "/img/android-icon-192x192.png"
-      }
+        href: "/img/android-icon-192x192.png",
+      },
     ],
     [
       "link",
       {
         rel: "icon",
         type: "image/png",
         sizes: "32x32",
-        href: "/img/favicon-32x32.png"
-      }
+        href: "/img/favicon-32x32.png",
+      },
     ],
     [
       "link",
       {
         rel: "icon",
         type: "image/png",
         sizes: "16x16",
-        href: "/img/favicon-16x16.png"
-      }
-    ]
+        href: "/img/favicon-16x16.png",
+      },
+    ],
   ],
   locales: {
     "/": {
       lang: "en-US",
       title: "vue-composable",
-      description: "Vue composition-api composable components"
-    }
+      description: "Vue composition-api composable components",
+    },
   },
   themeConfig: {
     repo: "pikax/vue-composable",
@@ -92,27 +92,39 @@ module.exports = {
             ["composable/event/onMouseMove", "onMouseMove"],
             ["composable/event/onResize", "onResize"],
             ["composable/event/onScroll", "onScroll"],
-            ["composable/event/onOutsidePress", "onOutsidePress"]
-          ]
+            ["composable/event/onOutsidePress", "onOutsidePress"],
+          ],
+        },
+        {
+          title: "DOM",
+          collapsable: false,
+          sidebarDepth: 1,
+          children: [
+            [
+              "composable/dom/mouseDistanceFromElement",
+              "Mouse distance from Element",
+            ],
+          ],
         },
+
         {
           title: "Date",
           sidebarDepth: 1,
           collapsable: false,
           children: [
             ["composable/date/now", "now"],
             ["composable/date/dateNow", "dateNow"],
-            ["composable/date/performanceNow", "performanceNow"]
-          ]
+            ["composable/date/performanceNow", "performanceNow"],
+          ],
         },
         {
           title: "Format",
           sidebarDepth: 1,
           collapsable: false,
           children: [
             ["composable/format/format", "format"],
-            ["composable/format/path", "path"]
-          ]
+            ["composable/format/path", "path"],
+          ],
         },
 
         {
@@ -123,8 +135,8 @@ module.exports = {
             ["composable/breakpoint/matchMedia", "matchMedia"],
             ["composable/breakpoint/breakpoint", "breakpoint"],
             ["composable/breakpoint/breakpointChrome", "Chrome"],
-            ["composable/breakpoint/breakpointTailwindCSS", "TailwindCSS"]
-          ]
+            ["composable/breakpoint/breakpointTailwindCSS", "TailwindCSS"],
+          ],
         },
         {
           title: "Misc",
@@ -134,8 +146,8 @@ module.exports = {
             ["composable/misc/sharedRef", "SharedRef"],
             ["composable/misc/vmodel", "vModel"],
             ["composable/misc/injectFactory", "injectFactory"],
-            ["composable/misc/lockScroll", "lockScroll"]
-          ]
+            ["composable/misc/lockScroll", "lockScroll"],
+          ],
         },
         {
           title: "Storage",
@@ -145,17 +157,17 @@ module.exports = {
             ["composable/storage/webStorage", "WebStorage"],
             ["composable/storage/storage", "Storage"],
             ["composable/storage/localStorage", "localStorage"],
-            ["composable/storage/sessionStorage", "sessionStorage"]
-          ]
+            ["composable/storage/sessionStorage", "sessionStorage"],
+          ],
         },
         {
           title: "Pagination",
           collapsable: false,
           sidebarDepth: 1,
           children: [
             ["composable/pagination/pagination", "pagination"],
-            ["composable/pagination/arrayPagination", "arrayPagination"]
-          ]
+            ["composable/pagination/arrayPagination", "arrayPagination"],
+          ],
         },
         {
           title: "Promise",
@@ -165,8 +177,8 @@ module.exports = {
             ["composable/promise/promise", "promise"],
             ["composable/promise/promiseLazy", "Lazy Promise"],
             ["composable/promise/cancellablePromise", "cancellablePromise"],
-            ["composable/promise/retry", "retry"]
-          ]
+            ["composable/promise/retry", "retry"],
+          ],
         },
         {
           title: "Intl",
@@ -175,8 +187,8 @@ module.exports = {
           children: [
             ["composable/Intl/dateTimeFormat", "dateTimeFormat"],
             ["composable/Intl/numberFormat", "numberFormat"],
-            ["composable/Intl/currencyFormat", "currencyFormat"]
-          ]
+            ["composable/Intl/currencyFormat", "currencyFormat"],
+          ],
         },
         {
           title: "Web",
@@ -195,26 +207,26 @@ module.exports = {
             ["composable/web/cssVariables", "CSS variables"],
             ["composable/web/worker", "WebWorker API"],
             ["composable/web/workerFunction", "WebWorker Function"],
-            ["composable/web/share", "WebShare API"]
-          ]
+            ["composable/web/share", "WebShare API"],
+          ],
         },
         {
           title: "Validation",
           sidebarDepth: 1,
           collapsable: false,
-          children: [["composable/validation/validation", "Validation"]]
+          children: [["composable/validation/validation", "Validation"]],
         },
         {
           title: "i18n",
           sidebarDepth: 1,
           collapsable: false,
-          children: [["composable/i18n/i18n", "i18n"]]
+          children: [["composable/i18n/i18n", "i18n"]],
         },
         {
           title: "meta",
           sidebarDepth: 1,
           collapsable: false,
-          children: [["composable/meta/title", "Title"]]
+          children: [["composable/meta/title", "Title"]],
         },
         {
           title: "state",
@@ -223,30 +235,30 @@ module.exports = {
           children: [
             ["composable/state/timeline", "Timeline"],
             ["composable/state/undo", "Undo"],
-            ["composable/state/valueSync", "ValueSync"]
-          ]
+            ["composable/state/valueSync", "ValueSync"],
+          ],
         },
         {
           title: "External",
           sidebarDepth: 1,
           collapsable: false,
           children: [
             ["composable/external/axios", "axios"],
-            ["composable/external/makeAxios", "makeAxios"]
-          ]
-        }
-      ]
+            ["composable/external/makeAxios", "makeAxios"],
+          ],
+        },
+      ],
     },
     locales: {
       "/": {
         label: "English",
         selectText: "Languages",
         editLinkText: "Help us improve this page!",
         nav: [
-          { text: "Composable", link: "/composable/" }
+          { text: "Composable", link: "/composable/" },
           // { text: "Examples", link: "/examples/" }
-        ]
-      }
-    }
-  }
+        ],
+      },
+    },
+  },
 };
diff --git a/docs/README.md b/docs/README.md
@@ -53,6 +53,10 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
 - [Scroll](composable/event/onScroll) - Attach `scroll` listener to a DOM element
 - [onOutsidePress](composable/event/onOutsidePress) - Execute callback when click is outside of element
 
+### Dom
+
+- [Mouse distance from Element](https://pikax.me/vue-composable/composable/dom/mouseDistanceFromElement) - Distance in pixels from an element center
+
 ### Date
 
 - [useNow](composable/date/now) : Return reactive custom timer with specified refresh rate
@@ -172,12 +176,12 @@ export default {
     const { result, next, prev, currentPage, lastPage } = useArrayPagination(
       array,
       {
-        pageSize: 3
+        pageSize: 3,
       }
     );
 
     return { result, next, prev, currentPage, lastPage };
-  }
+  },
 };
 </script>
 ```

diff --git a/docs/api/axios.api.md b/docs/api/axios.api.md
@@ -3,34 +3,46 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-
-import { AxiosInstance } from 'axios';
-import { AxiosRequestConfig } from 'axios';
-import { AxiosResponse } from 'axios';
-import { ComputedRef } from '@vue/runtime-core';
-import { PromiseResultFactory } from 'vue-composable';
-import { Ref } from '@vue/runtime-core';
+import { AxiosInstance } from "axios";
+import { AxiosRequestConfig } from "axios";
+import { AxiosResponse } from "axios";
+import { ComputedRef } from "@vue/composition-api";
+import { PromiseResultFactory } from "vue-composable";
+import { Ref } from "@vue/composition-api";
 
 // Warning: (ae-forgotten-export) The symbol "MakeAxiosReturn" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export function makeAxios<T>(client: AxiosInstance, throwException?: boolean): MakeAxiosReturn<T>;
+export function makeAxios<T>(
+  client: AxiosInstance,
+  throwException?: boolean
+): MakeAxiosReturn<T>;
 
 // Warning: (ae-forgotten-export) The symbol "AxiosReturn" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export function useAxios<TData = any>(throwException?: boolean): AxiosReturn<TData>;
+export function useAxios<TData = any>(
+  throwException?: boolean
+): AxiosReturn<TData>;
 
 // @public (undocumented)
-export function useAxios<TData = any>(url: string, config?: AxiosRequestConfig, throwException?: boolean): AxiosReturn<TData>;
+export function useAxios<TData = any>(
+  url: string,
+  config?: AxiosRequestConfig,
+  throwException?: boolean
+): AxiosReturn<TData>;
 
 // @public (undocumented)
-export function useAxios<TData = any>(url: string, throwException?: boolean): AxiosReturn<TData>;
+export function useAxios<TData = any>(
+  url: string,
+  throwException?: boolean
+): AxiosReturn<TData>;
 
 // @public (undocumented)
-export function useAxios<TData = any>(config?: AxiosRequestConfig, throwException?: boolean): AxiosReturn<TData>;
-
+export function useAxios<TData = any>(
+  config?: AxiosRequestConfig,
+  throwException?: boolean
+): AxiosReturn<TData>;
 
 // (No @packageDocumentation comment for this package)
-
 ```