@vrojs/use 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -1,5 +1,15 @@
 import * as vue from 'vue';
 import { Ref } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+
+declare function debounceRef<T = any>(value: T, ms?: number): vue.Ref<T, T>;
+
+declare module 'vue-router' {
+    interface RouteMeta {
+        enterClass?: string;
+        leaveClass?: string;
+    }
+}
 
 type AnyPromiseFn = (...args: any[]) => Promise<any>;
 interface UseAsyncTaskOptions<T extends AnyPromiseFn> {
@@ -40,13 +50,214 @@ interface UseAsyncTaskResult<T, D> {
 declare function useAsyncTask<T extends AnyPromiseFn>(task: T, options: UseAsyncTaskOptions<T> & Required<Pick<UseAsyncTaskOptions<T>, 'initialValue'>>): UseAsyncTaskResult<T, Awaited<ReturnType<T>>>;
 declare function useAsyncTask<T extends AnyPromiseFn>(task: T, options?: UseAsyncTaskOptions<T>): UseAsyncTaskResult<T, Awaited<ReturnType<T>> | undefined>;
 
+type MaybeRef<T> = T | Ref<T>;
+interface UseBodyScrollLockReturn {
+    locked: Ref<boolean>;
+    lock: () => void;
+    unlock: () => void;
+    toggle: (value?: boolean) => void;
+}
+/**
+ * 锁定/解锁 body 滚动
+ * @param initialLocked - 初始锁定状态，或外部响应式布尔值
+ */
+declare function useBodyScrollLock(initialLocked?: MaybeRef<boolean>): UseBodyScrollLockReturn;
+
 declare function useComposition(): {
     handleCompositionStart: (event: CompositionEvent) => void;
     handleCompositionEnd: (event: CompositionEvent) => void;
 };
 
+declare function useCountDown(start?: number): readonly [vue.Ref<number, number>, (st?: number) => void];
+
+type Loose<T> = T & {
+    [key: string]: any;
+};
+type TargetRef = HTMLElement | EventTarget | Loose<{
+    $el: HTMLElement;
+}> | Ref<EventTarget | Loose<{
+    $el: HTMLElement;
+}> | undefined>;
+type UseEventListenerOptions = {
+    target?: TargetRef;
+    capture?: boolean;
+    passive?: boolean;
+};
+declare function useEventListener<K extends keyof DocumentEventMap>(type: K, listener: (event: DocumentEventMap[K]) => void, options?: UseEventListenerOptions): void;
+declare function useEventListener(type: string, listener: EventListener, options?: UseEventListenerOptions): void;
+
 declare function useId(): string;
 
+interface UseKeepAliveState$1 {
+    /**
+     * Route name 和 Component name 要保证一致，不然缓存会失败
+     */
+    name: string;
+    /**
+     * vue-router history.state.position
+     * https://router.vuejs.org/zh/api/interfaces/RouterHistory.html#Properties-state
+     */
+    position: number;
+    /**
+     * 模式，如果是 auto 则自动会管理，如果设置的是 custom 则需要手动管理
+     */
+    mode: 'auto' | 'custom';
+    /**
+     * 关联的路由 如果是一个路由有子路由 则需要关联下子路由name
+     */
+    relations?: string[];
+}
+type UseKeepAliveOptions = Partial<Omit<UseKeepAliveState$1, 'position'>> | number;
+/**
+ * 结合 KeepAlive 组件，维护其 includes
+ */
+declare function useKeepAlive(options?: UseKeepAliveOptions): {
+    keepAliveList: vue.Ref<UseKeepAliveState$1[] | undefined, UseKeepAliveState$1[] | undefined>;
+    includes: vue.Ref<string[], string[]>;
+};
+
+interface UseKeepAliveState {
+    name: string;
+    position: number;
+    mode: 'auto' | 'custom';
+}
+type UseKeepAliveByPositionOptions = Partial<Omit<UseKeepAliveState, 'position'>> | boolean;
+/**
+ * 结合 KeepAlive 组件，维护其 includes
+ * @deprecated 目前因为有路由会产生BUG，已经过期，后期版本会删除掉，请使用 useKeepAlive 方法
+ */
+declare function useKeepAliveByPosition(options?: UseKeepAliveByPositionOptions): {
+    keepAliveList: vue.Ref<UseKeepAliveState[] | undefined, UseKeepAliveState[] | undefined>;
+    includes: vue.ComputedRef<string[]>;
+    keep: (data: UseKeepAliveState) => void;
+};
+
+interface UseKeepPositionOptions {
+    /**
+     * 获取需要恢复位置的元素
+     */
+    selectors?: string;
+    /**
+     * 获取需要恢复位置的元素
+     */
+    getTarget?: () => HTMLElement;
+}
+interface UseKeepPositionState {
+    scrollLeft: number;
+    scrollTop: number;
+}
+declare function useKeepPosition(options?: UseKeepPositionOptions): {
+    keep: () => void;
+    restore: () => void;
+};
+
+interface UsePagingStatus {
+    pagingIndex: number;
+    pagingSize: number;
+    pagingTotal: number;
+    pagingError: string;
+    pagingLoading: boolean;
+}
+type UsePagingTaskResult<T = any> = {
+    pagingList: T[];
+    pagingTotal: number;
+} | [T[], number];
+interface UsePagingTaskOptions {
+    loading?: boolean;
+    toast?: boolean;
+}
+interface UsePagingTask<T = any> {
+    (state: [number, number], options: UsePagingTaskOptions): Promise<UsePagingTaskResult<T>>;
+}
+interface UsePagingOptions {
+    /**
+     * 初始化的状态
+     */
+    initialStatus?: Partial<UsePagingStatus>;
+    /**
+     * 是否立即执行 onBeforeMount 执行，默认 false
+     */
+    immediate?: boolean;
+    /**
+     * 需要滚动的元素 默认 .hor-scroll
+     */
+    scrollSelector?: string;
+}
+type UsePagingTriggerOptions = ((...args: any[]) => any) | boolean | UsePagingTaskOptions;
+declare function usePaging<T = any>(task: UsePagingTask<T>, options?: UsePagingOptions): {
+    pagingFinished: vue.ComputedRef<boolean>;
+    pagingData: Ref<T[], T[]>;
+    pagingStatus: {
+        pagingIndex: number;
+        pagingSize: number;
+        pagingTotal: number;
+        pagingError: string;
+        pagingLoading: boolean;
+    };
+    pagingTrigger: (pagingIndex: number, options?: UsePagingTriggerOptions) => void;
+    pagingRefresh: (options?: UsePagingTriggerOptions) => void;
+    pagingLoad: (options?: UsePagingTriggerOptions) => void;
+    pagingReset: () => void;
+};
+
+declare function useParams<T extends Record<string, string>>(): T;
+
+declare function useQuery<T extends Record<string, string>>(): T;
+
+type UseSetStateAction<S> = S | ((prevState: S) => S);
+type UseSetState<T> = (initialState: T) => void;
+declare function useState<S = undefined>(): [
+    Ref<S | undefined>,
+    UseSetState<UseSetStateAction<S | undefined>>
+];
+declare function useState<S>(initialState: S): [Ref<S>, UseSetState<UseSetStateAction<S>>];
+
+declare function useToggle(initialValue?: boolean): readonly [vue.Ref<boolean, boolean>, (value?: boolean) => void];
+
+interface TransferOptions {
+    /**
+     * 是否中转
+     */
+    disabled?: boolean;
+    /**
+     * 路由配置 推荐使用 [to]
+     */
+    replace?: boolean;
+    query?: Record<string, any>;
+    params?: Record<string, any>;
+    path?: string;
+    /**
+     * 路由配置
+     */
+    to?: RouteLocationRaw;
+    /**
+     * 函数执行
+     */
+    fn?(options: TransferOptions, ...args: any[]): void | Promise<void>;
+    [prop: string]: any;
+}
+declare function useTransfer(): (options?: TransferOptions, ...args: any[]) => Promise<void>;
+
+interface UseTransitionNameOptions {
+    /**
+     * 进入动画样式
+     */
+    enterClass?: string;
+    /**
+     * 离开动画样式
+     */
+    leaveClass?: string;
+    deep?: boolean;
+}
+interface UseTransitionNameState {
+    position: number;
+    fullPath: string;
+}
+/**
+ * 配合 Transition 动画
+ */
+declare function useTransitionName(options: UseTransitionNameOptions): vue.Ref<string, string>;
+
 interface UseVisibleOptions<T extends Record<string, any>, P = any> {
     showCallback?: (options?: T) => void | Promise<void>;
     hideCallback?: (reason: any) => void | Promise<void>;
@@ -62,4 +273,4 @@ declare function useVisible<T extends Record<string, any>, R = any>(options?: Us
     hide: (reason?: any) => Promise<void>;
 };
 
-export { type UseAsyncTaskOptions, type UseAsyncTaskResult, type UseVisibleOptions, type UseVisibleShowOptions, useAsyncTask, useComposition, useId, useVisible };
+export { type TransferOptions, type UseAsyncTaskOptions, type UseAsyncTaskResult, type UseBodyScrollLockReturn, type UseEventListenerOptions, type UseKeepAliveOptions, type UseKeepAliveState$1 as UseKeepAliveState, type UseKeepPositionOptions, type UseKeepPositionState, type UsePagingOptions, type UsePagingStatus, type UsePagingTask, type UsePagingTaskOptions, type UsePagingTaskResult, type UsePagingTriggerOptions, type UseSetState, type UseSetStateAction, type UseTransitionNameOptions, type UseTransitionNameState, type UseVisibleOptions, type UseVisibleShowOptions, debounceRef, useAsyncTask, useBodyScrollLock, useComposition, useCountDown, useEventListener, useId, useKeepAlive, useKeepAliveByPosition, useKeepPosition, usePaging, useParams, useQuery, useState, useToggle, useTransfer, useTransitionName, useVisible };

package/dist/index.js

@@ -1,3 +1,31 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -19,6 +47,27 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
+// src/debounceRef/index.ts
+import { customRef } from "vue";
+function debounceRef(value, ms = 0) {
+  let timer;
+  return customRef((track, trigger) => {
+    return {
+      get() {
+        track();
+        return value;
+      },
+      set(val) {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          trigger();
+          value = val;
+        }, ms);
+      }
+    };
+  });
+}
+
 // src/useAsyncTask/index.ts
 import { isFunction } from "@daysnap/utils";
 import { onActivated, onBeforeMount, ref } from "vue";
@@ -68,6 +117,66 @@ function useAsyncTask(task, options) {
   };
 }
 
