From 55db3b3079fb10a43a0304f01f648511c990ce7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 14 Jan 2021 14:52:11 +0300
Subject: [PATCH 1/7] Fix #841 - New Lazy DataTable Demo with Remote Source

---
 src/service/CustomerService.js            |   4 +-
 src/views/datatable/DataTableLazyDemo.vue | 294 +++++++++++++++++++---
 2 files changed, 256 insertions(+), 42 deletions(-)

diff --git a/src/service/CustomerService.js b/src/service/CustomerService.js
index 2b2820713..2498173fa 100755
--- a/src/service/CustomerService.js
+++ b/src/service/CustomerService.js
@@ -18,7 +18,7 @@ export default class CustomerService {
 		return axios.get('demo/data/customers-xlarge.json').then(res => res.data.data);
   }
   
-  getCustomers() {
-    return axios.get('https://www.primefaces.org/data/customers').then(res => res.data.customers)
+  getCustomers(params) {
+    return axios.get('https://www.primefaces.org/data/customers', { params }).then(res => res.data)
   }
 }
\ No newline at end of file
diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue
index 74fcb6a74..16f94a278 100755
--- a/src/views/datatable/DataTableLazyDemo.vue
+++ b/src/views/datatable/DataTableLazyDemo.vue
@@ -12,12 +12,35 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10"
-                    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country.name" header="Country"></Column>
-                    <Column field="company" header="Company"></Column>
-                    <Column field="representative.name" header="Representative"></Column>
+                <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt"
+                    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort">
+                    <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">  
+                        <template #filter>
+                            <InputText type="text" v-model="filters['name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/>
+                        </template>                    
+                    </Column>
+                    <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true">
+                        <template #filter>
+                            <InputText type="text" v-model="filters['country.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by country"/>
+                        </template>
+                    </Column>
+                    <Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true">
+                        <template #filter>
+                            <InputText type="text" v-model="filters['company']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by company"/>
+                        </template>
+                    </Column>
+                    <Column field="representative.name" header="Representative" filterField="representative.name" filterMatchMode="contains" ref="representative.name" :sortable="true">
+                        <template #filter>
+                            <MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" @change="onFilter($event)" placeholder="All" class="p-column-filter">
+                                <template #option="slotProps">
+                                    <div class="p-multiselect-representative-option">
+                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <span class="image-text">{{slotProps.option.name}}</span>
+                                    </div>
+                                </template>
+                            </MultiSelect>
+                        </template>
+                    </Column>
                 </DataTable>
             </div>
 		</div>
@@ -27,12 +50,35 @@
                 <TabPanel header="Source">
 <pre v-code>
 <code><template v-pre>
-&lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10"
-    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
-    &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
-    &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
-    &lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
-    &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
+&lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt"
+    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort"&gt;
+    &lt;Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"&gt;
+        &lt;template #filter&gt;
+            &lt;InputText type="text" v-model="filters['name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true"&gt;
+        &lt;template #filter&gt;
+            &lt;InputText type="text" v-model="filters['country.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by country"/&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true"&gt;
+        &lt;template #filter&gt;
+            &lt;InputText type="text" v-model="filters['company']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by company"/&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="representative.name" header="Representative" filterField="representative.name" filterMatchMode="contains" ref="representative.name" :sortable="true"&gt;
+        &lt;template #filter&gt;
+            &lt;MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" @change="onFilter($event)" placeholder="All" class="p-column-filter"&gt;
+                &lt;template #option="slotProps"&gt;
+                    &lt;div class="p-multiselect-representative-option"&gt;
+                        &lt;img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /&gt;
+                        &lt;span class="image-text"&gt;{{slotProps.option.name}}&lt;/span&gt;
+                    &lt;/div&gt;
+                &lt;/template&gt;
+            &lt;/MultiSelect&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
 &lt;/DataTable&gt;
 </template>
 </code></pre>
