fix(components): override classes

docs/components/checkbox.md

@@ -3,8 +3,9 @@ import CheckboxDefault from './checkbox/examples/CheckboxDefault.vue'
 import CheckboxDisabled from './checkbox/examples/CheckboxDisabled.vue'
 import CheckboxChecked from './checkbox/examples/CheckboxChecked.vue'
 import CheckboxLink from './checkbox/examples/CheckboxLink.vue'
+import CustomClasses from './checkbox/examples/CustomClasses.vue'
 </script>
-# Vue Footer - Flowbite
+# Vue Checkbox - Flowbite
 
 ## Default checkbox
 
@@ -67,3 +68,15 @@ const ref1 = ref(true)
 ```
 
 <CheckboxLink />
+
+## Override classes
+
+Override default input field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Input classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" placeholder="enter your first name" label="First name" />
+</template>
+```
+
+<CustomClasses />

docs/components/checkbox/examples/CustomClasses.vue

@@ -0,0 +1,7 @@
+<template>
+    <Checkbox classes="!w-6 !h-6 text-green-500 rounded dark:ring-offset-gray-800 focus:ring-green-500" label="Default checkbox" />
+</template>
+
+<script setup>
+import Checkbox from '../../../../src/components/Checkbox/Checkbox.vue'
+</script>

docs/components/fileInput.md

@@ -4,6 +4,7 @@ import FileInpHelper from './fileInput/examples/FileInpHelper.vue'
 import FileInpSize from './fileInput/examples/FileInpSize.vue'
 import FileInpDropZone from './fileInput/examples/FileInpDropZone.vue'
 import MultipleFile from './fileInput/examples/MultipleFile.vue'
+import CustomClasses from './fileInput/examples/CustomClasses.vue'
 </script>
 
 # Vue FileInput - Flowbite
@@ -101,3 +102,15 @@ import FileInput from 'flowbite-vue'
 ```
 
 <FileInpDropZone />
+
+## Override classes
+
+Override default input field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <FileInput classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" label="Upload file" />
+</template>
+```
+
+<CustomClasses />

docs/components/fileInput/examples/CustomClasses.vue

@@ -0,0 +1,8 @@
+<template>
+    <FileInput classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" label="Upload file" />
+ </template>
+
+<script setup>
+import FileInput from '../../../../src/components/FileInput/FileInput.vue'
+</script>
+

docs/components/input.md

@@ -6,6 +6,7 @@ import InputHelperExample from './input/examples/InputHelperExample.vue';
 import InputPrefixExample from './input/examples/InputPrefixExample.vue';
 import InputSuffixExample from './input/examples/InputSuffixExample.vue'
 import InputRequiredExample from './input/examples/InputRequiredExample.vue'
+import CustomClasses from './input/examples/CustomClasses.vue' 
 </script>
 
 # Vue Input - Flowbite
@@ -124,3 +125,15 @@ import { Input, Button } from 'flowbite-vue'
 ```
 
 <InputSuffixExample />
+
+## Override classes
+
+Override default input field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Input classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" placeholder="enter your first name" label="First name" />
+</template>
+```
+
+<CustomClasses />

docs/components/input/examples/CustomClasses.vue

@@ -0,0 +1,7 @@
+<template>
+    <Input classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" placeholder="enter your first name" label="First name" />
+</template>
+<script lang="ts" setup>
+import { Input } from '../../../../src/index'
+</script>
+

docs/components/radio.md

@@ -6,6 +6,7 @@ import HorizontalListRadio from './radio/examples/HorizontalListRadio.vue'
 import InlineRadio from './radio/examples/InlineRadio.vue'
 import LinkRadio from './radio/examples/LinkRadio.vue'
 import BorderedRadio from './radio/examples/BorderedRadio.vue'
+import CustomClasses from './radio/examples/CustomClasses.vue'
 </script>
 
 # Vue Toggle Radio - Flowbite
