vue-use-intersection-observer 1.0.16 → 2.0.0

package/README.md

@@ -16,12 +16,12 @@ Simple and lightweight visibility observer for **vue 3**, built on top of `Inter
 
 ## Features
 
-- Vue 3 plugin
-- Composable API
-- Uses native `IntersectionObserver`
-- Supports offsets and reactivity
-- One global observer (better performance)
-- Fully written in TypeScript
+- 🧩 Vue 3 plugin
+- 🔌 Composable API
+- 🔍 Uses native `IntersectionObserver`
+- ⚡ Supports offsets and reactivity
+- 🌐 One global observer (better performance)
+- 🛡️ Fully written in TypeScript
 
  
 
@@ -49,9 +49,9 @@ app.use(VisibilityPlugin);
 app.mount('#app');
 ```
 
-### Usage (example)
+### Usage (examples)
 
-In a component
+**# Example with composable**
 
 ```vue
 <template>
@@ -65,9 +65,9 @@ In a component
       borderRadius: '50%',
       backgroundColor: isvisible ? 'green' : 'red',
     }"
-  />
+  ></div>
 
-  <div style="height: 150vh" />
+  <div style="height: 150vh"></div>
 
   <div ref="target" style="width: 200px; height: 200px; background: gray">
     Observed Element
@@ -98,6 +98,56 @@ onBeforeUnmount(() => {
 </script>
 ```
 
+---
+
+**# Example with directive**
+
+```vue
+<template>
+  <div
+    :style="{
+      position: 'fixed',
+      top: '20px',
+      right: '20px',
+      width: '40px',
+      height: '40px',
+      borderRadius: '50%',
+      backgroundColor: isvisible ? 'green' : 'red',
+    }"
+  ></div>
+
+  <div style="height: 150vh"></div>
+
+  <div
+    v-visible="onVisible"
+    style="width: 200px; height: 200px; background: gray"
+  >
+    Observed Element
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const isvisible = ref<boolean>(false);
+
+const onVisible = (visible: boolean) => {
+  isvisible.value = visible;
+};
+</script>
+```
+
+> ---
+>
+> The `v-visible` directive is intended for simple use cases.
+> It only accepts a callback function and always reports the visibility state.
+> For advanced configuration (once, offset, threshold), use the composable API.
+> By default always tracks visibility changes (`once` is implicitly set to `false`).
+>
+> ---
+
+<p></p>
+
 ### API
 
 #### `useIntersectionObserver()`
@@ -121,6 +171,8 @@ Start observing an element.
 | target  | ref     | Element ref to observe | true     | —       |
 | options | Options | Observer configuration | true     | —       |
 
+<p></p>
+
 **Options:**
 
 | Name      | Type            | Description                      | Required | Default |

package/dist/directives/vVisible.d.ts

@@ -1,10 +1,6 @@
 import type { DirectiveBinding } from 'vue';
-import { type VisibilityOptions, type VisibilityCallback } from '../core/visibilityObserver';
-interface DirectiveValue extends VisibilityOptions {
-    callback: VisibilityCallback;
-}
+import { type VisibilityCallback } from '../core/visibilityObserver';
 export declare const vVisible: {
-    mounted(el: HTMLElement, binding: DirectiveBinding<DirectiveValue>): void;
+    mounted(el: HTMLElement, binding: DirectiveBinding<VisibilityCallback>): void;
     unmounted(el: HTMLElement): void;
 };
-export {};

package/dist/vue-use-intersection-observer.es.js

@@ -1,5 +1,5 @@
 import { inject as f, onBeforeUnmount as k } from "vue";
