@vueuse/components 11.3.0 → 12.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.cjs CHANGED
@@ -1,21 +1,21 @@
1
1
  'use strict';
2
2
 
3
3
  var core = require('@vueuse/core');
4
- var vueDemi = require('vue-demi');
4
+ var vue = require('vue');
5
5
  var shared = require('@vueuse/shared');
6
6
 
7
- const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
7
+ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
8
8
  name: "OnClickOutside",
9
9
  props: ["as", "options"],
10
10
  emits: ["trigger"],
11
11
  setup(props, { slots, emit }) {
12
- const target = vueDemi.ref();
12
+ const target = vue.ref();
13
13
  core.onClickOutside(target, (e) => {
14
14
  emit("trigger", e);
15
15
  }, props.options);
16
16
  return () => {
17
17
  if (slots.default)
18
- return vueDemi.h(props.as || "div", { ref: target }, slots.default());
18
+ return vue.h(props.as || "div", { ref: target }, slots.default());
19
19
  };
20
20
  }
21
21
  });
@@ -54,7 +54,7 @@ function useEventListener(...args) {
54
54
  el.addEventListener(event, listener, options2);
55
55
  return () => el.removeEventListener(event, listener, options2);
56
56
  };
57
- const stopWatch = vueDemi.watch(
57
+ const stopWatch = vue.watch(
58
58
  () => [unrefElement(target), shared.toValue(options)],
59
59
  ([el, options2]) => {
60
60
  cleanup();
@@ -155,7 +155,7 @@ function onClickOutside(target, handler, options = {}) {
155
155
  }
156
156
 
157
157
  const vOnClickOutside = {
158
- [shared.directiveHooks.mounted](el, binding) {
158
+ mounted(el, binding) {
159
159
  const capture = !binding.modifiers.bubble;
160
160
  if (typeof binding.value === "function") {
161
161
  el.__onClickOutside_stop = onClickOutside(el, binding.value, { capture });
@@ -164,7 +164,7 @@ const vOnClickOutside = {
164
164
  el.__onClickOutside_stop = onClickOutside(el, handler, Object.assign({ capture }, options));
165
165
  }
166
166
  },
167
- [shared.directiveHooks.unmounted](el) {
167
+ unmounted(el) {
168
168
  el.__onClickOutside_stop();
169
169
  }
170
170
  };
@@ -216,7 +216,7 @@ function onKeyStroke(...args) {
216
216
  }
217
217
 
218
218
  const vOnKeyStroke = {
219
- [shared.directiveHooks.mounted](el, binding) {
219
+ mounted(el, binding) {
220
220
  var _a, _b;
221
221
  const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
222
222
  if (typeof binding.value === "function") {
@@ -237,7 +237,7 @@ const DEFAULT_DELAY = 500;
237
237
  const DEFAULT_THRESHOLD = 10;
238
238
  function onLongPress(target, handler, options) {
239
239
  var _a, _b;
240
- const elementRef = vueDemi.computed(() => unrefElement(target));
240
+ const elementRef = vue.computed(() => unrefElement(target));
241
241
  let timeout;
242
242
  let posStart;
243
243
  let startTimestamp;
@@ -319,12 +319,12 @@ function onLongPress(target, handler, options) {
319
319
  return stop;
320
320
  }
321
321
 
322
- const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
322
+ const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
323
323
  name: "OnLongPress",
324
324
  props: ["as", "options"],
325
325
  emits: ["trigger"],
326
326
  setup(props, { slots, emit }) {
327
- const target = vueDemi.ref();
327
+ const target = vue.ref();
328
328
  onLongPress(
329
329
  target,
330
330
  (e) => {
@@ -334,13 +334,13 @@ const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
334
334
  );
335
335
  return () => {
336
336
  if (slots.default)
337
- return vueDemi.h(props.as || "div", { ref: target }, slots.default());
337
+ return vue.h(props.as || "div", { ref: target }, slots.default());
338
338
  };
339
339
  }
340
340
  });
341
341
 
342
342
  const vOnLongPress = {
343
- [shared.directiveHooks.mounted](el, binding) {
343
+ mounted(el, binding) {
344
344
  if (typeof binding.value === "function")
345
345
  onLongPress(el, binding.value, { modifiers: binding.modifiers });
346
346
  else
@@ -348,10 +348,10 @@ const vOnLongPress = {
348
348
  }
349
349
  };
350
350
 
351
- const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
351
+ const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
352
352
  name: "UseActiveElement",
353
353
  setup(props, { slots }) {
354
- const data = vueDemi.reactive({
354
+ const data = vue.reactive({
355
355
  element: core.useActiveElement()
356
356
  });
357
357
  return () => {
@@ -361,10 +361,10 @@ const UseActiveElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent
361
361
  }
362
362
  });
363
363
 
364
- const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
364
+ const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
365
365
  name: "UseBattery",
366
366
  setup(props, { slots }) {
367
- const data = vueDemi.reactive(core.useBattery(props));
367
+ const data = vue.reactive(core.useBattery(props));
368
368
  return () => {
369
369
  if (slots.default)
370
370
  return slots.default(data);
@@ -372,10 +372,10 @@ const UseBattery = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
372
372
  }
373
373
  });
374
374
 
375
- const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
375
+ const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
376
376
  name: "UseBrowserLocation",
377
377
  setup(props, { slots }) {
378
- const data = vueDemi.reactive(core.useBrowserLocation());
378
+ const data = vue.reactive(core.useBrowserLocation());
379
379
  return () => {
380
380
  if (slots.default)
381
381
  return slots.default(data);
@@ -383,7 +383,7 @@ const UseBrowserLocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompone
383
383
  }
384
384
  });
385
385
 
386
- const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
386
+ const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
387
387
  name: "UseClipboard",
388
388
  props: [
389
389
  "source",
@@ -393,7 +393,7 @@ const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
393
393
  "legacy"
394
394
  ],
395
395
  setup(props, { slots }) {
396
- const data = vueDemi.reactive(core.useClipboard(props));
396
+ const data = vue.reactive(core.useClipboard(props));
397
397
  return () => {
398
398
  var _a;
399
399
  return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
@@ -414,19 +414,19 @@ function getSSRHandler(key, fallback) {
414
414
  }
415
415
 
416
416
  function useMounted() {
417
- const isMounted = vueDemi.ref(false);
418
- const instance = vueDemi.getCurrentInstance();
417
+ const isMounted = vue.ref(false);
418
+ const instance = vue.getCurrentInstance();
419
419
  if (instance) {
420
- vueDemi.onMounted(() => {
420
+ vue.onMounted(() => {
421
421
  isMounted.value = true;
422
- }, vueDemi.isVue2 ? void 0 : instance);
422
+ }, instance);
423
423
  }
424
424
  return isMounted;
425
425
  }
426
426
 
427
427
  function useSupported(callback) {
428
428
  const isMounted = useMounted();
429
- return vueDemi.computed(() => {
429
+ return vue.computed(() => {
430
430
  isMounted.value;
431
431
  return Boolean(callback());
432
432
  });
@@ -436,7 +436,7 @@ function useMediaQuery(query, options = {}) {
436
436
  const { window = defaultWindow } = options;
437
437
  const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
438
438
  let mediaQuery;
439
- const matches = vueDemi.ref(false);
439
+ const matches = vue.ref(false);
440
440
  const handler = (event) => {
441
441
  matches.value = event.matches;
442
442
  };
@@ -448,7 +448,7 @@ function useMediaQuery(query, options = {}) {
448
448
  else
449
449
  mediaQuery.removeListener(handler);
450
450
  };
451
- const stopWatch = vueDemi.watchEffect(() => {
451
+ const stopWatch = vue.watchEffect(() => {
452
452
  if (!isSupported.value)
453
453
  return;
454
454
  cleanup();
@@ -526,7 +526,7 @@ function useStorage(key, defaults, storage, options = {}) {
526
526
  },
527
527
  initOnMounted
528
528
  } = options;
529
- const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(typeof defaults === "function" ? defaults() : defaults);
529
+ const data = (shallow ? vue.shallowRef : vue.ref)(typeof defaults === "function" ? defaults() : defaults);
530
530
  if (!storage) {
531
531
  try {
532
532
  storage = getSSRHandler("getDefaultStorage", () => {
@@ -625,7 +625,7 @@ function useStorage(key, defaults, storage, options = {}) {
625
625
  onError(e);
626
626
  } finally {
627
627
  if (event)
628
- vueDemi.nextTick(resumeWatch);
628
+ vue.nextTick(resumeWatch);
629
629
  else
630
630
  resumeWatch();
631
631
  }
@@ -657,9 +657,9 @@ function useColorMode(options = {}) {
657
657
  ...options.modes || {}
658
658
  };
659
659
  const preferredDark = usePreferredDark({ window });
660
- const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
660
+ const system = vue.computed(() => preferredDark.value ? "dark" : "light");
661
661
  const store = storageRef || (storageKey == null ? shared.toRef(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
662
- const state = vueDemi.computed(() => store.value === "auto" ? system.value : store.value);
662
+ const state = vue.computed(() => store.value === "auto" ? system.value : store.value);
663
663
  const updateHTMLAttrs = getSSRHandler(
664
664
  "updateHTMLAttrs",
665
665
  (selector2, attribute2, value) => {
@@ -713,9 +713,9 @@ function useColorMode(options = {}) {
713
713
  else
714
714
  defaultOnChanged(mode);
715
715
  }
716
- vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
716
+ vue.watch(state, onChanged, { flush: "post", immediate: true });
717
717
  shared.tryOnMounted(() => onChanged(state.value));
718
- const auto = vueDemi.computed({
718
+ const auto = vue.computed({
719
719
  get() {
720
720
  return emitAuto ? store.value : state.value;
721
721
  },
@@ -723,19 +723,15 @@ function useColorMode(options = {}) {
723
723
  store.value = v;
724
724
  }
725
725
  });
726
- try {
727
- return Object.assign(auto, { store, system, state });
728
- } catch (e) {
729
- return auto;
730
- }
726
+ return Object.assign(auto, { store, system, state });
731
727
  }
732
728
 
733
- const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
729
+ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
734
730
  name: "UseColorMode",
735
731
  props: ["selector", "attribute", "modes", "onChanged", "storageKey", "storage", "emitAuto"],
736
732
  setup(props, { slots }) {
737
733
  const mode = useColorMode(props);
738
- const data = vueDemi.reactive({
734
+ const data = vue.reactive({
739
735
  mode,
740
736
  system: mode.system,
741
737
  store: mode.store
@@ -747,12 +743,12 @@ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
747
743
  }
748
744
  });
749
745
 
750
- const UseDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
746
+ const UseDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
751
747
  name: "UseDark",
752
748
  props: ["selector", "attribute", "valueDark", "valueLight", "onChanged", "storageKey", "storage"],
753
749
  setup(props, { slots }) {
754
750
  const isDark = core.useDark(props);
755
- const data = vueDemi.reactive({
751
+ const data = vue.reactive({
756
752
  isDark,
757
753
  toggleDark: shared.useToggle(isDark)
758
754
  });
@@ -763,10 +759,10 @@ const UseDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
763
759
  }
764
760
  });
765
761
 
766
- const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
762
+ const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
767
763
  name: "UseDeviceMotion",
768
764
  setup(props, { slots }) {
769
- const data = vueDemi.reactive(core.useDeviceMotion());
765
+ const data = vue.reactive(core.useDeviceMotion());
770
766
  return () => {
771
767
  if (slots.default)
772
768
  return slots.default(data);
@@ -774,10 +770,10 @@ const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent(
774
770
  }
775
771
  });
776
772
 
777
- const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
773
+ const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
778
774
  name: "UseDeviceOrientation",
779
775
  setup(props, { slots }) {
780
- const data = vueDemi.reactive(core.useDeviceOrientation());
776
+ const data = vue.reactive(core.useDeviceOrientation());
781
777
  return () => {
782
778
  if (slots.default)
783
779
  return slots.default(data);
@@ -785,10 +781,10 @@ const UseDeviceOrientation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompo
785
781
  }
786
782
  });
787
783
 
788
- const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
784
+ const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
789
785
  name: "UseDevicePixelRatio",
790
786
  setup(props, { slots }) {
791
- const data = vueDemi.reactive({
787
+ const data = vue.reactive({
792
788
  pixelRatio: core.useDevicePixelRatio()
793
789
  });
794
790
  return () => {
@@ -798,11 +794,11 @@ const UseDevicePixelRatio = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompon
798
794
  }
799
795
  });
800
796
 
801
- const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
797
+ const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
802
798
  name: "UseDevicesList",
803
799
  props: ["onUpdated", "requestPermissions", "constraints"],
804
800
  setup(props, { slots }) {
805
- const data = vueDemi.reactive(core.useDevicesList(props));
801
+ const data = vue.reactive(core.useDevicesList(props));
806
802
  return () => {
807
803
  if (slots.default)
808
804
  return slots.default(data);
@@ -810,10 +806,10 @@ const UseDevicesList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
810
806
  }
811
807
  });
812
808
 
813
- const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
809
+ const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
814
810
  name: "UseDocumentVisibility",
815
811
  setup(props, { slots }) {
816
- const data = vueDemi.reactive({
812
+ const data = vue.reactive({
817
813
  visibility: core.useDocumentVisibility()
818
814
  });
819
815
  return () => {
@@ -823,7 +819,7 @@ const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComp
823
819
  }
824
820
  });
825
821
 
826
- const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
822
+ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
827
823
  name: "UseDraggable",
828
824
  props: [
829
825
  "storageKey",
@@ -844,16 +840,16 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
844
840
  "containerElement"
845
841
  ],
846
842
  setup(props, { slots }) {
847
- const target = vueDemi.ref();
848
- const handle = vueDemi.computed(() => {
843
+ const target = vue.ref();
844
+ const handle = vue.computed(() => {
849
845
  var _a;
850
846
  return (_a = props.handle) != null ? _a : target.value;
851
847
  });
852
- const containerElement = vueDemi.computed(() => {
848
+ const containerElement = vue.computed(() => {
853
849
  var _a;
854
850
  return (_a = props.containerElement) != null ? _a : void 0;
855
851
  });
856
- const disabled = vueDemi.computed(() => !!props.disabled);
852
+ const disabled = vue.computed(() => !!props.disabled);
857
853
  const storageValue = props.storageKey && core.useStorage(
858
854
  props.storageKey,
859
855
  shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -868,7 +864,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
868
864
  storageValue.value.x = position.x;
869
865
  storageValue.value.y = position.y;
870
866
  };
871
- const data = vueDemi.reactive(core.useDraggable(target, {
867
+ const data = vue.reactive(core.useDraggable(target, {
872
868
  ...props,
873
869
  handle,
874
870
  initialValue,
@@ -878,20 +874,20 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
878
874
  }));
879
875
  return () => {
880
876
  if (slots.default)
881
- return vueDemi.h(props.as || "div", { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
877
+ return vue.h(props.as || "div", { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
882
878
  };
883
879
  }
884
880
  });
885
881
 
886
- const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
882
+ const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
887
883
  name: "UseElementBounding",
888
884
  props: ["box", "as"],
889
885
  setup(props, { slots }) {
890
- const target = vueDemi.ref();
891
- const data = vueDemi.reactive(core.useElementBounding(target));
886
+ const target = vue.ref();
887
+ const data = vue.reactive(core.useElementBounding(target));
892
888
  return () => {
893
889
  if (slots.default)
894
- return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
890
+ return vue.h(props.as || "div", { ref: target }, slots.default(data));
895
891
  };
896
892
  }
897
893
  });
@@ -902,7 +898,7 @@ function useElementHover(el, options = {}) {
902
898
  delayLeave = 0,
903
899
  window = defaultWindow
904
900
  } = options;
905
- const isHovered = vueDemi.ref(false);
901
+ const isHovered = vue.ref(false);
906
902
  let timer;
907
903
  const toggle = (entering) => {
908
904
  const delay = entering ? delayEnter : delayLeave;
@@ -923,28 +919,28 @@ function useElementHover(el, options = {}) {
923
919
  }
924
920
 
925
921
  const vElementHover = {
926
- [shared.directiveHooks.mounted](el, binding) {
922
+ mounted(el, binding) {
927
923
  const value = binding.value;
928
924
  if (typeof value === "function") {
929
925
  const isHovered = useElementHover(el);
930
- vueDemi.watch(isHovered, (v) => value(v));
926
+ vue.watch(isHovered, (v) => value(v));
931
927
  } else {
932
928
  const [handler, options] = value;
933
929
  const isHovered = useElementHover(el, options);
934
- vueDemi.watch(isHovered, (v) => handler(v));
930
+ vue.watch(isHovered, (v) => handler(v));
935
931
  }
936
932
  }
937
933
  };
938
934
 
939
- const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
935
+ const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
940
936
  name: "UseElementSize",
941
937
  props: ["width", "height", "box", "as"],
942
938
  setup(props, { slots }) {
943
- const target = vueDemi.ref();
944
- const data = vueDemi.reactive(core.useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
939
+ const target = vue.ref();
940
+ const data = vue.reactive(core.useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
945
941
  return () => {
946
942
  if (slots.default)
947
- return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
943
+ return vue.h(props.as || "div", { ref: target }, slots.default(data));
948
944
  };
949
945
  }
950
946
  });
@@ -959,11 +955,11 @@ function useResizeObserver(target, callback, options = {}) {
959
955
  observer = void 0;
960
956
  }
961
957
  };
962
- const targets = vueDemi.computed(() => {
958
+ const targets = vue.computed(() => {
963
959
  const _targets = shared.toValue(target);
964
960
  return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
965
961
  });
966
- const stopWatch = vueDemi.watch(
962
+ const stopWatch = vue.watch(
967
963
  targets,
968
964
  (els) => {
969
965
  cleanup();
@@ -990,12 +986,12 @@ function useResizeObserver(target, callback, options = {}) {
990
986
 
991
987
  function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
992
988
  const { window = defaultWindow, box = "content-box" } = options;
993
- const isSVG = vueDemi.computed(() => {
989
+ const isSVG = vue.computed(() => {
994
990
  var _a, _b;
995
991
  return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
996
992
  });
997
- const width = vueDemi.ref(initialSize.width);
998
- const height = vueDemi.ref(initialSize.height);
993
+ const width = vue.ref(initialSize.width);
994
+ const height = vue.ref(initialSize.height);
999
995
  const { stop: stop1 } = useResizeObserver(
1000
996
  target,
1001
997
  ([entry]) => {
@@ -1027,7 +1023,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
1027
1023
  height.value = "offsetHeight" in ele ? ele.offsetHeight : initialSize.height;
1028
1024
  }
1029
1025
  });
1030
- const stop2 = vueDemi.watch(
1026
+ const stop2 = vue.watch(
1031
1027
  () => unrefElement(target),
1032
1028
  (ele) => {
1033
1029
  width.value = ele ? initialSize.width : 0;
@@ -1046,26 +1042,26 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
1046
1042
  }
1047
1043
 
1048
1044
  const vElementSize = {
1049
- [shared.directiveHooks.mounted](el, binding) {
1045
+ mounted(el, binding) {
1050
1046
  var _a;
1051
1047
  const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
1052
1048
  const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
1053
1049
  const { width, height } = useElementSize(el, ...options);
1054
- vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
1050
+ vue.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
1055
1051
  }
1056
1052
  };
1057
1053
 
1058
- const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1054
+ const UseElementVisibility = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1059
1055
  name: "UseElementVisibility",
1060
1056
  props: ["as"],
1061
1057
  setup(props, { slots }) {
1062
- const target = vueDemi.ref();
1063
- const data = vueDemi.reactive({
1058
+ const target = vue.ref();
1059
+ const data = vue.reactive({
1064
1060
  isVisible: core.useElementVisibility(target)
1065
1061
  });
1066
1062
  return () => {
1067
1063
  if (slots.default)
1068
- return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
1064
+ return vue.h(props.as || "div", { ref: target }, slots.default(data));
1069
1065
  };
1070
1066
  }
1071
1067
  });
@@ -1079,13 +1075,13 @@ function useIntersectionObserver(target, callback, options = {}) {
1079
1075
  immediate = true
1080
1076
  } = options;
1081
1077
  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
1082
- const targets = vueDemi.computed(() => {
1078
+ const targets = vue.computed(() => {
1083
1079
  const _target = shared.toValue(target);
1084
1080
  return (Array.isArray(_target) ? _target : [_target]).map(unrefElement).filter(shared.notNullish);
1085
1081
  });
1086
1082
  let cleanup = shared.noop;
1087
- const isActive = vueDemi.ref(immediate);
1088
- const stopWatch = isSupported.value ? vueDemi.watch(
1083
+ const isActive = vue.ref(immediate);
1084
+ const stopWatch = isSupported.value ? vue.watch(
1089
1085
  () => [targets.value, unrefElement(root), isActive.value],
1090
1086
  ([targets2, root2]) => {
1091
1087
  cleanup();
@@ -1131,7 +1127,7 @@ function useIntersectionObserver(target, callback, options = {}) {
1131
1127
 
1132
1128
  function useElementVisibility(element, options = {}) {
1133
1129
  const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
1134
- const elementIsVisible = vueDemi.ref(false);
1130
+ const elementIsVisible = vue.ref(false);
1135
1131
  useIntersectionObserver(
1136
1132
  element,
1137
1133
  (intersectionObserverEntries) => {
@@ -1155,26 +1151,26 @@ function useElementVisibility(element, options = {}) {
1155
1151
  }
1156
1152
 
1157
1153
  const vElementVisibility = {
1158
- [shared.directiveHooks.mounted](el, binding) {
1154
+ mounted(el, binding) {
1159
1155
  if (typeof binding.value === "function") {
1160
1156
  const handler = binding.value;
1161
1157
  const isVisible = useElementVisibility(el);
1162
- vueDemi.watch(isVisible, (v) => handler(v), { immediate: true });
1158
+ vue.watch(isVisible, (v) => handler(v), { immediate: true });
1163
1159
  } else {
1164
1160
  const [handler, options] = binding.value;
1165
1161
  const isVisible = useElementVisibility(el, options);
1166
- vueDemi.watch(isVisible, (v) => handler(v), { immediate: true });
1162
+ vue.watch(isVisible, (v) => handler(v), { immediate: true });
1167
1163
  }
1168
1164
  }
1169
1165
  };
1170
1166
 
1171
- const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1167
+ const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1172
1168
  name: "UseEyeDropper",
1173
1169
  props: {
1174
1170
  sRGBHex: String
1175
1171
  },
1176
1172
  setup(props, { slots }) {
1177
- const data = vueDemi.reactive(core.useEyeDropper());
1173
+ const data = vue.reactive(core.useEyeDropper());
1178
1174
  return () => {
1179
1175
  if (slots.default)
1180
1176
  return slots.default(data);
@@ -1182,24 +1178,24 @@ const UseEyeDropper = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1182
1178
  }
1183
1179
  });
1184
1180
 
1185
- const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1181
+ const UseFullscreen = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1186
1182
  name: "UseFullscreen",
1187
1183
  props: ["as"],
1188
1184
  setup(props, { slots }) {
1189
- const target = vueDemi.ref();
1190
- const data = vueDemi.reactive(core.useFullscreen(target));
1185
+ const target = vue.ref();
1186
+ const data = vue.reactive(core.useFullscreen(target));
1191
1187
  return () => {
1192
1188
  if (slots.default)
1193
- return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
1189
+ return vue.h(props.as || "div", { ref: target }, slots.default(data));
1194
1190
  };
1195
1191
  }
1196
1192
  });
1197
1193
 
1198
- const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1194
+ const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1199
1195
  name: "UseGeolocation",
1200
1196
  props: ["enableHighAccuracy", "maximumAge", "timeout", "navigator"],
1201
1197
  setup(props, { slots }) {
1202
- const data = vueDemi.reactive(core.useGeolocation(props));
1198
+ const data = vue.reactive(core.useGeolocation(props));
1203
1199
  return () => {
1204
1200
  if (slots.default)
1205
1201
  return slots.default(data);
@@ -1207,11 +1203,11 @@ const UseGeolocation = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1207
1203
  }
1208
1204
  });
1209
1205
 
1210
- const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1206
+ const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1211
1207
  name: "UseIdle",
1212
1208
  props: ["timeout", "events", "listenForVisibilityChange", "initialState"],
1213
1209
  setup(props, { slots }) {
1214
- const data = vueDemi.reactive(core.useIdle(props.timeout, props));
1210
+ const data = vue.reactive(core.useIdle(props.timeout, props));
1215
1211
  return () => {
1216
1212
  if (slots.default)
1217
1213
  return slots.default(data);
@@ -1229,10 +1225,10 @@ function useAsyncState(promise, initialState, options) {
1229
1225
  shallow = true,
1230
1226
  throwError
1231
1227
  } = options != null ? options : {};
1232
- const state = shallow ? vueDemi.shallowRef(initialState) : vueDemi.ref(initialState);
1233
- const isReady = vueDemi.ref(false);
1234
- const isLoading = vueDemi.ref(false);
1235
- const error = vueDemi.shallowRef(void 0);
1228
+ const state = shallow ? vue.shallowRef(initialState) : vue.ref(initialState);
1229
+ const isReady = vue.ref(false);
1230
+ const isLoading = vue.ref(false);
1231
+ const error = vue.shallowRef(void 0);
1236
1232
  async function execute(delay2 = 0, ...args) {
1237
1233
  if (resetOnExecute)
1238
1234
  state.value = initialState;
@@ -1309,7 +1305,7 @@ function useImage(options, asyncStateOptions = {}) {
1309
1305
  ...asyncStateOptions
1310
1306
  }
1311
1307
  );
1312
- vueDemi.watch(
1308
+ vue.watch(
1313
1309
  () => shared.toValue(options),
1314
1310
  () => state.execute(asyncStateOptions.delay),
1315
1311
  { deep: true }
@@ -1317,7 +1313,7 @@ function useImage(options, asyncStateOptions = {}) {
1317
1313
  return state;
1318
1314
  }
1319
1315
 
1320
- const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1316
+ const UseImage = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1321
1317
  name: "UseImage",
1322
1318
  props: [
1323
1319
  "src",
@@ -1331,7 +1327,7 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1331
1327
  "referrerPolicy"
1332
1328
  ],
1333
1329
  setup(props, { slots }) {
1334
- const data = vueDemi.reactive(useImage(props));
1330
+ const data = vue.reactive(useImage(props));
1335
1331
  return () => {
1336
1332
  if (data.isLoading && slots.loading)
1337
1333
  return slots.loading(data);
@@ -1339,7 +1335,7 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1339
1335
  return slots.error(data.error);
1340
1336
  if (slots.default)
1341
1337
  return slots.default(data);
1342
- return vueDemi.h(props.as || "img", props);
1338
+ return vue.h(props.as || "img", props);
1343
1339
  };
1344
1340
  }
1345
1341
  });
@@ -1375,9 +1371,9 @@ function useScroll(element, options = {}) {
1375
1371
  console.error(e);
1376
1372
  }
1377
1373
  } = options;
1378
- const internalX = vueDemi.ref(0);
1379
- const internalY = vueDemi.ref(0);
1380
- const x = vueDemi.computed({
1374
+ const internalX = vue.ref(0);
1375
+ const internalY = vue.ref(0);
1376
+ const x = vue.computed({
1381
1377
  get() {
1382
1378
  return internalX.value;
1383
1379
  },
@@ -1385,7 +1381,7 @@ function useScroll(element, options = {}) {
1385
1381
  scrollTo(x2, void 0);
1386
1382
  }
1387
1383
  });
1388
- const y = vueDemi.computed({
1384
+ const y = vue.computed({
1389
1385
  get() {
1390
1386
  return internalY.value;
1391
1387
  },
@@ -1411,14 +1407,14 @@ function useScroll(element, options = {}) {
1411
1407
  if (y != null)
1412
1408
  internalY.value = scrollContainer.scrollTop;
1413
1409
  }
1414
- const isScrolling = vueDemi.ref(false);
1415
- const arrivedState = vueDemi.reactive({
1410
+ const isScrolling = vue.ref(false);
1411
+ const arrivedState = vue.reactive({
1416
1412
  left: true,
1417
1413
  right: false,
1418
1414
  top: true,
1419
1415
  bottom: false
1420
1416
  });
1421
- const directions = vueDemi.reactive({
1417
+ const directions = vue.reactive({
1422
1418
  left: false,
1423
1419
  right: false,
1424
1420
  top: false,
@@ -1523,7 +1519,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
1523
1519
  interval = 100,
1524
1520
  canLoadMore = () => true
1525
1521
  } = options;
1526
- const state = vueDemi.reactive(useScroll(
1522
+ const state = vue.reactive(useScroll(
1527
1523
  element,
1528
1524
  {
1529
1525
  ...options,
@@ -1533,9 +1529,9 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
1533
1529
  }
1534
1530
  }
1535
1531
  ));
1536
- const promise = vueDemi.ref();
1537
- const isLoading = vueDemi.computed(() => !!promise.value);
1538
- const observedElement = vueDemi.computed(() => {
1532
+ const promise = vue.ref();
1533
+ const isLoading = vue.computed(() => !!promise.value);
1534
+ const observedElement = vue.computed(() => {
1539
1535
  return resolveElement(shared.toValue(element));
1540
1536
  });
1541
1537
  const isElementVisible = useElementVisibility(observedElement);
@@ -1552,12 +1548,12 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
1552
1548
  new Promise((resolve) => setTimeout(resolve, interval))
1553
1549
  ]).finally(() => {
1554
1550
  promise.value = null;
1555
- vueDemi.nextTick(() => checkAndLoad());
1551
+ vue.nextTick(() => checkAndLoad());
1556
1552
  });
1557
1553
  }
1558
1554
  }
1559
1555
  }
1560
- const stop = vueDemi.watch(
1556
+ const stop = vue.watch(
1561
1557
  () => [state.arrivedState[direction], isElementVisible.value],
1562
1558
  checkAndLoad,
1563
1559
  { immediate: true }
@@ -1566,13 +1562,13 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
1566
1562
  return {
1567
1563
  isLoading,
1568
1564
  reset() {
1569
- vueDemi.nextTick(() => checkAndLoad());
1565
+ vue.nextTick(() => checkAndLoad());
1570
1566
  }
1571
1567
  };
1572
1568
  }
1573
1569
 
1574
1570
  const vInfiniteScroll = {
1575
- [shared.directiveHooks.mounted](el, binding) {
1571
+ mounted(el, binding) {
1576
1572
  if (typeof binding.value === "function")
1577
1573
  useInfiniteScroll(el, binding.value);
1578
1574
  else
@@ -1581,7 +1577,7 @@ const vInfiniteScroll = {
1581
1577
  };
1582
1578
 
1583
1579
  const vIntersectionObserver = {
1584
- [shared.directiveHooks.mounted](el, binding) {
1580
+ mounted(el, binding) {
1585
1581
  if (typeof binding.value === "function")
1586
1582
  useIntersectionObserver(el, binding.value);
1587
1583
  else
@@ -1589,11 +1585,11 @@ const vIntersectionObserver = {
1589
1585
  }
1590
1586
  };
1591
1587
 
1592
- const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1588
+ const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1593
1589
  name: "UseMouse",
1594
1590
  props: ["touch", "resetOnTouchEnds", "initialValue"],
1595
1591
  setup(props, { slots }) {
1596
- const data = vueDemi.reactive(core.useMouse(props));
1592
+ const data = vue.reactive(core.useMouse(props));
1597
1593
  return () => {
1598
1594
  if (slots.default)
1599
1595
  return slots.default(data);
@@ -1601,36 +1597,36 @@ const UseMouse = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1601
1597
  }
1602
1598
  });
1603
1599
 
1604
- const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1600
+ const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1605
1601
  name: "UseMouseElement",
1606
1602
  props: ["handleOutside", "as"],
1607
1603
  setup(props, { slots }) {
1608
- const target = vueDemi.ref();
1609
- const data = vueDemi.reactive(core.useMouseInElement(target, props));
1604
+ const target = vue.ref();
1605
+ const data = vue.reactive(core.useMouseInElement(target, props));
1610
1606
  return () => {
1611
1607
  if (slots.default)
1612
- return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
1608
+ return vue.h(props.as || "div", { ref: target }, slots.default(data));
1613
1609
  };
1614
1610
  }
1615
1611
  });
1616
1612
 
1617
- const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1613
+ const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1618
1614
  name: "UseMousePressed",
1619
1615
  props: ["touch", "initialValue", "as"],
1620
1616
  setup(props, { slots }) {
1621
- const target = vueDemi.ref();
1622
- const data = vueDemi.reactive(core.useMousePressed({ ...props, target }));
1617
+ const target = vue.ref();
1618
+ const data = vue.reactive(core.useMousePressed({ ...props, target }));
1623
1619
  return () => {
1624
1620
  if (slots.default)
1625
- return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
1621
+ return vue.h(props.as || "div", { ref: target }, slots.default(data));
1626
1622
  };
1627
1623
  }
1628
1624
  });
1629
1625
 
1630
- const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1626
+ const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1631
1627
  name: "UseNetwork",
1632
1628
  setup(props, { slots }) {
1633
- const data = vueDemi.reactive(core.useNetwork());
1629
+ const data = vue.reactive(core.useNetwork());
1634
1630
  return () => {
1635
1631
  if (slots.default)
1636
1632
  return slots.default(data);
@@ -1638,11 +1634,11 @@ const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1638
1634
  }
1639
1635
  });
1640
1636
 
1641
- const UseNow = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1637
+ const UseNow = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1642
1638
  name: "UseNow",
1643
1639
  props: ["interval"],
1644
1640
  setup(props, { slots }) {
1645
- const data = vueDemi.reactive(core.useNow({ ...props, controls: true }));
1641
+ const data = vue.reactive(core.useNow({ ...props, controls: true }));
1646
1642
  return () => {
1647
1643
  if (slots.default)
1648
1644
  return slots.default(data);
@@ -1650,7 +1646,7 @@ const UseNow = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1650
1646
  }
1651
1647
  });
1652
1648
 
1653
- const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1649
+ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1654
1650
  name: "UseObjectUrl",
1655
1651
  props: [
1656
1652
  "object"
@@ -1665,7 +1661,7 @@ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1665
1661
  }
1666
1662
  });
1667
1663
 
1668
- const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1664
+ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1669
1665
  name: "UseOffsetPagination",
1670
1666
  props: [
1671
1667
  "total",
@@ -1681,7 +1677,7 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompon
1681
1677
  "page-count-change"
1682
1678
  ],
1683
1679
  setup(props, { slots, emit }) {
1684
- const data = vueDemi.reactive(core.useOffsetPagination({
1680
+ const data = vue.reactive(core.useOffsetPagination({
1685
1681
  ...props,
1686
1682
  onPageChange(...args) {
1687
1683
  var _a;
@@ -1706,10 +1702,10 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompon
1706
1702
  }
1707
1703
  });
1708
1704
 
1709
- const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1705
+ const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1710
1706
  name: "UseOnline",
1711
1707
  setup(props, { slots }) {
1712
- const data = vueDemi.reactive({
1708
+ const data = vue.reactive({
1713
1709
  isOnline: core.useOnline()
1714
1710
  });
1715
1711
  return () => {
@@ -1719,10 +1715,10 @@ const UseOnline = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1719
1715
  }
1720
1716
  });
1721
1717
 
1722
- const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1718
+ const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1723
1719
  name: "UsePageLeave",
1724
1720
  setup(props, { slots }) {
1725
- const data = vueDemi.reactive({
1721
+ const data = vue.reactive({
1726
1722
  isLeft: core.usePageLeave()
1727
1723
  });
1728
1724
  return () => {
@@ -1732,7 +1728,7 @@ const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1732
1728
  }
1733
1729
  });
1734
1730
 
1735
- const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1731
+ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1736
1732
  name: "UsePointer",
1737
1733
  props: [
1738
1734
  "pointerTypes",
@@ -1740,8 +1736,8 @@ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1740
1736
  "target"
1741
1737
  ],
1742
1738
  setup(props, { slots }) {
1743
- const el = vueDemi.ref(null);
1744
- const data = vueDemi.reactive(core.usePointer({
1739
+ const el = vue.ref(null);
1740
+ const data = vue.reactive(core.usePointer({
1745
1741
  ...props,
1746
1742
  target: props.target === "self" ? el : defaultWindow
1747
1743
  }));
@@ -1752,23 +1748,23 @@ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1752
1748
  }
1753
1749
  });
1754
1750
 
1755
- const UsePointerLock = /* #__PURE__ */ vueDemi.defineComponent({
1751
+ const UsePointerLock = /* #__PURE__ */ vue.defineComponent({
1756
1752
  name: "UsePointerLock",
1757
1753
  props: ["as"],
1758
1754
  setup(props, { slots }) {
1759
- const target = vueDemi.ref();
1760
- const data = vueDemi.reactive(core.usePointerLock(target));
1755
+ const target = vue.ref();
1756
+ const data = vue.reactive(core.usePointerLock(target));
1761
1757
  return () => {
1762
1758
  if (slots.default)
1763
- return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
1759
+ return vue.h(props.as || "div", { ref: target }, slots.default(data));
1764
1760
  };
1765
1761
  }
1766
1762
  });
1767
1763
 
1768
- const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1764
+ const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1769
1765
  name: "UsePreferredColorScheme",
1770
1766
  setup(props, { slots }) {
1771
- const data = vueDemi.reactive({
1767
+ const data = vue.reactive({
1772
1768
  colorScheme: core.usePreferredColorScheme()
1773
1769
  });
1774
1770
  return () => {
@@ -1778,10 +1774,10 @@ const UsePreferredColorScheme = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCo
1778
1774
  }
1779
1775
  });
1780
1776
 
1781
- const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1777
+ const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1782
1778
  name: "UsePreferredContrast",
1783
1779
  setup(props, { slots }) {
1784
- const data = vueDemi.reactive({
1780
+ const data = vue.reactive({
1785
1781
  contrast: core.usePreferredContrast()
1786
1782
  });
1787
1783
  return () => {
@@ -1791,10 +1787,10 @@ const UsePreferredContrast = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompo
1791
1787
  }
1792
1788
  });
1793
1789
 
1794
- const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1790
+ const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1795
1791
  name: "UsePreferredDark",
1796
1792
  setup(props, { slots }) {
1797
- const data = vueDemi.reactive({
1793
+ const data = vue.reactive({
1798
1794
  prefersDark: core.usePreferredDark()
1799
1795
  });
1800
1796
  return () => {
@@ -1804,10 +1800,10 @@ const UsePreferredDark = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent
1804
1800
  }
1805
1801
  });
1806
1802
 
1807
- const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1803
+ const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1808
1804
  name: "UsePreferredLanguages",
1809
1805
  setup(props, { slots }) {
1810
- const data = vueDemi.reactive({
1806
+ const data = vue.reactive({
1811
1807
  languages: core.usePreferredLanguages()
1812
1808
  });
1813
1809
  return () => {
@@ -1817,10 +1813,10 @@ const UsePreferredLanguages = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComp
1817
1813
  }
1818
1814
  });
1819
1815
 
1820
- const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1816
+ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1821
1817
  name: "UsePreferredReducedMotion",
1822
1818
  setup(props, { slots }) {
1823
- const data = vueDemi.reactive({
1819
+ const data = vue.reactive({
1824
1820
  motion: core.usePreferredReducedMotion()
1825
1821
  });
1826
1822
  return () => {
@@ -1831,7 +1827,7 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.define
1831
1827
  });
1832
1828
 
1833
1829
  const vResizeObserver = {
1834
- [shared.directiveHooks.mounted](el, binding) {
1830
+ mounted(el, binding) {
1835
1831
  if (typeof binding.value === "function")
1836
1832
  useResizeObserver(el, binding.value);
1837
1833
  else
@@ -1849,12 +1845,12 @@ function useMutationObserver(target, callback, options = {}) {
1849
1845
  observer = void 0;
1850
1846
  }
1851
1847
  };
1852
- const targets = vueDemi.computed(() => {
1848
+ const targets = vue.computed(() => {
1853
1849
  const value = shared.toValue(target);
1854
1850
  const items = (Array.isArray(value) ? value : [value]).map(unrefElement).filter(shared.notNullish);
1855
1851
  return new Set(items);
1856
1852
  });
1857
- const stopWatch = vueDemi.watch(
1853
+ const stopWatch = vue.watch(
1858
1854
  () => targets.value,
1859
1855
  (targets2) => {
1860
1856
  cleanup();
@@ -1882,8 +1878,8 @@ function useMutationObserver(target, callback, options = {}) {
1882
1878
 
1883
1879
  function useCssVar(prop, target, options = {}) {
1884
1880
  const { window = defaultWindow, initialValue, observe = false } = options;
1885
- const variable = vueDemi.ref(initialValue);
1886
- const elRef = vueDemi.computed(() => {
1881
+ const variable = vue.ref(initialValue);
1882
+ const elRef = vue.computed(() => {
1887
1883
  var _a;
1888
1884
  return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
1889
1885
  });
@@ -1902,7 +1898,7 @@ function useCssVar(prop, target, options = {}) {
1902
1898
  window
1903
1899
  });
1904
1900
  }
1905
- vueDemi.watch(
1901
+ vue.watch(
1906
1902
  [elRef, () => shared.toValue(prop)],
1907
1903
  (_, old) => {
1908
1904
  if (old[0] && old[1])
@@ -1911,7 +1907,7 @@ function useCssVar(prop, target, options = {}) {
1911
1907
  },
1912
1908
  { immediate: true }
1913
1909
  );
1914
- vueDemi.watch(
1910
+ vue.watch(
1915
1911
  variable,
1916
1912
  (val) => {
1917
1913
  var _a;
@@ -1932,10 +1928,10 @@ const rightVarName = "--vueuse-safe-area-right";
1932
1928
  const bottomVarName = "--vueuse-safe-area-bottom";
1933
1929
  const leftVarName = "--vueuse-safe-area-left";
1934
1930
  function useScreenSafeArea() {
1935
- const top = vueDemi.ref("");
1936
- const right = vueDemi.ref("");
1937
- const bottom = vueDemi.ref("");
1938
- const left = vueDemi.ref("");
1931
+ const top = vue.ref("");
1932
+ const right = vue.ref("");
1933
+ const bottom = vue.ref("");
1934
+ const left = vue.ref("");
1939
1935
  if (shared.isClient) {
1940
1936
  const topCssVar = useCssVar(topVarName);
1941
1937
  const rightCssVar = useCssVar(rightVarName);
@@ -1966,7 +1962,7 @@ function getValue(position) {
1966
1962
  return getComputedStyle(document.documentElement).getPropertyValue(position);
1967
1963
  }
1968
1964
 
1969
- const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
1965
+ const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
1970
1966
  name: "UseScreenSafeArea",
1971
1967
  props: {
1972
1968
  top: Boolean,
@@ -1983,7 +1979,7 @@ const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponen
1983
1979
  } = useScreenSafeArea();
1984
1980
  return () => {
1985
1981
  if (slots.default) {
1986
- return vueDemi.h("div", {
1982
+ return vue.h("div", {
1987
1983
  style: {
1988
1984
  paddingTop: props.top ? top.value : "",
1989
1985
  paddingRight: props.right ? right.value : "",
@@ -2001,7 +1997,7 @@ const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponen
2001
1997
  });
2002
1998
 
2003
1999
  const vScroll = {
2004
- [shared.directiveHooks.mounted](el, binding) {
2000
+ mounted(el, binding) {
2005
2001
  if (typeof binding.value === "function") {
2006
2002
  const handler = binding.value;
2007
2003
  const state = useScroll(el, {
@@ -2055,10 +2051,10 @@ function preventDefault(rawEvent) {
2055
2051
  }
2056
2052
  const elInitialOverflow = /* @__PURE__ */ new WeakMap();
2057
2053
  function useScrollLock(element, initialState = false) {
2058
- const isLocked = vueDemi.ref(initialState);
2054
+ const isLocked = vue.ref(initialState);
2059
2055
  let stopTouchMoveListener = null;
2060
2056
  let initialOverflow = "";
2061
- vueDemi.watch(shared.toRef(element), (el) => {
2057
+ vue.watch(shared.toRef(element), (el) => {
2062
2058
  const target = resolveElement(shared.toValue(el));
2063
2059
  if (target) {
2064
2060
  const ele = target;
@@ -2102,7 +2098,7 @@ function useScrollLock(element, initialState = false) {
2102
2098
  isLocked.value = false;
2103
2099
  };
2104
2100
  shared.tryOnScopeDispose(unlock);
2105
- return vueDemi.computed({
2101
+ return vue.computed({
2106
2102
  get() {
2107
2103
  return isLocked.value;
2108
2104
  },
@@ -2116,23 +2112,23 @@ function useScrollLock(element, initialState = false) {
2116
2112
 
2117
2113
  function onScrollLock() {
2118
2114
  let isMounted = false;
2119
- const state = vueDemi.ref(false);
2115
+ const state = vue.ref(false);
2120
2116
  return (el, binding) => {
2121
2117
  state.value = binding.value;
2122
2118
  if (isMounted)
2123
2119
  return;
2124
2120
  isMounted = true;
2125
2121
  const isLocked = useScrollLock(el, binding.value);
2126
- vueDemi.watch(state, (v) => isLocked.value = v);
2122
+ vue.watch(state, (v) => isLocked.value = v);
2127
2123
  };
2128
2124
  }
2129
2125
  const vScrollLock = onScrollLock();
2130
2126
 
2131
- const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
2127
+ const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
2132
2128
  name: "UseTimeAgo",
2133
2129
  props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
2134
2130
  setup(props, { slots }) {
2135
- const data = vueDemi.reactive(core.useTimeAgo(() => props.time, { ...props, controls: true }));
2131
+ const data = vue.reactive(core.useTimeAgo(() => props.time, { ...props, controls: true }));
2136
2132
  return () => {
2137
2133
  if (slots.default)
2138
2134
  return slots.default(data);
@@ -2140,11 +2136,11 @@ const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
2140
2136
  }
2141
2137
  });
2142
2138
 
2143
- const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
2139
+ const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
2144
2140
  name: "UseTimestamp",
2145
2141
  props: ["immediate", "interval", "offset"],
2146
2142
  setup(props, { slots }) {
2147
- const data = vueDemi.reactive(core.useTimestamp({ ...props, controls: true }));
2143
+ const data = vue.reactive(core.useTimestamp({ ...props, controls: true }));
2148
2144
  return () => {
2149
2145
  if (slots.default)
2150
2146
  return slots.default(data);
@@ -2152,7 +2148,7 @@ const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
2152
2148
  }
2153
2149
  });
2154
2150
 
2155
- const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
2151
+ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
2156
2152
  name: "UseVirtualList",
2157
2153
  props: [
2158
2154
  "list",
@@ -2160,21 +2156,21 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
2160
2156
  "height"
2161
2157
  ],
2162
2158
  setup(props, { slots, expose }) {
2163
- const { list: listRef } = vueDemi.toRefs(props);
2159
+ const { list: listRef } = vue.toRefs(props);
2164
2160
  const { list, containerProps, wrapperProps, scrollTo } = core.useVirtualList(listRef, props.options);
2165
2161
  expose({ scrollTo });
2166
2162
  if (containerProps.style && typeof containerProps.style === "object" && !Array.isArray(containerProps.style))
2167
2163
  containerProps.style.height = props.height || "300px";
2168
- return () => vueDemi.h("div", { ...containerProps }, [
2169
- 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!")))
2164
+ return () => vue.h("div", { ...containerProps }, [
2165
+ 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!")))
2170
2166
  ]);
2171
2167
  }
2172
2168
  });
2173
2169
 
2174
- const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
2170
+ const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
2175
2171
  name: "UseWindowFocus",
2176
2172
  setup(props, { slots }) {
2177
- const data = vueDemi.reactive({
2173
+ const data = vue.reactive({
2178
2174
  focused: core.useWindowFocus()
2179
2175
  });
2180
2176
  return () => {
@@ -2184,11 +2180,11 @@ const UseWindowFocus = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
2184
2180
  }
2185
2181
  });
2186
2182
 
2187
- const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
2183
+ const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
2188
2184
  name: "UseWindowSize",
2189
2185
  props: ["initialWidth", "initialHeight"],
2190
2186
  setup(props, { slots }) {
2191
- const data = vueDemi.reactive(core.useWindowSize(props));
2187
+ const data = vue.reactive(core.useWindowSize(props));
2192
2188
  return () => {
2193
2189
  if (slots.default)
2194
2190
  return slots.default(data);