Riupress UI

Appearance

FilterItem ​

A single element of the filter list containing a specific form type (checkbox, radio, select, toggle), which is responsible for adding/removing the element to/from the filter list.

Props ​

filters
required
Filter board (Getfilters) from Query
type:Array as PropType<Filter[]>
default:Array
value
required
Filter value
type:String|Number

Slots ​

default
Default slot for the content describing the filter

Events ​

toggle
Adds or removes from the list of active filters.The `$event` value should contain the filter type, its name and filter value.
ś
html
<filter-list name="name_of_field" type="checkbox" label>
    <filter-item :filters="getFilters()"  @toggle="toggleFilter($event)" :value="1">Filter 1</filter-item>
    <filter-item :filters="getFilters()" @toggle="toggleFilter($event)" :value="2">Filter 2</filter-item>
    <filter-item :filters="getFilters()" @toggle="toggleFilter($event)" :value="3">Filter 3</filter-item>
</filter-list>
<!-- wywoływanie filtra -->
<btn @click="applyFilters()">Load filters</btn>

Value @toggle: []

INFO

By transferring a reactive board to the component, you can turn on the filter from anywhere in the system, or loaded with a predefined or saved filter board using onBeforeMount

ts
// obługa na potrzeby przykładu z dokumentacji
import { ref, onBeforeMount } from 'vue'
import { useQuery } from "@riupress/ui"
const { loadQuery, getSort, setSort, toggleFilter, getFilters, applyFilters } = useQuery()
const readAllItems = async () => {
  return []
}
loadQuery(readAllItems)
const toggleVal = ref({})
onBeforeMount(() => {
  toggleFilter({ "name": "name_of_field", "value": 2 })
})