feat: FwbInput: Split input and block classes (#325)

* feat: FwbInput: Split input and block classes

* Fixed grammar mistakes

* Update FwbInputExampleBlockClasses.vue

added class for dark theme

* Update docs/components/input/examples/FwbInputExampleBlockClasses.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: Sqrcz <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

docs/components/input.md

@@ -3,6 +3,7 @@ import FwbInputExample from './input/examples/FwbInputExample.vue'
 import FwbInputExampleSize from './input/examples/FwbInputExampleSize.vue'
 import FwbInputExampleDisabled from './input/examples/FwbInputExampleDisabled.vue'
 import FwbInputExampleHelper from './input/examples/FwbInputExampleHelper.vue'
+import FwbInputExampleBlockClasses from './input/examples/FwbInputExampleBlockClasses.vue'
 import FwbInputExamplePrefix from './input/examples/FwbInputExamplePrefix.vue'
 import FwbInputExampleSuffix from './input/examples/FwbInputExampleSuffix.vue'
 import FwbInputExampleRequired from './input/examples/FwbInputExampleRequired.vue'
@@ -103,6 +104,33 @@ const name = ref('')
 </script>
 ```
 
+## Extra CSS classes
+
+Sometimes it is required to add some customization to the input or the input wrapper.
+By default, `class` attribute is bound to the input element. To customize the input wrapper you can use the `block-classes` property.
+It accepts the values as the `class` attribute
+
+<fwb-input-example-block-classes />
+```vue
+<template>
+  <fwb-input
+    v-model="name"
+    label="First name"
+    placeholder="enter your first name"
+    required
+    class="bg-green-200"
+    block-classes="border-2 border-green-500 p-2 rounded-lg"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
+```
+
 ## Slot - Helper
 
 <fwb-input-example-helper />

docs/components/input/examples/FwbInputExampleBlockClasses.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="vp-raw">
+    <fwb-input
+      v-model="name"
+      label="First name"
+      placeholder="enter your first name"
+      class="bg-green-200 dark:bg-green-700"
+      block-classes="border-2 border-green-500 p-2 rounded-lg"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FwbInput } from '../../../../src/index'
+
+const name = ref('')
+</script>

src/components/FwbInput/FwbInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="blockClasses">
     <label
       v-if="label"
       :class="labelClasses"
@@ -64,8 +64,13 @@ interface InputProps {
   type?: InputType
   autocomplete?: CommonAutoFill
   validationStatus?: ValidationStatus
+  blockClasses?: string | string[] | Record<string, unknown>
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<InputProps>(), {
   disabled: false,
   label: '',
@@ -75,6 +80,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   type: 'text',
   autocomplete: 'off',
   validationStatus: undefined,
+  blockClasses: undefined,
 })
 
 const model = useVModel(props, 'modelValue')