@@ -129,4 +130,19 @@ const picked = ref('one')
 </template>
 ```
 
-<BorderedRadio />
+<BorderedRadio />
+
+## Override classes
+
+Override default radio field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+    <div>
+      <Radio classes="!w-6 !h-6 text-green-600 focus:ring-green-500 dark:focus:ring-green-500 dark:ring-offset-gray-800" name="default radio" v-model="picked" value="one" label="Default radio" />
+      <Radio classes="!w-6 !h-6 text-green-600 focus:ring-green-500 dark:focus:ring-green-500 dark:ring-offset-gray-800" name="default radio" v-model="picked" value="two" label="Checked state" />
+    </div>
+</template>
+```
+
+<CustomClasses />

docs/components/radio/examples/CustomClasses.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+      <Radio classes="!w-6 !h-6 text-green-600 focus:ring-green-500 dark:focus:ring-green-500 dark:ring-offset-gray-800" name="default radio" v-model="picked" value="one" label="Default radio" />
+      <Radio classes="!w-6 !h-6 text-green-600 focus:ring-green-500 dark:focus:ring-green-500 dark:ring-offset-gray-800" name="default radio" v-model="picked" value="two" label="Checked state" />
+    </div>
+</template>
+
+<script setup>
+import Radio from '../../../../src/components/Radio/Radio.vue'
+import { ref } from 'vue'
+
+const picked = ref('one')
+</script>
+

docs/components/range.md

@@ -4,6 +4,7 @@ import DisabledRange from './range/examples/DisabledRange.vue'
 import MinMaxRange from './range/examples/MinMaxRange.vue'
 import StepsRange from './range/examples/StepsRange.vue'
 import SizeRange from './range/examples/SizeRange.vue'
+import CustomClasses from './range/examples/CustomClasses.vue'
 </script>
 
 # Vue Toggle Range - Flowbite
@@ -28,7 +29,6 @@ import { ref } from 'vue'
 
 const value = ref('10')
 </script>
-
 ```
 
 <DefaultRange />
@@ -77,3 +77,15 @@ const value = ref('10')
 ```
 
 <SizeRange />
+
+## Override classes
+
+Override default range field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Range classes="dark:bg-blue-200 bg-blue-200" v-model="value" />
+</template>
+```
+
+<CustomClasses />

docs/components/range/examples/CustomClasses.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <Range classes="dark:bg-blue-200 bg-blue-200" v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import Range from '../../../../src/components/Range/Range.vue'
+import { ref } from 'vue'
+
+const value = ref('10')
+</script>

docs/components/select.md

@@ -3,6 +3,7 @@ import SelectExample from './select/examples/SelectExample.vue';
 import DisabledSelect from './select/examples/DisabledSelect.vue';
 import SelectSize from './select/examples/SelectSize.vue';
 import UnderlinedSelect from './select/examples/UnderlinedSelect.vue';
+import CustomClasses from './select/examples/CustomClasses.vue'
 </script>
 
 # Vue Select - Flowbite
@@ -73,4 +74,16 @@ const countries = [
 </template>
 ```
 
-<SelectSize />
+<SelectSize />
+
+## Override classes
+
+Override default select field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Select classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" :options="countries" label="Select a country" />
+</template>
+```
+
+<CustomClasses />

docs/components/select/examples/CustomClasses.vue

@@ -0,0 +1,13 @@
+<template>
+    <Select classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" :options="countries" label="Select a country" />
+</template>
+
+<script setup>
+import { Select } from '../../../../src/index'
+
+const countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' },
+]
+</script>

docs/components/textarea.md

@@ -1,6 +1,7 @@
 <script setup>
 import DefaultTextarea from './textarea/examples/DefaultTextarea.vue'
 import CommentTextarea from './textarea/examples/CommentTextarea.vue'
+import CustomClasses from './textarea/examples/CustomClasses.vue'
 </script>
 
 # Vue Textarea - Flowbite
@@ -63,3 +64,15 @@ import { Button, Textarea } from 'flowbite-vue'
 ```
 
 <CommentTextarea />
