@yasanchezz/vue-infinite-grid 0.1.0 → 0.1.1

package/dist/VueGrid.d.ts

@@ -2,7 +2,7 @@ declare const __VLS_export: <GridRow extends {
     id: string | number;
 }>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<{
-        container?: HTMLElement;
+        container?: (Element | null | undefined) | ((container: Element | null) => Element | null | undefined);
         rows: GridRow[];
         rowsCount: number;
         height: number;

package/dist/vue-infinite-grid.css

@@ -1,2 +1,2 @@
-.infinite-grid[data-v-43bc25ca]{overflow-anchor:none;align-content:start;display:grid;overflow:clip}.grid-row[data-v-43bc25ca]{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.content[data-v-43bc25ca]{display:contents}.before[data-v-43bc25ca],.after[data-v-43bc25ca]{pointer-events:none;grid-column:1/-1}
+.infinite-grid[data-v-30c741e3]{overflow-anchor:none;align-content:start;display:grid;overflow:clip}.grid-row[data-v-30c741e3]{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.content[data-v-30c741e3]{display:contents}.before[data-v-30c741e3],.after[data-v-30c741e3]{pointer-events:none;grid-column:1/-1}
 /*$vite$:1*/

package/dist/vue-infinite-grid.js

@@ -7,97 +7,102 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
 })(/* @__PURE__ */ i({
 	__name: "VueGrid",
 	props: {
-		container: {},
+		container: {
+			type: [null, Function],
+			default: document.documentElement
+		},
 		rows: {},
 		rowsCount: {},
 		height: {}
 	},
 	setup(i, { expose: _ }) {
-		let v = t(() => new Map(i.rows.map((e) => [String(e.id), e]))), y = f([]), b = p("grid"), x = p("content"), S = /* @__PURE__ */ new Map(), C = i.height * Math.trunc(i.rowsCount / 5) || 1e3, w, T = 0;
-		function E() {
+		let v = t(() => new Map(i.rows.map((e) => [String(e.id), e]))), y = f([]), b = p("grid"), x = p("content"), S = t(() => i.container instanceof Function ? i.container(b.value) ?? document.documentElement : i.container ?? document.documentElement), C = t(() => S.value === document.documentElement || S.value === document.body ? window : S.value), w = /* @__PURE__ */ new Map(), T = i.height * Math.trunc(i.rowsCount / 5) || 1e3, E, D = 0;
+		function O() {
 			let e = 0, t = b.value;
-			for (; t instanceof HTMLElement;) e += t.offsetTop, t = t.offsetParent;
-			T = e;
+			for (; t instanceof HTMLElement && t != S.value;) e += t.offsetTop, t = t.offsetParent;
+			D = e;
 		}
-		let D = l({ height: "0px" }), O = 0;
-		function k() {
-			return O = i.rows.map((e) => S.get(e) ?? i.height).reduce((e, t) => e + t, 0), D.value.height = `${O}px`, O;
-		}
-		let A = 0;
+		let k = l({ height: "0px" }), A = 0;
 		function j() {
-			A = y.value.map((e) => S.get(e) ?? i.height).reduce((e, t) => e + t, 0);
+			return A = i.rows.map((e) => w.get(e) ?? i.height).reduce((e, t) => e + t, 0), k.value.height = `${A}px`, A;
+		}
+		let M = 0;
+		function N() {
+			M = y.value.map((e) => w.get(e) ?? i.height).reduce((e, t) => e + t, 0);
 		}
-		let M = l({ height: "0px" }), N = 0;
-		function P() {
-			let e = (i.container ? i.container.scrollTop : document.body.scrollTop || document.documentElement.scrollTop) - C - T, t = 0;
+		let P = l({ height: "0px" }), F = 0;
+		function I() {
+			let e = S.value.scrollTop - T - D, t = 0;
 			for (let n of i.rows) {
-				let r = S.get(n) ?? i.height;
+				let r = w.get(n) ?? i.height;
 				if (t + r > e) break;
 				t += r;
 			}
-			let n = O - A, r = t > n ? n : t;
-			return N = r, M.value.height = `${r}px`, r;
+			let n = A - M, r = t > n ? n : t;
+			return F = r, P.value.height = `${r}px`, r;
 		}
-		let F = l({ height: "0px" }), I = 0;
-		function L() {
-			I = O - N - A, F.value.height = `${I}px`;
+		let L = l({ height: "0px" }), R = 0;
+		function z() {
+			R = A - F - M, L.value.height = `${R}px`;
 		}
-		function R() {
-			cancelAnimationFrame(w), w = requestAnimationFrame(() => {
-				E(), j(), k(), P(), L();
+		function B() {
+			cancelAnimationFrame(E), E = requestAnimationFrame(() => {
+				O(), N(), j(), I(), z();
 				let e = 0, t = 0;
 				for (let [n, r] of i.rows.entries()) {
-					let a = S.get(r) ?? i.height;
-					if (e += a, !(e <= N)) {
+					let a = w.get(r) ?? i.height;
+					if (e += a, !(e <= F)) {
 						t = n;
 						break;
 					}
 				}
 				let n = t + i.rowsCount > i.rows.length ? i.rows.slice(i.rows.length - i.rowsCount) : i.rows.slice(t, t + i.rowsCount);
-				I || (n = i.rows.slice(i.rows.length - i.rowsCount)), n.at(0) !== y.value.at(0) && (y.value = n), j(), k(), L();
+				R || (n = i.rows.slice(i.rows.length - i.rowsCount)), n.at(0) !== y.value.at(0) && (y.value = n), N(), j(), z();
 			});
 		}
-		let z = new ResizeObserver((e) => {
+		let V = new ResizeObserver((e) => {
 			for (let t of e) {
 				let e = t.target, n = t.borderBoxSize.at(0)?.blockSize ?? i.height;
 				if (e instanceof HTMLElement) {
 					let t = e.dataset.index, r = t == null ? void 0 : v.value.get(t);
-					r && S.set(r, n);
+					r && w.set(r, n);
 				}
 			}
-			cancelAnimationFrame(w), w = requestAnimationFrame(() => {
-				j(), k(), L();
+			cancelAnimationFrame(E), E = requestAnimationFrame(() => {
+				N(), j(), z();
 			});
-		}), B = new MutationObserver((e) => {
-			for (let t of e) t.addedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => z.observe(e)), t.removedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => z.unobserve(e));
+		}), H = new MutationObserver((e) => {
+			for (let t of e) t.addedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => V.observe(e)), t.removedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => V.unobserve(e));
 		});
 		return h(() => {
-			B.disconnect(), x.value && B.observe(x.value, { childList: !0 });
-		}), m(() => i.rows, R, { flush: "post" }), o(() => {
-			R(), window.addEventListener("scroll", R, { passive: !0 });
+			H.disconnect(), x.value && H.observe(x.value, { childList: !0 });
+		}), m(() => i.rows, B, { flush: "post" }), m(C, (e, t) => {
+			t?.removeEventListener("scroll", B), e.addEventListener("scroll", B, { passive: !0 });
+		}, { immediate: !0 }), o(() => {
+			B();
 		}), s(() => {
-			window.removeEventListener("scroll", R);
+			C.value.removeEventListener("scroll", B);
 		}), _({
 			init() {
-				E(), j(), k(), P(), L();
+				O(), N(), j(), I(), z();
 			},
 			scrollTo(e) {
 				let t = 0;
 				for (let n of i.rows) {
 					if (n.id === e) break;
-					t += S.get(n) ?? i.height;
+					t += w.get(n) ?? i.height;
 				}
-				(i.container ?? document.documentElement).scrollTo(0, t + T);
+				S.value.scrollTo(0, t + D);
 			}
 		}), (t, i) => (c(), n("div", {
 			ref_key: "grid",
 			ref: b,
 			class: "infinite-grid",
-			style: a(D.value)
+			style: a(k.value)
 		}, [
 			r("div", {
 				class: "before",
-				style: a(M.value)
+				style: a(P.value)
 			}, null, 4),
 			r("div", {
 				ref_key: "content",
@@ -110,11 +115,11 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
 			}, [d(t.$slots, "row", { row: e }, void 0, !0)], 8, g))), 128))], 512),
 			r("div", {
 				class: "after",
-				style: a(F.value)
+				style: a(L.value)
 			}, null, 4)
 		], 4));
 	}
-}), [["__scopeId", "data-v-43bc25ca"]]), v = { install(e) {
+}), [["__scopeId", "data-v-30c741e3"]]), v = { install(e) {
 	e.component("VueGrid", _);
 } };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yasanchezz/vue-infinite-grid",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "files": [
     "dist"