Paginator added

src/AppMenu.vue

@@ -50,6 +50,7 @@
             <div :class="{'submenuhide': activeMenuIndex !== 2, 'submenushow': activeMenuIndex === 2}">
                 <div>
                     <router-link to="/fullcalendar">&#9679; FullCalendar</router-link>
+                    <router-link to="/paginator">&#9679; Paginator</router-link>
                 </div>
             </div>
 

src/assets/styles/primevue.css

@@ -16,6 +16,7 @@
 @import '../../components/message/Message.css';
 @import '../../components/multiselect/MultiSelect.css';
 @import '../../components/overlaypanel/OverlayPanel.css';
+@import '../../components/paginator/Paginator.css';
 @import '../../components/panel/Panel.css';
 @import '../../components/password/Password.css';
 @import '../../components/progressbar/ProgressBar.css';

src/components/paginator/CurrentPageReport.vue

@@ -0,0 +1,33 @@
+<template>
+	<span class="p-paginator-current">{{text}}</span>
+</template>
+<script>
+	export default {
+		inheritAttrs: false,
+		props: {
+			pageCount: Number,
+			page: Number,
+			template: {
+				type: String,
+				default: '({currentPage} of {totalPages})'
+			}
+		},
+		data() {
+			return {
+				text: ''
+			}
+		},
+		watch: {
+			page() {
+				this.text = this.template
+					.replace("{currentPage}", this.page + 1)
+					.replace("{totalPages}", this.pageCount);
+			}
+		},
+		mounted() {
+			this.text = this.template
+				.replace("{currentPage}", this.page + 1)
+				.replace("{totalPages}", this.pageCount);
+		}
+	}
+</script>

src/components/paginator/FirstPageLink.vue

@@ -0,0 +1,23 @@
+<template>
+	<button :class="containerClass" @click="$emit('click',$event)">
+		<span class="p-paginator-icon pi pi-step-backward"></span>
+	</button>
+</template>
+<script>
+	export default {
+		inheritAttrs: false,
+		props: {
+			disabled: {
+				type: null,
+				default: false
+			}
+		},
+		computed: {
+			containerClass() {
+				return ['p-paginator-first p-paginator-element p-link', {
+					'p-disabled': this.disabled
+				}];
+			}
+		}
+	}
+</script>

src/components/paginator/LastPageLink.vue

@@ -0,0 +1,23 @@
+<template>
+	<button :class="containerClass" @click="$emit('click',$event)">
+		<span class="p-paginator-icon pi pi-step-forward"></span>
+	</button>
+</template>
+<script>
+	export default {
+		inheritAttrs: false,
+		props: {
+			disabled: {
+				type: null,
+				default: false
+			}
+		},
+		computed: {
+			containerClass() {
+				return ['p-paginator-last p-paginator-element p-link', {
+					'p-disabled': this.disabled
+				}];
+			}
+		}
+	}
+</script>

src/components/paginator/NextPageLink.vue

@@ -0,0 +1,23 @@
+<template>
+	<button :class="containerClass" @click="$emit('click',$event)">
+		<span class="p-paginator-icon pi pi-caret-right"></span>
+	</button>
+</template>
+<script>
+	export default {
+		inheritAttrs: false,
+		props: {
+			disabled: {
+				type: null,
+				default: false
+			}
+		},
+		computed: {
+			containerClass() {
+				return ['p-paginator-next p-paginator-element p-link', {
+					'p-disabled': this.disabled
+				}];
+			}
+		}
+	}
+</script>

src/components/paginator/PageLinks.vue

