@phoenix-cg/v-filters

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