@@ -46,10 +92,28 @@ export default {
         return {
             loading: false,
             totalRecords: 0,
-            customers: null
+            customers: null,
+            filters: {},
+            representatives: [
+                {name: "Amy Elsner", image: 'amyelsner.png'},
+                {name: "Anna Fali", image: 'annafali.png'},
+                {name: "Asiya Javayant", image: 'asiyajavayant.png'},
+                {name: "Bernardo Dominic", image: 'bernardodominic.png'},
+                {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
+                {name: "Ioni Bowcher", image: 'ionibowcher.png'},
+                {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
+                {name: "Onyama Limba", image: 'onyamalimba.png'},
+                {name: "Stephen Shaw", image: 'stephenshaw.png'},
+                {name: "XuXue Feng", image: 'xuxuefeng.png'}
+            ],
+            columns: [
+                {field: 'name', header: 'Name', placeholder: 'name', ref: 'name'},
+                {field: 'country.name', header: 'Country', placeholder: 'country', ref: 'country.name'},
+                {field: 'company', header: 'Company', placeholder: 'company', ref: 'company'},
+                {field: 'representative.name', header: 'Representative', placeholder: 'representative', ref: 'representative'}
+            ]
         }
     },
-    datasource: null,
     customerService: null,
     created() {
         this.customerService = new CustomerService();
@@ -57,23 +121,88 @@ export default {
     mounted() {
         this.loading = true;
 
-        setTimeout(() => {
-            this.customerService.getCustomers().then(data => {
-                this.datasource = data;
-                this.totalRecords = data.length,
-                this.customers = this.datasource.slice(0, 10);
-                this.loading = false;
-            });
-        }, 500);
+        this.customerService.getCustomers({lazyEvent: JSON.stringify({first: 0, rows: this.$refs.dt.rows})}).then(data => {
+            this.customers = data.customers;
+            this.totalRecords = data.totalRecords;
+            this.loading = false;
+        });
     },
     methods: {
-        onPage(event) {
+        onLazyEvent(event) {
+            const filters = {};
+            const x = JSON.parse(JSON.stringify(this.filters));
+            const y = Object.keys(x);
+
+            for(let i=0; i &lt;this.columns.length; i++) {
+                let obj = {};
+                obj.matchMode = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
+                for(let j=0; j &lt; y.length; j++) {
+                    if(this.columns[i].field === y[j]) {
+                        obj.value = this.filters[this.columns[i].field];
+                    }
+                    else obj.value = null;
+                }
+                filters[this.columns[i].field] = obj;
+            }
+          
             this.loading = true;
+            let params = {
+                first: event.first,
+                rows: event.rows,
+                sortField: event.sortField,
+                sortOrder: event.sortOrder,
+                filters: filters
+            };
 
             setTimeout(() => {
-                this.customers = this.datasource.slice(event.first, event.first + event.rows);
-                this.loading = false;
-            }, 500);
+                this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
+                    this.customers = data.customers;
+                    this.totalRecords = data.totalRecords;
+                    this.loading = false;
+                });
+            }, 1000);
+        },
+        onPage(event) {
+            this.onLazyEvent(event);
+        },
+        onSort(event) {
+            this.onLazyEvent(event);
+        },
+        onFilter(event) {
+            if(event.keyCode === 13 || event.value) {
+                const filters = {}; 
+                const x = JSON.parse(JSON.stringify(this.filters));
+                const y = Object.keys(x);
+
+                for(let i=0; i &lt; this.columns.length; i++) {
+                    let obj = {};
+                    obj.matchMode = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
+                    for(let j=0; j &lt; y.length; j++) {
+                        if(this.columns[i].field === y[j]) {
+                            obj["value"] = this.filters[this.columns[i].field];
+                        }
+                        else obj["value"] = null;
+                    }
+                    filters[this.columns[i].field] = obj;
+                }
+
+                this.loading = true;
+                let params = {
+                    first: 0,
+                    rows: this.$refs.dt.rows,
+                    sortField: null,
+                    sortOrder: null,
+                    filters: filters
+                };
+
+                setTimeout(() => {
+                    this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
+                        this.customers = data.customers;
+                        this.totalRecords = data.totalRecords;
+                        this.loading = false;
+                    });
+                }, 1000);
+            }
         }
     }
 }
