@datagouv/components-next 1.0.2-dev.172 → 1.0.2-dev.174

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -1,102 +1,23 @@
 <template>
-  <div class="border border-gray-default">
-    <header class="p-4 flex flex-wrap md:flex-nowrap gap-4 items-center justify-between">
-      <div>
-        <div class="flex items-center gap-1 mb-1">
-          <h3 class="m-0 flex items-baseline text-base font-bold leading-tight">
-            <ResourceIcon
-              :resource
-              class="size-3.5 mr-1 shrink-0 translate-y-px"
-            />
-            <span class="line-clamp-2">{{ resource.title || t('Fichier sans nom') }}</span>
-          </h3>
-          <ResourceSelector
-            v-if="resources && resources.length > 1"
-            :resources
-            :selected-id="resource.id"
-            @select="emit('select', $event)"
-          />
-          <CopyButton
-            :label="t('Copier le lien')"
-            :copied-label="t('Lien copié !')"
-            :text="resourceExternalUrl"
-            class="hidden md:inline-flex"
-          />
-        </div>
-        <div class="text-gray-medium text-xs flex items-center gap-1 flex-wrap">
-          <SchemaBadge :resource />
-          <RiSubtractLine
-            v-if="resource.schema?.name || resource.schema?.url"
-            aria-hidden="true"
-            class="size-3 fill-gray-medium"
-          />
-          <span>{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
-          <RiSubtractLine
-            aria-hidden="true"
-            class="size-3 fill-gray-medium"
-          />
-          <template v-if="resource.format">
-            <span>
-              {{ resource.format.trim().toLowerCase() }}
-              <span v-if="resourceFilesize">({{ filesize(resourceFilesize) }})</span>
-            </span>
-            <RiSubtractLine
-              aria-hidden="true"
-              class="size-3 fill-gray-medium"
-            />
-          </template>
-          <span class="inline-flex items-center">
-            <RiDownloadLine class="size-3 mr-0.5" />
-            {{ summarize(resource.metrics.views) }}
-          </span>
-        </div>
-      </div>
-      <div class="flex items-center gap-2">
-        <BrandedButton
-          v-if="isResourceUrl"
-          :href="resource.latest"
-          :title="t('Lien du fichier - ouvre une nouvelle fenêtre')"
-          rel="ugc nofollow noopener"
-          new-tab
-          size="xs"
-          external
-          @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
-        >
-          {{ t('Visiter') }}
-        </BrandedButton>
-        <BrandedButton
-          v-else-if="ogcService"
-          :icon="RiFileCopyLine"
-          color="primary"
-          size="xs"
-          @click="copyResourceUrl"
-        >
-          {{ t('Copier le lien') }}
-        </BrandedButton>
-        <BrandedButton
-          v-else
-          :href="resource.latest"
-          rel="ugc nofollow noopener"
-          :title="downloadButtonTitle"
-          download
-          class="matomo_download"
-          :icon="unavailable ? RiFileWarningLine : RiDownloadLine"
-          size="xs"
-          color="primary"
-          external
-          @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
-        >
-          {{ t('Télécharger') }}
-        </BrandedButton>
-      </div>
-    </header>
+  <div :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''">
+    <ResourceViewerHeader
+      :dataset
+      :resource
+      :resources
+      :resource-to
+      :explore-to="exploreTo"
+      :replace
+      :fullscreen
+    />
 
-    <section class="pb-4">
+    <section :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''">
       <TabGroup
         size="sm"
+        :default-index="defaultTabIndex"
+        :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''"
         @change="switchTab"
       >
-        <div class="pl-4 pr-4 pb-4">
+        <div class="flex shrink-0 items-center border-b border-gray-default p-2">
           <TabList class="max-w-full overflow-x-auto">
             <Tab
               v-for="tab in tabsOptions"
@@ -106,13 +27,16 @@
             </Tab>
           </TabList>
         </div>
-        <TabPanels>
+        <TabPanels :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''">
           <TabPanel
             v-for="tab in tabsOptions"
             :key="tab.key"
-            class="px-4"
+            :class="[tab.key === 'data' || tab.key === 'map' ? '' : 'p-4', fullscreen ? 'flex min-h-0 flex-1 flex-col' : '']"
           >
-            <div v-if="tab.key === 'map'">
+            <div
+              v-if="tab.key === 'map'"
+              :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : 'h-[600px]'"
+            >
               <Pmtiles
                 v-if="hasPmtiles"
                 :resource="resource"
@@ -128,50 +52,75 @@
                 <span class="text-gray-medium text-xs">{{ pmtilesError }}</span>
               </PreviewUnavailable>
             </div>
-            <div v-if="tab.key === 'data'">
-              <JsonPreview
-                v-if="resource.format && resource.format.toLowerCase() === 'json'"
-                :resource="resource"
-              />
+            <div
+              v-if="tab.key === 'data'"
+              :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''"
+            >
+              <!-- Wrapped in Suspense so switching to this tab (or loading its data) shows
+                   the table skeleton instead of a blank gap while TabularExplorer resolves. -->
+              <Suspense
+                v-if="previewKind === 'tabular'"
+                :timeout="200"
+              >
+                <TabularExplorer :resource-id="resource.id">
+                  <TabularToolbar class="shrink-0 border-b border-gray-default p-2" />
+                  <TabularTable :fill="fullscreen" />
+                  <TabularMobileFilters />
+                </TabularExplorer>
+                <template #fallback>
+                  <TabularSkeleton :fill="fullscreen" />
+                </template>
+              </Suspense>
+
+              <!-- PDF is a full-bleed visual preview like the table and the map: it
+                   owns its own reader backdrop, so it sits outside the padded wrapper. -->
               <PdfPreview
-                v-else-if="resource.format && resource.format.toLowerCase() === 'pdf'"
-                :resource="resource"
-              />
-              <XmlPreview
-                v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
+                v-else-if="previewKind === 'pdf'"
                 :resource="resource"
+                :fill="fullscreen"
               />
-              <ImagePreview
-                v-else-if="isImagePreviewFormat(resource.format)"
-                :resource="resource"
-              />
-              <DatafairPreview
-                v-else-if="hasDatafairPreview"
-                :resource="resource"
-                :dataset="dataset"
-              />
-              <OpenApiViewer
-                v-else-if="hasOpenAPIPreview"
-                :url="resource.extras['apidocUrl'] as string"
-              />
-              <TabularExplorer
-                v-else-if="hasTabularData"
-                :resource-id="resource.id"
-              />
-              <PreviewUnavailable v-else>
-                <!-- "File too large to download" is the only analysis:error value from hydra for now -->
-                <template v-if="resource.extras['analysis:error'] === 'File too large to download'">
-                  {{ t("Ce fichier est trop volumineux pour être analysé et prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.") }}
-                </template>
-                <template v-else-if="resource.extras['analysis:parsing:error']">
-                  {{ t("L'analyse de ce fichier a rencontré une erreur, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.") }}
-                  <br>
-                  <span class="text-gray-medium text-xs">{{ resource.extras['analysis:parsing:error'] }}</span>
-                </template>
-                <template v-else>
-                  {{ t("Ce fichier ne peut pas être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.") }}
-                </template>
-              </PreviewUnavailable>
+
+              <!-- Text previews stay padded inside the tab panel -->
+              <div
+                v-else
+                class="p-4"
+              >
+                <JsonPreview
+                  v-if="previewKind === 'json'"
+                  :resource="resource"
+                />
+                <XmlPreview
+                  v-else-if="previewKind === 'xml'"
+                  :resource="resource"
+                />
+                <ImagePreview
+                  v-else-if="previewKind === 'image'"
+                  :resource="resource"
+                />
+                <DatafairPreview
+                  v-else-if="previewKind === 'datafair'"
+                  :resource="resource"
+                  :dataset="dataset"
+                />
+                <OpenApiViewer
+                  v-else-if="previewKind === 'openapi'"
+                  :url="resource.extras['apidocUrl'] as string"
+                />
+                <PreviewUnavailable v-else>
+                  <!-- "File too large to download" is the only analysis:error value from hydra for now -->
+                  <template v-if="resource.extras['analysis:error'] === 'File too large to download'">
+                    {{ t("Ce fichier est trop volumineux pour être analysé et prévisualisé. Téléchargez-le avec le bouton Télécharger.") }}
+                  </template>
+                  <template v-else-if="resource.extras['analysis:parsing:error']">
+                    {{ t("L'analyse de ce fichier a rencontré une erreur, l'aperçu n'est pas disponible. Téléchargez-le avec le bouton Télécharger.") }}
+                    <br>
+                    <span class="text-gray-medium text-xs">{{ resource.extras['analysis:parsing:error'] }}</span>
+                  </template>
+                  <template v-else>
+                    {{ t("Ce fichier ne peut pas être prévisualisé. Téléchargez-le avec le bouton Télécharger.") }}
+                  </template>
+                </PreviewUnavailable>
+              </div>
             </div>
             <div v-if="tab.key === 'description'">
               <MarkdownViewer
@@ -188,12 +137,6 @@
             <div v-if="tab.key === 'metadata'">
               <Metadata :resource />
             </div>
-            <div v-if="tab.key === 'downloads'">
-              <Downloads
-                :resource="resource"
-                :dataset="dataset"
-              />
-            </div>
             <div v-if="tab.key === 'api'">
               <div class="fr-mb-4w">
                 <p>{{ t("Cette API est générée automatiquement par {platform} à partir du fichier.", { platform: config.name }) }}</p>
@@ -218,13 +161,9 @@
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from 'vue'
-import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiSubtractLine } from '@remixicon/vue'
+import { useRoute, useRouter } from 'vue-router'
 import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
