From cef7f3cd452df3db1ca4ed9e92503dfe1ea67219 Mon Sep 17 00:00:00 2001
From: Sqrcz <naorniakowski@slashlab.pl>
Date: Thu, 17 Apr 2025 02:14:40 +0200
Subject: [PATCH 1/6] FwbCheckbox component refactored to enchance its
 flexibility

---
 docs/components/checkbox.md                   | 101 +++++++++++++++---
 .../checkbox/examples/FwbCheckboxExample.vue  |   7 +-
 .../examples/FwbCheckboxExampleDisabled.vue   |   8 +-
 .../examples/FwbCheckboxExampleGroup.vue      |  54 ++++++++++
 .../examples/FwbCheckboxExampleHelper.vue     |  20 ++++
 .../examples/FwbCheckboxExampleLink.vue       |  16 ++-
 src/components/FwbCheckbox/FwbCheckbox.vue    |  71 +++++++-----
 .../composables/useCheckboxClasses.ts         |  52 +++++++--
 8 files changed, 270 insertions(+), 59 deletions(-)
 create mode 100644 docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
 create mode 100644 docs/components/checkbox/examples/FwbCheckboxExampleHelper.vue

diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 1e639c15..97fc4bf8 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -1,17 +1,20 @@
 <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>
@@ -19,10 +22,11 @@ import { ref } from 'vue'
 import { FwbCheckbox } from 'flowbite-vue'
 
 const check = ref(false)
+const checked = ref(false)
 </script>
 ```
 
-## Disabled checkbox
+## Disabled state
 
 <fwb-checkbox-example-disabled />
 ```vue
@@ -38,38 +42,105 @@ 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 in fruits"
+      :key="fruit"
+      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>
+
+```
diff --git a/docs/components/checkbox/examples/FwbCheckboxExample.vue b/docs/components/checkbox/examples/FwbCheckboxExample.vue
index 7ba50370..321d689f 100644
--- a/docs/components/checkbox/examples/FwbCheckboxExample.vue
+++ b/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>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue b/docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue
index 4cb686a4..e3db4f6c 100644
--- a/docs/components/checkbox/examples/FwbCheckboxExampleDisabled.vue
+++ b/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>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue b/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
new file mode 100644
index 00000000..0b7dd4dc
--- /dev/null
+++ b/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 in fruits"
+        :key="fruit"
+        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>
+  </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>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleHelper.vue b/docs/components/checkbox/examples/FwbCheckboxExampleHelper.vue
new file mode 100644
index 00000000..cbfc04e4
--- /dev/null
+++ b/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>
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleLink.vue b/docs/components/checkbox/examples/FwbCheckboxExampleLink.vue
index 5766633f..1846d2d4 100644
--- a/docs/components/checkbox/examples/FwbCheckboxExampleLink.vue
+++ b/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>
diff --git a/src/components/FwbCheckbox/FwbCheckbox.vue b/src/components/FwbCheckbox/FwbCheckbox.vue
index 3bb7c045..97e5a0ac 100644
--- a/src/components/FwbCheckbox/FwbCheckbox.vue
+++ b/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>
diff --git a/src/components/FwbCheckbox/composables/useCheckboxClasses.ts b/src/components/FwbCheckbox/composables/useCheckboxClasses.ts
index 71f8140f..27468527 100644
--- a/src/components/FwbCheckbox/composables/useCheckboxClasses.ts
+++ b/src/components/FwbCheckbox/composables/useCheckboxClasses.ts
@@ -1,19 +1,49 @@
-import { computed } from 'vue'
+import { computed, type Ref } from 'vue'
 
-import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+import { useMergeClasses } from '@/composables/useMergeClasses'
 
-// LABEL
-const defaultLabelClasses = 'block text-sm font-medium text-gray-900 dark:text-gray-300'
+const defaultLabelClasses = 'text-sm font-medium text-gray-900 dark:text-gray-300 mr-1'
+const defaultCheckboxClasses = 'mr-2 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
+const defaultHelperClasses = 'ml-6 text-xs font-normal text-gray-500 dark:text-gray-300'
 
-// CHECKBOX
-const defaultCheckboxClasses = 'w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500'
+const disabledLabelClasses = 'text-gray-400 dark:text-gray-500'
 
-export function useCheckboxClasses () {
-  const checkboxClasses = computed(() => simplifyTailwindClasses(defaultCheckboxClasses))
-  const labelClasses = computed(() => defaultLabelClasses)
+export type UseCheckboxClassesProps = {
+  class: Ref<string | Record<string, boolean>>
+  disabled: Ref<boolean>
+  labelClass: Ref<string | Record<string, boolean>>
+  wrapperClass: Ref<string | Record<string, boolean>>
+}
+
+export function useCheckboxClasses (props: UseCheckboxClassesProps): {
+  checkboxClass: Ref<string>
+  labelClass: Ref<string>
+  helperMessageClass: Ref<string>
+  wrapperClass: Ref<string>
+} {
+  const labelClass = computed(() => useMergeClasses([
+    defaultLabelClasses,
+    props.disabled.value ? disabledLabelClasses : '',
+    props.labelClass.value,
+  ]))
+
+  const checkboxClass = computed(() => useMergeClasses([
+    defaultCheckboxClasses,
+    props.class.value,
+  ]))
+
+  const helperMessageClass = computed(() => useMergeClasses([
+    defaultHelperClasses,
+  ]))
+
+  const wrapperClass = computed(() => useMergeClasses([
+    props.wrapperClass.value,
+  ]))
 
   return {
-    checkboxClasses,
-    labelClasses,
+    checkboxClass,
+    helperMessageClass,
+    labelClass,
+    wrapperClass,
   }
 }

From 780092bfd60e8ef649fb824f9caeb3bddc423947 Mon Sep 17 00:00:00 2001
From: Sqrcz <naorniakowski@slashlab.pl>
Date: Thu, 17 Apr 2025 12:47:25 +0200
Subject: [PATCH 2/6] checkbox documentation updated

---
 docs/components/checkbox.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 97fc4bf8..11ca726a 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -144,3 +144,13 @@ const planets = {
 </script>
 
 ```
