@9troisquarts/inline-filters 2.7.18 → 2.7.19
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 +55 -1
- package/dist/inline-filters.js +17487 -18076
- package/dist/inline-filters.umd.cjs +55 -57
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,58 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @9troisquarts/inline-filters
|
|
2
|
+
|
|
3
|
+
> **Current version:** `2.7.19`
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
# yarn
|
|
10
|
+
yarn add @9troisquarts/inline-filters
|
|
11
|
+
|
|
12
|
+
# npm
|
|
13
|
+
npm i @9troisquarts/inline-filters
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Utilisation
|
|
17
|
+
|
|
18
|
+
```typescript
|
|
19
|
+
import InlineFilters, { InlineFilterSchema } from '@9troisquarts/inline-filters'
|
|
20
|
+
|
|
21
|
+
const schema: InlineFilterSchema = [
|
|
22
|
+
{
|
|
23
|
+
name: 'someField',
|
|
24
|
+
input: {
|
|
25
|
+
type: 'daterange'
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
|
|
30
|
+
const customProps: InlineFiltersProps = {}
|
|
31
|
+
return (
|
|
32
|
+
//...
|
|
33
|
+
<InlineFilters schema={schema} {...customProps} />
|
|
34
|
+
)
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## InlineFiltersProps
|
|
38
|
+
|
|
39
|
+
| version | key | type | default value | details |
|
|
40
|
+
| --- | --- | --- | --- | --- |
|
|
41
|
+
| * | `config`| **Configuration ** | - | |
|
|
42
|
+
| * | `value`| **T** | - | current value of inline filters |
|
|
43
|
+
| * | `defaultValue`| **T** | - | default value of inline filters |
|
|
44
|
+
| * | `resetText`| **String** | `Reset filters` | Text for reset button |
|
|
45
|
+
| * | `delay`| **number** | 200 | delay before applying new filters |
|
|
46
|
+
| * | `toggle`| **FilterToggleType** | - | Config for toggle |
|
|
47
|
+
| * | `resetButton`| **React.ReactNode** | - | specific config for reset Button |
|
|
48
|
+
| * | `resetButtonProps`| **ButtonProps** | - | |
|
|
49
|
+
| * | `resetButtonVisibility`| **InlineFiltersResetButtonVisibility** | `dirty` | possible values [`always`, `never`, `dirty`] |
|
|
50
|
+
| * | `onReset` | **void function** | - | callback called on reset action |
|
|
51
|
+
| `>=2.7.19` | `containerStyle`| **React.CssProperties** | `{ display: "flex", flexWrap: "wrap", gap: "1rem", flexDirection: "row", alignItems: "flex-start" }` | CSS for the div containing the inline filters |
|
|
52
|
+
| `>=2.7.19` | `layout` | **InlineFiltersLayout** | `inline` | Possible values: [`inline`, `vertical`], allow to force vertical rendering if needed, **__⚠️ if defined it will overrides `containerStyle`__** |
|
|
53
|
+
| `>=2.7.19` | `flexGap` | **String** | `1rem` | Allow to adapt gap between filters, **__⚠️ if defined it will overrides `containerStyle.gap`__** |
|
|
54
|
+
|
|
55
|
+
## React + TypeScript + Vite
|
|
2
56
|
|
|
3
57
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
58
|
|