Merge branch 'master' of https://github.com/primefaces/primevue
commit
dc07c02924
|
@ -11,7 +11,7 @@
|
||||||
<Tag v-if="child.badge" :value="child.badge"></Tag>
|
<Tag v-if="child.badge" :value="child.badge"></Tag>
|
||||||
</router-link>
|
</router-link>
|
||||||
<template v-if="child.children">
|
<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>
|
<div>
|
||||||
<a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">{{child.name}}</a>
|
<a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">{{child.name}}</a>
|
||||||
<transition name="p-toggleable-content">
|
<transition name="p-toggleable-content">
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
|
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
|
||||||
<div :ref="overlayRef" class="p-cascadeselect-panel p-component" v-if="overlayVisible">
|
<div :ref="overlayRef" class="p-cascadeselect-panel p-component" v-if="overlayVisible">
|
||||||
<div class="p-cascadeselect-items-wrapper">
|
<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"
|
:optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots"
|
||||||
:optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren"
|
:optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren"
|
||||||
@option-select="onOptionSelect" @optiongroup-select="onOptionGroupSelect" :dirty="dirty" :root="true" />
|
@option-select="onOptionSelect" @optiongroup-select="onOptionGroupSelect" :dirty="dirty" :root="true" />
|
||||||
|
|
|
@ -18,7 +18,7 @@ export default class CustomerService {
|
||||||
return axios.get('demo/data/customers-xlarge.json').then(res => res.data.data);
|
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)
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -12,12 +12,28 @@
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<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>
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,12 +43,28 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<pre v-code>
|
<pre v-code>
|
||||||
<code><template v-pre>
|
<code><template v-pre>
|
||||||
<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" filterMatchMode="contains" 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>
|
</DataTable>
|
||||||
</template>
|
</template>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
@ -46,10 +78,17 @@ export default {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
totalRecords: 0,
|
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,
|
customerService: null,
|
||||||
created() {
|
created() {
|
||||||
this.customerService = new CustomerService();
|
this.customerService = new CustomerService();
|
||||||
|
@ -57,23 +96,76 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.loading = true;
|
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: {
|
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;
|
this.loading = true;
|
||||||
|
let params = {
|
||||||
|
first: event.first,
|
||||||
|
rows: event.rows,
|
||||||
|
sortField: event.sortField,
|
||||||
|
sortOrder: event.sortOrder,
|
||||||
|
filters: this.lazyFilters
|
||||||
|
};
|
||||||
|
|
||||||
setTimeout(() => {
|
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 {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
totalRecords: 0,
|
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,
|
customerService: null,
|
||||||
created() {
|
created() {
|
||||||
this.customerService = new CustomerService();
|
this.customerService = new CustomerService();
|
||||||
|
@ -104,23 +203,77 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.loading = true;
|
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: {
|
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;
|
this.loading = true;
|
||||||
|
let params = {
|
||||||
|
first: event.first,
|
||||||
|
rows: event.rows,
|
||||||
|
sortField: event.sortField,
|
||||||
|
sortOrder: event.sortOrder,
|
||||||
|
filters: this.lazyFilters
|
||||||
|
};
|
||||||
|
|
||||||
setTimeout(() => {
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -63,11 +63,11 @@ app.component('Dialog', Dialog);
|
||||||
<code>
|
<code>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>calendar demo</title>
|
<title>calendar demo</title>
|
||||||
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css " rel="stylesheet">
|
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
|
||||||
<link href="https://unpkg.com/primevue/resources/primevue.min.css " rel="stylesheet">
|
<link href="https://unpkg.com/primevue/resources/primevue.min.css " rel="stylesheet">
|
||||||
<link href="https://unpkg.com/primeicons/primeicons.css " rel="stylesheet">
|
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
|
||||||
<script src="https://unpkg.com/vue@next"></script>
|
<script src="https://unpkg.com/vue@next"></script>
|
||||||
<script src="https://unpkg.com/primevue/components/calendar/calendar.umd.min.js"></script>
|
<script src="https://unpkg.com/primevue/calendar/calendar.umd.min.js"></script>
|
||||||
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<p-calendar></p-calendar>
|
<p-calendar></p-calendar>
|
||||||
|
|
Loading…
Reference in New Issue