mantine-composite-filters 0.1.0 → 0.1.2
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 +71 -26
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,39 +1,84 @@
|
|
|
1
|
-
#
|
|
1
|
+
# mantine-composite-filters
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A powerful composite filters component for Mantine that allows users to build complex filter queries through an intuitive interface. It supports multiple filter types, operators, presets, history tracking, and extensive customization options.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/mantine-composite-filters)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
2. Clone the repository to your local machine and install dependencies (`yarn`)
|
|
9
|
-
3. Run `nvm use` to switch to the correct node version
|
|
10
|
-
4. Come up with a name for your extension and replace all occurrences of `mantine-extension-template` with your extension name
|
|
11
|
-
5. Change `repository` field in [package/package.json](https://github.com/mantinedev/extension-template/blob/master/package/package.json) to point to your repository
|
|
12
|
-
6. Run `npm run docgen` to generate files required for documentation
|
|
13
|
-
7. To verify that everything works correctly, run `npm run build` and `npm test` to build and test your initial setup
|
|
14
|
-
8. All good! Start developing your extension.
|
|
8
|
+
## Documentation
|
|
15
9
|
|
|
16
|
-
|
|
10
|
+
[View full documentation](https://dvlprroshan.github.io/mantine-composite-filters/)
|
|
17
11
|
|
|
18
|
-
|
|
12
|
+
## Installation
|
|
19
13
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
```bash
|
|
15
|
+
npm install mantine-composite-filters
|
|
16
|
+
# or
|
|
17
|
+
yarn add mantine-composite-filters
|
|
18
|
+
```
|
|
23
19
|
|
|
24
|
-
##
|
|
20
|
+
## Peer Dependencies
|
|
25
21
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
22
|
+
```bash
|
|
23
|
+
npm install @mantine/core @mantine/hooks @mantine/dates @mantine/notifications @tabler/icons-react dayjs
|
|
24
|
+
```
|
|
29
25
|
|
|
30
|
-
##
|
|
26
|
+
## Usage
|
|
31
27
|
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
```tsx
|
|
29
|
+
import { MultiFiltersInput } from 'mantine-composite-filters';
|
|
30
|
+
import 'mantine-composite-filters/styles.css';
|
|
34
31
|
|
|
35
|
-
|
|
32
|
+
const filterFields = [
|
|
33
|
+
{ key: 'name', label: 'Name', type: 'text' },
|
|
34
|
+
{ key: 'status', label: 'Status', type: 'select', options: ['Active', 'Inactive'] },
|
|
35
|
+
{ key: 'createdAt', label: 'Created At', type: 'date' },
|
|
36
|
+
{ key: 'amount', label: 'Amount', type: 'number' },
|
|
37
|
+
];
|
|
36
38
|
|
|
37
|
-
|
|
39
|
+
function App() {
|
|
40
|
+
const [filters, setFilters] = useState([]);
|
|
38
41
|
|
|
39
|
-
|
|
42
|
+
return (
|
|
43
|
+
<MultiFiltersInput
|
|
44
|
+
fields={filterFields}
|
|
45
|
+
value={filters}
|
|
46
|
+
onChange={setFilters}
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Features
|
|
53
|
+
|
|
54
|
+
- **Multiple Filter Types**: Text, number, select, multi-select, date, date range, and boolean filters
|
|
55
|
+
- **Rich Operators**: Comprehensive operators for each filter type (equals, contains, greater than, etc.)
|
|
56
|
+
- **Filter Presets**: Save and load filter configurations
|
|
57
|
+
- **History Tracking**: Navigate through filter history with undo/redo
|
|
58
|
+
- **Keyboard Shortcuts**: Power user keyboard navigation
|
|
59
|
+
- **Overflow Handling**: Multiple display modes for handling many active filters
|
|
60
|
+
- **Fully Customizable**: Extensive styling and behavior customization options
|
|
61
|
+
- **TypeScript Support**: Full TypeScript definitions included
|
|
62
|
+
|
|
63
|
+
## Local Development
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
# Install dependencies
|
|
67
|
+
yarn
|
|
68
|
+
|
|
69
|
+
# Start development server
|
|
70
|
+
npm run dev
|
|
71
|
+
|
|
72
|
+
# Run storybook
|
|
73
|
+
npm run storybook
|
|
74
|
+
|
|
75
|
+
# Build package
|
|
76
|
+
npm run build
|
|
77
|
+
|
|
78
|
+
# Run tests
|
|
79
|
+
npm test
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## License
|
|
83
|
+
|
|
84
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-composite-filters",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "A powerful composite filters component for Mantine",
|
|
5
|
-
"homepage": "https://github.
|
|
5
|
+
"homepage": "https://dvlprroshan.github.io/mantine-composite-filters",
|
|
6
6
|
"packageManager": "yarn@4.0.1",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"author": "Vitaly Rtishchev <rtivital@gmail.com>",
|