@@ -0,0 +1,26 @@
+<script>
+	export default {
+		inheritAttrs: false,
+		props: {
+			value: Array,
+			page: Number
+		},
+		methods: {
+			onPageLinkClick(event, pageLink) {
+				this.$emit('click', {
+					originalEvent: event,
+					value: pageLink
+				});
+			}
+		},
+		render() {
+			return (<span class="p-paginator-pages">
+					{this.value.map((pageLink, i) => {
+						 return <button key={pageLink} class={['p-paginator-page p-paginator-element p-link', {
+						'p-highlight': ((pageLink - 1) === this.page)}]} on-click={e => this.onPageLinkClick(e, pageLink)}>{pageLink}</button>
+						})
+					}
+				</span>)
+		}
+	}
+</script>

src/components/paginator/Paginator.css

@@ -0,0 +1,99 @@
+.p-paginator {
+	margin: 0;
+	text-align: center;
+	padding: .125em;
+}
+
+.p-paginator .p-paginator-top {
+	border-bottom: 0 none;
+}
+
+.p-paginator .p-paginator-bottom {
+	border-top:0 none;
+}
+
+.p-paginator .p-paginator-left-content {
+	float: left;
+}
+
+.p-paginator .p-paginator-right-content {
+	float: right;
+}
+
+.p-paginator .p-paginator-page,
+.p-paginator .p-paginator-pages,
+.p-paginator .p-paginator-next,
+.p-paginator .p-paginator-last,
+.p-paginator .p-paginator-first,
+.p-paginator .p-paginator-prev,
+.p-paginator .p-paginator-current {
+	display: inline-block;
+	width: 1.5em;
+	height: 1.5em;
+	line-height: 1.5em;
+	zoom: 1;
+	margin-left: .063em;
+	margin-right: .063em;
+	text-decoration: none;
+	vertical-align: middle;
+	text-align: center;
+	position: relative;
+}
+
+.p-paginator .p-paginator-pages {
+	width: auto;
+	line-height: 1;
+}
+
+.p-paginator .p-paginator-icon {
+	display: block;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	width: 1em;
+	height: 1em;
+	margin-top: -.5em;
+	margin-left: -.5em;
+}
+
+.p-paginator .p-paginator-page,
+.p-paginator .p-paginator-next,
+.p-paginator .p-paginator-last,
+.p-paginator .p-paginator-first,
+.p-paginator .p-paginator-prev{
+	cursor: pointer;
+}
+
+.p-paginator .p-paginator-current,
+.p-paginator .p-paginator-rpp-options {
+	margin-left: 1em;
+	margin-right: 1em;
+	background-image: none;
+}
+
+.p-paginator .p-paginator-jtp-select option,
+.p-paginator .p-paginator-rpp-options option {
+	background-image: none;
+	border: 0 none;
+	box-shadow: none;
+	-moz-box-shadow: none;
+	-webkit-box-shadow: none;
+}
+
+.p-paginator a.p-disabled {
+	outline: 0 none;
+}
+
+.p-paginator .p-dropdown {
+	min-width: 4em;
+	margin-left: .375em;
+}
+
+.p-fluid .p-paginator .p-dropdown {
+	width: auto;
+}
+
+.p-paginator .p-paginator-current {
+	width: auto;
+	height: auto;
+}

src/components/paginator/Paginator.vue

