@phoenix-cg/v-filters
v0.2.3
Published
## Project setup ``` npm install @phoenix-cg/v-filters ```
Downloads
150
Readme
v-filters
Project setup
npm install @phoenix-cg/v-filters
Props
| Props | Description | Default value | |--------------------|----------------------------------------------------------------------------------------------------------------------------------|----------------| | componentsMap | [Object], required. Object with components name mapping to field types | none | | fieldComponentName | [String] Component for field rendering. Should has "title" prop and a slot for field component | v-filter-field | | fields | [Array], required. Array with fields | none | | showWords | [Array] Array with words to put before found result count. First element should be in future tense and a last one in past tense. | [] | | notFoundTitle | [String] Will be shown in button if count is 0 | '' | | declensionWords | [Array] Array of words to put after found result count. | [] | | count | [Number] Found count | 0 | | showParams | [Boolean] If true current filters state will be reflected in page query params. | true | | isResultShown | [Boolean] If true action button title will be constructed in past tense | false | | humanLink | [String] Human link feature | '' | | editedOutside | [Boolean] If true reset button will be shown even if the v-filters itself is untouched. | false | | immediate | [Boolean] If true action button will not be shown and show-result event will fire immediately after change | false |
Slots
| Slot | Description | Scope | |---------------|-----------------------------------------|--------------------------------------------------------| | before-fields | Slot to place anything before fields | none | | after-fields | Slot to place anything after fields | none | | actions | Slot for actions. Displays after fields | { showResult, resetFilters, count, immediate, edited } | | actions-after | Slot for actions. Displays after fields | { showResult, resetFilters, count, immediate, edited } |
Events
| Event | Description | Payload | |---------------|---------------------|-----------------------------------------| | request-count | Request count event | flatFilters: { ..., name: [1, 2] ,... } | | show-result | Show result event | flatFilters: { ..., name: [1, 2],... } | | reset-filters | Reset filters event | none |