@yasanchezz/vue-infinite-grid 0.1.1 → 0.1.3

package/dist/VueGrid.d.ts

@@ -1,7 +1,8 @@
 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<{
+        autoCalculatedRowsCount?: boolean;
         container?: (Element | null | undefined) | ((container: Element | null) => Element | null | undefined);
         rows: GridRow[];
         rowsCount: number;

package/dist/vue-infinite-grid.css

@@ -1,2 +1,2 @@
-.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}
+.infinite-grid[data-v-66ef5b12]{overflow-anchor:none;align-content:start;display:grid;overflow:clip}.grid-row[data-v-66ef5b12]{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.content[data-v-66ef5b12]{display:contents}.before[data-v-66ef5b12],.after[data-v-66ef5b12]{pointer-events:none;grid-column:1/-1}
 /*$vite$:1*/

package/dist/vue-infinite-grid.js

@@ -7,6 +7,10 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
 })(/* @__PURE__ */ i({
 	__name: "VueGrid",
 	props: {
+		autoCalculatedRowsCount: {
+			type: Boolean,
+			default: !1
+		},
 		container: {
 			type: [null, Function],
 			default: document.documentElement
@@ -16,110 +20,117 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
 		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 = 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;
+		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, D = i.rowsCount;
 		function O() {
-			let e = 0, t = b.value;
-			for (; t instanceof HTMLElement && t != S.value;) e += t.offsetTop, t = t.offsetParent;
-			D = e;
+			if (i.autoCalculatedRowsCount) {
+				let e = window.innerHeight + i.height, t = P - w;
+				D = t < e ? Math.ceil(e / t * D) : D;
+			}
 		}
-		let k = l({ height: "0px" }), A = 0;
-		function j() {
-			return A = i.rows.map((e) => w.get(e) ?? i.height).reduce((e, t) => e + t, 0), k.value.height = `${A}px`, A;
+		let k = 0;
+		function A() {
+			let e = 0, t = y.value;
+			for (; t instanceof HTMLElement && t != x.value;) e += t.offsetTop, t = t.offsetParent;
+			k = e;
 		}
-		let M = 0;
+		let j = l({ height: "0px" }), M = 0;
 		function N() {
-			M = y.value.map((e) => w.get(e) ?? i.height).reduce((e, t) => e + t, 0);
+			return M = i.rows.map((e) => C.get(e.id) ?? i.height).reduce((e, t) => e + t, 0), j.value.height = `${M}px`, M;
 		}
-		let P = l({ height: "0px" }), F = 0;
-		function I() {
-			let e = S.value.scrollTop - T - D, t = 0;
+		let P = 0;
+		function F() {
+			P = v.value.map((e) => C.get(e.id) ?? i.height).reduce((e, t) => e + t, 0);
+		}
+		let I = l({ height: "0px" }), L = 0;
+		function R() {
+			let e = x.value.scrollTop - w - k, t = 0;
 			for (let n of i.rows) {
-				let r = w.get(n) ?? i.height;
+				let r = C.get(n.id) ?? i.height;
 				if (t + r > e) break;
 				t += r;
 			}
-			let n = A - M, r = t > n ? n : t;
-			return F = r, P.value.height = `${r}px`, r;
+			let n = M - P, r = t > n ? n : t;
+			return L = r, I.value.height = `${r}px`, r;
 		}
-		let L = l({ height: "0px" }), R = 0;
-		function z() {
-			R = A - F - M, L.value.height = `${R}px`;
+		let z = l({ height: "0px" }), B = 0;
+		function V() {
+			B = M - L - P, z.value.height = `${B}px`;
 		}
-		function B() {
-			cancelAnimationFrame(E), E = requestAnimationFrame(() => {
-				O(), N(), j(), I(), z();
+		function H() {
+			cancelAnimationFrame(T), T = requestAnimationFrame(() => {
+				A(), F(), N(), R(), V();
 				let e = 0, t = 0;
 				for (let [n, r] of i.rows.entries()) {
-					let a = w.get(r) ?? i.height;
-					if (e += a, !(e <= F)) {
+					let a = C.get(r.id) ?? i.height;
+					if (e += a, !(e <= L)) {
 						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);
-				R || (n = i.rows.slice(i.rows.length - i.rowsCount)), n.at(0) !== y.value.at(0) && (y.value = n), N(), j(), z();
+				let n = t + D > i.rows.length ? i.rows.slice(i.rows.length - D) : i.rows.slice(t, t + D);
+				B || (n = i.rows.slice(i.rows.length - D)), (n.at(0) !== v.value.at(0) || n.length !== v.value.length) && (v.value = n), F(), N(), V();
 			});
 		}
-		let V = new ResizeObserver((e) => {
+		let U = 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 && w.set(r, n);
+					let t = e.dataset.index;
+					t != null && C.set(t, n);
 				}
 			}
 			cancelAnimationFrame(E), E = requestAnimationFrame(() => {
-				N(), j(), z();
+				F(), O(), H();
 			});
-		}), 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));
+		}), W = new MutationObserver((e) => {
+			for (let t of e) t.addedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => U.observe(e)), t.removedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => U.unobserve(e));
 		});
 		return h(() => {
-			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 });
+			W.disconnect(), b.value && W.observe(b.value, { childList: !0 });
+		}), m(() => i.rows, H, { flush: "post" }), m(S, (e, t) => {
+			t?.removeEventListener("scroll", H), e.addEventListener("scroll", H, { passive: !0 });
 		}, { immediate: !0 }), o(() => {
-			B();
+			H();
 		}), s(() => {
-			C.value.removeEventListener("scroll", B);
+			S.value.removeEventListener("scroll", H);
 		}), _({
 			init() {
-				O(), N(), j(), I(), z();
+				A(), F(), N(), R(), V();
 			},
 			scrollTo(e) {
 				let t = 0;
 				for (let n of i.rows) {
 					if (n.id === e) break;
-					t += w.get(n) ?? i.height;
+					t += C.get(n.id) ?? i.height;
 				}
-				S.value.scrollTo(0, t + D);
+				x.value.scrollTo(0, t + k);
 			}
 		}), (t, i) => (c(), n("div", {
 			ref_key: "grid",
-			ref: b,
+			ref: y,
 			class: "infinite-grid",
-			style: a(k.value)
+			style: a(j.value)
 		}, [
 			r("div", {
 				class: "before",
-				style: a(P.value)
+				style: a(I.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(L.value)
+				style: a(z.value)
 			}, null, 4)
 		], 4));
 	}
-}), [["__scopeId", "data-v-30c741e3"]]), v = { install(e) {
+}), [["__scopeId", "data-v-66ef5b12"]]), v = { install(e) {
 	e.component("VueGrid", _);
 } };
 //#endregion

package/package.json

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