-import { toast } from 'vue-sonner'
-import BrandedButton from '../BrandedButton.vue'
-import CopyButton from '../CopyButton.vue'
 import MarkdownViewer from '../MarkdownViewer.vue'
-import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
 import OpenApiViewer from '../OpenApiViewer/OpenApiViewer.vue'
 import TabGroup from '../Tabs/TabGroup.vue'
 import TabList from '../Tabs/TabList.vue'
@@ -232,19 +171,19 @@ import Tab from '../Tabs/Tab.vue'
 import TabPanels from '../Tabs/TabPanels.vue'
 import TabPanel from '../Tabs/TabPanel.vue'
 import TabularExplorer from '../TabularExplorer/TabularExplorer.vue'
+import TabularToolbar from '../TabularExplorer/TabularToolbar.vue'
+import TabularTable from '../TabularExplorer/TabularTable.vue'
+import TabularMobileFilters from '../TabularExplorer/TabularMobileFilters.vue'
+import TabularSkeleton from '../TabularExplorer/TabularSkeleton.vue'
 import DataStructure from '../ResourceAccordion/DataStructure.vue'
-import Downloads from '../ResourceAccordion/Downloads.vue'
 import Metadata from '../ResourceAccordion/Metadata.vue'
-import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
-import ResourceSelector from './ResourceSelector.vue'
-import { filesize, summarize } from '../../functions/helpers'
-import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize, isImagePreviewFormat } from '../../functions/resources'
+import ResourceViewerHeader from './ResourceViewerHeader.vue'
 import { trackEvent } from '../../functions/matomo'
 import { useComponentsConfig } from '../../config'
-import { useFormatDate } from '../../functions/dates'
 import { useTranslation } from '../../composables/useTranslation'
 import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
 import { provideTabularProfile } from '../../composables/useTabularProfile'
+import type { RouteLocationRaw } from 'vue-router'
 import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 
@@ -270,62 +209,59 @@ const Pmtiles = defineAsyncComponent(() =>
   import('../ResourceAccordion/Pmtiles.client.vue'),
 )
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   dataset: Dataset | DatasetV2
   resource: Resource
   resources?: Resource[]
-}>()
-
-const emit = defineEmits<{
-  select: [resource: Resource]
-}>()
+  resourceTo: (resource: Resource) => RouteLocationRaw
+  // When provided (inline mode), shows an "Explorer" button next to the download
+  // action that opens the fullscreen explorer on the current resource.
+  exploreTo?: (resource: Resource) => string
+  replace?: boolean
+  // Fullscreen mode: make the viewer a flex column so the table fills down to the
+  // bottom, and hide the inline download/visit/copy actions — they're shown in the
+  // dataset context bar above. Inline mode (dataset page) shows them in the header.
+  fullscreen?: boolean
+}>(), {
+  fullscreen: false,
+})
 
 const { t } = useTranslation()
 const config = useComponentsConfig()
-const { formatRelativeIfRecentDate } = useFormatDate()
+const route = useRoute()
+const router = useRouter()
 
 const {
+  previewKind,
   hasTabularData,
   hasPmtiles,
   hasPmtilesError,
   pmtilesError,
-  hasDatafairPreview,
-  hasOpenAPIPreview,
-  ogcService,
   ogcWms,
-  isResourceUrl,
   tabsOptions,
 } = useResourceCapabilities(() => props.resource, () => props.dataset)
 
 // Share the tabular profile fetch between TabularExplorer and DataStructure tabs.
