Skip to content

Commit b8a1024

Browse files
elevatebartelevatebart
authored
chore: update ui-libs (#3123)
1 parent 2121b2e commit b8a1024

File tree

9 files changed

+165
-221
lines changed

9 files changed

+165
-221
lines changed

‎components/blogs/BlogsList.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
</div>
9797
<CommonPagination
9898
:totalPages="totalPages"
99-
@on-page-change="changePage"
99+
v-model:current-page="pageNo"
100100
v-if="totalPages > 1"
101101
/>
102102
</div>
@@ -202,10 +202,6 @@ export default {
202202
return blogs[blogs.length - 1];
203203
},
204204
205-
changePage(value) {
206-
this.pageNo = value;
207-
},
208-
209205
scrollToView({ el, ref }) {
210206
this.$nextTick(() => {
211207
const element = this.$refs[ref || `blog-${el}`];

‎components/blueprints/Lists.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@
3636
<div class="d-flex align-items-baseline" v-if="totalBlueprints > itemsPerPage">
3737
<CommonPagination
3838
:totalPages="totalPages"
39-
@on-page-change="changePage"
39+
v-model:current-page="currentPage"
40+
@update:current-page="changePage"
4041
v-if="totalPages > 1"
4142
/>
4243
<span class="total-pages">Total {{ totalBlueprints }}</span>
@@ -120,8 +121,7 @@ if(blueprintsData.value) {
120121
setBlueprints(blueprintsData.value.results, blueprintsData.value.total)
121122
}
122123
123-
const changePage = (pageNo) => {
124-
currentPage.value = pageNo
124+
const changePage = () => {
125125
window.scrollTo(0, 0)
126126
};
127127

‎components/common/Pagination.vue‎

Lines changed: 46 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
11
<template>
22
<nav aria-label="Page navigation">
33
<ul class="pagination mb-0">
4-
<li class="page-item" @click="changePage({ direction: 'previous' })" role="button">
4+
<li class="page-item" @click="changePage({ direction: 'previous' })" role="button">
55
<span class="page-link fw-bold arrow-button bg-dark-2" tabindex="-1" aria-disabled="true"><ChevronLeft /></span>
66
</li>
77
<li
88
v-for="n in pages"
99
:key="n"
1010
:role="n === morePagesPlaceholder ? '' : 'button'"
1111
class="page-item"
12-
:class="{
13-
'active': currentPage === n,
14-
'disabled': n === morePagesPlaceholder
15-
}"
12+
:class="{ 'active': currentPage === n, 'disabled': n === morePagesPlaceholder }"
1613
@click="changePage({ pageNo: n })"
1714
>
18-
<span class="page-list-item page-link fw-bold">{{ n }}</span>
15+
<span class="page-list-item bg-dark-2 page-link fw-bold">{{ n }}</span>
1916
</li>
2017
<li class="page-item" @click="changePage({ direction: 'next' })" role="button">
2118
<span class="page-link fw-bold arrow-button bg-dark-2"><ChevronRight /></span>
@@ -24,68 +21,55 @@
2421
</nav>
2522
</template>
2623

27-
<script>
24+
<script lang="ts" setup>
25+
import { computed, watch } from 'vue'
2826
import ChevronLeft from "vue-material-design-icons/ChevronLeft.vue"
2927
import ChevronRight from "vue-material-design-icons/ChevronRight.vue"
3028
31-
export default {
32-
components: { ChevronLeft, ChevronRight },
33-
data() {
34-
return {
35-
currentPage: 1,
36-
morePagesPlaceholder: "..."
37-
}
38-
},
39-
props: {
40-
totalPages: {
41-
type: Number,
42-
required: true
43-
},
44-
},
45-
mounted() {
46-
if(this.$route.query.page) {
47-
this.currentPage = parseInt(this.$route.query.page)
48-
}
49-
},
50-
methods: {
51-
changePage(event) {
52-
if(event.direction && event.direction === 'previous' && this.currentPage > 1) {
53-
this.currentPage--
54-
}
55-
else if(event.direction && event.direction === 'next' && this.currentPage < this.totalPages) {
56-
this.currentPage++
57-
}
58-
else if(event.pageNo && event.pageNo !== this.morePagesPlaceholder) {
59-
this.currentPage = event.pageNo
60-
}
61-
},
62-
paginate(current_page, last_page) {
63-
let pages = [];
64-
for (let i = 1; i <= last_page; i++) {
65-
let offset = 1;
66-
if (i === 1 || (current_page - offset <= i && current_page + offset >= i) || i === current_page || i === last_page) {
67-
pages.push(i);
68-
} else if (i === current_page - (offset + 1) || i === current_page + (offset + 1)) {
69-
pages.push(this.morePagesPlaceholder);
70-
}
71-
}
72-
return pages;
73-
}
74-
},
75-
watch: {
76-
currentPage(value) {
77-
this.$emit('onPageChange', value)
78-
},
79-
totalPages() {
80-
this.currentPage = 1
81-
}
82-
},
83-
computed: {
84-
pages() {
85-
return this.paginate(this.currentPage, this.totalPages)
29+
const morePagesPlaceholder = '...' as const
30+
31+
const props = defineProps<{
32+
totalPages: number
33+
}>()
34+
35+
const currentPage = defineModel<number>('currentPage', { required: true })
36+
37+
watch(() => props.totalPages, () => {
38+
currentPage.value = 1
39+
})
40+
41+
function changePage(event: { direction?: 'previous' | 'next', pageNo?: number | "..." }) {
42+
if (event.direction === 'previous' && currentPage.value > 1) {
43+
currentPage.value--
44+
} else if (event.direction === 'next' && currentPage.value < props.totalPages) {
45+
currentPage.value++
46+
} else if (event.pageNo && event.pageNo !== morePagesPlaceholder) {
47+
currentPage.value = event.pageNo
48+
}
49+
}
50+
51+
function paginate(current_page: number, last_page: number): (number | "...")[] {
52+
const pages: (number | "...")[] = []
53+
for (let i = 1; i <= last_page; i++) {
54+
const offset = 1
55+
if (
56+
i === 1 ||
57+
(current_page - offset <= i && current_page + offset >= i) ||
58+
i === current_page ||
59+
i === last_page
60+
) {
61+
pages.push(i)
62+
} else if (
63+
i === current_page - (offset + 1) ||
64+
i === current_page + (offset + 1)
65+
) {
66+
pages.push(morePagesPlaceholder)
8667
}
8768
}
69+
return pages
8870
}
71+
72+
const pages = computed<(number | "...")[]>(() => paginate(currentPage.value, props.totalPages))
8973
</script>
9074

9175
<style scoped lang="scss">

‎components/plugins/PluginsLists.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@
4242
<div class="d-flex justify-content-between align-items-center">
4343
<CommonPagination
4444
:totalPages="totalPages"
45-
@on-page-change="changePage"
45+
v-model:current-page="currentPage"
46+
@update:current-page="changePage"
4647
v-if="totalPages > 1"
4748
/>
4849
<div class="d-flex align-items-baseline">
@@ -152,8 +153,7 @@ ${elements.map(({cls}) => `<li>
152153
});
153154
}
154155
155-
const changePage = (pageNo: number) => {
156-
currentPage.value = pageNo;
156+
const changePage = () => {
157157
window.scrollTo(0, 0)
158158
};
159159

‎components/stories/StoriesList.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,12 @@
2222
<option :value="50">50</option>
2323
</select>
2424
</div>
25-
<CommonPagination :totalPages="totalPages" @on-page-change="changePage" v-if="totalPages > 1" />
25+
<CommonPagination
26+
v-if="totalPages > 1"
27+
:totalPages="totalPages"
28+
v-model:current-page="currentPage"
29+
@update:current-page="changePage"
30+
/>
2631
</div>
2732
</div>
2833
</template>
@@ -44,8 +49,7 @@ const currentPage = ref(1);
4449
const totalPages = computed(()=>{
4550
return Math.ceil(props.totalStories / itemsPerPage.value)
4651
})
47-
const changePage = (pageNo) => {
48-
currentPage.value = pageNo
52+
const changePage = () => {
4953
window.scrollTo(0, 0)
5054
fetchPageData()
5155
}

‎components/videos/TutorialsList.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@
100100
<div class="d-flex justify-content-between align-items-center">
101101
<CommonPagination
102102
:totalPages="totalPages"
103-
@on-page-change="changePage"
103+
v-model:current-page="page"
104+
@update:current-page="changePage"
104105
v-if="totalPages > 1"
105106
/>
106107
<div class="d-flex align-items-baseline">
@@ -201,7 +202,7 @@ const tags = new Map([
201202
['feature-highlight', 'Feature Highlight']
202203
])
203204
204-
const page = computed(() =>
205+
const page = computed(() =>
205206
route.query.page ? parseInt(route.query.page as string) : 1
206207
)
207208

0 commit comments

Comments
 (0)