fix(components): hydration attribute mismatch with vue 3.4 (#1199)

src/runtime/components/navigation/CommandPalette.vue

@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import { ref, computed, watch, toRef, onMounted, defineComponent } from 'vue'
-import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions as HComboboxOptions } from '@headlessui/vue'
+import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions as HComboboxOptions, provideUseId } from '@headlessui/vue'
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
@@ -79,6 +79,7 @@ import type { Group, Command, Button, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { commandPalette } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof commandPalette>(appConfig.ui.strategy, appConfig.ui.commandPalette, commandPalette)
 
@@ -366,6 +367,8 @@ export default defineComponent({
       results
     })
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -72,12 +72,13 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { ComboboxOption as HComboboxOption } from '@headlessui/vue'
+import { ComboboxOption as HComboboxOption, provideUseId } from '@headlessui/vue'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UKbd from '../elements/Kbd.vue'
 import type { Group } from '../../types'
 import { commandPalette } from '#ui/ui.config'
+import { useId } from '#imports'
 
 export default defineComponent({
   components: {
@@ -151,6 +152,8 @@ export default defineComponent({
       return content
     }
 
+    provideUseId(() => useId())
+
     return {
       label,
       highlight

src/runtime/components/navigation/Tabs.vue

@@ -33,13 +33,7 @@
     </HTabList>
 
     <HTabPanels :class="ui.container">
-      <HTabPanel
-        v-for="(item, index) of items"
-        :key="index"
-        v-slot="{ selected }"
-        :class="ui.base"
-        tabindex="-1"
-      >
+      <HTabPanel v-for="(item, index) of items" :key="index" v-slot="{ selected }" :class="ui.base">
         <slot :name="item.slot || 'item'" :item="item" :index="index" :selected="selected">
           {{ item.content }}
         </slot>
@@ -51,7 +45,7 @@
 <script lang="ts">
 import { toRef, ref, watch, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from '@headlessui/vue'
+import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from '@headlessui/vue'
 import { useResizeObserver } from '@vueuse/core'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
@@ -59,6 +53,7 @@ import type { TabItem, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { tabs } from '#ui/ui.config'
+import { useId } from '#imports'
 
 const config = mergeConfig<typeof tabs>(appConfig.ui.strategy, appConfig.ui.tabs, tabs)
 
@@ -151,6 +146,8 @@ export default defineComponent({
 
     onMounted(() => calcMarkerSize(selectedIndex.value))
 
+    provideUseId(() => useId())
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,