Skip to content

Commit

Permalink
feat: Add vuepress Docs (#13)
Browse files Browse the repository at this point in the history 
* WIP: added vuepress for docs

* WIP: added fetch

* feat: improve events

* WIP: added docs for event

* WIP: added docs for pagination

* WIP: Finishing other missing docs

* WIP: comment unused `unwrap`

* feat: fix axios global import
  • Loading branch information
@pikax
pikax committed Nov 1, 2019
1 parent fe6d3aa commit 2648d97
Show file tree
Hide file tree
Showing 47 changed files with 7,517 additions and 332 deletions.
12 changes: 6 additions & 6 deletions __tests__/event/onMouseMove.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Vue, nextTick } from "../utils";
import { useMouseMove, MouseMoveResult } from "../../src/event/onMouseMove";
import { useOnMouseMove, MouseMoveResult } from "../../src/event/onMouseMove";
import { promisedTimeout } from "../../src/utils";
import { ref, Ref } from "@vue/composition-api";

Expand All @@ -18,7 +18,7 @@ describe("onMouseMove", () => {
const vm = new Vue({
template: "<div></div>",
setup() {
use = useMouseMove(element);
use = useOnMouseMove(element);
}
}).$mount();

Expand Down Expand Up @@ -50,7 +50,7 @@ describe("onMouseMove", () => {
const vm = new Vue({
template: "<div></div>",
setup() {
use = useMouseMove(element);
use = useOnMouseMove(element);
}
}).$mount();
expect(element.removeEventListener).not.toHaveBeenCalled();
Expand All @@ -75,7 +75,7 @@ describe("onMouseMove", () => {
const vm = new Vue({
template: "<div></div>",
setup() {
use = useMouseMove(element, wait);
use = useOnMouseMove(element, wait);
}
}).$mount();
expect(element.addEventListener).toHaveBeenCalled();
Expand Down Expand Up @@ -115,7 +115,7 @@ describe("onMouseMove", () => {
const vm = new Vue({
template: "<div></div>",
setup() {
use = useMouseMove(element, options);
use = useOnMouseMove(element, options);
}
}).$mount();
expect(element.value.addEventListener).toHaveBeenCalledWith(
Expand Down Expand Up @@ -143,7 +143,7 @@ describe("onMouseMove", () => {
const vm = new Vue({
template: "<div></div>",
setup() {
use = useMouseMove(element, options, wait);
use = useOnMouseMove(element, options, wait);
}
}).$mount();
expect(element.addEventListener).toHaveBeenCalledWith(
Expand Down
11 changes: 11 additions & 0 deletions __tests__/web/webSocket.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,17 @@ describe("WebSocket", () => {
expect(errored.value).toBe(true);
});

it("should close", async () => {
const { close, isClosed } = useWebSocket(FAKE_URL);
await server.connected;

// server.error()
close();
await server.closed;

expect(isClosed).toBeTruthy();
});

it("should warn if the rate of messaging is too high", async () => {
const messages = ["test", "test1", "test2"];
const received: string[] = [];
Expand Down
4 changes: 2 additions & 2 deletions dist/event/onMouseMove.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@ export interface MouseMoveResult {
mouseY: Ref<number>;
remove: RemoveEventFunction;
}
export declare function useMouseMove(el: RefElement, wait: number): MouseMoveResult;
export declare function useMouseMove(el: RefElement, options?: boolean | AddEventListenerOptions, wait?: number): MouseMoveResult;
export declare function useOnMouseMove(el: RefElement, wait: number): MouseMoveResult;
export declare function useOnMouseMove(el: RefElement, options?: boolean | AddEventListenerOptions, wait?: number): MouseMoveResult;
1 change: 0 additions & 1 deletion dist/utils.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Ref } from "@vue/composition-api";
export declare type RefTyped<T> = T | Ref<T>;
export declare type RefElement = RefTyped<Element>;
export declare function unwrap<T>(o: RefTyped<T>): T;
export declare function wrap<T>(o: RefTyped<T>): Ref<T>;
export declare function promisedTimeout(timeout: number): Promise<unknown>;
export declare function minMax(val: number, min: number, max: number): number;
64 changes: 34 additions & 30 deletions dist/vue-composable.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var compositionApi = require('@vue/composition-api');
var _axios = _interopDefault(require('axios'));
var axios = _interopDefault(require('axios'));

function useEvent(el, name, listener, options) {
const element = compositionApi.isRef(el) ? el.value : el;
const remove = () => element.removeEventListener(name, listener);
compositionApi.onMounted(() => element.addEventListener(name, listener, options));
compositionApi.onUnmounted(remove);
return remove;
}

function unwrap(o) {
return compositionApi.isRef(o) ? o.value : o;
}
// export function unwrap<T>(o: RefTyped<T>): T {
// return isRef(o) ? o.value : o;
// }
function wrap(o) {
return compositionApi.isRef(o) ? o : compositionApi.ref(o);
}
Expand All @@ -29,6 +21,14 @@ function minMax(val, min, max) {
return val;
}

function useEvent(el, name, listener, options) {
const element = wrap(el);
const remove = () => element.value.removeEventListener(name, listener);
compositionApi.onMounted(() => element.value.addEventListener(name, listener, options));
compositionApi.onUnmounted(remove);
return remove;
}

function usePagination(options) {
const _currentPage = wrap(options.currentPage);
const _pageSize = wrap(options.pageSize);
Expand Down Expand Up @@ -159,8 +159,7 @@ function debounce(func, waitMilliseconds = 50, options = {
};
}

function useMouseMove(el, options, wait) {
const element = unwrap(el);
function useOnMouseMove(el, options, wait) {
const mouseX = compositionApi.ref(0);
const mouseY = compositionApi.ref(0);
let handler = (ev) => {
Expand All @@ -172,7 +171,7 @@ function useMouseMove(el, options, wait) {
if (ms) {
handler = useDebounce(handler, wait);
}
const remove = useEvent(element, "mousemove", handler, eventOptions);
const remove = useEvent(el, "mousemove", handler, eventOptions);
return {
mouseX,
mouseY,
Expand All @@ -181,12 +180,13 @@ function useMouseMove(el, options, wait) {
}

function useOnResize(el, options, wait) {
const element = unwrap(el);
const height = compositionApi.ref(element.clientHeight);
const width = compositionApi.ref(element.clientWidth);
let handler = (ev) => {
height.value = element.clientHeight;
width.value = element.clientWidth;
const element = wrap(el);
const height = compositionApi.ref(element.value && element.value.clientHeight);
const width = compositionApi.ref(element.value && element.value.clientWidth);
let handler = () => {
debugger;
height.value = element.value.clientHeight;
width.value = element.value.clientWidth;
};
const eventOptions = typeof options === "number" ? undefined : options;
const ms = typeof options === "number" ? options : wait;
Expand All @@ -202,12 +202,12 @@ function useOnResize(el, options, wait) {
}

function useOnScroll(el, options, wait) {
const element = unwrap(el);
const scrollTop = compositionApi.ref(element.scrollTop);
const scrollLeft = compositionApi.ref(element.scrollLeft);
const element = wrap(el);
const scrollTop = compositionApi.ref(element.value && element.value.scrollTop);
const scrollLeft = compositionApi.ref(element.value && element.value.scrollLeft);
let handler = (ev) => {
scrollTop.value = element.scrollTop;
scrollLeft.value = element.scrollLeft;
scrollTop.value = element.value.scrollTop;
scrollLeft.value = element.value.scrollLeft;
};
const eventOptions = typeof options === "number" ? undefined : options;
const ms = typeof options === "number" ? options : wait;
Expand Down Expand Up @@ -320,11 +320,11 @@ function useFetch(options) {
}

/* istanbul ignore next */
const axios = _axios || (globalThis && globalThis.axios);
const _axios = axios || (globalThis && globalThis.axios);
function useAxios(config) {
/* istanbul ignore next */
process.env.NODE_ENV !== "production" && !axios && console.warn(`[axios] not installed, please install it`);
const axiosClient = axios.create(config);
process.env.NODE_ENV !== "production" && !_axios && console.warn(`[axios] not installed, please install it`);
const axiosClient = _axios.create(config);
const client = compositionApi.computed(() => axiosClient);
const use = usePromise(async (request) => {
return axiosClient.request(request);
Expand Down Expand Up @@ -390,9 +390,13 @@ function useWebSocket(url, protocols) {
isClosed.value = false;
});
const send = (data) => ws.send(data);
const close = (code, reason) => {
ws.close(code, reason);
};
return {
ws,
send,
close,
messageEvent,
errorEvent,
data,
Expand All @@ -409,7 +413,7 @@ exports.useCancellablePromise = useCancellablePromise;
exports.useDebounce = useDebounce;
exports.useEvent = useEvent;
exports.useFetch = useFetch;
exports.useMouseMove = useMouseMove;
exports.useOnMouseMove = useOnMouseMove;
exports.useOnResize = useOnResize;
exports.useOnScroll = useOnScroll;
exports.usePagination = usePagination;
Expand Down
66 changes: 35 additions & 31 deletions dist/vue-composable.es.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
import { isRef, onMounted, onUnmounted, ref, computed, watch } from '@vue/composition-api';
import _axios from 'axios';
import { isRef, ref, onMounted, onUnmounted, computed, watch } from '@vue/composition-api';
import axios from 'axios';

function useEvent(el, name, listener, options) {
const element = isRef(el) ? el.value : el;
const remove = () => element.removeEventListener(name, listener);
onMounted(() => element.addEventListener(name, listener, options));
onUnmounted(remove);
return remove;
}

function unwrap(o) {
return isRef(o) ? o.value : o;
}
// export function unwrap<T>(o: RefTyped<T>): T {
// return isRef(o) ? o.value : o;
// }
function wrap(o) {
return isRef(o) ? o : ref(o);
}
Expand All @@ -23,6 +15,14 @@ function minMax(val, min, max) {
return val;
}

function useEvent(el, name, listener, options) {
const element = wrap(el);
const remove = () => element.value.removeEventListener(name, listener);
onMounted(() => element.value.addEventListener(name, listener, options));
onUnmounted(remove);
return remove;
}

function usePagination(options) {
const _currentPage = wrap(options.currentPage);
const _pageSize = wrap(options.pageSize);
Expand Down Expand Up @@ -153,8 +153,7 @@ function debounce(func, waitMilliseconds = 50, options = {
};
}

function useMouseMove(el, options, wait) {
const element = unwrap(el);
function useOnMouseMove(el, options, wait) {
const mouseX = ref(0);
const mouseY = ref(0);
let handler = (ev) => {
Expand All @@ -166,7 +165,7 @@ function useMouseMove(el, options, wait) {
if (ms) {
handler = useDebounce(handler, wait);
}
const remove = useEvent(element, "mousemove", handler, eventOptions);
const remove = useEvent(el, "mousemove", handler, eventOptions);
return {
mouseX,
mouseY,
Expand All @@ -175,12 +174,13 @@ function useMouseMove(el, options, wait) {
}

function useOnResize(el, options, wait) {
const element = unwrap(el);
const height = ref(element.clientHeight);
const width = ref(element.clientWidth);
let handler = (ev) => {
height.value = element.clientHeight;
width.value = element.clientWidth;
const element = wrap(el);
const height = ref(element.value && element.value.clientHeight);
const width = ref(element.value && element.value.clientWidth);
let handler = () => {
debugger;
height.value = element.value.clientHeight;
width.value = element.value.clientWidth;
};
const eventOptions = typeof options === "number" ? undefined : options;
const ms = typeof options === "number" ? options : wait;
Expand All @@ -196,12 +196,12 @@ function useOnResize(el, options, wait) {
}

function useOnScroll(el, options, wait) {
const element = unwrap(el);
const scrollTop = ref(element.scrollTop);
const scrollLeft = ref(element.scrollLeft);
const element = wrap(el);
const scrollTop = ref(element.value && element.value.scrollTop);
const scrollLeft = ref(element.value && element.value.scrollLeft);
let handler = (ev) => {
scrollTop.value = element.scrollTop;
scrollLeft.value = element.scrollLeft;
scrollTop.value = element.value.scrollTop;
scrollLeft.value = element.value.scrollLeft;
};
const eventOptions = typeof options === "number" ? undefined : options;
const ms = typeof options === "number" ? options : wait;
Expand Down Expand Up @@ -314,11 +314,11 @@ function useFetch(options) {
}

/* istanbul ignore next */
const axios = _axios || (globalThis && globalThis.axios);
const _axios = axios || (globalThis && globalThis.axios);
function useAxios(config) {
/* istanbul ignore next */
process.env.NODE_ENV !== "production" && !axios && console.warn(`[axios] not installed, please install it`);
const axiosClient = axios.create(config);
process.env.NODE_ENV !== "production" && !_axios && console.warn(`[axios] not installed, please install it`);
const axiosClient = _axios.create(config);
const client = computed(() => axiosClient);
const use = usePromise(async (request) => {
return axiosClient.request(request);
Expand Down Expand Up @@ -384,9 +384,13 @@ function useWebSocket(url, protocols) {
isClosed.value = false;
});
const send = (data) => ws.send(data);
const close = (code, reason) => {
ws.close(code, reason);
};
return {
ws,
send,
close,
messageEvent,
errorEvent,
data,
Expand All @@ -396,4 +400,4 @@ function useWebSocket(url, protocols) {
};
}

export { debounce, useArrayPagination, useAxios, useCancellablePromise, useDebounce, useEvent, useFetch, useMouseMove, useOnResize, useOnScroll, usePagination, usePromise, useWebSocket };
export { debounce, useArrayPagination, useAxios, useCancellablePromise, useDebounce, useEvent, useFetch, useOnMouseMove, useOnResize, useOnScroll, usePagination, usePromise, useWebSocket };

0 comments on commit 2648d97

Please sign in to comment.