Skip to content

Commit d44dc3e

Browse files
FelipeO16FelipeO16
committed
feat(docs): add docs page for checkbox
1 parent 78375b6 commit d44dc3e

File tree

2 files changed

+232
-1
lines changed

2 files changed

+232
-1
lines changed

‎docs/app/components/paper/ShowCheckbox.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div class="checkbox-demo">
3+
<CodeBlock v-if="type === 'default'">
4+
<template #preview>
5+
<PUCheckbox v-model="demoChecked" />
6+
</template>
7+
<template #code>
8+
<slot name="code" />
9+
</template>
10+
</CodeBlock>
11+
12+
<CodeBlock v-if="type === 'with-label'">
13+
<template #preview>
14+
<PUCheckbox
15+
v-model="labelChecked"
16+
label="Sample Label"
17+
/>
18+
</template>
19+
<template #code>
20+
<slot name="code" />
21+
</template>
22+
</CodeBlock>
23+
24+
<CodeBlock v-if="type === 'strike'">
25+
<template #preview>
26+
<PUCheckbox
27+
v-model="strikeChecked"
28+
label="Strike Example"
29+
strike-on-false
30+
/>
31+
</template>
32+
<template #code>
33+
<slot name="code" />
34+
</template>
35+
</CodeBlock>
36+
37+
<CodeBlock v-if="type === 'flavors'">
38+
<template #preview>
39+
<div class="flex flex-col gap-2">
40+
<PUCheckbox
41+
v-model="normalChecked"
42+
label="Normal"
43+
/>
44+
<PUCheckbox
45+
v-model="outlinedChecked"
46+
label="Outlined"
47+
flavor="outlined"
48+
/>
49+
</div>
50+
</template>
51+
<template #code>
52+
<slot name="code" />
53+
</template>
54+
</CodeBlock>
55+
</div>
56+
</template>
57+
58+
<script lang="ts" setup>
59+
defineProps<{
60+
type: 'default' | 'with-label' | 'strike' | 'flavors'
61+
}>()
62+
63+
const demoChecked = ref(false)
64+
const labelChecked = ref(true)
65+
const strikeChecked = ref(false)
66+
const normalChecked = ref(true)
67+
const outlinedChecked = ref(false)
68+
</script>

‎docs/content/docs/components/pu-checkbox.md

Lines changed: 164 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,164 @@
1-
pu-checkbox
1+
::doc-topic
2+
#title
3+
PU-Checkbox Component
4+
#description
5+
A customizable checkbox component with multiple states and interactive features
6+
::
7+
8+
::doc-topic
9+
#title
10+
Usage
11+
#description
12+
Basic Usage
13+
::
14+
::paper-show-checkbox{type="default"}
15+
#code
16+
```html
17+
<template>
18+
<PUCheckbox v-model="checked" />
19+
</template>
20+
```
21+
::
22+
23+
::doc-topic
24+
#description
25+
### With Label
26+
::
27+
::paper-show-checkbox{type="with-label"}
28+
#code
29+
```html
30+
<template>
31+
<PUCheckbox v-model="checked" label="Accept Terms" />
32+
</template>
33+
```
34+
::
35+
36+
::doc-topic
37+
#description
38+
### Strikethrough Effect
39+
::
40+
::paper-show-checkbox{type="strike"}
41+
#code
42+
```html
43+
<template>
44+
<PUCheckbox
45+
v-model="checked"
46+
label="Task Completed"
47+
strike-on-false
48+
/>
49+
</template>
50+
```
51+
::
52+
53+
::doc-topic
54+
#description
55+
### Different Flavors
56+
::
57+
::paper-show-checkbox{type="flavors"}
58+
#code
59+
```html
60+
<template>
61+
<div class="flex flex-col gap-2">
62+
<PUCheckbox v-model="normal" label="Normal" />
63+
<PUCheckbox v-model="outlined" label="Outlined" flavor="outlined" />
64+
</div>
65+
</template>
66+
```
67+
::
68+
69+
::doc-topic
70+
#title
71+
## Props
72+
::
73+
::doc-table
74+
---
75+
headers: ['Prop', 'Type', 'Required', 'Default', 'Description']
76+
rows:
77+
- - 'modelValue'
78+
- 'boolean'
79+
- 'Yes'
80+
- '-'
81+
- 'Current state (v-model support)'
82+
- - 'disabled'
83+
- 'boolean'
84+
- 'No'
85+
- 'false'
86+
- 'Disables interaction'
87+
- - 'label'
88+
- 'string'
89+
- 'No'
90+
- "''"
91+
- 'Checkbox label text'
92+
- - 'flavor'
93+
- 'normal | outlined'
94+
- 'No'
95+
- 'normal'
96+
- 'Visual style variant'
97+
- - 'strikeOnFalse'
98+
- 'boolean'
99+
- 'No'
100+
- 'false'
101+
- 'Adds strikethrough to label when unchecked'
102+
---
103+
::
104+
105+
::doc-topic
106+
#title
107+
## Events
108+
::
109+
::doc-table
110+
---
111+
headers: ['Event', 'Description', 'Payload']
112+
rows:
113+
- - 'update:modelValue'
114+
- 'Emits when state changes'
115+
- 'boolean'
116+
---
117+
::
118+
119+
::doc-topic
120+
#title
121+
## Styling
122+
#description
123+
- Base styling with Tailwind:
124+
::code-box{header="Core Structure" type="css" copy}
125+
```css
126+
.pu-checkbox {
127+
@apply flex items-center justify-center w-5 h-5
128+
border-2 border-primary-light-500 rounded
129+
transition-all;
130+
}
131+
```
132+
::
133+
- Interactive states:
134+
::code-box{header="Interactive States" type="css" copy}
135+
```css
136+
.active\:animate-bounce:active {
137+
animation: bounce 0.3s ease-in-out;
138+
}
139+
140+
@keyframes bounce {
141+
0%, 100% { transform: scale(1); }
142+
50% { transform: scale(1.2); }
143+
}
144+
```
145+
::
146+
147+
::doc-topic
148+
#title
149+
## Accessibility Features
150+
#description
151+
- Clickable label area
152+
- Visual feedback on interaction
153+
- Clear disabled state styling
154+
- Keyboard focusable
155+
::
156+
157+
::doc-topic
158+
#title
159+
## Dependencies
160+
#description
161+
- `PUIcon` component for checkmark display
162+
- Tailwind CSS for styling
163+
- Vue 3 Composition API
164+
::

0 commit comments

Comments
 (0)