Skip to content
This repository was archived by the owner on Sep 8, 2025. It is now read-only.

Commit 1b998fc

Browse files
j0h-devj0h-dev
committed
Refactor site pages: Added IDs to toggles, checkboxes, and inputs
1 parent 603eb4f commit 1b998fc

File tree

4 files changed

+177
-41
lines changed

4 files changed

+177
-41
lines changed

‎pages/UI/buttons.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,29 @@
22
<div class="flex w-full flex-row flex-wrap justify-evenly gap-6">
33
<div class="flex flex-col items-center gap-2">
44
<Heading size="sm">Solid buttons</Heading>
5-
<Button @click="onClick" size="xs">Some text (xs)</Button>
6-
<Button @click="onClick" size="sm">Some text (sm)</Button>
7-
<Button @click="onClick" size="md">Some text (md)</Button>
8-
<Button @click="onClick" size="lg">Some text (lg)</Button>
9-
<Button @click="onClick" size="xl">Some text (xl)</Button>
5+
<Button @click="onClick" size="xs" id="checkbox-solid-01">Some text (xs)</Button>
6+
<Button @click="onClick" size="sm" id="checkbox-solid-02">Some text (sm)</Button>
7+
<Button @click="onClick" size="md" id="checkbox-solid-03">Some text (md)</Button>
8+
<Button @click="onClick" size="lg" id="checkbox-solid-04">Some text (lg)</Button>
9+
<Button @click="onClick" size="xl" id="checkbox-solid-05">Some text (xl)</Button>
1010
</div>
1111

1212
<div class="flex flex-col items-center gap-2">
1313
<Heading size="sm">Ghost buttons</Heading>
14-
<Button @click="onClick" size="xs" variant="ghost">Some text (xs)</Button>
15-
<Button @click="onClick" size="sm" variant="ghost">Some text (sm)</Button>
16-
<Button @click="onClick" size="md" variant="ghost">Some text (md)</Button>
17-
<Button @click="onClick" size="lg" variant="ghost">Some text (lg)</Button>
18-
<Button @click="onClick" size="xl" variant="ghost">Some text (xl)</Button>
14+
<Button @click="onClick" size="xs" variant="ghost" id="checkbox-ghost-01">Some text (xs)</Button>
15+
<Button @click="onClick" size="sm" variant="ghost" id="checkbox-solid-02">Some text (sm)</Button>
16+
<Button @click="onClick" size="md" variant="ghost" id="checkbox-solid-03">Some text (md)</Button>
17+
<Button @click="onClick" size="lg" variant="ghost" id="checkbox-solid-04">Some text (lg)</Button>
18+
<Button @click="onClick" size="xl" variant="ghost" id="checkbox-solid-05">Some text (xl)</Button>
1919
</div>
2020

2121
<div class="flex flex-col items-center gap-2">
2222
<Heading size="sm">Soft Buttons</Heading>
23-
<Button @click="onClick" size="xs" variant="soft">Some text (xs)</Button>
24-
<Button @click="onClick" size="sm" variant="soft">Some text (sm)</Button>
25-
<Button @click="onClick" size="md" variant="soft">Some text (md)</Button>
26-
<Button @click="onClick" size="lg" variant="soft">Some text (lg)</Button>
27-
<Button @click="onClick" size="xl" variant="soft">Some text (xl)</Button>
23+
<Button @click="onClick" size="xs" variant="soft" id="checkbox-soft-01">Some text (xs)</Button>
24+
<Button @click="onClick" size="sm" variant="soft" id="checkbox-soft-02">Some text (sm)</Button>
25+
<Button @click="onClick" size="md" variant="soft" id="checkbox-soft-03">Some text (md)</Button>
26+
<Button @click="onClick" size="lg" variant="soft" id="checkbox-soft-04">Some text (lg)</Button>
27+
<Button @click="onClick" size="xl" variant="soft" id="checkbox-soft-05">Some text (xl)</Button>
2828
</div>
2929
</div>
3030
</template>

‎pages/UI/checkbox.vue‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,60 @@
11
<template>
22
<div class="flex flex-col gap-12">
33
<div>
4-
<span>
5-
Currently {{ checkedCount }} checkboxes are checked!
6-
</span>
4+
<span> Currently {{ checkedCount }} checkboxes are checked! </span>
75
</div>
86