@@ -93,10 +222,28 @@ export default {
         return {
             loading: false,
             totalRecords: 0,
-            customers: null
+            customers: null,
+            filters: {},
+            representatives: [
+                {name: "Amy Elsner", image: 'amyelsner.png'},
+                {name: "Anna Fali", image: 'annafali.png'},
+                {name: "Asiya Javayant", image: 'asiyajavayant.png'},
+                {name: "Bernardo Dominic", image: 'bernardodominic.png'},
+                {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
+                {name: "Ioni Bowcher", image: 'ionibowcher.png'},
+                {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
+                {name: "Onyama Limba", image: 'onyamalimba.png'},
+                {name: "Stephen Shaw", image: 'stephenshaw.png'},
+                {name: "XuXue Feng", image: 'xuxuefeng.png'}
+            ],
+            columns: [
+                {field: 'name', header: 'Name', placeholder: 'name', ref: 'name'},
+                {field: 'country.name', header: 'Country', placeholder: 'country', ref: 'country.name'},
+                {field: 'company', header: 'Company', placeholder: 'company', ref: 'company'},
+                {field: 'representative.name', header: 'Representative', placeholder: 'representative', ref: 'representative'}
+            ]
         }
     },
-    datasource: null,
     customerService: null,
     created() {
         this.customerService = new CustomerService();
@@ -104,23 +251,90 @@ export default {
     mounted() {
         this.loading = true;
 
-        setTimeout(() => {
-            this.customerService.getCustomers().then(data => {
-                this.datasource = data;
-                this.totalRecords = data.length,
-                this.customers = this.datasource.slice(0, 10);
-                this.loading = false;
-            });
-        }, 500);
+        this.customerService.getCustomers({lazyEvent: JSON.stringify({first: 0, rows: this.$refs.dt.rows})}).then(data => {
+            this.customers = data.customers;
+            this.totalRecords = data.totalRecords;
+            this.loading = false;
+        });
     },
     methods: {
-        onPage(event) {
+        onLazyEvent(event) {
+            const filters = {};
+            // proxy to object
+            const x = JSON.parse(JSON.stringify(this.filters));
+            const y = Object.keys(x);
+
+            for(let i=0; i<this.columns.length; i++) {
+                let obj = {};
+                obj.matchMode = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
+                for(let j=0; j<y.length; j++) {
+                    if(this.columns[i].field === y[j]) {
+                        obj.value = this.filters[this.columns[i].field];
+                    }
+                    else obj.value = null;
+                }
+                filters[this.columns[i].field] = obj;
+            }
+          
             this.loading = true;
+            let params = {
+                first: event.first,
+                rows: event.rows,
+                sortField: event.sortField,
+                sortOrder: event.sortOrder,
+                filters: filters
+            };
 
             setTimeout(() => {
-                this.customers = this.datasource.slice(event.first, event.first + event.rows);
-                this.loading = false;
-            }, 500);
+                this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
+                    this.customers = data.customers;
+                    this.totalRecords = data.totalRecords;
+                    this.loading = false;
+                });
+            }, 1000);
+        },
+        onPage(event) {
+            this.onLazyEvent(event);
+        },
+        onSort(event) {
+            this.onLazyEvent(event);
+        },
+        onFilter(event) {
+            if(event.keyCode === 13 || event.value) {
+                const filters = {}; 
+                // proxy to object
+                const x = JSON.parse(JSON.stringify(this.filters));
+                const y = Object.keys(x);
+
+                for(let i=0; i<this.columns.length; i++) {
+                    let obj = {};
+                    obj.matchMode = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
+                    for(let j=0; j<y.length; j++) {
+                        if(this.columns[i].field === y[j]) {
+                            obj["value"] = this.filters[this.columns[i].field];
+                        }
+                        else obj["value"] = null;
+                    }
+                    filters[this.columns[i].field] = obj;
+                }
+
+                this.loading = true;
+                let params = {
+                    first: 0,
+                    rows: this.$refs.dt.rows,
+                    sortField: null,
+                    sortOrder: null,
+                    filters: filters
+                };
+
+                setTimeout(() => {
+                    this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
+                        this.customers = data.customers;
+                        this.totalRecords = data.totalRecords;
+                        this.loading = false;
+                    });
+                }, 1000);
+            }
         }
     }
 }

