Skip to content

Commit dbf9cb2

Browse files
lepturelepture
committed
docs: update pagination docs
1 parent 1eca361 commit dbf9cb2

12 files changed

Lines changed: 327 additions & 169 deletions

File tree

‎.vitepress/meta/Pagination.json‎

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,90 +2,95 @@
22
"props": [
33
{
44
"name": "as",
5-
"description": "<p>The element or component this component should render as.</p>",
5+
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>",
66
"type": "AsTag | Component",
77
"required": false,
8-
"inherit": null,
9-
"default": "\"button\""
8+
"inherit": "reka-ui",
9+
"default": "\"div\""
1010
},
1111
{
1212
"name": "asChild",
13-
"description": "",
13+
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>",
1414
"type": "boolean",
1515
"required": false,
16-
"inherit": null
16+
"inherit": "reka-ui"
1717
},
1818
{
1919
"name": "color",
20-
"description": "<p>Overrides the accent color inherited from the ThemeProvider.</p>",
20+
"description": "",
2121
"type": "\"indigo\" | \"gray\" | \"gold\" | \"bronze\" | \"brown\" | \"yellow\" | \"amber\" | \"orange\" | \"tomato\" | \"red\" | \"ruby\" | \"crimson\" | \"pink\" | \"plum\" | \"purple\" | \"violet\" | \"iris\" | \"blue\" | \"cyan\" | \"teal\" | \"jade\" | \"green\" | \"grass\" | \"lime\" | \"mint\" | \"sky\"",
2222
"required": false,
2323
"inherit": null
2424
},
25+
{
26+
"name": "defaultPage",
27+
"description": "<p>The value of the page that should be active when initially rendered.</p>\n<p>Use when you do not need to control the value state.</p>",
28+
"type": "number",
29+
"required": false,
30+
"inherit": "reka-ui"
31+
},
2532
{
2633
"name": "disabled",
27-
"description": "<p>Mark the button as disabled.</p>",
34+
"description": "<p>When <code>true</code>, prevents the user from interacting with item</p>",
2835
"type": "boolean",
2936
"required": false,
30-
"inherit": null
37+
"inherit": "reka-ui"
3138
},
3239
{
33-
"name": "edge",
34-
"description": "",
40+
"name": "itemsPerPage",
41+
"description": "<p>Number of items per page</p>",
3542
"type": "number",
36-
"required": false,
37-
"inherit": null
43+
"required": true,
44+
"inherit": "reka-ui"
3845
},
3946
{
40-
"name": "highContrast",
41-
"description": "<p>Uses a higher contrast color for the component.</p>",
42-
"type": "boolean",
47+
"name": "navigation",
48+
"description": "",
49+
"type": "\"none\" | \"all\" | \"prev-next\" | \"first-last\"",
4350
"required": false,
4451
"inherit": null
4552
},
4653
{
4754
"name": "page",
48-
"description": "",
55+
"description": "<p>The controlled value of the current page. Can be binded as <code>v-model:page</code>.</p>",
4956
"type": "number",
50-
"required": true,
51-
"inherit": null
57+
"required": false,
58+
"inherit": "reka-ui"
5259
},
5360
{
54-
"name": "perpage",
55-
"description": "",
56-
"type": "number",
61+
"name": "showEdges",
62+
"description": "<p>When <code>true</code>, always show first page, last page, and ellipsis</p>",
63+
"type": "boolean",
5764
"required": false,
58-
"inherit": null
65+
"inherit": "reka-ui"
5966
},
6067
{
61-
"name": "radius",
62-
"description": "<p>Overrides the radius inherited from the ThemeProvider.</p>",
63-
"type": "\"none\" | \"small\" | \"medium\" | \"large\" | \"full\"",
68+
"name": "siblingCount",
69+
"description": "<p>Number of sibling should be shown around the current page</p>",
70+
"type": "number",
6471
"required": false,
65-
"inherit": null
72+
"inherit": "reka-ui"
6673
},
6774
{
6875
"name": "size",
69-
"description": "<p>Control the size of the button.</p>",
76+
"description": "",
7077
"type": "\"1\" | \"2\" | \"3\" | \"4\"",
7178
"required": false,
72-
"inherit": null,
73-
"default": "\"2\""
79+
"inherit": null
7480
},
7581
{
7682
"name": "total",
77-
"description": "",
83+
"description": "<p>Number of items in your list</p>",
7884
"type": "number",
79-
"required": true,
80-
"inherit": null
85+
"required": false,
86+
"inherit": "reka-ui"
8187
},
8288
{
8389
"name": "variant",
84-
"description": "<p>The visual variant to apply.</p>",
85-
"type": "\"solid\" | \"soft\" | \"outline\" | \"surface\" | \"classic\" | \"ghost\"",
90+
"description": "",
91+
"type": "\"soft\" | \"outline\" | \"surface\" | \"ghost\"",
8692
"required": false,
87-
"inherit": null,
88-
"default": "\"solid\""
93+
"inherit": null
8994
}
9095
],
9196
"events": [
@@ -94,12 +99,6 @@
9499
"type": "[value: number]"
95100
}
96101
],
97-
"slots": [
98-
{
99-
"name": "page",
100-
"description": "",
101-
"type": "number"
102-
}
103-
],
102+
"slots": [],
104103
"methods": []
105104
}