97
<Heading size="sm">Default Checkbox</Heading>
108
<div class="flex w-full flex-row flex-wrap justify-evenly gap-6">
119
<div class="flex flex-col gap-4">
12-
<Checkbox label="Text" helper="Checkbox can also have helper text" size="sm" v-model="checkboxes[0]" />
13-
<Checkbox label="Text" helper="Checkbox can also have helper text" size="md" v-model="checkboxes[1]" />
14-
<Checkbox label="Text" helper="Checkbox can also have helper text" size="lg" v-model="checkboxes[2]" />
10+
<Checkbox
11+
label="Checkbox"
12+
helper="Checkbox can also have helper text"
13+
size="sm"
14+
v-model="checkboxes[0]"
15+
id="checkbox-01"
16+
/>
17+
<Checkbox
18+
label="Checkbox"
19+
helper="Checkbox can also have helper text"
20+
size="md"
21+
v-model="checkboxes[1]"
22+
id="checkbox-02"
23+
/>
24+
<Checkbox
25+
label="Checkbox"
26+
helper="Checkbox can also have helper text"
27+
size="lg"
28+
v-model="checkboxes[2]"
29+
id="checkbox-03"
30+
/>
1531
</div>
1632

1733
<div class="flex flex-col gap-4">
18-
<Checkbox label="Text" helper="Checkbox can also have helper text" size="sm" v-model="checkboxes[3]" disabled />
19-
<Checkbox label="Text" helper="Checkbox can also have helper text" size="md" v-model="checkboxes[4]" disabled />
20-
<Checkbox label="Text" helper="Checkbox can also have helper text" size="lg" v-model="checkboxes[5]" disabled />
34+
<Checkbox
35+
label="Checkbox"
36+
helper="Checkbox can also have helper text"
37+
size="sm"
38+
v-model="checkboxes[3]"
39+
disabled
40+
id="checkbox-04"
41+
/>
42+
<Checkbox
43+
label="Checkbox"
44+
helper="Checkbox can also have helper text"
45+
size="md"
46+
v-model="checkboxes[4]"
47+
disabled
48+
id="checkbox-05"
49+
/>
50+
<Checkbox
51+
label="Checkbox"
52+
helper="Checkbox can also have helper text"
53+
size="lg"
54+
v-model="checkboxes[5]"
55+
disabled
56+
id="checkbox-06"
57+
/>
2158
</div>
2259
</div>
2360
</div>
@@ -26,13 +63,13 @@
2663
<script setup>
2764
definePageMeta({
2865
title: 'Component: Checkbox',
29-
description: 'Nuxt UI checkbox component',
66+
description: 'Nuxt UI checkbox component'
3067
})
3168
32-
const checkboxes = ref([])
69+
const checkboxes = ref([])
3370
3471
const checkedCount = computed(() => {
35-
const checked = checkboxes.value.filter(value => !!value)
72+
const checked = checkboxes.value.filter((value) => !!value)
3673
return checked.length
3774
})
3875
</script>

‎pages/UI/input.vue‎

Lines changed: 68 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,77 @@
33
<Heading size="sm">Default Text Input</Heading>
44
<div class="flex w-full flex-row flex-wrap justify-evenly gap-6">
55
<div class="flex flex-col gap-4">
6-
<Input label="Text" helper="Input can also have helper text" size="sm" v-model="text" variant="default" />
7-
<Input label="Text" helper="Input can also have helper text" size="md" v-model="text" variant="default" />
8-
<Input label="Text" helper="Input can also have helper text" size="lg" v-model="text" variant="default" />
9-
<Input label="Text" helper="Input can also have helper text" size="xl" v-model="text" variant="default" />
6+
<Input
7+
label="Text"
8+
helper="Input can also have helper text"
9+
size="sm"
10+
v-model="text"
11+
variant="default"
12+
id="input-01"
13+
/>
14+
<Input
15+
label="Text"
16+
helper="Input can also have helper text"
17+
size="md"
18+
v-model="text"
19+
variant="default"
20+
id="input-02"
21+
/>
22+
<Input
23+
label="Text"
24+
helper="Input can also have helper text"
25+
size="lg"
26+
v-model="text"
27+
variant="default"
28+
id="input-03"
29+
/>
30+
<Input
31+
label="Text"
32+
helper="Input can also have helper text"
33+
size="xl"
34+
v-model="text"
35+
variant="default"
36+
id="input-04"
37+
/>
1038
</div>
1139