From 2834331c8715b2f2d9443e0567586305dab9bf08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 14 Jan 2021 15:10:22 +0300
Subject: [PATCH 2/7] Fix setup url

---
 src/views/setup/Setup.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index c07b460ca..84c595a65 100755
--- a/src/views/setup/Setup.vue
+++ b/src/views/setup/Setup.vue
@@ -63,11 +63,11 @@ app.component('Dialog', Dialog);
 <code>
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;calendar demo&lt;/title&gt;
-&lt;link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css " rel="stylesheet"&gt;
+&lt;link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet"&gt;
 &lt;link href="https://unpkg.com/primevue/resources/primevue.min.css " rel="stylesheet"&gt;
-&lt;link href="https://unpkg.com/primeicons/primeicons.css " rel="stylesheet"&gt;
+&lt;link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet"&gt;
 &lt;script src="https://unpkg.com/vue@next"&gt;&lt;/script&gt;
-&lt;script src="https://unpkg.com/primevue/components/calendar/calendar.umd.min.js"&gt;&lt;/script&gt;
+&lt;script src="https://unpkg.com/primevue/calendar/calendar.umd.min.js"&gt;&lt;/script&gt;
 
 &lt;div id="app"&gt;
   &lt;p-calendar&gt;&lt;/p-calendar&gt;

From a5c4035ba04f2dc7796ef52aeaa78525f9547f30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 14 Jan 2021 16:32:52 +0300
Subject: [PATCH 3/7] delete useConfirm and useToast

---
 src/components/useconfirm/useConfirm.d.ts | 19 -------------------
 src/components/useconfirm/useConfirm.js   | 12 ------------
 src/components/usetoast/useToast.d.ts     |  1 -
 src/components/usetoast/useToast.js       | 12 ------------
 4 files changed, 44 deletions(-)
 delete mode 100644 src/components/useconfirm/useConfirm.d.ts
 delete mode 100644 src/components/useconfirm/useConfirm.js
 delete mode 100644 src/components/usetoast/useToast.d.ts
 delete mode 100644 src/components/usetoast/useToast.js

diff --git a/src/components/useconfirm/useConfirm.d.ts b/src/components/useconfirm/useConfirm.d.ts
deleted file mode 100644
index 44df8c048..000000000
--- a/src/components/useconfirm/useConfirm.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export declare function useConfirm(): { 
-    require(args:{ 
-        message?: string;
-        group?: string;
-        icon?: string;
-        header?: string;
-        accept?: Function;
-        reject?: Function;
-        acceptLabel?: string;
-        rejectLabel?: string;
-        acceptIcon?: string;
-        rejectIcon?: string;
-        blockScroll?: boolean;
-        acceptClass?: string;
-        rejectClass?: string;
-    }): void 
-
-    close(): void 
-}
\ No newline at end of file
diff --git a/src/components/useconfirm/useConfirm.js b/src/components/useconfirm/useConfirm.js
deleted file mode 100644
index 6de7503a7..000000000
--- a/src/components/useconfirm/useConfirm.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { inject } from 'vue';
-
-export const PrimeVueConfirmSymbol = Symbol();
-
-export function useConfirm() {
-    const PrimeVueConfirm = inject(PrimeVueConfirmSymbol);
-    if (!PrimeVueConfirm) {
-        throw new Error('No PrimeVue Confirmation provided!');
-    } 
-    
-    return PrimeVueConfirm;
-}
\ No newline at end of file
diff --git a/src/components/usetoast/useToast.d.ts b/src/components/usetoast/useToast.d.ts
deleted file mode 100644
index 6854a0212..000000000
--- a/src/components/usetoast/useToast.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export declare function useToast(): { add(args:{ severity?: string, summary?: string, detail?: string, life?: number, closable?: boolean, group?: string }): void }
\ No newline at end of file
diff --git a/src/components/usetoast/useToast.js b/src/components/usetoast/useToast.js
deleted file mode 100644
index 13d019121..000000000
--- a/src/components/usetoast/useToast.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { inject } from 'vue';
-
-export const PrimeVueToastSymbol = Symbol();
-
-export function useToast() {
-    const PrimeVueToast = inject(PrimeVueToastSymbol);
-    if (!PrimeVueToast) {
-        throw new Error('No PrimeVue Toast provided!');
-    } 
-    
-    return PrimeVueToast;
-}
\ No newline at end of file

