Merge branch 'master' of https://github.com/primefaces/primevue
commit
dc07c02924
|
@ -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">
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -7,6 +7,6 @@ export function useConfirm() {
|
|||
if (!PrimeVueConfirm) {
|
||||
throw new Error('No PrimeVue Confirmation provided!');
|
||||
}
|
||||
|
||||
|
||||
return PrimeVueConfirm;
|
||||
}
|
|
@ -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 }
|
|
@ -7,6 +7,6 @@ export function useToast() {
|
|||
if (!PrimeVueToast) {
|
||||
throw new Error('No PrimeVue Toast provided!');
|
||||
}
|
||||
|
||||
|
||||
return PrimeVueToast;
|
||||
}
|
|
@ -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)
|
||||
}
|
||||
}
|
|
@ -12,12 +12,28 @@
|
|||
|
||||
<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($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"/>
|
||||
</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>
|
||||
<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($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"/>
|
||||
</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>
|
||||
</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().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;
|
||||
});
|
||||
|
||||
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: {
|
||||
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.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) {
|
||||
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().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;
|
||||
});
|
||||
|
||||
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: {
|
||||
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.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) {
|
||||
// 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>
|
||||
<meta charset="utf-8">
|
||||
<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/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/primevue/components/calendar/calendar.umd.min.js"></script>
|
||||
<script src="https://unpkg.com/primevue/calendar/calendar.umd.min.js"></script>
|
||||
|
||||
<div id="app">
|
||||
<p-calendar></p-calendar>
|
||||
|
|
Loading…
Reference in New Issue