@eturnity/eturnity_reusable_components 6.28.0 → 6.29.0-EPDM-7478.0
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
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg fill="none" height="20" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M13 13H27V14.5556H13V13Z" fill="#B2B9C5"></path>
|
|
3
|
+
<path d="M13 21.5556H27V23.1111H13V21.5556Z" fill="#B2B9C5"></path>
|
|
4
|
+
<path d="M13 13H14.5556V22.3333H13V13Z" fill="#B2B9C5"></path>
|
|
5
|
+
<path d="M25.4444 13L27 13V22.3333H25.4444V13Z" fill="#B2B9C5"></path>
|
|
6
|
+
<path d="M23.8889 19.6111H16.1111L18.0556 16.1111L20.7778 18.0556L21.5556 17.2778L23.8889 19.6111Z" fill="#B2B9C5"></path>
|
|
7
|
+
</svg>
|
|
@@ -27,7 +27,9 @@ import styled from 'vue-styled-components'
|
|
|
27
27
|
|
|
28
28
|
const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
|
|
29
29
|
const Wrapper = styled('div', wrapperAttrs)`
|
|
30
|
-
display:
|
|
30
|
+
display: flex;
|
|
31
|
+
align-content: center;
|
|
32
|
+
justify-content: center;
|
|
31
33
|
width: ${(props) => props.size};
|
|
32
34
|
height: ${(props) => props.size};
|
|
33
35
|
min-width: ${(props) => props.size};
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<template>
|
|
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="#1a237e" 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="#1a237e" 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: #1a237e;
|
|
69
|
+
font-size: 13px;
|
|
70
|
+
display: -webkit-box;
|
|
71
|
+
display: -ms-flexbox;
|
|
72
|
+
display: flex;
|
|
73
|
+
-ms-flex-wrap: wrap;
|
|
74
|
+
flex-wrap: wrap;
|
|
75
|
+
-webkit-box-pack: end;
|
|
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;
|
|
83
|
+
`
|
|
84
|
+
const paginationLink=styled.div`
|
|
85
|
+
display: flex;
|
|
86
|
+
padding: 0px 5px;
|
|
87
|
+
margin: 0 2px;
|
|
88
|
+
text-align: center;
|
|
89
|
+
border-radius: 3px;
|
|
90
|
+
white-space: nowrap;
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
|
|
93
|
+
&.active{
|
|
94
|
+
color: #fff;
|
|
95
|
+
background-color: #5c67ac;
|
|
96
|
+
padding: 7px 12px;
|
|
97
|
+
border-radius: 4px;
|
|
98
|
+
}
|
|
99
|
+
`
|
|
100
|
+
const arrowText=styled.div``
|
|
101
|
+
const arrowIconContainer=styled.div`
|
|
102
|
+
margin:0 10px;
|
|
103
|
+
display:flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
`
|
|
106
|
+
export default {
|
|
107
|
+
name: 'pagination-component',
|
|
108
|
+
components:{
|
|
109
|
+
paginationWrapper,
|
|
110
|
+
paginationLink,
|
|
111
|
+
icon,
|
|
112
|
+
arrowText,
|
|
113
|
+
arrowIconContainer
|
|
114
|
+
},
|
|
115
|
+
props: ["fetchPage","currentPage","paginationParams"],
|
|
116
|
+
methods: {
|
|
117
|
+
getNewProjects(num) {
|
|
118
|
+
this.$emit('on-pagination-change', num)
|
|
119
|
+
},
|
|
120
|
+
paginationNumbers() {
|
|
121
|
+
const prev = this.paginationParams.previous
|
|
122
|
+
const next = this.paginationParams.next
|
|
123
|
+
const n = prev + 1 || next - 1
|
|
124
|
+
if (this.paginationParams.pages === 2) {
|
|
125
|
+
return prev ? [n - 1, n] : [n, n + 1]
|
|
126
|
+
} else {
|
|
127
|
+
return prev
|
|
128
|
+
? next
|
|
129
|
+
? [n - 1, n, n + 1]
|
|
130
|
+
: [n - 2, n - 1, n]
|
|
131
|
+
: [n, n + 1, n + 2]
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
</script>
|
|
137
|
+
|