@svgrid/enterprise 2.0.3 → 2.2.0

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@svgrid/enterprise",
-  "version": "2.0.3",
+  "funding": {
+    "type": "commercial",
+    "url": "https://svgrid.com/pricing"
+  },
+  "version": "2.2.0",
   "description": "Pro feature pack for sv-grid: data export (Excel, PDF, CSV, TSV, HTML), import (xlsx, CSV, TSV, JSON), pivot table + designer, AI assistant (BYO model), and printing. Requires a paid license key.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "jQWidgets <sales@jqwidgets.com>",
@@ -53,7 +57,8 @@
   "jsdelivr": "./dist/cdn/svgrid-enterprise.svelte-external.js",
   "files": [
     "src",
-    "dist",
+    "dist/node",
+    "dist/cdn",
     "README.md",
     "LICENSE"
   ],
@@ -64,7 +69,7 @@
     "svelte": "^5.0.0",
     "jszip": "^3.10.0",
     "pdfmake": "^0.2.0",
-    "@svgrid/grid": "^2.1.0"
+    "@svgrid/grid": "^2.2.0"
   },
   "peerDependenciesMeta": {
     "jszip": {
@@ -81,7 +86,7 @@
     "svelte": "^5.55.5",
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "@svgrid/grid": "^2.1.0"
+    "@svgrid/grid": "^2.2.0"
   },
   "scripts": {
     "test": "vitest run",

package/src/SvGridMasterDetail.svelte

@@ -37,6 +37,13 @@
     /** When set, a parent row click calls this (with the row id) to drill into a
      *  detail page, instead of expanding the inline child grid. */
     onParentClick?: (id: string) => void
+    /** Stretch columns to fill the width, like a standard grid. Default `true` so the
+     *  master + detail cells match a plain `<SvGrid>` instead of using natural widths. */
+    fitColumns?: boolean
+    /** Row height (px) - keep in sync with your other grids. Defaults to the grid's own 30. */
+    rowHeight?: number
+    /** Zebra-stripe the rows (match a striped grid). */
+    zebraRows?: boolean
   }
 
   let {
@@ -47,6 +54,9 @@
     containerHeight = 320,
     detailHeight = 200,
     onParentClick,
+    fitColumns = true,
+    rowHeight,
+    zebraRows = false,
   }: Props = $props()
 
   const parentIdOf = (p: TParent) => String(p[resolveIdField(schema)])
@@ -70,6 +80,9 @@
   data={displayRows}
   {columns}
   {containerHeight}
+  {fitColumns}
+  {rowHeight}
+  {zebraRows}
   virtualization={false}
   isDetailRow={(row) => isDetailRow(row)}
   onRowClick={(e) => handleRowClick(e.row)}
@@ -77,19 +90,27 @@
   {#snippet renderDetailRow({ row })}
     {@const parent = (row as unknown as DetailRow<TParent>).parent}
     <div class="sv-md-detail">
-      <SvGrid data={getChildren(parent)} columns={detailColumns} containerHeight={detailHeight} />
+      <SvGrid data={getChildren(parent)} columns={detailColumns} containerHeight={detailHeight} {fitColumns} {rowHeight} {zebraRows} />
     </div>
   {/snippet}
 </SvGrid>
 
 <style>
-  .sv-md-detail {
-    padding: 10px 12px;
+  /* `:global` because this div lives in the `renderDetailRow` snippet, which SvGrid
+     renders inside ITS OWN tree - a scoped rule can get pruned / not match there, which
+     left the detail region with no padding / background. Global keeps it reliable. */
+  :global(.sv-md-detail) {
+    /* Sit the detail as a separated, inset card below its master row - the margin
+       spaces it off the surrounding master rows; the radius + border read as a nested block. */
+    margin: 10px 12px;
+    padding: 12px 14px;
     /* Fall back to the themed header surface (not a fixed light grey) so the
        detail region tracks light/dark - `--sg-bg-subtle` is unset by default,
        which used to leave this white on every dark theme. */
     background: var(--sg-bg-subtle, var(--sg-header-bg, #f8fafc));
     color: var(--sg-fg, inherit);
+    border: 1px solid var(--sg-border, #e2e8f0);
     border-left: 3px solid var(--sg-accent, #2563eb);
+    border-radius: 8px;
   }
 </style>