Refactor FwbCheckbox – Improved Styling & Group Support

docs/components/checkbox.md

@@ -1,28 +1,32 @@
 <script setup>
 import FwbCheckboxExample from './checkbox/examples/FwbCheckboxExample.vue'
-import FwbCheckboxExampleChecked from './checkbox/examples/FwbCheckboxExampleChecked.vue'
 import FwbCheckboxExampleDisabled from './checkbox/examples/FwbCheckboxExampleDisabled.vue'
+import FwbCheckboxExampleGroup from './checkbox/examples/FwbCheckboxExampleGroup.vue'
+import FwbCheckboxExampleHelper from './checkbox/examples/FwbCheckboxExampleHelper.vue'
 import FwbCheckboxExampleLink from './checkbox/examples/FwbCheckboxExampleLink.vue'
 </script>
+
 # Vue Checkbox - Flowbite
 
-## Default checkbox
+## Checkbox example
 
 <fwb-checkbox-example />
 ```vue
 <template>
   <fwb-checkbox v-model="check" label="Default checkbox" />
+  <fwb-checkbox v-model="checked" label="Checked state" />
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { FwbCheckbox } from 'flowbite-vue'
 
 const check = ref(false)
+const checked = ref(true)
 </script>
 ```
 
-## Disabled checkbox
+## Disabled state
 
 <fwb-checkbox-example-disabled />
 ```vue
@@ -38,38 +42,114 @@ const check = ref(false)
 </script>
 ```
 
-## Checked checkbox
+## Checkbox with link
 
-<fwb-checkbox-example-checked />
+<fwb-checkbox-example-link />
 ```vue
 <template>
-  <fwb-checkbox v-model="check" label="Checked checkbox" />
+  <fwb-checkbox v-model="check">
+    I agree with the
+    <fwb-a class="text-blue-600 hover:underline" href="#">
+      terms and conditions.
+    </fwb-a>
+  </fwb-checkbox>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { FwbCheckbox } from 'flowbite-vue'
+import { FwbA, FwbCheckbox } from 'flowbite-vue'
 
-const check = ref(true)
+const check = ref(false)
 </script>
 ```
 
-## Link with checkbox
+## Checkbox with helper text
 
-<fwb-checkbox-example-link />
+<fwb-checkbox-example-helper />
 ```vue
 <template>
-  <fwb-checkbox v-model="check">
-    <fwb-a href="#">
-      I agree with the terms and conditions.
-    </fwb-a>
+  <fwb-checkbox v-model="check" label="Free shipping via Flowbite">
+    <template #helper>
+      For orders shipped from $25 in books or $29 in other categories.
+    </template>
   </fwb-checkbox>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { FwbA, FwbCheckbox } from 'flowbite-vue'
+import { FwbCheckbox } from 'flowbite-vue'
 
 const check = ref(false)
 </script>
 ```
+
+
+## Checkbox group
+
+When using the checkbox with `arrays` or `objects`, the selected values will be stored in the array referenced by v-model
+
+<fwb-checkbox-example-group />
+
+```vue
+<template>
+  <div class="space-y-2">
+    <fwb-checkbox
+      v-for="(fruit, i) in fruits"
+      :key="i"
+      v-model="selectedFruits"
+      :label="fruit"
+      :value="fruit"
+      name="fruits"
+    />
+    <p class="mb-4 text-sm text-gray-500">
+      Selected fruits: {{ selectedFruits }}
+    </p>
+    <fwb-checkbox
+      v-for="(name, id) in planets"
+      :key="id"
+      v-model="selectedPlanets"
+      :label="name"
+      :value="id"
+      name="planets"
+    />
+    <p class="text-sm text-gray-500">
+      Selected planets: {{ selectedPlanets }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbCheckbox } from 'flowbite-vue'
+
+const selectedFruits = ref(['Banana', 'Strawberry'])
+const fruits = [
+  'Apple',
+  'Banana',
+  'Orange',
+  'Strawberry'
+  ]
+
+const selectedPlanets = ref([3])
+const planets = {
+  1: 'Mercury',
+  2: 'Venus',
+  3: 'Earth',
+  4: 'Mars',
+  5: 'Jupiter',
+  6: 'Saturn',
+  7: 'Uranus',
+  8: 'Neptune',
+}
+</script>
+
+```
+
+## Checkbox component API
+
+### FwbCheckbox Props
+| Name         | Type             | Default | Description                     |
+| ------------ | ---------------- | ------- | ------------------------------- |
+| wrapperClass | String \| Object | `''`    | Added to main component wrapper |
+| labelClass   | String \| Object | `''`    | Added to `<label>` element.     |
+| class        | String \| Object | `''`    | Added to `<input>` element.     |

docs/components/checkbox/examples/FwbCheckboxExample.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="vp-raw">
+  <div class="flex flex-col gap-2 vp-raw">
     <fwb-checkbox
       v-model="check"
       label="Default checkbox"
     />
+    <fwb-checkbox
+      v-model="checked"
+      label="Checked state"
+    />
   </div>
 </template>
 
@@ -13,4 +17,5 @@ import { ref } from 'vue'
 import { FwbCheckbox } from '../../../../src/index'
 
 const check = ref(false)
