@yasanchezz/vue-infinite-grid 0.1.7 → 0.1.9

package/dist/VueGrid.d.ts

@@ -12,7 +12,7 @@ declare const __VLS_export: <GridRow extends {
     } ? P : {});
     expose: (exposed: import('vue').ShallowUnwrapRef<{
         init(): void;
-        scrollTo(id: string): Promise<Element | null>;
+        scrollTo(id: string): Promise<HTMLElement>;
     }>) => void;
     attrs: any;
     slots: {

package/dist/vue-infinite-grid.css

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

package/dist/vue-infinite-grid.js

@@ -1,6 +1,6 @@
-import { Fragment as e, computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, nextTick as a, normalizeStyle as o, onMounted as s, onUnmounted as c, openBlock as l, ref as u, renderList as d, renderSlot as f, shallowRef as p, useTemplateRef as m, watch as h, watchEffect as g } from "vue";
+import { Fragment as e, computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeStyle as a, onMounted as o, onUnmounted as s, openBlock as c, ref as l, renderList as u, renderSlot as d, shallowRef as f, useTemplateRef as p, watch as m, watchEffect as h } from "vue";
 //#region src/VueGrid.vue?vue&type=script&setup=true&lang.ts
-var _ = ["data-index"], v = /*#__PURE__*/ ((e, t) => {
+var g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
@@ -19,119 +19,129 @@ var _ = ["data-index"], v = /*#__PURE__*/ ((e, t) => {
 		rowsCount: {},
 		height: {}
 	},
-	setup(i, { expose: v }) {
-		let y = p([]), b = m("grid"), x = m("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, O = i.rowsCount;
-		function k() {
+	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, D = i.rowsCount;
+		function O() {
 			if (i.autoCalculatedRowsCount) {
-				let e = window.innerHeight + i.height, t = F - T, n = t < e ? Math.ceil(e / t * O) : O;
-				O = n < i.rowsCount ? i.rowsCount : n;
+				let e = window.innerHeight + i.height, t = P - w, n = t < e ? Math.ceil(e / t * D) : D;
+				D = n < i.rowsCount ? i.rowsCount : n;
 			}
 		}
-		let A = 0;
-		function j() {
-			let e = 0, t = b.value;
-			for (; t instanceof HTMLElement && t != S.value;) e += t.offsetTop, t = t.offsetParent;
-			A = e;
+		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 = u({ height: "0px" }), N = 0;
-		function P() {
-			return N = i.rows.map((e) => w.get(e.id) ?? i.height).reduce((e, t) => e + t, 0), M.value.height = `${N}px`, N;
+		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 F = 0;
-		function I() {
-			F = y.value.map((e) => w.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 L = u({ height: "0px" }), R = 0;
-		function z() {
-			let e = S.value.scrollTop - T - A, 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.id) ?? i.height;
+				let r = C.get(n.id) ?? i.height;
 				if (t + r > e) break;
 				t += r;
 			}
-			let n = N - F, r = t > n ? n : t;
-			return R = r, L.value.height = `${r}px`, r;
+			let n = M - P, r = t > n ? n : t;
+			return L = r, I.value.height = `${r}px`, r;
 		}
-		let B = u({ height: "0px" }), V = 0;
-		function H() {
-			V = N - R - F, B.value.height = `${V}px`;
+		let z = l({ height: "0px" }), B = 0;
+		function V() {
+			B = M - L - P, z.value.height = `${B}px`;
 		}
-		function U() {
-			cancelAnimationFrame(E), E = requestAnimationFrame(() => {
-				j(), I(), P(), z(), H();
+		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.id) ?? i.height;
-					if (e += a, !(e <= R)) {
+					let a = C.get(r.id) ?? i.height;
+					if (e += a, !(e <= L)) {
 						t = n;
 						break;
 					}
 				}
-				let n = t + O > i.rows.length ? i.rows.slice(i.rows.length - O) : i.rows.slice(t, t + O);
-				V || (n = i.rows.slice(i.rows.length - O)), (n.at(0) !== y.value.at(0) || n.length !== y.value.length) && (y.value = n), I(), P(), H();
+				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 W = 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;
-					t != null && w.set(t, n);
+					t != null && C.set(t, n);
 				}
 			}
-			cancelAnimationFrame(D), D = requestAnimationFrame(() => {
-				I(), k(), U();
+			cancelAnimationFrame(E), E = requestAnimationFrame(() => {
+				F(), O(), H();
 			});
-		}), G = new MutationObserver((e) => {
-			for (let t of e) t.addedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => W.observe(e)), t.removedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => W.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 g(() => {
-			G.disconnect(), x.value && G.observe(x.value, { childList: !0 });
-		}), h(() => i.rows, U, { flush: "post" }), h(C, (e, t) => {
-			t?.removeEventListener("scroll", U), e.addEventListener("scroll", U, { passive: !0 });
-		}, { immediate: !0 }), s(() => {
-			U();
-		}), c(() => {
-			C.value.removeEventListener("scroll", U);
-		}), v({
+		return h(() => {
+			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(() => {
+			H();
+		}), s(() => {
+			S.value.removeEventListener("scroll", H);
+		}), _({
 			init() {
-				I(), k(), U();
+				F(), O(), H();
 			},
 			async scrollTo(e) {
 				let t = 0;
 				for (let n of i.rows) {
 					if (n.id === e) break;
-					t += w.get(n.id) ?? i.height;
+					t += C.get(n.id) ?? i.height;
 				}
-				return S.value.scrollTo(0, t + A), await a(), S.value.querySelector(`[data-index="${e}"]`);
+				return x.value.scrollTo(0, t + k), new Promise((t) => {
+					let n = x.value.querySelector(`[data-index="${e}"]`);
+					if (n instanceof HTMLElement) return t(n);
+					let r = new MutationObserver((n) => {
+						let i = n.flatMap((e) => Array.from(e.addedNodes)).filter((e) => e instanceof HTMLElement).find((t) => t.dataset.index === e);
+						i && (t(i), r.disconnect());
+					});
+					h(() => {
+						r.disconnect(), b.value && r.observe(b.value, { childList: !0 });
+					}), s(() => r.disconnect());
+				});
 			}
-		}), (t, i) => (l(), n("div", {
+		}), (t, i) => (c(), n("div", {
 			ref_key: "grid",
-			ref: b,
+			ref: y,
 			class: "infinite-grid",
-			style: o(M.value)
+			style: a(j.value)
 		}, [
 			r("div", {
 				class: "before",
-				style: o(L.value)
+				style: a(I.value)
 			}, null, 4),
 			r("div", {
 				ref_key: "content",
-				ref: x,
+				ref: b,
 				class: "content"
-			}, [(l(!0), n(e, null, d(y.value, (e) => (l(), n("div", {
+			}, [(c(!0), n(e, null, u(v.value, (e) => (c(), n("div", {
 				key: e.id,
 				class: "grid-row",
 				"data-index": e.id
-			}, [f(t.$slots, "row", { row: e }, void 0, !0)], 8, _))), 128))], 512),
+			}, [d(t.$slots, "row", { row: e }, void 0, !0)], 8, g))), 128))], 512),
 			r("div", {
 				class: "after",
-				style: o(B.value)
+				style: a(z.value)
 			}, null, 4)
 		], 4));
 	}
-}), [["__scopeId", "data-v-581d3de4"]]), y = { install(e) {
-	e.component("VueGrid", v);
+}), [["__scopeId", "data-v-923e3f26"]]), v = { install(e) {
+	e.component("VueGrid", _);
 } };
 //#endregion
-export { y as default };
+export { v as default };

package/package.json

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