From 16071846a8797b309008acdd725f619a708ae191 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sun, 28 Apr 2024 11:46:24 +0200
Subject: [PATCH] chore(FormField): rename `inputId` to `id`

---
 src/runtime/components/Checkbox.vue     |  8 ++++----
 src/runtime/components/FormField.vue    |  6 +++---
 src/runtime/components/Input.vue        |  4 ++--
 src/runtime/components/RadioGroup.vue   | 10 +++++-----
 src/runtime/components/Slider.vue       |  4 ++--
 src/runtime/components/Switch.vue       |  8 ++++----
 src/runtime/components/Textarea.vue     |  4 ++--
 src/runtime/composables/useFormField.ts | 20 ++++++++++----------
 src/runtime/types/form.ts               |  2 +-
 9 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index 2ae0b3df..735ab2e2 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -44,8 +44,8 @@ const modelValue = defineModel<boolean | undefined>({ default: undefined })
 const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
 
 const appConfig = useAppConfig()
-const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<CheckboxProps>(props)
-const inputId = _inputId.value ?? useId()
+const { id: _id, emitFormChange, size, color, name, disabled } = useFormField<CheckboxProps>(props)
+const id = _id.value ?? useId()
 
 const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
 
@@ -79,7 +79,7 @@ function onChecked() {
   <div :class="ui.root({ class: props.class })">
     <div :class="ui.container()">
       <CheckboxRoot
-        :id="inputId"
+        :id="id"
         v-model:checked="checked"
         :default-checked="defaultValue"
         v-bind="rootProps"
@@ -96,7 +96,7 @@ function onChecked() {
     </div>
 
     <div v-if="(label || $slots.label) || (description || $slots.description)" :class="ui.wrapper()">
-      <Label v-if="label || $slots.label" :for="inputId" :class="ui.label()">
+      <Label v-if="label || $slots.label" :for="id" :class="ui.label()">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index 54f342f8..5d0137f5 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -58,11 +58,11 @@ const error = computed(() => {
     : formErrors?.value?.find(error => error.name === props.name)?.message
 })
 
-const inputId = ref(useId())
+const id = ref(useId())
 
 provide<FormFieldInjectedOptions<FormFieldProps>>('form-field', {
   error,
-  inputId,
+  id,
   name: computed(() => props.name),
   size: computed(() => props.size),
   eagerValidation: computed(() => props.eagerValidation),
@@ -74,7 +74,7 @@ provide<FormFieldInjectedOptions<FormFieldProps>>('form-field', {
   <div :class="ui.root({ class: props.class })">
     <div :class="ui.wrapper()">
       <div v-if="label || $slots.label" :class="ui.labelWrapper()">
-        <Label :for="inputId" :class="ui.label()">
+        <Label :for="id" :class="ui.label()">
           <slot name="label" :label="label">
             {{ label }}
           </slot>
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index ed0c0fac..486bae1a 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -55,7 +55,7 @@ defineSlots<InputSlots>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, size, color, inputId, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, size, color, id, name, disabled } = useFormField<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 // const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
 
@@ -127,7 +127,7 @@ onMounted(() => {
 <template>
   <div :class="ui.root({ class: props.class })">
     <input
-      :id="inputId"
+      :id="id"
       ref="inputRef"
       :type="type"
       :value="modelValue"
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index ca42a7e7..67d665d0 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -56,8 +56,8 @@ const modelValue = defineModel<T>({
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
-const { emitFormChange, color, name, size, inputId: _inputId, disabled } = useFormField<RadioGroupProps<T>>(props)
-const inputId = _inputId.value ?? useId()
+const { emitFormChange, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
+const id = _id.value ?? useId()
 
 const ui = computed(() => tv({ extend: radioGroup, slots: props.ui })({
   size: size.value,
@@ -70,7 +70,7 @@ const ui = computed(() => tv({ extend: radioGroup, slots: props.ui })({
 function normalizeOption(option: any) {
   if (['string', 'number', 'boolean'].includes(typeof option)) {
     return {
-      id: `${inputId}:${option}`,
+      id: `${id}:${option}`,
       value: option,
       label: option
     }
@@ -78,7 +78,7 @@ function normalizeOption(option: any) {
 
   return {
     ...option,
-    id: `${inputId}:${option.value}`
+    id: `${id}:${option.value}`
   }
 }
 
@@ -97,7 +97,7 @@ function onUpdate() {
 
 <template>
   <RadioGroupRoot
-    :id="inputId"
+    :id="id"
     v-model="modelValue"
     v-bind="rootProps"
     :name="name"
diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue
index 5d4f0f9f..154162c7 100644
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -40,7 +40,7 @@ const modelValue = defineModel<number | number[]>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
 
-const { inputId, emitFormChange, size, color, name, disabled } = useFormField<SliderProps>(props)
+const { id, emitFormChange, size, color, name, disabled } = useFormField<SliderProps>(props)
 
 const defaultSliderValue = computed(() => {
   if (typeof props.defaultValue === 'number') {
@@ -74,7 +74,7 @@ const ui = computed(() => tv({ extend: slider, slots: props.ui })({
 <template>
   <SliderRoot
     v-bind="rootProps"
-    :id="inputId"
+    :id="id"
     v-model="sliderValue"
     :name="name"
     :disabled="disabled"
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 024e505a..2885ec60 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -45,8 +45,8 @@ const modelValue = defineModel<boolean | undefined>({ default: undefined })
 const appConfig = useAppConfig()
 const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
 
-const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
-const inputId = _inputId.value ?? useId()
+const { id: _id, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
+const id = _id.value ?? useId()
 
 const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
   size: size.value,
@@ -68,7 +68,7 @@ async function onChecked() {
   <div :class="ui.root({ class: props.class })">
     <div :class="ui.container()">
       <SwitchRoot
-        :id="inputId"
+        :id="id"
         v-model:checked="modelValue"
         :default-checked="defaultValue"
         v-bind="rootProps"
@@ -87,7 +87,7 @@ async function onChecked() {
       </SwitchRoot>
     </div>
     <div v-if="(label || $slots.label) || (description || $slots.description)" :class="ui.wrapper()">
-      <Label v-if="label || $slots.label" :for="inputId" :class="ui.label()">
+      <Label v-if="label || $slots.label" :for="id" :class="ui.label()">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index a1761561..010dc8e2 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -54,7 +54,7 @@ const emits = defineEmits<TextareaEmits>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, size, color, inputId, name, disabled } = useFormField<TextareaProps>(props)
+const { emitFormBlur, emitFormInput, size, color, id, name, disabled } = useFormField<TextareaProps>(props)
 
 const ui = computed(() => tv({ extend: textarea, slots: props.ui })({
   color: color.value,
@@ -152,7 +152,7 @@ onMounted(() => {
 <template>
   <div :class="ui.root({ class: props.class })">
     <textarea
-      :id="inputId"
+      :id="id"
       ref="textareaRef"
       :value="modelValue"
       :name="name"
diff --git a/src/runtime/composables/useFormField.ts b/src/runtime/composables/useFormField.ts
index 34acfd20..d5dcd57b 100644
--- a/src/runtime/composables/useFormField.ts
+++ b/src/runtime/composables/useFormField.ts
@@ -14,20 +14,20 @@ type Props<T> = {
   disabled?: boolean
 }
 
-export function useFormField<T>(inputProps?: Props<T>) {
+export function useFormField<T>(props?: Props<T>) {
   const formOptions = inject<FormInjectedOptions | undefined>('form-options', undefined)
   const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
   const formField = inject<FormFieldInjectedOptions<T> | undefined>('form-field', undefined)
   const formInputs = inject<any>('form-inputs', undefined)
 
   if (formField) {
-    if (inputProps?.id) {
-      // Updates for="..." attribute on label if inputProps.id is provided
-      formField.inputId.value = inputProps?.id
+    if (props?.id) {
+      // Updates for="..." attribute on label if props.id is provided
+      formField.id.value = props?.id
     }
 
     if (formInputs && formField.name.value) {
-      formInputs.value[formField.name.value] = formField.inputId.value
+      formInputs.value[formField.name.value] = formField.id.value
     }
   }
 
@@ -58,11 +58,11 @@ export function useFormField<T>(inputProps?: Props<T>) {
   )
 
   return {
-    inputId: computed(() => inputProps?.id ?? formField?.inputId.value),
-    name: computed(() => inputProps?.name ?? formField?.name.value),
-    size: computed(() => inputProps?.size ?? formField?.size?.value),
-    color: computed(() => formField?.error?.value ? 'red' : inputProps?.color),
-    disabled: computed(() => formOptions?.disabled?.value || inputProps?.disabled),
+    id: computed(() => props?.id ?? formField?.id.value),
+    name: computed(() => props?.name ?? formField?.name.value),
+    size: computed(() => props?.size ?? formField?.size?.value),
+    color: computed(() => formField?.error?.value ? 'red' : props?.color),
+    disabled: computed(() => formOptions?.disabled?.value || props?.disabled),
     emitFormBlur,
     emitFormInput,
     emitFormChange
diff --git a/src/runtime/types/form.ts b/src/runtime/types/form.ts
index 04a6e18c..056cb53a 100644
--- a/src/runtime/types/form.ts
+++ b/src/runtime/types/form.ts
@@ -69,7 +69,7 @@ export interface FormInjectedOptions {
 }
 
 export interface FormFieldInjectedOptions<T> {
-  inputId: Ref<string | undefined>
+  id: Ref<string | undefined>
   name: ComputedRef<string | undefined>
   // @ts-expect-error FIXME: TS doesn't like this
   size: ComputedRef<T['size']>