@vueuse/components 11.0.0-beta.1 → 11.0.0-beta.2

package/index.mjs

@@ -465,8 +465,10 @@ function useStorage(key, defaults, storage, options = {}) {
   );
   if (window && listenToStorageChanges) {
     tryOnMounted(() => {
-      useEventListener(window, "storage", update);
-      useEventListener(window, customStorageEventName, updateFromCustomEvent);
+      if (storage instanceof Storage)
+        useEventListener(window, "storage", update);
+      else
+        useEventListener(window, customStorageEventName, updateFromCustomEvent);
       if (initOnMounted)
         update();
     });
@@ -474,7 +476,7 @@ function useStorage(key, defaults, storage, options = {}) {
   if (!initOnMounted)
     update();
   function dispatchWriteEvent(oldValue, newValue) {
-    if (window) {
+    if (window && !(storage instanceof Storage)) {
       window.dispatchEvent(new CustomEvent(customStorageEventName, {
         detail: {
           key,
@@ -607,6 +609,7 @@ function usePreferredDark(options) {
   return useMediaQuery("(prefers-color-scheme: dark)", options);
 }
 
+const CSS_DISABLE_TRANS = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
 function useColorMode(options = {}) {
   const {
     selector = "html",
@@ -636,23 +639,36 @@ function useColorMode(options = {}) {
       const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
       if (!el)
         return;
-      let style;
-      if (disableTransition) {
-        style = window.document.createElement("style");
-        const styleString = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
-        style.appendChild(document.createTextNode(styleString));
-        window.document.head.appendChild(style);
-      }
+      const classesToAdd = /* @__PURE__ */ new Set();
+      const classesToRemove = /* @__PURE__ */ new Set();
+      let attributeToChange = null;
       if (attribute2 === "class") {
         const current = value.split(/\s/g);
         Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
           if (current.includes(v))
-            el.classList.add(v);
+            classesToAdd.add(v);
           else
-            el.classList.remove(v);
+            classesToRemove.add(v);
         });
       } else {
-        el.setAttribute(attribute2, value);
+        attributeToChange = { key: attribute2, value };
+      }
+      if (classesToAdd.size === 0 && classesToRemove.size === 0 && attributeToChange === null)
+        return;
+      let style;
+      if (disableTransition) {
+        style = window.document.createElement("style");
+        style.appendChild(document.createTextNode(CSS_DISABLE_TRANS));
+        window.document.head.appendChild(style);
+      }
+      for (const c of classesToAdd) {
+        el.classList.add(c);
+      }
+      for (const c of classesToRemove) {
+        el.classList.remove(c);
+      }
+      if (attributeToChange) {
+        el.setAttribute(attributeToChange.key, attributeToChange.value);
       }
       if (disableTransition) {
         window.getComputedStyle(style).opacity;
@@ -796,7 +812,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     "onStart",
     "onMove",
     "onEnd",
-    "disabled"
+    "disabled",
+    "buttons"
   ],
   setup(props, { slots }) {
     const target = ref();
@@ -874,9 +891,14 @@ function useElementHover(el, options = {}) {
 
 const vElementHover = {
   [directiveHooks.mounted](el, binding) {
-    if (typeof binding.value === "function") {
+    const value = binding.value;
+    if (typeof value === "function") {
       const isHovered = useElementHover(el);
-      watch(isHovered, (v) => binding.value(v));
+      watch(isHovered, (v) => value(v));
+    } else {
+      const [handler, options] = value;
+      const isHovered = useElementHover(el, options);
+      watch(isHovered, (v) => handler(v));
     }
   }
 };
@@ -904,15 +926,20 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const targets = computed(() => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]);
+  const targets = computed(() => {
+    const _targets = toValue(target);
+    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+  });
   const stopWatch = watch(
     targets,
     (els) => {
       cleanup();
       if (isSupported.value && window) {
         observer = new ResizeObserver(callback);
-        for (const _el of els)
-          _el && observer.observe(_el, observerOptions);
+        for (const _el of els) {
+          if (_el)
+            observer.observe(_el, observerOptions);
+        }
       }
     },
     { immediate: true, flush: "post" }
@@ -1014,7 +1041,7 @@ function useIntersectionObserver(target, callback, options = {}) {
   const {
     root,
     rootMargin = "0px",
-    threshold = 0.1,
+    threshold = 0,
     window = defaultWindow,
     immediate = true
   } = options;
@@ -1503,7 +1530,10 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     { immediate: true }
   );
   return {
-    isLoading
+    isLoading,
+    reset() {
+      nextTick(() => checkAndLoad());
+    }
   };
 }
 
@@ -1766,6 +1796,15 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponen
   }
 });
 
+const vResizeObserver = {
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function")
+      useResizeObserver(el, binding.value);
+    else
+      useResizeObserver(el, ...binding.value);
+  }
+};
+
 function useMutationObserver(target, callback, options = {}) {
   const { window = defaultWindow, ...mutationOptions } = options;
   let observer;
@@ -1808,7 +1847,7 @@ function useMutationObserver(target, callback, options = {}) {
 }
 
 function useCssVar(prop, target, options = {}) {
-  const { window = defaultWindow, initialValue = "", observe = false } = options;
+  const { window = defaultWindow, initialValue, observe = false } = options;
   const variable = ref(initialValue);
   const elRef = computed(() => {
     var _a;
@@ -1818,7 +1857,7 @@ function useCssVar(prop, target, options = {}) {
     var _a;
     const key = toValue(prop);
     const el = toValue(elRef);
-    if (el && window) {
+    if (el && window && key) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
     }
@@ -1831,15 +1870,24 @@ function useCssVar(prop, target, options = {}) {
   }
   watch(
     [elRef, () => toValue(prop)],
-    updateCssVar,
+    (_, old) => {
+      if (old[0] && old[1] && window)
+        window.getComputedStyle(old[0]).removeProperty(old[1]);
+      updateCssVar();
+    },
     { immediate: true }
   );
   watch(
     variable,
     (val) => {
       var _a;
-      if ((_a = elRef.value) == null ? void 0 : _a.style)
-        elRef.value.style.setProperty(toValue(prop), val);
+      const raw_prop = toValue(prop);
+      if (((_a = elRef.value) == null ? void 0 : _a.style) && raw_prop) {
+        if (val == null)
+          elRef.value.style.removeProperty(raw_prop);
+        else
+          elRef.value.style.setProperty(raw_prop, val);
+      }
     }
   );
   return variable;
@@ -2013,7 +2061,8 @@ function useScrollLock(element, initialState = false) {
     const el = resolveElement(toValue(element));
     if (!el || !isLocked.value)
       return;
-    isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
+    if (isIOS)
+      stopTouchMoveListener == null ? void 0 : stopTouchMoveListener();
     el.style.overflow = initialOverflow;
     elInitialOverflow.delete(el);
     isLocked.value = false;
@@ -2026,7 +2075,8 @@ function useScrollLock(element, initialState = false) {
     set(v) {
       if (v)
         lock();
-      else unlock();
+      else
+        unlock();
     }
   });
 }
@@ -2113,4 +2163,4 @@ const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
+export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "11.0.0-beta.1",
+  "version": "11.0.0-beta.2",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -32,8 +32,8 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.cts",
   "dependencies": {
-    "@vueuse/core": "11.0.0-beta.1",
-    "@vueuse/shared": "11.0.0-beta.1",
+    "@vueuse/core": "11.0.0-beta.2",
+    "@vueuse/shared": "11.0.0-beta.2",
     "vue-demi": ">=0.14.8"
   }
 }