@vueuse/components 10.2.1 → 10.4.0

package/index.iife.js

@@ -134,9 +134,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   });
 
   function unrefElement(elRef) {
-    var _a;
     const plain = shared.toValue(elRef);
-    return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+    return plain?.$el ?? plain;
   }
 
   const defaultWindow = shared.isClient ? window : void 0;
@@ -197,6 +196,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     if (shared.isIOS && !_iOSWorkaround) {
       _iOSWorkaround = true;
       Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", shared.noop));
+      window.document.documentElement.addEventListener("click", shared.noop);
     }
     let shouldListen = true;
     const shouldIgnore = (event) => {
@@ -230,9 +230,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }, { passive: true }),
       detectIframe && useEventListener(window, "blur", (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)))
+          if (window.document.activeElement?.tagName === "IFRAME" && !el?.contains(window.document.activeElement))
             handler(event);
         }, 0);
       })
@@ -302,42 +301,25 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return useEventListener(target, eventName, listener, passive);
   }
 
-  var __defProp$e = Object.defineProperty;
-  var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-  var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-  var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$e = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$g.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
-    if (__getOwnPropSymbols$g)
-      for (var prop of __getOwnPropSymbols$g(b)) {
-        if (__propIsEnum$g.call(b, prop))
-          __defNormalProp$e(a, prop, b[prop]);
-      }
-    return a;
-  };
   const vOnKeyStroke = {
     [shared.directiveHooks.mounted](el, binding) {
-      var _a, _b;
-      const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
+      const keys = binding.arg?.split(",") ?? true;
       if (typeof binding.value === "function") {
         onKeyStroke(keys, binding.value, {
           target: el
         });
       } else {
         const [handler, options] = binding.value;
-        onKeyStroke(keys, handler, __spreadValues$e({
-          target: el
-        }, options));
+        onKeyStroke(keys, handler, {
+          target: el,
+          ...options
+        });
       }
     }
   };
 
   const DEFAULT_DELAY = 500;
   function onLongPress(target, handler, options) {
-    var _a, _b;
     const elementRef = vueDemi.computed(() => unrefElement(target));
     let timeout;
     function clear() {
@@ -347,26 +329,24 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }
     }
     function onDown(ev) {
-      var _a2, _b2, _c, _d;
-      if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+      if (options?.modifiers?.self && ev.target !== elementRef.value)
         return;
       clear();
-      if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+      if (options?.modifiers?.prevent)
         ev.preventDefault();
-      if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+      if (options?.modifiers?.stop)
         ev.stopPropagation();
       timeout = setTimeout(
         () => handler(ev),
-        (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
+        options?.delay ?? DEFAULT_DELAY
       );
     }
     const listenerOptions = {
-      capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
-      once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
+      capture: options?.modifiers?.capture,
+      once: options?.modifiers?.once
     };
     useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
-    useEventListener(elementRef, "pointerup", clear, listenerOptions);
-    useEventListener(elementRef, "pointerleave", clear, listenerOptions);
+    useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions);
   }
 
   const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -449,22 +429,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
   }
 
