@serkonda7/solid-components 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -24,10 +24,20 @@ import '@serkonda7/solid-components/styles.css'
24
24
  />
25
25
  ```
26
26
 
27
+ If your app imports `@tabler/icons-solidjs` itself, add the bundled Vite plugin
28
+ before `solid()`. Without it, dev mode loads all ~6000 icon modules:
29
+
30
+ ```ts
31
+ import { tablerIcons } from '@serkonda7/solid-components/vite'
32
+
33
+ export default defineConfig({ plugins: [tablerIcons(), solid()] })
34
+ ```
35
+
27
36
  These components are available:
28
37
  - `DataTable` - generic table with optional sorting, row selection, actions, loading, empty states, and column customizer.
29
38
  - `FilterTable` - `DataTable` with filtering: quick search, a grouped filter form, and removable filter pills.
30
39
  - `Combobox` - searchable, accessible dropdown with keyboard navigation, option icons, a detail column, and an optional "Add …" entry.
40
+ - `SearchBar` - search input with clear button and a global Ctrl/Cmd+K focus shortcut.
31
41
 
32
42
  For the full API, examples, and agent notes, see [docs.md](docs.md).
33
43
 
@@ -35,11 +35,17 @@ export interface DataTableProps<TRow> {
35
35
  visibleColumns?: string[] | Accessor<string[]>;
36
36
  defaultVisibleColumns?: string[];
37
37
  onVisibleColumnsChange?: (visibleKeys: string[]) => void;
38
+ /** Controlled column order as column keys; pair with `onColumnOrderChange`. */
39
+ columnOrder?: string[] | Accessor<string[]>;
40
+ defaultColumnOrder?: string[];
41
+ onColumnOrderChange?: (orderedKeys: string[]) => void;
38
42
  showColumnCustomizer?: boolean | Accessor<boolean>;
39
43
  columnCustomizerLabel?: string;
40
44
  columnCustomizerTitle?: string;
41
45
  columnCustomizerShowAllLabel?: string;
42
46
  columnCustomizerResetLabel?: string;
47
+ columnCustomizerMoveUpLabel?: string;
48
+ columnCustomizerMoveDownLabel?: string;
43
49
  /** Content rendered at the start of the toolbar, before the column customizer. */
44
50
  toolbar?: JSX.Element;
45
51
  loading?: boolean | Accessor<boolean>;
@@ -9,6 +9,11 @@ export type FilterTableValue = string | string[];
9
9
  * filters are omitted, so the record maps directly onto URL query params.
10
10
  */
11
11
  export type FilterTableValues = Record<string, FilterTableValue>;
12
+ /** A named set of filter values the user saved for reuse. */
13
+ export interface FilterTableSavedFilter {
14
+ name: string;
15
+ values: FilterTableValues;
16
+ }
12
17
  export interface FilterTableFilter<TRow> {
13
18
  key: string;
14
19
  label: string;
@@ -29,6 +34,13 @@ export interface FilterTableProps<TRow> extends Omit<DataTableProps<TRow>, 'tool
29
34
  filterValues?: FilterTableValues | Accessor<FilterTableValues>;
30
35
  defaultFilterValues?: FilterTableValues;
31
36
  onFilterValuesChange?: (values: FilterTableValues) => void;
37
+ /**
38
+ * Saved filters, listed in a picker beside the quick search. Passing this
39
+ * (even `[]`) enables saving: a "Save" pill names the applied filters and
40
+ * emits the new list through `onSavedFiltersChange`; persisting it is up to you.
41
+ */
42
+ savedFilters?: FilterTableSavedFilter[] | Accessor<FilterTableSavedFilter[]>;
43
+ onSavedFiltersChange?: (savedFilters: FilterTableSavedFilter[]) => void;
32
44
  /** Pass `rows` through unfiltered, e.g. when the server applies `filterValues`. */
33
45
  manualFiltering?: boolean;
34
46
  /** Shows the quick search input above the table. Defaults to `true`. */
@@ -44,6 +56,11 @@ export interface FilterTableProps<TRow> extends Omit<DataTableProps<TRow>, 'tool
44
56
  anyLabel?: string;
45
57
  yesLabel?: string;
46
58
  noLabel?: string;
59
+ savedFiltersLabel?: string;
60
+ saveLabel?: string;
61
+ saveNameLabel?: string;
62
+ cancelLabel?: string;
63
+ clearSavedFilterLabel?: string;
47
64
  }
48
65
  /**
49
66
  * `DataTable` with filtering: a Results tab with a quick search and
package/dist/index.d.ts CHANGED
@@ -6,4 +6,5 @@
6
6
  */
7
7
  export { Combobox, type ComboboxIcon, type ComboboxOption, type ComboboxProps, } from './combobox';
8
8
  export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, type DataTableSortDirection, } from './data-table';
9
- export { FilterTable, type FilterTableFilter, type FilterTableFilterType, type FilterTableProps, type FilterTableValue, type FilterTableValues, } from './filter-table';
9
+ export { FilterTable, type FilterTableFilter, type FilterTableFilterType, type FilterTableProps, type FilterTableSavedFilter, type FilterTableValue, type FilterTableValues, } from './filter-table';
10
+ export { SearchBar, type SearchBarProps, } from './search-bar';