# Pitcher Filter Dropdown
# General Info
# Mapping item props for text/value
If you have any other model than this for your text or value, you can easily use :itemText="PROP_NAME" :itemValue="PROP_NAME" to map your specific attributes as text/value
# Changing emit return type
This behaviour is default. If you need to emit the whole object on input, use :returnObject: true
# Showing limited items
:itemsPerPage="NUMBER" prop is your friend, if you have too many items.
# Editing list, sheet, menu externally
To be able to edit v-list, v-sheet and v-menu props, you can use :listProps="{ ...V-List Props }", :sheetProps="{ ...V-Sheet Props }", :menuProps="{ ...V-Menu Props" }
WARNING
Keep in mind, by overriding these values, you will be overriding default values of the component. Check the default values in API section.
# Object model for item
| attribute | type | description |
|---|---|---|
| text | string | required if type is header |
| value | string | required if type is item or undefined |
| type | undefined | 'item' | 'header' | 'divider' | behaves like item if undefined |
| description | string | not required, description is in the end of item row |
Example
items: [
{
text: 'My Items',
type: 'header',
},
{
text: 'Item 1',
value: 'item1',
type: 'item',
},
]
# Usage with Array
Example usage of PFilterDropdown with an Object Array.
<template>
<VRow noGutters>
<VCol cols="12">
<PFilterDropdown v-model="selectedCities" :items="cities" title="Cities" />
</VCol>
<VCol cols="12" class="mt-8 text-center">
<code>selectedCities:</code>
<span class="secondary--text">
{{ selectedCities }}
</span>
</VCol>
</VRow>
</template>
<script>
import { PFilterDropdown } from '@pitcher/pitcherify'
import { ref } from '@vue/composition-api'
export default {
name: 'ExampleComponent',
components: {
PFilterDropdown,
},
setup() {
const selectedCities = ref([])
const cities = ref([
{
text: 'Cantons',
type: 'header',
description: 5,
},
{
text: 'Zürich',
value: 'zurich',
description: 15,
},
{
type: 'divider',
},
{
text: 'Aargau',
value: 'aargau',
description: 2,
},
{
text: 'Vaud',
value: 'vaud',
disabled: true,
description: 0,
},
{
text: 'Ticino',
value: 'ticino',
description: 3,
},
{
text: 'Bern',
value: 'bern',
description: 12,
},
{
text: 'Lucerne',
value: 'lucerne',
description: 123,
},
{
text: 'Geneva',
value: 'geneva',
description: 44,
},
])
return { selectedCities, cities }
},
}
</script>
# Usage with String Array
Example usage of PFilterDropdown with a String Array.
<template>
<VRow noGutters>
<VCol cols="12">
<PFilterDropdown v-model="selectedCities" :items="cities" title="Cities" />
</VCol>
<VCol cols="12" class="mt-8 text-center">
<code>selectedCities:</code>
<span class="secondary--text">
{{ selectedCities }}
</span>
</VCol>
</VRow>
</template>
<script>
import { PFilterDropdown } from '@pitcher/pitcherify'
import { ref } from '@vue/composition-api'
export default {
name: 'ExampleComponent',
components: {
PFilterDropdown,
},
setup() {
const selectedCities = ref([])
const cities = ref(['Zurich', 'Ticino', 'Vaud', 'Lucerne', 'Geneva'])
return { selectedCities, cities }
},
}
</script>
# Advanced usage
Advanced usage example, where you have multiple Filter Dropdowns that you generate based on the data.
<template>
<VRow noGutters>
<VCol cols="12">
<!-- Filters -->
<VRow>
<VCol v-for="(f, i) in filters" :key="i" cols="4">
<PFilterDropdown
v-model="f.value"
:items="f.options"
:title="f.name"
:itemsPerPage="f.options.length > 15 ? 7 : undefined"
/>
</VCol>
</VRow>
<!-- Value -->
<VRow>
<VCol v-for="(f, i) in filters" :key="i" cols="4">
<code>value:</code>
<span class="secondary--text">
{{ f.value }}
</span>
</VCol>
</VRow>
</VCol>
<VDivider />
<VCol cols="12" class="mt-8">
<code>selectedFilters:</code>
<span class="secondary--text">
{{ selectedFilters }}
</span>
</VCol>
</VRow>
</template>
<script>
import { PFilterDropdown } from '@pitcher/pitcherify'
import { computed, ref } from '@vue/composition-api'
export default {
name: 'ExampleComponent',
components: {
PFilterDropdown,
},
setup() {
const filters = ref([
{
name: 'Product',
value: [],
options: [
{ text: 'Product 1', value: 'product_1' },
{ text: 'Product 2', value: 'product_2' },
{ text: 'Product 3', value: 'product_3' },
{ text: 'Product 4', value: 'product_4' },
{ text: 'Product 5', value: 'product_5' },
{ text: 'Product 6', value: 'product_6' },
{ text: 'Other', value: 'Other' },
],
},
{
name: 'Category',
value: [],
options: [
{ text: 'Category 1', value: 'category_1' },
{ text: 'Category 2', value: 'category_2' },
{ text: 'Category 3', value: 'category_3' },
{ text: 'Category 4', value: 'category_4' },
{ text: 'Category 5', value: 'category_5' },
{ text: 'Category 6', value: 'category_6' },
{ text: 'Category 7', value: 'category_7' },
{ text: 'Category 8', value: 'category_8' },
{ text: 'Category 9', value: 'category_9' },
{ text: 'Category 10', value: 'category_10' },
{ text: 'Category 11', value: 'category_11' },
{ text: 'Category 12', value: 'category_12' },
{ text: 'Category 13', value: 'category_13' },
{ text: 'Category 14', value: 'category_14' },
{ text: 'Category 15', value: 'category_15' },
{ text: 'Category 16', value: 'category_16' },
{ text: 'Category 17', value: 'category_17' },
{ text: 'Category 18', value: 'category_18' },
{ text: 'Category 19', value: 'category_19' },
{ text: 'Category 20', value: 'category_20' },
{ text: 'Category 21', value: 'category_21' },
{ text: 'Category 22', value: 'category_22' },
{ text: 'Category 23', value: 'category_23' },
{ text: 'Category 24', value: 'category_24' },
{ text: 'Category 25', value: 'category_25' },
],
},
{
name: 'Division',
value: [],
options: [
{ text: 'Division 1', value: 'division_1' },
{ text: 'Division 2', value: 'division_2' },
{ text: 'Division 3', value: 'division_3' },
{ text: 'Division 4', value: 'division_4' },
{ text: 'Division 5', value: 'division_5' },
{ text: 'Division 6', value: 'division_6' },
{ text: 'Division 7', value: 'division_7' },
{ text: 'Division 8', value: 'division_8' },
{ text: 'Division 9', value: 'division_9' },
{ text: 'Division 10', value: 'division_10' },
],
},
])
const selectedFilters = computed(() =>
filters.value.map((f) => ({ filterName: f.name, selected: f.value.map((fv) => fv.value) }))
)
return { filters, selectedFilters }
},
}
</script>
# API
src:
pitcherify/src/components/PFilterDropdown/PFilterDropdown.vue
Pitcher props
Vuetify props
Inherits attributes from vuetify component:
VTextField
Pass props at:
*
(* means root level as Pitcher props on the <VTextField />)
Props listed below can be used on
<PFilterDropdown />