Skip to content

Commit 00fb3df

Browse files
SqrczSqrcz
authored
Refactor FwbCheckbox – Improved Styling & Group Support
2 parents 31ffaaf + f363cfb commit 00fb3df

File tree

8 files changed

+279
-59
lines changed

8 files changed

+279
-59
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>

‎src/components/FwbCheckbox/FwbCheckbox.vue

Lines changed: 45 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,66 @@
11
<template>
2-
<label class="flex items-center justify-start gap-3">
3-
<input
4-
v-model="model"
5-
:class="checkboxClasses"
6-
:disabled="disabled"
7-
type="checkbox"
2+
<div :class="wrapperClass">
3+
<label class="flex justify-start items-center">
4+
<input
5+
v-model="model"
6+
:class="checkboxClass"
7+
:disabled="disabled"
8+
:name="name"
9+
:value="value"
10+
type="checkbox"
11+
>
12+
<span
13+
v-if="label"
14+
:class="labelClass"
15+
>
16+
{{ label }}
17+
</span>
18+
<span :class="labelClass">
19+
<slot />
20+
</span>
21+
</label>
22+
<p
23+
v-if="$slots.helper"
24+
:class="helperMessageClass"
825
>
9-
<span
10-
v-if="label"
11-
:class="labelClasses"
12-
>{{ label }}</span>
13-
<slot />
14-
</label>
26+
<slot name="helper" />
27+
</p>
28+
</div>
1529
</template>
1630

1731
<script lang="ts" setup>
18-
import { computed } from 'vue'
32+
import { toRefs } from 'vue'
1933
2034
import { useCheckboxClasses } from './composables/useCheckboxClasses'
2135
2236
interface CheckboxProps {
37+
class?: string | Record<string, boolean>
2338
disabled?: boolean
2439
label?: string
25-
modelValue?: boolean
40+
labelClass?: string | Record<string, boolean>
41+
name?: string
42+
value?: string | number | boolean | object
43+
wrapperClass?: string | Record<string, boolean>
2644
}
45+
2746
const props = withDefaults(defineProps<CheckboxProps>(), {
47+
class: '',
2848
disabled: false,
2949
label: '',
30-
modelValue: false,
50+
labelClass: '',
51+
name: undefined,
52+
value: undefined,
53+
wrapperClass: '',
3154
})
3255
33-
const emit = defineEmits(['update:modelValue'])
34-
const model = computed({
35-
get () {
36-
return props.modelValue
37-
},
38-
set (val) {
39-
emit('update:modelValue', val)
40-
},
56+
const model = defineModel<boolean | (string | number | boolean | object)[]>({
57+
default: false,
4158
})
4259
4360
const {
44-
checkboxClasses,
45-
labelClasses,
46-
} = useCheckboxClasses()
61+
checkboxClass,
62+
helperMessageClass,
63+
labelClass,
64+
wrapperClass,
65+
} = useCheckboxClasses(toRefs(props))
4766
</script>

0 commit comments

Comments
 (0)