@vue-composable/web - npm Package Compare versions

Comparing version 1.0.0-dev.11 to 1.0.0-dev.12

dist/web.cjs.js

@@ -12,5 +12,20 @@ 'use strict';
         const element = core.wrap(el);
-        remove = () => element.value.removeEventListener(name, listener);
-        compositionApi.onMounted(() => element.value.addEventListener(name, listener, options));
+        const removeEventListener = (e) => e.removeEventListener(name, listener);
+        const addEventListener = (e) => e.addEventListener(name, listener, options);
+        let removeWatch = core.NO_OP;
+        remove = () => {
+            removeEventListener(element.value);
+            removeWatch();
+        };
         compositionApi.onUnmounted(remove);
+        compositionApi.onMounted(() => {
+            compositionApi.watch(element, (n, o) => {
+                if (o) {
+                    removeEventListener(o);
+                }
+                if (n) {
+                    addEventListener(n);
+                }
+            });
+        });
     }
@@ -82,3 +97,7 @@ return remove;
     };
-    const scrollTo = (...args) => scrollableElement.value.scrollTo.apply(scrollableElement.value, args);
+    const scrollTo = (...args) => scrollableElement.value &&
+        scrollableElement.value.scrollTo &&
+        scrollableElement.value.scrollTo.apply(scrollableElement.value, args);
+    const scrollTopTo = (top) => scrollTo({ top });
+    const scrollLeftTo = (left) => scrollTo({ left });
     const [eventOptions, ms] = core.isNumber(el) || !el
@@ -92,3 +111,10 @@ ? [core.PASSIVE_EV, el]
     }
-    const remove = useEvent(element, "scroll", handler, eventOptions);
+    const eventRemove = useEvent(element, "scroll", handler, eventOptions);
+    const watchRemoveTop = compositionApi.watch(scrollTop, scrollTopTo, { lazy: true });
+    const watchRemoveLeft = compositionApi.watch(scrollLeft, scrollLeftTo, { lazy: true });
+    const remove = () => {
+        eventRemove();
+        watchRemoveLeft();
+        watchRemoveTop();
+    };
     return {
@@ -98,3 +124,5 @@ scrollTop,
         scrollTo,
-        remove
+        remove,
+        scrollTopTo,
+        scrollLeftTo
     };
@@ -1044,2 +1072,3 @@ }
                         try {
+                            const oldValue = storage.getItem(key);
                             const data = core.isString(value)
@@ -1049,2 +1078,9 @@ ? value
                             storage.setItem(key, data);
+                            if (oldValue !== data && core.isClient && this.$syncKeys[key]) {
+                                window.dispatchEvent(new StorageEvent(key, {
+                                    newValue: data,
+                                    oldValue,
+                                    storageArea: storage
+                                }));
+                            }
                         }
