@ibobbyts/svelte-ui-utils 0.3.9 → 0.4.1

package/README.md

@@ -393,6 +393,18 @@ use `menuAlign="right"` to align their right edges instead. `fitContent` sizes
 the menu to its longest option while keeping the selected edge aligned.
 `DataTable` uses this same component for its page-size picker.
 
+For keyboard typeahead, an option may provide `searchText` separately from its
+display `label`. Typeahead matches the beginning of `searchText` or `label`,
+while the label remains the only text shown in the trigger and menu:
+
+```svelte
+<Dropdown
+  value="cn"
+  options={[{ label: '中国', searchText: 'China', value: 'cn' }]}
+  ariaLabel="Country"
+/>
+```
+
 Set `multiselect={true}` to control the component with a `DropdownValue[]`.
 Each option then shows a checkbox, selecting or deselecting an option keeps the
 menu open, and `onChange` receives the complete selected-value array in option
@@ -507,7 +519,16 @@ can stop event propagation without preventing the dropdown from opening.
 
 ```svelte
 <script lang="ts">
-  import { DataTable } from '@ibobbyts/svelte-ui-utils/table';
+  import {
+    DataTable,
+    type PaginationState,
+    type SortState
+  } from '@ibobbyts/svelte-ui-utils/table';
+
+  type UserRow = {
+    name: string;
+    createdAt: string;
+  };
 
   const columns = [
     { key: 'name', header: 'Name', sortable: true },
@@ -522,9 +543,27 @@ can stop event propagation without preventing the dropdown from opening.
     }
   ];
 
-  let sort = null;
-  let page = 1;
-  let pageSize = 20;
+  let rows: UserRow[] = [];
+  let totalRows = 0;
+  let searchTerm = '';
+  let sort: SortState | null = null;
+
+  async function loadRows({ page, pageSize }: PaginationState) {
+    const params = new URLSearchParams({
+      page: String(page),
+      pageSize: String(pageSize),
+      search: searchTerm
+    });
+    const response = await fetch(`/api/users?${params}`);
+
+    if (!response.ok) {
+      throw new Error('Failed to load users');
+    }
+
+    const result = (await response.json()) as { rows: UserRow[]; totalRows: number };
+    rows = result.rows;
+    totalRows = result.totalRows;
+  }
 </script>
 
 <DataTable
@@ -532,27 +571,44 @@ can stop event propagation without preventing the dropdown from opening.
   rows={rows}
   {columns}
   {sort}
-  {page}
-  {pageSize}
-  totalRows={totalRows}
+  pagination={{
+    tableId: 'admin-users',
+    totalRows,
+    defaultPageSize: 20,
+    pageSizeOptions: [10, 20, 50, 100],
+    persistPageSize: true,
+    queryKey: searchTerm,
+    onRequest: loadRows
+  }}
   tableLayout="auto"
   stickyHeader={true}
   onSortChange={(next) => {
     sort = next;
-    page = 1;
-  }}
-  onPaginationChange={(next) => {
-    page = next.page;
-    pageSize = next.pageSize;
   }}
 />
 ```
 
+`DataTable` only supports server pagination. Pass the current page rows in
+`rows`, the server count in `pagination.totalRows`, and load each requested page
+through `pagination.onRequest`. The component owns page and page-size state,
+resets to page `1` when the primitive `queryKey` changes, disables both
+pagination bars while a request is pending, and rolls back its controls if that
+request rejects. The callback remains responsible for presenting request errors.
+
+Set `persistPageSize: true` and provide a stable, non-empty `tableId` to retain
+the selected page size in browser `localStorage`. The generated key is
+`svelte-ui-utils:data-table:<tableId>:page-size`; callers do not construct it.
+Stored values are accepted only when present in the normalized
+`pageSizeOptions`. Storage failures are ignored. Options default to
+`[10, 20, 50, 100]`, and `defaultPageSize` falls back to the first unique
+positive integer option when omitted or invalid.
+
 `DataTable` renders page-number pagination above and below the data table by
 default, including a page-size selector. Use `language` for package-owned
 defaults such as empty state, pagination label, and page-size label; use
