@vueuse/components 11.2.0 → 12.0.0-beta.1

package/index.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
 var core = require('@vueuse/core');
-var vueDemi = require('vue-demi');
+var vue = require('vue');
 var shared = require('@vueuse/shared');
 
-const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
   setup(props, { slots, emit }) {
-    const target = vueDemi.ref();
+    const target = vue.ref();
     core.onClickOutside(target, (e) => {
       emit("trigger", e);
     }, props.options);
     return () => {
       if (slots.default)
-        return vueDemi.h(props.as || "div", { ref: target }, slots.default());
+        return vue.h(props.as || "div", { ref: target }, slots.default());
     };
   }
 });
@@ -54,7 +54,7 @@ function useEventListener(...args) {
     el.addEventListener(event, listener, options2);
     return () => el.removeEventListener(event, listener, options2);
   };
-  const stopWatch = vueDemi.watch(
+  const stopWatch = vue.watch(
     () => [unrefElement(target), shared.toValue(options)],
     ([el, options2]) => {
       cleanup();
@@ -98,8 +98,23 @@ function onClickOutside(target, handler, options = {}) {
       }
     });
   };
+  function hasMultipleRoots(target2) {
+    const vm = shared.toValue(target2);
+    return vm && vm.$.subTree.shapeFlag === 16;
+  }
+  function checkMultipleRoots(target2, event) {
+    const vm = shared.toValue(target2);
+    const children = vm.$.subTree && vm.$.subTree.children;
+    if (children == null || !Array.isArray(children))
+      return false;
+    return children.some((child) => child.el === event.target || event.composedPath().includes(child.el));
+  }
   const listener = (event) => {
     const el = unrefElement(target);
+    if (event.target == null)
+      return;
+    if (!(el instanceof Element) && hasMultipleRoots(target) && checkMultipleRoots(target, event))
+      return;
     if (!el || el === event.target || event.composedPath().includes(el))
       return;
     if (event.detail === 0)
@@ -140,7 +155,7 @@ function onClickOutside(target, handler, options = {}) {
 }
 
 const vOnClickOutside = {
-  [shared.directiveHooks.mounted](el, binding) {
+  mounted(el, binding) {
     const capture = !binding.modifiers.bubble;
     if (typeof binding.value === "function") {
       el.__onClickOutside_stop = onClickOutside(el, binding.value, { capture });
@@ -149,7 +164,7 @@ const vOnClickOutside = {
       el.__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options));
     }
   },
-  [shared.directiveHooks.unmounted](el) {
+  unmounted(el) {
     el.__onClickOutside_stop();
   }
 };
@@ -201,7 +216,7 @@ function onKeyStroke(...args) {
 }
 
 const vOnKeyStroke = {
-  [shared.directiveHooks.mounted](el, binding) {
+  mounted(el, binding) {
     var _a, _b;
     const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
     if (typeof binding.value === "function") {
@@ -222,7 +237,7 @@ const DEFAULT_DELAY = 500;
 const DEFAULT_THRESHOLD = 10;
 function onLongPress(target, handler, options) {
   var _a, _b;
-  const elementRef = vueDemi.computed(() => unrefElement(target));
+  const elementRef = vue.computed(() => unrefElement(target));
   let timeout;
   let posStart;
   let startTimestamp;
@@ -304,12 +319,12 @@ function onLongPress(target, handler, options) {
   return stop;
 }
 
-const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "OnLongPress",
   props: ["as", "options"],
   emits: ["trigger"],
   setup(props, { slots, emit }) {
-    const target = vueDemi.ref();
+    const target = vue.ref();
     onLongPress(
       target,
       (e) => {
@@ -319,13 +334,13 @@ const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     );
     return () => {
       if (slots.default)
-        return vueDemi.h(props.as || "div", { ref: target }, slots.default());
+        return vue.h(props.as || "div", { ref: target }, slots.default());
     };
   }
 });
 
 const vOnLongPress = {
-  [shared.directiveHooks.mounted](el, binding) {
+  mounted(el, binding) {
     if (typeof binding.value === "function")
       onLongPress(el, binding.value, { modifiers: binding.modifiers });
     else
@@ -333,10 +348,10 @@ const vOnLongPress = {
   }
 };
 
-const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseActiveElement",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       element: core.useActiveElement()
     });
     return () => {
@@ -346,10 +361,10 @@ const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent
   }
 });
 
-const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseBattery",
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useBattery(props));
+    const data = vue.reactive(core.useBattery(props));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -357,10 +372,10 @@ const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseBrowserLocation",
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useBrowserLocation());
+    const data = vue.reactive(core.useBrowserLocation());
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -368,7 +383,7 @@ const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompone
   }
 });
 