-class u {
+class l {
   buckets = /* @__PURE__ */ new Map();
   buildRootMargin(e = 0) {
     return `0px 0px -${e}px 0px`;
@@ -11,15 +11,15 @@ class u {
   getBucket(e = 0, s = 0) {
     const t = this.getKey(e, s), r = this.buckets.get(t);
     if (r) return r;
-    const o = {
+    const i = {
       elements: /* @__PURE__ */ new Map(),
       observer: new IntersectionObserver(
-        (i) => {
-          for (const c of i) {
-            const b = o.elements.get(c.target);
-            if (!b) continue;
-            const l = c.isIntersecting;
-            l && (b.callback(l, c), b.once && this.unobserve(c.target));
+        (c) => {
+          for (const b of c) {
+            const o = i.elements.get(b.target);
+            if (!o) continue;
+            const u = b.isIntersecting;
+            o.lastVisible !== u && (o.lastVisible = u, o.callback(u, b), u && o.once && this.unobserve(b.target));
           }
         },
         {
@@ -29,14 +29,15 @@ class u {
         }
       )
     };
-    return this.buckets.set(t, o), o;
+    return this.buckets.set(t, i), i;
   }
   observe(e, s, t = {}) {
-    const r = t.offset ?? 0, o = t.threshold ?? 0, i = this.getBucket(r, o);
-    i.elements.set(e, {
+    const r = t.offset ?? 0, i = t.threshold ?? 0, c = this.getBucket(r, i);
+    c.elements.set(e, {
       callback: s,
-      once: t.once ?? !0
-    }), i.observer.observe(e);
+      once: t.once ?? !0,
+      lastVisible: void 0
+    }), c.observer.observe(e);
   }
   unobserve(e) {
     for (const [s, t] of this.buckets)
@@ -51,22 +52,22 @@ class u {
     this.buckets.clear();
   }
 }
-const v = new u(), g = {
+const v = new l(), g = {
   mounted(n, e) {
-    v.observe(n, e.value.callback, e.value);
+    v.observe(n, e.value, { once: !1 });
   },
   unmounted(n) {
     v.unobserve(n);
   }
-}, a = /* @__PURE__ */ Symbol("VisibilityObserver"), d = {
+}, a = /* @__PURE__ */ Symbol("VisibilityObserver"), y = {
   install(n) {
-    const e = new u();
+    const e = new l();
     n.provide(a, e), n.directive("visible", g);
   }
 };
 function h() {
-  const n = f(a, null), e = n ?? new u(), s = (r, o) => {
-    r.value && e.observe(r.value, o.callback, o);
+  const n = f(a, null), e = n ?? new l(), s = (r, i) => {
+    r.value && e.observe(r.value, i.callback, i);
   }, t = (r) => {
     r.value && e.unobserve(r.value);
   };
@@ -78,6 +79,6 @@ function h() {
   };
 }
 export {
-  d as VisibilityPlugin,
+  y as VisibilityPlugin,
   h as useIntersectionObserver
 };

package/dist/vue-use-intersection-observer.umd.js

@@ -1 +1 @@
-(function(r,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],c):(r=typeof globalThis<"u"?globalThis:r||self,c(r.VueVisibilityObserver={},r.Vue))})(this,(function(r,c){"use strict";class l{buckets=new Map;buildRootMargin(e=0){return`0px 0px -${e}px 0px`}getKey(e=0,s=0){const t=Array.isArray(s)?s.join(","):String(s);return`${e}|${t}`}getBucket(e=0,s=0){const t=this.getKey(e,s),i=this.buckets.get(t);if(i)return i;const o={elements:new Map,observer:new IntersectionObserver(u=>{for(const b of u){const v=o.elements.get(b.target);if(!v)continue;const d=b.isIntersecting;d&&(v.callback(d,b),v.once&&this.unobserve(b.target))}},{root:null,rootMargin:this.buildRootMargin(e),threshold:s})};return this.buckets.set(t,o),o}observe(e,s,t={}){const i=t.offset??0,o=t.threshold??0,u=this.getBucket(i,o);u.elements.set(e,{callback:s,once:t.once??!0}),u.observer.observe(e)}unobserve(e){for(const[s,t]of this.buckets)if(t.elements.has(e)){t.elements.delete(e),t.observer.unobserve(e),t.elements.size===0&&(t.observer.disconnect(),this.buckets.delete(s));return}}disconnect(){for(const[,e]of this.buckets)e.elements.clear(),e.observer.disconnect();this.buckets.clear()}}const f=new l,y={mounted(n,e){f.observe(n,e.value.callback,e.value)},unmounted(n){f.unobserve(n)}},a=Symbol("VisibilityObserver"),k={install(n){const e=new l;n.provide(a,e),n.directive("visible",y)}};function g(){const n=c.inject(a,null),e=n??new l,s=(i,o)=>{i.value&&e.observe(i.value,o.callback,o)},t=i=>{i.value&&e.unobserve(i.value)};return c.onBeforeUnmount(()=>{n||e.disconnect()}),{observe:s,unobserve:t}}r.VisibilityPlugin=k,r.useIntersectionObserver=g,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+(function(r,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],c):(r=typeof globalThis<"u"?globalThis:r||self,c(r.VueVisibilityObserver={},r.Vue))})(this,(function(r,c){"use strict";class f{buckets=new Map;buildRootMargin(e=0){return`0px 0px -${e}px 0px`}getKey(e=0,s=0){const t=Array.isArray(s)?s.join(","):String(s);return`${e}|${t}`}getBucket(e=0,s=0){const t=this.getKey(e,s),i=this.buckets.get(t);if(i)return i;const o={elements:new Map,observer:new IntersectionObserver(b=>{for(const l of b){const u=o.elements.get(l.target);if(!u)continue;const v=l.isIntersecting;u.lastVisible!==v&&(u.lastVisible=v,u.callback(v,l),v&&u.once&&this.unobserve(l.target))}},{root:null,rootMargin:this.buildRootMargin(e),threshold:s})};return this.buckets.set(t,o),o}observe(e,s,t={}){const i=t.offset??0,o=t.threshold??0,b=this.getBucket(i,o);b.elements.set(e,{callback:s,once:t.once??!0,lastVisible:void 0}),b.observer.observe(e)}unobserve(e){for(const[s,t]of this.buckets)if(t.elements.has(e)){t.elements.delete(e),t.observer.unobserve(e),t.elements.size===0&&(t.observer.disconnect(),this.buckets.delete(s));return}}disconnect(){for(const[,e]of this.buckets)e.elements.clear(),e.observer.disconnect();this.buckets.clear()}}const a=new f,y={mounted(n,e){a.observe(n,e.value,{once:!1})},unmounted(n){a.unobserve(n)}},d=Symbol("VisibilityObserver"),g={install(n){const e=new f;n.provide(d,e),n.directive("visible",y)}};function k(){const n=c.inject(d,null),e=n??new f,s=(i,o)=>{i.value&&e.observe(i.value,o.callback,o)},t=i=>{i.value&&e.unobserve(i.value)};return c.onBeforeUnmount(()=>{n||e.disconnect()}),{observe:s,unobserve:t}}r.VisibilityPlugin=g,r.useIntersectionObserver=k,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-use-intersection-observer",
-  "version": "1.0.16",
+  "version": "2.0.0",
   "description": "Simple visibility observer plugin for Vue 3 using IntersectionObserver.",
   "keywords": [
     "vue",