@yasanchezz/vue-infinite-grid 0.1.2 → 0.1.3

package/dist/VueGrid.d.ts

@@ -2,7 +2,7 @@ declare const __VLS_export: <GridRow extends {
     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;
+        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-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}
+.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,7 +7,10 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
 })(/* @__PURE__ */ i({
 	__name: "VueGrid",
 	props: {
-		autoCalculatedRowsCount: { type: Boolean },
+		autoCalculatedRowsCount: {
+			type: Boolean,
+			default: !1
+		},
 		container: {
 			type: [null, Function],
 			default: document.documentElement
@@ -17,58 +20,58 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
 		height: {}
 	},
 	setup(i, { expose: _ }) {
-		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() {
+		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() {
 			if (i.autoCalculatedRowsCount) {
-				let e = window.innerHeight;
-				E = N < e ? Math.trunc(e / N * E) : E;
+				let e = window.innerHeight + i.height, t = P - w;
+				D = t < e ? Math.ceil(e / t * D) : D;
 			}
 		}
-		let O = 0;
-		function k() {
+		let k = 0;
+		function A() {
 			let e = 0, t = y.value;
 			for (; t instanceof HTMLElement && t != x.value;) e += t.offsetTop, t = t.offsetParent;
-			O = e;
+			k = e;
 		}
-		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 j = l({ height: "0px" }), M = 0;
+		function N() {
+			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 N = 0;
-		function P() {
-			N = v.value.map((e) => C.get(e.id) ?? i.height).reduce((e, t) => e + 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 F = l({ height: "0px" }), I = 0;
-		function L() {
-			let e = x.value.scrollTop - w - O, 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 = C.get(n.id) ?? i.height;
 				if (t + r > e) break;
 				t += r;
 			}
-			let n = j - N, r = t > n ? n : t;
-			return I = r, F.value.height = `${r}px`, r;
-		}
-		let R = l({ height: "0px" }), z = 0;
-		function B() {
-			z = j - I - N, R.value.height = `${z}px`;
+			let n = M - P, r = t > n ? n : t;
+			return L = r, I.value.height = `${r}px`, r;
 		}
+		let z = l({ height: "0px" }), B = 0;
 		function V() {
+			B = M - L - P, z.value.height = `${B}px`;
+		}
+		function H() {
 			cancelAnimationFrame(T), T = requestAnimationFrame(() => {
-				k(), P(), M(), L(), B();
+				A(), F(), N(), R(), V();
 				let e = 0, t = 0;
 				for (let [n, r] of i.rows.entries()) {
 					let a = C.get(r.id) ?? i.height;
-					if (e += a, !(e <= I)) {
+					if (e += a, !(e <= L)) {
 						t = n;
 						break;
 					}
 				}
-				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 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 H = 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) {
@@ -76,23 +79,23 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
 					t != null && C.set(t, n);
 				}
 			}
-			cancelAnimationFrame(T), T = requestAnimationFrame(() => {
-				D(), V();
+			cancelAnimationFrame(E), E = requestAnimationFrame(() => {
+				F(), O(), H();
 			});
-		}), 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));
+		}), 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(() => {
-			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 });
+			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(() => {
-			V();
+			H();
 		}), s(() => {
-			S.value.removeEventListener("scroll", V);
+			S.value.removeEventListener("scroll", H);
 		}), _({
 			init() {
-				k(), P(), M(), L(), B();
+				A(), F(), N(), R(), V();
 			},
 			scrollTo(e) {
 				let t = 0;
@@ -100,17 +103,17 @@ var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
 					if (n.id === e) break;
 					t += C.get(n.id) ?? i.height;
 				}
-				x.value.scrollTo(0, t + O);
+				x.value.scrollTo(0, t + k);
 			}
 		}), (t, i) => (c(), n("div", {
 			ref_key: "grid",
 			ref: y,
 			class: "infinite-grid",
-			style: a(A.value)
+			style: a(j.value)
 		}, [
 			r("div", {
 				class: "before",
-				style: a(F.value)
+				style: a(I.value)
 			}, null, 4),
 			r("div", {
 				ref_key: "content",
@@ -123,11 +126,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(R.value)
+				style: a(z.value)
 			}, null, 4)
 		], 4));
 	}
-}), [["__scopeId", "data-v-4ed5884b"]]), 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.2",
+  "version": "0.1.3",
   "type": "module",
   "files": [
     "dist"