Skip to content

Commit 5ff16fd

Browse files
egauzensegauzens
committed
Added pagination and pagination menu
1 parent cc6cfb4 commit 5ff16fd

File tree

7 files changed

+275
-9
lines changed

7 files changed

+275
-9
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sparc-design-system-components-2",
3-
"version": "0.0.17",
3+
"version": "0.0.18",
44
"private": false,
55
"scripts": {
66
"dev": "vite",

‎src/App.vue

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,15 @@
222222
</div>
223223
</el-popover>
224224
</div>
225+
<pagination
226+
:total-count="pageCount"
227+
:selected="selectedPage"
228+
@select-page="onPaginationChange"
229+
/>
230+
<pagination-menu
231+
:page-size="pageSize"
232+
@update-page-size="updatePageSize"
233+
/>
225234
</main>
226235
</template>
227236

@@ -232,6 +241,8 @@
232241
import LargeModal from './components/LargeModal.vue'
233242
import SparcRadio from './components/SparcRadio.vue'
234243
import DropdownMultiselect from './components/DropdownMultiselect/DropdownMultiselect.vue'
244+
import Pagination from './components/Pagination.vue'
245+
import PaginationMenu from './components/PaginationMenu.vue'
235246
import { ref } from 'vue'
236247
import { successMessage, infoMessage, failMessage, informationNotification, iconInformationNotification } from "../utils/notificationMessages"
237248
@@ -726,7 +737,9 @@
726737
SparcLogo,
727738
LargeModal,
728739
SparcRadio,
729-
DropdownMultiselect
740+
DropdownMultiselect,
741+
Pagination,
742+
PaginationMenu
730743
},
731744
name: 'App',
732745
setup() {
@@ -767,6 +780,9 @@
767780
])
768781
const dialogVisible = ref(false)
769782
const dialogVisibleLarge = ref(false)
783+
const pageSize= ref(10)
784+
const pageCount= ref(100)
785+
const selectedPage = ref(3)
770786
771787
return {
772788
dropdownMultiselectTooltip,
@@ -785,7 +801,10 @@
785801
value,
786802
selectVal,
787803
selectOpts,
788-
options
804+
options,
805+
pageSize,
806+
pageCount,
807+
selectedPage
789808
}
790809
},
791810
methods: {
@@ -806,7 +825,14 @@
806825
},
807826
openDialog() {
808827
this.dialogVisible = true
809-
}
828+
},
829+
onPaginationChange: function(page) {
830+
this.selectedPage = page
831+
},
832+
updatePageSize: function(limit) {
833+
this.pageSize = limit === 'View All' ? 100 : limit
834+
this.pageCount = limit === 'View All' ? 100 : limit
835+
},
810836
}
811837
}
812838
</script>

‎src/components/DropdownMultiselect/DropdownLabel.vue

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@
1313
<arrow-icon
1414
v-show="showCollapsibleArrow"
1515
:class="showContent ? 'arrow-down' : 'arrow-up'"
16-
class="ml-8 icon-arrow"
17-
:dir="collapsibleArrowDir"
16+
class="ml-8"
1817
height="15"
1918
width="15"
2019
/>
@@ -66,9 +65,6 @@ export default {
6665
}
6766
},
6867
computed: {
69-
collapsibleArrowDir: function() {
70-
return this.showContent ? 'down' : 'up'
71-
},
7268
showContent: function() {
7369
return !(this.collapsed || this.disabled)
7470
},

‎src/components/Pagination.vue

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<template>
2+
<div class="sparc-design-system-pagination">
3+
<el-pagination
4+
:page-size="pageSize"
5+
:page-count="pageCount"
6+
:pager-count="pagerCount"
7+
layout="prev, pager, next"
8+
:total="totalCount"
9+
:current-page="selected"
10+
:background="background"
11+
@current-change="selectPage"
12+
/>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: 'Pagination',
19+
props: {
20+
selected: {
21+
type: Number,
22+
default: 1
23+
},
24+
pageSize: {
25+
type: Number,
26+
default: 20
27+
},
28+
totalCount: {
29+
type: Number,
30+
default: 0
31+
},
32+
background: {
33+
type: Boolean,
34+
default: false
35+
},
36+
pagerCount: {
37+
type: Number,
38+
default: 5
39+
}
40+
},
41+
computed: {
42+
pageCount: function() {
43+
return Math.ceil(this.totalCount / this.pageSize)
44+
}
45+
},
46+
methods: {
47+
/**
48+
* Emit select-page event
49+
*/
50+
selectPage: function(page) {
51+
this.$emit('select-page', page)
52+
}
53+
}
54+
}
55+
</script>
56+
57+
<style lang="scss">
58+
@import '../assets/_variables.scss';
59+
.sparc-design-system-pagination {
60+
.el-pagination {
61+
color: $grey;
62+
font-weight: 700;
63+
}
64+
padding-top: 1em;
65+
text-align: center;
66+
67+
.is-background {
68+
li.more,
69+
li.number {
70+
background: #f9f2fc;
71+
border: 1.5px solid $app-primary-color;
72+
color: $app-primary-color;
73+
border-radius: 50%;
74+
}
75+
.el-pager .more::before {
76+
line-height: 0;
77+
}
78+
li.number.is-active {
79+
color: white;
80+
}
81+
.btn-next, .btn-prev {
82+
background: $app-primary-color;
83+
color: white;
84+
border-radius: 50%;
85+
}
86+
.btn-next:disabled, .btn-prev:disabled {
87+
background: $lightGrey;
88+
opacity: 0.3;
89+
color: white;
90+
}
91+
.btn-next .el-icon, .btn-prev .el-icon {
92+
font-size: 1rem;
93+
}
94+
li.number:hover {
95+
background: $app-primary-color !important;
96+
color: white !important;
97+
}
98+
}
99+
100+
button.btn-prev {
101+
background: transparent;
102+
}
103+
104+
button.btn-next {
105+
background: transparent;
106+
}
107+
108+
li.more,
109+
li.number {
110+
background: transparent;
111+
}
112+
113+
li.number.is-active {
114+
border-bottom: 2px solid $purple;
115+
}
116+
117+
.el-pager li {
118+
display: unset;
119+
min-width: 0;
120+
margin: 0 .5em;
121+
font-size: 14px;
122+
}
123+
}
124+
</style>

