@serkonda7/solid-components 0.3.2 → 0.4.0

package/README.md

@@ -34,9 +34,11 @@ export default defineConfig({ plugins: [tablerIcons(), solid()] })
 ```
 
 These components are available:
-- `DataTable` - generic table with optional sorting, actions, loading, empty states, and column customizer.
+- `DataTable` - generic table with optional sorting, actions, loading and empty states, column customizer, resizable columns, sticky header and actions, and server-side pagination.
 - `FilterTable` - `DataTable` with filtering: quick search, a grouped filter form, and removable filter pills.
 - `Combobox` - searchable, accessible dropdown with keyboard navigation, option icons and previews, a detail column, and an optional "Add …" entry.
+- `ColorInput` - hex color input with a native color picker swatch.
+- `Modal` - controlled modal dialog with focus trapping and restore, a close button, Escape and backdrop-click closing.
 - `SearchBar` - search input with clear button and a global Ctrl/Cmd+K focus shortcut.
 
 For the full API, examples, and agent notes, see [docs.md](docs.md).

package/dist/color-input.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'solid-js';
+export interface ColorInputProps {
+    /** Hex color, `#rrggbb` or `#rgb`. */
+    value: string;
+    /** Receives valid colors only, normalized to lowercase `#rrggbb`. */
+    onInput: (value: string) => void;
+    /** Accessible name of the hex input. Defaults to `Color`. */
+    ariaLabel?: string;
+    /** Accessible name of the color picker. Defaults to `Pick color`. */
+    pickerLabel?: string;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Hex text input with a native color picker swatch. Text that isn't a valid color
+ * yet is kept while typing and reverts to `value` on blur.
+ */
+export declare function ColorInput(props: ColorInputProps): JSX.Element;

package/dist/data-table.d.ts

@@ -23,6 +23,27 @@ export interface DataTableColumn<TRow> {
     /** Whether the column can be hidden via the column customizer. Defaults to `true`. Non-toggleable columns are always shown. */
     toggleable?: boolean;
 }
