@svgrid/grid 1.2.33 → 2.0.0

package/dist/virtual.d.ts

@@ -0,0 +1,35 @@
+/**
+ * virtual - a tiny, framework-free fixed-row windowing helper shared by the
+ * selection controls so their option lists scale to tens of thousands of rows
+ * without rendering them all. The renderer measures the viewport + tracks
+ * scrollTop (DOM concerns) and passes them in; this returns the slice to render
+ * plus the top/bottom spacer heights that keep the scrollbar honest.
+ */
+export type VirtualRange = {
+    /** First item index to render (inclusive). */
+    start: number;
+    /** Last item index to render (exclusive). */
+    end: number;
+    /** Spacer height above the rendered slice (px). */
+    padTop: number;
+    /** Spacer height below the rendered slice (px). */
+    padBottom: number;
+    /** Total scrollable height of all rows (px). */
+    totalHeight: number;
+};
+export type VirtualParams = {
+    scrollTop: number;
+    viewportHeight: number;
+    rowHeight: number;
+    count: number;
+    /** Extra rows rendered above/below the viewport to avoid blank flashes. */
+    overscan?: number;
+};
+/** Compute the visible window for a fixed-row-height list (pure). */
+export declare function virtualRange(params: VirtualParams): VirtualRange;
+/**
+ * The scrollTop that brings item `index` fully into a fixed-row viewport,
+ * scrolling the least amount (returns the current scrollTop if already visible).
+ * Pure - the renderer applies it to the element.
+ */
+export declare function scrollToIndex(index: number, scrollTop: number, viewportHeight: number, rowHeight: number): number;

package/dist/virtual.js

@@ -0,0 +1,34 @@
+/** Compute the visible window for a fixed-row-height list (pure). */
+export function virtualRange(params) {
+    const { scrollTop, viewportHeight, rowHeight, count } = params;
+    const overscan = params.overscan ?? 6;
+    const total = Math.max(0, count) * Math.max(0, rowHeight);
+    if (rowHeight <= 0 || count <= 0) {
+        return { start: 0, end: Math.max(0, count), padTop: 0, padBottom: 0, totalHeight: total };
+    }
+    const first = Math.floor(Math.max(0, scrollTop) / rowHeight);
+    const start = Math.max(0, first - overscan);
+    const visible = Math.max(1, Math.ceil(Math.max(0, viewportHeight) / rowHeight));
+    const end = Math.min(count, first + visible + overscan);
+    return {
+        start,
+        end,
+        padTop: start * rowHeight,
+        padBottom: Math.max(0, (count - end) * rowHeight),
+        totalHeight: total,
+    };
+}
+/**
+ * The scrollTop that brings item `index` fully into a fixed-row viewport,
+ * scrolling the least amount (returns the current scrollTop if already visible).
+ * Pure - the renderer applies it to the element.
+ */
+export function scrollToIndex(index, scrollTop, viewportHeight, rowHeight) {
+    const top = index * rowHeight;
+    const bottom = top + rowHeight;
+    if (top < scrollTop)
+        return top;
+    if (bottom > scrollTop + viewportHeight)
+        return bottom - viewportHeight;
+    return scrollTop;
+}

package/package.json

