@eturnity/eturnity_reusable_components 6.31.0 → 6.32.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 +5 -4
- package/src/assets/svgIcons/battery.svg +2 -2
- package/src/assets/svgIcons/bom.svg +2 -2
- package/src/assets/svgIcons/deal_flow.svg +5 -0
- package/src/assets/svgIcons/documents.svg +4 -0
- package/src/assets/svgIcons/ems-1.svg +2 -2
- package/src/assets/svgIcons/ems.svg +2 -2
- package/src/assets/svgIcons/financing_for_pv.svg +5 -5
- package/src/assets/svgIcons/initial_situation.svg +2 -2
- package/src/assets/svgIcons/inverter-1.svg +4 -4
- package/src/assets/svgIcons/profile.svg +3 -3
- package/src/assets/svgIcons/profitability.svg +2 -2
- package/src/assets/svgIcons/upload_image_tool.svg +7 -0
- package/src/assets/svgIcons/variants.svg +6 -0
- package/src/assets/svgIcons/virtual_storage.svg +3 -3
- package/src/components/icon/index.vue +3 -1
- package/src/components/pagination/index.vue +137 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eturnity/eturnity_reusable_components",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.32.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vue-cli-service serve",
|
|
@@ -11,10 +11,11 @@
|
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@vueform/slider": "1.0.5",
|
|
14
|
-
"
|
|
15
|
-
"vue-styled-components": "1.6.0",
|
|
14
|
+
"core-js": "^3.31.1",
|
|
16
15
|
"html-loader": "0.5.5",
|
|
17
|
-
"v-click-outside": "2.1.4"
|
|
16
|
+
"v-click-outside": "2.1.4",
|
|
17
|
+
"vue": "2.6.11",
|
|
18
|
+
"vue-styled-components": "1.6.0"
|
|
18
19
|
},
|
|
19
20
|
"devDependencies": {
|
|
20
21
|
"@storybook/addon-actions": "6.2.8",
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M14.68 4V2H14.667H12.667H11.334V0H7.334V2H6H4V4V16V18H6H12.667H14.667H14.68V16H14.667V4H14.68ZM12.667 10H6V4H12.667V10Z" fill="#263238"/>
|
|
3
3
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 2.25V0H7.667V2.25H0ZM18 2.25V0H10.333V2.25H18ZM7.667 7.50037V5.25037H0V7.50037H7.667ZM18 7.50037V5.25037H10.333V7.50037H18ZM7.667 12.7496V10.4996H0V12.7496H7.667ZM18 12.7496V10.4996H10.333V12.7496H18ZM7.667 18V15.75H0V18H7.667ZM18 18V15.75H10.333V18H18Z" fill="white"/>
|
|
3
3
|
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
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>
|
|
@@ -0,0 +1,4 @@
|
|
|
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,3 +1,3 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M14.554 7.974H17.554V5.974H14.554V5H13.554C11.697 5 10.15 6.272 9.699 7.987H7.666V2V0H5.666H2H0V2V16V18H2H7.667V17V16V9.987H9.692C10.133 11.716 11.688 13 13.554 13H14.554V11.974H17.554V9.974H14.554V7.987V7.974ZM5.666 16H2V2H5.667V7.987V9.987L5.666 16Z" fill="white"/>
|
|
3
3
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M17 8V18H15V8.83L9 2.83L3.83 8L3 8.83V18H1V8L9 0L17 8ZM12.33 12.46H9.84L10.81 6.91L5.67 12.46H8.16L7.19 18L12.33 12.46Z" fill="white"/>
|
|
3
3
|
</svg>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
3
|
-
<path d="
|
|
4
|
-
<path d="
|
|
5
|
-
<path d="
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 8V18H14V8H0ZM12 16H2V10H12V16Z" fill="white"/>
|
|
3
|
+
<path d="M7 15C8.10457 15 9 14.1046 9 13C9 11.8954 8.10457 11 7 11C5.89543 11 5 11.8954 5 13C5 14.1046 5.89543 15 7 15Z" fill="white"/>
|
|
4
|
+
<path d="M4 0V10H18V0H4ZM16 8H6V2H16V8Z" fill="white"/>
|
|
5
|
+
<path d="M11 7C12.1046 7 13 6.10457 13 5C13 3.89543 12.1046 3 11 3C9.89543 3 9 3.89543 9 5C9 6.10457 9.89543 7 11 7Z" fill="white"/>
|
|
6
6
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M13.483 13.173L10.414 16.242L10 16.656V16.676H9.98L9 17.656L8.02 16.676H8V16.656L7.586 16.242L4.517 13.173L5.931 11.759L8 13.827V5.676H10V13.827L12.069 11.758L13.483 13.173ZM16 1H2H0V3V8H2V3H16V8H18V3V1H16Z" fill="white"/>
|
|
3
3
|
</svg>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
3
|
-
<path d="
|
|
4
|
-
<path d="
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M1.72271 6.43179V8.55952H4.48362V9.85441H1.72271V12.0278H5.27082V13.3683H0V5.09127H5.27082V6.43179H1.72271Z" fill="white"/>
|
|
3
|
+
<path d="M8.27381 6.43179V8.71924H11.2515V10.0655H8.27381V13.3683H6.55109V5.09127H11.8219V6.43179H8.27381Z" fill="white"/>
|
|
4
|
+
<path d="M17.441 6.67708C17.3877 6.76455 17.3326 6.8292 17.2755 6.87103C17.2223 6.90906 17.152 6.92807 17.0645 6.92807C16.9808 6.92807 16.8896 6.89955 16.7907 6.84251C16.6956 6.78166 16.5834 6.71701 16.4541 6.64856C16.3248 6.58011 16.1765 6.51736 16.0092 6.46031C15.8419 6.39947 15.646 6.36905 15.4216 6.36905C15.0261 6.36905 14.7295 6.45841 14.5318 6.63715C14.334 6.81208 14.2351 7.04216 14.2351 7.32738C14.2351 7.50992 14.2884 7.66203 14.3948 7.78372C14.5051 7.90161 14.6477 8.00429 14.8227 8.09176C15.0014 8.17923 15.203 8.25719 15.4273 8.32564C15.6517 8.39409 15.8818 8.47015 16.1176 8.55381C16.3533 8.63367 16.5834 8.72875 16.8078 8.83903C17.0322 8.94931 17.2318 9.08812 17.4067 9.25545C17.5855 9.42278 17.7281 9.62813 17.8346 9.87152C17.9449 10.1111 18 10.4039 18 10.75C18 11.1265 17.9334 11.4801 17.8003 11.811C17.671 12.138 17.4828 12.4252 17.2356 12.6724C16.9884 12.9157 16.6823 13.1078 16.3172 13.2485C15.9559 13.3892 15.5452 13.4596 15.0851 13.4596C14.8227 13.4596 14.5603 13.4329 14.2979 13.3797C14.0393 13.3265 13.7883 13.2523 13.5449 13.1572C13.3053 13.0622 13.079 12.9481 12.8661 12.815C12.6531 12.6819 12.4668 12.5336 12.3071 12.37L12.809 11.56C12.8509 11.4992 12.906 11.4497 12.9745 11.4117C13.0429 11.3699 13.1152 11.3489 13.1912 11.3489C13.2939 11.3489 13.4023 11.387 13.5164 11.463C13.6305 11.5391 13.7617 11.6228 13.91 11.714C14.0583 11.8053 14.2294 11.889 14.4234 11.965C14.6211 12.0411 14.8569 12.0791 15.1307 12.0791C15.53 12.0791 15.838 11.9878 16.0548 11.8053C16.2754 11.6228 16.3857 11.3508 16.3857 10.9896C16.3857 10.7804 16.3305 10.6112 16.2202 10.4819C16.1138 10.3526 15.9731 10.2442 15.7981 10.1567C15.6232 10.0693 15.4235 9.99511 15.1992 9.93427C14.9748 9.86962 14.7447 9.79926 14.5089 9.72321C14.2732 9.64715 14.0431 9.55588 13.8187 9.4494C13.5943 9.34292 13.3947 9.20221 13.2198 9.02727C13.0448 8.85234 12.9022 8.63558 12.7919 8.37698C12.6854 8.11838 12.6322 7.79704 12.6322 7.41294C12.6322 7.10491 12.693 6.80638 12.8147 6.51736C12.9364 6.22834 13.1152 5.97164 13.351 5.74727C13.5867 5.5229 13.8758 5.34226 14.218 5.20536C14.5641 5.06845 14.9596 5 15.4045 5C15.9027 5 16.3629 5.07796 16.785 5.23388C17.2109 5.38599 17.5703 5.59896 17.8631 5.87277L17.441 6.67708Z" fill="white"/>
|
|
5
5
|
</svg>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
3
|
-
<path d="
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M9.01817 9C11.5035 9 13.5182 6.98528 13.5182 4.5C13.5182 2.01472 11.5035 0 9.01817 0C6.53289 0 4.51817 2.01472 4.51817 4.5C4.51817 6.98528 6.53289 9 9.01817 9Z" fill="white"/>
|
|
3
|
+
<path d="M17.0364 18C11.9636 18 5.99091 18 1 18C1 13.5818 4.6 10.9636 9.01818 10.9636C13.4364 10.9636 17.0364 13.5818 17.0364 18Z" fill="white"/>
|
|
4
4
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M18 6.44778L17.9846 6.43345V5.01433H16.5666L16.5522 5L16.5369 5.01433H15.9369H11.4942V7.06212H14.4891L10.758 10.7942L7.66894 7.70512L6.22526 6.26143L4.77133 7.70512L0 12.4764L1.44369 13.9304L6.22526 9.14881L9.31433 12.2379L9.31126 12.2399L10.7601 13.6877L10.7621 13.6857L10.7713 13.6949L12.215 12.2512L12.2058 12.242L15.9369 8.51092V11.5058H17.9846V7.06212V6.46314L18 6.44778Z" fill="white"/>
|
|
3
3
|
</svg>
|
|
@@ -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>
|
|
@@ -0,0 +1,6 @@
|
|
|
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>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
3
|
-
<path d="
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M11.0497 8.45352H8.91235V10.296H11.0497V8.45352Z" fill="white"/>
|
|
3
|
+
<path d="M15.0927 6.53724C14.9069 6.52637 14.7205 6.52637 14.5347 6.53724C14.1318 5.37717 13.336 4.39446 12.2851 3.75918C11.2341 3.12389 9.99417 2.876 8.77976 3.05841C7.56535 3.24082 6.45293 3.84205 5.635 4.75806C4.81708 5.67406 4.34512 6.84719 4.30082 8.07442C4.30975 8.30745 4.33437 8.5396 4.37452 8.76931C4.18359 8.73213 3.98989 8.711 3.79544 8.70614C3.3069 8.6797 2.8181 8.75309 2.35886 8.92183C1.89963 9.09058 1.4796 9.35114 1.12442 9.68762C0.769239 10.0241 0.486352 10.4294 0.293029 10.8789C0.0997049 11.3283 0 11.8124 0 12.3017C0 12.7909 0.0997049 13.2751 0.293029 13.7245C0.486352 14.1739 0.769239 14.5793 1.12442 14.9157C1.4796 15.2522 1.89963 15.5128 2.35886 15.6815C2.8181 15.8503 3.3069 15.9237 3.79544 15.8972H15.0927C15.726 15.9273 16.3587 15.8285 16.9527 15.6068C17.5467 15.3852 18.0895 15.0453 18.5483 14.6078C19.007 14.1703 19.3723 13.6442 19.6218 13.0614C19.8713 12.4786 20 11.8512 20 11.2172C20 10.5833 19.8713 9.95588 19.6218 9.37308C19.3723 8.79029 19.007 8.26419 18.5483 7.82666C18.0895 7.38912 17.5467 7.04925 16.9527 6.82761C16.3587 6.60598 15.726 6.50719 15.0927 6.53724ZM12.6711 13.4862H7.31202V7.05314H8.80709V6.21085H11.1655V7.05314H12.6711V13.4862Z" fill="white"/>
|
|
4
4
|
</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
|
+
|