-const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseClipboard",
   props: [
     "source",
@@ -378,7 +393,7 @@ const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "legacy"
   ],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useClipboard(props));
+    const data = vue.reactive(core.useClipboard(props));
     return () => {
       var _a;
       return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
@@ -399,19 +414,19 @@ function getSSRHandler(key, fallback) {
 }
 
 function useMounted() {
-  const isMounted = vueDemi.ref(false);
-  const instance = vueDemi.getCurrentInstance();
+  const isMounted = vue.ref(false);
+  const instance = vue.getCurrentInstance();
   if (instance) {
-    vueDemi.onMounted(() => {
+    vue.onMounted(() => {
       isMounted.value = true;
-    }, vueDemi.isVue2 ? void 0 : instance);
+    }, instance);
   }
   return isMounted;
 }
 
 function useSupported(callback) {
   const isMounted = useMounted();
-  return vueDemi.computed(() => {
+  return vue.computed(() => {
     isMounted.value;
     return Boolean(callback());
   });
@@ -421,7 +436,7 @@ function useMediaQuery(query, options = {}) {
   const { window = defaultWindow } = options;
   const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
   let mediaQuery;
-  const matches = vueDemi.ref(false);
+  const matches = vue.ref(false);
   const handler = (event) => {
     matches.value = event.matches;
   };
@@ -433,7 +448,7 @@ function useMediaQuery(query, options = {}) {
     else
       mediaQuery.removeListener(handler);
   };
-  const stopWatch = vueDemi.watchEffect(() => {
+  const stopWatch = vue.watchEffect(() => {
     if (!isSupported.value)
       return;
     cleanup();
@@ -511,7 +526,7 @@ function useStorage(key, defaults, storage, options = {}) {
     },
     initOnMounted
   } = options;
-  const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(typeof defaults === "function" ? defaults() : defaults);
+  const data = (shallow ? vue.shallowRef : vue.ref)(typeof defaults === "function" ? defaults() : defaults);
   if (!storage) {
     try {
       storage = getSSRHandler("getDefaultStorage", () => {
@@ -610,7 +625,7 @@ function useStorage(key, defaults, storage, options = {}) {
       onError(e);
     } finally {
       if (event)
-        vueDemi.nextTick(resumeWatch);
+        vue.nextTick(resumeWatch);
       else
         resumeWatch();
     }
@@ -642,9 +657,9 @@ function useColorMode(options = {}) {
     ...options.modes || {}
   };
   const preferredDark = usePreferredDark({ window });
-  const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
+  const system = vue.computed(() => preferredDark.value ? "dark" : "light");
   const store = storageRef || (storageKey == null ? shared.toRef(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
-  const state = vueDemi.computed(() => store.value === "auto" ? system.value : store.value);
+  const state = vue.computed(() => store.value === "auto" ? system.value : store.value);
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
@@ -698,9 +713,9 @@ function useColorMode(options = {}) {
     else
       defaultOnChanged(mode);
   }
-  vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
+  vue.watch(state, onChanged, { flush: "post", immediate: true });
   shared.tryOnMounted(() => onChanged(state.value));
-  const auto = vueDemi.computed({
+  const auto = vue.computed({
     get() {
       return emitAuto ? store.value : state.value;
     },
@@ -708,19 +723,15 @@ function useColorMode(options = {}) {
       store.value = v;
     }
   });
-  try {
-    return Object.assign(auto, { store, system, state });
-  } catch (e) {
-    return auto;
-  }
+  return Object.assign(auto, { store, system, state });
 }
 
-const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseColorMode",
   props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
   setup(props, { slots }) {
     const mode = useColorMode(props);
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       mode,
       system: mode.system,
       store: mode.store
@@ -732,12 +743,12 @@ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseDark",
   props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
   setup(props, { slots }) {
     const isDark = core.useDark(props);
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       isDark,
       toggleDark: shared.useToggle(isDark)
     });
@@ -748,10 +759,10 @@ const UseDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useDeviceMotion());
+    const data = vue.reactive(core.useDeviceMotion());
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -759,10 +770,10 @@ const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent(
   }
 });
 
-const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseDeviceOrientation",
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useDeviceOrientation());
+    const data = vue.reactive(core.useDeviceOrientation());
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -770,10 +781,10 @@ const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompo
   }
 });
 
-const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseDevicePixelRatio",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       pixelRatio: core.useDevicePixelRatio()
     });
     return () => {
@@ -783,11 +794,11 @@ const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompon
   }
 });
 
-const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseDevicesList",
   props: ["onUpdated", "requestPermissions", "constraints"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useDevicesList(props));
+    const data = vue.reactive(core.useDevicesList(props));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -795,10 +806,10 @@ const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseDocumentVisibility",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       visibility: core.useDocumentVisibility()
     });
     return () => {
@@ -808,7 +819,7 @@ const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComp
   }
 });
 
