@vue-composable/core
Advanced tools
Comparing version
@@ -27,2 +27,3 @@ 'use strict'; | ||
const FALSE_OP = () => false; | ||
const PASSIVE_EV = { passive: true }; | ||
function promisedTimeout(timeout) { | ||
@@ -40,3 +41,115 @@ return new Promise(res => { | ||
} | ||
const isClient = typeof window != 'undefined'; | ||
// compact version: https://stackoverflow.com/a/33146982/1209882 | ||
/** | ||
* returns a random string | ||
* @param len length of the string max: 36 | ||
*/ | ||
// export function randomString(len: number) { | ||
// return (+new Date).toString(36).slice(-len); | ||
// } | ||
function usePagination(options) { | ||
const _currentPage = wrap(options.currentPage); | ||
const _pageSize = wrap(options.pageSize); | ||
const _offset = runtimeCore.ref(0); | ||
const total = wrap(options.total); | ||
const offset = runtimeCore.computed({ | ||
get() { | ||
return _offset.value; | ||
}, | ||
set(v) { | ||
if (!isNumber(v)) { | ||
/* istanbul ignore else */ | ||
{ | ||
console.warn(`[offset] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_offset.value = Math.min(v, total.value); | ||
} | ||
}); | ||
const currentPage = runtimeCore.computed({ | ||
get() { | ||
return _currentPage.value; | ||
}, | ||
set(v) { | ||
if (!isNumber(v)) { | ||
/* istanbul ignore else */ | ||
{ | ||
console.warn(`[currentPage] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_currentPage.value = minMax(v, 1, lastPage.value); | ||
// set the offset | ||
offset.value = (_currentPage.value - 1) * pageSize.value; | ||
} | ||
}); | ||
const pageSize = runtimeCore.computed({ | ||
get() { | ||
return _pageSize.value; | ||
}, | ||
set(v) { | ||
if (!isNumber(v)) { | ||
/* istanbul ignore else */ | ||
{ | ||
console.warn(`[pageSize] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_pageSize.value = v; | ||
} | ||
}); | ||
const lastPage = runtimeCore.computed(() => Math.ceil(total.value / pageSize.value)); | ||
// make sure the current page is the correct value | ||
currentPage.value = _currentPage.value; | ||
const prev = () => --currentPage.value; | ||
const next = () => ++currentPage.value; | ||
const first = () => (currentPage.value = 1); | ||
const last = () => (currentPage.value = lastPage.value); | ||
runtimeCore.watch([total, pageSize], () => { | ||
if (currentPage.value > lastPage.value) { | ||
currentPage.value = lastPage.value; | ||
} | ||
}, { lazy: true } // no need to run on first render | ||
); | ||
return { | ||
// Mutable state | ||
pageSize, | ||
total, | ||
currentPage, | ||
offset, | ||
// Computed | ||
lastPage, | ||
// Functions | ||
next, | ||
prev, | ||
first, | ||
last | ||
}; | ||
} | ||
function useArrayPagination(array, options) { | ||
const arrayRef = wrap(array); | ||
const pagination = usePagination({ | ||
...{ | ||
currentPage: 1, | ||
pageSize: 10, | ||
}, | ||
...options, | ||
total: runtimeCore.computed(() => arrayRef.value.length) | ||
}); | ||
const result = runtimeCore.computed(() => { | ||
const array = arrayRef.value; | ||
if (!Array.isArray(array)) | ||
return []; | ||
return array.slice(pagination.offset.value, pagination.offset.value + pagination.pageSize.value); | ||
}); | ||
return { | ||
...pagination, | ||
result | ||
}; | ||
} | ||
function usePromise(fn, throwException = false) { | ||
@@ -273,104 +386,54 @@ if (!fn) { | ||
// import { Ref, computed, ref } from "@vue/reactivity"; | ||
function usePagination(options) { | ||
const _currentPage = wrap(options.currentPage); | ||
const _pageSize = wrap(options.pageSize); | ||
const _offset = runtimeCore.ref(0); | ||
const total = wrap(options.total); | ||
const offset = runtimeCore.computed({ | ||
get() { | ||
return _offset.value; | ||
}, | ||
set(v) { | ||
if (typeof v !== "number") { | ||
/* istanbul ignore else */ | ||
{ | ||
console.warn(`[offset] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_offset.value = Math.min(v, total.value); | ||
function useNow(options) { | ||
const SYNC_MS = 1000; | ||
const ms = options && options.refreshMs || SYNC_MS; | ||
const sync = options && isBoolean(options.sync) ? options.sync : true; | ||
const fn = options && isFunction(options.timeFn) && options.timeFn || Date.now; | ||
/* istanbul ignore else */ | ||
{ | ||
if (options && options.timeFn && isFunction(options.timeFn) === false) { | ||
console.warn('[useNow] timeFn param must be Function'); | ||
} | ||
}); | ||
const currentPage = runtimeCore.computed({ | ||
get() { | ||
return _currentPage.value; | ||
}, | ||
set(v) { | ||
if (typeof v !== "number") { | ||
/* istanbul ignore else */ | ||
{ | ||
console.warn(`[currentPage] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_currentPage.value = minMax(v, 1, lastPage.value); | ||
// set the offset | ||
offset.value = (_currentPage.value - 1) * pageSize.value; | ||
} | ||
}); | ||
const pageSize = runtimeCore.computed({ | ||
get() { | ||
return _pageSize.value; | ||
}, | ||
set(v) { | ||
if (typeof v !== "number") { | ||
/* istanbul ignore else */ | ||
{ | ||
console.warn(`[pageSize] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_pageSize.value = v; | ||
} | ||
}); | ||
const lastPage = runtimeCore.computed(() => Math.ceil(total.value / pageSize.value)); | ||
// make sure the current page is the correct value | ||
currentPage.value = _currentPage.value; | ||
const prev = () => --currentPage.value; | ||
const next = () => ++currentPage.value; | ||
const first = () => (currentPage.value = 1); | ||
const last = () => (currentPage.value = lastPage.value); | ||
runtimeCore.watch([total, pageSize], () => { | ||
if (currentPage.value > lastPage.value) { | ||
currentPage.value = lastPage.value; | ||
} | ||
}, { lazy: true } // no need to run on first render | ||
); | ||
} | ||
let handler = undefined; | ||
let timeoutHandler = undefined; | ||
const now = runtimeCore.ref(fn()); | ||
const remove = () => { | ||
clearInterval(handler); | ||
clearTimeout(timeoutHandler); | ||
}; | ||
/* istanbul ignore next */ | ||
const start = isClient ? () => handler = setInterval(() => now.value = fn(), ms) : NO_OP; | ||
if (sync) { | ||
const offset = SYNC_MS - (now.value - (Math.floor(now.value / SYNC_MS) * SYNC_MS)); | ||
timeoutHandler = setTimeout(start, offset); | ||
} | ||
else { | ||
start(); | ||
} | ||
runtimeCore.onUnmounted(remove); | ||
return { | ||
// Mutable state | ||
pageSize, | ||
total, | ||
currentPage, | ||
offset, | ||
// Computed | ||
lastPage, | ||
// Functions | ||
next, | ||
prev, | ||
first, | ||
last | ||
now, | ||
remove | ||
}; | ||
} | ||
function useArrayPagination(array, options) { | ||
const arrayRef = wrap(array); | ||
const pagination = usePagination({ | ||
...{ | ||
currentPage: 1, | ||
pageSize: 10, | ||
}, | ||
...options, | ||
total: runtimeCore.computed(() => arrayRef.value.length) | ||
function useDateNow(options) { | ||
const refreshMs = options && options.refreshMs || 1000; | ||
const sync = options && isBoolean(options.sync) ? options.sync : true; | ||
return useNow({ | ||
refreshMs, | ||
sync, | ||
timeFn: Date.now | ||
}); | ||
const result = runtimeCore.computed(() => { | ||
const array = arrayRef.value; | ||
if (!Array.isArray(array)) | ||
return []; | ||
return array.slice(pagination.offset.value, pagination.offset.value + pagination.pageSize.value); | ||
} | ||
function usePerformanceNow(options) { | ||
const refreshMs = options && options.refreshMs || 1000; | ||
const sync = options && isBoolean(options.sync) ? options.sync : true; | ||
return useNow({ | ||
refreshMs, | ||
sync, | ||
timeFn: () => performance.now() | ||
}); | ||
return { | ||
...pagination, | ||
result | ||
}; | ||
} | ||
@@ -380,2 +443,3 @@ | ||
exports.NO_OP = NO_OP; | ||
exports.PASSIVE_EV = PASSIVE_EV; | ||
exports.debounce = debounce; | ||
@@ -385,2 +449,3 @@ exports.exponentialDelay = exponentialDelay; | ||
exports.isBoolean = isBoolean; | ||
exports.isClient = isClient; | ||
exports.isDate = isDate; | ||
@@ -400,6 +465,9 @@ exports.isElement = isElement; | ||
exports.useCancellablePromise = useCancellablePromise; | ||
exports.useDateNow = useDateNow; | ||
exports.useDebounce = useDebounce; | ||
exports.useNow = useNow; | ||
exports.usePagination = usePagination; | ||
exports.usePerformanceNow = usePerformanceNow; | ||
exports.usePromise = usePromise; | ||
exports.useRetry = useRetry; | ||
exports.wrap = wrap; |
@@ -27,2 +27,3 @@ 'use strict'; | ||
const FALSE_OP = () => false; | ||
const PASSIVE_EV = { passive: true }; | ||
function promisedTimeout(timeout) { | ||
@@ -40,3 +41,103 @@ return new Promise(res => { | ||
} | ||
const isClient = typeof window != 'undefined'; | ||
// compact version: https://stackoverflow.com/a/33146982/1209882 | ||
/** | ||
* returns a random string | ||
* @param len length of the string max: 36 | ||
*/ | ||
// export function randomString(len: number) { | ||
// return (+new Date).toString(36).slice(-len); | ||
// } | ||
function usePagination(options) { | ||
const _currentPage = wrap(options.currentPage); | ||
const _pageSize = wrap(options.pageSize); | ||
const _offset = runtimeCore.ref(0); | ||
const total = wrap(options.total); | ||
const offset = runtimeCore.computed({ | ||
get() { | ||
return _offset.value; | ||
}, | ||
set(v) { | ||
if (!isNumber(v)) { | ||
return; | ||
} | ||
_offset.value = Math.min(v, total.value); | ||
} | ||
}); | ||
const currentPage = runtimeCore.computed({ | ||
get() { | ||
return _currentPage.value; | ||
}, | ||
set(v) { | ||
if (!isNumber(v)) { | ||
return; | ||
} | ||
_currentPage.value = minMax(v, 1, lastPage.value); | ||
// set the offset | ||
offset.value = (_currentPage.value - 1) * pageSize.value; | ||
} | ||
}); | ||
const pageSize = runtimeCore.computed({ | ||
get() { | ||
return _pageSize.value; | ||
}, | ||
set(v) { | ||
if (!isNumber(v)) { | ||
return; | ||
} | ||
_pageSize.value = v; | ||
} | ||
}); | ||
const lastPage = runtimeCore.computed(() => Math.ceil(total.value / pageSize.value)); | ||
// make sure the current page is the correct value | ||
currentPage.value = _currentPage.value; | ||
const prev = () => --currentPage.value; | ||
const next = () => ++currentPage.value; | ||
const first = () => (currentPage.value = 1); | ||
const last = () => (currentPage.value = lastPage.value); | ||
runtimeCore.watch([total, pageSize], () => { | ||
if (currentPage.value > lastPage.value) { | ||
currentPage.value = lastPage.value; | ||
} | ||
}, { lazy: true } // no need to run on first render | ||
); | ||
return { | ||
// Mutable state | ||
pageSize, | ||
total, | ||
currentPage, | ||
offset, | ||
// Computed | ||
lastPage, | ||
// Functions | ||
next, | ||
prev, | ||
first, | ||
last | ||
}; | ||
} | ||
function useArrayPagination(array, options) { | ||
const arrayRef = wrap(array); | ||
const pagination = usePagination({ | ||
...{ | ||
currentPage: 1, | ||
pageSize: 10, | ||
}, | ||
...options, | ||
total: runtimeCore.computed(() => arrayRef.value.length) | ||
}); | ||
const result = runtimeCore.computed(() => { | ||
const array = arrayRef.value; | ||
if (!Array.isArray(array)) | ||
return []; | ||
return array.slice(pagination.offset.value, pagination.offset.value + pagination.pageSize.value); | ||
}); | ||
return { | ||
...pagination, | ||
result | ||
}; | ||
} | ||
function usePromise(fn, throwException = false) { | ||
@@ -109,5 +210,5 @@ if (!fn) { | ||
/* istanbul ignore next */ | ||
const ExecutionId = Symbol( undefined); | ||
const ExecutionId = Symbol( ``); | ||
/* istanbul ignore next */ | ||
const CancellationToken = Symbol( undefined); | ||
const CancellationToken = Symbol( ``); | ||
const defaultStrategy = async (options, context, factory, args) => { | ||
@@ -274,92 +375,48 @@ const retryId = context[ExecutionId].value; | ||
// import { Ref, computed, ref } from "@vue/reactivity"; | ||
function usePagination(options) { | ||
const _currentPage = wrap(options.currentPage); | ||
const _pageSize = wrap(options.pageSize); | ||
const _offset = runtimeCore.ref(0); | ||
const total = wrap(options.total); | ||
const offset = runtimeCore.computed({ | ||
get() { | ||
return _offset.value; | ||
}, | ||
set(v) { | ||
if (typeof v !== "number") { | ||
return; | ||
} | ||
_offset.value = Math.min(v, total.value); | ||
} | ||
}); | ||
const currentPage = runtimeCore.computed({ | ||
get() { | ||
return _currentPage.value; | ||
}, | ||
set(v) { | ||
if (typeof v !== "number") { | ||
return; | ||
} | ||
_currentPage.value = minMax(v, 1, lastPage.value); | ||
// set the offset | ||
offset.value = (_currentPage.value - 1) * pageSize.value; | ||
} | ||
}); | ||
const pageSize = runtimeCore.computed({ | ||
get() { | ||
return _pageSize.value; | ||
}, | ||
set(v) { | ||
if (typeof v !== "number") { | ||
return; | ||
} | ||
_pageSize.value = v; | ||
} | ||
}); | ||
const lastPage = runtimeCore.computed(() => Math.ceil(total.value / pageSize.value)); | ||
// make sure the current page is the correct value | ||
currentPage.value = _currentPage.value; | ||
const prev = () => --currentPage.value; | ||
const next = () => ++currentPage.value; | ||
const first = () => (currentPage.value = 1); | ||
const last = () => (currentPage.value = lastPage.value); | ||
runtimeCore.watch([total, pageSize], () => { | ||
if (currentPage.value > lastPage.value) { | ||
currentPage.value = lastPage.value; | ||
} | ||
}, { lazy: true } // no need to run on first render | ||
); | ||
function useNow(options) { | ||
const SYNC_MS = 1000; | ||
const ms = options && options.refreshMs || SYNC_MS; | ||
const sync = options && isBoolean(options.sync) ? options.sync : true; | ||
const fn = options && isFunction(options.timeFn) && options.timeFn || Date.now; | ||
let handler = undefined; | ||
let timeoutHandler = undefined; | ||
const now = runtimeCore.ref(fn()); | ||
const remove = () => { | ||
clearInterval(handler); | ||
clearTimeout(timeoutHandler); | ||
}; | ||
/* istanbul ignore next */ | ||
const start = isClient ? () => handler = setInterval(() => now.value = fn(), ms) : NO_OP; | ||
if (sync) { | ||
const offset = SYNC_MS - (now.value - (Math.floor(now.value / SYNC_MS) * SYNC_MS)); | ||
timeoutHandler = setTimeout(start, offset); | ||
} | ||
else { | ||
start(); | ||
} | ||
runtimeCore.onUnmounted(remove); | ||
return { | ||
// Mutable state | ||
pageSize, | ||
total, | ||
currentPage, | ||
offset, | ||
// Computed | ||
lastPage, | ||
// Functions | ||
next, | ||
prev, | ||
first, | ||
last | ||
now, | ||
remove | ||
}; | ||
} | ||
function useArrayPagination(array, options) { | ||
const arrayRef = wrap(array); | ||
const pagination = usePagination({ | ||
...{ | ||
currentPage: 1, | ||
pageSize: 10, | ||
}, | ||
...options, | ||
total: runtimeCore.computed(() => arrayRef.value.length) | ||
function useDateNow(options) { | ||
const refreshMs = options && options.refreshMs || 1000; | ||
const sync = options && isBoolean(options.sync) ? options.sync : true; | ||
return useNow({ | ||
refreshMs, | ||
sync, | ||
timeFn: Date.now | ||
}); | ||
const result = runtimeCore.computed(() => { | ||
const array = arrayRef.value; | ||
if (!Array.isArray(array)) | ||
return []; | ||
return array.slice(pagination.offset.value, pagination.offset.value + pagination.pageSize.value); | ||
} | ||
function usePerformanceNow(options) { | ||
const refreshMs = options && options.refreshMs || 1000; | ||
const sync = options && isBoolean(options.sync) ? options.sync : true; | ||
return useNow({ | ||
refreshMs, | ||
sync, | ||
timeFn: () => performance.now() | ||
}); | ||
return { | ||
...pagination, | ||
result | ||
}; | ||
} | ||
@@ -369,2 +426,3 @@ | ||
exports.NO_OP = NO_OP; | ||
exports.PASSIVE_EV = PASSIVE_EV; | ||
exports.debounce = debounce; | ||
@@ -374,2 +432,3 @@ exports.exponentialDelay = exponentialDelay; | ||
exports.isBoolean = isBoolean; | ||
exports.isClient = isClient; | ||
exports.isDate = isDate; | ||
@@ -389,6 +448,9 @@ exports.isElement = isElement; | ||
exports.useCancellablePromise = useCancellablePromise; | ||
exports.useDateNow = useDateNow; | ||
exports.useDebounce = useDebounce; | ||
exports.useNow = useNow; | ||
exports.usePagination = usePagination; | ||
exports.usePerformanceNow = usePerformanceNow; | ||
exports.usePromise = usePromise; | ||
exports.useRetry = useRetry; | ||
exports.wrap = wrap; |
import { ComputedRef } from '@vue/runtime-core'; | ||
import { Ref } from '@vue/runtime-core'; | ||
import { RefTyped as RefTyped_2 } from '@vue-composable/core'; | ||
@@ -30,2 +29,4 @@ export declare interface ArrayPaginationResult<T extends Array<any>> extends PaginationResult { | ||
export declare const isClient: boolean; | ||
export declare const isDate: (val: unknown) => val is Date; | ||
@@ -53,2 +54,13 @@ | ||
export declare interface NowOptions { | ||
/** | ||
* @description - interval in ms | ||
*/ | ||
refreshMs?: number; | ||
/** | ||
* @description - sync with seconds the clock | ||
*/ | ||
sync?: boolean; | ||
} | ||
export declare type Options = { | ||
@@ -61,5 +73,5 @@ isImmediate: boolean; | ||
export declare interface PaginationOptions { | ||
pageSize: RefTyped_2<number>; | ||
total: RefTyped_2<number>; | ||
currentPage: RefTyped_2<number>; | ||
pageSize: RefTyped<number>; | ||
total: RefTyped<number>; | ||
currentPage: RefTyped<number>; | ||
} | ||
@@ -79,2 +91,4 @@ | ||
export declare const PASSIVE_EV: AddEventListenerOptions; | ||
/** | ||
@@ -182,3 +196,3 @@ * A function that emits a side effect and does not return anything. | ||
export declare function useArrayPagination<T extends Array<TR>, TR>(array: RefTyped_2<T>, options?: Partial<Omit<PaginationOptions, 'total'>>): ArrayPaginationResult<T>; | ||
export declare function useArrayPagination<T extends Array<TR>, TR>(array: RefTyped<T>, options?: Partial<Omit<PaginationOptions, 'total'>>): ArrayPaginationResult<T>; | ||
@@ -203,6 +217,28 @@ export declare function useCancellablePromise<T extends any, TArgs extends Array<any>>(fn: (...args: TArgs) => Promise<T>): PromiseResultFactory<Promise<T>, TArgs> & CancellablePromiseResult; | ||
export declare function useDateNow(options?: NowOptions): { | ||
now: import("@vue/reactivity").Ref<number>; | ||
remove: () => void; | ||
}; | ||
export declare function useDebounce<T extends Function>(handler: T, wait?: number, options?: Options): T; | ||
export declare function useNow(options?: NowOptions & UseNowOptions): { | ||
now: import("@vue/reactivity").Ref<number>; | ||
remove: () => void; | ||
}; | ||
export declare interface UseNowOptions { | ||
/** | ||
* @description - time factory, it should retrieve `now` in ms | ||
*/ | ||
timeFn?: () => number; | ||
} | ||
export declare function usePagination(options: PaginationOptions): PaginationResult; | ||
export declare function usePerformanceNow(options?: NowOptions): { | ||
now: import("@vue/reactivity").Ref<number>; | ||
remove: () => void; | ||
}; | ||
/** | ||
@@ -209,0 +245,0 @@ * |
@@ -1,2 +0,2 @@ | ||
import { isRef, ref, computed, watch } from '@vue/runtime-core'; | ||
import { isRef, ref, computed, watch, onUnmounted } from '@vue/runtime-core'; | ||
@@ -23,2 +23,3 @@ function unwrap(o) { | ||
const FALSE_OP = () => false; | ||
const PASSIVE_EV = { passive: true }; | ||
function promisedTimeout(timeout) { | ||
@@ -36,3 +37,115 @@ return new Promise(res => { | ||
} | ||
const isClient = typeof window != 'undefined'; | ||
// compact version: https://stackoverflow.com/a/33146982/1209882 | ||
/** | ||
* returns a random string | ||
* @param len length of the string max: 36 | ||
*/ | ||
// export function randomString(len: number) { | ||
// return (+new Date).toString(36).slice(-len); | ||
// } | ||
function usePagination(options) { | ||
const _currentPage = wrap(options.currentPage); | ||
const _pageSize = wrap(options.pageSize); | ||
const _offset = ref(0); | ||
const total = wrap(options.total); | ||
const offset = computed({ | ||
get() { | ||
return _offset.value; | ||
}, | ||
set(v) { | ||
if (!isNumber(v)) { | ||
/* istanbul ignore else */ | ||
if ((process.env.NODE_ENV !== 'production')) { | ||
console.warn(`[offset] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_offset.value = Math.min(v, total.value); | ||
} | ||
}); | ||
const currentPage = computed({ | ||
get() { | ||
return _currentPage.value; | ||
}, | ||
set(v) { | ||
if (!isNumber(v)) { | ||
/* istanbul ignore else */ | ||
if ((process.env.NODE_ENV !== 'production')) { | ||
console.warn(`[currentPage] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_currentPage.value = minMax(v, 1, lastPage.value); | ||
// set the offset | ||
offset.value = (_currentPage.value - 1) * pageSize.value; | ||
} | ||
}); | ||
const pageSize = computed({ | ||
get() { | ||
return _pageSize.value; | ||
}, | ||
set(v) { | ||
if (!isNumber(v)) { | ||
/* istanbul ignore else */ | ||
if ((process.env.NODE_ENV !== 'production')) { | ||
console.warn(`[pageSize] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_pageSize.value = v; | ||
} | ||
}); | ||
const lastPage = computed(() => Math.ceil(total.value / pageSize.value)); | ||
// make sure the current page is the correct value | ||
currentPage.value = _currentPage.value; | ||
const prev = () => --currentPage.value; | ||
const next = () => ++currentPage.value; | ||
const first = () => (currentPage.value = 1); | ||
const last = () => (currentPage.value = lastPage.value); | ||
watch([total, pageSize], () => { | ||
if (currentPage.value > lastPage.value) { | ||
currentPage.value = lastPage.value; | ||
} | ||
}, { lazy: true } // no need to run on first render | ||
); | ||
return { | ||
// Mutable state | ||
pageSize, | ||
total, | ||
currentPage, | ||
offset, | ||
// Computed | ||
lastPage, | ||
// Functions | ||
next, | ||
prev, | ||
first, | ||
last | ||
}; | ||
} | ||
function useArrayPagination(array, options) { | ||
const arrayRef = wrap(array); | ||
const pagination = usePagination({ | ||
...{ | ||
currentPage: 1, | ||
pageSize: 10, | ||
}, | ||
...options, | ||
total: computed(() => arrayRef.value.length) | ||
}); | ||
const result = computed(() => { | ||
const array = arrayRef.value; | ||
if (!Array.isArray(array)) | ||
return []; | ||
return array.slice(pagination.offset.value, pagination.offset.value + pagination.pageSize.value); | ||
}); | ||
return { | ||
...pagination, | ||
result | ||
}; | ||
} | ||
function usePromise(fn, throwException = false) { | ||
@@ -105,5 +218,5 @@ if (!fn) { | ||
/* istanbul ignore next */ | ||
const ExecutionId = Symbol((true !== 'production') ? "RetryId" : undefined); | ||
const ExecutionId = Symbol((process.env.NODE_ENV !== 'production') && "RetryId" || ``); | ||
/* istanbul ignore next */ | ||
const CancellationToken = Symbol((true !== 'production') ? "CancellationToken" : undefined); | ||
const CancellationToken = Symbol((process.env.NODE_ENV !== 'production') && "CancellationToken" || ``); | ||
const defaultStrategy = async (options, context, factory, args) => { | ||
@@ -270,106 +383,56 @@ const retryId = context[ExecutionId].value; | ||
// import { Ref, computed, ref } from "@vue/reactivity"; | ||
function usePagination(options) { | ||
const _currentPage = wrap(options.currentPage); | ||
const _pageSize = wrap(options.pageSize); | ||
const _offset = ref(0); | ||
const total = wrap(options.total); | ||
const offset = computed({ | ||
get() { | ||
return _offset.value; | ||
}, | ||
set(v) { | ||
if (typeof v !== "number") { | ||
/* istanbul ignore else */ | ||
if ((true !== 'production')) { | ||
console.warn(`[offset] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_offset.value = Math.min(v, total.value); | ||
function useNow(options) { | ||
const SYNC_MS = 1000; | ||
const ms = options && options.refreshMs || SYNC_MS; | ||
const sync = options && isBoolean(options.sync) ? options.sync : true; | ||
const fn = options && isFunction(options.timeFn) && options.timeFn || Date.now; | ||
/* istanbul ignore else */ | ||
if ((process.env.NODE_ENV !== 'production')) { | ||
if (options && options.timeFn && isFunction(options.timeFn) === false) { | ||
console.warn('[useNow] timeFn param must be Function'); | ||
} | ||
}); | ||
const currentPage = computed({ | ||
get() { | ||
return _currentPage.value; | ||
}, | ||
set(v) { | ||
if (typeof v !== "number") { | ||
/* istanbul ignore else */ | ||
if ((true !== 'production')) { | ||
console.warn(`[currentPage] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_currentPage.value = minMax(v, 1, lastPage.value); | ||
// set the offset | ||
offset.value = (_currentPage.value - 1) * pageSize.value; | ||
} | ||
}); | ||
const pageSize = computed({ | ||
get() { | ||
return _pageSize.value; | ||
}, | ||
set(v) { | ||
if (typeof v !== "number") { | ||
/* istanbul ignore else */ | ||
if ((true !== 'production')) { | ||
console.warn(`[pageSize] expected number but got: '${typeof v}' value: '${v}'`); | ||
} | ||
return; | ||
} | ||
_pageSize.value = v; | ||
} | ||
}); | ||
const lastPage = computed(() => Math.ceil(total.value / pageSize.value)); | ||
// make sure the current page is the correct value | ||
currentPage.value = _currentPage.value; | ||
const prev = () => --currentPage.value; | ||
const next = () => ++currentPage.value; | ||
const first = () => (currentPage.value = 1); | ||
const last = () => (currentPage.value = lastPage.value); | ||
watch([total, pageSize], () => { | ||
if (currentPage.value > lastPage.value) { | ||
currentPage.value = lastPage.value; | ||
} | ||
}, { lazy: true } // no need to run on first render | ||
); | ||
} | ||
let handler = undefined; | ||
let timeoutHandler = undefined; | ||
const now = ref(fn()); | ||
const remove = () => { | ||
clearInterval(handler); | ||
clearTimeout(timeoutHandler); | ||
}; | ||
/* istanbul ignore next */ | ||
const start = isClient ? () => handler = setInterval(() => now.value = fn(), ms) : NO_OP; | ||
if (sync) { | ||
const offset = SYNC_MS - (now.value - (Math.floor(now.value / SYNC_MS) * SYNC_MS)); | ||
timeoutHandler = setTimeout(start, offset); | ||
} | ||
else { | ||
start(); | ||
} | ||
onUnmounted(remove); | ||
return { | ||
// Mutable state | ||
pageSize, | ||
total, | ||
currentPage, | ||
offset, | ||
// Computed | ||
lastPage, | ||
// Functions | ||
next, | ||
prev, | ||
first, | ||
last | ||
now, | ||
remove | ||
}; | ||
} | ||
function useArrayPagination(array, options) { | ||
const arrayRef = wrap(array); | ||
const pagination = usePagination({ | ||
...{ | ||
currentPage: 1, | ||
pageSize: 10, | ||
}, | ||
...options, | ||
total: computed(() => arrayRef.value.length) | ||
function useDateNow(options) { | ||
const refreshMs = options && options.refreshMs || 1000; | ||
const sync = options && isBoolean(options.sync) ? options.sync : true; | ||
return useNow({ | ||
refreshMs, | ||
sync, | ||
timeFn: Date.now | ||
}); | ||
const result = computed(() => { | ||
const array = arrayRef.value; | ||
if (!Array.isArray(array)) | ||
return []; | ||
return array.slice(pagination.offset.value, pagination.offset.value + pagination.pageSize.value); | ||
} | ||
function usePerformanceNow(options) { | ||
const refreshMs = options && options.refreshMs || 1000; | ||
const sync = options && isBoolean(options.sync) ? options.sync : true; | ||
return useNow({ | ||
refreshMs, | ||
sync, | ||
timeFn: () => performance.now() | ||
}); | ||
return { | ||
...pagination, | ||
result | ||
}; | ||
} | ||
export { FALSE_OP, NO_OP, debounce, exponentialDelay, isArray, isBoolean, isDate, isElement, isFunction, isNumber, isObject, isPromise, isString, isSymbol, minMax, noDelay, promisedTimeout, unwrap, useArrayPagination, useCancellablePromise, useDebounce, usePagination, usePromise, useRetry, wrap }; | ||
export { FALSE_OP, NO_OP, PASSIVE_EV, debounce, exponentialDelay, isArray, isBoolean, isClient, isDate, isElement, isFunction, isNumber, isObject, isPromise, isString, isSymbol, minMax, noDelay, promisedTimeout, unwrap, useArrayPagination, useCancellablePromise, useDateNow, useDebounce, useNow, usePagination, usePerformanceNow, usePromise, useRetry, wrap }; |
{ | ||
"name": "@vue-composable/core", | ||
"version": "1.0.0-alpha.7", | ||
"version": "1.0.0-alpha.8", | ||
"description": "@vue-composable/core", | ||
@@ -36,5 +36,5 @@ "main": "index.js", | ||
"homepage": "https://github.com/pikax/vue-composable/tree/dev/packages/core#readme", | ||
"dependencies": { | ||
"@vue/runtime-core": "^3.0.0-alpha.2" | ||
"peerDependencies": { | ||
"@vue/runtime-core": "^3.0.0-alpha.4" | ||
} | ||
} |
# @vue-composable/core | ||
[](https://badge.fury.io/js/%40vue-composable%2Fcore) | ||
<!-- [](https://badge.fury.io/js/%40vue-composable%2Fcore) --> | ||
[](https://bundlephobia.com/result?p=@vue-composable/core@next) | ||
@@ -29,2 +30,8 @@ This package contains core functionality for [vue-composable][vue-composable] | ||
### Date | ||
- [useNow][now] : Return reactive custom timer with specified refresh rate | ||
- [useDateNow][date-now] : Returns reactive `Date.now()` with custom refresh rate | ||
- [usePerformanceNow][performance-now] : Returns reactive `performance.now()` with custom refresh rate | ||
### Pagination | ||
@@ -49,2 +56,5 @@ | ||
[now]: https://pikax.me/vue-composable/composable/date/now | ||
[date-now]: https://pikax.me/vue-composable/composable/date/dateNow | ||
[performance-now]: https://pikax.me/vue-composable/composable/date/performanceNow | ||
[pagination]: https://pikax.me/vue-composable/composable/pagination/pagination | ||
@@ -51,0 +61,0 @@ [array-pagination]: https://pikax.me/vue-composable/composable/pagination/arrayPagination |
57567
15.08%1516
16.35%76
15.15%7
600%- Removed