Skip to content

Commit

Permalink
refactor(pagination): update api (#629)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlmoravek
mlmoravek committed Oct 18, 2023
1 parent 922f880 commit bb9e56d
Show file tree
Hide file tree
Showing 8 changed files with 484 additions and 556 deletions.
9 changes: 3 additions & 6 deletions packages/docs-next/.vitepress/theme/examples/pagination/base.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,8 @@ const size = ref("");
:rounded="isRounded"
:per-page="perPage"
:icon-prev="prevIcon"
:icon-next="nextIcon"
aria-next-label="Next page"
aria-previous-label="Previous page"
aria-page-label="Page"
aria-current-label="Current page">
</o-pagination>
:icon-next="nextIcon" />

<p><b>Current:</b> {{ current }}</p>
</section>
</template>
2 changes: 1 addition & 1 deletion packages/docs-next/.vitepress/theme/examples/pagination/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import SlotsCode from "./slots.vue?raw";

<template>
<h3 id="base">Base</h3>

<ExampleViewer :component="Base" :code="BaseCode" />

<h3 id="slots">Slots</h3>
<ExampleViewer :component="Slots" :code="SlotsCode" />
</template>
9 changes: 1 addition & 8 deletions packages/docs-next/.vitepress/theme/examples/pagination/inspector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,6 @@ const inspectData = [
:total="total"
:range-before="rangeBefore"
:range-after="rangeAfter"
:per-page="perPage"
aria-next-label="Next page"
aria-previous-label="Previous page"
aria-page-label="Page"
aria-current-label="Current page"
icon-prev="chevron-left"
icon-next="chevron-right">
</o-pagination>
:per-page="perPage" />
</inspector-wrapper>
</template>
26 changes: 15 additions & 11 deletions packages/docs-next/.vitepress/theme/examples/pagination/slots.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,21 +57,25 @@ function convertToRoman(num) {
<section>
<o-pagination v-model:current="current" :total="200" :per-page="10">
<template #default="props">
<o-pagination-button
:id="`page${props.page.number}`"
:page="props.page">
{{ convertToRoman(props.page.number) }}
</o-pagination-button>
<o-button
:label="convertToRoman(props.number)"
:disabled="props.isCurrent"
:aria-label="props.ariaLabel"
@click="props.click" />
</template>
<template #previous="props">
<o-pagination-button :page="props.page">
Previous
</o-pagination-button>
<o-button
label="Previous"
:disabled="props.isCurrent"
:aria-label="props.ariaLabel"
@click="props.click" />
</template>
<template #next="props">
<o-pagination-button :page="props.page">
Next
</o-pagination-button>
<o-button
label="Next"
:disabled="props.isCurrent"
:aria-label="props.ariaLabel"
@click="props.click" />
</template>
</o-pagination>
</section>
Expand Down
57 changes: 27 additions & 30 deletions packages/docs-next/components/Pagination.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,42 +38,39 @@ title: Pagination

### Props

| Prop name | Description | Type | Values | Default |
| ----------------- | ------------------------------------------------------------------- | ------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ariaCurrentLabel | | string | - | <code style='white-space: nowrap; padding: 0;'></code> |
| ariaNextLabel | | string | - | <code style='white-space: nowrap; padding: 0;'></code> |
| ariaPageLabel | | string | - | <code style='white-space: nowrap; padding: 0;'></code> |
| ariaPreviousLabel | | string | - | <code style='white-space: nowrap; padding: 0;'></code> |
| current | Current page number, use v-model:current to make it two-way binding | number | - | <code style='white-space: nowrap; padding: 0;'>1</code> |
| iconNext | Icon to use for next button | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;iconNext: "chevron-right", <br>}</code> |
| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` | <code style='white-space: nowrap; padding: 0;'></code> |
| iconPrev | Icon to use for previous button | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;iconPrev: "chevron-left", <br>}</code> |
| mobileBreakpoint | Mobile breakpoint as max-width value | string | - | <code style='white-space: nowrap; padding: 0;'></code> |
| order | Buttons order, optional | string | `centered`, `right`, `left` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;order: "right", <br>}</code> |
| override | | boolean | - | <code style='white-space: nowrap; padding: 0;'></code> |
| perPage | Items count for each page | number | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;perPage: 20<br>}</code> |
| rangeAfter | Number of pagination items to show after current page | number | - | <code style='white-space: nowrap; padding: 0;'>1</code> |
| rangeBefore | Number of pagination items to show before current page | number | - | <code style='white-space: nowrap; padding: 0;'>1</code> |
| rounded | Rounded button styles | boolean | - | <code style='white-space: nowrap; padding: 0;'></code> |
| simple | Simple style | boolean | - | <code style='white-space: nowrap; padding: 0;'></code> |
| size | Pagination size, optional | string | `small`, `medium`, `large` | <code style='white-space: nowrap; padding: 0;'></code> |
| total | Total count of items | number | - | <code style='white-space: nowrap; padding: 0;'></code> |
| Prop name | Description | Type | Values | Default |
| ----------------- | -------------------------------------------------------------------- | ------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ariaCurrentLabel | Accessibility label for the current page button. | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;ariaNextLabel: "Current page"<br>}</code> |
| ariaNextLabel | Accessibility label for the next page button. | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;ariaNextLabel: "Next page"<br>}</code> |
| ariaPageLabel | Accessibility label for the page button. | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;ariaNextLabel: "page"<br>}</code> |
| ariaPreviousLabel | Accessibility label for the previous page button. | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;ariaNextLabel: "Previous page"<br>}</code> |
| current | Current page number, use v-model:current to make it two-way binding. | number | - | <code style='white-space: nowrap; padding: 0;'>1</code> |
| iconNext | Icon to use for next button | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;iconNext: "chevron-right"<br>}</code> |
| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code> |
| iconPrev | Icon to use for previous button | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;iconPrev: "chevron-left"<br>}</code> |
| order | Buttons order, optional | string | `centered`, `right`, `left` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;order: "right"<br>}</code> |
| perPage | Items count for each page | number | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;perPage: 20<br>}</code> |
| rangeAfter | Number of pagination items to show after current page. | number | - | <code style='white-space: nowrap; padding: 0;'>1</code> |
| rangeBefore | Number of pagination items to show before current page. | number | - | <code style='white-space: nowrap; padding: 0;'>1</code> |
| rounded | Rounded button style | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;rounded: false<br>}</code> |
| simple | Simple style | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;simple: false<br>}</code> |
| size | Pagination size, optional | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>pagination: {<br>&nbsp;&nbsp;size: undefined<br>}</code> |
| total | Total count of items | number | - | |

### Events

| Event name | Properties | Description |
| -------------- | ---------- | ----------- |
| update:active | |
| change | |
| update:current | |
| Event name | Properties | Description |
| -------------- | ----------------------------------------- | ---------------------------- |
| update:current | **value** `number` - updated current prop | current prop two-way binding |
| change | **value** `number` - current value | on current change event |

### Slots

| Name | Description | Bindings |
| -------- | ----------- | ---------- |
| previous | | <br/><br/> |
| next | | <br/><br/> |
| default | | <br/><br/> |
| Name | Description | Bindings |
| -------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| previous | Previous button slot | **number** `number` - page number<br/>**isCurrent** `boolean` - if page is current<br/>**click** `(event:Event): void` - onClick handler<br/>**ariaLabel** `string` - aria-label attribute |
| next | Next button slot | **number** `number` - page number<br/>**isCurrent** `boolean` - if page is current<br/>**click** `(event:Event): void` - onClick handler<br/>**ariaLabel** `string` - aria-label attribute |
| default | Pagination button slot | **number** `number` - page number<br/>**isCurrent** `boolean` - if page is current<br/>**click** `(event:Event): void` - onClick handler<br/>**ariaLabel** `string` - aria-label attribute |

</div>

Expand Down
Loading

0 comments on commit bb9e56d

Please sign in to comment.