From 057a359f28b6b52b150078b0f4b387fc204dec97 Mon Sep 17 00:00:00 2001 From: pikax Date: Sun, 20 Sep 2020 09:00:37 +0100 Subject: [PATCH 1/6] feat: add `useMouseDistanceFromElement` --- packages/vue-composable/src/dom/index.ts | 1 + .../src/dom/useMouseDistanceFromElement.ts | 40 +++++++++++++++++++ packages/vue-composable/src/index.ts | 1 + 3 files changed, 42 insertions(+) create mode 100644 packages/vue-composable/src/dom/index.ts create mode 100644 packages/vue-composable/src/dom/useMouseDistanceFromElement.ts diff --git a/packages/vue-composable/src/dom/index.ts b/packages/vue-composable/src/dom/index.ts new file mode 100644 index 000000000..b70e27a65 --- /dev/null +++ b/packages/vue-composable/src/dom/index.ts @@ -0,0 +1 @@ +export * from "./useMouseDistanceFromElement"; diff --git a/packages/vue-composable/src/dom/useMouseDistanceFromElement.ts b/packages/vue-composable/src/dom/useMouseDistanceFromElement.ts new file mode 100644 index 000000000..8d0a30f41 --- /dev/null +++ b/packages/vue-composable/src/dom/useMouseDistanceFromElement.ts @@ -0,0 +1,40 @@ +import { ComputedRef, computed } from "../api"; +import { RemoveEventFunction, useOnMouseMove } from "../event"; +import { isClient, NO_OP, RefTyped, unwrap } from "../utils"; + +export default function useMouseDistanceFromElement( + element: RefTyped +) { + let distance: ComputedRef | undefined = undefined; + let remove: RemoveEventFunction = NO_OP; + + if (isClient) { + const debounce = 10; + const { mouseX, mouseY, remove: removeMouseEvent } = useOnMouseMove( + element, + debounce + ); + + distance = computed(() => { + const elem = unwrap(element); + if (!elem) return 0; + + return Math.floor( + Math.sqrt( + Math.pow(mouseX.value - (elem.offsetLeft + elem.clientWidth / 2), 2) + + Math.pow(mouseY.value - (elem.offsetTop + elem.clientHeight / 2), 2) + ) + ); + }); + + remove = removeMouseEvent; + } else { + distance = computed(() => -1); + } + + return { + distance, + + remove, + }; +} diff --git a/packages/vue-composable/src/index.ts b/packages/vue-composable/src/index.ts index aa973e1de..a9d40553a 100644 --- a/packages/vue-composable/src/index.ts +++ b/packages/vue-composable/src/index.ts @@ -16,6 +16,7 @@ export * from "./meta"; export * from "./ssr"; export * from "./state"; export * from "./devtools"; +export * from "./dom"; export const VERSION = __VERSION__; // istanbul ignore next From 51fa56842d1196bdce2435f6a7f07754cecbd0dd Mon Sep 17 00:00:00 2001 From: pikax Date: Sun, 20 Sep 2020 09:20:31 +0100 Subject: [PATCH 2/6] chore: improvements --- .../vue-composable/src/dom/useMouseDistanceFromElement.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/vue-composable/src/dom/useMouseDistanceFromElement.ts b/packages/vue-composable/src/dom/useMouseDistanceFromElement.ts index 8d0a30f41..b98986d74 100644 --- a/packages/vue-composable/src/dom/useMouseDistanceFromElement.ts +++ b/packages/vue-composable/src/dom/useMouseDistanceFromElement.ts @@ -9,9 +9,10 @@ export default function useMouseDistanceFromElement( let remove: RemoveEventFunction = NO_OP; if (isClient) { - const debounce = 10; + // todo pass as option + const debounce = 0; const { mouseX, mouseY, remove: removeMouseEvent } = useOnMouseMove( - element, + window, debounce ); From 4fefb78686be4f3891aa6b2c422660a6d7d4ce18 Mon Sep 17 00:00:00 2001 From: pikax Date: Sun, 11 Oct 2020 08:31:55 +0100 Subject: [PATCH 3/6] chore: add tests --- .../dom/mouseDistanceFromElement.spec.ts | 145 ++++++++++++++++++ .../dom/mouseDistanceFromElement.ssr.spec.ts | 15 ++ packages/vue-composable/package.json | 2 +- packages/vue-composable/src/dom/index.ts | 2 +- .../src/dom/mouseDistanceFromElement.ts | 70 +++++++++ .../src/dom/useMouseDistanceFromElement.ts | 41 ----- 6 files changed, 232 insertions(+), 43 deletions(-) create mode 100644 packages/vue-composable/__tests__/dom/mouseDistanceFromElement.spec.ts create mode 100644 packages/vue-composable/__tests__/dom/mouseDistanceFromElement.ssr.spec.ts create mode 100644 packages/vue-composable/src/dom/mouseDistanceFromElement.ts delete mode 100644 packages/vue-composable/src/dom/useMouseDistanceFromElement.ts diff --git a/packages/vue-composable/__tests__/dom/mouseDistanceFromElement.spec.ts b/packages/vue-composable/__tests__/dom/mouseDistanceFromElement.spec.ts new file mode 100644 index 000000000..10ae39fb3 --- /dev/null +++ b/packages/vue-composable/__tests__/dom/mouseDistanceFromElement.spec.ts @@ -0,0 +1,145 @@ +jest.mock("../../src/event/onMouseMove"); + +import { ref, Ref } from "../../src/api"; +import { useMouseDistanceFromElement, useOnMouseMove } from "../../src"; +import { nextTick } from "../utils"; + +describe("useMouseDistanceFromElement", () => { + const useOnMouseMoveMock: jest.Mock = useOnMouseMove as any; + + const mouseXMock = ref(100); + const mouseYMock = ref(0); + const removeMock = jest.fn(); + + const mockElement = ref({ + offsetLeft: 100, + offsetTop: 100, + clientHeight: 10, + clientWidth: 10, + }); + + const element = (mockElement as unknown) as Ref; + + beforeEach(() => { + useOnMouseMoveMock.mockClear(); + useOnMouseMoveMock.mockReturnValue({ + mouseX: mouseXMock, + mouseY: mouseYMock, + remove: removeMock, + } as any); + + mockElement.value = { + offsetLeft: 100, + offsetTop: 100, + clientHeight: 10, + clientWidth: 10, + }; + }); + + it("should use useMouseEvent", () => { + const options = { test: 1 } as any; + const wait = 10; + useMouseDistanceFromElement(element, options, wait); + + expect(useOnMouseMoveMock).toHaveBeenCalledWith(window, options, wait); + }); + it("should calculate the distance", () => { + const { distance } = useMouseDistanceFromElement(element); + + expect(distance.value).toBe(105); + }); + + it("should return 0 if the element is null", () => { + expect(useMouseDistanceFromElement(ref(null)).distance.value).toBe(0); + expect(useMouseDistanceFromElement(null as any).distance.value).toBe(0); + }); + + it("should remove the event", () => { + const { remove } = useMouseDistanceFromElement(element); + + expect(removeMock).not.toHaveBeenCalled(); + remove(); + expect(removeMock).toHaveBeenCalled(); + }); + + describe("distance change", () => { + beforeEach(() => { + useOnMouseMoveMock.mockClear(); + useOnMouseMoveMock.mockReturnValue({ + mouseX: mouseXMock, + mouseY: mouseYMock, + remove: removeMock, + } as any); + + mockElement.value = { + offsetLeft: 100, + offsetTop: 100, + clientHeight: 10, + clientWidth: 10, + }; + }); + + test("mouseX", async () => { + mockElement.value.offsetTop = 0; + mouseYMock.value = 5; + mouseXMock.value = 0; + + const { distance } = useMouseDistanceFromElement(element); + + expect(distance.value).toBe(105); + + mouseXMock.value += 5; + + await nextTick(); + expect(distance.value).toBe(100); + }); + + test("mouseY", async () => { + mockElement.value.offsetLeft = 0; + mouseYMock.value = 0; + mouseXMock.value = 5; + + const { distance } = useMouseDistanceFromElement(element); + + expect(distance.value).toBe(105); + + mouseYMock.value += 5; + + await nextTick(); + expect(distance.value).toBe(100); + }); + + test("element position", async () => { + mockElement.value.offsetLeft = 0; + mouseYMock.value = 0; + mouseXMock.value = 5; + + const { distance } = useMouseDistanceFromElement(element); + + expect(distance.value).toBe(105); + + mockElement.value.offsetTop -= 5; + + await nextTick(); + expect(distance.value).toBe(100); + }); + + test("element", async () => { + mockElement.value.offsetLeft = 0; + mouseYMock.value = 0; + mouseXMock.value = 5; + + const { distance } = useMouseDistanceFromElement(element); + + expect(distance.value).toBe(105); + + mockElement.value = { + ...mockElement.value, + offsetTop: mockElement.value.offsetTop - 5, + }; + + await nextTick(); + expect(distance.value).toBe(100); + }); + }); +}); diff --git a/packages/vue-composable/__tests__/dom/mouseDistanceFromElement.ssr.spec.ts b/packages/vue-composable/__tests__/dom/mouseDistanceFromElement.ssr.spec.ts new file mode 100644 index 000000000..088857e01 --- /dev/null +++ b/packages/vue-composable/__tests__/dom/mouseDistanceFromElement.ssr.spec.ts @@ -0,0 +1,15 @@ +jest.mock("../../src/utils", () => ({ + //@ts-ignore + ...jest.requireActual("../../src/utils"), + isClient: false, +})); + +import { useMouseDistanceFromElement } from "../../src"; + +describe("useMouseDistanceFromElement ssr", () => { + it("should return -1 ", () => { + const { distance } = useMouseDistanceFromElement({} as any); + + expect(distance.value).toBe(-1); + }); +}); diff --git a/packages/vue-composable/package.json b/packages/vue-composable/package.json index 45bebd90c..9b9fb984d 100644 --- a/packages/vue-composable/package.json +++ b/packages/vue-composable/package.json @@ -56,4 +56,4 @@ "peerDependencies": { "@vue/runtime-core": "^3.0.0" } -} +} \ No newline at end of file diff --git a/packages/vue-composable/src/dom/index.ts b/packages/vue-composable/src/dom/index.ts index b70e27a65..ea1c7df14 100644 --- a/packages/vue-composable/src/dom/index.ts +++ b/packages/vue-composable/src/dom/index.ts @@ -1 +1 @@ -export * from "./useMouseDistanceFromElement"; +export * from "./mouseDistanceFromElement"; diff --git a/packages/vue-composable/src/dom/mouseDistanceFromElement.ts b/packages/vue-composable/src/dom/mouseDistanceFromElement.ts new file mode 100644 index 000000000..052d1d37a --- /dev/null +++ b/packages/vue-composable/src/dom/mouseDistanceFromElement.ts @@ -0,0 +1,70 @@ +import { ComputedRef, computed, Ref } from "../api"; +import { RemoveEventFunction, useOnMouseMove } from "../event"; +import { isClient, NO_OP, RefTyped, unwrap } from "../utils"; + +export interface MouseDistanceReturn { + distance: ComputedRef; + remove: RemoveEventFunction; +} + +export function useMouseDistanceFromElement( + el: RefTyped, + wait: number +): MouseDistanceReturn; + +export function useMouseDistanceFromElement( + el: Ref | Ref, + options?: boolean | AddEventListenerOptions, + wait?: number +): MouseDistanceReturn; + +export function useMouseDistanceFromElement( + el: Ref, + wait: number +): MouseDistanceReturn; + +export function useMouseDistanceFromElement( + el: RefTyped, + options?: boolean | AddEventListenerOptions, + wait?: number +): MouseDistanceReturn; + +export function useMouseDistanceFromElement( + el: any, + options?: number | boolean | AddEventListenerOptions, + wait?: number +): MouseDistanceReturn { + let distance: ComputedRef | undefined = undefined; + let remove: RemoveEventFunction = NO_OP; + + if (isClient) { + // @ts-ignore + const { mouseX, mouseY, remove: removeMouseEvent } = useOnMouseMove( + window, + options, + wait + ); + + distance = computed(() => { + const elem = unwrap(el); + if (!elem) return 0; + + return Math.floor( + Math.sqrt( + Math.pow(mouseX.value - (elem.offsetLeft + elem.clientWidth / 2), 2) + + Math.pow(mouseY.value - (elem.offsetTop + elem.clientHeight / 2), 2) + ) + ); + }); + + remove = removeMouseEvent; + } else { + distance = computed(() => -1); + } + + return { + distance, + + remove, + }; +} diff --git a/packages/vue-composable/src/dom/useMouseDistanceFromElement.ts b/packages/vue-composable/src/dom/useMouseDistanceFromElement.ts deleted file mode 100644 index b98986d74..000000000 --- a/packages/vue-composable/src/dom/useMouseDistanceFromElement.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { ComputedRef, computed } from "../api"; -import { RemoveEventFunction, useOnMouseMove } from "../event"; -import { isClient, NO_OP, RefTyped, unwrap } from "../utils"; - -export default function useMouseDistanceFromElement( - element: RefTyped -) { - let distance: ComputedRef | undefined = undefined; - let remove: RemoveEventFunction = NO_OP; - - if (isClient) { - // todo pass as option - const debounce = 0; - const { mouseX, mouseY, remove: removeMouseEvent } = useOnMouseMove( - window, - debounce - ); - - distance = computed(() => { - const elem = unwrap(element); - if (!elem) return 0; - - return Math.floor( - Math.sqrt( - Math.pow(mouseX.value - (elem.offsetLeft + elem.clientWidth / 2), 2) + - Math.pow(mouseY.value - (elem.offsetTop + elem.clientHeight / 2), 2) - ) - ); - }); - - remove = removeMouseEvent; - } else { - distance = computed(() => -1); - } - - return { - distance, - - remove, - }; -} From c5e70b7c1b8cee1dfb5ac2c670c3f17e8288ae1d Mon Sep 17 00:00:00 2001 From: pikax Date: Sun, 11 Oct 2020 09:06:18 +0100 Subject: [PATCH 4/6] docs: wip docs --- .../MouseDistanceFromElementExample.vue | 23 ++++ docs/.vuepress/config.js | 114 ++++++++++-------- docs/README.md | 8 +- docs/api/axios.api.md | 40 +++--- docs/api/vue-composable.api.md | 63 ++++++++-- .../dom/mouseDistanceFromElement.md | 55 +++++++++ packages/axios/package.json | 2 +- packages/vue-composable/README.md | 4 + packages/vue-composable/package.json | 5 +- readme.md | 4 + 10 files changed, 237 insertions(+), 81 deletions(-) create mode 100644 docs/.vuepress/components/MouseDistanceFromElementExample.vue create mode 100644 docs/composable/dom/mouseDistanceFromElement.md diff --git a/docs/.vuepress/components/MouseDistanceFromElementExample.vue b/docs/.vuepress/components/MouseDistanceFromElementExample.vue new file mode 100644 index 000000000..a9f077c39 --- /dev/null +++ b/docs/.vuepress/components/MouseDistanceFromElementExample.vue @@ -0,0 +1,23 @@ + + + diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 9cb835f07..ecd9ab143 100644 --- 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,9 +12,9 @@ module.exports = { "@vuepress/pwa", { serviceWorker: true, - updatePopup: true - } - ] + updatePopup: true, + }, + ], ], base: process.env.DOCS_BASE || "", head: [ @@ -22,20 +22,20 @@ module.exports = { ["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", @@ -43,8 +43,8 @@ module.exports = { rel: "icon", type: "image/png", sizes: "192x192", - href: "/img/android-icon-192x192.png" - } + href: "/img/android-icon-192x192.png", + }, ], [ "link", @@ -52,8 +52,8 @@ module.exports = { rel: "icon", type: "image/png", sizes: "32x32", - href: "/img/favicon-32x32.png" - } + href: "/img/favicon-32x32.png", + }, ], [ "link", @@ -61,16 +61,16 @@ module.exports = { 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,9 +92,21 @@ 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, @@ -102,8 +114,8 @@ module.exports = { children: [ ["composable/date/now", "now"], ["composable/date/dateNow", "dateNow"], - ["composable/date/performanceNow", "performanceNow"] - ] + ["composable/date/performanceNow", "performanceNow"], + ], }, { title: "Format", @@ -111,8 +123,8 @@ module.exports = { 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,8 +157,8 @@ module.exports = { ["composable/storage/webStorage", "WebStorage"], ["composable/storage/storage", "Storage"], ["composable/storage/localStorage", "localStorage"], - ["composable/storage/sessionStorage", "sessionStorage"] - ] + ["composable/storage/sessionStorage", "sessionStorage"], + ], }, { title: "Pagination", @@ -154,8 +166,8 @@ module.exports = { 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,8 +235,8 @@ module.exports = { children: [ ["composable/state/timeline", "Timeline"], ["composable/state/undo", "Undo"], - ["composable/state/valueSync", "ValueSync"] - ] + ["composable/state/valueSync", "ValueSync"], + ], }, { title: "External", @@ -232,10 +244,10 @@ module.exports = { collapsable: false, children: [ ["composable/external/axios", "axios"], - ["composable/external/makeAxios", "makeAxios"] - ] - } - ] + ["composable/external/makeAxios", "makeAxios"], + ], + }, + ], }, locales: { "/": { @@ -243,10 +255,10 @@ module.exports = { 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 index 79b7205c2..fbecccd19 100644 --- 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 }; - } + }, }; ``` diff --git a/docs/api/axios.api.md b/docs/api/axios.api.md index 36ee44aa7..13f0f7b39 100644 --- 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(client: AxiosInstance, throwException?: boolean): MakeAxiosReturn; +export function makeAxios( + client: AxiosInstance, + throwException?: boolean +): MakeAxiosReturn; // Warning: (ae-forgotten-export) The symbol "AxiosReturn" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export function useAxios(throwException?: boolean): AxiosReturn; +export function useAxios( + throwException?: boolean +): AxiosReturn; // @public (undocumented) -export function useAxios(url: string, config?: AxiosRequestConfig, throwException?: boolean): AxiosReturn; +export function useAxios( + url: string, + config?: AxiosRequestConfig, + throwException?: boolean +): AxiosReturn; // @public (undocumented) -export function useAxios(url: string, throwException?: boolean): AxiosReturn; +export function useAxios( + url: string, + throwException?: boolean +): AxiosReturn; // @public (undocumented) -export function useAxios(config?: AxiosRequestConfig, throwException?: boolean): AxiosReturn; - +export function useAxios( + config?: AxiosRequestConfig, + throwException?: boolean +): AxiosReturn; // (No @packageDocumentation comment for this package) - ``` diff --git a/docs/api/vue-composable.api.md b/docs/api/vue-composable.api.md index 9ec360b96..7ef210ac8 100644 --- a/docs/api/vue-composable.api.md +++ b/docs/api/vue-composable.api.md @@ -3,22 +3,21 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts -import { App } from "@vue/runtime-core"; import type { ComponentState } from "@vue/devtools-api"; -import { ComputedRef } from "@vue/runtime-core"; +import { ComputedRef } from "@vue/composition-api"; import { Context } from "vm"; import type { CustomInspectorNode } from "@vue/devtools-api"; import type { CustomInspectorOptions } from "@vue/devtools-api"; import type { CustomInspectorState } from "@vue/devtools-api"; -import { DeepReadonly } from "@vue/runtime-core"; import { DevtoolsPluginApi } from "@vue/devtools-api"; -import { InjectionKey } from "@vue/runtime-core"; +import { InjectionKey } from "@vue/composition-api"; import type { InspectedComponentData } from "@vue/devtools-api"; -import { Plugin as Plugin_2 } from "@vue/runtime-core"; -import { provide } from "@vue/runtime-core"; -import { Ref } from "@vue/runtime-core"; +import { PluginFunction } from "vue"; +import { provide } from "@vue/composition-api"; +import { Ref } from "@vue/composition-api"; import { TimelineEvent } from "@vue/devtools-api"; -import { UnwrapRef } from "@vue/runtime-core"; +import { UnwrapRef } from "@vue/composition-api"; +import { VueConstructor } from "vue"; // @public (undocumented) export interface ArrayPaginationResult> @@ -464,6 +463,8 @@ export function getCssVariableFor( // @public export function getDevtools(): DevtoolsPluginApi | undefined; +// Warning: (ae-forgotten-export) The symbol "Plugin" needs to be exported by the entry point index.d.ts +// // @public (undocumented) export const hydrationPlugin: Plugin_2; @@ -744,6 +745,14 @@ export const MAX_ARRAY_SIZE: number; // @public (undocumented) export function minMax(val: number, min: number, max: number): number; +// @public (undocumented) +export interface MouseDistanceReturn { + // (undocumented) + distance: ComputedRef; + // (undocumented) + remove: RemoveEventFunction; +} + // @public (undocumented) export interface MouseMoveResult { // (undocumented) @@ -1050,7 +1059,7 @@ export function setCssVariableFor( ): void; // @public -export function setDevtools(app: App, api: DevtoolsPluginApi): void; +export function setDevtools(app: VueConstructor, api: DevtoolsPluginApi): void; // @public export function setI18n< @@ -1362,7 +1371,11 @@ export function useDebounce( ): T; // @public (undocumented) -export const UseDevtoolsApp: (app: App, id?: string, label?: string) => void; +export const UseDevtoolsApp: ( + app: VueConstructor, + id?: string, + label?: string +) => void; // @public (undocumented) export function useDevtoolsComponentState( @@ -1746,6 +1759,32 @@ export function useMatchMedia( remove: () => void; }; +// @public (undocumented) +export function useMouseDistanceFromElement( + el: RefTyped, + wait: number +): MouseDistanceReturn; + +// @public (undocumented) +export function useMouseDistanceFromElement( + el: Ref | Ref, + options?: boolean | AddEventListenerOptions, + wait?: number +): MouseDistanceReturn; + +// @public (undocumented) +export function useMouseDistanceFromElement( + el: Ref, + wait: number +): MouseDistanceReturn; + +// @public (undocumented) +export function useMouseDistanceFromElement( + el: RefTyped, + options?: boolean | AddEventListenerOptions, + wait?: number +): MouseDistanceReturn; + // Warning: (ae-forgotten-export) The symbol "NetworkInformationReturn" needs to be exported by the entry point index.d.ts // // @public (undocumented) @@ -2115,6 +2154,8 @@ export function useStorage( sync?: boolean ): LocalStorageReturn; +// Warning: (ae-forgotten-export) The symbol "DeepReadonly" needs to be exported by the entry point index.d.ts +// // @public (undocumented) export function useTimeline( value: Ref, @@ -2202,7 +2243,7 @@ export const VUE_VERSION: "2" | "3"; // @public (undocumented) export const VueComposableDevtools: { install( - app: App, + app: VueConstructor, options?: { id: string; label: string; diff --git a/docs/composable/dom/mouseDistanceFromElement.md b/docs/composable/dom/mouseDistanceFromElement.md new file mode 100644 index 000000000..a9d11793d --- /dev/null +++ b/docs/composable/dom/mouseDistanceFromElement.md @@ -0,0 +1,55 @@ +# Mouse distance from Element + +> Distance in pixels from an element + +## Parameters + +```js +import { useMouseDistanceFromElement } from "vue-composable"; + +useMouseDistanceFromElement(element, options?, wait?); +``` + +| Parameters | Type | Required | Default | Description | +| ---------- | ----------------- | ------------------------ | ----------- | ---------------------- | +| element | `Ref | HTMLElement` | `true` | | Element | +| options | `boolean | AddEventListenerOptions` | `false` | `{passive: true}` | Listener options | +| wait | `Number` | `false` | `undefined` | Debounce event in `ms` | + +## State + +The `useMouseDistanceFromElement` function exposes the following reactive state: + +```js +import { useMouseDistanceFromElement } from "vue-composable"; + +const { distance } = useMouseDistanceFromElement(); +``` + +| State | Type | Description | +| -------- | ------------------ | -------------------------------------- | +| distance | `Computed` | Distance in pixels from Element center | + +## Methods + +The `useMouseDistanceFromElement` function exposes the following methods: + +```js +import { useMouseDistanceFromElement } from "vue-composable"; + +const { remove } = useMouseDistanceFromElement(); +``` + +| Signature | Description | +| --------- | ----------------------------------- | +| `remove` | Manually removes the event listener | + +## Example + + + +### Code + +```vue + +``` diff --git a/packages/axios/package.json b/packages/axios/package.json index 11f80f27c..56b7a3672 100644 --- a/packages/axios/package.json +++ b/packages/axios/package.json @@ -62,7 +62,7 @@ "typescript": "^4.0.3" }, "peerDependencies": { - "@vue/runtime-core": "^3.0.0", + "@vue/composition-api": "^1.0.0-beta.14", "axios": "^0.20.0" } } diff --git a/packages/vue-composable/README.md b/packages/vue-composable/README.md index 517b2d97f..20e196ff0 100644 --- a/packages/vue-composable/README.md +++ b/packages/vue-composable/README.md @@ -52,6 +52,10 @@ Check our [documentation](https://pikax.me/vue-composable/) - [Scroll](https://pikax.me/vue-composable/composable/event/onScroll) - Attach `scroll` listener to a DOM element - [onOutsidePress](https://pikax.me/vue-composable/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](https://pikax.me/vue-composable/composable/date/now) : Return reactive custom timer with specified refresh rate diff --git a/packages/vue-composable/package.json b/packages/vue-composable/package.json index 9b9fb984d..ad8c4ad0b 100644 --- a/packages/vue-composable/package.json +++ b/packages/vue-composable/package.json @@ -54,6 +54,7 @@ "vue": "^2.6.10" }, "peerDependencies": { - "@vue/runtime-core": "^3.0.0" + "@vue/composition-api": "^1.0.0-beta.14", + "vue": "^2.6.10" } -} \ No newline at end of file +} diff --git a/readme.md b/readme.md index 517b2d97f..20e196ff0 100644 --- a/readme.md +++ b/readme.md @@ -52,6 +52,10 @@ Check our [documentation](https://pikax.me/vue-composable/) - [Scroll](https://pikax.me/vue-composable/composable/event/onScroll) - Attach `scroll` listener to a DOM element - [onOutsidePress](https://pikax.me/vue-composable/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](https://pikax.me/vue-composable/composable/date/now) : Return reactive custom timer with specified refresh rate From 38bcfa0aa70393b1b247307ef3b2d48a23fb6137 Mon Sep 17 00:00:00 2001 From: pikax Date: Sun, 11 Oct 2020 09:25:26 +0100 Subject: [PATCH 5/6] chore: does it work? --- packages/vue-composable/src/dom/mouseDistanceFromElement.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/vue-composable/src/dom/mouseDistanceFromElement.ts b/packages/vue-composable/src/dom/mouseDistanceFromElement.ts index 052d1d37a..993deba84 100644 --- a/packages/vue-composable/src/dom/mouseDistanceFromElement.ts +++ b/packages/vue-composable/src/dom/mouseDistanceFromElement.ts @@ -39,7 +39,7 @@ export function useMouseDistanceFromElement( if (isClient) { // @ts-ignore - const { mouseX, mouseY, remove: removeMouseEvent } = useOnMouseMove( + const { pageX, pageY, remove: removeMouseEvent } = useOnMouseMove( window, options, wait @@ -51,8 +51,8 @@ export function useMouseDistanceFromElement( return Math.floor( Math.sqrt( - Math.pow(mouseX.value - (elem.offsetLeft + elem.clientWidth / 2), 2) + - Math.pow(mouseY.value - (elem.offsetTop + elem.clientHeight / 2), 2) + Math.pow(pageX.value - (elem.offsetLeft + elem.clientWidth / 2), 2) + + Math.pow(pageY.value - (elem.offsetTop + elem.clientHeight / 2), 2) ) ); }); From 0afdfe84304fd9f721318223254de5c7c85ee2f7 Mon Sep 17 00:00:00 2001 From: pikax Date: Sun, 11 Oct 2020 09:32:56 +0100 Subject: [PATCH 6/6] chore: fix tests --- .../dom/mouseDistanceFromElement.spec.ts | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/vue-composable/__tests__/dom/mouseDistanceFromElement.spec.ts b/packages/vue-composable/__tests__/dom/mouseDistanceFromElement.spec.ts index 10ae39fb3..b5af75e0d 100644 --- a/packages/vue-composable/__tests__/dom/mouseDistanceFromElement.spec.ts +++ b/packages/vue-composable/__tests__/dom/mouseDistanceFromElement.spec.ts @@ -7,8 +7,8 @@ import { nextTick } from "../utils"; describe("useMouseDistanceFromElement", () => { const useOnMouseMoveMock: jest.Mock = useOnMouseMove as any; - const mouseXMock = ref(100); - const mouseYMock = ref(0); + const pageXMock = ref(100); + const pageYMock = ref(0); const removeMock = jest.fn(); const mockElement = ref({ @@ -23,8 +23,8 @@ describe("useMouseDistanceFromElement", () => { beforeEach(() => { useOnMouseMoveMock.mockClear(); useOnMouseMoveMock.mockReturnValue({ - mouseX: mouseXMock, - mouseY: mouseYMock, + pageX: pageXMock, + pageY: pageYMock, remove: removeMock, } as any); @@ -66,8 +66,8 @@ describe("useMouseDistanceFromElement", () => { beforeEach(() => { useOnMouseMoveMock.mockClear(); useOnMouseMoveMock.mockReturnValue({ - mouseX: mouseXMock, - mouseY: mouseYMock, + pageX: pageXMock, + pageY: pageYMock, remove: removeMock, } as any); @@ -81,14 +81,14 @@ describe("useMouseDistanceFromElement", () => { test("mouseX", async () => { mockElement.value.offsetTop = 0; - mouseYMock.value = 5; - mouseXMock.value = 0; + pageYMock.value = 5; + pageXMock.value = 0; const { distance } = useMouseDistanceFromElement(element); expect(distance.value).toBe(105); - mouseXMock.value += 5; + pageXMock.value += 5; await nextTick(); expect(distance.value).toBe(100); @@ -96,14 +96,14 @@ describe("useMouseDistanceFromElement", () => { test("mouseY", async () => { mockElement.value.offsetLeft = 0; - mouseYMock.value = 0; - mouseXMock.value = 5; + pageYMock.value = 0; + pageXMock.value = 5; const { distance } = useMouseDistanceFromElement(element); expect(distance.value).toBe(105); - mouseYMock.value += 5; + pageYMock.value += 5; await nextTick(); expect(distance.value).toBe(100); @@ -111,8 +111,8 @@ describe("useMouseDistanceFromElement", () => { test("element position", async () => { mockElement.value.offsetLeft = 0; - mouseYMock.value = 0; - mouseXMock.value = 5; + pageYMock.value = 0; + pageXMock.value = 5; const { distance } = useMouseDistanceFromElement(element); @@ -126,8 +126,8 @@ describe("useMouseDistanceFromElement", () => { test("element", async () => { mockElement.value.offsetLeft = 0; - mouseYMock.value = 0; - mouseXMock.value = 5; + pageYMock.value = 0; + pageXMock.value = 5; const { distance } = useMouseDistanceFromElement(element);