@@ -1,85 +1,85 @@
-{
-  "name": "@svgrid/grid",
-  "version": "1.2.33",
-  "description": "SvGrid - a headless-first, Svelte 5-native data grid engine and render component.",
-  "author": "jQWidgets <boikom@jqwidgets.com>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/sv-grid/sv-grid.git",
-    "directory": "packages/grid"
-  },
-  "homepage": "https://svgrid.com",
-  "keywords": [
-    "svelte",
-    "grid",
-    "table",
-    "headless",
-    "datagrid"
-  ],
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "module": "dist/index.js",
-  "svelte": "./dist/index.js",
-  "unpkg": "./dist/cdn/svgrid.js",
-  "jsdelivr": "./dist/cdn/svgrid.js",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "import": "./dist/index.js"
-    },
-    "./cdn": {
-      "import": "./dist/cdn/svgrid.js",
-      "default": "./dist/cdn/svgrid.js"
-    },
-    "./cdn/svelte-external": {
-      "import": "./dist/cdn/svgrid.svelte-external.js",
-      "default": "./dist/cdn/svgrid.svelte-external.js"
-    },
-    "./static-functions": {
-      "types": "./dist/static-functions.d.ts",
-      "svelte": "./dist/static-functions.js",
-      "import": "./dist/static-functions.js"
-    },
-    "./format": {
-      "types": "./dist/export-format.d.ts",
-      "svelte": "./dist/export-format.js",
-      "import": "./dist/export-format.js"
-    },
-    "./flex-render": {
-      "types": "./dist/flex-render.d.ts",
-      "svelte": "./dist/flex-render.js",
-      "import": "./dist/flex-render.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "engines": {
-    "node": ">=16"
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "clean": "rimraf ./build && rimraf ./dist",
-    "test:eslint": "eslint ./src",
-    "test:types": "svelte-check --tsconfig ./tsconfig.json",
-    "test:lib": "vitest run --coverage",
-    "test:build": "publint --strict",
-    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ./scripts/build-cdn.mjs"
-  },
-  "devDependencies": {
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@vitest/coverage-v8": "^4.1.5",
-    "eslint-plugin-svelte": "^3.17.1",
-    "jsdom": "^29.1.1",
-    "publint": "^0.3.21",
-    "svelte": "^5.55.5",
-    "svelte-check": "^4.4.6"
-  },
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  }
-}
+{
+  "name": "@svgrid/grid",
+  "version": "2.0.0",
+  "description": "SvGrid - a headless-first, Svelte 5-native data grid engine and render component.",
+  "author": "jQWidgets <boikom@jqwidgets.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sv-grid/sv-grid.git",
+    "directory": "packages/grid"
+  },
+  "homepage": "https://svgrid.com",
+  "keywords": [
+    "svelte",
+    "grid",
+    "table",
+    "headless",
+    "datagrid"
+  ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "svelte": "./dist/index.js",
+  "unpkg": "./dist/cdn/svgrid.js",
+  "jsdelivr": "./dist/cdn/svgrid.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./cdn": {
+      "import": "./dist/cdn/svgrid.js",
+      "default": "./dist/cdn/svgrid.js"
+    },
+    "./cdn/svelte-external": {
+      "import": "./dist/cdn/svgrid.svelte-external.js",
+      "default": "./dist/cdn/svgrid.svelte-external.js"
+    },
+    "./static-functions": {
+      "types": "./dist/static-functions.d.ts",
+      "svelte": "./dist/static-functions.js",
+      "import": "./dist/static-functions.js"
+    },
+    "./format": {
+      "types": "./dist/export-format.d.ts",
+      "svelte": "./dist/export-format.js",
+      "import": "./dist/export-format.js"
+    },
+    "./flex-render": {
+      "types": "./dist/flex-render.d.ts",
+      "svelte": "./dist/flex-render.js",
+      "import": "./dist/flex-render.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./dist",
+    "test:eslint": "eslint ./src",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test:lib": "vitest run --coverage",
+    "test:build": "publint --strict",
+    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ./scripts/build-cdn.mjs"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@vitest/coverage-v8": "^4.1.5",
+    "eslint-plugin-svelte": "^3.17.1",
+    "jsdom": "^29.1.1",
+    "publint": "^0.3.21",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.6"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}

package/src/FlexRender.svelte

@@ -1,96 +1,96 @@
-<script
-  lang="ts"
-  generics="TData extends RowData"
->
-  import { isFunction } from './core'
-  import {
-    RenderComponentConfig,
-    RenderSnippetConfig,
-  } from './render-component'
-  import type {
-    Cell,
-    CellContext,
-    ColumnDefTemplate,
-    Header,
-    HeaderContext,
-    RowData,
-  } from './core'
-
-  type Props =
-    | {
-        content?: ColumnDefTemplate<
-          | HeaderContext<TData>
-          | CellContext<TData>
-        >
-        context:
-          | HeaderContext<TData>
-          | CellContext<TData>
-        cell?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        cell: Cell<TData>
-        content?: never
-        context?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        header: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        footer?: never
-      }
-    | {
-        footer: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        header?: never
-      }
-
-  let props: Props = $props()
-
-  const resolved = $derived.by(() => {
-    if ('cell' in props && props.cell) {
-      return {
-        content: props.cell.column.columnDef.cell,
-        context: props.cell.getContext(),
-      }
-    }
-    if ('header' in props && props.header) {
-      return {
-        content: props.header.column.columnDef.header,
-        context: props.header.getContext(),
-      }
-    }
-    if ('footer' in props && props.footer) {
-      return {
-        content: props.footer.column.columnDef.footer,
-        context: props.footer.getContext(),
-      }
-    }
-    return {
-      content: props.content,
-      context: props.context,
-    }
-  })
-
-  const result = $derived(
-    isFunction(resolved.content)
-      ? resolved.content(resolved.context as any)
-      : undefined,
-  )
-</script>
-
-{#if typeof resolved.content === 'string'}
-  {resolved.content}
-{:else if result instanceof RenderComponentConfig}
-  <result.component {...result.props} />
-{:else if result instanceof RenderSnippetConfig}
-  {@render result.snippet(result.params)}
-{:else if result !== undefined}
-  {result}
-{/if}
+<script
+  lang="ts"
+  generics="TData extends RowData"
+>
+  import { isFunction } from './core'
+  import {
+    RenderComponentConfig,
+    RenderSnippetConfig,
+  } from './render-component'
+  import type {
+    Cell,
+    CellContext,
+    ColumnDefTemplate,
+    Header,
+    HeaderContext,
+    RowData,
+  } from './core'
+
+  type Props =
+    | {
+        content?: ColumnDefTemplate<
+          | HeaderContext<TData>
+          | CellContext<TData>
+        >
+        context:
+          | HeaderContext<TData>
+          | CellContext<TData>
+        cell?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        cell: Cell<TData>
+        content?: never
+        context?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        header: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        footer?: never
+      }
+    | {
+        footer: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        header?: never
+      }
+
+  let props: Props = $props()
+
+  const resolved = $derived.by(() => {
+    if ('cell' in props && props.cell) {
+      return {
+        content: props.cell.column.columnDef.cell,
+        context: props.cell.getContext(),
+      }
+    }
+    if ('header' in props && props.header) {
+      return {
+        content: props.header.column.columnDef.header,
+        context: props.header.getContext(),
+      }
+    }
+    if ('footer' in props && props.footer) {
+      return {
+        content: props.footer.column.columnDef.footer,
+        context: props.footer.getContext(),
+      }
+    }
+    return {
+      content: props.content,
+      context: props.context,
+    }
+  })
+
+  const result = $derived(
+    isFunction(resolved.content)
+      ? resolved.content(resolved.context as any)
+      : undefined,
+  )
+</script>
+
+{#if typeof resolved.content === 'string'}
+  {resolved.content}
+{:else if result instanceof RenderComponentConfig}
+  <result.component {...result.props} />
+{:else if result instanceof RenderSnippetConfig}
+  {@render result.snippet(result.params)}
+{:else if result !== undefined}
+  {result}
+{/if}