Float label support for dropdown and multiselect

pull/358/head
cagataycivici 2020-07-03 11:51:23 +03:00
parent 627396f031
commit 9b582b315b
2 changed files with 9 additions and 5 deletions

View File

@ -422,7 +422,9 @@ export default {
{ {
'p-disabled': this.disabled, 'p-disabled': this.disabled,
'p-dropdown-clearable': this.showClear && !this.disabled, 'p-dropdown-clearable': this.showClear && !this.disabled,
'p-focus': this.focused 'p-focus': this.focused,
'p-inputwrapper-filled': this.value,
'p-inputwrapper-focus': this.focused
} }
]; ];
}, },

View File

@ -5,11 +5,11 @@
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/> aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
</div> </div>
<div class="p-multiselect-label-container"> <div class="p-multiselect-label-container">
<label :class="labelClass"> <div :class="labelClass">
<slot name="value" :value="value" :placeholder="placeholder"> <slot name="value" :value="value" :placeholder="placeholder">
{{label}} {{label}}
</slot> </slot>
</label> </div>
</div> </div>
<div class="p-multiselect-trigger"> <div class="p-multiselect-trigger">
<span class="p-multiselect-trigger-icon pi pi-chevron-down"></span> <span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
@ -353,7 +353,9 @@ export default {
'p-multiselect p-component', 'p-multiselect p-component',
{ {
'p-disabled': this.disabled, 'p-disabled': this.disabled,
'p-focus': this.focused 'p-focus': this.focused,
'p-inputwrapper-filled': this.value && this.value.length,
'p-inputwrapper-focus': this.focused
} }
]; ];
}, },
@ -373,7 +375,7 @@ export default {
label = ''; label = '';
for(let i = 0; i < this.value.length; i++) { for(let i = 0; i < this.value.length; i++) {
if(i !== 0) { if(i !== 0) {
label += ','; label += ', ';
} }
label += this.getLabelByValue(this.value[i]); label += this.getLabelByValue(this.value[i]);