1240
<div class="flex flex-col gap-4">
13-
<Input label="Text" helper="Input can also have helper text" size="sm" variant="default" v-model="text" disabled />
14-
<Input label="Text" helper="Input can also have helper text" size="md" variant="default" v-model="text" disabled />
15-
<Input label="Text" helper="Input can also have helper text" size="lg" variant="default" v-model="text" disabled />
16-
<Input label="Text" helper="Input can also have helper text" size="xl" variant="default" v-model="text" disabled />
41+
<Input
42+
label="Text"
43+
helper="Input can also have helper text"
44+
size="sm"
45+
variant="default"
46+
v-model="text"
47+
disabled
48+
id="input-05"
49+
/>
50+
<Input
51+
label="Text"
52+
helper="Input can also have helper text"
53+
size="md"
54+
variant="default"
55+
v-model="text"
56+
disabled
57+
id="input-06"
58+
/>
59+
<Input
60+
label="Text"
61+
helper="Input can also have helper text"
62+
size="lg"
63+
variant="default"
64+
v-model="text"
65+
disabled
66+
id="input-07"
67+
/>
68+
<Input
69+
label="Text"
70+
helper="Input can also have helper text"
71+
size="xl"
72+
variant="default"
73+
v-model="text"
74+
disabled
75+
id="input-08"
76+
/>
1777
</div>
1878
</div>
1979
</div>

‎pages/UI/toggle.vue‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,54 @@
77
<Heading size="sm">Default Checkbox</Heading>
88
<div class="flex w-full flex-row flex-wrap justify-between gap-6">
99
<UIContainer class="w-max">
10-
<Toggle label="Text" helper="Toggle can also have helper text" size="sm" v-model="toggles[0]" />
11-
<Toggle label="Text" helper="Toggle can also have helper text" size="md" v-model="toggles[1]" />
12-
<Toggle label="Text" helper="Toggle can also have helper text" size="lg" v-model="toggles[2]" />
10+
<Toggle
11+
label="Toggle"
12+
helper="Toggle can also have helper text"
13+
size="sm"
14+
v-model="toggles[0]"
15+
id="toggle-01"
16+
/>
17+
<Toggle
18+
label="Toggle"
19+
helper="Toggle can also have helper text"
20+
size="md"
21+
v-model="toggles[1]"
22+
id="toggle-02"
23+
/>
24+
<Toggle
25+
label="Toggle"
26+
helper="Toggle can also have helper text"
27+
size="lg"
28+
v-model="toggles[2]"
29+
id="toggle-03"
30+
/>
1331
</UIContainer>
1432

1533
<UIContainer class="w-max">
16-
<Toggle label="Text" helper="Toggle can also have helper text" size="sm" v-model="toggles[3]" disabled />
17-
<Toggle label="Text" helper="Toggle can also have helper text" size="md" v-model="toggles[4]" disabled />
18-
<Toggle label="Text" helper="Toggle can also have helper text" size="lg" v-model="toggles[5]" disabled />
34+
<Toggle
35+
label="Toggle"
36+
helper="Toggle can also have helper text"
37+
size="sm"
38+
v-model="toggles[3]"
39+
disabled
40+
id="toggle-04"
41+
/>
42+
<Toggle
43+
label="Toggle"
44+
helper="Toggle can also have helper text"
45+
size="md"
46+
v-model="toggles[4]"
47+
disabled
48+
id="toggle-05"
49+
/>
50+
<Toggle
51+
label="Toggle"
52+
helper="Toggle can also have helper text"
53+
size="lg"
54+
v-model="toggles[5]"
55+
disabled
56+
id="toggle-06"
57+
/>
1958
</UIContainer>
2059
</div>
2160
</div>

0 commit comments

Comments
 (0)