@eturnity/eturnity_reusable_components 6.28.0-EPDM-7686.0 → 6.28.0-EPDM-7478.4
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 +4 -5
- package/src/assets/svgIcons/upload_image_tool.svg +7 -0
- package/src/components/icon/index.vue +3 -1
- package/src/components/pagination/index.vue +137 -0
- package/src/assets/svgIcons/deal_flow.svg +0 -5
- package/src/assets/svgIcons/documents.svg +0 -4
- package/src/assets/svgIcons/variants.svg +0 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eturnity/eturnity_reusable_components",
|
|
3
|
-
"version": "6.28.0-EPDM-
|
|
3
|
+
"version": "6.28.0-EPDM-7478.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vue-cli-service serve",
|
|
@@ -11,11 +11,10 @@
|
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@vueform/slider": "1.0.5",
|
|
14
|
-
"core-js": "^3.31.1",
|
|
15
|
-
"html-loader": "0.5.5",
|
|
16
|
-
"v-click-outside": "2.1.4",
|
|
17
14
|
"vue": "2.6.11",
|
|
18
|
-
"vue-styled-components": "1.6.0"
|
|
15
|
+
"vue-styled-components": "1.6.0",
|
|
16
|
+
"html-loader": "0.5.5",
|
|
17
|
+
"v-click-outside": "2.1.4"
|
|
19
18
|
},
|
|
20
19
|
"devDependencies": {
|
|
21
20
|
"@storybook/addon-actions": "6.2.8",
|
|
@@ -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
|
+
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M13.4831 9.497L10.4141 12.566L10.0001 12.98V13H9.98009L9.00009 13.98L8.02009 13H8.00009V12.98L7.58609 12.566L4.51709 9.497L5.93109 8.083L8.00009 10.151V4H10.0001V10.151L12.0691 8.082L13.4831 9.497Z" fill="white"/>
|
|
3
|
-
<path d="M16 16H2H0V18H2H16H18V16H16Z" fill="white"/>
|
|
4
|
-
<path d="M16 0H2H0V2H2H16H18V0H16Z" fill="white"/>
|
|
5
|
-
</svg>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4H14.0675L18 7.75375V18H7V15.5H12V4Z" fill="white"/>
|
|
3
|
-
<path d="M6.74625 0H0V14H10.5V3.75375L6.74625 0ZM1.86375 5.64813C1.86375 4.84352 2.51602 4.19125 3.32063 4.19125C4.12524 4.19125 4.7775 4.84352 4.7775 5.64813C4.7775 6.45273 4.12524 7.105 3.32063 7.105C2.51602 7.105 1.86375 6.45273 1.86375 5.64813ZM8.6275 10.9025H1.86375V9.2925H8.6275V10.9025Z" fill="white"/>
|
|
4
|
-
</svg>
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M7 0H1C0.45 0 0 0.45 0 1V7C0 7.55 0.45 8 1 8H7C7.55 8 8 7.55 8 7C8 6.45 8 1 8 1C8 0.45 7.55 0 7 0ZM4 6C2.9 6 2 5.1 2 4C2 2.9 2.9 2 4 2C5.1 2 6 2.9 6 4C6 5.1 5.1 6 4 6Z" fill="white"/>
|
|
3
|
-
<path d="M7 10H1C0.45 10 0 10.45 0 11V17C0 17.55 0.45 18 1 18H7C7.55 18 8 17.55 8 17C8 16.45 8 11 8 11C8 10.45 7.55 10 7 10ZM4 16C2.9 16 2 15.1 2 14C2 12.9 2.9 12 4 12C5.1 12 6 12.9 6 14C6 15.1 5.1 16 4 16Z" fill="white"/>
|
|
4
|
-
<path d="M17 0H11C10.45 0 10 0.45 10 1V7C10 7.55 10.45 8 11 8H17C17.55 8 18 7.55 18 7C18 6.45 18 1 18 1C18 0.45 17.55 0 17 0ZM14 6C12.9 6 12 5.1 12 4C12 2.9 12.9 2 14 2C15.1 2 16 2.9 16 4C16 5.1 15.1 6 14 6Z" fill="white"/>
|
|
5
|
-
<path d="M17 10H11C10.45 10 10 10.45 10 11V17C10 17.55 10.45 18 11 18H17C17.55 18 18 17.55 18 17C18 16.45 18 11 18 11C18 10.45 17.55 10 17 10ZM14 16C12.9 16 12 15.1 12 14C12 12.9 12.9 12 14 12C15.1 12 16 12.9 16 14C16 15.1 15.1 16 14 16Z" fill="white"/>
|
|
6
|
-
</svg>
|