@yasanchezz/vue-infinite-grid 0.2.0 → 0.2.2

package/README.md

@@ -25,6 +25,18 @@ createApp(App)
   .mount('#app');
 ```
 
+Or import the component directly, without installing the plugin
+
+``` vue
+<script setup>
+import { VueGrid } from '@yasanchezz/vue-infinite-grid';
+import '@yasanchezz/vue-infinite-grid/dist/vue-infinite-grid.css';
+</script>
+```
+
+Don't forget to import the CSS file once, either in `main.js` or in the
+component that uses `VueGrid`.
+
 ## Usage
 
 ``` vue
@@ -71,7 +83,7 @@ part of the rendered window (see [Styling notes](#styling-notes)).
 | `rowsCount` | `number` | yes | - | How many rows to render at once (the size of the rendered window). |
 | `rowInitialHeight` | `number` | yes | - | Estimated row height in px, used for scroll/offset math before a row has actually been measured. |
 | `container` | `Element \| null \| ((container: Element \| null) => Element \| null \| undefined)` | no | `document.documentElement` | The scrollable element to listen to. Can be a function that receives the grid's root element (useful for resolving a custom scroll container after mount). |
-| `autoCalculatedRowsCount` | `boolean` | no | `false` | When `true`, grows the rendered window beyond `rowsCount` based on measured row heights so it always covers the viewport (useful when actual row heights are smaller than the estimated `rowInitialHeight`). |
+| `rowsCountAutoCalculated` | `boolean` | no | `false` | When `true`, grows the rendered window beyond `rowsCount` based on measured row heights so it always covers the viewport (useful when actual row heights are smaller than the estimated `rowInitialHeight`). |
 | `rowsOffset` | `number` | no | `rowInitialHeight * Math.trunc(rowsCount / 5)` (or `1000` if that's `0`) | Extra px of buffer kept rendered above/below the viewport before the window shifts, to reduce blank space while scrolling fast. |
 
 ## Slots

package/dist/VueGrid.d.ts

@@ -3,11 +3,11 @@ declare const __VLS_export: <GridRow extends {
     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<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<{
-        autoCalculatedRowsCount?: boolean;
         container?: (Element | null | undefined) | ((container: Element | null) => Element | null | undefined);
         rowInitialHeight: number;
         rows: GridRow[];
         rowsCount: number;
+        rowsCountAutoCalculated?: boolean;
         rowsOffset?: number;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

package/dist/vue-infinite-grid.css

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

package/dist/vue-infinite-grid.js

@@ -7,10 +7,6 @@ var h = ["data-index"], g = /*#__PURE__*/ ((e, t) => {
 })(/* @__PURE__ */ i({
 	__name: "VueGrid",
 	props: {
-		autoCalculatedRowsCount: {
-			type: Boolean,
-			default: !1
-		},
 		container: {
 			type: [null, Function],
 			default: null
@@ -18,6 +14,10 @@ var h = ["data-index"], g = /*#__PURE__*/ ((e, t) => {
 		rowInitialHeight: {},
 		rows: {},
 		rowsCount: {},
+		rowsCountAutoCalculated: {
+			type: Boolean,
+			default: !1
+		},
 		rowsOffset: { default: 0 }
 	},
 	setup(i, { expose: g }) {
@@ -39,7 +39,7 @@ var h = ["data-index"], g = /*#__PURE__*/ ((e, t) => {
 		}
 		let M = i.rowsCount;
 		function N() {
-			if (i.autoCalculatedRowsCount) {
+			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;
 			}
@@ -78,22 +78,23 @@ var h = ["data-index"], g = /*#__PURE__*/ ((e, t) => {
 		function X() {
 			Y = L - W - z, J.value.height = `${Y}px`;
 		}
-		function Z() {
-			cancelAnimationFrame(w), w = requestAnimationFrame(() => {
-				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;
-						break;
-					}
-					o.sticky && (n = o, r = a, K = i);
+		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;
+					break;
 				}
-				[B, V] = t + M > i.rows.length || !Y ? [i.rows.length - M, i.rows.length] : [t, t + M];
-				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(), q(), X();
-			});
+				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();
+		}
+		function Z() {
+			cancelAnimationFrame(w), w = requestAnimationFrame(ne);
 		}
 		let Q = new ResizeObserver((e) => {
 			for (let t of e) {
@@ -142,7 +143,7 @@ var h = ["data-index"], g = /*#__PURE__*/ ((e, t) => {
 				});
 			}
 		});
-		function ne(e) {
+		function re(e) {
 			let t = "grid-row";
 			return {
 				[t]: !0,
@@ -165,7 +166,7 @@ var h = ["data-index"], g = /*#__PURE__*/ ((e, t) => {
 				class: "content"
 			}, [(l(!0), n(e, null, ee(_.value, (e) => (l(), n("div", {
 				key: e.id,
-				class: a(ne(e)),
+				class: a(re(e)),
 				"data-index": e.id
 			}, [te(t.$slots, "row", { row: e }, void 0, !0)], 10, h))), 128))], 512),
 			r("div", {
@@ -174,7 +175,7 @@ var h = ["data-index"], g = /*#__PURE__*/ ((e, t) => {
 			}, null, 4)
 		], 4));
 	}
-}), [["__scopeId", "data-v-145b839c"]]), _ = { install(e) {
+}), [["__scopeId", "data-v-e50d93db"]]), _ = { install(e) {
 	e.component("VueGrid", g);
 } };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yasanchezz/vue-infinite-grid",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "files": [
     "dist"
@@ -9,6 +9,17 @@
   "module": "./dist/vue-infinite-grid.js",
   "types": "./dist/main.d.ts",
   "style": "./dist/vue-infinite-grid.css",
+  "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/"
+  },
   "peerDependencies": {
     "vue": "^3.5.39"
   },
@@ -40,15 +51,5 @@
     "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/"
-  }
-}
+  "packageManager": "pnpm@11.17.0"
+}