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

Fixed #359 - Filter event for Listbox, Dropdown and MultiSelect

pull/388/head
cagataycivici 2020-07-04 14:53:12 +03:00
parent 9ba8911b6c
commit 9e76c66793
9 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/dropdown/Dropdown.d.ts vendored
View File

@ -25,6 +25,7 @@ export declare class Dropdown extends Vue {
$emit(eventName: 'before-leave'): this;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
$slot: {
option: VNode[];
}

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

@ -19,7 +19,7 @@
<div ref="overlay" class="p-dropdown-panel p-component" v-if="overlayVisible">
<div class="p-dropdown-header" v-if="filter">
<div class="p-dropdown-filter-container">
<input type="text" ref="filterInput" v-model="filterValue" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown" />
<input type="text" ref="filterInput" v-model="filterValue" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown" @input="onFilterChange"/>
<span class="p-dropdown-filter-icon pi pi-search"></span>
</div>
</div>
@ -407,6 +407,9 @@ export default {
else
document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
}
},
onFilterChange(event) {
this.$emit('filter', {originalEvent: event, value: event.target.value});
}
},
computed: {

1
src/components/listbox/Listbox.d.ts vendored
View File

@ -17,6 +17,7 @@ export declare class Listbox extends Vue {
ariaLabelledBy?: string;
$emit(eventName: 'input', value: any): this;
$emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;
$emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
$slots: {
option: VNode[];
}

5
src/components/listbox/Listbox.vue
View File

@ -2,7 +2,7 @@
<div class="p-listbox p-component">
<div class="p-listbox-header" v-if="filter">
<div class="p-listbox-filter-container">
<input type="text" class="p-listbox-filter p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder">
<input type="text" class="p-listbox-filter p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder" @input="onFilterChange">
<span class="p-listbox-filter-icon pi pi-search"></span>
</div>
</div>
@ -216,6 +216,9 @@ export default {
return DomHandler.hasClass(prevItem, 'p-disabled') ? this.findPrevItem(prevItem) : prevItem;
else
return null;
},
onFilterChange(event) {
this.$emit('filter', {originalEvent: event, value: event.target.value});
}
},
computed: {

1
src/components/multiselect/MultiSelect.d.ts vendored
View File

@ -23,6 +23,7 @@ export declare class MultiSelect extends Vue {
$emit(eventName: 'before-leave'): this;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
$slots: {
value: VNode[];
option: VNode[];

5
src/components/multiselect/MultiSelect.vue
View File

@ -26,7 +26,7 @@
</div>
</div>
<div v-if="filter" class="p-multiselect-filter-container">
<input type="text" v-model="filterValue" class="p-multiselect-filter p-inputtext p-component" :placeholder="filterPlaceholder">
<input type="text" v-model="filterValue" class="p-multiselect-filter p-inputtext p-component" :placeholder="filterPlaceholder" @input="onFilterChange">
<span class="p-multiselect-filter-icon pi pi-search"></span>
</div>
<button class="p-multiselect-close p-link" @click="onCloseClick" type="button" v-ripple>
@ -339,6 +339,9 @@ export default {
else
document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
}
},
onFilterChange(event) {
this.$emit('filter', {originalEvent: event, value: event.target.value});
}
},
computed: {

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

@ -229,6 +229,12 @@ data() {
<td>hide</td>
<td>-</td>
<td>Callback to invoke when the overlay is hidden.</td>
</tr>
<tr>
<td>filter</td>
<td>event.originalEvent: Original event <br />
event.value: Filter value </td>
<td>Callback to invoke on filter input.</td>
</tr>
</tbody>
</table>

6
src/views/listbox/ListboxDoc.vue
View File

@ -174,6 +174,12 @@ data() {
<td>input</td>
<td>value: New value</td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>filter</td>
<td>event.originalEvent: Original event <br />
event.value: Filter value </td>
<td>Callback to invoke on filter input.</td>
</tr>
</tbody>
</table>

6
src/views/multiselect/MultiSelectDoc.vue
View File

@ -218,6 +218,12 @@ data() {
<td>-</td>
<td>Callback to invoke when the overlay is hidden.</td>
</tr>
<tr>
<td>filter</td>
<td>event.originalEvent: Original event <br />
event.value: Filter value </td>
<td>Callback to invoke on filter input.</td>
</tr>
</tbody>
</table>
</div>