fix: floating vue hydration mismatch (#3526)

The VDropdown component from the floating-vue lib results in a hydration errors due to the way the lib edits the dom
issue is reported: Akryum/floating-vue#1006

Workaround implemented as proposed in: Akryum/floating-vue#1006 (comment)

apps/nuxt3-ssr/components/BottomModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const ariaId = useId();
 const preAnimation = () => {
   document.body.classList.add("v-popper_bottom");
 };
@@ -29,6 +30,7 @@ const emit = defineEmits(["close"]);
 
 <template>
   <VDropdown
+    :aria-id="ariaId"
     :shown="show"
     :positioning-disabled="true"
     @show="preAnimation()"

apps/nuxt3-ssr/components/FilterWell.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const ariaId = useId();
 const props = defineProps<{
   filters: [];
 }>();
@@ -51,7 +52,7 @@ function isAFilterSet(filters) {
       Active filters
     </div>
     <div class="flex flex-wrap gap-3 content-around p-3">
-      <template v-for="filter in filters">
+      <template v-for="(filter, index) in filters">
         <Button
           v-if="filter?.columnType === '_SEARCH' && isFilterSet(filter)"
           @click="clearSearch(filter)"
@@ -64,6 +65,7 @@ function isAFilterSet(filters) {
         </Button>
 
         <VDropdown
+          :aria-id="ariaId + '_' + index"
           :triggers="['hover', 'focus']"
           :distance="12"
           theme="tooltip"

apps/nuxt3-ssr/components/SideModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { INotificationType } from "~/interfaces/types";
+const ariaId = useId();
 const props = withDefaults(
   defineProps<{
     slideInRight?: boolean;
@@ -81,6 +82,7 @@ const bgClass = computed(() => {
 
 <template>
   <VDropdown
+    :aria-id="ariaId"
     :shown="show"
     :positioning-disabled="true"
     @show="preAnimation()"

apps/nuxt3-ssr/components/harmonization/HarmonizationLegendDetailed.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { HarmonizationIconSize } from "../../interfaces/types";
+const ariaId = useId();
 
 const props = withDefaults(
   defineProps<{
@@ -28,7 +29,12 @@ const props = withDefaults(
         No data
       </li>
     </ul>
-    <VDropdown :triggers="['hover', 'focus']" :distance="12" theme="tooltip">
+    <VDropdown
+      :aria-id="ariaId"
+      :triggers="['hover', 'focus']"
+      :distance="12"
+      theme="tooltip"
+    >
       <div class="flex gap-1 text-blue-500 hover:underline cursor-pointer">
         <BaseIcon name="info" />
         <span> About statuses </span>

apps/nuxt3-ssr/components/harmonization/HarmonizationLegendMatrix.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { HarmonizationIconSize } from "../../interfaces/types";
+const ariaId = useId();
 
 const props = withDefaults(
   defineProps<{
@@ -24,7 +25,12 @@ const props = withDefaults(
         No data
       </li>
     </ul>
-    <VDropdown :triggers="['hover', 'focus']" :distance="12" theme="tooltip">
+    <VDropdown
+      :aria-id="ariaId"
+      :triggers="['hover', 'focus']"
+      :distance="12"
+      theme="tooltip"
+    >
       <div class="flex gap-1 text-blue-500 hover:underline cursor-pointer">
         <BaseIcon name="info" />
         <span> About statuses </span>