@hoci/core 0.7.0 → 0.8.0

package/dist/index.mjs

@@ -1,23 +1,8 @@
-import { defineHookProps, defineHookEmits, defineHookComponent, elementRef, toReactive, useElement, throttleByRaf, isWindow, useSharedConfig, valuePropType, labelPropType, classPropType, getFirstChilld } from '@hoci/shared';
+import { defineHookProps, defineHookEmits, defineHookComponent, elementRef, toReactive, useElement, throttleByRaf, isWindow, toArray as toArray$1, useSharedConfig, valuePropType, labelPropType, classPropType, getFirstChilld } from '@hoci/shared';
 export * from '@hoci/shared';
-import { getCurrentInstance, onMounted, nextTick, getCurrentScope, onScopeDispose, unref, watch, ref, computed, inject, watchPostEffect, provide, reactive, renderSlot } from 'vue';
+import { onMounted, nextTick, watch, getCurrentScope, onScopeDispose, getCurrentInstance, unref, readonly, toRef as toRef$1, ref, customRef, shallowRef, toValue, computed, inject, watchPostEffect, provide, reactive, renderSlot, triggerRef } from 'vue';
 import { px, createUnitFormat, cls } from '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() : unref(r);
-}
-function identity(arg) {
-  return arg;
-}
+import { elementScroll, observeElementOffset, observeElementRect, Virtualizer } from '@tanstack/virtual-core';
 
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
@@ -31,98 +16,234 @@ function isDefined(v) {
   return 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: readonly(isActive), pause, resume, eventFilter };
