Fixed #974 - Dropdown Enhancements
Cagatay Civici
parent
5205954063
commit
7b6e8e2e68
|
|
@ -6,10 +6,14 @@ interface DropdownProps {
|
|||
optionLabel?: string;
|
||||
optionValue?: any;
|
||||
optionDisabled?: boolean;
|
||||
optionGroupLabel?: string;
|
||||
optionGroupChildren?: string;
|
||||
scrollHeight?: string;
|
||||
filter?: boolean;
|
||||
filterPlaceholder?: string;
|
||||
filterLocale?: string;
|
||||
filterMatchMode?: string;
|
||||
filterFields?: string[];
|
||||
editable?: boolean;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
|
|
@ -20,6 +24,7 @@ interface DropdownProps {
|
|||
ariaLabelledBy?: string;
|
||||
appendTo?: string;
|
||||
emptyFilterMessage?: string;
|
||||
emptyMessage?: string;
|
||||
}
|
||||
|
||||
declare class Dropdown {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,17 @@
|
|||
<h5>Editable</h5>
|
||||
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
||||
|
||||
<h5>Grouped</h5>
|
||||
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
{{selectedGroupedCity}}
|
||||
|
||||
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
|
||||
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
|
||||
<template #value="slotProps">
|
||||
|
|
@ -50,6 +61,7 @@ export default {
|
|||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
selectedCountry: null,
|
||||
selectedGroupedCity: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
|
|
@ -68,7 +80,34 @@ export default {
|
|||
{name: 'Japan', code: 'JP'},
|
||||
{name: 'Spain', code: 'ES'},
|
||||
{name: 'United States', code: 'US'}
|
||||
]
|
||||
],
|
||||
groupedCities: [{
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
{label: 'Hamburg', value: 'Hamburg'},
|
||||
{label: 'Munich', value: 'Munich'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
{label: 'New York', value: 'New York'},
|
||||
{label: 'San Francisco', value: 'San Francisco'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
{label: 'Tokyo', value: 'Tokyo'},
|
||||
{label: 'Yokohama', value: 'Yokohama'}
|
||||
]
|
||||
}]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -35,19 +35,22 @@ data() {
|
|||
<p>Common pattern is providing an empty option as the placeholder when using native selects, however Dropdown has built-in support using the placeholder option so it is suggested to use it instead of creating an empty option.</p>
|
||||
|
||||
<h5>Filtering</h5>
|
||||
<p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property.</p>
|
||||
<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default,
|
||||
optionLabel is used when searching and <i>filterFields</i> can be used to customize the fields being utilized. Furthermore, <i>filterMatchMode</i> is available
|
||||
to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".</p>
|
||||
|
||||
<pre v-code><code>
|
||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Custom Content</h5>
|
||||
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
|
||||
<p>In addition the <i>value</i> template can be used to customize the selected value.</p>
|
||||
<h5>Templating</h5>
|
||||
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.
|
||||
In addition <i>value</i>, <i>optiongroup</i>, <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true">
|
||||
<template #value="slotProps">
|
||||
<template #header></template>
|
||||
<template #value="slotProps">
|
||||
<div class="p-dropdown-car-value" v-if="slotProps.value">
|
||||
<img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" />
|
||||
<span>{{slotProps.value.brand}}</span>
|
||||
|
|
@ -62,6 +65,7 @@ data() {
|
|||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer></template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</code></pre>
|
||||
|
|
@ -109,6 +113,18 @@ data() {
|
|||
<td>null</td>
|
||||
<td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>optionGroupLabel</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Property name or getter function to use as the label of an option group.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>optionGroupChildren</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Property name or getter function that refers to the children options of option group.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scrollHeight</td>
|
||||
<td>string</td>
|
||||
|
|
@ -119,7 +135,7 @@ data() {
|
|||
<td>filter</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When specified, displays an input field to filter the items on keyup.</td>
|
||||
<td>When specified, displays a filter input at header.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>filterPlaceholder</td>
|
||||
|
|
@ -133,6 +149,18 @@ data() {
|
|||
<td>undefined</td>
|
||||
<td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>filterMatchMode</td>
|
||||
<td>string</td>
|
||||
<td>contains</td>
|
||||
<td>Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>filterFields</td>
|
||||
<td>array</td>
|
||||
<td>null</td>
|
||||
<td>Fields used when filtering the options, defaults to optionLabel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>editable</td>
|
||||
<td>boolean</td>
|
||||
|
|
@ -191,7 +219,13 @@ data() {
|
|||
<td>emptyFilterMessage</td>
|
||||
<td>string</td>
|
||||
<td>No results found</td>
|
||||
<td>Text to display when filtering does not return any results.</td>
|
||||
<td>Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>emptyMessage</td>
|
||||
<td>string</td>
|
||||
<td>No results found</td>
|
||||
<td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -274,6 +308,53 @@ data() {
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Slots</h5>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>option</td>
|
||||
<td>option: Option instance <br />
|
||||
index: Index of the option</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>optiongroup</td>
|
||||
<td>option: OptionGroup instance <br />
|
||||
index: Index of the option group</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>value: Value of the component <br />
|
||||
placeholder: Placeholder prop value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>header</td>
|
||||
<td>value: Value of the component <br />
|
||||
options: Displayed options</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>footer</td>
|
||||
<td>value: Value of the component <br />
|
||||
options: Displayed options</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>emptyfilter</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>empty</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
@ -342,11 +423,22 @@ data() {
|
|||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<h5>Basic</h5>
|
||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
|
||||
|
||||
<h5>Editable</h5>
|
||||
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
||||
|
||||
<h5>Grouped</h5>
|
||||
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
{{selectedGroupedCity}}
|
||||
|
||||
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
|
||||
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
|
||||
<template #value="slotProps">
|
||||
|
|
@ -375,6 +467,7 @@ export default {
|
|||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
selectedCountry: null,
|
||||
selectedGroupedCity: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
|
|
@ -393,7 +486,34 @@ export default {
|
|||
{name: 'Japan', code: 'JP'},
|
||||
{name: 'Spain', code: 'ES'},
|
||||
{name: 'United States', code: 'US'}
|
||||
]
|
||||
],
|
||||
groupedCities: [{
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
{label: 'Hamburg', value: 'Hamburg'},
|
||||
{label: 'Munich', value: 'Munich'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
{label: 'New York', value: 'New York'},
|
||||
{label: 'San Francisco', value: 'San Francisco'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
{label: 'Tokyo', value: 'Tokyo'},
|
||||
{label: 'Yokohama', value: 'Yokohama'}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -421,24 +541,33 @@ export default {
|
|||
<h5>Editable</h5>
|
||||
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
||||
|
||||
<h5>Grouped</h5>
|
||||
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
{{selectedGroupedCity}}
|
||||
|
||||
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
|
||||
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
|
||||
<template #value="slotProps">
|
||||
<div class="country-item country-item-value" v-if="slotProps.value">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{ slotProps.value.name }}</div>
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
|
||||
<div>{{slotProps.value.name}}</div>
|
||||
</div>
|
||||
<span v-else>
|
||||
{{slotProps.placeholder}}
|
||||
</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
<div>{{ slotProps.option.name }}</div>
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
|
@ -453,6 +582,7 @@ export default {
|
|||
selectedCity1: null,
|
||||
selectedCity2: null,
|
||||
selectedCountry: null,
|
||||
selectedGroupedCity: null,
|
||||
cities: [
|
||||
{name: 'New York', code: 'NY'},
|
||||
{name: 'Rome', code: 'RM'},
|
||||
|
|
@ -471,7 +601,34 @@ export default {
|
|||
{name: 'Japan', code: 'JP'},
|
||||
{name: 'Spain', code: 'ES'},
|
||||
{name: 'United States', code: 'US'}
|
||||
]
|
||||
],
|
||||
groupedCities: [{
|
||||
label: 'Germany', code: 'DE',
|
||||
items: [
|
||||
{label: 'Berlin', value: 'Berlin'},
|
||||
{label: 'Frankfurt', value: 'Frankfurt'},
|
||||
{label: 'Hamburg', value: 'Hamburg'},
|
||||
{label: 'Munich', value: 'Munich'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'USA', code: 'US',
|
||||
items: [
|
||||
{label: 'Chicago', value: 'Chicago'},
|
||||
{label: 'Los Angeles', value: 'Los Angeles'},
|
||||
{label: 'New York', value: 'New York'},
|
||||
{label: 'San Francisco', value: 'San Francisco'}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan', code: 'JP',
|
||||
items: [
|
||||
{label: 'Kyoto', value: 'Kyoto'},
|
||||
{label: 'Osaka', value: 'Osaka'},
|
||||
{label: 'Tokyo', value: 'Tokyo'},
|
||||
{label: 'Yokohama', value: 'Yokohama'}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue