Components added. Build issues fixed

This commit is contained in:
Bahadir Sofuoglu 2022-09-14 14:26:01 +03:00
parent 5b66ed1093
commit 18c3721848
344 changed files with 12446 additions and 8758 deletions

View file

@ -1,26 +1,23 @@
<template>
<div class="p-paginator p-component" v-if="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
<div class="p-paginator-left-content" v-if="$slots.start">
<div v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" class="p-paginator p-component">
<div v-if="$slots.start" class="p-paginator-left-content">
<slot name="start" :state="currentState"></slot>
</div>
<template v-for="item of templateItems" :key="item">
<FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
<PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
<NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
<LastPageLink v-else-if="item === 'LastPageLink'" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
<PageLinks v-else-if="item === 'PageLinks'" :value="pageLinks" :page="page" @click="changePageLink($event)" />
<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :template="currentPageReportTemplate" :currentPage="currentPage"
:page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :rows="d_rows"
:options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty"/>
<JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :page="page" :pageCount="pageCount"
@page-change="changePage($event)" :disabled="empty"/>
<JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty"/>
<template v-for="item of templateItems" :key="item">
<FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
<PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
<NextPageLink v-else-if="item === 'NextPageLink'" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
<LastPageLink v-else-if="item === 'LastPageLink'" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
<PageLinks v-else-if="item === 'PageLinks'" :value="pageLinks" :page="page" @click="changePageLink($event)" />
<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :template="currentPageReportTemplate" :currentPage="currentPage" :page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :rows="d_rows" :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty" />
<JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" />
<JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" />
</template>
<div class="p-paginator-right-content" v-if="$slots.end">
<div v-if="$slots.end" class="p-paginator-right-content">
<slot name="end" :state="currentState"></slot>
</div>
</div>
</div>
</template>
<script>
@ -75,7 +72,7 @@ export default {
return {
d_first: this.first,
d_rows: this.rows
}
};
},
watch: {
first(newValue) {
@ -85,7 +82,7 @@ export default {
this.d_rows = newValue;
},
totalRecords(newValue) {
if (this.page > 0 && newValue && (this.d_first >= newValue)) {
if (this.page > 0 && newValue && this.d_first >= newValue) {
this.changePage(this.pageCount - 1);
}
}
@ -103,13 +100,13 @@ export default {
pageCount: pc
};
this.$emit('update:first', this.d_first);
this.$emit('update:first', this.d_first);
this.$emit('update:rows', this.d_rows);
this.$emit('page', state);
}
},
changePageToFirst(event) {
if(!this.isFirstPage) {
if (!this.isFirstPage) {
this.changePage(0);
}
@ -124,11 +121,11 @@ export default {
event.originalEvent.preventDefault();
},
changePageToNext(event) {
this.changePage(this.page + 1);
this.changePage(this.page + 1);
event.preventDefault();
},
changePageToLast(event) {
if(!this.isLastPage) {
if (!this.isLastPage) {
this.changePage(this.pageCount - 1);
}
@ -142,9 +139,11 @@ export default {
computed: {
templateItems() {
let keys = [];
this.template.split(' ').map((value) => {
keys.push(value.trim());
})
});
return keys;
},
page() {
@ -164,11 +163,12 @@ export default {
const visiblePages = Math.min(this.pageLinkSize, numberOfPages);
//calculate range, keep current in middle if necessary
let start = Math.max(0, Math.ceil(this.page - ((visiblePages) / 2)));
let start = Math.max(0, Math.ceil(this.page - visiblePages / 2));
let end = Math.min(numberOfPages - 1, start + visiblePages - 1);
//check when approaching to last page
const delta = this.pageLinkSize - (end - start + 1);
start = Math.max(0, start - delta);
return [start, end];
@ -179,7 +179,7 @@ export default {
let start = boundaries[0];
let end = boundaries[1];
for(var i = start; i <= end; i++) {
for (var i = start; i <= end; i++) {
pageLinks.push(i + 1);
}
@ -190,7 +190,7 @@ export default {
page: this.page,
first: this.d_first,
rows: this.d_rows
}
};
},
empty() {
return this.pageCount === 0;
@ -200,17 +200,17 @@ export default {
}
},
components: {
'CurrentPageReport': CurrrentPageReport,
'FirstPageLink': FirstPageLink,
'LastPageLink': LastPageLink,
'NextPageLink': NextPageLink,
'PageLinks': PageLinks,
'PrevPageLink': PrevPageLink,
'RowsPerPageDropdown': RowsPerPageDropdown,
'JumpToPageDropdown': JumpToPageDropdown,
'JumpToPageInput': JumpToPageInput
CurrentPageReport: CurrrentPageReport,
FirstPageLink: FirstPageLink,
LastPageLink: LastPageLink,
NextPageLink: NextPageLink,
PageLinks: PageLinks,
PrevPageLink: PrevPageLink,
RowsPerPageDropdown: RowsPerPageDropdown,
JumpToPageDropdown: JumpToPageDropdown,
JumpToPageInput: JumpToPageInput
}
}
};
</script>
<style lang="css">
@ -222,11 +222,11 @@ export default {
}
.p-paginator-left-content {
margin-right: auto;
margin-right: auto;
}
.p-paginator-right-content {
margin-left: auto;
margin-left: auto;
}
.p-paginator-page,