+}
+function getLifeCycleTarget(target) {
+  return getCurrentInstance();
+}
+function toArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+
+function toRef(...args) {
+  if (args.length !== 1)
+    return toRef$1(...args);
+  const r = args[0];
+  return typeof r === "function" ? readonly(customRef(() => ({ get: r, set: noop }))) : ref(r);
+}
+
+function watchWithFilter(source, cb, options = {}) {
+  const {
+    eventFilter = bypassFilter,
+    ...watchOptions
+  } = options;
+  return 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 = 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 = 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 (getCurrentInstance())
-    onMounted(fn);
+function tryOnMounted(fn, sync = true, target) {
+  const instance = getLifeCycleTarget();
+  if (instance)
+    onMounted(fn, target);
   else if (sync)
     fn();
   else
     nextTick(fn);
 }
 
+function watchImmediate(source, cb, options) {
+  return watch(
+    source,
+    cb,
+    {
+      ...options,
+      immediate: true
+    }
+  );
+}
+
+function watchOnce(source, cb, options) {
+  const stop = watch(source, (...args) => {
+    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 = 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 = 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 = computed(() => {
+    const test = toArray(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(toValue(firstParamTargets.value ? args[1] : args[0])),
+        toArray(unref(firstParamTargets.value ? args[2] : args[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        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 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 {
@@ -131,12 +252,26 @@ function onClickOutside(target, handler, options = {}) {
       }
     });
   };
+  function hasMultipleRoots(target2) {
+    const vm = toValue(target2);
+    return vm && vm.$.subTree.shapeFlag === 16;
+  }
+  function checkMultipleRoots(target2, event) {
+    const vm = 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;
@@ -144,63 +279,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 = ref();
-  const update = () => isSupported.value = Boolean(callback());
-  update();
-  tryOnMounted(update, sync);
-  return isSupported;
+function useMounted() {
+  const isMounted = shallowRef(false);
+  const instance = getCurrentInstance();
+  if (instance) {
+    onMounted(() => {
+      isMounted.value = true;
+    }, instance);
+  }
+  return isMounted;
+}
+
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return 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 = computed(() => {
+    const value = toValue(target);
+    const items = toArray(value).map(unrefElement).filter(notNullish);
+    return new Set(items);
+  });
+  const stopWatch = 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 = () => {
@@ -209,13 +395,24 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const stopWatch = watch(() => unrefElement(target), (el) => {
-    cleanup();
-    if (isSupported.value && window && el) {
-      observer = new ResizeObserver(callback);
-      observer.observe(el, observerOptions);
-    }
-  }, { immediate: true, flush: "post" });
+  const targets = computed(() => {
+    const _targets = toValue(target);
+    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+  });
+  const stopWatch = 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();
@@ -232,17 +429,18 @@ function useElementBounding(target, options = {}) {
     reset = true,
     windowResize = true,
     windowScroll = true,
-    immediate = true
+    immediate = true,
+    updateTiming = "sync"
   } = options;
-  const height = ref(0);
-  const bottom = ref(0);
-  const left = ref(0);
-  const right = ref(0);
-  const top = ref(0);
-  const width = ref(0);
-  const x = ref(0);
-  const y = ref(0);
-  function update() {
+  const height = shallowRef(0);
+  const bottom = shallowRef(0);
+  const left = shallowRef(0);
+  const right = shallowRef(0);
+  const top = shallowRef(0);
+  const width = shallowRef(0);
+  const x = shallowRef(0);
+  const y = shallowRef(0);
+  function recalculate() {
     const el = unrefElement(target);
     if (!el) {
       if (reset) {
@@ -267,8 +465,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);
   watch(() => unrefElement(target), (ele) => !ele && update());
+  useMutationObserver(target, update, {
+    attributeFilter: ["style", "class"]
+  });
   if (windowScroll)
     useEventListener("scroll", update, { capture: true, passive: true });
   if (windowResize)
@@ -290,84 +497,101 @@ function useElementBounding(target, options = {}) {
   };
 }
 
-function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
-  const elementIsVisible = 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 = computed(() => {
+    const _target = toValue(target);
+    return toArray(_target).map(unrefElement).filter(notNullish);
+  });
+  let cleanup = noop;
+  const isActive = shallowRef(immediate);
+  const stopWatch = isSupported.value ? 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
   };
-  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 = 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: 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;
@@ -376,27 +600,48 @@ function useVModel(props, key, emit, options = {}) {
     passive = false,
     eventName,
     deep = false,
-    defaultValue
+    defaultValue,
+    shouldEmit
   } = options;
   const vm = 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 = ref(initialValue);
-    watch(() => props[key], (v) => proxy.value = cloneFn(v));
-    watch(proxy, (v) => {
-      if (v !== props[key] || deep)
-        _emit(event, v);
-    }, { deep });
+    let isUpdating = false;
+    watch(
+      () => props[key],
+      (v) => {
+        if (!isUpdating) {
+          isUpdating = true;
+          proxy.value = cloneFn(v);
+          nextTick(() => isUpdating = false);
+        }
+      }
+    );
+    watch(
+      proxy,
+      (v) => {
+        if (!isUpdating && (v !== props[key] || deep))
+          triggerEmit(v);
+      },
+      { deep }
+    );
     return proxy;
   } else {
     return computed({
@@ -404,7 +649,7 @@ function useVModel(props, key, emit, options = {}) {
         return getValue();
       },
       set(value) {
-        _emit(event, value);
+        triggerEmit(value);
       }
     });
   }
@@ -566,15 +811,8 @@ const useFileUpload = defineHookComponent({
   setup(props, { emit }) {
     const fileInputRef = elementRef();
     const files = ref([]);
-    watch(props.modelValue, (value) => {
-      if (value instanceof File) {
-        files.value.push(value);
-      } else if (Array.isArray(value)) {
-        files.value.push(...value);
-      }
-      if (props.multiple) {
-        files.value.splice(1, files.value.length - 1);
-      }
+    watch(() => toArray$1(props.modelValue), (value) => {
+      files.value = value;
     }, {
       immediate: true,
       deep: true
@@ -582,18 +820,25 @@ const useFileUpload = defineHookComponent({
     const openFileInput = () => {
       fileInputRef.value?.click();
     };
+    const toModelValue = (files2) => {
+      if (props.multiple) {
+        return files2;
+      }
+      if (files2.length) {
+        return files2[files2.length - 1];
+      }
+      return null;
+    };
     useEventListener(fileInputRef, "change", (event) => {
-      const newFiles = event.target.files;
-      let value = [];
-      if (newFiles) {
+      const newFiles = Array.from(event.target.files ?? []);
+      if (newFiles?.length) {
         if (props.multiple) {
-          value = Array.from(newFiles);
-          files.value.push(...value);
+          files.value.push(...newFiles);
         } else {
-          value = Array.from(newFiles)[0];
-          files.value = value ? [value] : [];
+          files.value = newFiles.slice(newFiles.length - 1);
         }
       }
+      const value = toModelValue(files.value);
       emit("update:modelValue", value);
       emit("change", value);
     });
@@ -1281,4 +1526,126 @@ const useSwitch = defineHookComponent({
   }
 });
 
-export { AFFIX_TARGET_KEY, affixEmits, affixProps, configProviderProps, fileUploadEmits, fileUploadProps, iconProps, itemEmits, itemProps, popoverEmits, popoverProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useFileUpload, useIcon, usePopover, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };
+const virtualListProps = defineHookProps({
+  options: {
+    type: Object,
+    default: () => ({})
+  },
+  count: {
+    type: Number,
+    default: () => 0
+  },
+  estimateSize: {
+    type: [Function, Number],
+    default: () => 50
+  },
+  horizontal: {
+    type: Boolean,
+    default: () => false
+  }
+});
+const virtualListEmits = defineHookEmits({
+  scrollEnd: () => true,
+  scrollStart: () => true,
+  scroll: (_) => true
+});
+const useVirtualList = defineHookComponent({
+  props: virtualListProps,
+  emits: virtualListEmits,
+  setup(props, context) {
+    const { emit } = context;
+    const scrollElementRef = elementRef();
+    const propsEstimateSize = props.estimateSize;
+    const estimateSize = typeof propsEstimateSize === "function" ? propsEstimateSize : () => propsEstimateSize;
+    const options = computed(() => {
+      const opts = { ...props.options || {} };
+      return {
+        ...opts,
+        count: props.count,
+        estimateSize,
+        horizontal: props.horizontal,
+        getScrollElement: () => scrollElementRef.value,
+        observeElementRect,
+        observeElementOffset,
+        scrollToFn: elementScroll
+      };
+    });
+    const virtualizer = new Virtualizer(options.value);
+    const state = shallowRef(virtualizer);
+    const virtualItems = computed(() => state.value.getVirtualItems());
+    const virtualIndexes = computed(() => state.value.getVirtualIndexes());
+    const totalSize = computed(() => state.value.getTotalSize());
+    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 }
+    );
+    watch(
+      options,
+      (opts) => {
+        virtualizer.setOptions({
+          ...opts,
+          onChange: (instance, sync) => {
+            opts.onChange?.(instance, sync);
+            triggerRef(state);
+          }
+        });
+        virtualizer._willUpdate();
+        triggerRef(state);
+      },
+      { immediate: true }
+    );
+    watch(
+      scrollElementRef,
+      (el) => {
+        if (el) {
+          virtualizer._willUpdate();
+          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
+    };
+  }
+});
+
+export { AFFIX_TARGET_KEY, affixEmits, affixProps, configProviderProps, fileUploadEmits, fileUploadProps, iconProps, itemEmits, itemProps, popoverEmits, popoverProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useFileUpload, useIcon, usePopover, useSelectionContext, useSelectionItem, useSelectionList, useSwitch, useVirtualList, virtualListEmits, virtualListProps };