-  var __defProp$d = Object.defineProperty;
-  var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-  var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-  var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$d = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$f.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
-    if (__getOwnPropSymbols$f)
-      for (var prop of __getOwnPropSymbols$f(b)) {
-        if (__propIsEnum$f.call(b, prop))
-          __defNormalProp$d(a, prop, b[prop]);
-      }
-    return a;
-  };
   const StorageSerializers = {
     boolean: {
       read: (v) => v === "true",
@@ -501,7 +465,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   };
   const customStorageEventName = "vueuse-storage";
   function useStorage(key, defaults, storage, options = {}) {
-    var _a;
     const {
       flush = "pre",
       deep = true,
@@ -518,10 +481,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(defaults);
     if (!storage) {
       try {
-        storage = getSSRHandler("getDefaultStorage", () => {
-          var _a2;
-          return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
-        })();
+        storage = getSSRHandler("getDefaultStorage", () => defaultWindow?.localStorage)();
       } catch (e) {
         onError(e);
       }
@@ -530,7 +490,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       return data;
     const rawInit = shared.toValue(defaults);
     const type = guessSerializerType(rawInit);
-    const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
+    const serializer = options.serializer ?? StorageSerializers[type];
     const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
       data,
       () => write(data.value),
@@ -578,7 +538,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         if (typeof mergeDefaults === "function")
           return mergeDefaults(value, rawInit);
         else if (type === "object" && !Array.isArray(value))
-          return __spreadValues$d(__spreadValues$d({}, rawInit), value);
+          return { ...rawInit, ...value };
         return value;
       } else if (typeof rawValue !== "string") {
         return rawValue;
@@ -600,7 +560,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         return;
       pauseWatch();
       try {
-        data.value = read(event);
+        if (event?.newValue !== serializer.write(data.value))
+          data.value = read(event);
       } catch (e) {
         onError(e);
       } finally {
@@ -635,29 +596,33 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
     let mediaQuery;
     const matches = vueDemi.ref(false);
+    const handler = (event) => {
+      matches.value = event.matches;
+    };
     const cleanup = () => {
       if (!mediaQuery)
         return;
       if ("removeEventListener" in mediaQuery)
-        mediaQuery.removeEventListener("change", update);
+        mediaQuery.removeEventListener("change", handler);
       else
-        mediaQuery.removeListener(update);
+        mediaQuery.removeListener(handler);
     };
-    const update = () => {
+    const stopWatch = vueDemi.watchEffect(() => {
       if (!isSupported.value)
         return;
       cleanup();
-      mediaQuery = window.matchMedia(shared.toRef(query).value);
-      matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
-      if (!mediaQuery)
-        return;
+      mediaQuery = window.matchMedia(shared.toValue(query));
       if ("addEventListener" in mediaQuery)
-        mediaQuery.addEventListener("change", update);
+        mediaQuery.addEventListener("change", handler);
       else
-        mediaQuery.addListener(update);
-    };
-    vueDemi.watchEffect(update);
-    shared.tryOnScopeDispose(() => cleanup());
+        mediaQuery.addListener(handler);
+      matches.value = mediaQuery.matches;
+    });
+    shared.tryOnScopeDispose(() => {
+      stopWatch();
+      cleanup();
+      mediaQuery = void 0;
+    });
     return matches;
   }
 
@@ -665,22 +630,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return useMediaQuery("(prefers-color-scheme: dark)", options);
   }
 
-  var __defProp$c = Object.defineProperty;
-  var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-  var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-  var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$c = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$e.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
-    if (__getOwnPropSymbols$e)
-      for (var prop of __getOwnPropSymbols$e(b)) {
-        if (__propIsEnum$e.call(b, prop))
-          __defNormalProp$c(a, prop, b[prop]);
-      }
-    return a;
-  };
   function useColorMode(options = {}) {
     const {
       selector = "html",
@@ -694,11 +643,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       emitAuto,
       disableTransition = true
     } = options;
-    const modes = __spreadValues$c({
+    const modes = {
       auto: "",
       light: "light",
-      dark: "dark"
-    }, options.modes || {});
+      dark: "dark",
+      ...options.modes || {}
+    };
     const preferredDark = usePreferredDark({ window });
     const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
     const store = storageRef || (storageKey == null ? shared.toRef(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
@@ -708,7 +658,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const updateHTMLAttrs = getSSRHandler(
       "updateHTMLAttrs",
       (selector2, attribute2, value) => {
-        const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
+        const el = typeof selector2 === "string" ? window?.document.querySelector(selector2) : unrefElement(selector2);
         if (!el)
           return;
         let style;
@@ -736,8 +686,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }
     );
     function defaultOnChanged(mode) {
-      var _a;
-      updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
+      updateHTMLAttrs(selector, attribute, modes[mode] ?? mode);
     }
     function onChanged(mode) {
       if (options.onChanged)
@@ -855,25 +804,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __defProp$b = Object.defineProperty;
-  var __defProps$9 = Object.defineProperties;
-  var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-  var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-  var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$b = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$d.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
-    if (__getOwnPropSymbols$d)
-      for (var prop of __getOwnPropSymbols$d(b)) {
-        if (__propIsEnum$d.call(b, prop))
-          __defNormalProp$b(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
   const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseDraggable",
     props: [
@@ -893,10 +823,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     ],
     setup(props, { slots }) {
       const target = vueDemi.ref();
-      const handle = vueDemi.computed(() => {
-        var _a;
-        return (_a = props.handle) != null ? _a : target.value;
-      });
+      const handle = vueDemi.computed(() => props.handle ?? target.value);
       const storageValue = props.storageKey && core.useStorage(
         props.storageKey,
         shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -904,18 +831,18 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       );
       const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
       const onEnd = (position, event) => {
-        var _a;
-        (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
+        props.onEnd?.(position, event);
         if (!storageValue)
           return;
         storageValue.value.x = position.x;
         storageValue.value.y = position.y;
       };
-      const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$9(__spreadValues$b({}, props), {
+      const data = vueDemi.reactive(core.useDraggable(target, {
+        ...props,
         handle,
         initialValue,
         onEnd
-      })));
+      }));
       return () => {
         if (slots.default)
           return vueDemi.h(props.as || "div", { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
@@ -973,7 +900,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseElementSize",
-    props: ["width", "height", "box"],
+    props: ["width", "height", "box", "as"],
     setup(props, { slots }) {
       const target = vueDemi.ref();
       const data = vueDemi.reactive(core.useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
@@ -984,23 +911,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-  var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-  var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-  var __objRest$1 = (source, exclude) => {
-    var target = {};
-    for (var prop in source)
-      if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
-        target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$c)
-      for (var prop of __getOwnPropSymbols$c(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
-          target[prop] = source[prop];
-      }
-    return target;
-  };
   function useResizeObserver(target, callback, options = {}) {
-    const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$1(_a, ["window"]);
+    const { window = defaultWindow, ...observerOptions } = options;
     let observer;
     const isSupported = useSupported(() => window && "ResizeObserver" in window);
     const cleanup = () => {
@@ -1037,10 +949,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
     const { window = defaultWindow, box = "content-box" } = options;
-    const isSVG = vueDemi.computed(() => {
-      var _a, _b;
-      return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
-    });
+    const isSVG = vueDemi.computed(() => unrefElement(target)?.namespaceURI?.includes("svg"));
     const width = vueDemi.ref(initialSize.width);
     const height = vueDemi.ref(initialSize.height);
     useResizeObserver(
@@ -1082,8 +991,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   const vElementSize = {
     [shared.directiveHooks.mounted](el, binding) {
-      var _a;
-      const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
+      const handler = typeof binding.value === "function" ? binding.value : binding.value?.[0];
       const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
       const { width, height } = useElementSize(el, ...options);
       vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
@@ -1173,7 +1081,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       },
       {
         root: scrollTarget,
-        window
+        window,
+        threshold: 0
       }
     );
     return elementIsVisible;
@@ -1244,25 +1153,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __defProp$a = Object.defineProperty;
-  var __defProps$8 = Object.defineProperties;
-  var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-  var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-  var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$a = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$b.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
-    if (__getOwnPropSymbols$b)
-      for (var prop of __getOwnPropSymbols$b(b)) {
-        if (__propIsEnum$b.call(b, prop))
-          __defNormalProp$a(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
   function useAsyncState(promise, initialState, options) {
     const {
       immediate = true,
@@ -1272,7 +1162,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       resetOnExecute = true,
       shallow = true,
       throwError
-    } = options != null ? options : {};
+    } = options ?? {};
     const state = shallow ? vueDemi.shallowRef(initialState) : vueDemi.ref(initialState);
     const isReady = vueDemi.ref(false);
     const isLoading = vueDemi.ref(false);
@@ -1315,29 +1205,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         shared.until(isLoading).toBe(false).then(() => resolve(shell)).catch(reject);
       });
     }
-    return __spreadProps$8(__spreadValues$a({}, shell), {
+    return {
+      ...shell,
       then(onFulfilled, onRejected) {
         return waitUntilIsLoaded().then(onFulfilled, onRejected);
       }
-    });
+    };
   }
 
-  var __defProp$9 = Object.defineProperty;
-  var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-  var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-  var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$9 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$a.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
-    if (__getOwnPropSymbols$a)
-      for (var prop of __getOwnPropSymbols$a(b)) {
-        if (__propIsEnum$a.call(b, prop))
-          __defNormalProp$9(a, prop, b[prop]);
-      }
-    return a;
-  };
   async function loadImage(options) {
     return new Promise((resolve, reject) => {
       const img = new Image();
@@ -1363,9 +1238,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const state = useAsyncState(
       () => loadImage(shared.toValue(options)),
       void 0,
-      __spreadValues$9({
-        resetOnExecute: true
-      }, asyncStateOptions)
+      {
+        resetOnExecute: true,
+        ...asyncStateOptions
+      }
     );
     vueDemi.watch(
       () => shared.toValue(options),
@@ -1419,7 +1295,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         capture: false,
         passive: true
       },
-      behavior = "auto"
+      behavior = "auto",
+      window = defaultWindow
     } = options;
     const internalX = vueDemi.ref(0);
     const internalY = vueDemi.ref(0);
@@ -1440,13 +1317,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }
     });
     function scrollTo(_x, _y) {
-      var _a, _b, _c;
+      if (!window)
+        return;
       const _element = shared.toValue(element);
       if (!_element)
         return;
-      (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
-        top: (_a = shared.toValue(_y)) != null ? _a : y.value,
-        left: (_b = shared.toValue(_x)) != null ? _b : x.value,
+      (_element instanceof Document ? window.document.body : _element)?.scrollTo({
+        top: shared.toValue(_y) ?? y.value,
+        left: shared.toValue(_x) ?? x.value,
         behavior: shared.toValue(behavior)
       });
     }
@@ -1475,7 +1353,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     };
     const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
     const setArrivedState = (target) => {
-      const el = target === window ? target.document.documentElement : target === document ? target.documentElement : target;
+      if (!window)
+        return;
+      const el = target.document ? target.document.documentElement : target.documentElement ?? target;
       const { display, flexDirection } = getComputedStyle(el);
       const scrollLeft = el.scrollLeft;
       directions.left = scrollLeft < internalX.value;
@@ -1491,8 +1371,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }
       internalX.value = scrollLeft;
       let scrollTop = el.scrollTop;
-      if (target === document && !scrollTop)
-        scrollTop = document.body.scrollTop;
+      if (target === window.document && !scrollTop)
+        scrollTop = window.document.body.scrollTop;
       directions.top = scrollTop < internalY.value;
       directions.bottom = scrollTop > internalY.value;
       const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
@@ -1507,7 +1387,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       internalY.value = scrollTop;
     };
     const onScrollHandler = (e) => {
-      const eventTarget = e.target === document ? e.target.documentElement : e.target;
+      if (!window)
+        return;
+      const eventTarget = e.target.documentElement ?? e.target;
       setArrivedState(eventTarget);
       isScrolling.value = true;
       onScrollEndDebounced(e);
@@ -1533,53 +1415,47 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       directions,
       measure() {
         const _element = shared.toValue(element);
-        if (_element)
+        if (window && _element)
           setArrivedState(_element);
       }
     };
   }
 
-  var __defProp$8 = Object.defineProperty;
-  var __defProps$7 = Object.defineProperties;
-  var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$8 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$9.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    if (__getOwnPropSymbols$9)
-      for (var prop of __getOwnPropSymbols$9(b)) {
-        if (__propIsEnum$9.call(b, prop))
-          __defNormalProp$8(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+  function resolveElement(el) {
+    if (typeof Window !== "undefined" && el instanceof Window)
+      return el.document.documentElement;
+    if (typeof Document !== "undefined" && el instanceof Document)
+      return el.documentElement;
+    return el;
+  }
+
   function useInfiniteScroll(element, onLoadMore, options = {}) {
-    var _a;
     const {
       direction = "bottom",
       interval = 100
     } = options;
     const state = vueDemi.reactive(useScroll(
       element,
-      __spreadProps$7(__spreadValues$8({}, options), {
-        offset: __spreadValues$8({
-          [direction]: (_a = options.distance) != null ? _a : 0
-        }, options.offset)
-      })
+      {
+        ...options,
+        offset: {
+          [direction]: options.distance ?? 0,
+          ...options.offset
+        }
+      }
     ));
     const promise = vueDemi.ref();
     const isLoading = vueDemi.computed(() => !!promise.value);
+    const observedElement = vueDemi.computed(() => {
+      return resolveElement(shared.toValue(element));
+    });
+    const isElementVisible = useElementVisibility(observedElement);
     function checkAndLoad() {
       state.measure();
-      const el = shared.toValue(element);
-      if (!el || !el.offsetParent)
+      if (!observedElement.value || !isElementVisible.value)
         return;
-      const isNarrower = direction === "bottom" || direction === "top" ? el.scrollHeight <= el.clientHeight : el.scrollWidth <= el.clientWidth;
+      const { scrollHeight, clientHeight, scrollWidth, clientWidth } = observedElement.value;
+      const isNarrower = direction === "bottom" || direction === "top" ? scrollHeight <= clientHeight : scrollWidth <= clientWidth;
       if (state.arrivedState[direction] || isNarrower) {
         if (!promise.value) {
           promise.value = Promise.all([
@@ -1593,7 +1469,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }
     }
     vueDemi.watch(
-      () => [state.arrivedState[direction], shared.toValue(element)],
+      () => [state.arrivedState[direction], isElementVisible.value],
       checkAndLoad,
       { immediate: true }
     );
@@ -1645,31 +1521,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __defProp$7 = Object.defineProperty;
-  var __defProps$6 = Object.defineProperties;
-  var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$7 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$8.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
-    if (__getOwnPropSymbols$8)
-      for (var prop of __getOwnPropSymbols$8(b)) {
-        if (__propIsEnum$8.call(b, prop))
-          __defNormalProp$7(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
   const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseMousePressed",
     props: ["touch", "initialValue", "as"],
     setup(props, { slots }) {
       const target = vueDemi.ref();
-      const data = vueDemi.reactive(core.useMousePressed(__spreadProps$6(__spreadValues$7({}, props), { target })));
+      const data = vueDemi.reactive(core.useMousePressed({ ...props, target }));
       return () => {
         if (slots.default)
           return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
@@ -1688,30 +1545,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __defProp$6 = Object.defineProperty;
-  var __defProps$5 = Object.defineProperties;
-  var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$6 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$7.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
-    if (__getOwnPropSymbols$7)
-      for (var prop of __getOwnPropSymbols$7(b)) {
-        if (__propIsEnum$7.call(b, prop))
-          __defNormalProp$6(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
   const UseNow = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseNow",
     props: ["interval"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useNow(__spreadProps$5(__spreadValues$6({}, props), { controls: true })));
+      const data = vueDemi.reactive(core.useNow({ ...props, controls: true }));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1734,25 +1572,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __defProp$5 = Object.defineProperty;
-  var __defProps$4 = Object.defineProperties;
-  var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$5 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$6.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    if (__getOwnPropSymbols$6)
-      for (var prop of __getOwnPropSymbols$6(b)) {
-        if (__propIsEnum$6.call(b, prop))
-          __defNormalProp$5(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
   const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseOffsetPagination",
     props: [
@@ -1769,23 +1588,21 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "page-count-change"
     ],
     setup(props, { slots, emit }) {
-      const data = vueDemi.reactive(core.useOffsetPagination(__spreadProps$4(__spreadValues$5({}, props), {
+      const data = vueDemi.reactive(core.useOffsetPagination({
+        ...props,
         onPageChange(...args) {
-          var _a;
-          (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
+          props.onPageChange?.(...args);
           emit("page-change", ...args);
         },
         onPageSizeChange(...args) {
-          var _a;
-          (_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
+          props.onPageSizeChange?.(...args);
           emit("page-size-change", ...args);
         },
         onPageCountChange(...args) {
-          var _a;
-          (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
+          props.onPageCountChange?.(...args);
           emit("page-count-change", ...args);
         }
-      })));
+      }));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1819,25 +1636,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __defProp$4 = Object.defineProperty;
-  var __defProps$3 = Object.defineProperties;
-  var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$4 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$5.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
-    if (__getOwnPropSymbols$5)
-      for (var prop of __getOwnPropSymbols$5(b)) {
-        if (__propIsEnum$5.call(b, prop))
-          __defNormalProp$4(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
   const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UsePointer",
     props: [
@@ -1847,9 +1645,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     ],
     setup(props, { slots }) {
       const el = vueDemi.ref(null);
-      const data = vueDemi.reactive(core.usePointer(__spreadProps$3(__spreadValues$4({}, props), {
+      const data = vueDemi.reactive(core.usePointer({
+        ...props,
         target: props.target === "self" ? el : defaultWindow
-      })));
+      }));
       return () => {
         if (slots.default)
           return slots.default(data, { ref: el });
@@ -1935,23 +1734,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-  var __objRest = (source, exclude) => {
-    var target = {};
-    for (var prop in source)
-      if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
-        target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols$4)
-      for (var prop of __getOwnPropSymbols$4(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
-          target[prop] = source[prop];
-      }
-    return target;
-  };
   function useMutationObserver(target, callback, options = {}) {
-    const _a = options, { window = defaultWindow } = _a, mutationOptions = __objRest(_a, ["window"]);
+    const { window = defaultWindow, ...mutationOptions } = options;
     let observer;
     const isSupported = useSupported(() => window && "MutationObserver" in window);
     const cleanup = () => {
@@ -1985,16 +1769,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   function useCssVar(prop, target, options = {}) {
     const { window = defaultWindow, initialValue = "", observe = false } = options;
     const variable = vueDemi.ref(initialValue);
-    const elRef = vueDemi.computed(() => {
-      var _a;
-      return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
-    });
+    const elRef = vueDemi.computed(() => unrefElement(target) || window?.document?.documentElement);
     function updateCssVar() {
-      var _a;
       const key = shared.toValue(prop);
       const el = shared.toValue(elRef);
       if (el && window) {
-        const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
+        const value = window.getComputedStyle(el).getPropertyValue(key)?.trim();
         variable.value = value || initialValue;
       }
     }
@@ -2012,8 +1792,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     vueDemi.watch(
       variable,
       (val) => {
-        var _a;
-        if ((_a = elRef.value) == null ? void 0 : _a.style)
+        if (elRef.value?.style)
           elRef.value.style.setProperty(shared.toValue(prop), val);
       }
     );
@@ -2093,25 +1872,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __defProp$3 = Object.defineProperty;
-  var __defProps$2 = Object.defineProperties;
-  var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$3 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
-    if (__getOwnPropSymbols$3)
-      for (var prop of __getOwnPropSymbols$3(b)) {
-        if (__propIsEnum$3.call(b, prop))
-          __defNormalProp$3(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
   const vScroll = {
     [shared.directiveHooks.mounted](el, binding) {
       if (typeof binding.value === "function") {
@@ -2126,18 +1886,17 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         });
       } else {
         const [handler, options] = binding.value;
-        const state = useScroll(el, __spreadProps$2(__spreadValues$3({}, options), {
+        const state = useScroll(el, {
+          ...options,
           onScroll(e) {
-            var _a;
-            (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
+            options.onScroll?.(e);
             handler(state);
           },
           onStop(e) {
-            var _a;
-            (_a = options.onStop) == null ? void 0 : _a.call(options, e);
+            options.onStop?.(e);
             handler(state);
           }
-        }));
+        });
       }
     }
   };
@@ -2169,8 +1928,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     let stopTouchMoveListener = null;
     let initialOverflow;
     vueDemi.watch(shared.toRef(element), (el) => {
-      if (el) {
-        const ele = el;
+      const target = resolveElement(shared.toValue(el));
+      if (target) {
+        const ele = target;
         initialOverflow = ele.style.overflow;
         if (isLocked.value)
           ele.style.overflow = "hidden";
@@ -2179,12 +1939,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       immediate: true
     });
     const lock = () => {
-      const ele = shared.toValue(element);
-      if (!ele || isLocked.value)
+      const el = resolveElement(shared.toValue(element));
+      if (!el || isLocked.value)
         return;
       if (shared.isIOS) {
         stopTouchMoveListener = useEventListener(
-          ele,
+          el,
           "touchmove",
           (e) => {
             preventDefault(e);
@@ -2192,15 +1952,15 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
           { passive: false }
         );
       }
-      ele.style.overflow = "hidden";
+      el.style.overflow = "hidden";
       isLocked.value = true;
     };
     const unlock = () => {
-      const ele = shared.toValue(element);
-      if (!ele || !isLocked.value)
+      const el = resolveElement(shared.toValue(element));
+      if (!el || !isLocked.value)
         return;
-      shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
-      ele.style.overflow = initialOverflow;
+      shared.isIOS && stopTouchMoveListener?.();
+      el.style.overflow = initialOverflow;
       isLocked.value = false;
     };
     shared.tryOnScopeDispose(unlock);
@@ -2231,30 +1991,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
   const vScrollLock = onScrollLock();
 
-  var __defProp$2 = Object.defineProperty;
-  var __defProps$1 = Object.defineProperties;
-  var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$2 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
-    if (__getOwnPropSymbols$2)
-      for (var prop of __getOwnPropSymbols$2(b)) {
-        if (__propIsEnum$2.call(b, prop))
-          __defNormalProp$2(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
   const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseTimeAgo",
     props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useTimeAgo(() => props.time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
+      const data = vueDemi.reactive(core.useTimeAgo(() => props.time, { ...props, controls: true }));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -2262,30 +2003,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __defProp$1 = Object.defineProperty;
-  var __defProps = Object.defineProperties;
-  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$1 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    if (__getOwnPropSymbols$1)
-      for (var prop of __getOwnPropSymbols$1(b)) {
-        if (__propIsEnum$1.call(b, prop))
-          __defNormalProp$1(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseTimestamp",
     props: ["immediate", "interval", "offset"],
     setup(props, { slots }) {
-      const data = vueDemi.reactive(core.useTimestamp(__spreadProps(__spreadValues$1({}, props), { controls: true })));
+      const data = vueDemi.reactive(core.useTimestamp({ ...props, controls: true }));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -2293,22 +2015,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  var __defProp = Object.defineProperty;
-  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-  var __hasOwnProp = Object.prototype.hasOwnProperty;
-  var __propIsEnum = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    if (__getOwnPropSymbols)
-      for (var prop of __getOwnPropSymbols(b)) {
-        if (__propIsEnum.call(b, prop))
-          __defNormalProp(a, prop, b[prop]);
-      }
-    return a;
-  };
   const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     name: "UseVirtualList",
     props: [
@@ -2323,11 +2029,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
       return () => vueDemi.h(
         "div",
-        __spreadValues({}, containerProps),
+        { ...containerProps },
         [
           vueDemi.h(
             "div",
-            __spreadValues({}, wrapperProps.value),
+            { ...wrapperProps.value },
             list.value.map((item) => vueDemi.h(
               "div",
               { style: { overFlow: "hidden", height: item.height } },