+
+## Checkbox component API
+
+### FwbInput 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.     |
+| inputClass   | String \| Object | `''`    | Added to `<input>` element.     |

From 5fb642904af6e82c2708ae2c7fb19f9618a3ffe0 Mon Sep 17 00:00:00 2001
From: Sqrcz <naorniakowski@slashlab.pl>
Date: Thu, 17 Apr 2025 12:57:45 +0200
Subject: [PATCH 3/6] typo fixed

---
 docs/components/checkbox.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 11ca726a..b9c4ff87 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -147,10 +147,9 @@ const planets = {
 
 ## Checkbox component API
 
-### FwbInput Props
+### 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.     |
-| inputClass   | String \| Object | `''`    | Added to `<input>` element.     |

From d16185c7f75c474b8bdc5243d451fe822cce24fa Mon Sep 17 00:00:00 2001
From: Sqrcz <naorniakowski@slashlab.pl>
Date: Thu, 17 Apr 2025 13:29:29 +0200
Subject: [PATCH 4/6] FwbCheckbox documentation fixed

---
 docs/components/checkbox.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index b9c4ff87..c8c8d7ba 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -22,7 +22,7 @@ import { ref } from 'vue'
 import { FwbCheckbox } from 'flowbite-vue'
 
 const check = ref(false)
-const checked = ref(false)
+const checked = ref(true)
 </script>
 ```
 

From 3ec762e340e896a3586ce90217f0dce9ce9750d4 Mon Sep 17 00:00:00 2001
From: Sqrcz <naorniakowski@slashlab.pl>
Date: Thu, 17 Apr 2025 13:34:36 +0200
Subject: [PATCH 5/6] FwbCheckbox group example improved

---
 docs/components/checkbox.md                               | 6 +++---
 .../checkbox/examples/FwbCheckboxExampleGroup.vue         | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index c8c8d7ba..b80c17a5 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -94,8 +94,8 @@ When using the checkbox with `arrays` or `objects`, the selected values will be
 <template>
   <div class="space-y-2">
     <fwb-checkbox
-      v-for="fruit in fruits"
-      :key="fruit"
+      v-for="fruit, i in fruits"
+      :key="i"
       v-model="selectedFruits"
       :label="fruit"
       :value="fruit"
@@ -130,7 +130,7 @@ const fruits = [
   'Strawberry'
   ]
 
-const selectedPlanets = ref(['3'])
+const selectedPlanets = ref([3])
 const planets = {
   1: 'Mercury',
   2: 'Venus',
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue b/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
index 0b7dd4dc..f96a5baa 100644
--- a/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
+++ b/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
@@ -2,14 +2,14 @@
   <div class="vp-raw">
     <div class="space-y-2">
       <fwb-checkbox
-        v-for="fruit in fruits"
-        :key="fruit"
+        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">
+      <p class="mb-4 text-gray-500 text-sm">
         Selected fruits: {{ selectedFruits }}
       </p>
       <fwb-checkbox
@@ -20,7 +20,7 @@
         :value="id"
         name="planets"
       />
-      <p class="text-sm text-gray-500">
+      <p class="text-gray-500 text-sm">
         Selected planets: {{ selectedPlanets }}
       </p>
     </div>

From f363cfbd1c87f780d98325eb0bcda67846de88e8 Mon Sep 17 00:00:00 2001
From: Sqrcz <naorniakowski@slashlab.pl>
Date: Thu, 17 Apr 2025 13:47:59 +0200
Subject: [PATCH 6/6] improved v-for syntax in checkbox group examples

---
 docs/components/checkbox.md                                   | 2 +-
 docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index b80c17a5..457f801e 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -94,7 +94,7 @@ When using the checkbox with `arrays` or `objects`, the selected values will be
 <template>
   <div class="space-y-2">
     <fwb-checkbox
-      v-for="fruit, i in fruits"
+      v-for="(fruit, i) in fruits"
       :key="i"
       v-model="selectedFruits"
       :label="fruit"
diff --git a/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue b/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
index f96a5baa..1a7cd78b 100644
--- a/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
+++ b/docs/components/checkbox/examples/FwbCheckboxExampleGroup.vue
@@ -2,7 +2,7 @@
   <div class="vp-raw">
     <div class="space-y-2">
       <fwb-checkbox
-        v-for="fruit, i in fruits"
+        v-for="(fruit, i) in fruits"
         :key="i"
         v-model="selectedFruits"
         :label="fruit"