From dca91345c02181ef15962ee0d177cf3a2b07bc68 Mon Sep 17 00:00:00 2001
From: Andrey Akulov <andreyjamer@gmail.com>
Date: Tue, 17 Sep 2024 19:17:05 +0500
Subject: [PATCH 1/2] feat: FwbInput: Split input and block classes

---
 docs/components/input.md                      | 28 +++++++++++++++++++
 .../examples/FwbInputExampleBlockClasses.vue  | 18 ++++++++++++
 src/components/FwbInput/FwbInput.vue          |  8 +++++-
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 docs/components/input/examples/FwbInputExampleBlockClasses.vue

diff --git a/docs/components/input.md b/docs/components/input.md
index fad13eda..c51fb108 100644
--- a/docs/components/input.md
+++ b/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` attibute is bind to the input element. To customize the input wrapper you an use `block-classes` property.
+It accepts the values as `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 />
diff --git a/docs/components/input/examples/FwbInputExampleBlockClasses.vue b/docs/components/input/examples/FwbInputExampleBlockClasses.vue
new file mode 100644
index 00000000..d1c16d1f
--- /dev/null
+++ b/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"
+      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>
diff --git a/src/components/FwbInput/FwbInput.vue b/src/components/FwbInput/FwbInput.vue
index 962ad294..565232e7 100644
--- a/src/components/FwbInput/FwbInput.vue
+++ b/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')

From e310713936f40f7446edc9e1df99e53b09830363 Mon Sep 17 00:00:00 2001
From: Andrey Akulov <andreyjamer@gmail.com>
Date: Tue, 17 Sep 2024 19:55:29 +0500
Subject: [PATCH 2/2] Fixed grammar mistakes

---
 docs/components/input.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/components/input.md b/docs/components/input.md
index c51fb108..88e07265 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -107,8 +107,8 @@ const name = ref('')
 ## Extra CSS classes
 
 Sometimes it is required to add some customization to the input or the input wrapper.
-By default `class` attibute is bind to the input element. To customize the input wrapper you an use `block-classes` property.
-It accepts the values as `class` attribute
+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