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

Placeholder support for #271

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

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

@ -7,7 +7,7 @@
<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">
<slot name="value" :value="value">
<slot name="value" :value="value" :placeholder="placeholder">
{{label}}
</slot>
</label>
@ -425,7 +425,7 @@ export default {
'p-dropdown-label p-inputtext',
{
'p-placeholder': this.label === this.placeholder,
'p-dropdown-label-empty': (this.label === 'p-emptylabel' || this.label.length === 0)
'p-dropdown-label-empty': !this.$scopedSlots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
}
];
},

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

@ -15,14 +15,14 @@
<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" :filter="true" :showClear="true">
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :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
{{slotProps.placeholder}}
</span>
</template>
<template #option="slotProps">

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

@ -43,14 +43,14 @@ data() {
<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" :filter="true" :showClear="true"&gt;
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :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
{{slotProps.placeholder}}
&lt;/span&gt;
&lt;/template&gt;
&lt;template #option="slotProps"&gt;
@ -294,13 +294,13 @@ 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" :filter="true" :showClear="true"&gt;
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :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
{{slotProps.placeholder}}
&lt;/span&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-dropdown-car-option"&gt;