@vueuse/shared 8.8.0 → 8.9.1

package/index.cjs

@@ -34,31 +34,219 @@ function computedEager(fn, options) {
   return vueDemi.readonly(result);
 }
 
+var _a;
+const isClient = typeof window !== "undefined";
+const isDef = (val) => typeof val !== "undefined";
+const assert = (condition, ...infos) => {
+  if (!condition)
+    console.warn(...infos);
+};
+const toString = Object.prototype.toString;
+const isBoolean = (val) => typeof val === "boolean";
+const isFunction = (val) => typeof val === "function";
+const isNumber = (val) => typeof val === "number";
+const isString = (val) => typeof val === "string";
+const isObject = (val) => toString.call(val) === "[object Object]";
+const isWindow = (val) => typeof window !== "undefined" && toString.call(val) === "[object Window]";
+const now = () => Date.now();
+const timestamp = () => +Date.now();
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+const noop = () => {
+};
+const rand = (min, max) => {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+const isIOS = isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+
+function createFilterWrapper(filter, fn) {
+  function wrapper(...args) {
+    filter(() => fn.apply(this, args), { fn, thisArg: this, args });
+  }
+  return wrapper;
+}
+const bypassFilter = (invoke) => {
+  return invoke();
+};
+function debounceFilter(ms, options = {}) {
+  let timer;
+  let maxTimer;
+  const filter = (invoke) => {
+    const duration = vueDemi.unref(ms);
+    const maxDuration = vueDemi.unref(options.maxWait);
+    if (timer)
+      clearTimeout(timer);
+    if (duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
+      if (maxTimer) {
+        clearTimeout(maxTimer);
+        maxTimer = null;
+      }
+      return invoke();
+    }
+    if (maxDuration && !maxTimer) {
+      maxTimer = setTimeout(() => {
+        if (timer)
+          clearTimeout(timer);
+        maxTimer = null;
+        invoke();
+      }, maxDuration);
+    }
+    timer = setTimeout(() => {
+      if (maxTimer)
+        clearTimeout(maxTimer);
+      maxTimer = null;
+      invoke();
+    }, duration);
+  };
+  return filter;
+}
+function throttleFilter(ms, trailing = true, leading = true) {
+  let lastExec = 0;
+  let timer;
+  let isLeading = true;
+  const clear = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+  };
+  const filter = (invoke) => {
+    const duration = vueDemi.unref(ms);
+    const elapsed = Date.now() - lastExec;
+    clear();
+    if (duration <= 0) {
+      lastExec = Date.now();
+      return invoke();
+    }
+    if (elapsed > duration && (leading || !isLeading)) {
+      lastExec = Date.now();
+      invoke();
+    } else if (trailing) {
+      timer = setTimeout(() => {
+        lastExec = Date.now();
+        isLeading = true;
+        clear();
+        invoke();
+      }, duration);
+    }
+    if (!leading && !timer)
+      timer = setTimeout(() => isLeading = true, duration);
+    isLeading = false;
+  };
+  return filter;
+}
+function pausableFilter(extendFilter = bypassFilter) {
+  const isActive = vueDemi.ref(true);
+  function pause() {
+    isActive.value = false;
+  }
+  function resume() {
+    isActive.value = true;
+  }
+  const eventFilter = (...args) => {
+    if (isActive.value)
+      extendFilter(...args);
+  };
+  return { isActive, pause, resume, eventFilter };
+}
+
+function __onlyVue3(name = "this function") {
+  if (vueDemi.isVue3)
+    return;
+  throw new Error(`[VueUse] ${name} is only works on Vue 3.`);
+}
+const directiveHooks = {
+  mounted: vueDemi.isVue3 ? "mounted" : "inserted",
+  updated: vueDemi.isVue3 ? "updated" : "componentUpdated",
+  unmounted: vueDemi.isVue3 ? "unmounted" : "unbind"
+};
+
+function promiseTimeout(ms, throwOnTimeout = false, reason = "Timeout") {
+  return new Promise((resolve, reject) => {
+    if (throwOnTimeout)
+      setTimeout(() => reject(reason), ms);
+    else
+      setTimeout(resolve, ms);
+  });
+}
+function identity(arg) {
+  return arg;
+}
+function createSingletonPromise(fn) {
+  let _promise;
+  function wrapper() {
+    if (!_promise)
+      _promise = fn();
+    return _promise;
+  }
+  wrapper.reset = async () => {
+    const _prev = _promise;
+    _promise = void 0;
+    if (_prev)
+      await _prev;
+  };
+  return wrapper;
+}
+function invoke(fn) {
+  return fn();
+}
+function containsProp(obj, ...props) {
+  return props.some((k) => k in obj);
+}
+function increaseWithUnit(target, delta) {
+  var _a;
+  if (typeof target === "number")
+    return target + delta;
+  const value = ((_a = target.match(/^-?[0-9]+\.?[0-9]*/)) == null ? void 0 : _a[0]) || "";
+  const unit = target.slice(value.length);
+  const result = parseFloat(value) + delta;
+  if (Number.isNaN(result))
+    return target;
+  return result + unit;
+}
+function objectPick(obj, keys, omitUndefined = false) {
+  return keys.reduce((n, k) => {
+    if (k in obj) {
+      if (!omitUndefined || obj[k] !== void 0)
+        n[k] = obj[k];
+    }
+    return n;
+  }, {});
+}
+
 function computedWithControl(source, fn) {
   let v = void 0;
   let track;
   let trigger;
   const dirty = vueDemi.ref(true);
-  vueDemi.watch(source, () => {
+  const update = () => {
     dirty.value = true;
     trigger();
-  }, { flush: "sync" });
-  return vueDemi.customRef((_track, _trigger) => {
+  };
+  vueDemi.watch(source, update, { flush: "sync" });
+  const get = isFunction(fn) ? fn : fn.get;
+  const set = isFunction(fn) ? void 0 : fn.set;
+  const result = vueDemi.customRef((_track, _trigger) => {
     track = _track;
     trigger = _trigger;
     return {
       get() {
         if (dirty.value) {
-          v = fn();
+          v = get();
           dirty.value = false;
         }
         track();
         return v;
       },
-      set() {
+      set(v2) {
+        set == null ? void 0 : set(v2);
       }
     };
   });
+  if (Object.isExtensible(result))
+    result.trigger = update;
+  return result;
 }
 
 function createEventHook() {
@@ -137,17 +325,6 @@ function createSharedComposable(composable) {
   };
 }
 
-function __onlyVue3(name = "this function") {
-  if (vueDemi.isVue3)
-    return;
-  throw new Error(`[VueUse] ${name} is only works on Vue 3.`);
-}
-const directiveHooks = {
-  mounted: vueDemi.isVue3 ? "mounted" : "inserted",
-  updated: vueDemi.isVue3 ? "updated" : "componentUpdated",
-  unmounted: vueDemi.isVue3 ? "unmounted" : "unbind"
-};
-
 function extendRef(ref, extend, { enumerable = false, unwrap = true } = {}) {
   __onlyVue3();
   for (const [key, value] of Object.entries(extend)) {
@@ -327,176 +504,6 @@ function refAutoReset(defaultValue, afterMs = 1e4) {
   });
 }
 
-var _a;
-const isClient = typeof window !== "undefined";
-const isDef = (val) => typeof val !== "undefined";
-const assert = (condition, ...infos) => {
-  if (!condition)
-    console.warn(...infos);
-};
-const toString = Object.prototype.toString;
-const isBoolean = (val) => typeof val === "boolean";
-const isFunction = (val) => typeof val === "function";
-const isNumber = (val) => typeof val === "number";
-const isString = (val) => typeof val === "string";
-const isObject = (val) => toString.call(val) === "[object Object]";
-const isWindow = (val) => typeof window !== "undefined" && toString.call(val) === "[object Window]";
-const now = () => Date.now();
-const timestamp = () => +Date.now();
-const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
-const noop = () => {
-};
-const rand = (min, max) => {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-};
-const isIOS = isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
-
-function createFilterWrapper(filter, fn) {
-  function wrapper(...args) {
-    filter(() => fn.apply(this, args), { fn, thisArg: this, args });
-  }
-  return wrapper;
-}
-const bypassFilter = (invoke) => {
-  return invoke();
-};
-function debounceFilter(ms, options = {}) {
-  let timer;
-  let maxTimer;
-  const filter = (invoke) => {
-    const duration = vueDemi.unref(ms);
-    const maxDuration = vueDemi.unref(options.maxWait);
-    if (timer)
-      clearTimeout(timer);
-    if (duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
-      if (maxTimer) {
-        clearTimeout(maxTimer);
-        maxTimer = null;
-      }
-      return invoke();
-    }
-    if (maxDuration && !maxTimer) {
-      maxTimer = setTimeout(() => {
-        if (timer)
-          clearTimeout(timer);
-        maxTimer = null;
-        invoke();
-      }, maxDuration);
-    }
-    timer = setTimeout(() => {
-      if (maxTimer)
-        clearTimeout(maxTimer);
-      maxTimer = null;
-      invoke();
-    }, duration);
-  };
-  return filter;
-}
-function throttleFilter(ms, trailing = true, leading = true) {
-  let lastExec = 0;
-  let timer;
-  let isLeading = true;
-  const clear = () => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = void 0;
-    }
-  };
-  const filter = (invoke) => {
-    const duration = vueDemi.unref(ms);
-    const elapsed = Date.now() - lastExec;
-    clear();
-    if (duration <= 0) {
-      lastExec = Date.now();
-      return invoke();
-    }
-    if (elapsed > duration && (leading || !isLeading)) {
-      lastExec = Date.now();
-      invoke();
-    } else if (trailing) {
-      timer = setTimeout(() => {
-        lastExec = Date.now();
-        isLeading = true;
-        clear();
-        invoke();
-      }, duration);
-    }
-    if (!leading && !timer)
-      timer = setTimeout(() => isLeading = true, duration);
-    isLeading = false;
-  };
-  return filter;
-}
-function pausableFilter(extendFilter = bypassFilter) {
-  const isActive = vueDemi.ref(true);
-  function pause() {
-    isActive.value = false;
-  }
-  function resume() {
-    isActive.value = true;
-  }
-  const eventFilter = (...args) => {
-    if (isActive.value)
-      extendFilter(...args);
-  };
-  return { isActive, pause, resume, eventFilter };
-}
-
-function promiseTimeout(ms, throwOnTimeout = false, reason = "Timeout") {
-  return new Promise((resolve, reject) => {
-    if (throwOnTimeout)
-      setTimeout(() => reject(reason), ms);
-    else
-      setTimeout(resolve, ms);
-  });
-}
-function identity(arg) {
-  return arg;
-}
-function createSingletonPromise(fn) {
-  let _promise;
-  function wrapper() {
-    if (!_promise)
-      _promise = fn();
-    return _promise;
-  }
-  wrapper.reset = async () => {
-    const _prev = _promise;
-    _promise = void 0;
-    if (_prev)
-      await _prev;
-  };
-  return wrapper;
-}
-function invoke(fn) {
-  return fn();
-}
-function containsProp(obj, ...props) {
-  return props.some((k) => k in obj);
-}
-function increaseWithUnit(target, delta) {
-  var _a;
-  if (typeof target === "number")
-    return target + delta;
-  const value = ((_a = target.match(/^-?[0-9]+\.?[0-9]*/)) == null ? void 0 : _a[0]) || "";
-  const unit = target.slice(value.length);
-  const result = parseFloat(value) + delta;
-  if (Number.isNaN(result))
-    return target;
-  return result + unit;
-}
-function objectPick(obj, keys, omitUndefined = false) {
-  return keys.reduce((n, k) => {
-    if (k in obj) {
-      if (!omitUndefined || obj[k] !== void 0)
-        n[k] = obj[k];
-    }
-    return n;
-  }, {});
-}
-
 function useDebounceFn(fn, ms = 200, options = {}) {
   return createFilterWrapper(debounceFilter(ms, options), fn);
 }
@@ -1062,6 +1069,31 @@ function useToggle(initialValue = false, options = {}) {
     return [innerValue, toggle];
 }
 
+function watchArray(source, cb, options) {
+  let oldList = (options == null ? void 0 : options.immediate) ? [] : [
+    ...source instanceof Function ? source() : Array.isArray(source) ? source : vueDemi.unref(source)
+  ];
+  return vueDemi.watch(source, (newList, _, onCleanup) => {
+    const oldListRemains = new Array(oldList.length);
+    const added = [];
+    for (const obj of newList) {
+      let found = false;
+      for (let i = 0; i < oldList.length; i++) {
+        if (!oldListRemains[i] && obj === oldList[i]) {
+          oldListRemains[i] = true;
+          found = true;
+          break;
+        }
+      }
+      if (!found)
+        added.push(obj);
+    }
+    const removed = oldList.filter((_2, i) => !oldListRemains[i]);
+    cb(newList, oldList, added, removed, onCleanup);
+    oldList = [...newList];
+  }, options);
+}
+
 var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
 var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
 var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -1504,6 +1536,7 @@ exports.useThrottleFn = useThrottleFn;
 exports.useTimeout = useTimeout;
 exports.useTimeoutFn = useTimeoutFn;
 exports.useToggle = useToggle;
+exports.watchArray = watchArray;
 exports.watchAtMost = watchAtMost;
 exports.watchDebounced = watchDebounced;
 exports.watchIgnorable = watchIgnorable;

package/index.d.ts

@@ -1,16 +1,21 @@
 import * as vue_demi from 'vue-demi';
-import { WatchOptionsBase, Ref, WatchSource, ComputedRef, ShallowUnwrapRef as ShallowUnwrapRef$1, WatchOptions, UnwrapRef, ToRefs, WatchCallback, WatchStopHandle } from 'vue-demi';
+import { WatchOptionsBase, Ref, ComputedRef, WritableComputedRef, WatchSource, ComputedGetter, WritableComputedOptions, ShallowUnwrapRef as ShallowUnwrapRef$1, WatchOptions, UnwrapRef, ToRefs, WatchCallback, WatchStopHandle } from 'vue-demi';
 import { MaybeRef as MaybeRef$1 } from '@vueuse/shared';
 
 declare function computedEager<T>(fn: () => T, options?: WatchOptionsBase): Readonly<Ref<T>>;
 
-/**
- * Explicitly define the deps of computed.
- *
- * @param source
- * @param fn
- */
-declare function computedWithControl<T, S>(source: WatchSource<S> | WatchSource<S>[], fn: () => T): ComputedRef<T>;
+interface ComputedWithControlRefExtra {
+    /**
+     * Force update the computed value.
+     */
+    trigger(): void;
+}
+interface ComputedRefWithControl<T> extends ComputedRef<T>, ComputedWithControlRefExtra {
+}
+interface WritableComputedRefWithControl<T> extends WritableComputedRef<T>, ComputedWithControlRefExtra {
+}
+declare function computedWithControl<T, S>(source: WatchSource<S> | WatchSource<S>[], fn: ComputedGetter<T>): ComputedRefWithControl<T>;
+declare function computedWithControl<T, S>(source: WatchSource<S> | WatchSource<S>[], fn: WritableComputedOptions<T>): WritableComputedRefWithControl<T>;
 
 /**
  * The source code for this function was inspired by vue-apollo's `useEventHook` util
@@ -789,6 +794,14 @@ interface UseToggleOptions<Truthy, Falsy> {
 declare function useToggle<Truthy, Falsy, T = Truthy | Falsy>(initialValue: Ref<T>, options?: UseToggleOptions<Truthy, Falsy>): (value?: T) => T;
 declare function useToggle<Truthy = true, Falsy = false, T = Truthy | Falsy>(initialValue?: T, options?: UseToggleOptions<Truthy, Falsy>): [Ref<T>, (value?: T) => T];
 
+declare type WatchArrayCallback<V = any, OV = any> = (value: V, oldValue: OV, added: V, removed: OV, onCleanup: (cleanupFn: () => void) => void) => any;
+/**
+ * Watch for an array with additions and removals.
+ *
+ * @see https://vueuse.org/watchArray
+ */
+declare function watchArray<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T[]> | T[], cb: WatchArrayCallback<T[], Immediate extends true ? T[] | undefined : T[]>, options?: WatchOptions<Immediate>): vue_demi.WatchStopHandle;
+
 interface WatchWithFilterOptions<Immediate> extends WatchOptions<Immediate>, ConfigurableEventFilter {
 }
 declare function watchWithFilter<T extends Readonly<WatchSource<unknown>[]>, Immediate extends Readonly<boolean> = false>(sources: [...T], cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>, options?: WatchWithFilterOptions<Immediate>): WatchStopHandle;