-const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -829,16 +840,16 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "containerElement"
   ],
   setup(props, { slots }) {
-    const target = vueDemi.ref();
-    const handle = vueDemi.computed(() => {
+    const target = vue.ref();
+    const handle = vue.computed(() => {
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
     });
-    const containerElement = vueDemi.computed(() => {
+    const containerElement = vue.computed(() => {
       var _a;
       return (_a = props.containerElement) != null ? _a : void 0;
     });
-    const disabled = vueDemi.computed(() => !!props.disabled);
+    const disabled = vue.computed(() => !!props.disabled);
     const storageValue = props.storageKey && core.useStorage(
       props.storageKey,
       shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -853,7 +864,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
       storageValue.value.x = position.x;
       storageValue.value.y = position.y;
     };
-    const data = vueDemi.reactive(core.useDraggable(target, {
+    const data = vue.reactive(core.useDraggable(target, {
       ...props,
       handle,
       initialValue,
@@ -863,20 +874,20 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     }));
     return () => {
       if (slots.default)
-        return vueDemi.h(props.as || "div", { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
+        return vue.h(props.as || "div", { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
     };
   }
 });
 
-const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseElementBounding",
   props: ["box", "as"],
   setup(props, { slots }) {
-    const target = vueDemi.ref();
-    const data = vueDemi.reactive(core.useElementBounding(target));
+    const target = vue.ref();
+    const data = vue.reactive(core.useElementBounding(target));
     return () => {
       if (slots.default)
-        return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+        return vue.h(props.as || "div", { ref: target }, slots.default(data));
     };
   }
 });
@@ -887,7 +898,7 @@ function useElementHover(el, options = {}) {
     delayLeave = 0,
     window = defaultWindow
   } = options;
-  const isHovered = vueDemi.ref(false);
+  const isHovered = vue.ref(false);
   let timer;
   const toggle = (entering) => {
     const delay = entering ? delayEnter : delayLeave;
@@ -908,28 +919,28 @@ function useElementHover(el, options = {}) {
 }
 
 const vElementHover = {
-  [shared.directiveHooks.mounted](el, binding) {
+  mounted(el, binding) {
     const value = binding.value;
     if (typeof value === "function") {
       const isHovered = useElementHover(el);
-      vueDemi.watch(isHovered, (v) => value(v));
+      vue.watch(isHovered, (v) => value(v));
     } else {
       const [handler, options] = value;
       const isHovered = useElementHover(el, options);
-      vueDemi.watch(isHovered, (v) => handler(v));
+      vue.watch(isHovered, (v) => handler(v));
     }
   }
 };
 
-const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseElementSize",
   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 }));
+    const target = vue.ref();
+    const data = vue.reactive(core.useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
     return () => {
       if (slots.default)
-        return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+        return vue.h(props.as || "div", { ref: target }, slots.default(data));
     };
   }
 });
@@ -944,11 +955,11 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const targets = vueDemi.computed(() => {
+  const targets = vue.computed(() => {
     const _targets = shared.toValue(target);
     return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
   });
-  const stopWatch = vueDemi.watch(
+  const stopWatch = vue.watch(
     targets,
     (els) => {
       cleanup();
@@ -975,12 +986,12 @@ function useResizeObserver(target, callback, options = {}) {
 
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
   const { window = defaultWindow, box = "content-box" } = options;
-  const isSVG = vueDemi.computed(() => {
+  const isSVG = vue.computed(() => {
     var _a, _b;
     return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
   });
-  const width = vueDemi.ref(initialSize.width);
-  const height = vueDemi.ref(initialSize.height);
+  const width = vue.ref(initialSize.width);
+  const height = vue.ref(initialSize.height);
   const { stop: stop1 } = useResizeObserver(
     target,
     ([entry]) => {
@@ -1012,7 +1023,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
       height.value = "offsetHeight" in ele ? ele.offsetHeight : initialSize.height;
     }
   });
-  const stop2 = vueDemi.watch(
+  const stop2 = vue.watch(
     () => unrefElement(target),
     (ele) => {
       width.value = ele ? initialSize.width : 0;
@@ -1031,26 +1042,26 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
 }
 
 const vElementSize = {
-  [shared.directiveHooks.mounted](el, binding) {
+  mounted(el, binding) {
     var _a;
     const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[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 }));
+    vue.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
   }
 };
 
-const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseElementVisibility",
   props: ["as"],
   setup(props, { slots }) {
-    const target = vueDemi.ref();
-    const data = vueDemi.reactive({
+    const target = vue.ref();
+    const data = vue.reactive({
       isVisible: core.useElementVisibility(target)
     });
     return () => {
       if (slots.default)
-        return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+        return vue.h(props.as || "div", { ref: target }, slots.default(data));
     };
   }
 });
@@ -1064,13 +1075,13 @@ function useIntersectionObserver(target, callback, options = {}) {
     immediate = true
   } = options;
   const isSupported = useSupported(() => window && "IntersectionObserver" in window);
-  const targets = vueDemi.computed(() => {
+  const targets = vue.computed(() => {
     const _target = shared.toValue(target);
     return (Array.isArray(_target) ? _target : [_target]).map(unrefElement).filter(shared.notNullish);
   });
   let cleanup = shared.noop;
-  const isActive = vueDemi.ref(immediate);
-  const stopWatch = isSupported.value ? vueDemi.watch(
+  const isActive = vue.ref(immediate);
+  const stopWatch = isSupported.value ? vue.watch(
     () => [targets.value, unrefElement(root), isActive.value],
     ([targets2, root2]) => {
       cleanup();
@@ -1116,7 +1127,7 @@ function useIntersectionObserver(target, callback, options = {}) {
 
 function useElementVisibility(element, options = {}) {
   const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
-  const elementIsVisible = vueDemi.ref(false);
+  const elementIsVisible = vue.ref(false);
   useIntersectionObserver(
     element,
     (intersectionObserverEntries) => {
@@ -1140,26 +1151,26 @@ function useElementVisibility(element, options = {}) {
 }
 
 const vElementVisibility = {
-  [shared.directiveHooks.mounted](el, binding) {
+  mounted(el, binding) {
     if (typeof binding.value === "function") {
       const handler = binding.value;
       const isVisible = useElementVisibility(el);
-      vueDemi.watch(isVisible, (v) => handler(v), { immediate: true });
+      vue.watch(isVisible, (v) => handler(v), { immediate: true });
     } else {
       const [handler, options] = binding.value;
       const isVisible = useElementVisibility(el, options);
-      vueDemi.watch(isVisible, (v) => handler(v), { immediate: true });
+      vue.watch(isVisible, (v) => handler(v), { immediate: true });
     }
   }
 };
 
-const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseEyeDropper",
   props: {
     sRGBHex: String
   },
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useEyeDropper());
+    const data = vue.reactive(core.useEyeDropper());
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1167,24 +1178,24 @@ const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseFullscreen",
   props: ["as"],
   setup(props, { slots }) {
-    const target = vueDemi.ref();
-    const data = vueDemi.reactive(core.useFullscreen(target));
+    const target = vue.ref();
+    const data = vue.reactive(core.useFullscreen(target));
     return () => {
       if (slots.default)
-        return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+        return vue.h(props.as || "div", { ref: target }, slots.default(data));
     };
   }
 });
 
-const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseGeolocation",
   props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useGeolocation(props));
+    const data = vue.reactive(core.useGeolocation(props));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1192,11 +1203,11 @@ const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseIdle",
   props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useIdle(props.timeout, props));
+    const data = vue.reactive(core.useIdle(props.timeout, props));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1214,10 +1225,10 @@ function useAsyncState(promise, initialState, options) {
     shallow = true,
     throwError
   } = options != null ? options : {};
-  const state = shallow ? vueDemi.shallowRef(initialState) : vueDemi.ref(initialState);
-  const isReady = vueDemi.ref(false);
-  const isLoading = vueDemi.ref(false);
-  const error = vueDemi.shallowRef(void 0);
+  const state = shallow ? vue.shallowRef(initialState) : vue.ref(initialState);
+  const isReady = vue.ref(false);
+  const isLoading = vue.ref(false);
+  const error = vue.shallowRef(void 0);
   async function execute(delay2 = 0, ...args) {
     if (resetOnExecute)
       state.value = initialState;
@@ -1294,7 +1305,7 @@ function useImage(options, asyncStateOptions = {}) {
       ...asyncStateOptions
     }
   );
-  vueDemi.watch(
+  vue.watch(
     () => shared.toValue(options),
     () => state.execute(asyncStateOptions.delay),
     { deep: true }
@@ -1302,7 +1313,7 @@ function useImage(options, asyncStateOptions = {}) {
   return state;
 }
 
-const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseImage = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseImage",
   props: [
     "src",
@@ -1316,7 +1327,7 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "referrerPolicy"
   ],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(useImage(props));
+    const data = vue.reactive(useImage(props));
     return () => {
       if (data.isLoading && slots.loading)
         return slots.loading(data);
@@ -1324,7 +1335,7 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
         return slots.error(data.error);
       if (slots.default)
         return slots.default(data);
-      return vueDemi.h(props.as || "img", props);
+      return vue.h(props.as || "img", props);
     };
   }
 });
@@ -1360,9 +1371,9 @@ function useScroll(element, options = {}) {
       console.error(e);
     }
   } = options;
-  const internalX = vueDemi.ref(0);
-  const internalY = vueDemi.ref(0);
-  const x = vueDemi.computed({
+  const internalX = vue.ref(0);
+  const internalY = vue.ref(0);
+  const x = vue.computed({
     get() {
       return internalX.value;
     },
@@ -1370,7 +1381,7 @@ function useScroll(element, options = {}) {
       scrollTo(x2, void 0);
     }
   });
-  const y = vueDemi.computed({
+  const y = vue.computed({
     get() {
       return internalY.value;
     },
@@ -1396,14 +1407,14 @@ function useScroll(element, options = {}) {
     if (y != null)
       internalY.value = scrollContainer.scrollTop;
   }
-  const isScrolling = vueDemi.ref(false);
-  const arrivedState = vueDemi.reactive({
+  const isScrolling = vue.ref(false);
+  const arrivedState = vue.reactive({
     left: true,
     right: false,
     top: true,
     bottom: false
   });
-  const directions = vueDemi.reactive({
+  const directions = vue.reactive({
     left: false,
     right: false,
     top: false,
@@ -1508,7 +1519,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     interval = 100,
     canLoadMore = () => true
   } = options;
-  const state = vueDemi.reactive(useScroll(
+  const state = vue.reactive(useScroll(
     element,
     {
       ...options,
@@ -1518,9 +1529,9 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
       }
     }
   ));
-  const promise = vueDemi.ref();
-  const isLoading = vueDemi.computed(() => !!promise.value);
-  const observedElement = vueDemi.computed(() => {
+  const promise = vue.ref();
+  const isLoading = vue.computed(() => !!promise.value);
+  const observedElement = vue.computed(() => {
     return resolveElement(shared.toValue(element));
   });
   const isElementVisible = useElementVisibility(observedElement);
@@ -1537,12 +1548,12 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
           new Promise((resolve) => setTimeout(resolve, interval))
         ]).finally(() => {
           promise.value = null;
-          vueDemi.nextTick(() => checkAndLoad());
+          vue.nextTick(() => checkAndLoad());
         });
       }
     }
   }
-  const stop = vueDemi.watch(
+  const stop = vue.watch(
     () => [state.arrivedState[direction], isElementVisible.value],
     checkAndLoad,
     { immediate: true }
@@ -1551,13 +1562,13 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   return {
     isLoading,
     reset() {
-      vueDemi.nextTick(() => checkAndLoad());
+      vue.nextTick(() => checkAndLoad());
     }
   };
 }
 
 const vInfiniteScroll = {
-  [shared.directiveHooks.mounted](el, binding) {
+  mounted(el, binding) {
     if (typeof binding.value === "function")
       useInfiniteScroll(el, binding.value);
     else
@@ -1566,7 +1577,7 @@ const vInfiniteScroll = {
 };
 
 const vIntersectionObserver = {
-  [shared.directiveHooks.mounted](el, binding) {
+  mounted(el, binding) {
     if (typeof binding.value === "function")
       useIntersectionObserver(el, binding.value);
     else
@@ -1574,11 +1585,11 @@ const vIntersectionObserver = {
   }
 };
 
-const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseMouse",
   props: ["touch", "resetOnTouchEnds", "initialValue"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useMouse(props));
+    const data = vue.reactive(core.useMouse(props));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1586,36 +1597,36 @@ const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseMouseElement",
   props: ["handleOutside", "as"],
   setup(props, { slots }) {
-    const target = vueDemi.ref();
-    const data = vueDemi.reactive(core.useMouseInElement(target, props));
+    const target = vue.ref();
+    const data = vue.reactive(core.useMouseInElement(target, props));
     return () => {
       if (slots.default)
-        return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+        return vue.h(props.as || "div", { ref: target }, slots.default(data));
     };
   }
 });
 
-const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
-    const target = vueDemi.ref();
-    const data = vueDemi.reactive(core.useMousePressed({ ...props, target }));
+    const target = vue.ref();
+    const data = vue.reactive(core.useMousePressed({ ...props, target }));
     return () => {
       if (slots.default)
-        return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+        return vue.h(props.as || "div", { ref: target }, slots.default(data));
     };
   }
 });
 
-const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseNetwork",
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useNetwork());
+    const data = vue.reactive(core.useNetwork());
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1623,11 +1634,11 @@ const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseNow = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseNow = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useNow({ ...props, controls: true }));
+    const data = vue.reactive(core.useNow({ ...props, controls: true }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1635,7 +1646,7 @@ const UseNow = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseObjectUrl",
   props: [
     "object"
@@ -1650,7 +1661,7 @@ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseOffsetPagination",
   props: [
     "total",
@@ -1666,7 +1677,7 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompon
     "page-count-change"
   ],
   setup(props, { slots, emit }) {
-    const data = vueDemi.reactive(core.useOffsetPagination({
+    const data = vue.reactive(core.useOffsetPagination({
       ...props,
       onPageChange(...args) {
         var _a;
@@ -1691,10 +1702,10 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompon
   }
 });
 
-const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseOnline",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       isOnline: core.useOnline()
     });
     return () => {
@@ -1704,10 +1715,10 @@ const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UsePageLeave",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       isLeft: core.usePageLeave()
     });
     return () => {
@@ -1717,7 +1728,7 @@ const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UsePointer",
   props: [
     "pointerTypes",
@@ -1725,8 +1736,8 @@ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "target"
   ],
   setup(props, { slots }) {
-    const el = vueDemi.ref(null);
-    const data = vueDemi.reactive(core.usePointer({
+    const el = vue.ref(null);
+    const data = vue.reactive(core.usePointer({
       ...props,
       target: props.target === "self" ? el : defaultWindow
     }));
@@ -1737,23 +1748,23 @@ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UsePointerLock = /* #__PURE__ */ vueDemi.defineComponent({
+const UsePointerLock = /* #__PURE__ */ vue.defineComponent({
   name: "UsePointerLock",
   props: ["as"],
   setup(props, { slots }) {
-    const target = vueDemi.ref();
-    const data = vueDemi.reactive(core.usePointerLock(target));
+    const target = vue.ref();
+    const data = vue.reactive(core.usePointerLock(target));
     return () => {
       if (slots.default)
-        return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
+        return vue.h(props.as || "div", { ref: target }, slots.default(data));
     };
   }
 });
 
-const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UsePreferredColorScheme",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       colorScheme: core.usePreferredColorScheme()
     });
     return () => {
@@ -1763,10 +1774,10 @@ const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCo
   }
 });
 
-const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UsePreferredContrast",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       contrast: core.usePreferredContrast()
     });
     return () => {
@@ -1776,10 +1787,10 @@ const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompo
   }
 });
 
-const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UsePreferredDark",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       prefersDark: core.usePreferredDark()
     });
     return () => {
@@ -1789,10 +1800,10 @@ const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent
   }
 });
 
-const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UsePreferredLanguages",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       languages: core.usePreferredLanguages()
     });
     return () => {
@@ -1802,10 +1813,10 @@ const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComp
   }
 });
 
-const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UsePreferredReducedMotion",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       motion: core.usePreferredReducedMotion()
     });
     return () => {
@@ -1816,7 +1827,7 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.define
 });
 
 const vResizeObserver = {
-  [shared.directiveHooks.mounted](el, binding) {
+  mounted(el, binding) {
     if (typeof binding.value === "function")
       useResizeObserver(el, binding.value);
     else
@@ -1834,12 +1845,12 @@ function useMutationObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const targets = vueDemi.computed(() => {
+  const targets = vue.computed(() => {
     const value = shared.toValue(target);
     const items = (Array.isArray(value) ? value : [value]).map(unrefElement).filter(shared.notNullish);
     return new Set(items);
   });
-  const stopWatch = vueDemi.watch(
+  const stopWatch = vue.watch(
     () => targets.value,
     (targets2) => {
       cleanup();
@@ -1867,8 +1878,8 @@ function useMutationObserver(target, callback, options = {}) {
 
 function useCssVar(prop, target, options = {}) {
   const { window = defaultWindow, initialValue, observe = false } = options;
-  const variable = vueDemi.ref(initialValue);
-  const elRef = vueDemi.computed(() => {
+  const variable = vue.ref(initialValue);
+  const elRef = vue.computed(() => {
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
@@ -1887,7 +1898,7 @@ function useCssVar(prop, target, options = {}) {
       window
     });
   }
-  vueDemi.watch(
+  vue.watch(
     [elRef, () => shared.toValue(prop)],
     (_, old) => {
       if (old[0] && old[1])
@@ -1896,7 +1907,7 @@ function useCssVar(prop, target, options = {}) {
     },
     { immediate: true }
   );
-  vueDemi.watch(
+  vue.watch(
     variable,
     (val) => {
       var _a;
@@ -1917,10 +1928,10 @@ const rightVarName = "--vueuse-safe-area-right";
 const bottomVarName = "--vueuse-safe-area-bottom";
 const leftVarName = "--vueuse-safe-area-left";
 function useScreenSafeArea() {
-  const top = vueDemi.ref("");
-  const right = vueDemi.ref("");
-  const bottom = vueDemi.ref("");
-  const left = vueDemi.ref("");
+  const top = vue.ref("");
+  const right = vue.ref("");
+  const bottom = vue.ref("");
+  const left = vue.ref("");
   if (shared.isClient) {
     const topCssVar = useCssVar(topVarName);
     const rightCssVar = useCssVar(rightVarName);
@@ -1951,7 +1962,7 @@ function getValue(position) {
   return getComputedStyle(document.documentElement).getPropertyValue(position);
 }
 
-const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseScreenSafeArea",
   props: {
     top: Boolean,
@@ -1968,7 +1979,7 @@ const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponen
     } = useScreenSafeArea();
     return () => {
       if (slots.default) {
-        return vueDemi.h("div", {
+        return vue.h("div", {
           style: {
             paddingTop: props.top ? top.value : "",
             paddingRight: props.right ? right.value : "",
@@ -1986,7 +1997,7 @@ const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponen
 });
 
 const vScroll = {
-  [shared.directiveHooks.mounted](el, binding) {
+  mounted(el, binding) {
     if (typeof binding.value === "function") {
       const handler = binding.value;
       const state = useScroll(el, {
@@ -2040,10 +2051,10 @@ function preventDefault(rawEvent) {
 }
 const elInitialOverflow = /* @__PURE__ */ new WeakMap();
 function useScrollLock(element, initialState = false) {
-  const isLocked = vueDemi.ref(initialState);
+  const isLocked = vue.ref(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow = "";
-  vueDemi.watch(shared.toRef(element), (el) => {
+  vue.watch(shared.toRef(element), (el) => {
     const target = resolveElement(shared.toValue(el));
     if (target) {
       const ele = target;
@@ -2087,7 +2098,7 @@ function useScrollLock(element, initialState = false) {
     isLocked.value = false;
   };
   shared.tryOnScopeDispose(unlock);
-  return vueDemi.computed({
+  return vue.computed({
     get() {
       return isLocked.value;
     },
@@ -2101,23 +2112,23 @@ function useScrollLock(element, initialState = false) {
 
 function onScrollLock() {
   let isMounted = false;
-  const state = vueDemi.ref(false);
+  const state = vue.ref(false);
   return (el, binding) => {
     state.value = binding.value;
     if (isMounted)
       return;
     isMounted = true;
     const isLocked = useScrollLock(el, binding.value);
-    vueDemi.watch(state, (v) => isLocked.value = v);
+    vue.watch(state, (v) => isLocked.value = v);
   };
 }
 const vScrollLock = onScrollLock();
 
-const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useTimeAgo(() => props.time, { ...props, controls: true }));
+    const data = vue.reactive(core.useTimeAgo(() => props.time, { ...props, controls: true }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -2125,11 +2136,11 @@ const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseTimestamp",
   props: ["immediate", "interval", "offset"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useTimestamp({ ...props, controls: true }));
+    const data = vue.reactive(core.useTimestamp({ ...props, controls: true }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -2137,7 +2148,7 @@ const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseVirtualList",
   props: [
     "list",
@@ -2145,21 +2156,21 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "height"
   ],
   setup(props, { slots, expose }) {
-    const { list: listRef } = vueDemi.toRefs(props);
+    const { list: listRef } = vue.toRefs(props);
     const { list, containerProps, wrapperProps, scrollTo } = core.useVirtualList(listRef, props.options);
     expose({ scrollTo });
     if (containerProps.style && typeof containerProps.style === "object" && !Array.isArray(containerProps.style))
       containerProps.style.height = props.height || "300px";
-    return () => vueDemi.h("div", { ...containerProps }, [
-      vueDemi.h("div", { ...wrapperProps.value }, list.value.map((item) => vueDemi.h("div", { style: { overflow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
+    return () => vue.h("div", { ...containerProps }, [
+      vue.h("div", { ...wrapperProps.value }, list.value.map((item) => vue.h("div", { style: { overflow: "hidden", height: item.height } }, slots.default ? slots.default(item) : "Please set content!")))
     ]);
   }
 });
 
-const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseWindowFocus",
   setup(props, { slots }) {
-    const data = vueDemi.reactive({
+    const data = vue.reactive({
       focused: core.useWindowFocus()
     });
     return () => {
@@ -2169,11 +2180,11 @@ const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseWindowSize",
   props: ["initialWidth", "initialHeight"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useWindowSize(props));
+    const data = vue.reactive(core.useWindowSize(props));
     return () => {
       if (slots.default)
         return slots.default(data);