@svgrid/grid 3.0.0 → 3.0.2

package/src/GridFooter.svelte

@@ -1,181 +1,190 @@
-<script lang="ts" generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData">
-  import {
-      type RowData,
-      type TableFeatures,
-    } from "./index";
-  import "./sv-grid-scrollbar";
-  import {
-      fmtStat,
-    } from "./SvGrid.helpers";
-  import type { SvGridController } from "./SvGrid.controller.svelte";
-
-  let {
-    ctrl,
-    pager = true,
-    showStatus = true,
-    top = false,
-    pageSizeOptions,
-  }: {
-    ctrl: SvGridController<TFeatures, TData>;
-    /** Render the pagination controls in this instance. */
-    pager?: boolean;
-    /** Render the status bar in this instance. */
-    showStatus?: boolean;
-    /** This is a top-positioned footer (styling only). */
-    top?: boolean;
-    /** Page-size choices for the selector. Defaults to `[10, 25, 50, 100]`. */
-    pageSizeOptions?: number[];
-  } = $props();
-
-  // SvGridDropdown is ~22 KB and exists here only to pick one of four numbers.
-  // Importing it statically also dragged it into the base bundle and silently
-  // defeated the lazy `import()` in SvGrid.svelte, which loads the same
-  // component as a cell editor. So the closed trigger below is plain markup
-  // reusing the dropdown's own classes (identical appearance), and the real
-  // component is fetched on first open. Keep this lazy: a static import here
-  // re-breaks the cell-editor split too, not just the footer.
-  let PageSizeDropdown = $state<typeof import("./SvGridDropdown.svelte").default | null>(null);
-  let loadingPageSize = $state(false);
-
-  async function openPageSize() {
-    if (PageSizeDropdown || loadingPageSize) return;
-    loadingPageSize = true;
-    try {
-      PageSizeDropdown = (await import("./SvGridDropdown.svelte")).default;
-    } finally {
-      loadingPageSize = false;
-    }
-  }
-
-  // View facade: re-bind the controller's reactive members so the markup
-  // (moved verbatim from SvGrid.svelte) stays identical.
-  const paginationEnabled = $derived(ctrl.paginationEnabled);
-  const statusBarEnabled = $derived(ctrl.statusBarEnabled);
-  const statusBarAggregates = $derived(ctrl.statusBarAggregates);
-  const statusBarStats = $derived(ctrl.statusBarStats);
-  const changePage = $derived(ctrl.changePage);
-  const goToPage = $derived(ctrl.goToPage);
-  const setPageSize = $derived(ctrl.setPageSize);
-  const messages = $derived(ctrl.messages);
-</script>
-
-    {#if showStatus && statusBarEnabled && statusBarStats}
-      {@const s = statusBarStats}
-      <div class="sv-grid-status-bar" role="status" aria-live="polite">
-        {#each statusBarAggregates as agg (agg)}
-          {#if agg === "count"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">{messages.statCount}</span>{fmtStat(s.count)}</span
-            >
-          {:else if agg === "numericCount"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">Numeric</span>{fmtStat(s.numericCount)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "sum"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">{messages.statSum}</span>{fmtStat(s.sum)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "avg"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">{messages.statAvg}</span>{fmtStat(s.avg)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "min"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">{messages.statMin}</span>{fmtStat(s.min)}</span
-            >
-          {:else if s.numericCount > 0 && agg === "max"}
-            <span class="sv-grid-status-item"
-              ><span class="sv-grid-status-label">{messages.statMax}</span>{fmtStat(s.max)}</span
-            >
-          {/if}
-        {/each}
-      </div>
-    {/if}
-
-    {#if pager && paginationEnabled}
-      {@const totalRows = ctrl.paginationTotalRows}
-      {@const pageSize = ctrl.paginationPageSize}
-      {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
-      {@const currentPage = Math.min(ctrl.paginationPageIndex + 1, pageCount)}
-      {@const rangeStart =
-        totalRows === 0 ? 0 : (currentPage - 1) * pageSize + 1}
-      {@const rangeEnd = Math.min(totalRows, currentPage * pageSize)}
-      {@const onFirst = currentPage <= 1}
-      {@const onLast = currentPage >= pageCount}
-      {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
-      <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
-        <div class="sv-grid-pagination-pagesize">
-          <span>{messages.pageSize}</span>
-          <div class="sv-grid-pagination-pagesize-dd">
-            {#if PageSizeDropdown}
-              <!-- autoOpen so the click that triggered the load also opens the
-                   panel, rather than making the user click a second time. -->
-              <PageSizeDropdown
-                options={sizes.map((n) => ({ value: n, label: String(n) }))}
-                value={pageSize}
-                autoOpen={true}
-                onChange={(v) => setPageSize(Number(v))}
-              />
-            {:else}
-              <!-- Mirrors SvGridDropdown's closed trigger (same classes, same
-                   ARIA). Its box styling comes from the global
-                   .sv-grid-pagination-pagesize-dd rules in SvGrid.css, NOT from
-                   SvGridDropdown's scoped styles (those only exist once the chunk
-                   loads) - so keep the two in step or the placeholder renders as
-                   a stock <button> until the first click. -->
-              <div class="sv-grid-dropdown">
-                <button
-                  type="button"
-                  class="sv-grid-dropdown-trigger"
-                  aria-haspopup="listbox"
-                  aria-expanded="false"
-                  onclick={openPageSize}
-                >
-                  <span class="sv-grid-dropdown-label">{pageSize}</span>
-                  <span class="sv-grid-dropdown-caret" aria-hidden="true">▾</span>
-                </button>
-              </div>
-            {/if}
-          </div>
-        </div>
-        <span class="sv-grid-pagination-range">
-          <strong>{rangeStart.toLocaleString()}</strong> to
-          <strong>{rangeEnd.toLocaleString()}</strong> of
-          <strong>{totalRows.toLocaleString()}</strong>
-        </span>
-        <div class="sv-grid-pagination-nav">
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onFirst}
-            onclick={() => goToPage(0)}
-            aria-label={messages.firstPage}>⇤</button
-          >
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onFirst}
-            onclick={() => changePage(-1)}
-            aria-label={messages.prevPage}>‹</button
-          >
-          <span class="sv-grid-pagination-label">
-            {messages.page} <strong>{currentPage.toLocaleString()}</strong> {messages.of}
-            <strong>{pageCount.toLocaleString()}</strong>
-          </span>
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onLast}
-            onclick={() => changePage(1)}
-            aria-label={messages.nextPage}>›</button
-          >
-          <button
-            type="button"
-            class="sv-grid-pagination-btn"
-            disabled={onLast}
-            onclick={() => goToPage(pageCount - 1)}
-            aria-label={messages.lastPage}>⇥</button
-          >
-        </div>
-      </div>
-    {/if}
+<script lang="ts" generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData">
+  import {
+      type RowData,
+      type TableFeatures,
+    } from "./index";
+  import "./sv-grid-scrollbar";
+  import {
+      fmtStat,
+    } from "./SvGrid.helpers";
+  import type { Snippet } from "svelte";
+  import type { GridIconName } from "./grid-icons";
+  import type { SvGridController } from "./SvGrid.controller.svelte";
+
+  let {
+    ctrl,
+    icon,
+    pager = true,
+    showStatus = true,
+    top = false,
+    pageSizeOptions,
+  }: {
+    ctrl: SvGridController<TFeatures, TData>;
+    /**
+     * The grid's icon resolver, so the pager arrows honour the `icons` prop.
+     * Required rather than optional: SvGrid is the only thing that mounts this
+     * component, so a missing icon would be a bug, not a supported call.
+     */
+    icon: Snippet<[GridIconName]>;
+    /** Render the pagination controls in this instance. */
+    pager?: boolean;
+    /** Render the status bar in this instance. */
+    showStatus?: boolean;
+    /** This is a top-positioned footer (styling only). */
+    top?: boolean;
+    /** Page-size choices for the selector. Defaults to `[10, 25, 50, 100]`. */
+    pageSizeOptions?: number[];
+  } = $props();
+
+  // SvGridDropdown is ~22 KB and exists here only to pick one of four numbers.
+  // Importing it statically also dragged it into the base bundle and silently
+  // defeated the lazy `import()` in SvGrid.svelte, which loads the same
+  // component as a cell editor. So the closed trigger below is plain markup
+  // reusing the dropdown's own classes (identical appearance), and the real
+  // component is fetched on first open. Keep this lazy: a static import here
+  // re-breaks the cell-editor split too, not just the footer.
+  let PageSizeDropdown = $state<typeof import("./SvGridDropdown.svelte").default | null>(null);
+  let loadingPageSize = $state(false);
+
+  async function openPageSize() {
+    if (PageSizeDropdown || loadingPageSize) return;
+    loadingPageSize = true;
+    try {
+      PageSizeDropdown = (await import("./SvGridDropdown.svelte")).default;
+    } finally {
+      loadingPageSize = false;
+    }
+  }
+
+  // View facade: re-bind the controller's reactive members so the markup
+  // (moved verbatim from SvGrid.svelte) stays identical.
+  const paginationEnabled = $derived(ctrl.paginationEnabled);
+  const statusBarEnabled = $derived(ctrl.statusBarEnabled);
+  const statusBarAggregates = $derived(ctrl.statusBarAggregates);
+  const statusBarStats = $derived(ctrl.statusBarStats);
+  const changePage = $derived(ctrl.changePage);
+  const goToPage = $derived(ctrl.goToPage);
+  const setPageSize = $derived(ctrl.setPageSize);
+  const messages = $derived(ctrl.messages);
+</script>
+
+    {#if showStatus && statusBarEnabled && statusBarStats}
+      {@const s = statusBarStats}
+      <div class="sv-grid-status-bar" role="status" aria-live="polite">
+        {#each statusBarAggregates as agg (agg)}
+          {#if agg === "count"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">{messages.statCount}</span>{fmtStat(s.count)}</span
+            >
+          {:else if agg === "numericCount"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">Numeric</span>{fmtStat(s.numericCount)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "sum"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">{messages.statSum}</span>{fmtStat(s.sum)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "avg"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">{messages.statAvg}</span>{fmtStat(s.avg)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "min"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">{messages.statMin}</span>{fmtStat(s.min)}</span
+            >
+          {:else if s.numericCount > 0 && agg === "max"}
+            <span class="sv-grid-status-item"
+              ><span class="sv-grid-status-label">{messages.statMax}</span>{fmtStat(s.max)}</span
+            >
+          {/if}
+        {/each}
+      </div>
+    {/if}
+
+    {#if pager && paginationEnabled}
+      {@const totalRows = ctrl.paginationTotalRows}
+      {@const pageSize = ctrl.paginationPageSize}
+      {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
+      {@const currentPage = Math.min(ctrl.paginationPageIndex + 1, pageCount)}
+      {@const rangeStart =
+        totalRows === 0 ? 0 : (currentPage - 1) * pageSize + 1}
+      {@const rangeEnd = Math.min(totalRows, currentPage * pageSize)}
+      {@const onFirst = currentPage <= 1}
+      {@const onLast = currentPage >= pageCount}
+      {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
+      <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
+        <div class="sv-grid-pagination-pagesize">
+          <span>{messages.pageSize}</span>
+          <div class="sv-grid-pagination-pagesize-dd">
+            {#if PageSizeDropdown}
+              <!-- autoOpen so the click that triggered the load also opens the
+                   panel, rather than making the user click a second time. -->
+              <PageSizeDropdown
+                options={sizes.map((n) => ({ value: n, label: String(n) }))}
+                value={pageSize}
+                autoOpen={true}
+                onChange={(v) => setPageSize(Number(v))}
+              />
+            {:else}
+              <!-- Mirrors SvGridDropdown's closed trigger (same classes, same
+                   ARIA). Its box styling comes from the global
+                   .sv-grid-pagination-pagesize-dd rules in SvGrid.css, NOT from
+                   SvGridDropdown's scoped styles (those only exist once the chunk
+                   loads) - so keep the two in step or the placeholder renders as
+                   a stock <button> until the first click. -->
+              <div class="sv-grid-dropdown">
+                <button
+                  type="button"
+                  class="sv-grid-dropdown-trigger"
+                  aria-haspopup="listbox"
+                  aria-expanded="false"
+                  onclick={openPageSize}
+                >
+                  <span class="sv-grid-dropdown-label">{pageSize}</span>
+                  <span class="sv-grid-dropdown-caret" aria-hidden="true">{@render icon("page-size-caret")}</span>
+                </button>
+              </div>
+            {/if}
+          </div>
+        </div>
+        <span class="sv-grid-pagination-range">
+          <strong>{rangeStart.toLocaleString()}</strong> to
+          <strong>{rangeEnd.toLocaleString()}</strong> of
+          <strong>{totalRows.toLocaleString()}</strong>
+        </span>
+        <div class="sv-grid-pagination-nav">
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onFirst}
+            onclick={() => goToPage(0)}
+            aria-label={messages.firstPage}>{@render icon("page-first")}</button
+          >
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onFirst}
+            onclick={() => changePage(-1)}
+            aria-label={messages.prevPage}>{@render icon("page-prev")}</button
+          >
+          <span class="sv-grid-pagination-label">
+            {messages.page} <strong>{currentPage.toLocaleString()}</strong> {messages.of}
+            <strong>{pageCount.toLocaleString()}</strong>
+          </span>
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onLast}
+            onclick={() => changePage(1)}
+            aria-label={messages.nextPage}>{@render icon("page-next")}</button
+          >
+          <button
+            type="button"
+            class="sv-grid-pagination-btn"
+            disabled={onLast}
+            onclick={() => goToPage(pageCount - 1)}
+            aria-label={messages.lastPage}>{@render icon("page-last")}</button
+          >
+        </div>
+      </div>
+    {/if}

package/src/GridMenus.svelte

@@ -10,6 +10,7 @@
   import "./sv-grid-scrollbar";
   import { onScrollOutside } from "./a11y/dismissable";
   import type { Snippet } from "svelte";
+  import type { GridIconName } from "./grid-icons";
   import SvListBox from "./SvListBox.svelte";
   import type {
     FilterOperator,
@@ -23,7 +24,7 @@
 
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
-  let { ctrl, icon }: { ctrl: SvGridController<TFeatures, TData>; icon: Snippet<[string]> } = $props();
+  let { ctrl, icon }: { ctrl: SvGridController<TFeatures, TData>; icon: Snippet<[GridIconName]> } = $props();
 
   // View facade: re-bind the controller's reactive members so the markup
   // (moved verbatim from SvGrid.svelte) stays identical.
@@ -403,7 +404,7 @@
               onclick={() => patchFilter(colId, { join: "OR" })}>OR</button>
             <button type="button" class="sv-grid-menu-join-x" title="Remove second condition"
               aria-label="Remove second condition"
-              onclick={() => patchFilter(colId, { operator2: undefined, value2: undefined, valueTo2: undefined, join: undefined })}>×</button>
+              onclick={() => patchFilter(colId, { operator2: undefined, value2: undefined, valueTo2: undefined, join: undefined })}>{@render icon("remove")}</button>
           </div>
           <select
             class="sv-grid-menu-operator-select"
@@ -452,11 +453,18 @@
           <span class="sv-grid-menu-head-note">{pickedCount} of {totalCount}</span>
         {/if}
       </div>
-      <input
-        class="sv-grid-menu-search"
-        placeholder="Search values..."
-        bind:value={ctrl.columnMenuSearch}
-      />
+      <!-- The magnifier used to be a background-image data URI in SvGrid.css
+           with a hard-coded stroke colour, so it ignored every theme and could
+           not be overridden. It is markup now, and the input keeps its own
+           class: focusFilterPanel() and a test both resolve `.sv-grid-menu-search`. -->
+      <span class="sv-grid-menu-search-wrap">
+        {@render icon("search")}
+        <input
+          class="sv-grid-menu-search"
+          placeholder="Search values..."
+          bind:value={ctrl.columnMenuSearch}
+        />
+      </span>
       <label class="sv-grid-facet sv-grid-facet-all">
         <input type="checkbox" checked={isAllFacetsChecked(colId)} onchange={() => toggleAllFacets(colId)} />
         <!-- Says what it will actually do: with a query typed it acts on the
@@ -593,7 +601,7 @@
           onclick={() => pinColumnLeft(menuColumnId)}
         >
           <span class="sv-grid-header-icon"
-            >{@render icon("op-startsWith")}</span
+            >{@render icon("pin-left")}</span
           > Pin to left
         </button>
         <button
@@ -604,7 +612,7 @@
           onclick={() => pinColumnRight(menuColumnId)}
         >
           <span class="sv-grid-header-icon"
-            >{@render icon("op-greaterThan")}</span
+            >{@render icon("pin-right")}</span
           > Pin to right
         </button>
         <button
@@ -614,7 +622,7 @@
           disabled={!menuPinSide}
           onclick={() => unpinColumn(menuColumnId)}
         >
-          <span class="sv-grid-header-icon">{@render icon("x")}</span> Unpin column
+          <span class="sv-grid-header-icon">{@render icon("unpin")}</span> Unpin column
         </button>
       {/if}
       <div class="sv-grid-menu-sep"></div>