@ulu/frontend-vue 0.1.0-beta.14 → 0.1.0-beta.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<nav v-if="items" class="pager" role="navigation" :aria-labelledby="headingId">
|
|
3
|
+
<component :is="titleElement" :id="headingId" class="hidden-visually">Pagination</component>
|
|
4
|
+
<ul class="pager__items js-pager__items">
|
|
5
|
+
<!-- First page link -->
|
|
6
|
+
<li v-if="items.first" class="pager__item pager__item--first">
|
|
7
|
+
<router-link :to="items.first.href" title="Go to first page" v-bind="items.first.attributes">
|
|
8
|
+
<span class="hidden-visually">First page</span>
|
|
9
|
+
<UluIcon icon="fas fa-angle-double-left" aria-hidden="true" />
|
|
10
|
+
</router-link>
|
|
11
|
+
</li>
|
|
12
|
+
|
|
13
|
+
<!-- Previous page link -->
|
|
14
|
+
<li v-if="items.previous" class="pager__item pager__item--previous">
|
|
15
|
+
<router-link :to="items.previous.href" title="Go to previous page" rel="prev" v-bind="items.previous.attributes">
|
|
16
|
+
<span class="hidden-visually">Previous page</span>
|
|
17
|
+
<UluIcon icon="fas fa-angle-left" aria-hidden="true" />
|
|
18
|
+
</router-link>
|
|
19
|
+
</li>
|
|
20
|
+
|
|
21
|
+
<!-- Ellipsis for previous pages -->
|
|
22
|
+
<li v-if="ellipses.previous" class="pager__item pager__item--ellipsis" role="presentation">…</li>
|
|
23
|
+
|
|
24
|
+
<!-- Page number links -->
|
|
25
|
+
<li v-for="(item, key) in items.pages" :key="key" :class="['pager__item', { 'is-active': current == key }]">
|
|
26
|
+
<router-link :to="item.href" :title="getPageTitle(key)" v-bind="item.attributes">
|
|
27
|
+
<span class="hidden-visually">
|
|
28
|
+
{{ current == key ? 'Current page' : 'Page' }}
|
|
29
|
+
</span>
|
|
30
|
+
{{ key }}
|
|
31
|
+
</router-link>
|
|
32
|
+
</li>
|
|
33
|
+
|
|
34
|
+
<!-- Ellipsis for next pages -->
|
|
35
|
+
<li v-if="ellipses.next" class="pager__item pager__item--ellipsis" role="presentation">…</li>
|
|
36
|
+
|
|
37
|
+
<!-- Next page link -->
|
|
38
|
+
<li v-if="items.next" class="pager__item pager__item--next">
|
|
39
|
+
<router-link :to="items.next.href" title="Go to next page" rel="next" v-bind="items.next.attributes">
|
|
40
|
+
<span class="hidden-visually">Next page</span>
|
|
41
|
+
<UluIcon icon="fas fa-angle-right" aria-hidden="true" />
|
|
42
|
+
</router-link>
|
|
43
|
+
</li>
|
|
44
|
+
|
|
45
|
+
<!-- Last page link -->
|
|
46
|
+
<li v-if="items.last" class="pager__item pager__item--last">
|
|
47
|
+
<router-link :to="items.last.href" title="Go to last page" v-bind="items.last.attributes">
|
|
48
|
+
<span class="hidden-visually">Last page</span>
|
|
49
|
+
<UluIcon icon="fas fa-angle-double-right" aria-hidden="true" />
|
|
50
|
+
</router-link>
|
|
51
|
+
</li>
|
|
52
|
+
</ul>
|
|
53
|
+
</nav>
|
|
54
|
+
</template>
|
|
55
|
+
|
|
56
|
+
<script setup>
|
|
57
|
+
import UluIcon from '../elements/UluIcon.vue';
|
|
58
|
+
|
|
59
|
+
let pagerCounter = 0;
|
|
60
|
+
|
|
61
|
+
const props = defineProps({
|
|
62
|
+
/**
|
|
63
|
+
* The HTML element to use for the visually hidden title.
|
|
64
|
+
*/
|
|
65
|
+
titleElement: {
|
|
66
|
+
type: String,
|
|
67
|
+
default: 'h4'
|
|
68
|
+
},
|
|
69
|
+
/**
|
|
70
|
+
* List of pager items.
|
|
71
|
+
*/
|
|
72
|
+
items: {
|
|
73
|
+
type: Object,
|
|
74
|
+
default: () => ({})
|
|
75
|
+
},
|
|
76
|
+
/**
|
|
77
|
+
* The page number of the current page.
|
|
78
|
+
*/
|
|
79
|
+
current: {
|
|
80
|
+
type: Number,
|
|
81
|
+
default: 1
|
|
82
|
+
},
|
|
83
|
+
/**
|
|
84
|
+
* Ellipses configuration.
|
|
85
|
+
*/
|
|
86
|
+
ellipses: {
|
|
87
|
+
type: Object,
|
|
88
|
+
default: () => ({})
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
const headingId = `ulu-pager-${ pagerCounter++ }`;
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Generates the title for a page link.
|
|
96
|
+
* @param {string|number} key - The page number.
|
|
97
|
+
* @returns {string} The title for the page link.
|
|
98
|
+
*/
|
|
99
|
+
function getPageTitle(key) {
|
|
100
|
+
return props.current == key ? 'Current page' : `Go to page ${key}`;
|
|
101
|
+
}
|
|
102
|
+
</script>
|