@datagouv/components-next 1.0.2-dev.53 → 1.0.2-dev.54

package/dist/{vue3-xml-viewer.common-DOIGuzsk.js → vue3-xml-viewer.common-X_gxbf2s.js}

@@ -1,4 +1,4 @@
-import { c as Ke } from "./main-7DRSPyNj.js";
+import { c as Ke } from "./main-5ZJvZtsQ.js";
 import We from "vue";
 function Fe(I, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.53",
+  "version": "1.0.2-dev.54",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/InfiniteLoader.vue

@@ -0,0 +1,53 @@
+<template>
+  <div ref="sentinel">
+    <slot>
+      <div class="flex items-center justify-center p-4">
+        <span class="inline-flex items-center gap-2 text-xs text-gray-medium">
+          <RiLoader4Line
+            class="size-4 animate-spin"
+            aria-hidden="true"
+          />
+          {{ t('Chargement…') }}
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
+import { RiLoader4Line } from '@remixicon/vue'
+import { useTranslation } from '../composables/useTranslation'
+
+const props = defineProps<{
+  root?: HTMLElement | null
+}>()
+
+const emit = defineEmits<{
+  intersect: []
+}>()
+
+const { t } = useTranslation()
+
+const sentinelRef = useTemplateRef<HTMLElement>('sentinel')
+let observer: IntersectionObserver | null = null
+
+function setupObserver() {
+  observer?.disconnect()
+  const el = sentinelRef.value
+  if (!el) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0]?.isIntersecting) {
+        emit('intersect')
+      }
+    },
+    { root: props.root ?? null, rootMargin: '200px' },
+  )
+  observer.observe(el)
+}
+
+onMounted(setupObserver)
+watch([sentinelRef, () => props.root], setupObserver)
+onUnmounted(() => observer?.disconnect())
+</script>

package/src/components/ResourceAccordion/Preview.vue

@@ -48,7 +48,7 @@
               >
                 <BrandedButton
                   color="tertiary"
-                  :icon="isSortedBy(col) && sortConfig && sortConfig.type == 'asc' ? RiArrowUpLine : RiArrowDownLine"
+                  :icon="isSortedBy(col) && sortConfig && sortConfig.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
                   icon-right
                   size="xs"
                   @click="sortByField(col)"
@@ -56,7 +56,7 @@
                   <!-- There is a weird bug with `sr-only`, I needed to add a relative parent to avoid full page x scrolling into the void…  -->
                   <span class="relative">
                     {{ col }}
-                    <span class="sr-only">{{ sortConfig && sortConfig.type == 'desc' ? t("Trier par ordre croissant") : t("Trier par ordre décroissant") }}</span>
+                    <span class="sr-only">{{ sortConfig && sortConfig.direction === 'desc' ? t("Trier par ordre croissant") : t("Trier par ordre décroissant") }}</span>
                   </span>
                 </BrandedButton>
               </th>
@@ -122,7 +122,7 @@ const rows = ref<Array<Record<string, unknown>>>([])
 const columns = ref<Array<string>>([])
 const loading = ref(true)
 const hasError = ref(false)
-const sortConfig = ref<SortConfig>(null)
+const sortConfig = ref<SortConfig | null>(null)
 const rowCount = ref(0)
 const config = useComponentsConfig()
 const pageSize = computed(() => config.tabularApiPageSize || 15)