@@ -0,0 +1,158 @@
+<template>
+	<div class="p-paginator p-component p-unselectable-text">
+		<template v-for="(item,i) of templateItems">
+			<FirstPageLink v-if="item === 'FirstPageLink'" :key="i"  @click="changePageToFirst($event)" :disabled="isFirstPage"/>
+			<PrevPageLink v-if="item === 'PrevPageLink'" :key="i"  @click="changePageToPrev($event)" :disabled="isFirstPage"/>
+			<NextPageLink v-if="item === 'NextPageLink'" :key="i"  @click="changePageToNext($event)" :disabled="isLastPage"/>
+			<LastPageLink v-if="item === 'LastPageLink'" :key="i"  @click="changePageToLast($event)" :disabled="isLastPage"/>
+			<PageLinks v-if="item === 'PageLinks'" :key="i" :value="updatePageLinks" :page="page" @click="pageLinkClick($event)"/>
+			<CurrentPageReport v-if="item === 'CurrentPageReport'" :key="i" :template="currentPageReportTemplate" :page="page" :pageCount="pageCount"/>
+			<!--<RowsPerPageDropdown v-if="item === 'RowsPerPageDropdown'" :key="i" :value="rows" :options="rowsPerPageOptions" @change="rowsChange($event)"/>-->
+		</template>
+	</div>
+</template>
+
+<script>
+	import CurrrentPageReport from './CurrentPageReport';
+	import FirstPageLink from './FirstPageLink';
+	import LastPageLink from './LastPageLink';
+	import NextPageLink from './NextPageLink';
+	import PageLinks from './PageLinks';
+	import PrevPageLink from './PrevPageLink';
+	import RowsPerPageDropdown from './RowsPerPageDropdown';
+	export default {
+		inheritAttrs: false,
+		props: {
+			totalRecords: {
+				type: Number,
+				default: 0
+			},
+			rows: {
+				type: Number,
+				default: 0
+			},
+			first: {
+				type: Number,
+				default: 0
+			},
+			pageLinkSize: {
+				type: Number,
+				default: 5
+			},
+			rowsPerPageOptions: Array,
+			template: {
+				type: String,
+				default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
+			},
+			leftContent: null,
+			rightContent: null,
+			currentPageReportTemplate: {
+				type: null,
+				default: '({currentPage} of {totalPages})'
+			}
+		},
+		components: {
+			'CurrentPageReport': CurrrentPageReport,
+			'FirstPageLink': FirstPageLink,
+			'LastPageLink': LastPageLink,
+			'NextPageLink': NextPageLink,
+			'PageLinks': PageLinks,
+			'PrevPageLink': PrevPageLink,
+			'RowsPerPageDropdown': RowsPerPageDropdown,
+		},
+		computed: {
+			templateItems() {
+				var keys = [];
+				this.template.split(' ').map((value) => {
+					keys.push(value.trim());
+				})
+				return keys;
+			},
+			page() {
+				return Math.floor(this.first / this.rows);
+			},
+
+			pageCount() {
+				return Math.ceil(this.totalRecords / this.rows) || 1;
+			},
+			isFirstPage() {
+				return this.page === 0;
+			},
+
+			isLastPage() {
+				return this.page === this.pageCount - 1;
+			},
+			calculatePageLinkBoundaries() {
+				var numberOfPages = this.pageCount;
+				var visiblePages = Math.min(this.pageLinkSize, numberOfPages);
+
+				//calculate range, keep current in middle if necessary
+				var start = Math.max(0, Math.ceil(this.page - ((visiblePages) / 2)));
+				var end = Math.min(numberOfPages - 1, start + visiblePages - 1);
+
+				//check when approaching to last page
+				var delta = this.pageLinkSize - (end - start + 1);
+				start = Math.max(0, start - delta);
+
+				return [start, end];
+			},
+
+			updatePageLinks() {
+				var pageLinks = [];
+				var boundaries = this.calculatePageLinkBoundaries;
+				var start = boundaries[0];
+				var end = boundaries[1];
+
+				for(var i = start; i <= end; i++) {
+					pageLinks.push(i + 1);
+				}
+
+				return pageLinks;
+			}
+		},
+		methods: {
+			changePage(first, rows) {
+				var pc = this.pageCount;
+				var p = Math.floor(first / rows);
+
+				if(p >= 0 && p < pc) {
+					var newPageState = {
+						first: first,
+						rows: rows,
+						page: p,
+						pageCount: pc
+					};
+					this.$emit('change', newPageState);
+				}
+			},
+
+			changePageToFirst(event) {
+				this.changePage(0, this.rows);
+				event.preventDefault();
+			},
+
+			changePageToPrev(event) {
+				this.changePage(this.first - this.rows, this.rows);
+				event.preventDefault();
+			},
+
+			pageLinkClick(event) {
+				this.changePage((event.value - 1) * this.rows, this.rows);
+			},
+
+			changePageToNext(event) {
+				this.changePage(this.first + this.rows, this.rows);
+				event.preventDefault();
+			},
+
+			changePageToLast(event) {
+				this.changePage((this.pageCount - 1) * this.rows, this.rows);
+				event.preventDefault();
+			},
+
+			rowsChange(event) {
+				this.changePage(0, event.value);
+			}
+		}
+	}
+</script>

