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" <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"> aria-haspopup="listbox" :aria-expanded="overlayVisible">
<label v-if="!editable" :class="labelClass"> <label v-if="!editable" :class="labelClass">
<slot name="value" :value="value"> <slot name="value" :value="value" :placeholder="placeholder">
{{label}} {{label}}
</slot> </slot>
</label> </label>
@ -425,7 +425,7 @@ export default {
'p-dropdown-label p-inputtext', 'p-dropdown-label p-inputtext',
{ {
'p-placeholder': this.label === this.placeholder, '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"/> <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h3>Advanced with Templating, Filtering and Clear Icon</h3> <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"> <template #value="slotProps">
<div class="p-dropdown-car-value" v-if="slotProps.value"> <div class="p-dropdown-car-value" v-if="slotProps.value">
<img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /> <img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" />
<span>{{slotProps.value.brand}}</span> <span>{{slotProps.value.brand}}</span>
</div> </div>
<span v-else> <span v-else>
Select a Car {{slotProps.placeholder}}
</span> </span>
</template> </template>
<template #option="slotProps"> <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> <p>In addition the <i>value</i> template can be used to customize the selected value.</p>
<CodeHighlight> <CodeHighlight>
<template v-pre> <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;template #value="slotProps"&gt;
&lt;div class="p-dropdown-car-value" v-if="slotProps.value"&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;img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;span v-else&gt; &lt;span v-else&gt;
Select a Car {{slotProps.placeholder}}
&lt;/span&gt; &lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
@ -294,13 +294,13 @@ data() {
&lt;Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/&gt; &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;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;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;img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;span v-else&gt; &lt;span v-else&gt;
Select a Car {{slotProps.placeholder}}
&lt;/span&gt; &lt;/span&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-dropdown-car-option"&gt; &lt;div class="p-dropdown-car-option"&gt;