Merge pull request #405 from ChrisWSchultz/bugfix/fix-input-label

Fix FwbInput label/input connection

Author: Sqrcz

docs/components/input.md

@@ -254,9 +254,10 @@ const name = ref('')
 ## 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.                                  |
+| Name         | Type                     | Default | Description                                                  |
+| ------------ | ------------------------ | ------- | ------------------------------------------------------------ |
+| autocomplete | String \| CommonAutoFill | 'off'   | Sets the autocomplete for forms.                             | 
+| 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.                                  |

src/components/FwbInput/FwbInput.vue

@@ -2,6 +2,7 @@
   <div :class="wrapperClass">
     <label
       v-if="label"
+      :for="inputId"
       :class="labelClass"
     >{{ label }}</label>
     <div :class="inputWrapperClass">
@@ -12,7 +13,7 @@
         <slot name="prefix" />
       </div>
       <input
-        v-bind="$attrs"
+        v-bind="inputAttributes"
         v-model="model"
         :autocomplete="autocomplete"
         :class="inputClass"
@@ -46,23 +47,10 @@
 
 import { toRefs } from 'vue'
 
+import { useInputAttributes } from './composables/useInputAttributes'
 import { useInputClasses } from './composables/useInputClasses'
 
-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>
-  required?: boolean
-  size?: InputSize
-  type?: InputType
-  validationStatus?: ValidationStatus
-  wrapperClass?: string | Record<string, boolean>
-}
+import type { InputProps } from './types'
 
 defineOptions({
   inheritAttrs: false,
@@ -92,4 +80,6 @@ const {
   inputWrapperClass,
   inputClass,
 } = useInputClasses(toRefs(props))
+
+const { inputId, inputAttributes } = useInputAttributes(props)
 </script>

src/components/FwbInput/composables/useInputAttributes.ts

@@ -0,0 +1,31 @@
+import { computed, useAttrs } from 'vue'
+
+import type { InputProps } from '../types'
+
+export const useInputAttributes = (props: InputProps) => {
+  const attrs = useAttrs()
+  const inputId = computed(() => {
+    if (!props?.label || props.label.trim() === '') {
+      return `input-${Math.random().toString(36).slice(2, 9)}`
+    }
+    return props.label
+      .toLowerCase()
+      .trim()
+      .replace(/[^\w\s-]/g, '') // Remove special characters
+      .replace(/\s+/g, '-')     // Replace spaces with hyphens
+      .replace(/-+/g, '-')      // Collapse multiple hyphens
+  })
+
+  const inputAttributes = computed(() => {
+    if (inputId.value !== '') {
+      return {
+        ...attrs,
+        id: inputId.value,
+      }
+    } else {
+      return attrs
+    }
+  })
+
+  return { inputId, inputAttributes }
+}

src/components/FwbInput/types.ts

@@ -5,6 +5,20 @@ export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-loc
 // A simplified version of AutFill, which is to complex for TypeScript to handle
 export type CommonAutoFill = 'on' | 'off' | 'email' | 'tel' | 'name' | 'username' | 'current-password' | 'country' | 'postal-code' | 'language' | 'bday'
 
+export interface InputProps {
+  autocomplete?: CommonAutoFill
+  class?: string | Record<string, boolean>
+  disabled?: boolean
+  inputClass?: string | Record<string, boolean>
+  label?: string
+  labelClass?: string | Record<string, boolean>
+  required?: boolean
+  size?: InputSize
+  type?: InputType
+  validationStatus?: ValidationStatus
+  wrapperClass?: string | Record<string, boolean>
+}
+
 export const validationStatusMap = {
   Error: 'error',
   Success: 'success',