Merge pull request #365 from Sqrcz/feature/improved-input-component-flexibility

Feature: Improved FwbInput component flexibility

Author: Sqrcz

docs/components/input.md

@@ -1,12 +1,12 @@
 <script setup>
 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'
+import FwbInputExampleSize from './input/examples/FwbInputExampleSize.vue'
+import FwbInputExampleStyling from './input/examples/FwbInputExampleStyling.vue'
+import FwbInputExampleSuffix from './input/examples/FwbInputExampleSuffix.vue'
 import FwbInputExampleValidation from './input/examples/FwbInputExampleValidation.vue'
 </script>
 
@@ -104,33 +104,6 @@ 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 />
@@ -218,22 +191,26 @@ const query = ref('')
 ```vue
 <template>
   <fwb-input
-    v-model="email"
+    v-model="name"
+    label="Your name"
+    placeholder="Success input"
     required
-    placeholder="enter your email address"
-    label="Email"
     validation-status="success"
-  />
+  >
+    <template #validationMessage>
+      <span class="font-medium">Well done!</span> Some success message.
+    </template>
+  </fwb-input>
   <hr class="mt-4 border-0">
   <fwb-input
-    v-model="email"
+    v-model="name"
+    label="Your name"
+    placeholder="Error input"
     required
-    placeholder="enter your email address"
-    label="Email"
     validation-status="error"
   >
     <template #validationMessage>
-      Please enter a valid email address
+      <span class="font-medium">Oh, snapp!</span> Some error message.
     </template>
   </fwb-input>
 </template>
@@ -242,6 +219,44 @@ const query = ref('')
 import { ref } from 'vue'
 import { FwbInput } from 'flowbite-vue'
 
-const email = ref('')
+const name = ref('')
 </script>
 ```
+
+## Styling Inputs
+
+Use dedicated props to pass classes to individual elements.
+
+
+<fwb-input-example-styling />
+```vue
+<template>
+  <fwb-input
+    v-model="name"
+    class="p-2 border border-black rounded-none text-a italic"
+    input-class="p-0 text-center text-gray-700 dark:text-gray-200"
+    label-class="text-center p-2 m-0 text-gray-900 dark:text-gray-200"
+    label="First name"
+    placeholder="enter your first name"
+    wrapper-class="bg-gray-100 dark:bg-gray-800"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+const name = ref('')
+</script>
+```
+
+
+## Input 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 wrapper around `<input>` element and prefix/suffix. |
+| inputClass   | String \| Object | `''`    | Added to `<input>` element.                                  |

docs/components/input/examples/FwbInputExampleDisabled.vue

@@ -1,10 +1,12 @@
 <template>
-  <fwb-input
-    v-model="name"
-    disabled
-    label="First name"
-    placeholder="enter your first name"
-  />
+  <div class="vp-raw">
+    <fwb-input
+      v-model="name"
+      disabled
+      label="First name"
+      placeholder="enter your first name"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>

docs/components/input/examples/FwbInputExampleHelper.vue

@@ -8,8 +8,8 @@
       <template #helper>
         We'll never share your details. Read our
         <fwb-a
-          href="#"
           color="text-blue-600 dark:text-blue-500"
+          href="#"
         >
           Privacy Policy
         </fwb-a>.

docs/components/input/examples/FwbInputExampleBlockClasses.vue renamed to docs/components/input/examples/FwbInputExampleStyling.vue

@@ -2,10 +2,12 @@
   <div class="vp-raw">
     <fwb-input
       v-model="name"
+      class="p-2 border border-gray-900 rounded-none"
+      input-class="p-0 text-center text-gray-700 dark:text-gray-200"
+      label-class="text-center p-2 m-0 text-gray-900 dark:text-gray-200 italic"
       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"
+      wrapper-class="bg-gray-100 dark:bg-gray-800"
     />
   </div>
 </template>

docs/components/input/examples/FwbInputExampleValidation.vue

@@ -1,22 +1,26 @@
 <template>
   <div class="vp-raw">
     <fwb-input
-      v-model="email"
+      v-model="name"
+      label="Your name"
+      placeholder="Success input"
       required
-      placeholder="enter your email address"
-      label="Email"
       validation-status="success"
