@hoci/core 0.7.1 → 0.8.0

package/dist/index.cjs

@@ -3,22 +3,7 @@
 const shared = require('@hoci/shared');
 const vue = require('vue');
 const tslx = require('tslx');
-
-var _a;
-const isClient = typeof window !== "undefined";
-const isDef = (val) => typeof val !== "undefined";
-const isFunction = (val) => typeof val === "function";
-const isString = (val) => typeof val === "string";
-const noop = () => {
-};
-isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
-
-function resolveUnref(r) {
-  return typeof r === "function" ? r() : vue.unref(r);
-}
-function identity(arg) {
-  return arg;
-}
+const virtualCore = require('@tanstack/virtual-core');
 
 function tryOnScopeDispose(fn) {
   if (vue.getCurrentScope()) {
@@ -32,98 +17,234 @@ function isDefined(v) {
   return vue.unref(v) != null;
 }
 
-function syncRef(left, right, options = {}) {
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+const isDef = (val) => typeof val !== "undefined";
+const notNullish = (val) => val != null;
+const toString = Object.prototype.toString;
+const isObject = (val) => toString.call(val) === "[object Object]";
+const noop = () => {
+};
+const isIOS = /* @__PURE__ */ getIsIOS();
+function getIsIOS() {
   var _a, _b;
+  return isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window == null ? void 0 : window.navigator.userAgent));
+}
+
+function createFilterWrapper(filter, fn) {
+  function wrapper(...args) {
+    return new Promise((resolve, reject) => {
+      Promise.resolve(filter(() => fn.apply(this, args), { fn, thisArg: this, args })).then(resolve).catch(reject);
+    });
+  }
+  return wrapper;
+}
+const bypassFilter = (invoke) => {
+  return invoke();
+};
+function pausableFilter(extendFilter = bypassFilter, options = {}) {
+  const {
+    initialState = "active"
+  } = options;
+  const isActive = toRef(initialState === "active");
+  function pause() {
+    isActive.value = false;
+  }
+  function resume() {
+    isActive.value = true;
+  }
+  const eventFilter = (...args) => {
+    if (isActive.value)
+      extendFilter(...args);
+  };
+  return { isActive: vue.readonly(isActive), pause, resume, eventFilter };
+}
+function getLifeCycleTarget(target) {
+  return vue.getCurrentInstance();
+}
+function toArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+
+function toRef(...args) {
+  if (args.length !== 1)
+    return vue.toRef(...args);
+  const r = args[0];
+  return typeof r === "function" ? vue.readonly(vue.customRef(() => ({ get: r, set: noop }))) : vue.ref(r);
+}
+
+function watchWithFilter(source, cb, options = {}) {
+  const {
+    eventFilter = bypassFilter,
+    ...watchOptions
+  } = options;
+  return vue.watch(
+    source,
+    createFilterWrapper(
+      eventFilter,
+      cb
+    ),
+    watchOptions
+  );
+}
+
+function watchPausable(source, cb, options = {}) {
+  const {
+    eventFilter: filter,
+    initialState = "active",
+    ...watchOptions
+  } = options;
+  const { eventFilter, pause, resume, isActive } = pausableFilter(filter, { initialState });
+  const stop = watchWithFilter(
+    source,
+    cb,
+    {
+      ...watchOptions,
+      eventFilter
+    }
+  );
+  return { stop, pause, resume, isActive };
+}
+
+function syncRef(left, right, ...[options]) {
   const {
     flush = "sync",
     deep = false,
     immediate = true,
     direction = "both",
     transform = {}
-  } = options;
-  let watchLeft;
-  let watchRight;
-  const transformLTR = (_a = transform.ltr) != null ? _a : (v) => v;
-  const transformRTL = (_b = transform.rtl) != null ? _b : (v) => v;
+  } = options || {};
+  const watchers = [];
+  const transformLTR = "ltr" in transform && transform.ltr || ((v) => v);
+  const transformRTL = "rtl" in transform && transform.rtl || ((v) => v);
   if (direction === "both" || direction === "ltr") {
-    watchLeft = vue.watch(left, (newValue) => right.value = transformLTR(newValue), { flush, deep, immediate });
+    watchers.push(watchPausable(
+      left,
+      (newValue) => {
+        watchers.forEach((w) => w.pause());
+        right.value = transformLTR(newValue);
+        watchers.forEach((w) => w.resume());
+      },
+      { flush, deep, immediate }
+    ));
   }
   if (direction === "both" || direction === "rtl") {
-    watchRight = vue.watch(right, (newValue) => left.value = transformRTL(newValue), { flush, deep, immediate });
+    watchers.push(watchPausable(
+      right,
+      (newValue) => {
+        watchers.forEach((w) => w.pause());
+        left.value = transformRTL(newValue);
+        watchers.forEach((w) => w.resume());
+      },
+      { flush, deep, immediate }
+    ));
   }
-  return () => {
-    watchLeft == null ? void 0 : watchLeft();
-    watchRight == null ? void 0 : watchRight();
+  const stop = () => {
+    watchers.forEach((w) => w.stop());
   };
+  return stop;
 }
 
-function tryOnMounted(fn, sync = true) {
-  if (vue.getCurrentInstance())
-    vue.onMounted(fn);
+function tryOnMounted(fn, sync = true, target) {
+  const instance = getLifeCycleTarget();
+  if (instance)
+    vue.onMounted(fn, target);
   else if (sync)
     fn();
   else
     vue.nextTick(fn);
 }
 
+function watchImmediate(source, cb, options) {
+  return vue.watch(
+    source,
+    cb,
+    {
+      ...options,
+      immediate: true
+    }
+  );
+}
+
+function watchOnce(source, cb, options) {
+  const stop = vue.watch(source, (...args) => {
+    vue.nextTick(() => stop());
+    return cb(...args);
+  }, options);
+  return stop;
+}
+
+const defaultWindow = isClient ? window : void 0;
+
 function unrefElement(elRef) {
   var _a;
-  const plain = resolveUnref(elRef);
+  const plain = vue.toValue(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
-const defaultWindow = isClient ? window : void 0;
-
 function useEventListener(...args) {
-  let target;
-  let events;
-  let listeners;
-  let options;
-  if (isString(args[0]) || Array.isArray(args[0])) {
-    [events, listeners, options] = args;
-    target = defaultWindow;
-  } else {
-    [target, events, listeners, options] = args;
-  }
-  if (!target)
-    return noop;
-  if (!Array.isArray(events))
-    events = [events];
-  if (!Array.isArray(listeners))
-    listeners = [listeners];
   const cleanups = [];
   const cleanup = () => {
     cleanups.forEach((fn) => fn());
     cleanups.length = 0;
   };
-  const register = (el, event, listener) => {
+  const register = (el, event, listener, options) => {
     el.addEventListener(event, listener, options);
     return () => el.removeEventListener(event, listener, options);
   };
-  const stopWatch = vue.watch(() => unrefElement(target), (el) => {
-    cleanup();
-    if (!el)
-      return;
-    cleanups.push(...events.flatMap((event) => {
-      return listeners.map((listener) => register(el, event, listener));
-    }));
-  }, { immediate: true, flush: "post" });
+  const firstParamTargets = vue.computed(() => {
+    const test = toArray(vue.toValue(args[0])).filter((e) => e != null);
+    return test.every((e) => typeof e !== "string") ? test : void 0;
+  });
+  const stopWatch = watchImmediate(
+    () => {
+      var _a, _b;
+      return [
+        (_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
+        toArray(vue.toValue(firstParamTargets.value ? args[1] : args[0])),
+        toArray(vue.unref(firstParamTargets.value ? args[2] : args[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        vue.toValue(firstParamTargets.value ? args[3] : args[2])
+      ];
+    },
+    ([raw_targets, raw_events, raw_listeners, raw_options]) => {
+      cleanup();
+      if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
+        return;
+      const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
+      cleanups.push(
+        ...raw_targets.flatMap(
+          (el) => raw_events.flatMap(
+            (event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  );
   const stop = () => {
     stopWatch();
     cleanup();
   };
-  tryOnScopeDispose(stop);
+  tryOnScopeDispose(cleanup);
   return stop;
 }
 
+let _iOSWorkaround = false;
 function onClickOutside(target, handler, options = {}) {
-  const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
-  if (!window)
-    return;
+  const { window = defaultWindow, ignore = [], capture = true, detectIframe = false, controls = false } = options;
+  if (!window) {
+    return controls ? { stop: noop, cancel: noop, trigger: noop } : noop;
+  }
+  if (isIOS && !_iOSWorkaround) {
+    _iOSWorkaround = true;
+    const listenerOptions = { passive: true };
+    Array.from(window.document.body.children).forEach((el) => useEventListener(el, "click", noop, listenerOptions));
+    useEventListener(window.document.documentElement, "click", noop, listenerOptions);
+  }
   let shouldListen = true;
-  let fallback;
   const shouldIgnore = (event) => {
-    return ignore.some((target2) => {
+    return vue.toValue(ignore).some((target2) => {
       if (typeof target2 === "string") {
         return Array.from(window.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
       } else {
@@ -132,12 +253,26 @@ function onClickOutside(target, handler, options = {}) {
       }
     });
   };
+  function hasMultipleRoots(target2) {
+    const vm = vue.toValue(target2);
+    return vm && vm.$.subTree.shapeFlag === 16;
+  }
+  function checkMultipleRoots(target2, event) {
+    const vm = vue.toValue(target2);
+    const children = vm.$.subTree && vm.$.subTree.children;
+    if (children == null || !Array.isArray(children))
+      return false;
+    return children.some((child) => child.el === event.target || event.composedPath().includes(child.el));
+  }
   const listener = (event) => {
-    window.clearTimeout(fallback);
     const el = unrefElement(target);
+    if (event.target == null)
+      return;
+    if (!(el instanceof Element) && hasMultipleRoots(target) && checkMultipleRoots(target, event))
+      return;
     if (!el || el === event.target || event.composedPath().includes(el))
       return;
-    if (event.detail === 0)
+    if ("detail" in event && event.detail === 0)
       shouldListen = !shouldIgnore(event);
     if (!shouldListen) {
       shouldListen = true;
@@ -145,63 +280,114 @@ function onClickOutside(target, handler, options = {}) {
     }
     handler(event);
   };
+  let isProcessingClick = false;
   const cleanup = [
-    useEventListener(window, "click", listener, { passive: true, capture }),
+    useEventListener(window, "click", (event) => {
+      if (!isProcessingClick) {
+        isProcessingClick = true;
+        setTimeout(() => {
+          isProcessingClick = false;
+        }, 0);
+        listener(event);
+      }
+    }, { passive: true, capture }),
     useEventListener(window, "pointerdown", (e) => {
       const el = unrefElement(target);
-      if (el)
-        shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
-    }, { passive: true }),
-    useEventListener(window, "pointerup", (e) => {
-      if (e.button === 0) {
-        const path = e.composedPath();
-        e.composedPath = () => path;
-        fallback = window.setTimeout(() => listener(e), 50);
-      }
+      shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el));
     }, { passive: true }),
     detectIframe && useEventListener(window, "blur", (event) => {
-      var _a;
-      const el = unrefElement(target);
-      if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
-        handler(event);
-    })
+      setTimeout(() => {
+        var _a;
+        const el = unrefElement(target);
+        if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement))) {
+          handler(event);
+        }
+      }, 0);
+    }, { passive: true })
   ].filter(Boolean);
   const stop = () => cleanup.forEach((fn) => fn());
+  if (controls) {
+    return {
+      stop,
+      cancel: () => {
+        shouldListen = false;
+      },
+      trigger: (event) => {
+        shouldListen = true;
+        listener(event);
+        shouldListen = false;
+      }
+    };
+  }
   return stop;
 }
 
-function useSupported(callback, sync = false) {
-  const isSupported = vue.ref();
-  const update = () => isSupported.value = Boolean(callback());
-  update();
-  tryOnMounted(update, sync);
-  return isSupported;
+function useMounted() {
+  const isMounted = vue.shallowRef(false);
+  const instance = vue.getCurrentInstance();
+  if (instance) {
+    vue.onMounted(() => {
+      isMounted.value = true;
+    }, instance);
+  }
+  return isMounted;
 }
+
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return vue.computed(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
+}
+
+function useMutationObserver(target, callback, options = {}) {
+  const { window = defaultWindow, ...mutationOptions } = options;
+  let observer;
+  const isSupported = useSupported(() => window && "MutationObserver" in window);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const targets = vue.computed(() => {
+    const value = vue.toValue(target);
+    const items = toArray(value).map(unrefElement).filter(notNullish);
+    return new Set(items);
+  });
+  const stopWatch = vue.watch(
+    () => targets.value,
+    (targets2) => {
+      cleanup();
+      if (isSupported.value && targets2.size) {
+        observer = new MutationObserver(callback);
+        targets2.forEach((el) => observer.observe(el, mutationOptions));
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
+  const takeRecords = () => {
+    return observer == null ? void 0 : observer.takeRecords();
+  };
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop,
+    takeRecords
+  };
+}
+
 function cloneFnJSON(source) {
   return JSON.parse(JSON.stringify(source));
 }
 
-const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-const globalKey = "__vueuse_ssr_handlers__";
-_global[globalKey] = _global[globalKey] || {};
-
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __objRest$2 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 function useResizeObserver(target, callback, options = {}) {
-  const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]);
+  const { window = defaultWindow, ...observerOptions } = options;
   let observer;
   const isSupported = useSupported(() => window && "ResizeObserver" in window);
   const cleanup = () => {
@@ -210,13 +396,24 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const stopWatch = vue.watch(() => unrefElement(target), (el) => {
-    cleanup();
-    if (isSupported.value && window && el) {
-      observer = new ResizeObserver(callback);
-      observer.observe(el, observerOptions);
-    }
-  }, { immediate: true, flush: "post" });
+  const targets = vue.computed(() => {
+    const _targets = vue.toValue(target);
+    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+  });
+  const stopWatch = vue.watch(
+    targets,
+    (els) => {
+      cleanup();
+      if (isSupported.value && window) {
+        observer = new ResizeObserver(callback);
+        for (const _el of els) {
+          if (_el)
+            observer.observe(_el, observerOptions);
+        }
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
   const stop = () => {
     cleanup();
     stopWatch();
@@ -233,17 +430,18 @@ function useElementBounding(target, options = {}) {
     reset = true,
     windowResize = true,
     windowScroll = true,
-    immediate = true
+    immediate = true,
+    updateTiming = "sync"
   } = options;
-  const height = vue.ref(0);
-  const bottom = vue.ref(0);
-  const left = vue.ref(0);
-  const right = vue.ref(0);
-  const top = vue.ref(0);
-  const width = vue.ref(0);
-  const x = vue.ref(0);
-  const y = vue.ref(0);
-  function update() {
+  const height = vue.shallowRef(0);
+  const bottom = vue.shallowRef(0);
+  const left = vue.shallowRef(0);
+  const right = vue.shallowRef(0);
+  const top = vue.shallowRef(0);
+  const width = vue.shallowRef(0);
+  const x = vue.shallowRef(0);
+  const y = vue.shallowRef(0);
+  function recalculate() {
     const el = unrefElement(target);
     if (!el) {
       if (reset) {
@@ -268,8 +466,17 @@ function useElementBounding(target, options = {}) {
     x.value = rect.x;
     y.value = rect.y;
   }
+  function update() {
+    if (updateTiming === "sync")
+      recalculate();
+    else if (updateTiming === "next-frame")
+      requestAnimationFrame(() => recalculate());
+  }
   useResizeObserver(target, update);
   vue.watch(() => unrefElement(target), (ele) => !ele && update());
+  useMutationObserver(target, update, {
+    attributeFilter: ["style", "class"]
+  });
   if (windowScroll)
     useEventListener("scroll", update, { capture: true, passive: true });
   if (windowResize)
@@ -291,84 +498,101 @@ function useElementBounding(target, options = {}) {
   };
 }
 
-function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
-  const elementIsVisible = vue.ref(false);
-  const testBounding = () => {
-    if (!window)
-      return;
-    const document = window.document;
-    const el = unrefElement(element);
-    if (!el) {
-      elementIsVisible.value = false;
-    } else {
-      const rect = el.getBoundingClientRect();
-      elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
-    }
+function useIntersectionObserver(target, callback, options = {}) {
+  const {
+    root,
+    rootMargin = "0px",
+    threshold = 0,
+    window = defaultWindow,
+    immediate = true
+  } = options;
+  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
+  const targets = vue.computed(() => {
+    const _target = vue.toValue(target);
+    return toArray(_target).map(unrefElement).filter(notNullish);
+  });
+  let cleanup = noop;
+  const isActive = vue.shallowRef(immediate);
+  const stopWatch = isSupported.value ? vue.watch(
+    () => [targets.value, unrefElement(root), isActive.value],
+    ([targets2, root2]) => {
+      cleanup();
+      if (!isActive.value)
+        return;
+      if (!targets2.length)
+        return;
+      const observer = new IntersectionObserver(
+        callback,
+        {
+          root: unrefElement(root2),
+          rootMargin,
+          threshold
+        }
+      );
+      targets2.forEach((el) => el && observer.observe(el));
+      cleanup = () => {
+        observer.disconnect();
+        cleanup = noop;
+      };
+    },
+    { immediate, flush: "post" }
+  ) : noop;
+  const stop = () => {
+    cleanup();
+    stopWatch();
+    isActive.value = false;
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    isActive,
+    pause() {
+      cleanup();
+      isActive.value = false;
+    },
+    resume() {
+      isActive.value = true;
+    },
+    stop
   };
-  vue.watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
-  if (window) {
-    useEventListener(scrollTarget || window, "scroll", testBounding, {
-      capture: false,
-      passive: true
-    });
-  }
-  return elementIsVisible;
 }
 
-var SwipeDirection;
-(function(SwipeDirection2) {
-  SwipeDirection2["UP"] = "UP";
-  SwipeDirection2["RIGHT"] = "RIGHT";
-  SwipeDirection2["DOWN"] = "DOWN";
-  SwipeDirection2["LEFT"] = "LEFT";
-  SwipeDirection2["NONE"] = "NONE";
-})(SwipeDirection || (SwipeDirection = {}));
-
-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]);
+function useElementVisibility(element, options = {}) {
+  const {
+    window = defaultWindow,
+    scrollTarget,
+    threshold = 0,
+    rootMargin,
+    once = false
+  } = options;
+  const elementIsVisible = vue.shallowRef(false);
+  const { stop } = useIntersectionObserver(
+    element,
+    (intersectionObserverEntries) => {
+      let isIntersecting = elementIsVisible.value;
+      let latestTime = 0;
+      for (const entry of intersectionObserverEntries) {
+        if (entry.time >= latestTime) {
+          latestTime = entry.time;
+          isIntersecting = entry.isIntersecting;
+        }
+      }
+      elementIsVisible.value = isIntersecting;
+      if (once) {
+        watchOnce(elementIsVisible, () => {
+          stop();
+        });
+      }
+    },
+    {
+      root: scrollTarget,
+      window,
+      threshold,
+      rootMargin: vue.toValue(rootMargin)
     }
-  return a;
-};
-const _TransitionPresets = {
-  easeInSine: [0.12, 0, 0.39, 0],
-  easeOutSine: [0.61, 1, 0.88, 1],
-  easeInOutSine: [0.37, 0, 0.63, 1],
-  easeInQuad: [0.11, 0, 0.5, 0],
-  easeOutQuad: [0.5, 1, 0.89, 1],
-  easeInOutQuad: [0.45, 0, 0.55, 1],
-  easeInCubic: [0.32, 0, 0.67, 0],
-  easeOutCubic: [0.33, 1, 0.68, 1],
-  easeInOutCubic: [0.65, 0, 0.35, 1],
-  easeInQuart: [0.5, 0, 0.75, 0],
-  easeOutQuart: [0.25, 1, 0.5, 1],
-  easeInOutQuart: [0.76, 0, 0.24, 1],
-  easeInQuint: [0.64, 0, 0.78, 0],
-  easeOutQuint: [0.22, 1, 0.36, 1],
-  easeInOutQuint: [0.83, 0, 0.17, 1],
-  easeInExpo: [0.7, 0, 0.84, 0],
-  easeOutExpo: [0.16, 1, 0.3, 1],
-  easeInOutExpo: [0.87, 0, 0.13, 1],
-  easeInCirc: [0.55, 0, 1, 0.45],
-  easeOutCirc: [0, 0.55, 0.45, 1],
-  easeInOutCirc: [0.85, 0, 0.15, 1],
-  easeInBack: [0.36, 0, 0.66, -0.56],
-  easeOutBack: [0.34, 1.56, 0.64, 1],
-  easeInOutBack: [0.68, -0.6, 0.32, 1.6]
-};
-__spreadValues({
-  linear: identity
-}, _TransitionPresets);
+  );
+  return elementIsVisible;
+}
 
 function useVModel(props, key, emit, options = {}) {
   var _a, _b, _c;
@@ -377,27 +601,48 @@ function useVModel(props, key, emit, options = {}) {
     passive = false,
     eventName,
     deep = false,
-    defaultValue
+    defaultValue,
+    shouldEmit
   } = options;
   const vm = vue.getCurrentInstance();
   const _emit = emit || (vm == null ? void 0 : vm.emit) || ((_a = vm == null ? void 0 : vm.$emit) == null ? void 0 : _a.bind(vm)) || ((_c = (_b = vm == null ? void 0 : vm.proxy) == null ? void 0 : _b.$emit) == null ? void 0 : _c.bind(vm == null ? void 0 : vm.proxy));
   let event = eventName;
   if (!key) {
-    {
-      key = "modelValue";
-    }
+    key = "modelValue";
   }
-  event = eventName || event || `update:${key.toString()}`;
-  const cloneFn = (val) => !clone ? val : isFunction(clone) ? clone(val) : cloneFnJSON(val);
+  event = event || `update:${key.toString()}`;
+  const cloneFn = (val) => !clone ? val : typeof clone === "function" ? clone(val) : cloneFnJSON(val);
   const getValue = () => isDef(props[key]) ? cloneFn(props[key]) : defaultValue;
+  const triggerEmit = (value) => {
+    if (shouldEmit) {
+      if (shouldEmit(value))
+        _emit(event, value);
+    } else {
+      _emit(event, value);
+    }
+  };
   if (passive) {
     const initialValue = getValue();
     const proxy = vue.ref(initialValue);
-    vue.watch(() => props[key], (v) => proxy.value = cloneFn(v));
-    vue.watch(proxy, (v) => {
-      if (v !== props[key] || deep)
-        _emit(event, v);
-    }, { deep });
+    let isUpdating = false;
+    vue.watch(
+      () => props[key],
+      (v) => {
+        if (!isUpdating) {
+          isUpdating = true;
+          proxy.value = cloneFn(v);
+          vue.nextTick(() => isUpdating = false);
+        }
+      }
+    );
+    vue.watch(
+      proxy,
+      (v) => {
+        if (!isUpdating && (v !== props[key] || deep))
+          triggerEmit(v);
+      },
+      { deep }
+    );
     return proxy;
   } else {
     return vue.computed({
@@ -405,7 +650,7 @@ function useVModel(props, key, emit, options = {}) {
         return getValue();
       },
       set(value) {
-        _emit(event, value);
+        triggerEmit(value);
       }
     });
   }
@@ -1282,6 +1527,128 @@ const useSwitch = shared.defineHookComponent({
   }
 });
 
+const virtualListProps = shared.defineHookProps({
+  options: {
+    type: Object,
+    default: () => ({})
+  },
+  count: {
+    type: Number,
+    default: () => 0
+  },
+  estimateSize: {
+    type: [Function, Number],
+    default: () => 50
+  },
+  horizontal: {
+    type: Boolean,
+    default: () => false
+  }
+});
+const virtualListEmits = shared.defineHookEmits({
+  scrollEnd: () => true,
+  scrollStart: () => true,
+  scroll: (_) => true
+});
+const useVirtualList = shared.defineHookComponent({
+  props: virtualListProps,
+  emits: virtualListEmits,
+  setup(props, context) {
+    const { emit } = context;
+    const scrollElementRef = shared.elementRef();
+    const propsEstimateSize = props.estimateSize;
+    const estimateSize = typeof propsEstimateSize === "function" ? propsEstimateSize : () => propsEstimateSize;
+    const options = vue.computed(() => {
+      const opts = { ...props.options || {} };
+      return {
+        ...opts,
+        count: props.count,
+        estimateSize,
+        horizontal: props.horizontal,
+        getScrollElement: () => scrollElementRef.value,
+        observeElementRect: virtualCore.observeElementRect,
+        observeElementOffset: virtualCore.observeElementOffset,
+        scrollToFn: virtualCore.elementScroll
+      };
+    });
+    const virtualizer = new virtualCore.Virtualizer(options.value);
+    const state = vue.shallowRef(virtualizer);
+    const virtualItems = vue.computed(() => state.value.getVirtualItems());
+    const virtualIndexes = vue.computed(() => state.value.getVirtualIndexes());
+    const totalSize = vue.computed(() => state.value.getTotalSize());
+    vue.watch(
+      virtualIndexes,
+      (indexes) => {
+        if (indexes.length === 0) {
+          return;
+        }
+        if (indexes[indexes.length - 1] === props.count - 1) {
+          emit("scrollEnd");
+        } else if (indexes[0] === 0) {
+          emit("scrollStart");
+        }
+        emit("scroll", indexes);
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      options,
+      (opts) => {
+        virtualizer.setOptions({
+          ...opts,
+          onChange: (instance, sync) => {
+            opts.onChange?.(instance, sync);
+            vue.triggerRef(state);
+          }
+        });
+        virtualizer._willUpdate();
+        vue.triggerRef(state);
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      scrollElementRef,
+      (el) => {
+        if (el) {
+          virtualizer._willUpdate();
+          vue.triggerRef(state);
+        }
+      },
+      { immediate: true }
+    );
+    tryOnScopeDispose(virtualizer._didMount());
+    const measureElement = (el) => {
+      virtualizer.measureElement(el);
+    };
+    const scrollToIndex = (index, options2 = {
+      behavior: "smooth"
+    }) => {
+      virtualizer.scrollToIndex(index, options2);
+    };
+    const scrollToStart = (options2 = {
+      behavior: "smooth"
+    }) => {
+      scrollToIndex(0, options2);
+    };
+    const scrollToEnd = (options2 = {
+      behavior: "smooth"
+    }) => {
+      scrollToIndex(props.count - 1, options2);
+    };
+    return {
+      virtualizer,
+      virtualItems,
+      virtualIndexes,
+      totalSize,
+      scrollElementRef,
+      measureElement,
+      scrollToIndex,
+      scrollToStart,
+      scrollToEnd
+    };
+  }
+});
+
 exports.AFFIX_TARGET_KEY = AFFIX_TARGET_KEY;
 exports.affixEmits = affixEmits;
 exports.affixProps = affixProps;
@@ -1306,6 +1673,9 @@ exports.useSelectionContext = useSelectionContext;
 exports.useSelectionItem = useSelectionItem;
 exports.useSelectionList = useSelectionList;
 exports.useSwitch = useSwitch;
+exports.useVirtualList = useVirtualList;
+exports.virtualListEmits = virtualListEmits;
+exports.virtualListProps = virtualListProps;
 Object.prototype.hasOwnProperty.call(shared, '__proto__') &&
   !Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
   Object.defineProperty(exports, '__proto__', {