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',