‎.vitepress/meta/ToastProvider.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
{
2020
"name": "position",
2121
"description": "",
22-
"type": "\"bottom-right\" | \"top-left\" | \"top-right\" | \"bottom-left\"",
22+
"type": "\"bottom-right\" | \"top-left\" | \"top-right\" | \"top-center\" | \"bottom-left\" | \"bottom-center\"",
2323
"required": false,
2424
"inherit": null
2525
},

‎docs/content/components/pagination.md‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,42 @@
11
---
22
title: Pagination
3-
status: alpha
3+
status: beta
4+
description: Paginated view with page navigation controls.
45
source: https://github.com/typlog/ui/tree/main/src/components/pagination
56
reka: https://reka-ui.com/docs/components/pagination
67
---
78

89
<Example name="pagination/Overview.vue" />
910

11+
## API Reference
12+
13+
### Pagination
14+
15+
<PropsTable name="Pagination" />
16+
1017
## Examples
1118

19+
### Size
20+
21+
<Example name="pagination/Size.vue" />
22+
1223
### Variant
1324

1425
<Example name="pagination/Variant.vue" />
26+
27+
### Color
28+
29+
<Example name="pagination/Color.vue" />
30+
31+
### Navigation
32+
33+
Controls for showing “Previous”, “Next”, “First”, and “Last” page buttons.
34+
35+
<Example name="pagination/Navigation.vue" />
36+
37+
### Without Edges
38+
39+
Without `show-edges` attribute, there will be no pagination ellipsis.
40+
41+
<Example name="pagination/WithoutEdges.vue" />
42+

‎docs/content/overview/introduction.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: Introduction
3+
---

‎docs/content/overview/tailwindcss.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: Tailwindcss
3+
---

‎docs/examples/pagination/Color.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup lang="ts">
2+
import { Pagination } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex flex-col gap-4">
7+
<Pagination
8+
:total="200"
9+
:items-per-page="10"
10+
show-edges
11+
variant="soft"
12+
color="gray"
13+
/>
14+
<Pagination
15+
:total="200"
16+
:items-per-page="10"
17+
show-edges
18+
variant="soft"
19+
color="indigo"
20+
/>
21+
<Pagination
22+
:total="200"
23+
:items-per-page="10"
24+
show-edges
25+
variant="soft"
26+
color="crimson"
27+
/>
28+
<Pagination
29+
:total="200"
30+
:items-per-page="10"
31+
show-edges
32+
variant="soft"
33+
color="violet"
34+
/>
35+
<Pagination
36+
:total="200"
37+
:items-per-page="10"
38+
show-edges
39+
variant="soft"
40+
color="amber"
41+
/>
42+
</div>
43+
</template>

‎docs/examples/pagination/Navigation.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup lang="ts">
2+
import { Pagination } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex flex-col gap-4">
7+
<Pagination
8+
:total="200"
9+
:items-per-page="10"
10+
show-edges
11+
variant="soft"
12+
navigation="none"
13+
/>
14+
<Pagination
15+
:total="200"
16+
:items-per-page="10"
17+
show-edges
18+
variant="soft"
19+
navigation="prev-next"
20+
/>
21+
<Pagination
22+
:total="200"
23+
:items-per-page="10"
24+
show-edges
25+
variant="soft"
26+
navigation="first-last"
27+
/>
28+
<Pagination
29+
:total="200"
30+
:items-per-page="10"
31+
show-edges
32+
variant="soft"
33+
navigation="all"
34+
/>
35+
</div>
36+
</template>

‎docs/examples/pagination/Size.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup lang="ts">
2+
import { Pagination } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex flex-col gap-4">
7+
<Pagination
8+
:total="200"
9+
:items-per-page="10"
10+
show-edges
11+
variant="soft"
12+
size="1"
13+
/>
14+
<Pagination
15+
:total="200"
16+
:items-per-page="10"
17+
show-edges
18+
variant="soft"
19+
size="2"
20+
/>
21+
<Pagination
22+
:total="200"
23+
:items-per-page="10"
24+
show-edges
25+
variant="soft"
26+
size="3"
27+
/>
28+
<Pagination
29+
:total="200"
30+
:items-per-page="10"
31+
show-edges
32+
variant="soft"
33+
size="4"
34+
/>
35+
</div>
36+
</template>

‎docs/examples/pagination/Variant.vue‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,27 @@ import { Pagination } from '#components'
1010
show-edges
1111
color="indigo"
1212
variant="ghost"
13-
>
14-
</Pagination>
13+
/>
1514
<Pagination
1615
:total="200"
1716
:items-per-page="10"
1817
show-edges
1918
color="indigo"
2019
variant="outline"
21-
>
22-
</Pagination>
20+
/>
2321
<Pagination
2422
:total="200"
2523
:items-per-page="10"
2624
show-edges
2725
color="indigo"
2826
variant="soft"
29-
>
30-
</Pagination>
27+
/>
3128
<Pagination
3229
:total="200"
3330
:items-per-page="10"
3431
show-edges
3532
color="indigo"
3633
variant="surface"
37-
>
38-
</Pagination>
34+
/>
3935
</div>
4036
</template>

‎docs/examples/pagination/WithoutEdges.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { Pagination } from '#components'
3+
</script>
4+
5+
<template>
6+
<Pagination
7+
:total="200"
8+
:items-per-page="10"
9+
variant="soft"
10+
/>
11+
</template>

0 commit comments

Comments
 (0)