From 754e2ee938720b9eea051819eacbf1b7a68e561b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 14 Jan 2021 16:36:42 +0300
Subject: [PATCH 4/7] add usetoast and useconfirm

---
 src/components/useconfirm/useconfirm.d.ts | 19 +++++++++++++++++++
 src/components/useconfirm/useconfirm.js   | 12 ++++++++++++
 src/components/usetoast/usetoast.d.ts     |  1 +
 src/components/usetoast/usetoast.js       | 12 ++++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 src/components/useconfirm/useconfirm.d.ts
 create mode 100644 src/components/useconfirm/useconfirm.js
 create mode 100644 src/components/usetoast/usetoast.d.ts
 create mode 100644 src/components/usetoast/usetoast.js

diff --git a/src/components/useconfirm/useconfirm.d.ts b/src/components/useconfirm/useconfirm.d.ts
new file mode 100644
index 000000000..44df8c048
--- /dev/null
+++ b/src/components/useconfirm/useconfirm.d.ts
@@ -0,0 +1,19 @@
+export declare function useConfirm(): { 
+    require(args:{ 
+        message?: string;
+        group?: string;
+        icon?: string;
+        header?: string;
+        accept?: Function;
+        reject?: Function;
+        acceptLabel?: string;
+        rejectLabel?: string;
+        acceptIcon?: string;
+        rejectIcon?: string;
+        blockScroll?: boolean;
+        acceptClass?: string;
+        rejectClass?: string;
+    }): void 
+
+    close(): void 
+}
\ No newline at end of file
diff --git a/src/components/useconfirm/useconfirm.js b/src/components/useconfirm/useconfirm.js
new file mode 100644
index 000000000..c0a588441
--- /dev/null
+++ b/src/components/useconfirm/useconfirm.js
@@ -0,0 +1,12 @@
+import { inject } from 'vue';
+
+export const PrimeVueConfirmSymbol = Symbol();
+
+export function useConfirm() {
+    const PrimeVueConfirm = inject(PrimeVueConfirmSymbol);
+    if (!PrimeVueConfirm) {
+        throw new Error('No PrimeVue Confirmation provided!');
+    } 
+
+    return PrimeVueConfirm;
+}
\ No newline at end of file
diff --git a/src/components/usetoast/usetoast.d.ts b/src/components/usetoast/usetoast.d.ts
new file mode 100644
index 000000000..eca896906
--- /dev/null
+++ b/src/components/usetoast/usetoast.d.ts
@@ -0,0 +1 @@
+export declare function useToast(): { add(args:{ severity?: string, summary?: string, detail?: string, life?: number, closable?: boolean, group?: string }): void } 
\ No newline at end of file
diff --git a/src/components/usetoast/usetoast.js b/src/components/usetoast/usetoast.js
new file mode 100644
index 000000000..24713327c
--- /dev/null
+++ b/src/components/usetoast/usetoast.js
@@ -0,0 +1,12 @@
+import { inject } from 'vue';
+
+export const PrimeVueToastSymbol = Symbol();
+
+export function useToast() {
+    const PrimeVueToast = inject(PrimeVueToastSymbol);
+    if (!PrimeVueToast) {
+        throw new Error('No PrimeVue Toast provided!');
+    } 
+
+    return PrimeVueToast;
+}
\ No newline at end of file

From 0984fa96faa6d29ada79dc8f9ac900000ee430ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 15 Jan 2021 13:03:06 +0300
Subject: [PATCH 5/7] #841 Refactor