@@ -138,7 +138,7 @@ function isSortedBy(col: string) {
 /**
  * Retrieve preview necessary infos
  */
-async function getTableInfos(page: number, sortConfig?: SortConfig) {
+async function getTableInfos(page: number, sortConfig?: SortConfig | null) {
   try {
     // Check that this function return wanted data
     const response = await getData(config, props.resource.id, page, sortConfig)
@@ -172,24 +172,24 @@ function changePage(page: number) {
  * Sort by a specific column
  */
 function sortByField(col: string) {
-  if (sortConfig.value && sortConfig.value.column == col) {
-    if (sortConfig.value.type == 'asc') {
-      sortConfig.value.type = 'desc'
+  if (sortConfig.value && sortConfig.value.column === col) {
+    if (sortConfig.value.direction === 'asc') {
+      sortConfig.value.direction = 'desc'
     }
     else {
-      sortConfig.value.type = 'asc'
+      sortConfig.value.direction = 'asc'
     }
   }
   else {
     if (!sortConfig.value) {
       sortConfig.value = {
         column: col,
-        type: 'asc',
+        direction: 'asc',
       }
     }
     else {
       sortConfig.value.column = col
-      sortConfig.value.type = 'asc'
+      sortConfig.value.direction = 'asc'
     }
   }
   currentPage.value = 1

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -56,7 +56,7 @@
             :resource
           />
           <RiSubtractLine
-            v-if="resource.schema"
+            v-if="resource.schema?.name || resource.schema?.url"
             aria-hidden="true"
             class="size-3 fill-gray-medium"
           />

package/src/components/ResourceExplorer/ResourceExplorer.vue

@@ -2,6 +2,19 @@
   <div v-if="allResources.length || hasAnyResources">
     <div class="flex gap-6">
       <div class="flex-1 min-w-0">
+        <div
+          v-if="dataset.resources.total > 1"
+          class="md:hidden flex justify-end mb-3"
+        >
+          <BrandedButton
+            size="xs"
+            color="secondary"
+            :icon="RiListUnordered"
+            @click="mobileSidebarOpen = true"
+          >
+            {{ t('Ressources ({count})', { count: dataset.resources.total }) }}
+          </BrandedButton>
+        </div>
         <ResourceExplorerViewer
           v-if="selectedResource && allResources.length"
           :key="selectedResource.id"
@@ -30,17 +43,38 @@
           </BrandedButton>
         </div>
       </div>
+      <div class="hidden md:block">
+        <ResourceExplorerSidebar
+          :resources="allResources"
+          :selected-resource-id="selectedResource?.id ?? null"
+          :collapsed="sidebarCollapsed"
+          :search
+          @select="selectResource"
+          @load-more="loadMore"
+          @update:collapsed="sidebarCollapsed = $event"
+          @update:search="updateSearch($event)"
+        />
+      </div>
+    </div>
+
+    <!-- Mobile sidebar panel -->
+    <dialog
+      ref="mobileSidebarDialog"
+      class="mobile-sidebar md:hidden fixed inset-0 m-0 ml-auto p-0 h-dvh max-h-dvh w-80 max-w-[85vw] bg-white shadow-lg overflow-y-auto overscroll-contain backdrop:bg-black/30"
+      @close="mobileSidebarOpen = false"
+      @click.self="closeMobileSidebar"
+    >
       <ResourceExplorerSidebar
         :resources="allResources"
         :selected-resource-id="selectedResource?.id ?? null"
-        :collapsed="sidebarCollapsed"
+        :collapsed="false"
         :search
         @select="selectResource"
         @load-more="loadMore"
-        @update:collapsed="sidebarCollapsed = $event"
+        @update:collapsed="closeMobileSidebar"
         @update:search="updateSearch($event)"
       />
-    </div>
+    </dialog>
   </div>
   <div
     v-else
@@ -73,6 +107,7 @@ import type { DatasetV2 } from '../../types/datasets'
 import type { Resource, ResourceGroup, ResourceType } from '../../types/resources'
 import ResourceExplorerSidebar from './ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './ResourceExplorerViewer.vue'
+import { RiListUnordered } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 
 const props = withDefaults(defineProps<{
@@ -211,6 +246,21 @@ const flatResources = computed(() =>
 
 // Fetch resource by ID if specified in URL (for SSR)
 const initialResourceId = resourceIdQuery.value
+const mobileSidebarOpen = ref(false)
+const mobileSidebarDialog = ref<HTMLDialogElement | null>(null)
+
+watch(mobileSidebarOpen, (open) => {
+  if (open) {
+    mobileSidebarDialog.value?.showModal()
+  }
+  else {
+    mobileSidebarDialog.value?.close()
+  }
+})
+
+function closeMobileSidebar() {
+  mobileSidebarOpen.value = false
+}
 const { data: fetchedResource } = initialResourceId
   ? await useFetch<Resource>(`/api/1/datasets/${props.dataset.id}/resources/${initialResourceId}/`)
   : { data: ref(null) }
@@ -238,6 +288,7 @@ function updateSearch(newSearch: string) {
 
 const selectResource = (resource: Resource) => {
   selectedResource.value = resource
+  mobileSidebarOpen.value = false
   router.replace({
     query: { ...router.currentRoute.value.query, resource_id: resource.id },
   })
@@ -252,3 +303,9 @@ watch(flatResources, () => {
   }
 })
 </script>
+
+<style>
+html:has(dialog.mobile-sidebar[open]) {
+  overflow: hidden;
+}
+</style>

package/src/components/ResourceExplorer/ResourceExplorerSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <aside
     v-if="!collapsed"
-    class="w-72 shrink-0 pl-4"
+    class="w-full md:w-72 shrink-0 p-4 md:pr-0"
   >
     <div class="flex items-center justify-between mb-3">
       <h3 class="text-sm font-bold uppercase mb-0">
@@ -32,7 +32,7 @@
       >
     </div>
 
-    <div class="space-y-4 overflow-y-auto">
+    <div class="space-y-4 overflow-y-auto md:max-h-[calc(100vh-14rem)]">
       <div
         v-for="group in resources"
         :key="group.type"

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -6,7 +6,7 @@
           <h3 class="m-0 flex items-baseline text-base font-bold leading-tight">
             <ResourceIcon
               :resource
-              class="size-3.5 mr-1"
+              class="size-3.5 mr-1 shrink-0 translate-y-px"
             />
             <span class="line-clamp-2">{{ resource.title || t('Fichier sans nom') }}</span>
           </h3>
@@ -14,12 +14,13 @@
             :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">
+        <div class="text-gray-medium text-xs flex items-center gap-1 flex-wrap">
           <SchemaBadge :resource />
           <RiSubtractLine
-            v-if="resource.schema"
+            v-if="resource.schema?.name || resource.schema?.url"
             aria-hidden="true"
             class="size-3 fill-gray-medium"
           />

package/src/components/Search/GlobalSearch.vue

@@ -42,11 +42,15 @@
           </Sidemenu>
         </div>
 
-        <div v-if="activeFilters.length > 0">
+        <div v-if="activeFilters.length > 0 || $slots['custom-filters-top'] || $slots['custom-filters-bottom']">
           <Sidemenu :button-text="t('Filtres')">
             <template #title>
               {{ t('Filtres') }}
             </template>
+            <slot
+              name="custom-filters-top"
+              :current-type="currentType"
+            />
             <BasicAndAdvancedFilters
               v-slot="{ isEnabled, getOrder }"
               :basic-filters="activeBasicFilters"
@@ -146,6 +150,10 @@
                 :get-order="getOrder"
               />
             </BasicAndAdvancedFilters>
+            <slot
+              name="custom-filters-bottom"
+              :current-type="currentType"
+            />
             <div
               v-if="hasFilters"
               class="mt-6 text-center"
@@ -340,12 +348,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, useTemplateRef, type Ref } from 'vue'
+import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, type Ref } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
 import { RiBookShelfLine, RiBuilding2Line, RiCloseCircleLine, RiDatabase2Line, RiLightbulbLine, RiLineChartLine, RiRssLine, RiTerminalLine } from '@remixicon/vue'
 import magnifyingGlassSrc from '../../../assets/illustrations/magnifying_glass.svg?url'
 import { useTranslation } from '../../composables/useTranslation'
 import { useDebouncedRef } from '../../composables/useDebouncedRef'
+import { forEachActiveCustomFilter, isCustomFilterActive, searchFilterContextKey, type CustomFilterEntry } from '../../composables/useSearchFilter'
 import { useStableQueryParams } from '../../composables/useStableQueryParams'
 import { useComponentsConfig } from '../../config'
 import { useFetch } from '../../functions/api'
@@ -399,6 +408,13 @@ if (!currentType.value) currentType.value = props.config[0]?.class ?? 'datasets'
 const { t } = useTranslation()
 const componentsConfig = useComponentsConfig()
 
+// Custom filter registry for useSearchFilter composable
+const customFilterRegistry = shallowReactive(new Map<string, CustomFilterEntry>())
+// Per-filter watch stoppers: each registered filter gets its own watcher so a
+// value change resets page to 1, but registration itself does not (the value
+// came from the URL, not from a user action).
+const customFilterStops = new Map<string, () => void>()
+
 // Initial type is used to determine which fetch should be SSR (non-lazy)
 const initialType = currentType.value
 
@@ -439,7 +455,8 @@ const activeFilters = computed(() => [
   ...(currentTypeConfig.value?.advancedFilters ?? []),
 ] as string[])
 
-const showSidebar = computed(() => props.config.length > 1 || activeFilters.value.length > 0)
+const slots = useSlots()
+const showSidebar = computed(() => props.config.length > 1 || activeFilters.value.length > 0 || !!slots['custom-filters-top'] || !!slots['custom-filters-bottom'])
 
 // URL query params
 const q = useRouteQuery<string>('q', '')
@@ -447,6 +464,18 @@ const { debounced: qDebounced, flush: flushQ } = useDebouncedRef(q, componentsCo
 const page = useRouteQuery('page', 1, { transform: Number })
 const sort = useRouteQuery<string | undefined>('sort')
 
+provide(searchFilterContextKey, {
+  register(urlParam, entry) {
+    customFilterRegistry.set(urlParam, entry)
+    customFilterStops.set(urlParam, watch(entry.ref, () => page.value = 1))
+  },
+  unregister(urlParam) {
+    customFilterStops.get(urlParam)?.()
+    customFilterStops.delete(urlParam)
+    customFilterRegistry.delete(urlParam)
+  },
+})
+
 // Filter values
 const organizationId = useRouteQuery<string | undefined>('organization')
 const organizationType = useRouteQuery<string | undefined>('organization_badge')
@@ -513,6 +542,7 @@ const topicsEnabled = computed(() => props.config.some(c => c.class === 'topics'
 // Create stable params for each type
 const stableParamsOptions = {
   allFilters,
+  customFilterRegistry,
   q: qDebounced,
   sort,
   page,
@@ -547,7 +577,10 @@ const reusesUrl = computed(() => reusesEnabled.value ? '/api/2/reuses/search/' :
 const organizationsUrl = computed(() => organizationsEnabled.value ? '/api/2/organizations/search/' : null)
 const topicsUrl = computed(() => topicsEnabled.value ? '/api/2/topics/search/' : null)
 
-// Reset page on filter/sort change
+// Reset page on filter/sort change. Custom filters (registered via
+// useSearchFilter) have their own watchers set up in `provide`, so they're
+// intentionally excluded here to avoid resetting the page when a filter
+// registers with its URL-derived value.
 const filtersForReset = computed(() => ({
   q: qDebounced.value,
   organization: organizationId.value,
@@ -587,6 +620,7 @@ const hasFilters = computed(() => {
     || lastUpdateRange.value
     || producerType.value
     || reuseType.value
+    || Array.from(customFilterRegistry.values()).some(isCustomFilterActive)
 })
 
 const showForumLink = computed(() => (currentType.value === 'datasets' || currentType.value === 'dataservices') && !!componentsConfig.forumUrl)
@@ -607,6 +641,9 @@ function resetFilters() {
   lastUpdateRange.value = undefined
   producerType.value = undefined
   reuseType.value = undefined
+  for (const entry of customFilterRegistry.values()) {
+    entry.ref.value = entry.defaultValue
+  }
   q.value = ''
   flushQ()
 }
@@ -702,6 +739,10 @@ const rssUrl = computed(() => {
   if (badge.value) params.set('badge', badge.value)
   if (topic.value) params.set('topic', topic.value)
 
+  forEachActiveCustomFilter(customFilterRegistry, (apiParam, value) => {
+    params.set(apiParam, value)
+  })
+
   // Add sort if set
   if (sort.value) params.set('sort', sort.value)
 

package/src/components/TabularExplorer/TabularCell.vue

@@ -0,0 +1,51 @@
+<template>
+  <span
+    v-if="value == null || value === ''"
+    class="font-[Inconsolata,monospace] text-gray-low italic"
+    :class="compact ? 'text-xs' : 'text-sm'"
+  >null</span>
+  <span
+    v-else-if="columnType === 'boolean'"
+    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs"
+    :class="isTruthy(value) ? 'bg-new-success-light text-new-success' : 'bg-new-warning-light text-new-error'"
+  >
+    <span
+      class="size-2 rounded-full"
+      :class="isTruthy(value) ? 'bg-new-success' : 'bg-new-error'"
+    />
+    {{ isTruthy(value) ? t('Vrai') : t('Faux') }}
+  </span>
+  <span
+    v-else-if="columnType === 'categorical'"
+    class="inline-block rounded font-medium px-2 py-0.5 text-xs max-w-full truncate"
+    :style="categoryBadgeStyle ? { backgroundColor: categoryBadgeStyle.backgroundColor, color: categoryBadgeStyle.color } : undefined"
+  >{{ value }}</span>
+  <span
+    v-else-if="columnType === 'number'"
+    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+  >{{ formatNumber(value) }}</span>
+  <span
+    v-else-if="columnType === 'date'"
+    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+  >{{ formatCellDate(value) }}</span>
+  <span
+    v-else
+    class="text-gray-title truncate block text-xs"
+  >{{ typeof value === 'object' ? JSON.stringify(value) : value }}</span>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useFormatTabular, isTruthy } from '../../functions/tabular'
+import type { ColumnType, BadgeStyle } from './types'
+
+defineProps<{
+  value: unknown
+  columnType: ColumnType
+  categoryBadgeStyle?: BadgeStyle
+  compact?: boolean
+}>()
+
+const { t } = useTranslation()
+const { formatNumber, formatCellDate } = useFormatTabular()
+</script>

package/src/components/TabularExplorer/TabularCellPopover.vue

@@ -0,0 +1,170 @@
+<template>
+  <ClientOnly>
+    <Teleport to="#tooltips">
+      <div
+        v-if="cell"
+        ref="panel"
+        class="bg-white border border-black/10 rounded-lg shadow-md w-80 absolute z-[800]"
+        :style="floatingStyles"
+      >
+        <!-- Value -->
+        <div class="px-3 pt-3 pb-2 border-b border-gray-default">
+          <p class="text-[10px] text-gray-plain mb-0">
+            {{ t('Valeur brute') }}
+          </p>
+          <p class="text-xs text-gray-title mb-0">
+            {{ displayValue }}
+          </p>
+        </div>
+
+        <!-- Type -->
+        <div class="flex items-center gap-2 px-3 py-2 border-b border-gray-default">
+          <span class="text-[10px] text-gray-plain">{{ t('Type') }}</span>
+          <span class="inline-flex items-center gap-1 bg-gray-some rounded px-1.5 py-0.5 text-xs text-gray-plain">
+            <component
+              :is="typeIcon"
+              class="size-3"
+              aria-hidden="true"
+            />
+            {{ typeLabel }}
+          </span>
+          <span class="text-[10px] text-gray-plain shrink-0">·</span>
+          <span class="text-[10px] text-gray-plain truncate min-w-0">{{ cell.column }}</span>
+        </div>
+
+        <!-- Actions -->
+        <div class="p-1">
+          <button
+            class="flex items-center gap-2.5 w-full px-3 py-2 rounded-md text-xs font-medium hover:bg-gray-50"
+            @click="filterByValue"
+          >
+            <RiFilter2Line
+              class="size-4"
+              aria-hidden="true"
+            />
+            {{ t('Filtrer par cette valeur') }}
+          </button>
+          <button
+            class="flex items-center gap-2.5 w-full px-3 py-2 rounded-md text-xs font-medium hover:bg-gray-50"
+            @click="copyValue"
+          >
+            <RiCheckLine
+              v-if="copied"
+              class="size-4 text-green-500"
+              aria-hidden="true"
+            />
+            <RiFileCopyLine
+              v-else
+              class="size-4 text-gray-plain"
+              aria-hidden="true"
+            />
+            {{ copied ? t('Copié !') : t('Copier la valeur') }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+import {
+  RiFilter2Line,
+  RiFileCopyLine,
+  RiCheckLine,
+} from '@remixicon/vue'
+import { toast } from 'vue-sonner'
+import { useTranslation } from '../../composables/useTranslation'
+import { buildTypeConfig } from '../../functions/tabular'
+import ClientOnly from '../ClientOnly.vue'
+import type { ColumnType, ColumnFilters } from './types'
+
+export interface CellInfo {
+  column: string
+  columnType: ColumnType
+  value: unknown
+  element: HTMLElement
+}
+
+const cell = defineModel<CellInfo | null>('cell', { default: null })
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+
+const panelRef = useTemplateRef<HTMLElement>('panel')
+const anchorRef = ref<HTMLElement | null>(null)
+
+watch(cell, (c) => {
+  anchorRef.value = c?.element ?? null
+})
+
+const { floatingStyles } = useFloating(anchorRef, panelRef, {
+  placement: 'bottom-start',
+  middleware: [flip(), shift()],
+  whileElementsMounted: autoUpdate,
+})
+
+const displayValue = computed(() => {
+  if (!cell.value) return ''
+  const v = cell.value.value
+  if (v == null || v === '') return '–'
+  if (typeof v === 'object') return JSON.stringify(v)
+  return String(v)
+})
+
+const typeConfig = buildTypeConfig(t)
+
+const typeIcon = computed(() => cell.value ? typeConfig[cell.value.columnType].icon : typeConfig.text.icon)
+const typeLabel = computed(() => cell.value ? typeConfig[cell.value.columnType].label : '')
+
+function close() {
+  cell.value = null
+}
+
+function filterByValue() {
+  if (!cell.value) return
+  const val = String(cell.value.value ?? '')
+  const col = cell.value.column
+  const existing = filters.value[col] ?? {}
+  if (cell.value.columnType === 'categorical' || cell.value.columnType === 'text' || cell.value.columnType === 'date') {
+    const current = existing.in ?? []
+    if (!current.includes(val)) {
+      filters.value = { ...filters.value, [col]: { ...existing, in: [...current, val] } }
+    }
+  }
+  else if (cell.value.columnType === 'number') {
+    const num = Number(cell.value.value)
+    if (Number.isFinite(num)) {
+      filters.value = { ...filters.value, [col]: { ...existing, min: num, max: num } }
+    }
+  }
+  else if (cell.value.columnType === 'boolean') {
+    filters.value = { ...filters.value, [col]: { ...existing, exact: val } }
+  }
+  close()
+}
+
+const copied = ref(false)
+
+async function copyValue() {
+  try {
+    await navigator.clipboard.writeText(displayValue.value)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 1500)
+  }
+  catch {
+    toast.error(t('Impossible de copier dans le presse-papier'))
+  }
+}
+
+onClickOutside(panelRef, (e) => {
+  if (!cell.value) return
+  const clickedCell = (e.target as HTMLElement).closest('[data-cell]')
+  if (clickedCell && clickedCell === cell.value.element) return
+  close()
+})
+</script>