@@ -1090,3 +1126,3 @@ catch (e) {
 
-function useLocalStorage(key, defaultValue) {
+function useLocalStorage(key, defaultValue, sync) {
     const { supported, store } = useWebStorage("localStorage");
@@ -1105,2 +1141,5 @@ let remove = core.NO_OP;
         }
+        if (sync !== false) {
+            setSync(true);
+        }
     }
@@ -1123,3 +1162,3 @@ else {
 
-function useSessionStorage(key, defaultValue) {
+function useSessionStorage(key, defaultValue, sync) {
     const { supported, store } = useWebStorage("sessionStorage");
@@ -1134,2 +1173,5 @@ let remove = core.NO_OP;
             setSync = () => console.warn("sync is not supported, please `useLocalStorage` instead");
+            if (sync) {
+                setSync(sync);
+            }
         }
@@ -1160,3 +1202,3 @@ remove = () => store.removeItem(key);
 let canUseLocalStorage = undefined;
-function useStorage(key, defaultValue) {
+function useStorage(key, defaultValue, sync) {
     if (canUseLocalStorage === undefined) {
@@ -1166,4 +1208,4 @@ canUseLocalStorage = useWebStorage("localStorage").supported;
     return canUseLocalStorage
-        ? useLocalStorage(key, defaultValue)
-        : useSessionStorage(key, defaultValue);
+        ? useLocalStorage(key, defaultValue, sync)
+        : useSessionStorage(key, defaultValue, sync);
 }
@@ -1170,0 +1212,0 @@

dist/web.cjs.prod.js

@@ -12,5 +12,20 @@ 'use strict';
         const element = core.wrap(el);
-        remove = () => element.value.removeEventListener(name, listener);
-        compositionApi.onMounted(() => element.value.addEventListener(name, listener, options));
+        const removeEventListener = (e) => e.removeEventListener(name, listener);
+        const addEventListener = (e) => e.addEventListener(name, listener, options);
+        let removeWatch = core.NO_OP;
+        remove = () => {
+            removeEventListener(element.value);
+            removeWatch();
+        };
         compositionApi.onUnmounted(remove);
+        compositionApi.onMounted(() => {
+            compositionApi.watch(element, (n, o) => {
+                if (o) {
+                    removeEventListener(o);
+                }
+                if (n) {
+                    addEventListener(n);
+                }
+            });
+        });
     }
@@ -82,3 +97,7 @@ return remove;
     };
-    const scrollTo = (...args) => scrollableElement.value.scrollTo.apply(scrollableElement.value, args);
+    const scrollTo = (...args) => scrollableElement.value &&
+        scrollableElement.value.scrollTo &&
+        scrollableElement.value.scrollTo.apply(scrollableElement.value, args);
+    const scrollTopTo = (top) => scrollTo({ top });
+    const scrollLeftTo = (left) => scrollTo({ left });
     const [eventOptions, ms] = core.isNumber(el) || !el
@@ -92,3 +111,10 @@ ? [core.PASSIVE_EV, el]
     }
-    const remove = useEvent(element, "scroll", handler, eventOptions);
+    const eventRemove = useEvent(element, "scroll", handler, eventOptions);
+    const watchRemoveTop = compositionApi.watch(scrollTop, scrollTopTo, { lazy: true });
+    const watchRemoveLeft = compositionApi.watch(scrollLeft, scrollLeftTo, { lazy: true });
+    const remove = () => {
+        eventRemove();
+        watchRemoveLeft();
+        watchRemoveTop();
+    };
     return {
@@ -98,3 +124,5 @@ scrollTop,
         scrollTo,
-        remove
+        remove,
+        scrollTopTo,
+        scrollLeftTo
     };
@@ -1000,2 +1028,3 @@ }
                         try {
+                            const oldValue = storage.getItem(key);
                             const data = core.isString(value)
@@ -1005,2 +1034,9 @@ ? value
                             storage.setItem(key, data);
+                            if (oldValue !== data && core.isClient && this.$syncKeys[key]) {
+                                window.dispatchEvent(new StorageEvent(key, {
+                                    newValue: data,
+                                    oldValue,
+                                    storageArea: storage
+                                }));
+                            }
                         }
@@ -1046,3 +1082,3 @@ catch (e) {
 
-function useLocalStorage(key, defaultValue) {
+function useLocalStorage(key, defaultValue, sync) {
     const { supported, store } = useWebStorage("localStorage");
@@ -1061,2 +1097,5 @@ let remove = core.NO_OP;
         }
+        if (sync !== false) {
+            setSync(true);
+        }
     }
@@ -1075,3 +1114,3 @@ else {
 
-function useSessionStorage(key, defaultValue) {
+function useSessionStorage(key, defaultValue, sync) {
     const { supported, store } = useWebStorage("sessionStorage");
@@ -1103,3 +1142,3 @@ let remove = core.NO_OP;
 let canUseLocalStorage = undefined;
-function useStorage(key, defaultValue) {
+function useStorage(key, defaultValue, sync) {
     if (canUseLocalStorage === undefined) {
@@ -1109,3 +1148,3 @@ canUseLocalStorage = useWebStorage("localStorage").supported;
     return canUseLocalStorage
-        ? useLocalStorage(key, defaultValue)
+        ? useLocalStorage(key, defaultValue, sync)
         : useSessionStorage(key, defaultValue);
@@ -1112,0 +1151,0 @@ }

dist/web.d.ts

@@ -201,2 +201,4 @@ import { Ref } from '@vue/composition-api';
     scrollTo: Element["scrollTo"];
+    scrollTopTo: (y: number) => void;
+    scrollLeftTo: (x: number) => void;
 }
@@ -326,5 +328,5 @@
 
-export declare function useLocalStorage(key: string, defaultValue?: RefTyped<string>): LocalStorageReturn<string>;
+export declare function useLocalStorage(key: string, defaultValue?: RefTyped<string>, sync?: boolean): LocalStorageReturn<string>;
 
-export declare function useLocalStorage<T extends object = any>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>): LocalStorageReturn<T>;
+export declare function useLocalStorage<T extends object = any>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>, sync?: boolean): LocalStorageReturn<T>;
 
@@ -380,5 +382,5 @@ export declare function useMatchMedia(query: string): {
 
-export declare function useSessionStorage(key: string, defaultValue?: RefTyped<string>): LocalStorageReturn<string>;
+export declare function useSessionStorage(key: string, defaultValue?: RefTyped<string>, sync?: boolean): LocalStorageReturn<string>;
 
-export declare function useSessionStorage<T extends object = object>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>): LocalStorageReturn<T>;
+export declare function useSessionStorage<T extends object = object>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>, sync?: boolean): LocalStorageReturn<T>;
 
@@ -398,5 +400,5 @@ export declare function useSharedRef<T = any>(name: string, defaultValue?: T): {
 
-export declare function useStorage(key: string, defaultValue?: RefTyped<string>): LocalStorageReturn<string>;
+export declare function useStorage(key: string, defaultValue?: RefTyped<string>, sync?: boolean): LocalStorageReturn<string>;
 
-export declare function useStorage<T extends object = any>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>): LocalStorageReturn<T>;
+export declare function useStorage<T extends object = any>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>, sync?: boolean): LocalStorageReturn<T>;
 
@@ -403,0 +405,0 @@ export declare function useWebSocket(url: string, protocols?: string | string[]): {

dist/web.esm-bundler.js

@@ -1,2 +0,2 @@
-import { onMounted, onUnmounted, ref, isRef, computed, watch, getCurrentInstance, provide, inject } from '@vue/composition-api';
+import { onUnmounted, onMounted, watch, ref, isRef, computed, getCurrentInstance, provide, inject } from '@vue/composition-api';
 import { wrap, NO_OP, isNumber, useDebounce, isClient, PASSIVE_EV, isBoolean, isElement, usePromise, isString, unwrap, isObject, isArray, debounce, FALSE_OP } from '@vue-composable/core';
@@ -8,5 +8,20 @@
         const element = wrap(el);
-        remove = () => element.value.removeEventListener(name, listener);
-        onMounted(() => element.value.addEventListener(name, listener, options));
+        const removeEventListener = (e) => e.removeEventListener(name, listener);
+        const addEventListener = (e) => e.addEventListener(name, listener, options);
+        let removeWatch = NO_OP;
+        remove = () => {
+            removeEventListener(element.value);
+            removeWatch();
+        };
         onUnmounted(remove);
+        onMounted(() => {
+            watch(element, (n, o) => {
+                if (o) {
+                    removeEventListener(o);
+                }
+                if (n) {
+                    addEventListener(n);
+                }
+            });
+        });
     }
@@ -78,3 +93,7 @@ return remove;
     };
-    const scrollTo = (...args) => scrollableElement.value.scrollTo.apply(scrollableElement.value, args);
+    const scrollTo = (...args) => scrollableElement.value &&
+        scrollableElement.value.scrollTo &&
+        scrollableElement.value.scrollTo.apply(scrollableElement.value, args);
+    const scrollTopTo = (top) => scrollTo({ top });
+    const scrollLeftTo = (left) => scrollTo({ left });
     const [eventOptions, ms] = isNumber(el) || !el
@@ -88,3 +107,10 @@ ? [PASSIVE_EV, el]
     }