---
 src/views/datatable/DataTableLazyDemo.vue | 167 +++++++---------------
 1 file changed, 53 insertions(+), 114 deletions(-)

diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue
index 16f94a278..2832faf56 100755
--- a/src/views/datatable/DataTableLazyDemo.vue
+++ b/src/views/datatable/DataTableLazyDemo.vue
@@ -13,7 +13,7 @@
 		<div class="content-section implementation">
             <div class="card">
                 <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt"
-                    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort">
+                    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)">
                     <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">  
                         <template #filter>
                             <InputText type="text" v-model="filters['name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/>
@@ -29,16 +29,9 @@
                             <InputText type="text" v-model="filters['company']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by company"/>
                         </template>
                     </Column>
-                    <Column field="representative.name" header="Representative" filterField="representative.name" filterMatchMode="contains" ref="representative.name" :sortable="true">
+                    <Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true">
                         <template #filter>
-                            <MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" @change="onFilter($event)" placeholder="All" class="p-column-filter">
-                                <template #option="slotProps">
-                                    <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
-                                        <span class="image-text">{{slotProps.option.name}}</span>
-                                    </div>
-                                </template>
-                            </MultiSelect>
+                            <InputText type="text" v-model="filters['representative.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/>
                         </template>
                     </Column>
                 </DataTable>
@@ -51,7 +44,7 @@
 <pre v-code>
 <code><template v-pre>
 &lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt"
-    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort"&gt;
+    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"&gt;
     &lt;Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"&gt;
         &lt;template #filter&gt;
             &lt;InputText type="text" v-model="filters['name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/&gt;
@@ -69,14 +62,7 @@
     &lt;/Column&gt;
     &lt;Column field="representative.name" header="Representative" filterField="representative.name" filterMatchMode="contains" ref="representative.name" :sortable="true"&gt;
         &lt;template #filter&gt;
-            &lt;MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" @change="onFilter($event)" placeholder="All" class="p-column-filter"&gt;
-                &lt;template #option="slotProps"&gt;
-                    &lt;div class="p-multiselect-representative-option"&gt;
-                        &lt;img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /&gt;
-                        &lt;span class="image-text"&gt;{{slotProps.option.name}}&lt;/span&gt;
-                    &lt;/div&gt;
-                &lt;/template&gt;
-            &lt;/MultiSelect&gt;
+            &lt;InputText type="text" v-model="filters['representative.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
 &lt;/DataTable&gt;
@@ -94,23 +80,12 @@ export default {
             totalRecords: 0,
             customers: null,
             filters: {},
-            representatives: [
-                {name: "Amy Elsner", image: 'amyelsner.png'},
-                {name: "Anna Fali", image: 'annafali.png'},
-                {name: "Asiya Javayant", image: 'asiyajavayant.png'},
-                {name: "Bernardo Dominic", image: 'bernardodominic.png'},
-                {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
-                {name: "Ioni Bowcher", image: 'ionibowcher.png'},
-                {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
-                {name: "Onyama Limba", image: 'onyamalimba.png'},
-                {name: "Stephen Shaw", image: 'stephenshaw.png'},
-                {name: "XuXue Feng", image: 'xuxuefeng.png'}
-            ],
+            lazyFilters: {},
             columns: [
-                {field: 'name', header: 'Name', placeholder: 'name', ref: 'name'},
-                {field: 'country.name', header: 'Country', placeholder: 'country', ref: 'country.name'},
-                {field: 'company', header: 'Company', placeholder: 'company', ref: 'company'},
-                {field: 'representative.name', header: 'Representative', placeholder: 'representative', ref: 'representative'}
+                {field: 'name', header: 'Name'},
+                {field: 'country.name', header: 'Country'},
+                {field: 'company', header: 'Company'},
+                {field: 'representative.name', header: 'Representative'}
             ]
         }
     },
@@ -126,23 +101,22 @@ export default {
             this.totalRecords = data.totalRecords;
             this.loading = false;
         });