+export interface DataTablePagination {
+    /** Current page, starting at 1. */
+    page: number;
+    pageSize: number;
+    /** Total rows across all pages. */
+    rowCount: number;
+    /** Choices of the rows-per-page select; hidden when omitted. */
+    pageSizeOptions?: number[];
+}
+export interface DataTablePaginationLabels {
+    /** Accessible name of the pagination landmark. Defaults to `Pagination`. */
+    navigation?: string;
+    /** Defaults to `Previous page`. */
+    previous?: string;
+    /** Defaults to `Next page`. */
+    next?: string;
+    /** Defaults to `Rows per page`. */
+    pageSize?: string;
+    /** Defaults to `1–25 of 120`. */
+    range?: (first: number, last: number, rowCount: number) => string;
+}
 export interface DataTableProps<TRow> {
     rows: TRow[] | Accessor<TRow[]>;
     columns: DataTableColumn<TRow>[];
@@ -44,7 +65,9 @@ export interface DataTableProps<TRow> {
     onColumnOrderChange?: (orderedKeys: string[]) => void;
     /** Shows a drag handle between column headers to resize columns. */
     resizableColumns?: boolean;
-    /** Called with all current pixel widths (by column key) after a resize. */
+    /** Restores pixel widths (by column key); a new value replaces the current widths, `{}` clears them. */
+    columnWidths?: Record<string, number> | Accessor<Record<string, number>>;
+    /** Called with all current pixel widths (by column key) after a resize, and with `{}` on reset. */
     onColumnWidthsChange?: (widths: Record<string, number>) => void;
     showColumnCustomizer?: boolean | Accessor<boolean>;
     columnCustomizerLabel?: string;
@@ -53,9 +76,23 @@ export interface DataTableProps<TRow> {
     columnCustomizerResetLabel?: string;
     /** Content rendered at the start of the toolbar, before the column customizer. */
     toolbar?: JSX.Element;
+    /** Keeps the header visible while the rows scroll, inside a viewport capped by `--data-table-max-height`. */
+    stickyHeader?: boolean;
+    /** Keeps the `rowActions` column visible while the columns scroll horizontally. */
+    stickyActions?: boolean;
+    /** Renders a pager for server-side pagination; `rows` must hold only the current page. */
+    pagination?: DataTablePagination | Accessor<DataTablePagination>;
+    onPaginationChange?: (pagination: {
+        page: number;
+        pageSize: number;
+    }) => void;
+    paginationLabels?: DataTablePaginationLabels;
     loading?: boolean | Accessor<boolean>;
     empty?: boolean | Accessor<boolean>;
+    /** Replaces the skeleton rows and the loading text. */
     loadingContent?: JSX.Element;
+    /** Skeleton rows shown while loading without rows. Defaults to 5. */
+    skeletonRows?: number;
     emptyContent?: JSX.Element;
     class?: string;
 }

package/dist/filter-table.d.ts

@@ -1,8 +1,12 @@
 import type { Accessor, JSX } from 'solid-js';
 import { type ComboboxOption } from './combobox';
 import { type DataTableProps } from './data-table';
-export type FilterTableFilterType = 'text' | 'select' | 'boolean';
-/** A filter's value: text for `text`/`boolean` (`'true'`/`'false'`), a list for `select`. */
+export type FilterTableFilterType = 'text' | 'select' | 'boolean' | 'number-range' | 'date-range';
+/**
+ * A filter's value: text for `text`/`boolean` (`'true'`/`'false'`), a list for
+ * `select`, and `min..max` for ranges, with either bound left empty (`10..`, `..20`).
+ * Date bounds are `YYYY-MM-DD`. Read ranges with `parseFilterTableRange`.
+ */
 export type FilterTableValue = string | string[];
 /**
  * Applied filters by filter key, plus the quick search under `q`. Inactive
@@ -27,6 +31,8 @@ export interface FilterTableFilter<TRow> {
     /** Choices of a `select` filter; derived from the row values when omitted. */
     options?: ComboboxOption[];
     placeholder?: string;
+    /** Formats a range bound in the filter pills; defaults to the raw value. */
+    formatValue?: (value: string) => string;
 }
 export interface FilterTableProps<TRow> extends Omit<DataTableProps<TRow>, 'toolbar'> {
     filters: FilterTableFilter<TRow>[];
@@ -43,8 +49,12 @@ export interface FilterTableProps<TRow> extends Omit<DataTableProps<TRow>, 'tool
     onSavedFiltersChange?: (savedFilters: FilterTableSavedFilter[]) => void;
     /** Pass `rows` through unfiltered, e.g. when the server applies `filterValues`. */
     manualFiltering?: boolean;
+    /** Results badge count; defaults to `pagination.rowCount`, then the rows shown. */
+    totalCount?: number | Accessor<number | undefined>;
     /** Shows the quick search input above the table. Defaults to `true`. */
     quickSearch?: boolean;
+    /** Milliseconds to wait after typing before searching. Defaults to 300 with `manualFiltering`, else 0. */
+    quickSearchDebounce?: number;
     /** Text matched by the quick search; defaults to the row's column values. */
     getSearchText?: (row: TRow) => string;
     quickSearchLabel?: string;
@@ -56,12 +66,19 @@ export interface FilterTableProps<TRow> extends Omit<DataTableProps<TRow>, 'tool
     anyLabel?: string;
     yesLabel?: string;
     noLabel?: string;
+    fromLabel?: string;
+    toLabel?: string;
     savedFiltersLabel?: string;
     saveLabel?: string;
     saveNameLabel?: string;
     cancelLabel?: string;
     clearSavedFilterLabel?: string;
 }
+/** Splits a `min..max` filter value; an open bound is `''`. */
+export declare function parseFilterTableRange(value: string): {
+    min: string;
+    max: string;
+};
 /**
  * `DataTable` with filtering: a Results tab with a quick search and
  * removable pills for the applied filters, and a Filters tab with a grouped form

package/dist/index.d.ts

@@ -4,7 +4,9 @@
  * Add components here as they are implemented so consumers can import them
  * from the package root.
  */
+export { ColorInput, type ColorInputProps, } from './color-input';
 export { Combobox, type ComboboxIcon, type ComboboxOption, type ComboboxProps, } from './combobox';
-export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, type DataTableSortDirection, } from './data-table';
-export { FilterTable, type FilterTableFilter, type FilterTableFilterType, type FilterTableProps, type FilterTableSavedFilter, type FilterTableValue, type FilterTableValues, } from './filter-table';
+export { DataTable, type DataTableColumn, type DataTablePagination, type DataTablePaginationLabels, type DataTableProps, type DataTableSort, type DataTableSortDirection, } from './data-table';
+export { FilterTable, type FilterTableFilter, type FilterTableFilterType, type FilterTableProps, type FilterTableSavedFilter, type FilterTableValue, type FilterTableValues, parseFilterTableRange, } from './filter-table';
+export { Modal, type ModalProps, } from './modal';
 export { SearchBar, type SearchBarProps, } from './search-bar';