Skip to content

Commit 1eca361

Browse files
lepturelepture
committed
refactor!: use reka-ui's pagination
1 parent 15bb65b commit 1eca361

8 files changed

Lines changed: 268 additions & 189 deletions

File tree

‎.vitepress/config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,12 @@ export default defineConfig<ThemeConfig>({
7676
text: 'Overview',
7777
icon: 'lucide:rocket',
7878
items: [
79+
{ text: 'Introduction', link: '/overview/introduction' },
7980
{ text: 'Getting started', link: '/overview/getting-started' },
8081
{ text: 'Releases', link: '/overview/releases' },
8182
{ text: 'Color', link: '/overview/color' },
8283
{ text: 'Shadows', link: '/overview/shadows' },
84+
{ text: 'Tailwindcss', link: '/overview/tailwindcss' },
8385
],
8486
},
8587
{

‎docs/content/components/pagination.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,13 @@
22
title: Pagination
33
status: alpha
44
source: https://github.com/typlog/ui/tree/main/src/components/pagination
5+
reka: https://reka-ui.com/docs/components/pagination
56
---
7+
8+
<Example name="pagination/Overview.vue" />
9+
10+
## Examples
11+
12+
### Variant
13+
14+
<Example name="pagination/Variant.vue" />

‎docs/examples/pagination/Overview.vue‎

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

‎docs/examples/pagination/Variant.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
color="indigo"
12+
variant="ghost"
13+
>
14+
</Pagination>
15+
<Pagination
16+
:total="200"
17+
:items-per-page="10"
18+
show-edges
19+
color="indigo"
20+
variant="outline"
21+
>
22+
</Pagination>
23+
<Pagination
24+
:total="200"
25+
:items-per-page="10"
26+
show-edges
27+
color="indigo"
28+
variant="soft"
29+
>
30+
</Pagination>
31+
<Pagination
32+
:total="200"
33+
:items-per-page="10"
34+
show-edges
35+
color="indigo"
36+
variant="surface"
37+
>
38+
</Pagination>
39+
</div>
40+
</template>

‎src/components/button/style.css‎

Lines changed: 52 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
1-
.ui-Button {
2-
display: inline-flex;
3-
align-items: center;
4-
justify-content: center;
5-
flex-shrink: 0;
6-
user-select: none;
7-
vertical-align: top;
8-
font-style: normal;
9-
font-weight: var(--button-font-weight);
10-
text-align: center;
11-
white-space: nowrap;
12-
height: var(--button-height);
13-
padding-left: var(--button-padding-x);
14-
padding-right: var(--button-padding-x);
1+
@layer components {
2+
.ui-Button {
3+
display: inline-flex;
4+
align-items: center;
5+
justify-content: center;
6+
flex-shrink: 0;
7+
user-select: none;
8+
vertical-align: top;
9+
font-style: normal;
10+
font-weight: var(--button-font-weight);
11+
text-align: center;
12+
white-space: nowrap;
13+
height: var(--button-height);
14+
padding-left: var(--button-padding-x);
15+
padding-right: var(--button-padding-x);
16+
gap: var(--button-gap);
17+
font-size: var(--button-font-size);
18+
line-height: var(--button-line-height);
19+
letter-spacing: var(--button-letter-spacing);
20+
border-radius: var(--button-radius);
21+
}
1522
}
1623

1724
.ui-Button:where(.r-variant-ghost) {
@@ -22,61 +29,61 @@
2229
--button-font-weight: var(--font-weight-medium);
2330
}
2431

25-
.ui-Button:where([data-disabled]) {
32+
.ui-Button:where(:disabled, [data-disabled]) {
2633
cursor: not-allowed;
2734
}
2835

2936
.ui-Button:where(.r-size-1) {
30-
gap: var(--space-1);
31-
font-size: var(--font-size-1);
32-
line-height: var(--line-height-1);
33-
letter-spacing: var(--letter-spacing-1);
34-
border-radius: max(var(--radius-1), var(--radius-full));
37+
--button-gap: var(--space-1);
38+
--button-font-size: var(--font-size-1);
39+
--button-line-height: var(--line-height-1);
40+
--button-letter-spacing: var(--letter-spacing-1);
41+
--button-radius: max(var(--radius-1), var(--radius-full));
3542
--button-height: var(--space-5);
3643
--button-padding-x: var(--space-2);
3744
}
3845
.ui-Button:where(.r-size-1):where(.r-variant-ghost) {
3946
--button-ghost-padding-y: var(--space-1);
4047
}
4148
.ui-Button:where(.r-size-2) {
42-
gap: var(--space-2);
43-
font-size: var(--font-size-2);
44-
line-height: var(--line-height-2);
45-
letter-spacing: var(--letter-spacing-2);
46-
border-radius: max(var(--radius-2), var(--radius-full));
49+
--button-gap: var(--space-2);
50+
--button-font-size: var(--font-size-2);
51+
--button-line-height: var(--line-height-2);
52+
--button-letter-spacing: var(--letter-spacing-2);
53+
--button-radius: max(var(--radius-2), var(--radius-full));
4754
--button-height: var(--space-6);
4855
--button-padding-x: var(--space-3);
4956
}
5057
.ui-Button:where(.r-size-2):where(.r-variant-ghost) {
51-
gap: var(--space-1);
58+
--button-gap: var(--space-1);
5259
--button-padding-x: var(--space-2);
5360
--button-ghost-padding-y: var(--space-1);
5461
}
5562
.ui-Button:where(.r-size-3) {
56-
gap: var(--space-3);
57-
font-size: var(--font-size-3);
58-
line-height: var(--line-height-3);
59-
letter-spacing: var(--letter-spacing-3);
60-
border-radius: max(var(--radius-3), var(--radius-full));
63+
--button-gap: var(--space-3);
64+
--button-font-size: var(--font-size-3);
65+
--button-line-height: var(--line-height-3);
66+
--button-letter-spacing: var(--letter-spacing-3);
67+
--button-radius: max(var(--radius-3), var(--radius-full));
6168
--button-height: var(--space-7);
6269
--button-padding-x: var(--space-4);
6370
}
6471
.ui-Button:where(.r-size-3):where(.r-variant-ghost) {
65-
gap: var(--space-2);
72+
--button-gap: var(--space-2);
6673
--button-padding-x: var(--space-3);
6774
--button-ghost-padding-y: calc(var(--space-1) * 1.5);
6875
}
6976
.ui-Button:where(.r-size-4) {
70-
gap: var(--space-3);
71-
font-size: var(--font-size-4);
72-
line-height: var(--line-height-4);
73-
letter-spacing: var(--letter-spacing-4);
74-
border-radius: max(var(--radius-4), var(--radius-full));
77+
--button-gap: var(--space-3);
78+
--button-font-size: var(--font-size-4);
79+
--button-line-height: var(--line-height-4);
80+
--button-letter-spacing: var(--letter-spacing-4);
81+
--button-radius: max(var(--radius-4), var(--radius-full));
7582
--button-height: var(--space-8);
7683
--button-padding-x: var(--space-5);
7784
}
7885
.ui-Button:where(.r-size-4):where(.r-variant-ghost) {
79-
gap: var(--space-2);
86+
--button-gap: var(--space-2);
8087
--button-padding-x: var(--space-4);
8188
--button-ghost-padding-y: var(--space-2);
8289
}
@@ -119,7 +126,7 @@
119126
filter: var(--button-solid-high-contrast-hover-filter);
120127
}
121128
}
122-
.ui-Button:where(.r-variant-solid):where([data-disabled]) {
129+
.ui-Button:where(.r-variant-solid):where(:disabled, [data-disabled]) {
123130
color: var(--gray-a8);
124131
background-color: var(--gray-a3);
125132
outline: none;
@@ -148,7 +155,7 @@
148155
.ui-Button:where(.r-variant-soft):where(:active) {
149156
background-color: var(--accent-a5);
150157
}
151-
.ui-Button:where(.r-variant-soft):where([data-disabled]) {
158+
.ui-Button:where(.r-variant-soft):where(:disabled, [data-disabled]) {
152159
color: var(--gray-a8);
153160
background-color: var(--gray-a3);
154161
}
@@ -167,7 +174,7 @@
167174
.ui-Button:where(.r-variant-ghost):where(:active) {
168175
background-color: var(--accent-a4);
169176
}
170-
.ui-Button:where(.r-variant-ghost):where([data-disabled]) {
177+
.ui-Button:where(.r-variant-ghost):where(:disabled, [data-disabled]) {
171178
color: var(--gray-a8);
172179
background-color: transparent;
173180
}
@@ -194,10 +201,10 @@
194201
outline: 2px solid var(--focus-8);
195202
outline-offset: 2px;
196203
}
197-
.ui-Button:where(.r-variant-classic):where(:active:not([data-disabled])) {
204+
.ui-Button:where(.r-variant-classic):where(:active:not(:disabled, [data-disabled])) {
198205
box-shadow: var(--shadow-1);
199206
}
200-
.ui-Button:where(.r-variant-classic):where([data-disabled]) {
207+
.ui-Button:where(.r-variant-classic):where(:disabled, [data-disabled]) {
201208
color: var(--gray-a10);
202209
background-color: var(--gray-a2);
203210
}
@@ -223,7 +230,7 @@
223230
.ui-Button:where(.r-variant-outline):where(:active) {
224231
background-color: var(--accent-a4);
225232
}
226-
.ui-Button:where(.r-variant-outline):where([data-disabled]) {
233+
.ui-Button:where(.r-variant-outline):where(:disabled, [data-disabled]) {
227234
color: var(--gray-a8);
228235
box-shadow: inset 0 0 0 1px var(--gray-a7);
229236
background-color: transparent;
@@ -250,7 +257,7 @@
250257
.ui-Button:where(.r-variant-surface):where(:active) {
251258
background-color: var(--accent-a4);
252259
}
253-
.ui-Button:where(.r-variant-surface):where([data-disabled]) {
260+
.ui-Button:where(.r-variant-surface):where(:disabled, [data-disabled]) {
254261
color: var(--gray-a8);
255262
box-shadow: inset 0 0 0 1px var(--gray-a6);
256263
background-color: var(--gray-a2);

0 commit comments

Comments
 (0)