-await provideTabularProfile(() => props.resource.id)
-
-const resourceFilesize = computed(() => getResourceFilesize(props.resource))
-const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))
+// Only tabular resources have one: asking for the profile of a PDF or an image is a
+// request to the Tabular API that can only fail.
+if (hasTabularData.value) {
+  await provideTabularProfile(() => props.resource.id)
+}
 
-const format = computed(() => getResourceFormatIcon(props.resource.format) ? props.resource.format : 'Fichier')
-const availabilityChecked = computed(() => props.resource.extras && 'check:available' in props.resource.extras)
-const unavailable = computed(() => availabilityChecked.value && props.resource.extras['check:available'] === false)
-const downloadButtonTitle = computed(() => {
-  if (unavailable.value) {
-    return t('Le robot de {platform} n\'a pas pu accéder à ce fichier - Télécharger le fichier en {format}', { platform: config.name, format: format.value })
-  }
-  return t('Télécharger le fichier en {format}', { format: format.value })
+// The active tab lives in the URL so a shared link opens on the same one. Read once
+// at mount (TabGroup only takes an initial index), which is enough: switching resource
+// remounts the viewer, and the tab is preserved when the new resource also has it.
+const defaultTabIndex = computed(() => {
+  const index = tabsOptions.value.findIndex(option => option.key === route.query.tab)
+  return index === -1 ? 0 : index
 })
 
-const copyResourceUrl = async () => {
-  try {
-    await navigator.clipboard.writeText(props.resource.url)
-    toast.success(t('Lien copié !'))
-  }
-  catch {
-    toast.error(t('Impossible de copier dans le presse-papier'))
-  }
-}
-
 const switchTab = (index: number) => {
   const option = tabsOptions.value[index]
   if (!option) return
+  // The first tab is the default: drop `tab` rather than writing it in the URL.
+  const { tab: _, ...query } = route.query
+  router.replace({ query: index === 0 ? query : { ...query, tab: option.key } })
   trackEvent('View resource tab', props.resource.id, option.label)
   if (option.key === 'data') {
     trackEvent('Show preview', props.resource.id)

package/src/components/ResourceExplorer/ResourceMainAction.vue

@@ -0,0 +1,240 @@
+<template>
+  <!-- A resource that is only a link is visited, not downloaded. -->
+  <BrandedButton
+    v-if="isResourceUrl"
+    :href="resource.latest"
+    :title="t('Lien du fichier - ouvre une nouvelle fenêtre')"
+    rel="ugc nofollow noopener"
+    new-tab
+    size="xs"
+    external
+    @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
+  >
+    {{ t('Visiter') }}
+  </BrandedButton>
+
+  <!-- An OGC endpoint with nothing to export: its URL is the only useful thing to
+       hand over, to paste into a GIS. -->
+  <BrandedButton
+    v-else-if="!groups.length"
+    :icon="RiFileCopyLine"
+    color="primary"
+    size="xs"
+    @click="copyServiceUrl"
+  >
+    {{ t('Copier le lien') }}
+  </BrandedButton>
+
+  <!-- A single downloadable format needs no menu: a plain download button links
+       straight to it, matching the previous behaviour. -->
+  <BrandedButton
+    v-else-if="singleDownload"
+    :href="singleDownload.url"
+    :icon="RiDownloadLine"
+    rel="ugc nofollow noopener"
+    download
+    external
+    class="matomo_download"
+    size="xs"
+    color="primary"
+    @click="trackDownload(singleDownload.format)"
+  >
+    {{ t('Télécharger') }}
+  </BrandedButton>
+
+  <Popover
+    v-else
+    ref="anchor"
+    class="relative"
+  >
+    <PopoverButton
+      :as="BrandedButton"
+      :icon="RiDownloadLine"
+      size="xs"
+      color="primary"
+      aria-haspopup="menu"
+    >
+      {{ t('Télécharger') }}
+    </PopoverButton>
+
+    <ClientOnly>
+      <Teleport to="#tooltips">
+        <PopoverPanel
+          v-slot="{ close }"
+          ref="panel"
+          class="absolute z-[800] w-72 overflow-hidden rounded border border-gray-default bg-white shadow-lg"
+          :style="floatingStyles"
+        >
+          <div
+            v-for="group in groups"
+            :key="group.title"
+          >
+            <div class="border-b border-gray-default bg-gray-some px-2 py-1.5 text-[12px] font-bold uppercase leading-tight text-gray-title">
+              {{ group.title }}
+            </div>
+            <div
+              v-for="item in group.items"
+              :key="item.url"
+              class="group/dl flex items-center border-b border-gray-default last:border-b-0 hover:bg-gray-some"
+            >
+              <a
+                :href="item.url"
+                class="matomo_download flex min-w-0 flex-1 items-center gap-2 py-2 pl-2 pr-1 text-[14px] leading-tight text-gray-title !bg-none !no-underline"
+                rel="ugc nofollow noopener"
+                download
+                @click="trackDownload(item.format); close()"
+              >
+                <span class="min-w-0 flex-1 truncate">{{ t('Format {format}', { format: item.format }) }}</span>
+                <span
+                  v-if="item.size"
+                  class="shrink-0 rounded bg-gray-lower px-1 text-[13px] tabular-nums text-gray-medium"
+                >{{ filesize(item.size) }}</span>
+              </a>
+              <CopyButton
+                :label="t('Copier le lien')"
+                :copied-label="t('Lien copié !')"
+                :text="item.url"
+                icon-only
+                class="mr-1.5 shrink-0 opacity-0 transition-opacity focus-visible:opacity-100 group-hover/dl:opacity-100"
+              />
+            </div>
+          </div>
+
+          <!-- The exports above are files; the service itself is consumed live by a GIS,
+               so its URL stays reachable next to them. -->
+          <div v-if="ogcService">
+            <div class="border-y border-gray-default bg-gray-some px-2 py-1.5 text-[12px] font-bold uppercase leading-tight text-gray-title">
+              {{ t('Service') }}
+            </div>
+            <button
+              type="button"
+              class="flex w-full items-center gap-2 px-2 py-2 text-left text-[14px] leading-tight text-gray-title hover:bg-gray-some"
+              @click="copyServiceUrl(); close()"
+            >
+              <RiFileCopyLine
+                class="size-4 shrink-0 text-gray-medium"
+                aria-hidden="true"
+              />
+              {{ t('Copier le lien du service') }}
+            </button>
+          </div>
+        </PopoverPanel>
+      </Teleport>
+    </ClientOnly>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { RiDownloadLine, RiFileCopyLine } from '@remixicon/vue'
+import { toast } from 'vue-sonner'
+import BrandedButton from '../BrandedButton.vue'
+import CopyButton from '../CopyButton.vue'
+import ClientOnly from '../ClientOnly.vue'
+import { filesize } from '../../functions/helpers'
+import { getResourceFilesize } from '../../functions/resources'
+import { trackEvent } from '../../functions/matomo'
+import { useTranslation } from '../../composables/useTranslation'
+import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+type DownloadItem = { url: string, format: string, size?: number }
+type DownloadGroup = { title: string, items: DownloadItem[] }
+
+// The one action a resource offers, whatever its kind: the two explorer headers mount
+// this so the triage lives in a single place instead of drifting between them.
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset | DatasetV2
+}>()
+
+const { t } = useTranslation()
+
+const {
+  generatedFormats,
+  wfsFormats,
+  defaultWfsProjection,
+  isResourceUrl,
+  ogcService,
+} = useResourceCapabilities(() => props.resource, () => props.dataset)
+
+const groups = computed<DownloadGroup[]>(() => {
+  const result: DownloadGroup[] = []
+
+  // An OGC endpoint is not a file: `latest` points at its GetCapabilities, which is
+  // nothing a visitor wants to download. Only its exports below are.
+  if (!ogcService.value) {
+    result.push({
+      title: t('Format original'),
+      items: [{
+        url: props.resource.latest,
+        format: props.resource.format,
+        size: getResourceFilesize(props.resource) ?? undefined,
+      }],
+    })
+  }
+
+  if (generatedFormats.value.length) {
+    result.push({
+      title: t('Formats générés automatiquement'),
+      items: generatedFormats.value.map(format => ({
+        url: format.url,
+        format: format.format,
+        size: format.size,
+      })),
+    })
+  }
+
+  if (wfsFormats.value.length) {
+    const projection = defaultWfsProjection.value
+    result.push({
+      title: projection
+        ? t('Formats exportés depuis le service WFS (projection {crs})', { crs: projection })
+        : t('Formats exportés depuis le service WFS'),
+      items: wfsFormats.value.map(format => ({
+        url: format.url,
+        format: format.format,
+      })),
+    })
+  }
+
+  return result
+})
+
+// A single downloadable format needs no menu: expose it directly for the plain button.
+// Never for an OGC service, whose menu also carries the link to the service itself.
+const singleDownload = computed<DownloadItem | null>(() => {
+  if (ogcService.value) return null
+  if (groups.value.length !== 1) return null
+  const items = groups.value[0]!.items
+  return items.length === 1 ? items[0]! : null
+})
+
+const trackDownload = (format: string) => {
+  trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${format}`)
+}
+
+const copyServiceUrl = async () => {
+  try {
+    await navigator.clipboard.writeText(props.resource.url)
+    toast.success(t('Lien copié !'))
+  }
+  catch {
+    toast.error(t('Impossible de copier dans le presse-papier'))
+  }
+}
+
+// The panel is teleported, so it is positioned against its trigger with floating-ui.
+const anchor = useTemplateRef<InstanceType<typeof Popover>>('anchor')
+const panel = useTemplateRef<InstanceType<typeof PopoverPanel>>('panel')
+const anchorEl = computed(() => anchor.value?.$el as HTMLElement | undefined)
+const panelEl = computed(() => panel.value?.$el as HTMLElement | undefined)
+const { floatingStyles } = useFloating(anchorEl, panelEl, {
+  placement: 'bottom-end',
+  middleware: [flip(), shift({ padding: 8 })],
+  whileElementsMounted: autoUpdate,
+})
+</script>