+// src/useBodyScrollLock/index.ts
+import { getCurrentScope, isRef, onScopeDispose, ref as ref2, unref, watch } from "vue";
+var lockCount = 0;
+var originalOverflow = "";
+function lockBody() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount++;
+}
+function unlockBody() {
+  if (typeof document === "undefined" || lockCount <= 0) return;
+  lockCount--;
+  if (lockCount === 0) {
+    document.body.style.overflow = originalOverflow;
+    originalOverflow = "";
+  }
+}
+function useBodyScrollLock(initialLocked = false) {
+  const locked = isRef(initialLocked) ? initialLocked : ref2(unref(initialLocked));
+  let currentLocked = false;
+  const sync = (value) => {
+    if (value === currentLocked) return;
+    if (value) {
+      lockBody();
+    } else {
+      unlockBody();
+    }
+    currentLocked = value;
+  };
+  const stop = watch(locked, sync, { immediate: true });
+  const cleanup = () => {
+    stop();
+    if (currentLocked) {
+      unlockBody();
+      currentLocked = false;
+    }
+  };
+  if (getCurrentScope()) {
+    onScopeDispose(cleanup);
+  }
+  const lock = () => {
+    locked.value = true;
+  };
+  const unlock = () => {
+    locked.value = false;
+  };
+  const toggle = (value = !locked.value) => {
+    locked.value = value;
+  };
+  return {
+    locked,
+    lock,
+    unlock,
+    toggle
+  };
+}
+
 // src/useComposition/index.ts
 function useComposition() {
   const handleCompositionStart = (event) => {
@@ -86,6 +195,75 @@ function useComposition() {
   };
 }
 
+// src/useCountDown/index.ts
+import { ref as ref3 } from "vue";
+function useCountDown(start = 60) {
+  const countRef = ref3(0);
+  let timer;
+  const trigger = (st = start) => {
+    clearTimeout(timer);
+    let loop;
+    (loop = (count) => {
+      countRef.value = count;
+      if (count <= 0) {
+        countRef.value = 0;
+        return;
+      }
+      count--;
+      timer = setTimeout(loop, 1e3, count);
+    })(st);
+  };
+  return [countRef, trigger];
+}
+
+// src/useEventListener/index.ts
+import {
+  isRef as isRef2,
+  onActivated as onActivated2,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  unref as unref2,
+  watch as watch2
+} from "vue";
+function useEventListener(type, listener, options = {}) {
+  const { target = window, passive = false, capture = false } = options;
+  let attached;
+  const add = (target2) => {
+    let element = unref2(target2);
+    if (element == null ? void 0 : element.$el) {
+      element = element.$el;
+    }
+    if (element && !attached) {
+      element.addEventListener(type, listener, {
+        capture,
+        passive
+      });
+      attached = true;
+    }
+  };
+  const remove = (target2) => {
+    let element = unref2(target2);
+    if (element == null ? void 0 : element.$el) {
+      element = element.$el;
+    }
+    if (element && attached) {
+      element.removeEventListener(type, listener, capture);
+      attached = false;
+    }
+  };
+  onUnmounted(() => remove(target));
+  onDeactivated(() => remove(target));
+  onActivated2(() => add(target));
+  onMounted(() => add(target));
+  if (isRef2(target)) {
+    watch2(target, (val, oldVal) => {
+      remove(oldVal);
+      add(val);
+    });
+  }
+}
+
 // src/useId/index.ts
 import { getCurrentInstance } from "vue";
 var current = 0;
@@ -95,11 +273,403 @@ function useId() {
   return `${name}-${++current}`;
 }
 
+// src/useKeepAlive/index.ts
+import { isNumber, isUndefined } from "@daysnap/utils";
+import { ref as ref4, watch as watch3 } from "vue";
+import { useRoute } from "vue-router";
+var keepAliveList = ref4();
+var includes = ref4([]);
+var getHistoryState = () => {
+  var _a;
+  return (_a = history.state) != null ? _a : {};
+};
+function useKeepAlive(options) {
+  var _b;
+  if (isUndefined(keepAliveList.value)) {
+    keepAliveList.value = [];
+    const route = useRoute();
+    watch3(
+      () => __spreadValues({}, route),
+      (to, from) => {
+        var _a2;
+        const { position, replaced, scroll } = getHistoryState();
+        keepAliveList.value = ((_a2 = keepAliveList.value) != null ? _a2 : []).filter((item) => {
+          const { mode, relations } = item;
+          if (mode === "custom") {
+            return true;
+          }
+          if (replaced && scroll === false) {
+            if (relations == null ? void 0 : relations.length) {
+              const formName = from.name;
+              if (relations.includes(formName)) {
+                const toName = to.name;
+                return relations.includes(toName);
+              }
+            }
+            return position > item.position;
+          }
+          return position >= item.position;
+        });
+      }
+    );
+    const ms = isNumber(options) ? options : 0;
+    watch3(
+      () => keepAliveList.value,
+      (nv, ov) => {
+        if (JSON.stringify(nv) !== JSON.stringify(ov)) {
+          setTimeout(() => {
+            var _a2, _b2;
+            includes.value = (_b2 = (_a2 = keepAliveList.value) == null ? void 0 : _a2.map((item) => item.name)) != null ? _b2 : [];
+          }, ms);
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+  }
+  if (!isNumber(options)) {
+    const _a = useRoute(), { meta } = _a, rest = __objRest(_a, ["meta"]);
+    const { name, mode, relations } = Object.assign({ mode: "auto" }, rest, meta, options);
+    const { position = 0 } = getHistoryState();
+    if (name) {
+      keepAliveList.value = [
+        ...((_b = keepAliveList.value) != null ? _b : []).filter((item) => item.name !== name),
+        { position, name, mode, relations }
+      ];
+    }
+  }
+  return {
+    keepAliveList,
+    includes
+  };
+}
+
+// src/useKeepAliveByPosition/index.ts
+import { isBoolean, isUndefined as isUndefined2 } from "@daysnap/utils";
+import { computed, ref as ref5, watch as watch4 } from "vue";
+import { useRoute as useRoute2 } from "vue-router";
+var keepAliveList2 = ref5();
+var setState = (state, ms = 0) => {
+  if (JSON.stringify(state) !== JSON.stringify(keepAliveList2.value)) {
+    setTimeout(() => keepAliveList2.value = state, ms);
+  }
+};
+var keep = (data) => {
+  var _a;
+  const { name } = data;
+  const list = [...((_a = keepAliveList2.value) != null ? _a : []).filter((item) => item.name !== name), data];
+  setState(list);
+};
+var includes2 = computed(() => keepAliveList2.value.map((item) => item.name));
+var getState = () => {
+  var _a;
+  return (_a = history.state) != null ? _a : {};
+};
+function useKeepAliveByPosition(options) {
+  if (isUndefined2(keepAliveList2.value)) {
+    keepAliveList2.value = [];
+    const route = useRoute2();
+    watch4(
+      () => __spreadValues({}, route),
+      (_, from) => {
+        var _a2;
+        const { position, replaced } = getState();
+        const list = ((_a2 = keepAliveList2.value) != null ? _a2 : []).filter((item) => {
+          const { mode, name } = item;
+          if (mode === "custom") {
+            return true;
+          }
+          if (replaced && from.name === name) {
+            return false;
+          }
+          return position >= item.position;
+        });
+        setState(list, 300);
+      }
+    );
+  }
+  if (!isBoolean(options)) {
+    const _a = useRoute2(), { meta } = _a, rest = __objRest(_a, ["meta"]);
+    const { name, mode } = Object.assign({ mode: "auto" }, rest, meta, options);
+    const { position = 0 } = getState();
+    if (name) {
+      keep({ position, name, mode });
+    }
+  }
+  return {
+    keepAliveList: keepAliveList2,
+    includes: includes2,
+    keep
+  };
+}
+
+// src/useKeepPosition/index.ts
+import { pick } from "@daysnap/utils";
+import { nextTick, onActivated as onActivated3, ref as ref6 } from "vue";
+import { onBeforeRouteLeave } from "vue-router";
+function useKeepPosition(options = {}) {
+  const { selectors } = options;
+  const state = ref6();
+  const getTarget = () => {
+    var _a, _b;
+    return (_b = (_a = options.getTarget) == null ? void 0 : _a.call(options)) != null ? _b : selectors ? document.querySelector(selectors) : document.documentElement;
+  };
+  const keep2 = () => {
+    const target = getTarget();
+    if (target) {
+      state.value = pick(target, ["scrollTop", "scrollLeft"]);
+    }
+  };
+  const restore = () => {
+    nextTick(() => {
+      var _a;
+      const target = getTarget();
+      if (target) {
+        const { scrollLeft = 0, scrollTop = 0 } = (_a = state.value) != null ? _a : {};
+        state.value = void 0;
+        const setScroll = () => {
+          target.scrollLeft = scrollLeft;
+          target.scrollTop = scrollTop;
+        };
+        setScroll();
+      }
+    });
+  };
+  onBeforeRouteLeave(() => keep2());
+  onActivated3(() => restore());
+  return { keep: keep2, restore };
+}
+
+// src/usePaging/index.ts
+import { isArray, isBoolean as isBoolean2, isFunction as isFunction2, isObject, isString } from "@daysnap/utils";
+import { computed as computed2, onBeforeMount as onBeforeMount2, reactive, ref as ref7 } from "vue";
+function usePaging(task, options = {}) {
+  const { initialStatus, immediate, scrollSelector = ".hor-scroll" } = options;
+  const pagingStatus = reactive(
+    Object.assign(
+      {
+        pagingIndex: 0,
+        pagingSize: 10,
+        pagingTotal: -1,
+        pagingError: "",
+        pagingLoading: ""
+      },
+      initialStatus
+    )
+  );
+  const scrollTop = () => {
+    if (scrollSelector) {
+      const els = document.querySelectorAll(scrollSelector);
+      const el = els[els.length - 1];
+      if (el) {
+        el.scrollTop = 0;
+      }
+    }
+  };
+  const pagingData = ref7([]);
+  const pagingReset = () => {
+    pagingStatus.pagingIndex = 0;
+    pagingStatus.pagingTotal = -1;
+    pagingStatus.pagingError = "";
+    pagingStatus.pagingLoading = false;
+    pagingData.value = [];
+  };
+  const pagingTrigger = (pagingIndex, options2) => {
+    const opt = { loading: false, toast: false };
+    if (isBoolean2(options2)) {
+      opt.loading = options2;
+      opt.toast = options2;
+    } else if (isObject(options2)) {
+      Object.assign(opt, options2);
+    }
+    if (pagingIndex === 1) {
+      setTimeout(scrollTop);
+    }
+    pagingStatus.pagingLoading = true;
+    pagingStatus.pagingError = "";
+    const promise = task([pagingIndex, pagingStatus.pagingSize], opt).then((res) => {
+      let pagingList = [];
+      let pagingTotal = -1;
+      if (isArray(res)) {
+        ;
+        [pagingList, pagingTotal] = res;
+      } else {
+        ;
+        ({ pagingList, pagingTotal } = res);
+      }
+      if (!pagingList) {
+        pagingList = [];
+      }
+      pagingStatus.pagingIndex = pagingIndex;
+      pagingStatus.pagingTotal = pagingTotal;
+      pagingData.value = pagingIndex === 1 ? pagingList : [...pagingData.value, ...pagingList];
+      if (!pagingList.length) {
+        pagingStatus.pagingTotal = pagingData.value.length;
+      }
+    });
+    (promise.toast ? promise.toast((_, msg) => {
+      pagingStatus.pagingError = msg;
+      return opt.toast;
+    }) : promise.catch((err) => {
+      pagingStatus.pagingError = isString(err) ? err : JSON.stringify(err);
+    })).finally(() => {
+      pagingStatus.pagingLoading = false;
+      if (isFunction2(options2)) {
+        options2(pagingStatus.pagingError);
+      }
+      if (pagingStatus.pagingError && pagingIndex === 1) {
+        pagingStatus.pagingIndex = pagingIndex;
+        pagingStatus.pagingTotal = -1;
+        pagingData.value = [];
+      }
+    });
+  };
+  const pagingRefresh = (options2) => {
+    pagingTrigger(1, options2);
+  };
+  const pagingLoad = (options2) => {
+    if (pagingFinished.value) {
+      if (isFunction2(options2)) {
+        options2();
+      }
+      return console.log("\u6CA1\u6709\u66F4\u591A\u4E86...");
+    }
+    if (pagingStatus.pagingLoading) {
+      return console.log("\u6B63\u5728\u52A0\u8F7D\u4E2D...");
+    }
+    pagingTrigger(pagingStatus.pagingIndex + 1, options2);
+  };
+  const pagingFinished = computed2(() => {
+    return pagingStatus.pagingTotal > 0 && pagingData.value.length >= pagingStatus.pagingTotal;
+  });
+  onBeforeMount2(() => {
+    if (immediate) {
+      pagingRefresh();
+    }
+  });
+  return {
+    pagingFinished,
+    pagingData,
+    pagingStatus,
+    pagingTrigger,
+    pagingRefresh,
+    pagingLoad,
+    pagingReset
+  };
+}
+
+// src/useParams/index.ts
+import { useRoute as useRoute3 } from "vue-router";
+function useParams() {
+  const { params } = useRoute3();
+  return params;
+}
+
+// src/useQuery/index.ts
+import { useRoute as useRoute4 } from "vue-router";
+function useQuery() {
+  const { query } = useRoute4();
+  return query;
+}
+
+// src/useState/index.ts
+import { isFunction as isFunction3 } from "@daysnap/utils";
+import { ref as ref8 } from "vue";
+function useState(initialState) {
+  const state = ref8(initialState);
+  const setState2 = (value) => {
+    state.value = isFunction3(value) ? value(state.value) : value;
+  };
+  return [state, setState2];
+}
+
+// src/useToggle/index.ts
+import { ref as ref9 } from "vue";
+function useToggle(initialValue = false) {
+  const visible = ref9(initialValue);
+  const toggle = (value = !visible.value) => {
+    visible.value = value;
+  };
+  return [visible, toggle];
+}
+
+// src/useTransfer/index.ts
+import { useRouter } from "vue-router";
+function useTransfer() {
+  const router = useRouter();
+  return (..._0) => __async(null, [..._0], function* (options = {}, ...args) {
+    const _a = options, { disabled, path, replace = false, fn, query, to } = _a, rest = __objRest(_a, ["disabled", "path", "replace", "fn", "query", "to"]);
+    if (disabled) {
+      return;
+    }
+    if (to) {
+      router.push(to);
+      return;
+    }
+    if (path) {
+      if (!query) {
+        rest.query = __spreadValues({}, options);
+      }
+      router.push(__spreadValues({ path, replace }, rest));
+      return;
+    }
+    if (fn) {
+      yield fn(options, ...args);
+      return;
+    }
+  });
+}
+
+// src/useTransitionName/index.ts
+import { ref as ref10, watch as watch5 } from "vue";
+import { useRoute as useRoute5 } from "vue-router";
+var KEY = "$$useTransitionName__state";
+var get = () => {
+  let res;
+  try {
+    res = JSON.parse(window.sessionStorage.getItem(KEY));
+  } catch (e) {
+  }
+  return res;
+};
+var set = (state) => {
+  window.sessionStorage.setItem(KEY, JSON.stringify(state));
+};
+function useTransitionName(options) {
+  const { deep } = options;
+  const name = ref10("");
+  const route = useRoute5();
+  watch5(
+    () => __spreadValues({}, route),
+    (to, from) => {
+      const { position } = history.state || {};
+      const prevState = get();
+      if (prevState && prevState.fullPath !== to.fullPath) {
+        if (position >= prevState.position) {
+          const { enterClass } = Object.assign({}, options, to.meta, to.query);
+          name.value = enterClass != null ? enterClass : "";
+        } else {
+          const { leaveClass } = Object.assign({}, options, from.meta, from.query);
+          name.value = leaveClass != null ? leaveClass : "";
+        }
+      } else {
+        name.value = "";
+      }
+      set({ fullPath: to.fullPath, position });
+    },
+    {
+      deep
+    }
+  );
+  return name;
+}
+
 // src/useVisible/index.ts
-import { ref as ref2 } from "vue";
+import { ref as ref11 } from "vue";
 function useVisible(options = {}) {
   const { showCallback, hideCallback, confirmCallback } = options;
-  const visible = ref2(false);
+  const visible = ref11(false);
   let resolve;
   let reject;
   let beforeClose;
@@ -141,8 +711,22 @@ function useVisible(options = {}) {
   };
 }
 export {
+  debounceRef,
   useAsyncTask,
+  useBodyScrollLock,
   useComposition,
+  useCountDown,
+  useEventListener,
   useId,
+  useKeepAlive,
+  useKeepAliveByPosition,
+  useKeepPosition,
+  usePaging,
+  useParams,
+  useQuery,
+  useState,
+  useToggle,
+  useTransfer,
+  useTransitionName,
   useVisible
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vrojs/use",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "description": "vrojs composables",
   "main": "dist/index.js",
@@ -28,7 +28,7 @@
     "vue-router": ">=4.2.4"
   },
   "devDependencies": {
-    "@daysnap/utils": "^0.1.34",
+    "@daysnap/utils": "^0.1.36",
     "rimraf": "^6.0.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
@@ -39,13 +39,5 @@
     "clean": "rimraf ./dist",
     "release": "npm run build && dsc publish --pnpm",
     "sync": "dsc sync"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./package.json": "./package.json"
   }
 }