vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #271 - Value slot for Dropdown

pull/310/head
cagataycivici 2020-04-17 23:37:20 +03:00
parent e4707c955a
commit 81dc76760b
3 changed files with 58 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/dropdown/Dropdown.vue
View File

@ -6,7 +6,11 @@
</div>
<input v-if="editable" type="text" class="p-dropdown-label p-inputtext" :disabled="disabled" @focus="onFocus" @blur="onBlur" :placeholder="placeholder" :value="editableInputValue" @input="onEditableInput"
aria-haspopup="listbox" :aria-expanded="overlayVisible">
<label v-if="!editable" :class="labelClass">{{label}}</label>
<label v-if="!editable" :class="labelClass">
<slot name="value" :value="value">
{{label}}
</slot>
</label>
<i v-if="showClear && value != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i>
<div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span>

23
src/views/dropdown/DropdownDemo.vue
View File

@ -15,7 +15,16 @@
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" :showClear="true">
<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>
</div>
<span v-else>
Select a Car
</span>
</template>
<template #option="slotProps">
<div class="p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
@ -69,7 +78,8 @@ export default {
width: 12em;
}
.p-dropdown-car-option {
.p-dropdown-car-option,
.p-dropdown-car-value {
display: flex;
justify-content: space-between;
align-items: center;
@ -83,4 +93,13 @@ export default {
margin-top: .125em;
}
}
.p-dropdown-car-value {
justify-content: flex-start;
}
.p-dropdown-empty-car-token {
background: #d95f00;
color: #ffffff;
}
</style>

37
src/views/dropdown/DropdownDoc.vue
View File

@ -40,10 +40,20 @@ data() {
<h3>Custom Content</h3>
<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>
<CodeHighlight>
<template v-pre>
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" :showClear="true"&gt;
&lt;template #value="slotProps"&gt;
&lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt;
&lt;img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;span v-else&gt;
Select a Car
&lt;/span&gt;
&lt;/template&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
@ -284,7 +294,14 @@ data() {
&lt;Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/&gt;
&lt;h3&gt;Advanced with Templating, Filtering and Clear Icon&lt;/h3&gt;
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" :showClear="true"&gt;
&lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt;
&lt;img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;span v-else&gt;
Select a Car
&lt;/span&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
@ -327,10 +344,11 @@ export default {
<CodeHighlight lang="css">
.p-dropdown {
width: 12em;
width: 12em;
}
.p-dropdown-car-option {
.p-dropdown-car-option,
.p-dropdown-car-value {
display: flex;
justify-content: space-between;
align-items: center;
@ -344,6 +362,15 @@ export default {
margin-top: .125em;
}
}
.p-dropdown-car-value {
justify-content: flex-start;
}
.p-dropdown-empty-car-token {
background: #d95f00;
color: #ffffff;
}
</CodeHighlight>
</TabPanel>
</TabView>