@serkonda7/solid-components 0.0.8 → 0.2.0

package/README.md

@@ -24,9 +24,20 @@ import '@serkonda7/solid-components/styles.css'
 />
 ```
 
+If your app imports `@tabler/icons-solidjs` itself, add the bundled Vite plugin
+before `solid()`. Without it, dev mode loads all ~6000 icon modules:
+
+```ts
+import { tablerIcons } from '@serkonda7/solid-components/vite'
+
+export default defineConfig({ plugins: [tablerIcons(), solid()] })
+```
+
 These components are available:
 - `DataTable` - generic table with optional sorting, row selection, actions, loading, empty states, and column customizer.
+- `FilterTable` - `DataTable` with filtering: quick search, a grouped filter form, and removable filter pills.
 - `Combobox` - searchable, accessible dropdown with keyboard navigation, option icons, a detail column, and an optional "Add …" entry.
+- `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/combobox.d.ts

@@ -33,6 +33,8 @@ export interface ComboboxProps {
     onAdd?: (query: string) => void;
     /** Text of the pinned add entry. Defaults to `Add`. */
     addLabel?: string;
+    /** Placeholder while closed and nothing is selected; `emptyLabel` takes precedence. */
+    placeholder?: string;
     /** Placeholder while open and nothing is selected. Defaults to `Search`. */
     searchLabel?: string;
     /** Shown when no option matches the search. Defaults to `No matching objects`. */

package/dist/data-table.d.ts

@@ -35,11 +35,19 @@ export interface DataTableProps<TRow> {
     visibleColumns?: string[] | Accessor<string[]>;
     defaultVisibleColumns?: string[];
     onVisibleColumnsChange?: (visibleKeys: string[]) => void;
+    /** Controlled column order as column keys; pair with `onColumnOrderChange`. */
+    columnOrder?: string[] | Accessor<string[]>;
+    defaultColumnOrder?: string[];
+    onColumnOrderChange?: (orderedKeys: string[]) => void;
     showColumnCustomizer?: boolean | Accessor<boolean>;
     columnCustomizerLabel?: string;
     columnCustomizerTitle?: string;
     columnCustomizerShowAllLabel?: string;
     columnCustomizerResetLabel?: string;
+    columnCustomizerMoveUpLabel?: string;
+    columnCustomizerMoveDownLabel?: string;
+    /** Content rendered at the start of the toolbar, before the column customizer. */
+    toolbar?: JSX.Element;
     loading?: boolean | Accessor<boolean>;
     empty?: boolean | Accessor<boolean>;
     loadingContent?: JSX.Element;

package/dist/filter-table.d.ts

@@ -0,0 +1,70 @@
+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 FilterTableValue = string | string[];
+/**
+ * Applied filters by filter key, plus the quick search under `q`. Inactive
+ * filters are omitted, so the record maps directly onto URL query params.
+ */
+export type FilterTableValues = Record<string, FilterTableValue>;
+/** A named set of filter values the user saved for reuse. */
+export interface FilterTableSavedFilter {
+    name: string;
+    values: FilterTableValues;
+}
+export interface FilterTableFilter<TRow> {
+    key: string;
+    label: string;
+    type: FilterTableFilterType;
+    /** Fieldset heading in the filter form; ungrouped filters come first. */
+    group?: string;
+    /** Value matched against; defaults to `row[key]`. May return an array for `select`. */
+    getValue?: (row: TRow) => unknown;
+    /** Replaces the built-in matching for this filter. */
+    match?: (row: TRow, value: FilterTableValue) => boolean;
+    /** Choices of a `select` filter; derived from the row values when omitted. */
+    options?: ComboboxOption[];
+    placeholder?: string;
+}
+export interface FilterTableProps<TRow> extends Omit<DataTableProps<TRow>, 'toolbar'> {
+    filters: FilterTableFilter<TRow>[];
+    /** Controlled applied filters; pair with `onFilterValuesChange`. */
+    filterValues?: FilterTableValues | Accessor<FilterTableValues>;
+    defaultFilterValues?: FilterTableValues;
+    onFilterValuesChange?: (values: FilterTableValues) => void;
+    /**
+     * Saved filters, listed in a picker beside the quick search. Passing this
+     * (even `[]`) enables saving: a "Save" pill names the applied filters and
+     * emits the new list through `onSavedFiltersChange`; persisting it is up to you.
+     */
+    savedFilters?: FilterTableSavedFilter[] | Accessor<FilterTableSavedFilter[]>;
+    onSavedFiltersChange?: (savedFilters: FilterTableSavedFilter[]) => void;
+    /** Pass `rows` through unfiltered, e.g. when the server applies `filterValues`. */
+    manualFiltering?: boolean;
+    /** Shows the quick search input above the table. Defaults to `true`. */
+    quickSearch?: boolean;
+    /** Text matched by the quick search; defaults to the row's column values. */
+    getSearchText?: (row: TRow) => string;
+    quickSearchLabel?: string;
+    resultsLabel?: string;
+    filtersLabel?: string;
+    applyLabel?: string;
+    resetLabel?: string;
+    clearAllLabel?: string;
+    anyLabel?: string;
+    yesLabel?: string;
+    noLabel?: string;
+    savedFiltersLabel?: string;
+    saveLabel?: string;
+    saveNameLabel?: string;
+    cancelLabel?: string;
+    deleteSavedFilterLabel?: 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
+ * that is applied on submit.
+ */
+export declare function FilterTable<TRow>(props: FilterTableProps<TRow>): JSX.Element;

package/dist/index.d.ts

@@ -6,3 +6,5 @@
  */
 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 { SearchBar, type SearchBarProps, } from './search-bar';