@eturnity/eturnity_reusable_components 8.7.5-EPIC-8593.0 → 8.7.5-EPIC-8593.1
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
|
@@ -8,7 +8,9 @@
|
|
|
8
8
|
<InputWrapper
|
|
9
9
|
:align-items="alignItems"
|
|
10
10
|
:has-label="!!label && label.length > 0"
|
|
11
|
+
:min-width="minWidth"
|
|
11
12
|
:no-relative="noRelative"
|
|
13
|
+
:text-center="textCenter"
|
|
12
14
|
>
|
|
13
15
|
<LabelWrapper
|
|
14
16
|
v-if="label"
|
|
@@ -72,6 +74,7 @@
|
|
|
72
74
|
:show-border="showBorder"
|
|
73
75
|
:show-disabled-background="showDisabledBackground"
|
|
74
76
|
:table-padding-left="tablePaddingLeft"
|
|
77
|
+
:text-center="textCenter"
|
|
75
78
|
@click="toggleDropdown"
|
|
76
79
|
@keydown="onKeyDown"
|
|
77
80
|
>
|
|
@@ -110,6 +113,7 @@
|
|
|
110
113
|
<slot name="selector" :selected-value="selectedValue"></slot>
|
|
111
114
|
</Selector>
|
|
112
115
|
<Caret
|
|
116
|
+
v-if="showCaret"
|
|
113
117
|
class="caret_dropdown"
|
|
114
118
|
:color-mode="colorMode"
|
|
115
119
|
@click.stop="toggleCaretDropdown"
|
|
@@ -274,11 +278,13 @@
|
|
|
274
278
|
selectWidth: String,
|
|
275
279
|
optionWidth: String,
|
|
276
280
|
noRelative: Boolean,
|
|
281
|
+
textCenter: Boolean,
|
|
277
282
|
}
|
|
278
283
|
const Container = styled('div', inputProps)`
|
|
279
284
|
width: ${(props) => props.selectWidth};
|
|
280
285
|
position: ${(props) => (props.noRelative ? 'static' : 'relative')};
|
|
281
286
|
display: inline-block;
|
|
287
|
+
text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
|
|
282
288
|
`
|
|
283
289
|
|
|
284
290
|
const LabelWrapperAttrs = { infoTextMessage: Boolean }
|
|
@@ -315,6 +321,7 @@
|
|
|
315
321
|
showDisabledBackground: Boolean,
|
|
316
322
|
colorMode: String,
|
|
317
323
|
isSearchBarVisible: Boolean,
|
|
324
|
+
textCenter: Boolean,
|
|
318
325
|
}
|
|
319
326
|
const SelectButton = styled('div', selectButtonAttrs)`
|
|
320
327
|
position: ${(props) => (props.noRelative ? 'static' : 'relative')};
|
|
@@ -335,7 +342,7 @@
|
|
|
335
342
|
? props.tablePaddingLeft
|
|
336
343
|
: props.paddingLeft
|
|
337
344
|
}`};
|
|
338
|
-
text-align: left;
|
|
345
|
+
text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
|
|
339
346
|
min-height: ${(props) =>
|
|
340
347
|
props.selectHeight
|
|
341
348
|
? props.selectHeight
|
|
@@ -440,6 +447,7 @@
|
|
|
440
447
|
const inputAttrs = {
|
|
441
448
|
alignItems: String,
|
|
442
449
|
hasLabel: Boolean,
|
|
450
|
+
minWidth: String,
|
|
443
451
|
noRelative: Boolean,
|
|
444
452
|
}
|
|
445
453
|
const InputWrapper = styled('div', inputAttrs)`
|
|
@@ -647,6 +655,16 @@
|
|
|
647
655
|
type: String,
|
|
648
656
|
required: false,
|
|
649
657
|
},
|
|
658
|
+
showCaret: {
|
|
659
|
+
type: Boolean,
|
|
660
|
+
required: false,
|
|
661
|
+
default: true,
|
|
662
|
+
},
|
|
663
|
+
textCenter: {
|
|
664
|
+
type: Boolean,
|
|
665
|
+
required: false,
|
|
666
|
+
default: false,
|
|
667
|
+
},
|
|
650
668
|
},
|
|
651
669
|
|
|
652
670
|
data() {
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- Check, if pages more than 1 -->
|
|
3
|
+
<PaginationWrapper v-if="paginationParams.pages > 1">
|
|
4
|
+
<PaginationLink v-if="paginationParams.previous" @click="fetchPage(1)">
|
|
5
|
+
<ArrowIconContainer>
|
|
6
|
+
<RCIcon name="start_of_the_list" size="14px" />
|
|
7
|
+
</ArrowIconContainer>
|
|
8
|
+
</PaginationLink>
|
|
9
|
+
|
|
10
|
+
<PaginationLink
|
|
11
|
+
v-if="paginationParams.previous"
|
|
12
|
+
@click="fetchPage(paginationParams.previous)"
|
|
13
|
+
>
|
|
14
|
+
<ArrowIconContainer>
|
|
15
|
+
<RCIcon name="arrow_left" size="14px" />
|
|
16
|
+
</ArrowIconContainer>
|
|
17
|
+
</PaginationLink>
|
|
18
|
+
|
|
19
|
+
<!-- Current block -->
|
|
20
|
+
<SelectWrapper>
|
|
21
|
+
<RCSelect
|
|
22
|
+
:button-font-color="getTheme.colors.gray1"
|
|
23
|
+
:dropdown-font-color="getTheme.colors.gray1"
|
|
24
|
+
font-size="14px"
|
|
25
|
+
:has-select-button-padding="false"
|
|
26
|
+
:is-auto-search="false"
|
|
27
|
+
:is-searchable="false"
|
|
28
|
+
:label-font-color="getTheme.colors.gray1"
|
|
29
|
+
left-padding="0px"
|
|
30
|
+
min-width="0px"
|
|
31
|
+
no-border
|
|
32
|
+
:no-max-width="true"
|
|
33
|
+
option-width="75px"
|
|
34
|
+
select-width="100%"
|
|
35
|
+
:show-border="false"
|
|
36
|
+
:show-caret="false"
|
|
37
|
+
text-center
|
|
38
|
+
:value="currentPage"
|
|
39
|
+
@input-change="fetchPage($event)"
|
|
40
|
+
>
|
|
41
|
+
<template #selector>
|
|
42
|
+
<SelectText>
|
|
43
|
+
{{ currentPage }} of {{ paginationParams.pages }}
|
|
44
|
+
</SelectText>
|
|
45
|
+
</template>
|
|
46
|
+
<template #dropdown>
|
|
47
|
+
<RCOption
|
|
48
|
+
v-for="number in paginationNumbers()"
|
|
49
|
+
:key="number"
|
|
50
|
+
text-center
|
|
51
|
+
:value="number"
|
|
52
|
+
>
|
|
53
|
+
{{ number }}
|
|
54
|
+
</RCOption>
|
|
55
|
+
</template>
|
|
56
|
+
</RCSelect>
|
|
57
|
+
</SelectWrapper>
|
|
58
|
+
|
|
59
|
+
<!-- Forward button -->
|
|
60
|
+
<PaginationLink
|
|
61
|
+
v-if="paginationParams.next"
|
|
62
|
+
@click="fetchPage(paginationParams.next)"
|
|
63
|
+
>
|
|
64
|
+
<ArrowIconContainer>
|
|
65
|
+
<RCIcon name="arrow_right" size="14px" />
|
|
66
|
+
</ArrowIconContainer>
|
|
67
|
+
</PaginationLink>
|
|
68
|
+
<PaginationLink
|
|
69
|
+
v-if="paginationParams.next"
|
|
70
|
+
@click="fetchPage(paginationParams.pages)"
|
|
71
|
+
>
|
|
72
|
+
<ArrowIconContainer>
|
|
73
|
+
<RCIcon name="end_of_the_list" size="14px" />
|
|
74
|
+
</ArrowIconContainer>
|
|
75
|
+
</PaginationLink>
|
|
76
|
+
</PaginationWrapper>
|
|
77
|
+
</template>
|
|
78
|
+
|
|
79
|
+
<script>
|
|
80
|
+
import styled from 'vue3-styled-components'
|
|
81
|
+
import RCIcon from '../icon'
|
|
82
|
+
import RCSelect from '../inputs/select'
|
|
83
|
+
import RCOption from '../inputs/select/option'
|
|
84
|
+
import theme from '@/assets/theme.js'
|
|
85
|
+
|
|
86
|
+
const PaginationWrapper = styled.nav`
|
|
87
|
+
gap: 5px;
|
|
88
|
+
font-size: 13px;
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-wrap: wrap;
|
|
91
|
+
justify-content: flex-end;
|
|
92
|
+
align-items: center;
|
|
93
|
+
`
|
|
94
|
+
const PaginationLink = styled.div`
|
|
95
|
+
display: flex;
|
|
96
|
+
padding: 0px 5px;
|
|
97
|
+
margin: 0 2px;
|
|
98
|
+
text-align: center;
|
|
99
|
+
border-radius: 3px;
|
|
100
|
+
white-space: nowrap;
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
color: ${(props) => props.theme.colors.brightBlue};
|
|
103
|
+
|
|
104
|
+
&.active {
|
|
105
|
+
color: ${(props) => props.theme.colors.white};
|
|
106
|
+
background-color: ${(props) => props.theme.colors.brightBlue};
|
|
107
|
+
padding: 7px 12px;
|
|
108
|
+
border-radius: 4px;
|
|
109
|
+
}
|
|
110
|
+
`
|
|
111
|
+
const ArrowIconContainer = styled.div`
|
|
112
|
+
display: flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
`
|
|
115
|
+
|
|
116
|
+
const SelectText = styled.div`
|
|
117
|
+
font-size: 14px;
|
|
118
|
+
color: ${(props) => props.theme.colors.grey1};
|
|
119
|
+
`
|
|
120
|
+
|
|
121
|
+
const SelectWrapper = styled.div`
|
|
122
|
+
display: flex;
|
|
123
|
+
align-items: center;
|
|
124
|
+
width: 75px;
|
|
125
|
+
`
|
|
126
|
+
|
|
127
|
+
export default {
|
|
128
|
+
name: 'PaginationV2',
|
|
129
|
+
components: {
|
|
130
|
+
PaginationWrapper,
|
|
131
|
+
PaginationLink,
|
|
132
|
+
RCIcon,
|
|
133
|
+
RCSelect,
|
|
134
|
+
RCOption,
|
|
135
|
+
SelectWrapper,
|
|
136
|
+
SelectText,
|
|
137
|
+
ArrowIconContainer,
|
|
138
|
+
},
|
|
139
|
+
props: {
|
|
140
|
+
fetchPage: {
|
|
141
|
+
type: Function,
|
|
142
|
+
required: true,
|
|
143
|
+
},
|
|
144
|
+
currentPage: {
|
|
145
|
+
type: Number,
|
|
146
|
+
required: true,
|
|
147
|
+
},
|
|
148
|
+
paginationParams: {
|
|
149
|
+
type: Object,
|
|
150
|
+
required: true,
|
|
151
|
+
},
|
|
152
|
+
},
|
|
153
|
+
data() {
|
|
154
|
+
return {
|
|
155
|
+
selectedValue: this.currentPage,
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
computed: {
|
|
159
|
+
getTheme() {
|
|
160
|
+
return theme
|
|
161
|
+
},
|
|
162
|
+
},
|
|
163
|
+
methods: {
|
|
164
|
+
getNewProjects(num) {
|
|
165
|
+
this.$emit('on-pagination-change', num)
|
|
166
|
+
},
|
|
167
|
+
paginationNumbers() {
|
|
168
|
+
return Array.from(
|
|
169
|
+
{ length: this.paginationParams.pages },
|
|
170
|
+
(_, i) => i + 1
|
|
171
|
+
)
|
|
172
|
+
},
|
|
173
|
+
},
|
|
174
|
+
}
|
|
175
|
+
</script>
|