+const checked = ref(true)
 </script>

docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue

@@ -1,10 +1,15 @@
 <template>
-  <div class="vp-raw">
+  <div class="flex flex-col gap-2 vp-raw">
     <fwb-checkbox
       v-model="check"
       disabled
       label="Disabled checkbox"
     />
+    <fwb-checkbox
+      v-model="checked"
+      disabled
+      label="Disabled checked"
+    />
   </div>
 </template>
 
@@ -14,4 +19,5 @@ import { ref } from 'vue'
 import { FwbCheckbox } from '../../../../src/index'
 
 const check = ref(false)
+const checked = ref(true)
 </script>

docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="vp-raw">
+    <div class="space-y-2">
+      <fwb-checkbox
+        v-for="(fruit, i) in fruits"
+        :key="i"
+        v-model="selectedFruits"
+        :label="fruit"
+        :value="fruit"
+        name="fruits"
+      />
+      <p class="mb-4 text-gray-500 text-sm">
+        Selected fruits: {{ selectedFruits }}
+      </p>
+      <fwb-checkbox
+        v-for="(name, id) in planets"
+        :key="id"
+        v-model="selectedPlanets"
+        :label="name"
+        :value="id"
+        name="planets"
+      />
+      <p class="text-gray-500 text-sm">
+        Selected planets: {{ selectedPlanets }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { FwbCheckbox } from '../../../../src/index'
+
+const selectedFruits = ref(['Banana', 'Strawberry'])
+const fruits = [
+  'Apple',
+  'Banana',
+  'Orange',
+  'Strawberry',
+]
+
+const selectedPlanets = ref(['3'])
+const planets = {
+  1: 'Mercury',
+  2: 'Venus',
+  3: 'Earth',
+  4: 'Mars',
+  5: 'Jupiter',
+  6: 'Saturn',
+  7: 'Uranus',
+  8: 'Neptune',
+}
+</script>

docs/components/checkbox/examples/FwbCheckboxExampleHelper.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="vp-raw">
+    <fwb-checkbox
+      v-model="check"
+      label="Free shipping via Flowbite"
+    >
+      <template #helper>
+        For orders shipped from $25 in books or $29 in other categories.
+      </template>
+    </fwb-checkbox>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { FwbCheckbox } from '../../../../src/index'
+
+const check = ref(false)
+</script>

docs/components/checkbox/examples/FwbCheckboxExampleLink.vue

@@ -1,9 +1,15 @@
 <template>
-  <fwb-checkbox v-model="check">
-    <fwb-a href="#">
-      I agree with the terms and conditions.
-    </fwb-a>
-  </fwb-checkbox>
+  <div class="vp-raw">
+    <fwb-checkbox v-model="check">
+      I agree with the
+      <fwb-a
+        class="text-blue-600 hover:underline"
+        href="#"
+      >
+        terms and conditions.
+      </fwb-a>
+    </fwb-checkbox>
+  </div>
 </template>
 
 <script lang="ts" setup>

src/components/FwbCheckbox/FwbCheckbox.vue

@@ -1,47 +1,66 @@
 <template>
-  <label class="flex items-center justify-start gap-3">
-    <input
-      v-model="model"
-      :class="checkboxClasses"
-      :disabled="disabled"
-      type="checkbox"
+  <div :class="wrapperClass">
+    <label class="flex justify-start items-center">
+      <input
+        v-model="model"
+        :class="checkboxClass"
+        :disabled="disabled"
+        :name="name"
+        :value="value"
+        type="checkbox"
+      >
+      <span
+        v-if="label"
+        :class="labelClass"
+      >
+        {{ label }}
+      </span>
+      <span :class="labelClass">
+        <slot />
+      </span>
+    </label>
+    <p
+      v-if="$slots.helper"
+      :class="helperMessageClass"
     >
-    <span
-      v-if="label"
-      :class="labelClasses"
-    >{{ label }}</span>
-    <slot />
-  </label>
+      <slot name="helper" />
+    </p>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { toRefs } from 'vue'
 
 import { useCheckboxClasses } from './composables/useCheckboxClasses'
 
 interface CheckboxProps {
+  class?: string | Record<string, boolean>
   disabled?: boolean
   label?: string
-  modelValue?: boolean
+  labelClass?: string | Record<string, boolean>
+  name?: string
+  value?: string | number | boolean | object
+  wrapperClass?: string | Record<string, boolean>
 }
+
 const props = withDefaults(defineProps<CheckboxProps>(), {
+  class: '',
   disabled: false,
   label: '',
-  modelValue: false,
+  labelClass: '',
+  name: undefined,
+  value: undefined,
+  wrapperClass: '',
 })
 
-const emit = defineEmits(['update:modelValue'])
-const model = computed({
-  get () {
-    return props.modelValue
-  },
-  set (val) {
-    emit('update:modelValue', val)
-  },
+const model = defineModel<boolean | (string | number | boolean | object)[]>({
+  default: false,
 })
 
 const {
-  checkboxClasses,
-  labelClasses,
-} = useCheckboxClasses()
+  checkboxClass,
+  helperMessageClass,
+  labelClass,
+  wrapperClass,
+} = useCheckboxClasses(toRefs(props))
 </script>