-    />
+    >
+      <template #validationMessage>
+        <span class="font-medium">Well done!</span> Some success message.
+      </template>
+    </fwb-input>
     <hr class="mt-4 border-0">
     <fwb-input
-      v-model="email"
+      v-model="name"
+      label="Your name"
+      placeholder="Error input"
       required
-      placeholder="enter your email address"
-      label="Email"
       validation-status="error"
     >
       <template #validationMessage>
-        Please enter a valid email address
+        <span class="font-medium">Oh, snapp!</span> Some error message.
       </template>
     </fwb-input>
   </div>
@@ -27,5 +31,5 @@ import { ref } from 'vue'
 
 import { FwbInput } from '../../../../src/index'
 
-const email = ref('')
+const name = ref('')
 </script>

src/components/FwbInput/FwbInput.vue

@@ -1,13 +1,10 @@
 <template>
-  <div :class="blockClasses">
+  <div :class="wrapperClass">
     <label
       v-if="label"
-      :class="labelClasses"
+      :class="labelClass"
     >{{ label }}</label>
-    <div
-      class="relative flex items-center"
-      :class="[inputBlockClasses]"
-    >
+    <div :class="inputWrapperClass">
       <div
         v-if="$slots.prefix"
         class="ms-2 flex shrink-0 items-center"
@@ -17,11 +14,11 @@
       <input
         v-bind="$attrs"
         v-model="model"
+        :autocomplete="autocomplete"
+        :class="inputClass"
         :disabled="disabled"
-        :type="type"
         :required="required"
-        :autocomplete="autocomplete"
-        :class="[inputClasses]"
+        :type="type"
       >
       <div
         v-if="$slots.suffix"
@@ -32,69 +29,69 @@
     </div>
     <p
       v-if="$slots.validationMessage"
-      :class="validationWrapperClasses"
+      :class="validationMessageClass"
     >
       <slot name="validationMessage" />
     </p>
     <p
       v-if="$slots.helper"
-      class="mt-2 text-sm text-gray-500 dark:text-gray-400"
+      :class="helperMessageClass"
     >
       <slot name="helper" />
     </p>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import { twMerge } from 'tailwind-merge'
-import { computed, toRefs } from 'vue'
+
+import { toRefs } from 'vue'
 
 import { useInputClasses } from './composables/useInputClasses'
-import {
-  type CommonAutoFill,
-  type InputSize,
-  type InputType,
-  type ValidationStatus,
-  validationStatusMap,
-} from './types'
+
+import type { CommonAutoFill, InputSize, InputType, ValidationStatus } from './types'
 
 interface InputProps {
+  autocomplete?: CommonAutoFill
+  class?: string | Record<string, boolean>
   disabled?: boolean
+  inputClass?: string | Record<string, boolean>
   label?: string
+  labelClass?: string | Record<string, boolean>
   modelValue?: string | number
   required?: boolean
   size?: InputSize
   type?: InputType
-  autocomplete?: CommonAutoFill
   validationStatus?: ValidationStatus
-  blockClasses?: string | string[] | Record<string, unknown>
+  wrapperClass?: string | Record<string, boolean>
 }
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(defineProps<InputProps>(), {
+  autocomplete: 'off',
+  class: '',
   disabled: false,
+  inputClass: '',
   label: '',
+  labelClass: '',
   modelValue: '',
   required: false,
   size: 'md',
   type: 'text',
-  autocomplete: 'off',
   validationStatus: undefined,
-  blockClasses: undefined,
+  wrapperClass: '',
 })
 
-const model = useVModel(props, 'modelValue')
-
-const { inputClasses, inputBlockClasses, labelClasses } = useInputClasses(toRefs(props))
-
-const validationWrapperClasses = computed(() => twMerge(
-  'mt-2 text-sm',
-  props.validationStatus === validationStatusMap.Success ? 'text-green-600 dark:text-green-500' : '',
-  props.validationStatus === validationStatusMap.Error ? 'text-red-600 dark:text-red-500' : '',
+const model = defineModel({ type: String })
 
-))
+const {
+  wrapperClass,
+  helperMessageClass,
+  validationMessageClass,
+  labelClass,
+  inputWrapperClass,
+  inputClass,
+} = useInputClasses(toRefs(props))
 </script>