+
+## Override classes
+
+Override default input field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Textarea classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" rows="4" placeholder="Write you message..." v-model="message" label="Your message" />
+</template>
+```
+
+<CustomClasses />

docs/components/textarea/examples/CustomClasses.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <Textarea classes="focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500" rows="4" placeholder="Write you message..." v-model="message" label="Your message" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Textarea from '../../../../src/components/Textarea/Textarea.vue'
+
+const message = ref('')
+</script>

docs/components/toggle.md

@@ -4,6 +4,7 @@
   import DisabledToggle from './toggle/examples/DisabledToggle.vue'
   import ColorsToggle from './toggle/examples/ColorsToggle.vue'
   import SizeToggle from './toggle/examples/SizeToggle.vue'
+  import CustomClasses from './toggle/examples/CustomClasses.vue'
 </script>
 
 # Vue Toggle - Flowbite
@@ -89,3 +90,15 @@ const toggle = ref(false)
 ```
 
 <SizeToggle />
+
+## Override classes
+
+Override default toggle field class with `classes` and `labelClass` for label.
+
+```vue
+<template>
+  <Toggle classes="peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600" v-model="toggle" label="Toggle me" />
+</template>
+```
+
+<CustomClasses />

docs/components/toggle/examples/CustomClasses.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="flex flex-col gap-2">
+        <Toggle classes="peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600" v-model="toggle" label="Toggle me" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Toggle } from '../../../../src/index'
+
+const toggle = ref(false)
+</script>
+

src/components/Checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
-  <label class="flex gap-3 items-center justify-start">
-    <input v-model="model" type="checkbox" :disabled="disabled" :class="checkboxClasses" />
+  <label :class="props.labelClass" class="flex gap-3 items-center justify-start">
+    <input v-model="model" type="checkbox" :disabled="disabled" :class="[checkboxClasses, props.classes]" />
     <span v-if="label" :class="labelClasses">{{ label }}</span>
     <slot />
   </label>
@@ -14,11 +14,15 @@ interface CheckboxProps {
   modelValue?: boolean,
   label?: string,
   disabled?: boolean,
+  classes?: string,
+  labelClass?: string,
 }
 const props = withDefaults(defineProps<CheckboxProps>(), {
   modelValue: false,
   label: '',
   disabled: false,
+  classes: '',
+  labelClass: '',
 })
 
 const emit = defineEmits(['update:modelValue'])

src/components/FileInput/FileInput.vue

@@ -2,7 +2,7 @@
   <div>
     <div v-if="!dropzone">
       <label>
-        <span :class="labelClasses">{{ label }}</span>
+        <span :class="[labelClasses, props.labelClass]">{{ label }}</span>
         <input :class="fileInpClasses" :multiple="multiple" @change="handleChange" type="file" />
       </label>
       <slot />
@@ -45,13 +45,17 @@ interface FileInputProps {
   size?: string
   dropzone?: boolean
   multiple?: boolean
+  classes?: string
+  labelClass?: string
 }
 const props = withDefaults(defineProps<FileInputProps>(), {
   modelValue: null,
   label: '',
   size: 'sm',
   dropzone: false,
   multiple: false,
+  classes: '',
+  labelClass: '',
 })
 const dropZoneText = computed(() => {
   if (isArray(props.modelValue)) {
@@ -111,5 +115,5 @@ const dragOverHandler = (event: Event) => {
   event.preventDefault()
 }
 
-const { fileInpClasses, labelClasses, dropzoneLabelClasses, dropzoneWrapClasses, dropzoneTextClasses } = useFileInputClasses(props.size)
+const { fileInpClasses, labelClasses, dropzoneLabelClasses, dropzoneWrapClasses, dropzoneTextClasses } = useFileInputClasses(props.size, props.classes)
 </script>

src/components/FileInput/composables/useFileInputClasses.ts

@@ -9,9 +9,9 @@ const fileInpDropzoneClasses =
 const fileDropzoneWrapClasses = 'flex flex-col items-center justify-center pt-5 pb-6'
 const fileDropzoneDefaultTextClasses = '!-mb-2 text-sm text-gray-500 dark:text-gray-400'
 
-export function useFileInputClasses(size: string) {
+export function useFileInputClasses(size: string, classes: string) {
   const fileInpClasses = computed(() => {
-    return simplifyTailwindClasses(fileInpDefaultClasses, 'text-' + size)
+    return simplifyTailwindClasses(fileInpDefaultClasses, 'text-' + size, classes)
   })
 
   const labelClasses = computed(() => {