Merge branch 'master' of https://github.com/primefaces/primevue

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">

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" />

src/components/useconfirm/useconfirm.js

@@ -7,6 +7,6 @@ export function useConfirm() {
     if (!PrimeVueConfirm) {
         throw new Error('No PrimeVue Confirmation provided!');
     } 
-    
+
     return PrimeVueConfirm;
 }

src/components/usetoast/usetoast.d.ts

@@ -1 +1 @@
-export declare function useToast(): { add(args:{ severity?: string, summary?: string, detail?: string, life?: number, closable?: boolean, group?: string }): void }
+export declare function useToast(): { add(args:{ severity?: string, summary?: string, detail?: string, life?: number, closable?: boolean, group?: string }): void } 

src/components/usetoast/usetoast.js

@@ -7,6 +7,6 @@ export function useToast() {
     if (!PrimeVueToast) {
         throw new Error('No PrimeVue Toast provided!');
     } 
-    
+
     return PrimeVueToast;
 }

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() {
+  getCustomers(params) {
-    return axios.get('https://www.primefaces.org/data/customers').then(res => res.data.customers)
+    return axios.get('https://www.primefaces.org/data/customers', { params }).then(res => res.data)
   }
 }

src/views/datatable/DataTableLazyDemo.vue

@@ -12,12 +12,28 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10"
+                <DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt"
-                    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
+                    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)">
-                    <Column field="name" header="Name"></Column>
+                    <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">  
-                    <Column field="country.name" header="Country"></Column>
+                        <template #filter>
-                    <Column field="company" header="Company"></Column>
+                            <InputText type="text" v-model="filters['name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/>
-                    <Column field="representative.name" header="Representative"></Column>
+                        </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" ref="representative.name" :sortable="true">
+                        <template #filter>
+                            <InputText type="text" v-model="filters['representative.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/>
+                        </template>
+                    </Column>
                 </DataTable>
             </div>
 		</div>
@@ -27,12 +43,28 @@
                 <TabPanel header="Source">
 <pre v-code>
 <code><template v-pre>
-&lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10"
+&lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt"
-    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
+    :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"&gt;
-    &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
+    &lt;Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"&gt;
-    &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
+        &lt;template #filter&gt;
-    &lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
+            &lt;InputText type="text" v-model="filters['name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/&gt;
-    &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&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;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;
 </template>
 </code></pre>
@@ -46,10 +78,17 @@ export default {
         return {
             loading: false,
             totalRecords: 0,
-            customers: null
+            customers: null,
+            filters: {},
+            lazyFilters: {},
+            columns: [
+                {field: 'name', header: 'Name'},
+                {field: 'country.name', header: 'Country'},
+                {field: 'company', header: 'Company'},
+                {field: 'representative.name', header: 'Representative'}
+            ]
         }
     },
-    datasource: null,
     customerService: null,
     created() {
         this.customerService = new CustomerService();
@@ -57,23 +96,76 @@ export default {
     mounted() {
         this.loading = true;
 
-        setTimeout(() => {
+        this.customerService.getCustomers({lazyEvent: JSON.stringify({first: 0, rows: this.$refs.dt.rows})}).then(data => {
-            this.customerService.getCustomers().then(data => {
+            this.customers = data.customers;
-                this.datasource = data;
+            this.totalRecords = data.totalRecords;
-                this.totalRecords = data.length,
+            this.loading = false;
-                this.customers = this.datasource.slice(0, 10);
+        });
-                this.loading = false;
+
-            });
+        const filters = {};
-        }, 500);
+        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: {
-        onPage(event) {
+        onLazyEvent(event) {
+            const proxyFilters = JSON.parse(JSON.stringify(this.filters));
+            for(let filter in proxyFilters) {
+                this.lazyFilters[filter].value = proxyFilters[filter] || null;
+            }
+          
             this.loading = true;
+            let params = {
+                first: event.first,
+                rows: event.rows,
+                sortField: event.sortField,
+                sortOrder: event.sortOrder,
+                filters: this.lazyFilters
+            };
 
             setTimeout(() => {
-                this.customers = this.datasource.slice(event.first, event.first + event.rows);
+                this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
-                this.loading = false;
+                    this.customers = data.customers;
-            }, 500);
+                    this.totalRecords = data.totalRecords;
+                    this.loading = false;
+                });
+            }, 1000);
+        },
+        onPage(event) {
+            this.onLazyEvent(event);
+        },
+        onSort(event) {
+            this.onLazyEvent(event);
+        },
+        onFilter(event) {
+            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;
+                let params = {
+                    first: 0,
+                    rows: this.$refs.dt.rows,
+                    sortField: null,
+                    sortOrder: null,
+                    filters: this.lazyFilters
+                };
+
+                setTimeout(() => {
+                    this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
+                        this.customers = data.customers;
+                        this.totalRecords = data.totalRecords;
+                        this.loading = false;
+                    });
+                }, 1000);
+            }
         }
     }
 }