+
+        const filters = {};
+        for(let i=0; i &lt; this.columns.length; i++) {
+            let obj = {};
+            obj["matchMode"] = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
+            obj["value"] = null;
+            filters[this.columns[i].field] = obj;
+        }
+
+        this.lazyFilters = filters;
     },
     methods: {
         onLazyEvent(event) {
-            const filters = {};
-            const x = JSON.parse(JSON.stringify(this.filters));
-            const y = Object.keys(x);
-
-            for(let i=0; i &lt;this.columns.length; i++) {
-                let obj = {};
-                obj.matchMode = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
-                for(let j=0; j &lt; y.length; j++) {
-                    if(this.columns[i].field === y[j]) {
-                        obj.value = this.filters[this.columns[i].field];
-                    }
-                    else obj.value = null;
-                }
-                filters[this.columns[i].field] = obj;
+            const proxyFilters = JSON.parse(JSON.stringify(this.filters));
+            for(let filter in proxyFilters) {
+                this.lazyFilters[filter].value = proxyFilters[filter] || null;
             }
           
             this.loading = true;
@@ -151,7 +125,7 @@ export default {
                 rows: event.rows,
                 sortField: event.sortField,
                 sortOrder: event.sortOrder,
-                filters: filters
+                filters: this.lazyFilters
             };
 
             setTimeout(() => {
@@ -169,21 +143,10 @@ export default {
             this.onLazyEvent(event);
         },
         onFilter(event) {
-            if(event.keyCode === 13 || event.value) {
-                const filters = {}; 
-                const x = JSON.parse(JSON.stringify(this.filters));
-                const y = Object.keys(x);
-
-                for(let i=0; i &lt; this.columns.length; i++) {
-                    let obj = {};
-                    obj.matchMode = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
-                    for(let j=0; j &lt; y.length; j++) {
-                        if(this.columns[i].field === y[j]) {
-                            obj["value"] = this.filters[this.columns[i].field];
-                        }
-                        else obj["value"] = null;
-                    }
-                    filters[this.columns[i].field] = obj;
+            if(event.keyCode === 13) {
+                const proxyFilters = JSON.parse(JSON.stringify(this.filters));
+                for(let filter in proxyFilters) {
+                    this.lazyFilters[filter].value = proxyFilters[filter] || null;
                 }
 
                 this.loading = true;
@@ -192,7 +155,7 @@ export default {
                     rows: this.$refs.dt.rows,
                     sortField: null,
                     sortOrder: null,
-                    filters: filters
+                    filters: this.lazyFilters
                 };
 
                 setTimeout(() => {
@@ -224,23 +187,12 @@ export default {
             totalRecords: 0,
             customers: null,
             filters: {},
-            representatives: [
-                {name: "Amy Elsner", image: 'amyelsner.png'},
-                {name: "Anna Fali", image: 'annafali.png'},
-                {name: "Asiya Javayant", image: 'asiyajavayant.png'},
-                {name: "Bernardo Dominic", image: 'bernardodominic.png'},
-                {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
-                {name: "Ioni Bowcher", image: 'ionibowcher.png'},
-                {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
-                {name: "Onyama Limba", image: 'onyamalimba.png'},
-                {name: "Stephen Shaw", image: 'stephenshaw.png'},
-                {name: "XuXue Feng", image: 'xuxuefeng.png'}
-            ],
+            lazyFilters: {},
             columns: [
-                {field: 'name', header: 'Name', placeholder: 'name', ref: 'name'},
-                {field: 'country.name', header: 'Country', placeholder: 'country', ref: 'country.name'},
-                {field: 'company', header: 'Company', placeholder: 'company', ref: 'company'},
-                {field: 'representative.name', header: 'Representative', placeholder: 'representative', ref: 'representative'}
+                {field: 'name', header: 'Name'},
+                {field: 'country.name', header: 'Country'},
+                {field: 'company', header: 'Company'},
+                {field: 'representative.name', header: 'Representative'}
             ]
         }
     },
@@ -256,24 +208,22 @@ export default {
             this.totalRecords = data.totalRecords;
             this.loading = false;
         });
+
+        const filters = {};
+        for(let i=0; i<this.columns.length; i++) {
+            let obj = {};
+            obj["matchMode"] = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
+            obj["value"] = null;
+            filters[this.columns[i].field] = obj;
+        }
+
+        this.lazyFilters = filters;
     },
     methods: {
         onLazyEvent(event) {
-            const filters = {};
-            // proxy to object
-            const x = JSON.parse(JSON.stringify(this.filters));
-            const y = Object.keys(x);
-
-            for(let i=0; i<this.columns.length; i++) {
-                let obj = {};
-                obj.matchMode = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
-                for(let j=0; j<y.length; j++) {
-                    if(this.columns[i].field === y[j]) {
-                        obj.value = this.filters[this.columns[i].field];
-                    }
-                    else obj.value = null;
-                }
-                filters[this.columns[i].field] = obj;
+            const proxyFilters = JSON.parse(JSON.stringify(this.filters));
+            for(let filter in proxyFilters) {
+                this.lazyFilters[filter].value = proxyFilters[filter] || null;
             }
           
             this.loading = true;
@@ -282,7 +232,7 @@ export default {
                 rows: event.rows,
                 sortField: event.sortField,
                 sortOrder: event.sortOrder,
-                filters: filters
+                filters: this.lazyFilters
             };
 
             setTimeout(() => {
@@ -300,22 +250,11 @@ export default {
             this.onLazyEvent(event);
         },
         onFilter(event) {
-            if(event.keyCode === 13 || event.value) {
-                const filters = {}; 
+            if(event.keyCode === 13) {
                 // proxy to object
-                const x = JSON.parse(JSON.stringify(this.filters));
-                const y = Object.keys(x);
-
-                for(let i=0; i<this.columns.length; i++) {
-                    let obj = {};
-                    obj.matchMode = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
-                    for(let j=0; j<y.length; j++) {
-                        if(this.columns[i].field === y[j]) {
-                            obj["value"] = this.filters[this.columns[i].field];
-                        }
-                        else obj["value"] = null;
-                    }
-                    filters[this.columns[i].field] = obj;
+                const proxyFilters = JSON.parse(JSON.stringify(this.filters));
+                for(let filter in proxyFilters) {
+                    this.lazyFilters[filter].value = proxyFilters[filter] || null;
                 }
 
                 this.loading = true;
@@ -324,7 +263,7 @@ export default {
                     rows: this.$refs.dt.rows,
                     sortField: null,
                     sortOrder: null,
-                    filters: filters
+                    filters: this.lazyFilters
                 };
 
                 setTimeout(() => {

From a5a9b397ef3dd4747b1c8e8a99ce6939a59535fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 15 Jan 2021 13:32:37 +0300
Subject: [PATCH 6/7] menu fix

---
 src/AppMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 2b1d59109..b12af6df8 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -11,7 +11,7 @@
                             <Tag v-if="child.badge" :value="child.badge"></Tag>
                         </router-link>
                         <template v-if="child.children">
-                           <router-link :to="child.meta[0]" v-slot="{isActive}" custom>
+                           <router-link :to="child.children[0].to" v-slot="{isActive}" custom>
                                 <div>
                                     <a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">{{child.name}}</a>
                                     <transition name="p-toggleable-content">

From 00fc9a26ab0b97d215490ecdc84669f83f1fc005 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 15 Jan 2021 15:47:39 +0300
Subject: [PATCH 7/7] remove unnecessary class

---
 src/components/cascadeselect/CascadeSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 95993d2c0..a2bc839ea 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -15,7 +15,7 @@
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div :ref="overlayRef" class="p-cascadeselect-panel p-component" v-if="overlayVisible">
                 <div class="p-cascadeselect-items-wrapper">
-                    <CascadeSelectSub :options="options" :selectionPath="selectionPath" class="p-cascadeselect-items" 
+                    <CascadeSelectSub :options="options" :selectionPath="selectionPath" 
                         :optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots"
                         :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" 
                         @option-select="onOptionSelect" @optiongroup-select="onOptionGroupSelect" :dirty="dirty" :root="true" />