-`pageSizeLabel` or `emptyText` when a specific app needs to override them.
-Use `showPagination={false}` for static tables. Use `showHeader={false}` for
+`pagination.pageSizeLabel` or `emptyText` when a specific app needs to override
+them.
+Pass `pagination={false}` for static tables. Use `showHeader={false}` for
 tables that should render body rows without a header section. Sortable headers
 preserve the current window scroll position by default and wait for an async
 `onSortChange` before restoring scroll position.
@@ -590,9 +646,10 @@ pagination outside `DataTable`:
 />
 ```
 
-Render two synchronized pagination bars by passing both instances the same
-controlled `pagination` value and the same `onPaginationChange` handler. This
-is the same contract `DataTable` uses for its top and bottom pagination.
+Render two synchronized standalone pagination bars by passing both instances
+the same controlled `pagination` value and the same `onPaginationChange`
+handler. Standalone `Pagination` remains controlled; `DataTable` owns its own
+server-pagination state.
 
 `FilterTable` is filter-only. It accepts `rows`, where each row has a `title`
 for the left column and a controlled filter created with the `filter` helper:
@@ -676,16 +733,17 @@ toast close labels, dropdown loading/empty/clear labels, table empty and
 pagination labels, date range labels and presets, and number range labels.
 Business labels such as column headers, filter row titles, button labels, and
 placeholders should still be passed by the consuming app. Explicit props such
-as `closeLabel`, `clearLabel`, `noResultsText`, `emptyText`, `pageSizeLabel`,
-`startLabel`, and `minLabel` always override the language defaults.
+as `closeLabel`, `clearLabel`, `noResultsText`, `emptyText`, `startLabel`, and
+`minLabel`, plus nested settings such as `pagination.pageSizeLabel`, always
+override the language defaults.
 
-Use `DataTable showPagination={false}` for a non-paginated data table:
+Pass `pagination={false}` for a non-paginated data table:
 
 ```svelte
 <DataTable
   rows={rows}
   {columns}
-  showPagination={false}
+  pagination={false}
   rowKey="id"
   tableLayout="fixed"
   stickyHeader={true}
