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

Fixed float label issue with Chips

pull/358/head
cagataycivici 2020-07-03 11:16:42 +03:00
parent 96b90bf85a
commit 6042ad55b5
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/chips/Chips.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="['p-chips p-component', {'p-inputwrapper-filled': value, 'p-inputwrapper-focus': focused}]"> <div :class="containerClass">
<ul :class="['p-inputtext p-chips-multiple-container', {'p-disabled': $attrs.disabled, 'p-focus': focused}]" @click="onWrapperClick()"> <ul :class="['p-inputtext p-chips-multiple-container', {'p-disabled': $attrs.disabled, 'p-focus': focused}]" @click="onWrapperClick()">
<li v-for="(val,i) of value" :key="`${i}_${val}`" class="p-chips-token p-highlight"> <li v-for="(val,i) of value" :key="`${i}_${val}`" class="p-chips-token p-highlight">
<slot name="chip" :value="val"> <slot name="chip" :value="val">
@ -8,7 +8,7 @@
</slot> </slot>
</li> </li>
<li class="p-chips-input-token"> <li class="p-chips-input-token">
<input ref="input" type="text" @focus="onFocus($event)" @blur="onBlur($event)" :placeholder="placeholder" <input ref="input" type="text" @focus="onFocus($event)" @blur="onBlur($event)" :placeholder="placeholder" @input="inputValue = $event.target.value"
@keydown="onKeyDown($event)" @paste="onPaste($event)" :disabled="$attrs.disabled || maxedOut" :aria-labelledby="ariaLabelledBy"> @keydown="onKeyDown($event)" @paste="onPaste($event)" :disabled="$attrs.disabled || maxedOut" :aria-labelledby="ariaLabelledBy">
</li> </li>
</ul> </ul>
@ -49,6 +49,7 @@ export default {
}, },
data() { data() {
return { return {
inputValue: null,
focused: false focused: false
}; };
}, },
@ -113,6 +114,7 @@ export default {
value: value value: value
}); });
this.$refs.input.value = ''; this.$refs.input.value = '';
this.inputValue = '';
if (preventDefault) { if (preventDefault) {
event.preventDefault(); event.preventDefault();
@ -144,6 +146,12 @@ export default {
computed: { computed: {
maxedOut() { maxedOut() {
return this.max && this.value && this.max === this.value.length; return this.max && this.value && this.max === this.value.length;
},
containerClass() {
return ['p-chips p-component', {
'p-inputwrapper-filled': ((this.value && this.value.length) || (this.inputValue && this.inputValue.length)),
'p-inputwrapper-focus': this.focused
}];
} }
} }
} }