FwbInput component refactored to enchance its flexibility

Author: Sqrcz

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-black rounded-none italic text-a"
+      input-class="p-0 text-center text-gray-700 dark:text-gray-200"
+      label-class="text-center text-gray-200 dark:text-gray-400 p-2 m-0"
       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=" background-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,70 @@
     </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"
+      class=""
     >
       <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>

src/components/FwbInput/composables/useInputClasses.ts

@@ -1,76 +1,98 @@
-import { twMerge } from 'tailwind-merge'
 import { computed, type Ref } from 'vue'
 
-import {
-  type InputSize,
-  type ValidationStatus,
-  validationStatusMap,
-} from '../types'
+import { type InputSize, type ValidationStatus, validationStatusMap } from '../types'
 
-// LABEL
-const baseLabelClasses = 'block mb-2 text-sm font-medium'
+import { useMergeClasses } from '@/composables/useMergeClasses'
 
-// INPUT
-const defaultInputClasses = 'block flex-grow w-full p-0 bg-transparent text-inherit ring-offset-0 ring-0 border-0 focus:ring-offset-0 focus:ring-0 focus:border-0'
+const defaultWrapperClasses = ''
+const defaultLabelClasses = 'block mb-2 text-sm font-medium'
+const defaultInputWrapperClasses = 'relative flex items-center has-[input:focus]:ring-offset-0 has-[input:focus]:ring-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg has-[input:focus]:ring-blue-500 has-[input:focus]:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:has-[input:focus]:ring-blue-500 dark:has-[input:focus]:border-blue-500'
+const defaultInputClasses = 'block flex-grow w-full p-0 bg-transparent text-inherit ring-offset-0 ring-0 border-0 focus:ring-offset-0 focus:ring-0 focus:border-0 dark:placeholder-gray-400'
+const defaultHelperClasses = 'mt-2 text-sm text-gray-500 dark:text-gray-400'
 
-// BLOCK
-const defaultBlockClasses = 'has-[input:focus]:ring-offset-0 has-[input:focus]:ring-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg has-[input:focus]:ring-blue-500 has-[input:focus]:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:has-[input:focus]:ring-blue-500 dark:has-[input:focus]:border-blue-500'
+const disabledInputWrapperClasses = 'bg-gray-100'
+const disabledInputClasses = 'cursor-not-allowed'
 
-const disabledInputClasses = 'cursor-not-allowed bg-gray-100'
 const inputSizeClasses: Record<InputSize, string> = {
-  lg: 'p-4',
-  md: 'p-2.5 text-sm',
   sm: 'p-2 text-sm',
+  md: 'p-2.5 text-sm',
+  lg: 'p-4',
 }
 
-const successInputClasses = 'bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 has-[input:focus]:ring-green-500 has-[input:focus]:border-green-500'
-const errorInputClasses = 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 has-[input:focus]:ring-red-500 has-[input:focus]:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500'
+const errorInputWrapperClasses = 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 has-[input:focus]:ring-red-500 has-[input:focus]:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500'
+const errorTextClasses = 'text-red-700 dark:text-red-500'
+const successInputWrapperClasses = 'bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 has-[input:focus]:ring-green-500 has-[input:focus]:border-green-500 '
+const successTextClasses = 'text-green-700 dark:text-green-500'
+const errorInputClasses = 'text-red-900 placeholder-red-700 dark:placeholder-red-500'
+const successInputClasses = 'text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500'
 
 export type UseInputClassesProps = {
-  size: Ref<InputSize>
+  class: Ref<string | Record<string, boolean>>
   disabled: Ref<boolean>
+  inputClass: Ref<string | Record<string, boolean>>
+  labelClass: Ref<string | Record<string, boolean>>
+  size: Ref<InputSize>
   validationStatus: Ref<ValidationStatus | undefined>
+  wrapperClass: Ref<string | Record<string, boolean>>
 }
 
 export function useInputClasses (props: UseInputClassesProps): {
-  inputBlockClasses: Ref<string>
-  inputClasses: Ref<string>
-  labelClasses: Ref<string>
+  helperMessageClass: Ref<string>
+  inputClass: Ref<string>
+  inputWrapperClass: Ref<string>
+  labelClass: Ref<string>
+  validationMessageClass: Ref<string>
+  wrapperClass: Ref<string>
 } {
-  const inputBlockClasses = computed(() => {
-    const vs = props.validationStatus.value
+  const wrapperClass = computed(() => useMergeClasses([
+    defaultWrapperClasses,
+    props.wrapperClass.value,
+  ]))
 
-    const classByStatus = vs === validationStatusMap.Success
-      ? successInputClasses
-      : vs === validationStatusMap.Error
-        ? errorInputClasses
-        : ''
+  const labelClass = computed(() => useMergeClasses([
+    defaultLabelClasses,
+    props.labelClass.value,
+    props.validationStatus.value === validationStatusMap.Success
+      ? successTextClasses
+      : props.validationStatus.value === validationStatusMap.Error ? errorTextClasses : '',
+  ]))
 
-    return twMerge(
-      defaultBlockClasses,
-      classByStatus,
-      props.disabled.value ? disabledInputClasses : '',
-    )
-  })
+  const inputWrapperClass = computed(() => useMergeClasses([
+    defaultInputWrapperClasses,
+    props.class.value,
+    props.validationStatus.value === validationStatusMap.Success
+      ? successInputWrapperClasses
+      : props.validationStatus.value === validationStatusMap.Error ? errorInputWrapperClasses : '',
+    props.disabled.value ? disabledInputWrapperClasses : '',
+  ]))
 
-  const inputClasses = computed(() => {
-    return twMerge(defaultInputClasses, inputSizeClasses[props.size.value])
-  })
+  const inputClass = computed(() => useMergeClasses([
+    defaultInputClasses,
+    inputSizeClasses[props.size.value],
+    props.validationStatus.value === validationStatusMap.Success
+      ? successInputClasses
+      : props.validationStatus.value === validationStatusMap.Error ? errorInputClasses : '',
+    props.inputClass.value,
+    props.disabled.value ? disabledInputClasses : '',
+  ]))
 
-  const labelClasses = computed(() => {
-    const vs = props.validationStatus.value
-    const classByStatus = vs === validationStatusMap.Success
-      ? 'text-green-700 dark:text-green-500'
-      : vs === validationStatusMap.Error
-        ? 'text-red-700 dark:text-red-500'
-        : 'text-gray-900 dark:text-white'
+  const validationMessageClass = computed(() => useMergeClasses([
+    defaultHelperClasses,
+    props.validationStatus.value === validationStatusMap.Success
+      ? successTextClasses
+      : props.validationStatus.value === validationStatusMap.Error ? errorTextClasses : '',
+  ]))
 
-    return twMerge(baseLabelClasses, classByStatus)
-  })
+  const helperMessageClass = computed(() => useMergeClasses([
+    defaultHelperClasses,
+  ]))
 
   return {
-    inputBlockClasses,
-    inputClasses,
-    labelClasses,
+    helperMessageClass,
+    inputClass,
+    inputWrapperClass,
+    labelClass,
+    validationMessageClass,
+    wrapperClass,
   }
 }

src/components/FwbInput/types.ts

@@ -6,8 +6,8 @@ export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-loc
 export type CommonAutoFill = 'on' | 'off' | 'email' | 'tel' | 'name' | 'username' | 'current-password' | 'country' | 'postal-code' | 'language' | 'bday'
 
 export const validationStatusMap = {
-  Success: 'success',
   Error: 'error',
+  Success: 'success',
 } as const
 
 export type ValidationStatus = typeof validationStatusMap[keyof typeof validationStatusMap]