@yasanchezz/vue-infinite-grid 0.1.0 → 0.1.2

package/dist/VueGrid.d.ts

@@ -1,8 +1,9 @@
 declare const __VLS_export: <GridRow extends {
-    id: string | number;
+    id: string;
 }>(__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;
+        autoCalculatedRowsCount: boolean;
+        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-4ed5884b]{overflow-anchor:none;align-content:start;display:grid;overflow:clip}.grid-row[data-v-4ed5884b]{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.content[data-v-4ed5884b]{display:contents}.before[data-v-4ed5884b],.after[data-v-4ed5884b]{pointer-events:none;grid-column:1/-1}
 /*$vite$:1*/

package/dist/vue-infinite-grid.js

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