-    const remove = useEvent(element, "scroll", handler, eventOptions);
+    const eventRemove = useEvent(element, "scroll", handler, eventOptions);
+    const watchRemoveTop = watch(scrollTop, scrollTopTo, { lazy: true });
+    const watchRemoveLeft = watch(scrollLeft, scrollLeftTo, { lazy: true });
+    const remove = () => {
+        eventRemove();
+        watchRemoveLeft();
+        watchRemoveTop();
+    };
     return {
@@ -94,3 +120,5 @@ scrollTop,
         scrollTo,
-        remove
+        remove,
+        scrollTopTo,
+        scrollLeftTo
     };
@@ -1043,2 +1071,3 @@ }
                         try {
+                            const oldValue = storage.getItem(key);
                             const data = isString(value)
@@ -1048,2 +1077,9 @@ ? value
                             storage.setItem(key, data);
+                            if (oldValue !== data && isClient && this.$syncKeys[key]) {
+                                window.dispatchEvent(new StorageEvent(key, {
+                                    newValue: data,
+                                    oldValue,
+                                    storageArea: storage
+                                }));
+                            }
                         }
@@ -1089,3 +1125,3 @@ catch (e) {
 
-function useLocalStorage(key, defaultValue) {
+function useLocalStorage(key, defaultValue, sync) {
     const { supported, store } = useWebStorage("localStorage");
@@ -1104,2 +1140,5 @@ let remove = NO_OP;
         }
+        if (sync !== false) {
+            setSync(true);
+        }
     }
@@ -1122,3 +1161,3 @@ else {
 
-function useSessionStorage(key, defaultValue) {
+function useSessionStorage(key, defaultValue, sync) {
     const { supported, store } = useWebStorage("sessionStorage");
@@ -1133,2 +1172,5 @@ let remove = NO_OP;
             setSync = () => console.warn("sync is not supported, please `useLocalStorage` instead");
+            if (sync) {
+                setSync(sync);
+            }
         }
@@ -1159,3 +1201,3 @@ remove = () => store.removeItem(key);
 let canUseLocalStorage = undefined;
-function useStorage(key, defaultValue) {
+function useStorage(key, defaultValue, sync) {
     if (canUseLocalStorage === undefined) {
@@ -1165,6 +1207,6 @@ canUseLocalStorage = useWebStorage("localStorage").supported;
     return canUseLocalStorage
-        ? useLocalStorage(key, defaultValue)
-        : useSessionStorage(key, defaultValue);
+        ? useLocalStorage(key, defaultValue, sync)
+        : useSessionStorage(key, defaultValue, sync);
 }
 
 export { refShared, setBreakpointTailwindCSS, storageAvailable, useBreakpoint, useBreakpointChrome, useBreakpointTailwindCSS, useBroadcastChannel, useEvent, useFetch, useGeolocation, useIntersectionObserver, useLanguage, useLocalStorage, useMatchMedia, useNetworkInformation, useOnMouseMove, useOnResize, useOnScroll, useOnline, usePageVisibility, useSessionStorage, useSharedRef, useStorage, useWebSocket, useWebStorage };

package.json

 {
   "name": "@vue-composable/web",
-  "version": "1.0.0-dev.11",
+  "version": "1.0.0-dev.12",
   "description": "@vue-composable/web",
@@ -42,3 +42,3 @@ "main": "index.js",
   "dependencies": {
-    "@vue-composable/core": "1.0.0-dev.11"
+    "@vue-composable/core": "1.0.0-dev.12"
   },
@@ -45,0 +45,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

140542

increased by3.64%

Lines of code

3895

increased by3.32%

Dependency changes

• + Added@vue-composable/core@1.0.0-dev.12(transitive)

• - Removed@vue-composable/core@1.0.0-dev.11(transitive)

• Updated@vue-composable/core@1.0.0-dev.12