@@ -736,6 +794,27 @@ inside a theme root:
 }
 ```
 
+### Corner-radius tokens
+
+All non-zero component corner radii come from the token definitions in
+`src/lib/style.css`. Reuse an existing token before adding another radius; when
+a confirmed design requirement needs a new size, define it in that token block
+first and reference it from components.
+
+| Token | Default | Intended use |
+| --- | ---: | --- |
+| `--suu-radius-xs` | `4px` | compact checks and small indicators |
+| `--suu-radius-sm` | `6px` | compact controls |
+| `--suu-radius-md` | `8px` | standard controls and surfaces |
+| `--suu-radius-lg` | standard radius plus `2px` | dialogs and prominent surfaces |
+| `--suu-radius-pill` | `999px` | pills and circular controls |
+| `--suu-radius` | `--suu-radius-md` | backward-compatible standard radius override |
+| `--suu-radius-inner` | standard radius minus `1px` | inner fill inside a standard `1px` border |
+
+Use `0` directly when a component intentionally has square corners. Component
+styles must not introduce other numeric `border-radius` values or ad hoc radius
+calculations.
+
 ## Release
 
 Do not publish this package as part of consumer-app local integration work.

package/dist/data-table/DataTable.svelte

@@ -1,16 +1,18 @@
 <svelte:options runes={false} />
 
 <script lang="ts">
+  import { onMount } from 'svelte';
   import BaseDataTable from './BaseDataTable.svelte';
   import Pagination from '../pagination/Pagination.svelte';
   import { getUiMessages, type UiLanguage } from '../i18n.js';
+  import { normalizePagination } from './state.js';
   import type {
     DataTableColumn,
     DataTableLayout,
     DataTableRowAttributes,
     DataTableRowKey,
     DataTableSortChangeHandler,
-    PaginationChangeHandler,
+    DataTableServerPagination,
     PaginationState,
     SortState
   } from './types.js';
@@ -23,14 +25,8 @@
   export let sort: SortState | null = null;
   export let onSortChange: DataTableSortChangeHandler | undefined = undefined;
   export let showHeader = true;
-  export let showPagination = true;
-  export let page = 1;
-  export let pageSize = 20;
-  export let totalRows: number | undefined = undefined;
-  export let pageSizeOptions: number[] = [10, 20, 50, 100];
-  export let pageSizeLabel: string | undefined = undefined;
+  export let pagination: false | DataTableServerPagination;
   export let maxPageButtons = 15;
-  export let onPaginationChange: PaginationChangeHandler | undefined = undefined;
   export let zebra = true;
   export let hoverable = true;
   export let bordered = true;
@@ -43,30 +39,150 @@
   export let rowClass: string | ((row: unknown, index: number) => string | undefined | null) | undefined = undefined;
   export let rowAttributes: DataTableRowAttributes | undefined = undefined;
 
+  const defaultPageSizeOptions = [10, 20, 50, 100];
+  const initialPaginationConfig = pagination === false ? undefined : pagination;
+
+  let currentPagination: PaginationState = {
+    page: 1,
+    pageSize: resolveDefaultPageSize(initialPaginationConfig)
+  };
+  let requestPending = false;
+  let requestSequence = 0;
+  let mounted = false;
+  let lastQueryKey = initialPaginationConfig?.queryKey;
+
   $: messages = getUiMessages(language);
   $: resolvedEmptyText = emptyText ?? messages.table.emptyText;
-  $: resolvedPageSizeLabel = pageSizeLabel ?? messages.table.pageSizeLabel;
-  $: resolvedTotalRows = totalRows ?? rows.length;
-  $: minimumPageSizeOption = pageSizeOptions.length > 0 ? Math.min(...pageSizeOptions) : 0;
-  $: shouldShowPagination = showPagination && (minimumPageSizeOption <= 0 || resolvedTotalRows >= minimumPageSizeOption);
-  $: pagination = { page, pageSize };
-
-  function updatePagination(next: PaginationState) {
-    void onPaginationChange?.(next);
+  $: serverPagination = pagination === false ? undefined : pagination;
+  $: resolvedPageSizeOptions = normalizePageSizeOptions(serverPagination?.pageSizeOptions);
+  $: resolvedDefaultPageSize = resolveDefaultPageSize(serverPagination);
+  $: resolvedTotalRows = serverPagination?.totalRows ?? 0;
+  $: resolvedPageSizeLabel = serverPagination?.pageSizeLabel ?? messages.table.pageSizeLabel;
+  $: minimumPageSizeOption = Math.min(...resolvedPageSizeOptions);
+  $: shouldShowPagination = serverPagination !== undefined && resolvedTotalRows >= minimumPageSizeOption;
+
+  $: if (mounted && serverPagination && serverPagination.queryKey !== lastQueryKey) {
+    lastQueryKey = serverPagination.queryKey;
+    void requestPagination({ page: 1, pageSize: currentPagination.pageSize }, true);
+  }
+
+  $: if (mounted && serverPagination) {
+    const normalized = normalizePagination(currentPagination, resolvedTotalRows);
+    if (resolvedTotalRows === 0 && currentPagination.page !== 1) {
+      currentPagination = { ...currentPagination, page: 1 };
+    } else if (resolvedTotalRows > 0 && normalized.page !== currentPagination.page) {
+      void requestPagination(normalized);
+    }
+  }
+
+  $: if (mounted && serverPagination && !resolvedPageSizeOptions.includes(currentPagination.pageSize)) {
+    void requestPagination({ page: 1, pageSize: resolvedDefaultPageSize });
+  }
+
+  function normalizePageSizeOptions(options: number[] | undefined): number[] {
+    const normalized = [...new Set((options ?? defaultPageSizeOptions).filter((option) => Number.isInteger(option) && option > 0))];
+    return normalized.length > 0 ? normalized : [...defaultPageSizeOptions];
   }
+
+  function resolveDefaultPageSize(config: DataTableServerPagination | undefined): number {
+    const options = normalizePageSizeOptions(config?.pageSizeOptions);
+    return config?.defaultPageSize !== undefined && options.includes(config.defaultPageSize)
+      ? config.defaultPageSize
+      : (options[0] as number);
+  }
+
+  function storageKey(config: DataTableServerPagination): string | undefined {
+    const tableId = config.tableId.trim();
+    return config.persistPageSize === true && tableId.length > 0
+      ? `svelte-ui-utils:data-table:${tableId}:page-size`
+      : undefined;
+  }
+
+  function readStoredPageSize(): number | null {
+    if (!serverPagination) {
+      return null;
+    }
+    const key = storageKey(serverPagination);
+    if (!key) {
+      return null;
+    }
+    try {
+      const storedValue = window.localStorage.getItem(key);
+      if (storedValue === null) {
+        return null;
+      }
+      const storedPageSize = Number(storedValue);
+      return resolvedPageSizeOptions.includes(storedPageSize) ? storedPageSize : null;
+    } catch {
+      return null;
+    }
+  }
+
+  function storePageSize(config: DataTableServerPagination, nextPageSize: number) {
+    const key = storageKey(config);
+    if (!key || !normalizePageSizeOptions(config.pageSizeOptions).includes(nextPageSize)) {
+      return;
+    }
+    try {
+      window.localStorage.setItem(key, String(nextPageSize));
+    } catch {
+      // localStorage 可能因浏览器隐私策略或存储空间限制而不可用。
+    }
+  }
+
+  async function requestPagination(next: PaginationState, force = false) {
+    const config = serverPagination;
+    if (!config) {
+      return;
+    }
+
+    const nextPagination = normalizePagination(next, config.totalRows);
+    if (!force && nextPagination.page === currentPagination.page && nextPagination.pageSize === currentPagination.pageSize) {
+      return;
+    }
+
+    const previousPagination = currentPagination;
+    const sequence = ++requestSequence;
+    currentPagination = nextPagination;
+    requestPending = true;
+
+    try {
+      await config.onRequest(nextPagination);
+      if (sequence === requestSequence) {
+        storePageSize(config, nextPagination.pageSize);
+        requestPending = false;
+      }
+    } catch {
+      if (sequence === requestSequence) {
+        const latestTotalRows = pagination === false ? 0 : pagination.totalRows;
+        currentPagination = normalizePagination(previousPagination, latestTotalRows);
+        requestPending = false;
+      }
+    }
+  }
+
+  onMount(() => {
+    mounted = true;
+    lastQueryKey = pagination === false ? undefined : pagination.queryKey;
+    const storedPageSize = readStoredPageSize();
+    if (storedPageSize !== null && storedPageSize !== currentPagination.pageSize) {
+      void requestPagination({ page: 1, pageSize: storedPageSize });
+    }
+  });
 </script>
 
 <div class="suu-data-table">
   {#if shouldShowPagination}
     <Pagination
-      {pagination}
+      pagination={currentPagination}
       {language}
       totalRows={resolvedTotalRows}
-      {pageSizeOptions}
+      pageSizeOptions={resolvedPageSizeOptions}
       pageSizeLabel={resolvedPageSizeLabel}
       {maxPageButtons}
+      disabled={requestPending}
       pageSizeDropdownPlacement="down"
-      onPaginationChange={updatePagination}
+      onPaginationChange={requestPagination}
     />
   {/if}
 
@@ -97,14 +213,15 @@
 
   {#if shouldShowPagination}
     <Pagination
-      {pagination}
+      pagination={currentPagination}
       {language}
       totalRows={resolvedTotalRows}
-      {pageSizeOptions}
+      pageSizeOptions={resolvedPageSizeOptions}
       pageSizeLabel={resolvedPageSizeLabel}
       {maxPageButtons}
+      disabled={requestPending}
       pageSizeDropdownPlacement="up"
-      onPaginationChange={updatePagination}
+      onPaginationChange={requestPagination}
     />
   {/if}
 </div>

package/dist/data-table/DataTable.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type UiLanguage } from '../i18n.js';
-import type { DataTableColumn, DataTableLayout, DataTableRowAttributes, DataTableRowKey, DataTableSortChangeHandler, PaginationChangeHandler, SortState } from './types.js';
+import type { DataTableColumn, DataTableLayout, DataTableRowAttributes, DataTableRowKey, DataTableSortChangeHandler, DataTableServerPagination, SortState } from './types.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -22,14 +22,8 @@ declare const DataTable: $$__sveltets_2_IsomorphicComponent<{
     sort?: SortState | null;
     onSortChange?: DataTableSortChangeHandler | undefined;
     showHeader?: boolean;
-    showPagination?: boolean;
-    page?: number;
-    pageSize?: number;
-    totalRows?: number | undefined;
-    pageSizeOptions?: number[];
-    pageSizeLabel?: string | undefined;
+    pagination: false | DataTableServerPagination;
     maxPageButtons?: number;
-    onPaginationChange?: PaginationChangeHandler | undefined;
     zebra?: boolean;
     hoverable?: boolean;
     bordered?: boolean;

package/dist/data-table/DataTable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/DataTable.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EACR,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,uBAAuB,EAEvB,SAAS,EACV,MAAM,YAAY,CAAC;AAoEtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,SAAS;WAf2tB,OAAO,EAAE;cAAY,eAAe,EAAE;aAAW,eAAe,GAAG,SAAS;eAAa,UAAU;gBAAc,MAAM,GAAG,SAAS;WAAS,SAAS,GAAG,IAAI;mBAAiB,0BAA0B,GAAG,SAAS;;;;;gBAAsI,MAAM,GAAG,SAAS;sBAAoB,MAAM,EAAE;oBAAkB,MAAM,GAAG,SAAS;;yBAA+D,uBAAuB,GAAG,SAAS;;;;;kBAAgJ,eAAe;;sBAAwD,MAAM,GAAG,SAAS;yBAAuB,MAAM,GAAG,SAAS;;eAAiE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,SAAS;oBAAkB,sBAAsB,GAAG,SAAS;;;;;;;;;;;;;;;cAe3mD,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/DataTable.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,KAAK,EACR,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,yBAAyB,EAEzB,SAAS,EACV,MAAM,YAAY,CAAC;AAuLtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,SAAS;WAf+iB,OAAO,EAAE;cAAY,eAAe,EAAE;aAAW,eAAe,GAAG,SAAS;eAAa,UAAU;gBAAc,MAAM,GAAG,SAAS;WAAS,SAAS,GAAG,IAAI;mBAAiB,0BAA0B,GAAG,SAAS;;gBAA8C,KAAK,GAAG,yBAAyB;;;;;;kBAAwL,eAAe;;sBAAwD,MAAM,GAAG,SAAS;yBAAuB,MAAM,GAAG,SAAS;;eAAiE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,SAAS;oBAAkB,sBAAsB,GAAG,SAAS;;;;;;;;;;;;;;;cAe5vC,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/data-table/FilterControl.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
   import Dropdown from '../dropdown/Dropdown.svelte';
+  import DropdownMultiSelect from '../dropdown/DropdownMultiSelect.svelte';
   import DropdownSearch from '../dropdown-search/DropdownSearch.svelte';
   import type { UiLanguage } from '../i18n.js';
   import DateRangeFilter from './DateRangeFilter.svelte';
@@ -41,24 +42,51 @@
   </div>
 {:else if control.type === 'checkbox'}
   <div class="suu-filter-table__options">
-    {#each control.options as option}
-      <label class="suu-filter-table__option" class:suu-filter-table__option--checked={control.value.includes(option.value)}>
-        <input
-          class="suu-filter-table__option-input"
-          type="checkbox"
-          value={option.value}
-          disabled={option.disabled}
-          checked={control.value.includes(option.value)}
-          on:change={(event) => toggleCheckbox(option.value, (event.currentTarget as HTMLInputElement).checked)}
-        />
-        <span class="suu-filter-table__option-label">{option.label}</span>
-        <span class="suu-filter-table__option-check" aria-hidden="true">
-          <svg viewBox="0 0 20 20">
-            <path d="m5 10 3 3 7-7"></path>
-          </svg>
-        </span>
-      </label>
-    {/each}
+    {#if control.optionGroups?.length}
+      {#each control.optionGroups as group, groupIndex}
+        {#each group.options as option, optionIndex}
+          <label
+            class="suu-filter-table__option"
+            class:suu-filter-table__option--checked={control.value.includes(option.value)}
+            class:suu-filter-table__option--group-end={groupIndex < control.optionGroups.length - 1 && optionIndex === group.options.length - 1}
+          >
+            <input
+              class="suu-filter-table__option-input"
+              type="checkbox"
+              value={option.value}
+              disabled={option.disabled}
+              checked={control.value.includes(option.value)}
+              on:change={(event) => toggleCheckbox(option.value, (event.currentTarget as HTMLInputElement).checked)}
+            />
+            <span class="suu-filter-table__option-label">{option.label}</span>
+            <span class="suu-filter-table__option-check" aria-hidden="true">
+              <svg viewBox="0 0 20 20">
+                <path d="m5 10 3 3 7-7"></path>
+              </svg>
+            </span>
+          </label>
+        {/each}
+      {/each}
+    {:else}
+      {#each control.options as option}
+        <label class="suu-filter-table__option" class:suu-filter-table__option--checked={control.value.includes(option.value)}>
+          <input
+            class="suu-filter-table__option-input"
+            type="checkbox"
+            value={option.value}
+            disabled={option.disabled}
+            checked={control.value.includes(option.value)}
+            on:change={(event) => toggleCheckbox(option.value, (event.currentTarget as HTMLInputElement).checked)}
+          />
+          <span class="suu-filter-table__option-label">{option.label}</span>
+          <span class="suu-filter-table__option-check" aria-hidden="true">
+            <svg viewBox="0 0 20 20">
+              <path d="m5 10 3 3 7-7"></path>
+            </svg>
+          </span>
+        </label>
+      {/each}
+    {/if}
   </div>
 {:else if control.type === 'radio'}
   <div class="suu-filter-table__options">
@@ -191,4 +219,22 @@
       }
     }}
   />
+{:else if control.type === 'dropdownMultiSelect'}
+  <DropdownMultiSelect
+    value={control.value}
+    options={control.options}
+    optionGroups={control.optionGroups}
+    ariaLabel={control.ariaLabel}
+    placement={control.placement}
+    menuAlign={control.menuAlign}
+    fitViewport={control.fitViewport}
+    fitContent={control.fitContent ?? true}
+    disabled={control.disabled}
+    width={control.width}
+    minWidth={control.minWidth}
+    maxWidth={control.maxWidth}
+    portal={control.portal}
+    onChange={control.onChange}
+    onTriggerClick={control.onTriggerClick}
+  />
 {/if}

package/dist/data-table/FilterControl.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterControl.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/FilterControl.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAwIhD,QAAA,MAAM,aAAa,KAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FilterControl.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/FilterControl.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AA2JhD,QAAA,MAAM,aAAa,KAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/data-table/filter.d.ts

@@ -1,4 +1,4 @@
-import type { CheckboxFilterControl, DateRangeFilterControl, DropdownSearchFilterControl, FilterButtonControl, FilterContainerControl, FilterControl, FilterLinkControl, FilterSelectControl, NumberRangeFilterControl, RadioFilterControl } from './types.js';
+import type { CheckboxFilterControl, DateRangeFilterControl, DropdownMultiSelectFilterControl, DropdownSearchFilterControl, FilterButtonControl, FilterContainerControl, FilterControl, FilterLinkControl, FilterSelectControl, NumberRangeFilterControl, RadioFilterControl } from './types.js';
 declare function checkbox(options: Omit<CheckboxFilterControl, 'type'>): CheckboxFilterControl;
 declare function radio(options: Omit<RadioFilterControl, 'type'>): RadioFilterControl;
 declare function dropdownSearch(options: Omit<DropdownSearchFilterControl, 'type'>): DropdownSearchFilterControl;
@@ -7,6 +7,7 @@ declare function numberRange(options: Omit<NumberRangeFilterControl, 'type'>): N
 declare function button(options: Omit<FilterButtonControl, 'type'>): FilterButtonControl;
 declare function link(options: Omit<FilterLinkControl, 'type'>): FilterLinkControl;
 declare function select(options: Omit<FilterSelectControl, 'type'>): FilterSelectControl;
+declare function dropdownMultiSelect(options: Omit<DropdownMultiSelectFilterControl, 'type'>): DropdownMultiSelectFilterControl;
 declare function container(controls: FilterControl[]): FilterContainerControl;
 export declare const filter: {
     checkbox: typeof checkbox;
@@ -17,6 +18,7 @@ export declare const filter: {
     button: typeof button;
     link: typeof link;
     select: typeof select;
+    dropdownMultiSelect: typeof dropdownMultiSelect;
     container: typeof container;
 };
 export {};

package/dist/data-table/filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/filter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,2BAA2B,EAC3B,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAEpB,iBAAS,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAErF;AAED,iBAAS,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,GAAG,kBAAkB,CAE5E;AAED,iBAAS,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,2BAA2B,EAAE,MAAM,CAAC,GAAG,2BAA2B,CAEvG;AAED,iBAAS,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,GAAG,sBAAsB,CAExF;AAED,iBAAS,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE,MAAM,CAAC,GAAG,wBAAwB,CAE9F;AAED,iBAAS,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GAAG,mBAAmB,CAE/E;AAED,iBAAS,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,GAAG,iBAAiB,CAEzE;AAED,iBAAS,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GAAG,mBAAmB,CAE/E;AAED,iBAAS,SAAS,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,sBAAsB,CAEpE;AAED,eAAO,MAAM,MAAM;;;;;;;;;;CAUlB,CAAC"}
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/filter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,gCAAgC,EAChC,2BAA2B,EAC3B,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAEpB,iBAAS,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAErF;AAED,iBAAS,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,GAAG,kBAAkB,CAE5E;AAED,iBAAS,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,2BAA2B,EAAE,MAAM,CAAC,GAAG,2BAA2B,CAEvG;AAED,iBAAS,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,GAAG,sBAAsB,CAExF;AAED,iBAAS,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE,MAAM,CAAC,GAAG,wBAAwB,CAE9F;AAED,iBAAS,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GAAG,mBAAmB,CAE/E;AAED,iBAAS,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,GAAG,iBAAiB,CAEzE;AAED,iBAAS,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GAAG,mBAAmB,CAE/E;AAED,iBAAS,mBAAmB,CAC1B,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,MAAM,CAAC,GACtD,gCAAgC,CAElC;AAED,iBAAS,SAAS,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,sBAAsB,CAEpE;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;CAWlB,CAAC"}

package/dist/data-table/filter.js

@@ -22,6 +22,9 @@ function link(options) {
 function select(options) {
     return { type: 'select', ...options };
 }
+function dropdownMultiSelect(options) {
+    return { type: 'dropdownMultiSelect', ...options };
+}
 function container(controls) {
     return { type: 'container', controls };
 }
@@ -34,5 +37,6 @@ export const filter = {
     button,
     link,
     select,
+    dropdownMultiSelect,
     container
 };

package/dist/data-table/index.d.ts

@@ -8,5 +8,5 @@ export { resolveDateRangePreset } from './date-range.js';
 export { getUiMessages, resolveUiLanguage, uiLanguages } from '../i18n.js';
 export { getAriaSort, getCellValue, getPageCount, normalizePagination, setDataTableFilters, setDataTablePageSize, setDataTablePagination, setDataTableSort, toggleSort } from './state.js';
 export type { UiLanguage, UiMessages } from '../i18n.js';
-export type { CheckboxFilterDefinition, CheckboxFilterControl, DataTableColumn, DataTableCellValue, DataTableClassValue, DataTableHorizontalAlign, DataTableLayout, DataTableVerticalAlign, DateRangeFilterDefinition, DateRangeFilterControl, DateRangeFilterValue, DateRangePreset, DataTableRowAttributes, DataTableRowKey, DataTableSortChangeHandler, DataTableState, DataTableStateChangeHandler, DropdownSearchFilterDefinition, DropdownSearchFilterControl, FilterDefinition, FilterButtonControl, FilterContainerControl, FilterControl, FilterLinkControl, FilterOption, FilterSelectControl, FilterState, FilterTableRow, FilterValue, NumberRangeFilterDefinition, NumberRangeFilterControl, NumberRangeFilterValue, PaginationState, PaginationChangeHandler, PaginationDropdownPlacement, RadioFilterDefinition, RadioFilterControl, SortDirection, SortState } from './types.js';
+export type { CheckboxFilterDefinition, CheckboxFilterControl, DataTableColumn, DataTableCellValue, DataTableClassValue, DataTableHorizontalAlign, DataTableLayout, DataTablePaginationQueryKey, DataTableServerPagination, DataTableVerticalAlign, DateRangeFilterDefinition, DateRangeFilterControl, DateRangeFilterValue, DateRangePreset, DataTableRowAttributes, DataTableRowKey, DataTableSortChangeHandler, DataTableState, DataTableStateChangeHandler, DropdownSearchFilterDefinition, DropdownSearchFilterControl, DropdownMultiSelectFilterDefinition, DropdownMultiSelectFilterControl, FilterDefinition, FilterButtonControl, FilterContainerControl, FilterControl, FilterLinkControl, FilterOption, FilterSelectControl, FilterState, FilterTableRow, FilterValue, NumberRangeFilterDefinition, NumberRangeFilterControl, NumberRangeFilterValue, PaginationState, PaginationChangeHandler, PaginationDropdownPlacement, RadioFilterDefinition, RadioFilterControl, SortDirection, SortState } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/data-table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,UAAU,EACX,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EACV,wBAAwB,EACxB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,EACf,sBAAsB,EACtB,yBAAyB,EACzB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,cAAc,EACd,2BAA2B,EAC3B,8BAA8B,EAC9B,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,2BAA2B,EAC3B,wBAAwB,EACxB,sBAAsB,EACtB,eAAe,EACf,uBAAuB,EACvB,2BAA2B,EAC3B,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,EACb,SAAS,EACV,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,UAAU,EACX,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EACV,wBAAwB,EACxB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,EACf,2BAA2B,EAC3B,yBAAyB,EACzB,sBAAsB,EACtB,yBAAyB,EACzB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,cAAc,EACd,2BAA2B,EAC3B,8BAA8B,EAC9B,2BAA2B,EAC3B,mCAAmC,EACnC,gCAAgC,EAChC,gBAAgB,EAChB,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,2BAA2B,EAC3B,wBAAwB,EACxB,sBAAsB,EACtB,eAAe,EACf,uBAAuB,EACvB,2BAA2B,EAC3B,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,EACb,SAAS,EACV,MAAM,YAAY,CAAC"}