@@ -858,4 +871,4 @@ declare function watchTriggerable<T extends object, FnReturnT>(source: T, cb: Wa
  */
 declare function whenever<T>(source: WatchSource<T | false | null | undefined>, cb: WatchCallback<T>, options?: WatchOptions): vue_demi.WatchStopHandle;
 
-export { Awaitable, ConfigurableEventFilter, ConfigurableFlush, ConfigurableFlushSync, ControlledRefOptions, CreateGlobalStateReturn, DateLike, DebounceFilterOptions, DeepMaybeRef, ElementOf, EventFilter, EventHook, EventHookOff, EventHookOn, EventHookTrigger, ExtendRefOptions, Fn, FunctionArgs, FunctionWrapperOptions, IgnoredUpdater, IntervalFnOptions, IntervalOptions, MapOldSources, MapSources, MaybeComputedRef, MaybeRef, Pausable, Reactify, ReactifyNested, ReactifyObjectOptions, RemovableRef, RemoveableRef, ShallowUnwrapRef, SingletonPromiseReturn, Stopable, Stoppable, SyncRefOptions, SyncRefsOptions, TimeoutFnOptions, TimeoutOptions, UntilArrayInstance, UntilBaseInstance, UntilToMatchOptions, UntilValueInstance, UseCounterOptions, UseDateFormatReturn, UseLastChangedOptions, UseToggleOptions, WatchAtMostOptions, WatchAtMostReturn, WatchDebouncedOptions, WatchIgnorableReturn, WatchPausableReturn, WatchThrottledOptions, WatchTriggerableCallback, WatchTriggerableReturn, WatchWithFilterOptions, __onlyVue3, logicAnd as and, assert, refAutoReset as autoResetRef, bypassFilter, clamp, computedEager, computedWithControl, containsProp, computedWithControl as controlledComputed, controlledRef, createEventHook, createFilterWrapper, createGlobalState, createInjectionState, reactify as createReactiveFn, createSharedComposable, createSingletonPromise, debounceFilter, refDebounced as debouncedRef, watchDebounced as debouncedWatch, directiveHooks, computedEager as eagerComputed, extendRef, formatDate, get, identity, watchIgnorable as ignorableWatch, increaseWithUnit, invoke, isBoolean, isClient, isDef, isDefined, isFunction, isIOS, isNumber, isObject, isString, isWindow, logicAnd, logicNot, logicOr, makeDestructurable, noop, normalizeDate, logicNot as not, now, objectPick, logicOr as or, pausableFilter, watchPausable as pausableWatch, promiseTimeout, rand, reactify, reactifyObject, reactiveComputed, reactiveOmit, reactivePick, refAutoReset, refDebounced, refDefault, refThrottled, refWithControl, resolveRef, resolveUnref, set, syncRef, syncRefs, throttleFilter, refThrottled as throttledRef, watchThrottled as throttledWatch, timestamp, toReactive, toRefs, tryOnBeforeMount, tryOnBeforeUnmount, tryOnMounted, tryOnScopeDispose, tryOnUnmounted, until, useCounter, useDateFormat, refDebounced as useDebounce, useDebounceFn, useInterval, useIntervalFn, useLastChanged, refThrottled as useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useToggle, watchAtMost, watchDebounced, watchIgnorable, watchOnce, watchPausable, watchThrottled, watchTriggerable, watchWithFilter, whenever };
+export { Awaitable, ComputedRefWithControl, ComputedWithControlRefExtra, ConfigurableEventFilter, ConfigurableFlush, ConfigurableFlushSync, ControlledRefOptions, CreateGlobalStateReturn, DateLike, DebounceFilterOptions, DeepMaybeRef, ElementOf, EventFilter, EventHook, EventHookOff, EventHookOn, EventHookTrigger, ExtendRefOptions, Fn, FunctionArgs, FunctionWrapperOptions, IgnoredUpdater, IntervalFnOptions, IntervalOptions, MapOldSources, MapSources, MaybeComputedRef, MaybeRef, Pausable, Reactify, ReactifyNested, ReactifyObjectOptions, RemovableRef, RemoveableRef, ShallowUnwrapRef, SingletonPromiseReturn, Stopable, Stoppable, SyncRefOptions, SyncRefsOptions, TimeoutFnOptions, TimeoutOptions, UntilArrayInstance, UntilBaseInstance, UntilToMatchOptions, UntilValueInstance, UseCounterOptions, UseDateFormatReturn, UseLastChangedOptions, UseToggleOptions, WatchArrayCallback, WatchAtMostOptions, WatchAtMostReturn, WatchDebouncedOptions, WatchIgnorableReturn, WatchPausableReturn, WatchThrottledOptions, WatchTriggerableCallback, WatchTriggerableReturn, WatchWithFilterOptions, WritableComputedRefWithControl, __onlyVue3, logicAnd as and, assert, refAutoReset as autoResetRef, bypassFilter, clamp, computedEager, computedWithControl, containsProp, computedWithControl as controlledComputed, controlledRef, createEventHook, createFilterWrapper, createGlobalState, createInjectionState, reactify as createReactiveFn, createSharedComposable, createSingletonPromise, debounceFilter, refDebounced as debouncedRef, watchDebounced as debouncedWatch, directiveHooks, computedEager as eagerComputed, extendRef, formatDate, get, identity, watchIgnorable as ignorableWatch, increaseWithUnit, invoke, isBoolean, isClient, isDef, isDefined, isFunction, isIOS, isNumber, isObject, isString, isWindow, logicAnd, logicNot, logicOr, makeDestructurable, noop, normalizeDate, logicNot as not, now, objectPick, logicOr as or, pausableFilter, watchPausable as pausableWatch, promiseTimeout, rand, reactify, reactifyObject, reactiveComputed, reactiveOmit, reactivePick, refAutoReset, refDebounced, refDefault, refThrottled, refWithControl, resolveRef, resolveUnref, set, syncRef, syncRefs, throttleFilter, refThrottled as throttledRef, watchThrottled as throttledWatch, timestamp, toReactive, toRefs, tryOnBeforeMount, tryOnBeforeUnmount, tryOnMounted, tryOnScopeDispose, tryOnUnmounted, until, useCounter, useDateFormat, refDebounced as useDebounce, useDebounceFn, useInterval, useIntervalFn, useLastChanged, refThrottled as useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useToggle, watchArray, watchAtMost, watchDebounced, watchIgnorable, watchOnce, watchPausable, watchThrottled, watchTriggerable, watchWithFilter, whenever };