@yasanchezz/vue-infinite-grid 0.2.3 → 0.2.4

package/dist/VueGrid.d.ts

@@ -1,7 +1,5 @@
-declare const __VLS_export: <GridRow extends {
-    id: string;
-    sticky?: boolean;
-}>(__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<{
+import { TableRow } from './types';
+declare const __VLS_export: <GridRow extends TableRow>(__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?: (Element | null | undefined) | ((container: Element | null) => Element | null | undefined);
         rowInitialHeight: number;

package/dist/types.d.ts

@@ -0,0 +1,4 @@
+export type TableRow = {
+    id: string;
+    sticky?: boolean;
+};

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function countStickyBefore(array: number[], index: number): number;
+export declare function isSameArray<T>(left: readonly T[], right: readonly T[]): boolean;

package/dist/vue-infinite-grid.css

@@ -1,2 +1,2 @@
-@layer VueGrid{.infinite-grid[data-v-e50d93db]{overflow-anchor:none;align-content:start;width:max-content;display:grid;overflow:clip}.grid-row[data-v-e50d93db]{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.grid-row--sticky[data-v-e50d93db]{position:sticky;top:0}.content[data-v-e50d93db]{display:contents}.before[data-v-e50d93db],.after[data-v-e50d93db]{pointer-events:none;grid-column:1/-1}}
+@layer VueGrid{.infinite-grid[data-v-d94c77db]{overflow-anchor:none;align-content:start;width:max-content;display:grid;overflow:clip}.grid-row[data-v-d94c77db]{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.grid-row--sticky[data-v-d94c77db]{position:sticky;top:0}.content[data-v-d94c77db]{display:contents}.before[data-v-d94c77db],.after[data-v-d94c77db]{pointer-events:none;grid-column:1/-1}}
 /*$vite$:1*/

package/dist/vue-infinite-grid.js

@@ -1,6 +1,21 @@
-import { Fragment as e, computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, onMounted as s, onUnmounted as c, openBlock as l, ref as u, renderList as ee, renderSlot as te, shallowRef as d, useTemplateRef as f, watch as p, watchEffect as m } from "vue";
+import { Fragment as e, computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, onMounted as s, onUnmounted as ee, openBlock as c, ref as l, renderList as te, renderSlot as ne, shallowRef as re, useTemplateRef as u, watch as d, watchEffect as f } from "vue";
+//#region src/utils.ts
+function ie(e, t) {
+	let n = 0, r = e.length;
+	for (; n < r;) {
+		let i = n + r >>> 1;
+		e[i] < t ? n = i + 1 : r = i;
+	}
+	return n;
+}
+function ae(e, t) {
+	if (e.length !== t.length) return !1;
+	for (let [n, r] of e.entries()) if (r !== t[n]) return !1;
+	return !0;
+}
+//#endregion
 //#region src/VueGrid.vue?vue&type=script&setup=true&lang.ts
-var h = ["data-index"], g = /*#__PURE__*/ ((e, t) => {
+var p = ["data-index"], m = /*#__PURE__*/ ((e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
@@ -20,163 +35,171 @@ var h = ["data-index"], g = /*#__PURE__*/ ((e, t) => {
 		},
 		rowsOffset: { default: 0 }
 	},
-	setup(i, { expose: g }) {
-		let _ = d([]), v = f("grid"), y = f("content"), b = t(() => i.container instanceof Function ? i.container(v.value) ?? document.documentElement : i.container ?? document.documentElement), x = t(() => b.value === document.documentElement || b.value === document.body ? window : b.value), S = /* @__PURE__ */ new Map(), C = i.rowsOffset || i.rowInitialHeight * Math.trunc(i.rowsCount / 5) || 1e3, w, T, E = /* @__PURE__ */ new Map();
-		function D() {
-			E = new Map(i.rows.map((e, t) => [e.id, t]));
+	setup(i, { expose: m }) {
+		let h = re([]), g = u("grid"), _ = u("content"), v = t(() => i.rows.map((e, t) => e.sticky ? t : void 0).filter((e) => e != null)), y = t(() => i.container instanceof Function ? i.container(g.value) ?? document.documentElement : i.container ?? document.documentElement), b = t(() => y.value === document.documentElement || y.value === document.body ? window : y.value), x = /* @__PURE__ */ new Map(), S = i.rowsOffset || i.rowInitialHeight * Math.trunc(i.rowsCount / 5) || 1e3, C, w, T = /* @__PURE__ */ new Map();
+		function E() {
+			T = new Map(i.rows.map((e, t) => [e.id, t]));
 		}
-		let O = new Float32Array(i.rows.length);
-		function k() {
-			O = new Float32Array(i.rows.map((e) => S.get(e.id) ?? i.rowInitialHeight));
+		let D = new Float32Array(i.rows.length);
+		function O() {
+			D = new Float32Array(i.rows.map((e) => x.get(e.id) ?? i.rowInitialHeight));
 		}
-		function A(e, t) {
-			S.set(e, t);
-			let n = E.get(e);
-			n != null && (O[n] = t);
+		function oe(e, t) {
+			x.set(e, t);
+			let n = T.get(e);
+			n != null && (D[n] = t);
 		}
-		function j(e) {
-			return O.at(e) ?? i.rowInitialHeight;
+		function k(e) {
+			return D.at(e) ?? i.rowInitialHeight;
 		}
-		let M = i.rowsCount;
-		function N() {
+		let A = i.rowsCount;
+		function j() {
 			if (i.rowsCountAutoCalculated) {
-				let e = window.innerHeight + i.rowInitialHeight, t = z - C, n = t < e ? Math.ceil(e / t * M) : M;
-				M = Number.isFinite(n) && n >= i.rowsCount ? n : i.rowsCount;
+				let e = window.innerHeight + i.rowInitialHeight, t = L - S, n = t < e ? Math.ceil(e / t * A) : A;
+				A = Number.isFinite(n) && n >= i.rowsCount ? n : i.rowsCount;
 			}
 		}
-		let P = 0;
-		function F() {
-			let e = 0, t = v.value;
-			for (; t instanceof HTMLElement && t != b.value;) e += t.offsetTop, t = t.offsetParent;
-			P = e;
+		let M = 0;
+		function N() {
+			let e = 0, t = g.value;
+			for (; t instanceof HTMLElement && t != y.value;) e += t.offsetTop, t = t.offsetParent;
+			M = e;
 		}
-		let I = u({ height: "0px" }), L = 0;
-		function R() {
-			L = O.reduce((e, t) => e + t, 0), I.value.height = `${L}px`;
+		let P = l({ height: "0px" }), F = 0;
+		function I() {
+			F = D.reduce((e, t) => e + t, 0), P.value.height = `${F}px`;
 		}
-		let z = 0, B = 0, V = M;
-		function H() {
-			z = O.slice(B, V).reduce((e, t) => e + t, 0);
+		let L = 0, R = 0, z = A;
+		function B() {
+			L = D.slice(R, z).reduce((e, t) => e + t, 0);
 		}
-		let U = u({ height: "0px" }), W = 0;
-		function G() {
-			let e = b.value.scrollTop - C - P, t = 0;
+		let V = l({ height: "0px" }), H = 0;
+		function U() {
+			let e = y.value.scrollTop - S - M, t = 0;
 			for (let n of i.rows.keys()) {
-				let r = j(n);
+				let r = k(n);
 				if (t + r > e) break;
 				t += r;
 			}
-			let n = L - z;
-			W = t > n ? n : t;
+			let n = F - L;
+			H = t > n ? n : t;
 		}
-		let K = 0;
-		function q() {
-			let e = W - K;
-			e = e < 0 ? 0 : e, U.value.height = `${e}px`;
+		let W = 0;
+		function G() {
+			let e = H - W;
+			e = e < 0 ? 0 : e, V.value.height = `${e}px`;
 		}
-		let J = u({ height: "0px" }), Y = 0;
-		function X() {
-			Y = L - W - z, J.value.height = `${Y}px`;
+		let K = l({ height: "0px" }), q = 0;
+		function J() {
+			q = F - H - L, K.value.height = `${q}px`;
 		}
-		function ne() {
-			F(), H(), R(), G(), q(), X();
-			let e = 0, t = 0, n, r;
-			for (let [a, o] of i.rows.entries()) {
-				let i = j(a);
-				if (e += i, e > W) {
-					t = a;
+		function se() {
+			N(), B(), I(), U(), G(), J();
+			let e = 0, t = 0;
+			for (let n of i.rows.keys()) {
+				let r = k(n);
+				if (e += r, e > H) {
+					t = n;
 					break;
 				}
-				o.sticky && (n = o, r = a, K = i);
 			}
-			[B, V] = t + M > i.rows.length || !Y ? [i.rows.length - M, i.rows.length] : [t, t + M], B < 0 && (B = 0);
-			let a = n && r != null && r < B ? [n] : [], o = a.length, s = i.rows.slice(B, V), c = a.concat(s);
-			o || (K = 0), (c.at(o) !== _.value.at(o) || c.length !== _.value.length) && (_.value = c), H(), R(), G(), q(), X();
+			[R, z] = t + A > i.rows.length || !q ? [i.rows.length - A, i.rows.length] : [t, t + A], R < 0 && (R = 0);
+			let n = ie(v.value, R), r = v.value.slice(0, n), a = r.map((e) => i.rows.at(e)).filter((e) => e != null);
+			W = r.reduce((e, t) => e + k(t), 0);
+			let o = i.rows.slice(R, z), s = a.concat(o);
+			ae(s, h.value) || (h.value = s), B(), I(), U(), G(), J();
 		}
-		function Z() {
-			cancelAnimationFrame(w), w = requestAnimationFrame(ne);
+		function Y() {
+			cancelAnimationFrame(C), C = requestAnimationFrame(se);
 		}
-		let Q = new ResizeObserver((e) => {
+		let X = new ResizeObserver((e) => {
 			for (let t of e) {
 				let e = t.target, n = t.borderBoxSize.at(0)?.blockSize ?? i.rowInitialHeight;
 				if (e instanceof HTMLElement) {
 					let t = e.dataset.index;
-					t != null && A(t, n);
+					t != null && oe(t, n);
 				}
 			}
-			cancelAnimationFrame(T), T = requestAnimationFrame(() => {
-				H(), N(), Z();
+			cancelAnimationFrame(w), w = requestAnimationFrame(() => {
+				B(), j(), Y();
 			});
-		}), $ = new MutationObserver((e) => {
-			for (let t of e) t.addedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => Q.observe(e)), t.removedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => Q.unobserve(e));
+		}), Z = new MutationObserver((e) => {
+			for (let t of e) t.addedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => X.observe(e)), t.removedNodes.values().filter((e) => e instanceof HTMLElement).forEach((e) => X.unobserve(e));
 		});
-		m(() => {
-			$.disconnect(), y.value && $.observe(y.value, { childList: !0 });
-		}), p(() => i.rows, () => {
-			D(), k(), Z();
-		}, { flush: "post" }), p(x, (e, t) => {
-			t?.removeEventListener("scroll", Z), e.addEventListener("scroll", Z, { passive: !0 });
-		}, { immediate: !0 }), s(() => {
-			D(), k(), Z();
-		}), c(() => {
-			Q.disconnect(), $.disconnect(), x.value.removeEventListener("scroll", Z), S.clear(), E.clear(), O = /* @__PURE__ */ new Float32Array();
-		}), g({
+		f(() => {
+			Z.disconnect(), _.value && Z.observe(_.value, { childList: !0 });
+		}), d(() => i.rows, () => {
+			E(), O(), Y();
+		}, { flush: "post" }), d(b, (e, t, n) => {
+			e.addEventListener("scroll", Y, { passive: !0 }), n(() => e.removeEventListener("scroll", Y));
+		}, { immediate: !0 });
+		let Q = /* @__PURE__ */ new Set();
+		function $(e) {
+			let t = _.value?.querySelector(`[data-index="${CSS.escape(e)}"]`);
+			return t instanceof HTMLElement ? t : null;
+		}
+		s(() => {
+			E(), O(), Y();
+		}), ee(() => {
+			cancelAnimationFrame(C), cancelAnimationFrame(w), X.disconnect(), Z.disconnect(), Q.forEach((e) => e()), x.clear(), T.clear(), D = /* @__PURE__ */ new Float32Array();
+		}), m({
 			init() {
-				H(), N(), Z();
+				B(), j(), Y();
 			},
 			async scrollTo(e) {
-				let t = 0;
-				for (let [n, r] of i.rows.entries()) {
-					if (r.id === e) break;
-					t += j(n);
-				}
-				return b.value.scrollTo(0, t + P), new Promise((t) => {
-					let n = b.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());
-					});
-					m(() => {
-						r.disconnect(), y.value && r.observe(y.value, { childList: !0 });
-					}), c(() => r.disconnect());
+				let t = T.get(e);
+				if (t == null) throw Error(`VueGrid: row with id "${e}" not found`);
+				let n = D.subarray(0, t).reduce((e, t) => e + t, 0);
+				return y.value.scrollTo(0, n + M), new Promise((t, n) => {
+					let r = $(e);
+					if (r) return t(r);
+					if (!_.value) return n(/* @__PURE__ */ Error("VueGrid: component is not mounted"));
+					let i = new MutationObserver(() => {
+						let n = $(e);
+						n && (a(), t(n));
+					}), a = () => {
+						i.disconnect(), Q.delete(o);
+					}, o = () => {
+						a(), n(/* @__PURE__ */ Error("VueGrid: component was unmounted before the row was rendered"));
+					};
+					Q.add(o), i.observe(_.value, { childList: !0 });
 				});
 			}
 		});
-		function re(e) {
+		function ce(e) {
 			let t = "grid-row";
 			return {
 				[t]: !0,
 				[`${t}--sticky`]: e.sticky
 			};
 		}
-		return (t, i) => (l(), n("div", {
+		return (t, i) => (c(), n("div", {
 			ref_key: "grid",
-			ref: v,
+			ref: g,
 			class: "infinite-grid",
-			style: o(I.value)
+			style: o(P.value)
 		}, [
 			r("div", {
 				class: "before",
-				style: o(U.value)
+				style: o(V.value)
 			}, null, 4),
 			r("div", {
 				ref_key: "content",
-				ref: y,
+				ref: _,
 				class: "content"
-			}, [(l(!0), n(e, null, ee(_.value, (e) => (l(), n("div", {
+			}, [(c(!0), n(e, null, te(h.value, (e) => (c(), n("div", {
 				key: e.id,
-				class: a(re(e)),
+				class: a(ce(e)),
 				"data-index": e.id
-			}, [te(t.$slots, "row", { row: e }, void 0, !0)], 10, h))), 128))], 512),
+			}, [ne(t.$slots, "row", { row: e }, void 0, !0)], 10, p))), 128))], 512),
 			r("div", {
 				class: "after",
-				style: o(J.value)
+				style: o(K.value)
 			}, null, 4)
 		], 4));
 	}
-}), [["__scopeId", "data-v-e50d93db"]]), _ = { install(e) {
-	e.component("VueGrid", g);
+}), [["__scopeId", "data-v-d94c77db"]]), h = { install(e) {
+	e.component("VueGrid", m);
 } };
 //#endregion
-export { g as VueGrid, _ as default };
+export { m as VueGrid, h as default };

package/package.json

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