@eturnity/eturnity_reusable_components 6.43.9-EPDM-6751.2 → 6.43.9-EPDM-6751.3
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.
- package/package.json +2 -2
- package/src/components/pagination/index.vue +122 -130
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eturnity/eturnity_reusable_components",
|
|
3
|
-
"version": "6.43.9-EPDM-6751.
|
|
3
|
+
"version": "6.43.9-EPDM-6751.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vue-cli-service serve",
|
|
@@ -63,4 +63,4 @@
|
|
|
63
63
|
"author": "Aaron Enser",
|
|
64
64
|
"license": "ISC",
|
|
65
65
|
"homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
|
|
66
|
-
}
|
|
66
|
+
}
|
|
@@ -1,137 +1,129 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
import styled from
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
-ms-flex-pack: end;
|
|
77
|
-
justify-content: flex-end;
|
|
78
|
-
-webkit-box-align: center;
|
|
79
|
-
-ms-flex-align: center;
|
|
80
|
-
align-items: center;
|
|
81
|
-
margin-bottom: 2px;
|
|
82
|
-
margin-top: 10px;
|
|
2
|
+
<!-- Check, if pages more than 1 -->
|
|
3
|
+
<paginationWrapper v-if="paginationParams.pages > 1">
|
|
4
|
+
<!-- Back button -->
|
|
5
|
+
<paginationLink
|
|
6
|
+
v-if="paginationParams.previous"
|
|
7
|
+
@click="fetchPage(paginationParams.previous)"
|
|
8
|
+
>
|
|
9
|
+
<arrowIconContainer>
|
|
10
|
+
<icon name="arrow_left" color="#0068de" size="12px" />
|
|
11
|
+
</arrowIconContainer>
|
|
12
|
+
<arrowText>{{ $gettext('back') }}</arrowText>
|
|
13
|
+
</paginationLink>
|
|
14
|
+
|
|
15
|
+
<!-- First page -->
|
|
16
|
+
<paginationLink
|
|
17
|
+
v-if="currentPage > 2 && paginationParams.pages > 3"
|
|
18
|
+
@click="fetchPage(1)"
|
|
19
|
+
>1</paginationLink
|
|
20
|
+
>
|
|
21
|
+
|
|
22
|
+
<!-- Back tree dots -->
|
|
23
|
+
<span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
|
|
24
|
+
|
|
25
|
+
<!-- Current block -->
|
|
26
|
+
<paginationLink
|
|
27
|
+
v-for="number in paginationNumbers()"
|
|
28
|
+
:key="number"
|
|
29
|
+
:class="[currentPage === number ? 'active' : '']"
|
|
30
|
+
@click="fetchPage(number)"
|
|
31
|
+
>{{ number }}</paginationLink
|
|
32
|
+
>
|
|
33
|
+
|
|
34
|
+
<!-- Forward tree dots -->
|
|
35
|
+
<span
|
|
36
|
+
v-if="
|
|
37
|
+
paginationParams.pages - currentPage > 2 && paginationParams.pages > 4
|
|
38
|
+
"
|
|
39
|
+
>...</span
|
|
40
|
+
>
|
|
41
|
+
|
|
42
|
+
<!-- End page -->
|
|
43
|
+
<paginationLink
|
|
44
|
+
v-if="
|
|
45
|
+
paginationParams.pages - currentPage > 1 && paginationParams.pages > 3
|
|
46
|
+
"
|
|
47
|
+
@click="fetchPage(paginationParams.pages)"
|
|
48
|
+
>{{ paginationParams.pages }}</paginationLink
|
|
49
|
+
>
|
|
50
|
+
|
|
51
|
+
<!-- Forward button -->
|
|
52
|
+
<paginationLink
|
|
53
|
+
v-if="paginationParams.next"
|
|
54
|
+
@click="fetchPage(paginationParams.next)"
|
|
55
|
+
>
|
|
56
|
+
<arrowText>{{ $gettext('forward') }}</arrowText>
|
|
57
|
+
<arrowIconContainer>
|
|
58
|
+
<icon name="arrow_right" color="#0068de" size="12px" />
|
|
59
|
+
</arrowIconContainer>
|
|
60
|
+
</paginationLink>
|
|
61
|
+
</paginationWrapper>
|
|
62
|
+
</template>
|
|
63
|
+
|
|
64
|
+
<script>
|
|
65
|
+
import styled from 'vue-styled-components'
|
|
66
|
+
import icon from '../icon'
|
|
67
|
+
const paginationWrapper = styled.nav`
|
|
68
|
+
color: #0068de;
|
|
69
|
+
font-size: 13px;
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-wrap: wrap;
|
|
72
|
+
justify-content: flex-end;
|
|
73
|
+
align-items: center;
|
|
74
|
+
margin-bottom: 2px;
|
|
75
|
+
margin-top: 10px;
|
|
83
76
|
`
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
77
|
+
const paginationLink = styled.div`
|
|
78
|
+
display: flex;
|
|
79
|
+
padding: 0px 5px;
|
|
80
|
+
margin: 0 2px;
|
|
81
|
+
text-align: center;
|
|
82
|
+
border-radius: 3px;
|
|
83
|
+
white-space: nowrap;
|
|
84
|
+
cursor: pointer;
|
|
92
85
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
86
|
+
&.active {
|
|
87
|
+
color: #fff;
|
|
88
|
+
background-color: #5c67ac;
|
|
89
|
+
padding: 7px 12px;
|
|
90
|
+
border-radius: 4px;
|
|
91
|
+
}
|
|
92
|
+
`
|
|
93
|
+
const arrowText = styled.div``
|
|
94
|
+
const arrowIconContainer = styled.div`
|
|
95
|
+
margin: 0 10px;
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
`
|
|
99
|
+
export default {
|
|
100
|
+
name: 'pagination-component',
|
|
101
|
+
components: {
|
|
102
|
+
paginationWrapper,
|
|
103
|
+
paginationLink,
|
|
104
|
+
icon,
|
|
105
|
+
arrowText,
|
|
106
|
+
arrowIconContainer
|
|
107
|
+
},
|
|
108
|
+
props: ['fetchPage', 'currentPage', 'paginationParams'],
|
|
109
|
+
methods: {
|
|
110
|
+
getNewProjects(num) {
|
|
111
|
+
this.$emit('on-pagination-change', num)
|
|
114
112
|
},
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
return prev
|
|
128
|
-
? next
|
|
129
|
-
? [n - 1, n, n + 1]
|
|
130
|
-
: [n - 2, n - 1, n]
|
|
131
|
-
: [n, n + 1, n + 2]
|
|
132
|
-
}
|
|
113
|
+
paginationNumbers() {
|
|
114
|
+
const prev = this.paginationParams.previous
|
|
115
|
+
const next = this.paginationParams.next
|
|
116
|
+
const n = prev + 1 || next - 1
|
|
117
|
+
if (this.paginationParams.pages === 2) {
|
|
118
|
+
return prev ? [n - 1, n] : [n, n + 1]
|
|
119
|
+
} else {
|
|
120
|
+
return prev
|
|
121
|
+
? next
|
|
122
|
+
? [n - 1, n, n + 1]
|
|
123
|
+
: [n - 2, n - 1, n]
|
|
124
|
+
: [n, n + 1, n + 2]
|
|
133
125
|
}
|
|
134
126
|
}
|
|
135
127
|
}
|
|
136
|
-
|
|
137
|
-
|
|
128
|
+
}
|
|
129
|
+
</script>
|