Skip to content

Commit a67361d

Browse files
andreyjamerandreyjamer
authored
Merge branch 'themesberg:main' into pagination-first-last
2 parents 506683f + d718fd6 commit a67361d

29 files changed

+1764
-1339
lines changed

‎docs/components/checkbox.md‎

Lines changed: 95 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
11
<script setup>
22
import FwbCheckboxExample from './checkbox/examples/FwbCheckboxExample.vue'
3-
import FwbCheckboxExampleChecked from './checkbox/examples/FwbCheckboxExampleChecked.vue'
43
import FwbCheckboxExampleDisabled from './checkbox/examples/FwbCheckboxExampleDisabled.vue'
4+
import FwbCheckboxExampleGroup from './checkbox/examples/FwbCheckboxExampleGroup.vue'
5+
import FwbCheckboxExampleHelper from './checkbox/examples/FwbCheckboxExampleHelper.vue'
56
import FwbCheckboxExampleLink from './checkbox/examples/FwbCheckboxExampleLink.vue'
67
</script>
8+
79
# Vue Checkbox - Flowbite
810

9-
## Default checkbox
11+
## Checkbox example
1012

1113
<fwb-checkbox-example />
1214
```vue
1315
<template>
1416
<fwb-checkbox v-model="check" label="Default checkbox" />
17+
<fwb-checkbox v-model="checked" label="Checked state" />
1518
</template>
1619
1720
<script setup>
1821
import { ref } from 'vue'
1922
import { FwbCheckbox } from 'flowbite-vue'
2023
2124
const check = ref(false)
25+
const checked = ref(true)
2226
</script>
2327
```
2428

25-
## Disabled checkbox
29+
## Disabled state
2630

2731
<fwb-checkbox-example-disabled />
2832
```vue
@@ -38,38 +42,114 @@ const check = ref(false)
3842
</script>
3943
```
4044

41-
## Checked checkbox
45+
## Checkbox with link
4246

43-
<fwb-checkbox-example-checked />
47+
<fwb-checkbox-example-link />
4448
```vue
4549
<template>
46-
<fwb-checkbox v-model="check" label="Checked checkbox" />
50+
<fwb-checkbox v-model="check">
51+
I agree with the
52+
<fwb-a class="text-blue-600 hover:underline" href="#">
53+
terms and conditions.
54+
</fwb-a>
55+
</fwb-checkbox>
4756
</template>
4857
4958
<script setup>
5059
import { ref } from 'vue'
51-
import { FwbCheckbox } from 'flowbite-vue'
60+
import { FwbA, FwbCheckbox } from 'flowbite-vue'
5261
53-
const check = ref(true)
62+
const check = ref(false)
5463
</script>
5564
```
5665

57-
## Link with checkbox
66+
## Checkbox with helper text
5867

59-
<fwb-checkbox-example-link />
68+
<fwb-checkbox-example-helper />
6069
```vue
6170
<template>
62-
<fwb-checkbox v-model="check">
63-
<fwb-a href="#">
64-
I agree with the terms and conditions.
65-
</fwb-a>
71+
<fwb-checkbox v-model="check" label="Free shipping via Flowbite">
72+
<template #helper>
73+
For orders shipped from $25 in books or $29 in other categories.
74+
</template>
6675
</fwb-checkbox>
6776
</template>
6877
6978
<script setup>
7079
import { ref } from 'vue'
71-
import { FwbA, FwbCheckbox } from 'flowbite-vue'
80+
import { FwbCheckbox } from 'flowbite-vue'
7281
7382
const check = ref(false)
7483
</script>
7584
```
85+
86+
87+
## Checkbox group
88+
89+
When using the checkbox with `arrays` or `objects`, the selected values will be stored in the array referenced by v-model
90+
91+
<fwb-checkbox-example-group />
92+
93+
```vue
94+
<template>
95+
<div class="space-y-2">
96+
<fwb-checkbox
97+
v-for="(fruit, i) in fruits"
98+
:key="i"
99+
v-model="selectedFruits"
100+
:label="fruit"
101+
:value="fruit"
102+
name="fruits"
103+
/>
104+
<p class="mb-4 text-sm text-gray-500">
105+
Selected fruits: {{ selectedFruits }}
106+
</p>
107+
<fwb-checkbox
108+
v-for="(name, id) in planets"
109+
:key="id"
110+
v-model="selectedPlanets"
111+
:label="name"
112+
:value="id"
113+
name="planets"
114+
/>
115+
<p class="text-sm text-gray-500">
116+
Selected planets: {{ selectedPlanets }}
117+
</p>
118+
</div>
119+
</template>
120+
121+
<script setup>
122+
import { ref } from 'vue'
123+
import { FwbCheckbox } from 'flowbite-vue'
124+
125+
const selectedFruits = ref(['Banana', 'Strawberry'])
126+
const fruits = [
127+
'Apple',
128+
'Banana',
129+
'Orange',
130+
'Strawberry'
131+
]
132+
133+
const selectedPlanets = ref([3])
134+
const planets = {
135+
1: 'Mercury',
136+
2: 'Venus',
137+
3: 'Earth',
138+
4: 'Mars',
139+
5: 'Jupiter',
140+
6: 'Saturn',
141+
7: 'Uranus',
142+
8: 'Neptune',
143+
}
144+
</script>
145+
146+
```
147+
148+
## Checkbox component API
149+
150+
### FwbCheckbox Props
151+
| Name | Type | Default | Description |
152+
| ------------ | ---------------- | ------- | ------------------------------- |
153+
| wrapperClass | String \| Object | `''` | Added to main component wrapper |
154+
| labelClass | String \| Object | `''` | Added to `<label>` element. |
155+
| class | String \| Object | `''` | Added to `<input>` element. |

