Skip to content

Commit

Permalink
refact(KtPaginatio): typescript and composition api
Browse files Browse the repository at this point in the history 
Co-Authored-By: Santiago Balladares <[email protected]>
  • Loading branch information
@Isokaeder @santiagoballadares
Isokaeder and santiagoballadares committed Oct 24, 2024
1 parent 4f2d63b commit ef51666
Show file tree
Hide file tree
Showing 8 changed files with 224 additions and 243 deletions.
55 changes: 22 additions & 33 deletions packages/documentation/pages/usage/components/pagination.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
## Basic Usage

<div class="element-example white">
<KtPagination :total="50" :pageSize="10"/>
<KtPagination :total="50" :page="page50" :pageSize="10" @setPage="updatePage50"/>
</div>

```html
Expand All @@ -14,19 +14,19 @@
## Default Page

<div class="element-example white">
<KtPagination :total="50" :pageSize="10" :page="3" />
<KtPagination :total="50" :pageSize="10" :page="page50" @setPage="updatePage50" />
</div>

```html
<KtPagination :total="50" :pageSize="10" :page="3" />
<KtPagination :total="50" :pageSize="10" />
```

## Styles

#### Expanded

<div class="element-example white">
<KtPagination pagingStyle="expand" :total="50" :pageSize="10"/>
<KtPagination pagingStyle="expand" :total="50" :pageSize="10" :page="page50" @setPage="updatePage50" />
</div>

```html
Expand All @@ -36,7 +36,7 @@
#### Fraction

<div class="element-example white">
<KtPagination pagingStyle="fraction" :total="50" :pageSize="10"/>
<KtPagination pagingStyle="fraction" :total="50" :pageSize="10" :page="page50" @setPage="updatePage50" />
</div>

```html
Expand All @@ -46,7 +46,7 @@
#### Flexible

<div class="element-example white">
<KtPagination pagingStyle="flex" :total="500" :pageSize="10"/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" :page="page500" @setPage="updatePage500" />
</div>

```html
Expand All @@ -56,12 +56,12 @@
#### Extra Options

<div class="element-example white">
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" :page="25" :adjacentAmount="1"/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" :page="25" :adjacentAmount="2"/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" :page="25" :adjacentAmount="3"/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" :page="page500" @setPage="updatePage500" :adjacentAmount="1"/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" :page="page500" @setPage="updatePage500" :adjacentAmount="2"/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" :page="page500" @setPage="updatePage500" :adjacentAmount="3"/>
<br/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10"/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" fixedWidth/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" :page="page500" @setPage="updatePage500"/>
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" :page="page500" @setPage="updatePage500" fixedWidth/>
</div>

```html
Expand Down Expand Up @@ -90,31 +90,10 @@
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" />
<KtPagination pagingStyle="flex" :total="500" :pageSize="10" fixedWidth />
```

## Usage

### Props

| Attribute | Description | Type | Accepted Values | Default |
| :--------------- | :------------------------------------------- | :-------- | :--------------------------- | :--------- |
| `adjacentAmount` | number of pairs of adjacent pages to display | `Number` | -- | `1` |
| `fixedWidth` | set width based on max number of elements | `Boolean` | `True`, `False` | `False` |
| `page` | the default page to show | `Number` | -- | -- |
| `pageSize` | amount of items each page | `Number` | -- | `10` |
| `pagingStyle` | style of the pagination | `String` | `expand`, `flex`, `fraction` | `expand` |
| `total` | total amount of items | `Number` | -- | `Required` |

### Events

| Event Name | Description | Parameters |
| :-------------------- | :---------------------------------------- | :------------------------------------- |
| `currentPageChange` | trigger when number clicked | `(event: Event, payload: currentPage)` |
| `nextPageClicked` | trigger when next page button clicked | `(event: Event, payload: currentPage)` |
| `previousPageClicked` | trigger when previous page button clicked | `(event: Event, payload: currentPage)` |
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent, ref } from 'vue'
import { KtPagination } from '@3yourmind/kotti-ui'
Expand All @@ -126,8 +105,18 @@ export default defineComponent({
ComponentInfo,
},
setup() {
const page50 = ref(1)
const page500 = ref(1)
return {
component: KtPagination,
page50,
page500,
updatePage50: (page: number) => {
page50.value = page
},
updatePage500: (page: number) => {
page500.value = page
},
}
},
})
Expand Down
207 changes: 94 additions & 113 deletions packages/kotti-ui/source/kotti-pagination/KtPagination.vue
View file
Original file line number Diff line number Diff line change
@@ -1,168 +1,149 @@
<template>
<div>
<ul class="pagination">
<li :class="paginatorClasses(0, 'disabled')" @click="previousPage">
<i class="yoco page-button">chevron_left</i>
<ul class="kt-pagination">
<li :class="paginatorClasses(0)" @click="previousPage">
<i
class="yoco kt-pagination__page-button"
v-text="Yoco.Icon.CHEVRON_LEFT"
/>
</li>
<component
:is="component"
v-bind="bound"
:is="paginationComponent"
v-bind="paginationProps"
@setPage="setCurrentPage($event)"
/>
<li :class="paginatorClasses(maximumPage, 'disabled')" @click="nextPage">
<i class="yoco page-button">chevron_right</i>
<li :class="paginatorClasses(pageAmount)" @click="nextPage">
<i
class="yoco kt-pagination__page-button"
v-text="Yoco.Icon.CHEVRON_RIGHT"
/>
</li>
</ul>
</div>
</template>

