From de0133e177b081b827b585ea9405d6eaac819373 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 5 Sep 2024 16:00:30 +0200
Subject: [PATCH] chore(components): use `useId` from `vue`

---
 src/runtime/components/App.vue        | 13 +++++--------
 src/runtime/components/Checkbox.vue   |  4 ++--
 src/runtime/components/Form.vue       |  3 +--
 src/runtime/components/FormField.vue  |  3 +--
 src/runtime/components/RadioGroup.vue |  3 +--
 src/runtime/components/Switch.vue     |  4 ++--
 6 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/runtime/components/App.vue b/src/runtime/components/App.vue
index 9227bbe8..275fce4e 100644
--- a/src/runtime/components/App.vue
+++ b/src/runtime/components/App.vue
@@ -2,7 +2,7 @@
 import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue'
 import type { ToasterProps } from '../types'
 
-export interface AppProps extends ConfigProviderProps {
+export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps | null
 }
@@ -13,26 +13,23 @@ export interface AppSlots {
 </script>
 
 <script setup lang="ts">
-import { toRef } from 'vue'
+import { toRef, useId } from 'vue'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useId } from '#imports'
 import UToaster from './Toaster.vue'
 import UModalProvider from './ModalProvider.vue'
 import USlideoverProvider from './SlideoverProvider.vue'
 
-const props = withDefaults(defineProps<AppProps>(), {
-  useId: () => useId()
-})
+const props = defineProps<AppProps>()
 defineSlots<AppSlots>()
 
-const configProviderProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody', 'useId'))
+const configProviderProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody'))
 const tooltipProps = toRef(() => props.tooltip)
 const toasterProps = toRef(() => props.toaster)
 </script>
 
 <template>
-  <ConfigProvider v-bind="configProviderProps">
+  <ConfigProvider :use-id="() => useId() as string" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
       <UToaster v-if="toaster !== null" v-bind="toasterProps">
         <slot />
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index e6b1aab4..a3c447e8 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -46,10 +46,10 @@ export interface CheckboxSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useId } from 'vue'
 import { CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useId, useAppConfig } from '#imports'
+import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
 
 const props = defineProps<CheckboxProps>()
diff --git a/src/runtime/components/Form.vue b/src/runtime/components/Form.vue
index ad034472..8cdd7fd0 100644
--- a/src/runtime/components/Form.vue
+++ b/src/runtime/components/Form.vue
@@ -31,9 +31,8 @@ export interface FormSlots {
 </script>
 
 <script lang="ts" setup generic="T extends object">
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed } from 'vue'
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId } from 'vue'
 import { useEventBus } from '@vueuse/core'
-import { useId } from '#imports'
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey } from '../composables/useFormField'
 import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
 import { FormValidationException } from '../types/form'
diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index a912b266..6b0d587d 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -36,9 +36,8 @@ export interface FormFieldSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, inject, provide, type Ref } from 'vue'
+import { computed, ref, inject, provide, type Ref, useId } from 'vue'
 import { Label } from 'radix-vue'
-import { useId } from '#imports'
 import { formFieldInjectionKey } from '../composables/useFormField'
 import type { FormError } from '../types/form'
 
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index a5773898..feafcf49 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -55,10 +55,9 @@ export interface RadioGroupSlots<T> {
 </script>
 
 <script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">
-import { computed } from 'vue'
+import { computed, useId } from 'vue'
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useId } from '#imports'
 import { useFormField } from '../composables/useFormField'
 
 const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index bd756d67..4531342c 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -51,10 +51,10 @@ export interface SwitchSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useId } from 'vue'
 import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useId, useAppConfig } from '#imports'
+import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
 
 const props = defineProps<SwitchProps>()