src/components/paginator/PrevPageLink.vue

@@ -0,0 +1,23 @@
+<template>
+	<button :class="containerClass" @click="$emit('click',$event)">
+		<span class="p-paginator-icon pi pi-caret-left"></span>
+	</button>
+</template>
+<script>
+	export default {
+		inheritAttrs: false,
+		props: {
+			disabled: {
+				type: null,
+				default: false
+			}
+		},
+		computed: {
+			containerClass() {
+				return ['p-paginator-prev p-paginator-element p-link', {
+					'p-disabled': this.disabled
+				}];
+			}
+		}
+	}
+</script>

src/components/paginator/RowsPerPageDropdown.vue

@@ -0,0 +1,26 @@
+<template>
+	<Dropdown :value="value" v-model="selectedRow" :options="rowOptions" optionLabel="label" @change="$emit('change',$event)"></Dropdown>
+</template>
+<script>
+	export default {
+		inheritAttrs: false,
+		props: {
+			options: Array,
+			value: Number
+		},
+		data() {
+			return {
+				selectedRow: null
+			}
+		},
+		computed: {
+			rowOptions() {
+				var newOption = []
+				for(var i= 0; i<this.options.length; i++) {
+					newOption.push({label: String(this.options[i]), code: this.options[i]})
+				}
+				return newOption;
+			}
+		}
+	}
+</script>

src/main.js

@@ -21,6 +21,7 @@ import Listbox from './components/listbox/Listbox';
 import Message from './components/message/Message';
 import MultiSelect from './components/multiselect/MultiSelect';
 import OverlayPanel from './components/overlaypanel/OverlayPanel';
+import Paginator from './components/paginator/Paginator';
 import Panel from './components/panel/Panel';
 import Password from './components/password/Password';
 import ProgressBar from './components/progressbar/ProgressBar';
@@ -69,6 +70,7 @@ Vue.component('Listbox', Listbox);
 Vue.component('Message', Message);
 Vue.component('MultiSelect', MultiSelect);
 Vue.component('OverlayPanel', OverlayPanel);
+Vue.component('Paginator', Paginator);
 Vue.component('Panel', Panel);
 Vue.component('Password', Password);
 Vue.component('ProgressBar', ProgressBar);

src/router.js

@@ -151,6 +151,11 @@ export default new Router({
         name: 'overlaypanel',
         component: () => import('./views/overlaypanel/OverlayPanelDemo.vue')
     },
+    {
+		path: '/paginator',
+		name: 'paginator',
+		component: () => import('./views/paginator/PaginatorDemo.vue')
+    },
     {
         path: '/panel',
         name: 'panel',

src/views/paginator/PaginatorDemo.vue

@@ -0,0 +1,44 @@
+<template>
+	<div>
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>Paginator</h1>
+				<p>Paginator is a generic widget to display content in paged format.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<h3 class="first">Default</h3>
+			<Paginator :first="first" :rows="rows" :totalRecords="120" @change="onPageChange($event)"></Paginator>
+
+			<h3 class="first">Custom Template</h3>
+			<Paginator :first="first2" :rows="rows2" :totalRecords="120" @change="onPageChange2($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				first:0,
+				rows:10,
+				first2:0,
+				rows2:10
+			}
+		},
+		methods: {
+			onPageChange(event){
+				this.first = event.first;
+				this.rows = event.rows;
+			},
+			onPageChange2(event){
+				this.first2 = event.first;
+				this.rows2 = event.rows;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+</style>