<script>
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { Yoco } from '@3yourmind/yoco'
import { makeProps } from '../make-props'
import PaginationExpanded from './components/PaginationExpanded.vue'
import PaginationFlexible from './components/PaginationFlexible.vue'
import PaginationFractionated from './components/PaginationFractionated.vue'
import { KottiPagination } from './types'
/* eslint-disable perfectionist/sort-objects */
export default {
export default defineComponent({
name: 'KtPagination',
components: {
PaginationExpanded,
PaginationFlexible,
PaginationFractionated,
},
props: {
adjacentAmount: { type: Number, default: 1 },
fixedWidth: { type: Boolean, default: false },
page: { type: Number, default: 1 },
pageSize: { type: Number, default: 10 },
pagingStyle: { type: String, default: 'expand' },
total: { type: Number, required: true },
/**
* @deprecated
* Use :pagingStyle='fraction' instead
*/
fractionStyle: { type: Boolean, default: false },
},
data() {
props: makeProps(KottiPagination.propsSchema),
emits: [
'currentPageChange',
'previousPageClicked',
'nextPageClicked',
'setPage',
],
setup(props, { emit }) {
const pageAmount = computed(() => Math.ceil(props.total / props.pageSize))
return {
currentPage: this.page - 1,
paginationComponent: computed(() => {
const isFlexLogical = 2 * (props.adjacentAmount + 1) < pageAmount.value
switch (props.pagingStyle) {
case KottiPagination.PagingStyle.FLEX:
return !isFlexLogical || pageAmount.value < 2
? PaginationExpanded.name
: PaginationFlexible.name
case KottiPagination.PagingStyle.FRACTION:
return PaginationFractionated.name
case KottiPagination.PagingStyle.EXPAND:
default:
return PaginationExpanded.name
}
}),
nextPage: () => {
if (props.page >= pageAmount.value) return
emit('nextPageClicked', props.page + 1)
emit('setPage', props.page + 1)
},
pageAmount,
paginatorClasses: (page: number) => ({
'kt-pagination__page-item': true,
'kt-pagination__page-item--is-disabled': props.page === page,
}),
paginationProps: computed(() => ({
adjacentAmount: props.adjacentAmount,
currentPage: props.page,
fixedWidth: props.fixedWidth,
maximumPage: pageAmount.value,
pageSize: props.pageSize,
total: props.total,
})),
previousPage: () => {
if (props.page === 1) return
emit('previousPageClicked', props.page - 1)
emit('setPage', props.page - 1)
},
setCurrentPage: (page: number) => {
if (page === props.page) return
emit('currentPageChange', page)
emit('setPage', page)
},
Yoco,
}
},
computed: {
bound() {
return {
adjacentAmount: this.adjacentAmount,
currentPage: this.currentPage,
fixedWidth: this.fixedWidth,
// eslint-disable-next-line @typescript-eslint/unbound-method
maximumPage: this.maximumPage,
pageSize: this.pageSize,
total: this.total,
totalPages: this.totalPages,
}
},
component() {
// eslint-disable-next-line @typescript-eslint/unbound-method, @typescript-eslint/restrict-plus-operands
const isFlexLogical = 2 * (this.adjacentAmount + 1) < this.pageAmount
// eslint-disable-next-line @typescript-eslint/unbound-method
if (!isFlexLogical || this.pageAmount < 2) return 'PaginationExpanded'
if (this.fractionStyle) {
// eslint-disable-next-line no-console
console.warn(
"<KtPagination>: fractionStyle is deprecated, please use :pagingStyle='fraction' instead",
)
return PaginationFractionated.name
}
switch (this.pagingStyle) {
case 'flex':
return PaginationFlexible.name
case 'fraction':
return PaginationFractionated.name
default:
return PaginationExpanded.name
}
},
maximumPage() {
return Math.ceil(this.total / this.pageSize) - 1
},
pageAmount() {
return Math.ceil(this.total / this.pageSize)
},
},
methods: {
paginatorClasses(page, className) {
return {
'page-item': true,
[className]: this.currentPage === page,
}
},
setCurrentPage(page) {
if (page === this.currentPage) return
this.currentPage = page
this.eventEmitter('currentPageChange')
},
nextPage() {
if (this.currentPage === this.maximumPage) return
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
this.currentPage += 1
this.eventEmitter('nextPageClicked')
},
previousPage() {
if (this.currentPage === 0) return
this.currentPage -= 1
this.eventEmitter('previousPageClicked')
},
eventEmitter(eventName) {
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
this.$emit(eventName, this.currentPage + 1)
},
},
}
/* eslint-enable perfectionist/sort-objects */
/* eslint-enable @typescript-eslint/explicit-module-boundary-types */
})
</script>

<style lang="scss">
@import '../kotti-style/_variables.scss';
:root {
--pagination-color-active: var(--interactive-03);
--kt-pagination-color-active: var(--interactive-03);
}
</style>

.pagination {
<style lang="scss" scoped>
.kt-pagination {
margin: 0;
list-style: none;
user-select: none;
.page-button {
&__page-button {
display: inline-block;
padding: var(--unit-1);
background: $lightgray-300;
background: var(--gray-10);
border-radius: var(--border-radius);
&:hover {
cursor: pointer;
background: $lightgray-400;
background: var(--gray-20);
}
}
.fraction {
display: inline-block;
:deep(.kt-pagination__page-item--is-active) {
color: var(--kt-pagination-color-active);
}
.page-item {
:deep(.kt-pagination__page-item--is-disabled) {
cursor: not-allowed;
.kt-pagination__page-button {
opacity: 0.46;
}
}
:deep(.kt-pagination__page-item) {
display: inline-block;
padding: var(--unit-2);
line-height: 24px;
text-align: center;
&--active {
color: var(--pagination-color-active);
}
&:hover {
cursor: pointer;
}
Expand Down
Loading

0 comments on commit ef51666

Please sign in to comment.