@yasanchezz/vue-infinite-grid 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+# component
+that placeholder will be replaced by some content soon
+

package/dist/VueGrid.d.ts

@@ -0,0 +1,32 @@
+declare const __VLS_export: <GridRow extends {
+    id: string | number;
+}>(__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;
+        rows: GridRow[];
+        rowsCount: number;
+        height: number;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        init(): void;
+        scrollTo(id: number | string): void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        row(props: {
+            row: GridRow;
+        }): unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/main.d.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue';
+import { default as VueGrid } from './VueGrid';
+declare module 'vue' {
+    interface GlobalComponents {
+        VueGrid: typeof VueGrid;
+    }
+}
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/dist/vue-infinite-grid.css

@@ -0,0 +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}
+/*$vite$:1*/

package/dist/vue-infinite-grid.js

@@ -0,0 +1,121 @@
+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 g = ["data-index"], _ = /*#__PURE__*/ ((e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ i({
+	__name: "VueGrid",
+	props: {
+		container: {},
+		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 D = l({ height: "0px" }), 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 A = 0;
+		function j() {
+			A = y.value.map((e) => S.get(e) ?? i.height).reduce((e, t) => e + t, 0);
+		}
+		let M = l({ height: "0px" }), N = 0;
+		function P() {
+			let e = (i.container ? i.container.scrollTop : document.body.scrollTop || document.documentElement.scrollTop) - C - T, t = 0;
+			for (let n of i.rows) {
+				let r = S.get(n) ?? 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 F = l({ height: "0px" }), I = 0;
+		function L() {
+			I = O - N - A, F.value.height = `${I}px`;
+		}
+		function R() {
+			cancelAnimationFrame(w), w = requestAnimationFrame(() => {
+				E(), j(), k(), P(), L();
+				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)) {
+						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 z = 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);
+				}
+			}
+			cancelAnimationFrame(w), w = requestAnimationFrame(() => {
+				j(), k(), L();
+			});
+		}), 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));
+		});
+		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 });
+		}), s(() => {
+			window.removeEventListener("scroll", R);
+		}), _({
+			init() {
+				E(), j(), k(), P(), L();
+			},
+			scrollTo(e) {
+				let t = 0;
+				for (let n of i.rows) {
+					if (n.id === e) break;
+					t += S.get(n) ?? i.height;
+				}
+				(i.container ?? document.documentElement).scrollTo(0, t + T);
+			}
+		}), (t, i) => (c(), n("div", {
+			ref_key: "grid",
+			ref: b,
+			class: "infinite-grid",
+			style: a(D.value)
+		}, [
+			r("div", {
+				class: "before",
+				style: a(M.value)
+			}, null, 4),
+			r("div", {
+				ref_key: "content",
+				ref: x,
+				class: "content"
+			}, [(c(!0), n(e, null, u(y.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)
+			}, null, 4)
+		], 4));
+	}
+}), [["__scopeId", "data-v-43bc25ca"]]), v = { install(e) {
+	e.component("VueGrid", _);
+} };
+//#endregion
+export { v as default };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@yasanchezz/vue-infinite-grid",
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue-infinite-grid.js",
+  "module": "./dist/vue-infinite-grid.js",
+  "types": "./dist/main.d.ts",
+  "style": "./dist/vue-infinite-grid.css",
+  "peerDependencies": {
+    "vue": "^3.5.39"
+  },
+  "devDependencies": {
+    "@stylistic/eslint-plugin": "^5.10.0",
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.13.2",
+    "@typescript-eslint/utils": "^8.63.0",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "@vue/tsconfig": "^0.9.1",
+    "eslint": "^10.6.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-oxlint": "~1.69.0",
+    "eslint-plugin-vue": "~10.9.2",
+    "jiti": "^2.7.0",
+    "npm-run-all2": "^9.0.2",
+    "oxfmt": "^0.54.0",
+    "oxlint": "~1.69.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.1.3",
+    "vite-plugin-dts": "^5.0.3",
+    "vite-plugin-vue-devtools": "^8.1.5",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-tsc": "^3.3.6"
+  },
+  "engines": {
+    "node": ">= 24.12.0",
+    "pnpm": ">= 11.10.0"
+  },
+  "scripts": {
+    "dev": "vite build -w",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "run-s \"lint:*\"",
+    "lint:oxlint": "oxlint . --fix",
+    "lint:eslint": "eslint . --fix --cache",
+    "format": "oxfmt src/"
+  }
+}