‎docs/components/checkbox/examples/FwbCheckboxExample.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
<template>
2-
<div class="vp-raw">
2+
<div class="flex flex-col gap-2 vp-raw">
33
<fwb-checkbox
44
v-model="check"
55
label="Default checkbox"
66
/>
7+
<fwb-checkbox
8+
v-model="checked"
9+
label="Checked state"
10+
/>
711
</div>
812
</template>
913

@@ -13,4 +17,5 @@ import { ref } from 'vue'
1317
import { FwbCheckbox } from '../../../../src/index'
1418
1519
const check = ref(false)
20+
const checked = ref(true)
1621
</script>

‎docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
<template>
2-
<div class="vp-raw">
2+
<div class="flex flex-col gap-2 vp-raw">
33
<fwb-checkbox
44
v-model="check"
55
disabled
66
label="Disabled checkbox"
77
/>
8+
<fwb-checkbox
9+
v-model="checked"
10+
disabled
11+
label="Disabled checked"
12+
/>
813
</div>
914
</template>
1015

@@ -14,4 +19,5 @@ import { ref } from 'vue'
1419
import { FwbCheckbox } from '../../../../src/index'
1520
1621
const check = ref(false)
22+
const checked = ref(true)
1723
</script>

‎docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div class="vp-raw">
3+
<div class="space-y-2">
4+
<fwb-checkbox
5+
v-for="(fruit, i) in fruits"
6+
:key="i"
7+
v-model="selectedFruits"
8+
:label="fruit"
9+
:value="fruit"
10+
name="fruits"
11+
/>
12+
<p class="mb-4 text-gray-500 text-sm">
13+
Selected fruits: {{ selectedFruits }}
14+
</p>
15+
<fwb-checkbox
16+
v-for="(name, id) in planets"
17+
:key="id"
18+
v-model="selectedPlanets"
19+
:label="name"
20+
:value="id"
21+
name="planets"
22+
/>
23+
<p class="text-gray-500 text-sm">
24+
Selected planets: {{ selectedPlanets }}
25+
</p>
26+
</div>
27+
</div>
28+
</template>
29+
30+
<script lang="ts" setup>
31+
import { ref } from 'vue'
32+
33+
import { FwbCheckbox } from '../../../../src/index'
34+
35+
const selectedFruits = ref(['Banana', 'Strawberry'])
36+
const fruits = [
37+
'Apple',
38+
'Banana',
39+
'Orange',
40+
'Strawberry',
41+
]
42+
43+
const selectedPlanets = ref(['3'])
44+
const planets = {
45+
1: 'Mercury',
46+
2: 'Venus',
47+
3: 'Earth',
48+
4: 'Mars',
49+
5: 'Jupiter',
50+
6: 'Saturn',
51+
7: 'Uranus',
52+
8: 'Neptune',
53+
}
54+
</script>

‎docs/components/checkbox/examples/FwbCheckboxExampleHelper.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="vp-raw">
3+
<fwb-checkbox
4+
v-model="check"
5+
label="Free shipping via Flowbite"
6+
>
7+
<template #helper>
8+
For orders shipped from $25 in books or $29 in other categories.
9+
</template>
10+
</fwb-checkbox>
11+
</div>
12+
</template>
13+
14+
<script lang="ts" setup>
15+
import { ref } from 'vue'
16+
17+
import { FwbCheckbox } from '../../../../src/index'
18+
19+
const check = ref(false)
20+
</script>

‎docs/components/checkbox/examples/FwbCheckboxExampleLink.vue‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
<template>
2-
<fwb-checkbox v-model="check">
3-
<fwb-a href="#">
4-
I agree with the terms and conditions.
5-
</fwb-a>
6-
</fwb-checkbox>
2+
<div class="vp-raw">
3+
<fwb-checkbox v-model="check">
4+
I agree with the
5+
<fwb-a
6+
class="text-blue-600 hover:underline"
7+
href="#"
8+
>
9+
terms and conditions.
10+
</fwb-a>
11+
</fwb-checkbox>
12+
</div>
713
</template>
814

915
<script lang="ts" setup>

0 commit comments

Comments
 (0)