‎src/components/PaginationMenu.vue

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<el-dropdown
3+
trigger="click"
4+
placement="bottom-start"
5+
@command="$emit('update-page-size', $event)"
6+
@visible-change="isMenuOpen = $event"
7+
>
8+
<button class="filter-dropdown el-dropdown-link">
9+
<span class="el-dropdown-text-link">
10+
{{ pageSize }}
11+
</span>
12+
<arrow-icon
13+
:class="isMenuOpen ? 'arrow-up' : 'arrow-down'"
14+
class="ml-8"
15+
height="10"
16+
width="10"
17+
/>
18+
</button>
19+
<template #dropdown>
20+
<el-dropdown-menu>
21+
<el-dropdown-item
22+
v-for="option in pageSizeOptions"
23+
:key="option"
24+
class="icon-item"
25+
:command="option"
26+
>
27+
{{ option }}
28+
<check-icon
29+
v-if="pageSize === option"
30+
class="item-icon-check"
31+
width="15"
32+
height="15"
33+
/>
34+
</el-dropdown-item>
35+
</el-dropdown-menu>
36+
</template>
37+
</el-dropdown>
38+
</template>
39+
40+
<script>
41+
import ArrowIcon from './icons/Arrow.vue'
42+
import CheckIcon from './icons/Check.vue'
43+
export default {
44+
name: 'PaginationMenu',
45+
components: {
46+
ArrowIcon,
47+
CheckIcon
48+
},
49+
props: {
50+
paginationItemLabel: {
51+
type: String,
52+
default: 'Items'
53+
},
54+
pageSize: {
55+
type: Number,
56+
default: 10
57+
},
58+
pageSizeOptions: {
59+
type: Array,
60+
default: () => {
61+
return [10, 20, 50, 'View All']
62+
}
63+
}
64+
},
65+
66+
data: function() {
67+
return {
68+
isMenuOpen: false
69+
}
70+
},
71+
}
72+
</script>
73+
74+
<style lang="scss" scoped>
75+
@import '../assets/_variables.scss';
76+
77+
.filter-dropdown {
78+
display: flex;
79+
align-items: center;
80+
border-radius: 4px;
81+
border: solid 1px $mediumGrey;
82+
background-color: transparent;
83+
font-size: 14px;
84+
font-weight: normal;
85+
color: $purple;
86+
margin-left: 5px;
87+
}
88+
89+
.icon-arrow {
90+
color: $mediumGrey;
91+
height: 5px;
92+
width: 8px;
93+
}
94+
95+
.el-dropdown-link {
96+
cursor: pointer;
97+
outline: none;
98+
}
99+
100+
.el-dropdown-text-link {
101+
margin-right: -6px;
102+
padding-top: 3px;
103+
padding-bottom: 3px;
104+
}
105+
.arrow-down {
106+
transform: rotate(180deg);
107+
}
108+
</style>

‎src/components/icons/Check.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
3+
<title>check</title>
4+
<g id="check">
5+
<path d="M17.31,7.48a1,1,0,0,1,1.41,0,1,1,0,0,1,0,1.42l-7.88,7.59a1,1,0,0,1-1.41,0l-4.11-4.2a1,1,0,1,1,1.42-1.4l3.43,3.5Z"/>
6+
</g>
7+
</svg>
8+
</template>

‎src/components/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import LargeModal from './LargeModal.vue'
77
import SparcTooltip from './SparcTooltip.vue'
88
import SparcRadio from './SparcRadio.vue';
99
import DropdownMultiselect from './DropdownMultiselect/DropdownMultiselect.vue'
10+
import Pagination from './Pagination.vue'
11+
import PaginationMenu from './PaginationMenu.vue'
1012

1113
export default {
1214
install(app) {
@@ -16,5 +18,7 @@ export default {
1618
app.component('SparcTooltip', SparcTooltip);
1719
app.component('SparcRadio', SparcRadio);
1820
app.component('DropdownMultiselect', DropdownMultiselect);
21+
app.component('Pagination', Pagination);
22+
app.component('PaginationMenu', PaginationMenu);
1923
},
2024
};

0 commit comments

Comments
 (0)