@hoci/components 0.7.1 → 0.8.0

package/dist/index.cjs

@@ -5,20 +5,6 @@ const vue = require('vue');
 const tslx = require('tslx');
 const core = require('@hoci/core');
 
-var _a;
-const isClient = typeof window !== "undefined";
-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;
-}
-
 function tryOnScopeDispose(fn) {
   if (vue.getCurrentScope()) {
     vue.onScopeDispose(fn);
@@ -31,119 +17,275 @@ function isDefined(v) {
   return vue.unref(v) != null;
 }
 
-function syncRef(left, right, options = {}) {
-  var _a, _b;
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+const notNullish = (val) => val != null;
+const toString = Object.prototype.toString;
+const isObject = (val) => toString.call(val) === "[object Object]";
+const noop = () => {
+};
+
+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;
 }
 
-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;
 }
 
-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] || {};
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return vue.computed(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
+}
 
-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];
+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;
     }
-  return target;
-};
+  };
+  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 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 = () => {
@@ -152,13 +294,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();
@@ -175,17 +328,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) {
@@ -210,8 +364,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)
@@ -233,84 +396,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;
+}
 
 const affixProps = shared.defineHookProps(
   {
@@ -1032,6 +1212,995 @@ const HiTabs = vue.defineComponent({
   }
 });
 
+function memo(getDeps, fn, opts) {
+  let deps = opts.initialDeps ?? [];
+  let result;
+  function memoizedFunction() {
+    var _a, _b, _c, _d;
+    let depTime;
+    if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
+    const newDeps = getDeps();
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
+    if (!depsChanged) {
+      return result;
+    }
+    deps = newDeps;
+    let resultTime;
+    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
+    result = fn(...newDeps);
+    if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
+      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+      const resultFpsPercentage = resultEndTime / 16;
+      const pad = (str, num) => {
+        str = String(str);
+        while (str.length < num) {
+          str = " " + str;
+        }
+        return str;
+      };
+      console.info(
+        `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
+        `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(
+          0,
+          Math.min(120 - 120 * resultFpsPercentage, 120)
+        )}deg 100% 31%);`,
+        opts == null ? void 0 : opts.key
+      );
+    }
+    (_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
+    return result;
+  }
+  memoizedFunction.updateDeps = (newDeps) => {
+    deps = newDeps;
+  };
+  return memoizedFunction;
+}
+function notUndefined(value, msg) {
+  if (value === void 0) {
+    throw new Error(`Unexpected undefined${""}`);
+  } else {
+    return value;
+  }
+}
+const approxEqual = (a, b) => Math.abs(a - b) <= 1;
+const debounce = (targetWindow, fn, ms) => {
+  let timeoutId;
+  return function(...args) {
+    targetWindow.clearTimeout(timeoutId);
+    timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
+  };
+};
+
+const getRect = (element) => {
+  const { offsetWidth, offsetHeight } = element;
+  return { width: offsetWidth, height: offsetHeight };
+};
+const defaultKeyExtractor = (index) => index;
+const defaultRangeExtractor = (range) => {
+  const start = Math.max(range.startIndex - range.overscan, 0);
+  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
+  const arr = [];
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+const observeElementRect = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  const handler = (rect) => {
+    const { width, height } = rect;
+    cb({ width: Math.round(width), height: Math.round(height) });
+  };
+  handler(getRect(element));
+  if (!targetWindow.ResizeObserver) {
+    return () => {
+    };
+  }
+  const observer = new targetWindow.ResizeObserver((entries) => {
+    const run = () => {
+      const entry = entries[0];
+      if (entry == null ? void 0 : entry.borderBoxSize) {
+        const box = entry.borderBoxSize[0];
+        if (box) {
+          handler({ width: box.inlineSize, height: box.blockSize });
+          return;
+        }
+      }
+      handler(getRect(element));
+    };
+    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+  });
+  observer.observe(element, { box: "border-box" });
+  return () => {
+    observer.unobserve(element);
+  };
+};
+const addEventListenerOptions = {
+  passive: true
+};
+const supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
+const observeElementOffset = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const targetWindow = instance.targetWindow;
+  if (!targetWindow) {
+    return;
+  }
+  let offset = 0;
+  const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
+    targetWindow,
+    () => {
+      cb(offset, false);
+    },
+    instance.options.isScrollingResetDelay
+  );
+  const createHandler = (isScrolling) => () => {
+    const { horizontal, isRtl } = instance.options;
+    offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
+    fallback();
+    cb(offset, isScrolling);
+  };
+  const handler = createHandler(true);
+  const endHandler = createHandler(false);
+  endHandler();
+  element.addEventListener("scroll", handler, addEventListenerOptions);
+  const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
+  if (registerScrollendEvent) {
+    element.addEventListener("scrollend", endHandler, addEventListenerOptions);
+  }
+  return () => {
+    element.removeEventListener("scroll", handler);
+    if (registerScrollendEvent) {
+      element.removeEventListener("scrollend", endHandler);
+    }
+  };
+};
+const measureElement = (element, entry, instance) => {
+  if (entry == null ? void 0 : entry.borderBoxSize) {
+    const box = entry.borderBoxSize[0];
+    if (box) {
+      const size = Math.round(
+        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
+      );
+      return size;
+    }
+  }
+  return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
+};
+const elementScroll = (offset, {
+  adjustments = 0,
+  behavior
+}, instance) => {
+  var _a, _b;
+  const toOffset = offset + adjustments;
+  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
+    [instance.options.horizontal ? "left" : "top"]: toOffset,
+    behavior
+  });
+};
+class Virtualizer {
+  constructor(opts) {
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.targetWindow = null;
+    this.isScrolling = false;
+    this.scrollToIndexTimeoutId = null;
+    this.measurementsCache = [];
+    this.itemSizeCache = /* @__PURE__ */ new Map();
+    this.pendingMeasuredCacheIndexes = [];
+    this.scrollRect = null;
+    this.scrollOffset = null;
+    this.scrollDirection = null;
+    this.scrollAdjustments = 0;
+    this.elementsCache = /* @__PURE__ */ new Map();
+    this.observer = /* @__PURE__ */ (() => {
+      let _ro = null;
+      const get = () => {
+        if (_ro) {
+          return _ro;
+        }
+        if (!this.targetWindow || !this.targetWindow.ResizeObserver) {
+          return null;
+        }
+        return _ro = new this.targetWindow.ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            const run = () => {
+              this._measureElement(entry.target, entry);
+            };
+            this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
+          });
+        });
+      };
+      return {
+        disconnect: () => {
+          var _a;
+          (_a = get()) == null ? void 0 : _a.disconnect();
+          _ro = null;
+        },
+        observe: (target) => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
+        },
+        unobserve: (target) => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.unobserve(target);
+        }
+      };
+    })();
+    this.range = null;
+    this.setOptions = (opts2) => {
+      Object.entries(opts2).forEach(([key, value]) => {
+        if (typeof value === "undefined") delete opts2[key];
+      });
+      this.options = {
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        onChange: () => {
+        },
+        measureElement,
+        initialRect: { width: 0, height: 0 },
+        scrollMargin: 0,
+        gap: 0,
+        indexAttribute: "data-index",
+        initialMeasurementsCache: [],
+        lanes: 1,
+        isScrollingResetDelay: 150,
+        enabled: true,
+        isRtl: false,
+        useScrollendEvent: false,
+        useAnimationFrameWithResizeObserver: false,
+        ...opts2
+      };
+    };
+    this.notify = (sync) => {
+      var _a, _b;
+      (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
+    };
+    this.maybeNotify = memo(
+      () => {
+        this.calculateRange();
+        return [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ];
+      },
+      (isScrolling) => {
+        this.notify(isScrolling);
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "maybeNotify",
+        debug: () => this.options.debug,
+        initialDeps: [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ]
+      }
+    );
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach((d) => d());
+      this.unsubs = [];
+      this.observer.disconnect();
+      this.scrollElement = null;
+      this.targetWindow = null;
+    };
+    this._didMount = () => {
+      return () => {
+        this.cleanup();
+      };
+    };
+    this._willUpdate = () => {
+      var _a;
+      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        if (!scrollElement) {
+          this.maybeNotify();
+          return;
+        }
+        this.scrollElement = scrollElement;
+        if (this.scrollElement && "ownerDocument" in this.scrollElement) {
+          this.targetWindow = this.scrollElement.ownerDocument.defaultView;
+        } else {
+          this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
+        }
+        this.elementsCache.forEach((cached) => {
+          this.observer.observe(cached);
+        });
+        this._scrollToOffset(this.getScrollOffset(), {
+          adjustments: void 0,
+          behavior: void 0
+        });
+        this.unsubs.push(
+          this.options.observeElementRect(this, (rect) => {
+            this.scrollRect = rect;
+            this.maybeNotify();
+          })
+        );
+        this.unsubs.push(
+          this.options.observeElementOffset(this, (offset, isScrolling) => {
+            this.scrollAdjustments = 0;
+            this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
+            this.scrollOffset = offset;
+            this.isScrolling = isScrolling;
+            this.maybeNotify();
+          })
+        );
+      }
+    };
+    this.getSize = () => {
+      if (!this.options.enabled) {
+        this.scrollRect = null;
+        return 0;
+      }
+      this.scrollRect = this.scrollRect ?? this.options.initialRect;
+      return this.scrollRect[this.options.horizontal ? "width" : "height"];
+    };
+    this.getScrollOffset = () => {
+      if (!this.options.enabled) {
+        this.scrollOffset = null;
+        return 0;
+      }
+      this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
+      return this.scrollOffset;
+    };
+    this.getFurthestMeasurement = (measurements, index) => {
+      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
+      const furthestMeasurements = /* @__PURE__ */ new Map();
+      for (let m = index - 1; m >= 0; m--) {
+        const measurement = measurements[m];
+        if (furthestMeasurementsFound.has(measurement.lane)) {
+          continue;
+        }
+        const previousFurthestMeasurement = furthestMeasurements.get(
+          measurement.lane
+        );
+        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
+          furthestMeasurements.set(measurement.lane, measurement);
+        } else if (measurement.end < previousFurthestMeasurement.end) {
+          furthestMeasurementsFound.set(measurement.lane, true);
+        }
+        if (furthestMeasurementsFound.size === this.options.lanes) {
+          break;
+        }
+      }
+      return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a, b) => {
+        if (a.end === b.end) {
+          return a.index - b.index;
+        }
+        return a.end - b.end;
+      })[0] : void 0;
+    };
+    this.getMeasurementOptions = memo(
+      () => [
+        this.options.count,
+        this.options.paddingStart,
+        this.options.scrollMargin,
+        this.options.getItemKey,
+        this.options.enabled
+      ],
+      (count, paddingStart, scrollMargin, getItemKey, enabled) => {
+        this.pendingMeasuredCacheIndexes = [];
+        return {
+          count,
+          paddingStart,
+          scrollMargin,
+          getItemKey,
+          enabled
+        };
+      },
+      {
+        key: false
+      }
+    );
+    this.getMeasurements = memo(
+      () => [this.getMeasurementOptions(), this.itemSizeCache],
+      ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
+        if (!enabled) {
+          this.measurementsCache = [];
+          this.itemSizeCache.clear();
+          return [];
+        }
+        if (this.measurementsCache.length === 0) {
+          this.measurementsCache = this.options.initialMeasurementsCache;
+          this.measurementsCache.forEach((item) => {
+            this.itemSizeCache.set(item.key, item.size);
+          });
+        }
+        const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+        this.pendingMeasuredCacheIndexes = [];
+        const measurements = this.measurementsCache.slice(0, min);
+        for (let i = min; i < count; i++) {
+          const key = getItemKey(i);
+          const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
+          const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
+          const measuredSize = itemSizeCache.get(key);
+          const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
+          const end = start + size;
+          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
+          measurements[i] = {
+            index: i,
+            start,
+            size,
+            end,
+            key,
+            lane
+          };
+        }
+        this.measurementsCache = measurements;
+        return measurements;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getMeasurements",
+        debug: () => this.options.debug
+      }
+    );
+    this.calculateRange = memo(
+      () => [
+        this.getMeasurements(),
+        this.getSize(),
+        this.getScrollOffset(),
+        this.options.lanes
+      ],
+      (measurements, outerSize, scrollOffset, lanes) => {
+        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
+          measurements,
+          outerSize,
+          scrollOffset,
+          lanes
+        }) : null;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "calculateRange",
+        debug: () => this.options.debug
+      }
+    );
+    this.getVirtualIndexes = memo(
+      () => {
+        let startIndex = null;
+        let endIndex = null;
+        const range = this.calculateRange();
+        if (range) {
+          startIndex = range.startIndex;
+          endIndex = range.endIndex;
+        }
+        this.maybeNotify.updateDeps([this.isScrolling, startIndex, endIndex]);
+        return [
+          this.options.rangeExtractor,
+          this.options.overscan,
+          this.options.count,
+          startIndex,
+          endIndex
+        ];
+      },
+      (rangeExtractor, overscan, count, startIndex, endIndex) => {
+        return startIndex === null || endIndex === null ? [] : rangeExtractor({
+          startIndex,
+          endIndex,
+          overscan,
+          count
+        });
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getVirtualIndexes",
+        debug: () => this.options.debug
+      }
+    );
+    this.indexFromElement = (node) => {
+      const attributeName = this.options.indexAttribute;
+      const indexStr = node.getAttribute(attributeName);
+      if (!indexStr) {
+        console.warn(
+          `Missing attribute name '${attributeName}={index}' on measured element.`
+        );
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this._measureElement = (node, entry) => {
+      const index = this.indexFromElement(node);
+      const item = this.measurementsCache[index];
+      if (!item) {
+        return;
+      }
+      const key = item.key;
+      const prevNode = this.elementsCache.get(key);
+      if (prevNode !== node) {
+        if (prevNode) {
+          this.observer.unobserve(prevNode);
+        }
+        this.observer.observe(node);
+        this.elementsCache.set(key, node);
+      }
+      if (node.isConnected) {
+        this.resizeItem(index, this.options.measureElement(node, entry, this));
+      }
+    };
+    this.resizeItem = (index, size) => {
+      const item = this.measurementsCache[index];
+      if (!item) {
+        return;
+      }
+      const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
+      const delta = size - itemSize;
+      if (delta !== 0) {
+        if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments) {
+          if (process.env.NODE_ENV !== "production" && this.options.debug) {
+            console.info("correction", delta);
+          }
+          this._scrollToOffset(this.getScrollOffset(), {
+            adjustments: this.scrollAdjustments += delta,
+            behavior: void 0
+          });
+        }
+        this.pendingMeasuredCacheIndexes.push(item.index);
+        this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
+        this.notify(false);
+      }
+    };
+    this.measureElement = (node) => {
+      if (!node) {
+        this.elementsCache.forEach((cached, key) => {
+          if (!cached.isConnected) {
+            this.observer.unobserve(cached);
+            this.elementsCache.delete(key);
+          }
+        });
+        return;
+      }
+      this._measureElement(node, void 0);
+    };
+    this.getVirtualItems = memo(
+      () => [this.getVirtualIndexes(), this.getMeasurements()],
+      (indexes, measurements) => {
+        const virtualItems = [];
+        for (let k = 0, len = indexes.length; k < len; k++) {
+          const i = indexes[k];
+          const measurement = measurements[i];
+          virtualItems.push(measurement);
+        }
+        return virtualItems;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getVirtualItems",
+        debug: () => this.options.debug
+      }
+    );
+    this.getVirtualItemForOffset = (offset) => {
+      const measurements = this.getMeasurements();
+      if (measurements.length === 0) {
+        return void 0;
+      }
+      return notUndefined(
+        measurements[findNearestBinarySearch(
+          0,
+          measurements.length - 1,
+          (index) => notUndefined(measurements[index]).start,
+          offset
+        )]
+      );
+    };
+    this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      if (align === "auto") {
+        align = toOffset >= scrollOffset + size ? "end" : "start";
+      }
+      if (align === "center") {
+        toOffset += (itemSize - size) / 2;
+      } else if (align === "end") {
+        toOffset -= size;
+      }
+      const maxOffset = this.getTotalSize() - size;
+      return Math.max(Math.min(maxOffset, toOffset), 0);
+    };
+    this.getOffsetForIndex = (index, align = "auto") => {
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      const item = this.measurementsCache[index];
+      if (!item) {
+        return void 0;
+      }
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
+      if (align === "auto") {
+        if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
+          align = "end";
+        } else if (item.start <= scrollOffset + this.options.scrollPaddingStart) {
+          align = "start";
+        } else {
+          return [scrollOffset, align];
+        }
+      }
+      const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
+      return [
+        this.getOffsetForAlignment(toOffset, align, item.size),
+        align
+      ];
+    };
+    this.isDynamicMode = () => this.elementsCache.size > 0;
+    this.cancelScrollToIndex = () => {
+      if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
+        this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
+        this.scrollToIndexTimeoutId = null;
+      }
+    };
+    this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
+      this.cancelScrollToIndex();
+      if (behavior === "smooth" && this.isDynamicMode()) {
+        console.warn(
+          "The `smooth` scroll behavior is not fully supported with dynamic size."
+        );
+      }
+      this._scrollToOffset(this.getOffsetForAlignment(toOffset, align), {
+        adjustments: void 0,
+        behavior
+      });
+    };
+    this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      this.cancelScrollToIndex();
+      if (behavior === "smooth" && this.isDynamicMode()) {
+        console.warn(
+          "The `smooth` scroll behavior is not fully supported with dynamic size."
+        );
+      }
+      const offsetAndAlign = this.getOffsetForIndex(index, initialAlign);
+      if (!offsetAndAlign) return;
+      const [offset, align] = offsetAndAlign;
+      this._scrollToOffset(offset, { adjustments: void 0, behavior });
+      if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
+        this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
+          this.scrollToIndexTimeoutId = null;
+          const elementInDOM = this.elementsCache.has(
+            this.options.getItemKey(index)
+          );
+          if (elementInDOM) {
+            const [latestOffset] = notUndefined(
+              this.getOffsetForIndex(index, align)
+            );
+            const currentScrollOffset = this.getScrollOffset();
+            if (!approxEqual(latestOffset, currentScrollOffset)) {
+              this.scrollToIndex(index, { align, behavior });
+            }
+          } else {
+            this.scrollToIndex(index, { align, behavior });
+          }
+        });
+      }
+    };
+    this.scrollBy = (delta, { behavior } = {}) => {
+      this.cancelScrollToIndex();
+      if (behavior === "smooth" && this.isDynamicMode()) {
+        console.warn(
+          "The `smooth` scroll behavior is not fully supported with dynamic size."
+        );
+      }
+      this._scrollToOffset(this.getScrollOffset() + delta, {
+        adjustments: void 0,
+        behavior
+      });
+    };
+    this.getTotalSize = () => {
+      var _a;
+      const measurements = this.getMeasurements();
+      let end;
+      if (measurements.length === 0) {
+        end = this.options.paddingStart;
+      } else if (this.options.lanes === 1) {
+        end = ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0;
+      } else {
+        const endByLane = Array(this.options.lanes).fill(null);
+        let endIndex = measurements.length - 1;
+        while (endIndex >= 0 && endByLane.some((val) => val === null)) {
+          const item = measurements[endIndex];
+          if (endByLane[item.lane] === null) {
+            endByLane[item.lane] = item.end;
+          }
+          endIndex--;
+        }
+        end = Math.max(...endByLane.filter((val) => val !== null));
+      }
+      return Math.max(
+        end - this.options.scrollMargin + this.options.paddingEnd,
+        0
+      );
+    };
+    this._scrollToOffset = (offset, {
+      adjustments,
+      behavior
+    }) => {
+      this.options.scrollToFn(offset, { behavior, adjustments }, this);
+    };
+    this.measure = () => {
+      this.itemSizeCache = /* @__PURE__ */ new Map();
+      this.notify(false);
+    };
+    this.setOptions(opts);
+  }
+}
+const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+  while (low <= high) {
+    const middle = (low + high) / 2 | 0;
+    const currentValue = getCurrentValue(middle);
+    if (currentValue < value) {
+      low = middle + 1;
+    } else if (currentValue > value) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+function calculateRange({
+  measurements,
+  outerSize,
+  scrollOffset,
+  lanes
+}) {
+  const lastIndex = measurements.length - 1;
+  const getOffset = (index) => measurements[index].start;
+  if (measurements.length <= lanes) {
+    return {
+      startIndex: 0,
+      endIndex: lastIndex
+    };
+  }
+  let startIndex = findNearestBinarySearch(
+    0,
+    lastIndex,
+    getOffset,
+    scrollOffset
+  );
+  let endIndex = startIndex;
+  if (lanes === 1) {
+    while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) {
+      endIndex++;
+    }
+  } else if (lanes > 1) {
+    const endPerLane = Array(lanes).fill(0);
+    while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
+      const item = measurements[endIndex];
+      endPerLane[item.lane] = item.end;
+      endIndex++;
+    }
+    const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
+    while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
+      const item = measurements[startIndex];
+      startPerLane[item.lane] = item.start;
+      startIndex--;
+    }
+    startIndex = Math.max(0, startIndex - startIndex % lanes);
+    endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
+  }
+  return { startIndex, endIndex };
+}
+
+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,
+        observeElementOffset,
+        scrollToFn: elementScroll
+      };
+    });
+    const virtualizer = new 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
+    };
+  }
+});
+
+const HiVirtualList = vue.defineComponent({
+  name: "HiVirtualList",
+  inheritAttrs: true,
+  props: {
+    ...virtualListProps,
+    as: {
+      type: String,
+      default: () => "div"
+    },
+    wrapperAs: {
+      type: String,
+      default: () => "div"
+    },
+    wrapperStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    wrapperClass: {
+      type: shared.classPropType,
+      default: () => ""
+    }
+  },
+  emits: virtualListEmits,
+  setup(props, context) {
+    const { slots, expose } = context;
+    const {
+      totalSize,
+      scrollElementRef,
+      virtualItems,
+      scrollToIndex,
+      scrollToStart,
+      scrollToEnd
+    } = useVirtualList(props, context);
+    expose({
+      scrollToIndex,
+      scrollToStart,
+      scrollToEnd
+    });
+    const wrapperStyle = vue.computed(() => {
+      return {
+        position: "relative",
+        [props.horizontal ? "width" : "height"]: `${totalSize.value}px`,
+        ...props.wrapperStyle
+      };
+    });
+    return () => vue.h(
+      props.as,
+      {
+        ref: scrollElementRef,
+        style: {
+          [props.horizontal ? "overflowX" : "overflowY"]: "auto"
+        }
+      },
+      [
+        vue.h(
+          props.wrapperAs,
+          {
+            style: wrapperStyle.value,
+            class: props.wrapperClass
+          },
+          tslx.each(virtualItems.value, (item) => {
+            const slotData = {
+              ...item,
+              style: {
+                position: "absolute",
+                [props.horizontal ? "left" : "top"]: `${item.start}px`,
+                [props.horizontal ? "width" : "height"]: `${item.size}px`
+              }
+            };
+            return vue.renderSlot(slots, "item", slotData);
+          })
+        )
+      ]
+    );
+  }
+});
+
 const components = {
   __proto__: null,
   HiAffix: HiAffix,
@@ -1044,7 +2213,8 @@ const components = {
   HiSelection: HiSelection,
   HiSwitch: HiSwitch,
   HiTabPane: HiTabPane,
-  HiTabs: HiTabs
+  HiTabs: HiTabs,
+  HiVirtualList: HiVirtualList
 };
 
 function install(app) {
@@ -1064,4 +2234,5 @@ exports.HiSelection = HiSelection;
 exports.HiSwitch = HiSwitch;
 exports.HiTabPane = HiTabPane;
 exports.HiTabs = HiTabs;
+exports.HiVirtualList = HiVirtualList;
 exports.install = install;