@@ -93,10 +185,17 @@ export default {
         return {
             loading: false,
             totalRecords: 0,
-            customers: null
+            customers: null,
+            filters: {},
+            lazyFilters: {},
+            columns: [
+                {field: 'name', header: 'Name'},
+                {field: 'country.name', header: 'Country'},
+                {field: 'company', header: 'Company'},
+                {field: 'representative.name', header: 'Representative'}
+            ]
         }
     },
-    datasource: null,
     customerService: null,
     created() {
         this.customerService = new CustomerService();
@@ -104,23 +203,77 @@ export default {
     mounted() {
         this.loading = true;
 
-        setTimeout(() => {
+        this.customerService.getCustomers({lazyEvent: JSON.stringify({first: 0, rows: this.$refs.dt.rows})}).then(data => {
-            this.customerService.getCustomers().then(data => {
+            this.customers = data.customers;
-                this.datasource = data;
+            this.totalRecords = data.totalRecords;
-                this.totalRecords = data.length,
+            this.loading = false;
-                this.customers = this.datasource.slice(0, 10);
+        });
-                this.loading = false;
+
-            });
+        const filters = {};
-        }, 500);
+        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: {
-        onPage(event) {
+        onLazyEvent(event) {
+            const proxyFilters = JSON.parse(JSON.stringify(this.filters));
+            for(let filter in proxyFilters) {
+                this.lazyFilters[filter].value = proxyFilters[filter] || null;
+            }
+          
             this.loading = true;
+            let params = {
+                first: event.first,
+                rows: event.rows,
+                sortField: event.sortField,
+                sortOrder: event.sortOrder,
+                filters: this.lazyFilters
+            };
 
             setTimeout(() => {
-                this.customers = this.datasource.slice(event.first, event.first + event.rows);
+                this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
-                this.loading = false;
+                    this.customers = data.customers;
-            }, 500);
+                    this.totalRecords = data.totalRecords;
+                    this.loading = false;
+                });
+            }, 1000);
+        },
+        onPage(event) {
+            this.onLazyEvent(event);
+        },
+        onSort(event) {
+            this.onLazyEvent(event);
+        },
+        onFilter(event) {
+            if(event.keyCode === 13) {
+                // proxy to object
+                const proxyFilters = JSON.parse(JSON.stringify(this.filters));
+                for(let filter in proxyFilters) {
+                    this.lazyFilters[filter].value = proxyFilters[filter] || null;
+                }
+
+                this.loading = true;
+                let params = {
+                    first: 0,
+                    rows: this.$refs.dt.rows,
+                    sortField: null,
+                    sortOrder: null,
+                    filters: this.lazyFilters
+                };
+
+                setTimeout(() => {
+                    this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
+                        this.customers = data.customers;
+                        this.totalRecords = data.totalRecords;
+                        this.loading = false;
+                    });
+                }, 1000);
+            }
         }
     }
 }

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;