@datagouv/components-next 1.3.0 → 1.4.0

package/src/components/ResourceListItem.vue

@@ -0,0 +1,168 @@
+<template>
+  <AppLink
+    ref="row"
+    v-bind="$attrs"
+    :to
+    :replace
+    :class="selected ? '[&&]:!bg-gray-200' : '[&&]:hover:!bg-gray-100'"
+    class="grid h-7 w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1 rounded px-1 py-1 text-left !bg-none !no-underline"
+    @pointerenter="openOnHover"
+    @pointerleave="closeTooltip"
+    @focus="show = true"
+    @blur="closeTooltip"
+  >
+    <span
+      :class="[iconColor, '[&_svg]:fill-current']"
+      class="flex size-5 shrink-0 items-center justify-center rounded-[1px]"
+    >
+      <component
+        :is="iconComponent"
+        class="size-4"
+        aria-hidden="true"
+      />
+    </span>
+    <div class="flex min-w-0 items-baseline gap-0.5 whitespace-nowrap leading-4">
+      <span
+        class="truncate text-[13px]"
+        :class="selected ? 'font-extrabold text-gray-title' : 'font-medium text-gray-medium'"
+      >{{ resource.title || t('Fichier sans nom') }}</span>
+      <template v-if="humanFilesize">
+        <span class="shrink-0 text-[13px] text-gray-medium">·</span>
+        <span class="shrink-0 text-[12px] text-gray-medium">{{ humanFilesize }}</span>
+      </template>
+    </div>
+    <!-- Capped and truncated: an `auto` grid track floors at its content width, so an
+         unusually long format (`www:link-1.0-http--samples`) would otherwise squeeze
+         the title track to nothing and overflow the fixed-height row. -->
+    <span
+      v-if="resource.format"
+      class="max-w-24 truncate rounded bg-gray-lower px-1.5 py-0.5 text-[12px] uppercase leading-4 text-gray-medium"
+      :title="resource.format"
+    >{{ resource.format }}</span>
+  </AppLink>
+
+  <!-- Hover card: the row truncates the title, so surface the full name plus the
+       same metadata line as the viewer header. Placed beside the row (not below) so
+       it doesn't hide the sibling rows we're scanning.
+       ClientOnly: Vue hydrates a teleport by scanning the target from its first child,
+       so an SSR-rendered teleport to `body` breaks as soon as anything else is prepended
+       there — and Nuxt emits the `bodyOpen` head tags before it. The card only ever opens
+       on hover, so there is nothing to render on the server anyway. -->
+  <ClientOnly>
+    <Teleport to="body">
+      <div
+        v-if="show"
+        ref="card"
+        role="tooltip"
+        class="pointer-events-none z-[80] w-max rounded border border-gray-default bg-white p-2 text-left shadow-[0_2px_4px_rgba(0,0,0,0.04),2px_4px_16px_rgba(0,0,0,0.12)]"
+        :style="floatingStyles"
+      >
+        <span class="block whitespace-nowrap text-[13px] font-medium leading-5 text-gray-title">{{ resource.title || t('Fichier sans nom') }}</span>
+        <div class="mt-1 flex items-center gap-1 text-[12px] leading-4 text-gray-medium">
+          <TranslationT keypath="mis à jour {date}">
+            <template #date>
+              <FormattedDate
+                :date="resource.last_modified"
+                format="relative"
+              />
+            </template>
+          </TranslationT>
+          <template v-if="humanFilesize">
+            <span>·</span>
+            <span>{{ humanFilesize }}</span>
+          </template>
+          <template v-if="resource.format">
+            <span>·</span>
+            <span class="rounded bg-gray-lower px-1.5 py-0.5 uppercase leading-4">{{ resource.format }}</span>
+          </template>
+          <span>·</span>
+          <span class="inline-flex items-center gap-0.5">
+            <RiDownloadLine
+              class="size-3"
+              aria-hidden="true"
+            />
+            {{ summarize(resource.metrics.views) }}
+          </span>
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { useEventListener } from '@vueuse/core'
+import type { RouteLocationRaw } from 'vue-router'
+import { RiDownloadLine } from '@remixicon/vue'
+import AppLink from './AppLink.vue'
+import ClientOnly from './ClientOnly.vue'
+import File from './Icons/File.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
+import { getResourceFormatIcon, getResourceIconColor, getResourceFilesize } from '../functions/resources'
+import { filesize, summarize } from '../functions/helpers'
+import { useTranslation } from '../composables/useTranslation'
+import type { Resource } from '../types/resources'
+
+// The hover card below is a second root node, so Vue drops fallthrough attributes
+// unless we place them ourselves: without this, a listener bound by the parent
+// (the selector's `@click="close()"`) would silently never fire.
+defineOptions({ inheritAttrs: false })
+
+// Shared row for a single resource (sidebar + resource selector). Renders as a
+// navigation link so switching resource is a real link — the URL is the source of
+// truth for the selection.
+const props = withDefaults(defineProps<{
+  resource: Resource
+  to: RouteLocationRaw
+  selected?: boolean
+  replace?: boolean
+}>(), {
+  selected: false,
+  replace: false,
+})
+
+const { t } = useTranslation()
+
+// Render the icon directly (not via ResourceIcon which forces a gray color) so the
+// colored badge can tint it through currentColor + [&_svg]:fill-current.
+const iconComponent = computed(() => (props.resource.format ? getResourceFormatIcon(props.resource.format) : null) ?? File)
+const iconColor = computed(() => getResourceIconColor(props.resource.format))
+
+const humanFilesize = computed(() => {
+  const size = getResourceFilesize(props.resource)
+  return size ? filesize(size) : null
+})
+
+// Hover card teleported to <body> so the sidebar's `overflow` doesn't clip it, hence
+// the fixed strategy. `shift` keeps it inside the viewport for a row near an edge, and
+// `autoUpdate` follows the row when its scrollable container moves under the pointer.
+const show = ref(false)
+const row = useTemplateRef<InstanceType<typeof AppLink>>('row')
+const card = useTemplateRef<HTMLElement>('card')
+const rowEl = computed(() => row.value?.$el as HTMLElement | undefined)
+const { floatingStyles } = useFloating(rowEl, card, {
+  placement: 'right-start',
+  strategy: 'fixed',
+  middleware: [offset(16), flip(), shift({ padding: 8 })],
+  whileElementsMounted: autoUpdate,
+})
+
+// A tap fires a pointer enter too, so the card would flash on every touch selection
+// in the mobile resource picker. Only a real pointer opens it — keyboard focus still
+// does, through @focus.
+function openOnHover(event: PointerEvent) {
+  if (event.pointerType === 'mouse') show.value = true
+}
+
+function closeTooltip() {
+  show.value = false
+}
+
+// A hover-shown card gets no `mouseleave` when the window loses focus (alt-tab) or
+// the pointer leaves the document, so it would linger on return — close it in those
+// cases too.
+useEventListener(window, 'blur', closeTooltip)
+useEventListener(document, 'mouseleave', closeTooltip)
+</script>

package/src/components/ReuseCard.vue

@@ -21,7 +21,18 @@
               :organization-url="organizationUrl"
             />
             <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
-            <span class="block flex-none">{{ t('publié {date}', { date: formatRelativeIfRecentDate(reuse.created_at, { dateStyle: 'medium' }) }) }}</span>
+            <TranslationT
+              class="block flex-none"
+              keypath="publié {date}"
+            >
+              <template #date>
+                <FormattedDate
+                  :date="reuse.created_at"
+                  format="relative"
+                  :options="{ dateStyle: 'medium' }"
+                />
+              </template>
+            </TranslationT>
           </div>
           <ReuseDetails :reuse />
         </div>
@@ -67,17 +78,18 @@
 import { RiLockLine, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { useFormatDate } from '../functions/dates'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import type { TitleTag } from '../types/ui'
 import { useTranslation } from '../composables/useTranslation'
 import AppLink from './AppLink.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 const props = withDefaults(defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
 
   /**
   * The reuseUrl is a route location object to allow Vue Router to navigate to the details of a reuse.
@@ -88,8 +100,9 @@ const props = withDefaults(defineProps<{
   /**
   * The organizationUrl is an optional route location object to allow Vue Router to navigate to the details of the organization linked to tha reuse.
   * It is used as a separate prop to allow other sites using the package to define their own organization pages.
+  * Pass null instead of a route to render the organization name as plain, non-linked text.
   */
-  organizationUrl?: RouteLocationRaw
+  organizationUrl?: RouteLocationRaw | null
 
   titleTag?: TitleTag
 }>(), {
@@ -97,7 +110,6 @@ const props = withDefaults(defineProps<{
 })
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 
 const reuseUrl = computed(() => props.reuseUrl || props.reuse.page)
 </script>

package/src/components/ReuseDetails.vue

@@ -32,11 +32,11 @@
 import { RiEyeLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import { useReuseType } from '../composables/useReuseType'
 import { summarize } from '../functions/helpers'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import { useTranslation } from '../composables/useTranslation'
 
 const props = defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
 }>()
 
 const { t } = useTranslation()

package/src/components/ReuseHorizontalCard.vue

@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { RiArchiveLine, RiLineChartLine, RiLockLine } from '@remixicon/vue'
 import type { RouteLocationRaw } from 'vue-router'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import { useTranslation } from '../composables/useTranslation'
 import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
@@ -71,9 +71,10 @@ import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
 import ObjectCardBadge from './ObjectCardBadge.vue'
 
 defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
   reuseUrl?: RouteLocationRaw
-  organizationUrl?: RouteLocationRaw
+  // undefined falls back to the organization's data.gouv.fr page; pass null to render plain, non-linked text
+  organizationUrl?: RouteLocationRaw | null
 }>()
 
 const { t } = useTranslation()

package/src/components/SchemaCard.vue

@@ -1,8 +1,14 @@
 <template>
   <div
+    :id
     class="p-4 relative border bg-white hover:bg-gray-some"
-    :class="{ 'border-gray-default': !selected, 'border-datagouv': selected }"
+    :class="{
+      'border-gray-default': !selected && !active,
+      'border-datagouv': selected && !active,
+      'border-blue-outline': active,
+    }"
     :role="selectable ? 'option' : undefined"
+    :tabindex="selectable ? -1 : undefined"
     :aria-selected="selectable && selected"
   >
     <h3 class="text-base font-bold mb-0 flex items-center gap-1">
@@ -73,7 +79,10 @@ import { useComponentsConfig } from '../config'
 
 defineProps<{
   schema: RegisteredSchema
+  id?: string
   selectable?: boolean
+  // Highlighted by the keyboard inside the listbox, which is not the same as chosen
+  active?: boolean
   selected?: boolean
   showLinks?: boolean
 }>()

package/src/components/Search/Filter/AccessTypeFilter.vue

@@ -31,7 +31,7 @@ const { t } = useTranslation()
 
 const options = [
   { value: 'open', label: t('Téléchargement libre') },
-  { value: 'open_with_account', label: t('Ouvert sous condition') },
-  { value: 'restricted', label: t('Accessible sous habilitation') },
+  { value: 'open_with_account', label: t('Ouvert avec un compte') },
+  { value: 'restricted', label: t('Accès restreint') },
 ]
 </script>

package/src/components/Search/GlobalSearch.vue

@@ -6,7 +6,6 @@
   >
     <div
       v-if="!hideSearchInput"
-      ref="search"
       class="flex flex-wrap items-center justify-between"
       data-cy="search"
     >
@@ -228,6 +227,7 @@
               size="sm"
               :icon="RiRssLine"
               icon-only
+              external
               target="_blank"
             />
           </div>
@@ -266,7 +266,7 @@
                       name="reuse"
                       :reuse="result"
                     >
-                      <ReuseHorizontalCard :reuse="(result as Reuse)" />
+                      <ReuseHorizontalCard :reuse="(result as ReuseV2)" />
                     </slot>
                   </template>
                   <template v-else-if="currentTypeConfig?.class === 'organizations'">
@@ -356,6 +356,7 @@
 <script setup lang="ts">
 import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, type Component, type Ref } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
+import { useRoute } from 'vue-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'
@@ -364,11 +365,12 @@ import { configKey, forEachActiveCustomFilter, isCustomFilterActive, searchFilte
 import { useStableQueryParams } from '../../composables/useStableQueryParams'
 import { useComponentsConfig } from '../../config'
 import { useFetch } from '../../functions/api'
+import { scrollToBlockTop } from '../../functions/scroll'
 import type { AsyncDataRequestStatus } from '../../functions/api.types'
 import type { Dataset } from '../../types/datasets'
 import type { Dataservice } from '../../types/dataservices'
 import type { Organization } from '../../types/organizations'
-import type { Reuse } from '../../types/reuses'
+import type { ReuseV2 } from '../../types/reuses'
 import type { TopicV2 } from '../../types/topics'
 import type { GlobalSearchConfig, SearchResponseByClass, SearchType, SortOption, FacetItem } from '../../types/search'
 import { getDefaultGlobalSearchConfig } from '../../types/search'
@@ -422,6 +424,7 @@ if (!currentType.value) currentType.value = configKey(props.config[0] ?? { class
 
 const { t } = useTranslation()
 const componentsConfig = useComponentsConfig()
+const route = useRoute()
 
 // Custom filter registry for useSearchFilter composable
 const customFilterRegistry = shallowReactive(new Map<string, CustomFilterEntry>())
@@ -796,14 +799,15 @@ function getFacets(key: string): FacetItem[] | undefined {
 }
 
 // Scroll handling
-const searchRef = useTemplateRef('search')
+const resultsRef = useTemplateRef('results')
 
-function scrollToTop() {
-  searchRef.value?.scrollIntoView({ behavior: 'smooth' })
-}
+// Every criteria lives in the URL, custom filters included, so watching the
+// query covers them all: whenever the result list is replaced, bring its top
+// back into view rather than leaving the reader in the middle of a list they
+// have not seen yet.
+watch(() => route.query, () => scrollToBlockTop(resultsRef.value))
 
 function changePage(newPage: number) {
   page.value = newPage
-  scrollToTop()
 }
 </script>

package/src/components/Search/SearchInput.vue

@@ -12,7 +12,7 @@
       v-model="q"
       type="search"
       name="q"
-      class="input max-h-12 m-0 rounded-tl shadow-input-blue"
+      class="input flex-1 max-h-12 m-0 rounded-tl shadow-input-blue"
       :aria-label="placeholder === null ? t('Rechercher...') : placeholder ?? t('Rechercher...')"
       :placeholder="placeholder === null ? undefined : placeholder ?? t('Rechercher...')"
     >

package/src/components/Search/Sidemenu.vue

@@ -11,7 +11,10 @@
         :class="{ 'rotate-180': open }"
       />
     </button>
-    <div v-if="open || !isMobile">
+    <!-- Collapsing with CSS rather than `v-if` on a JS media query: the server has no
+         viewport, so it always renders the desktop state and a narrow client would drop
+         the whole panel during hydration. -->
+    <div :class="{ 'hidden md:block': !open }">
       <p
         :id="titleId"
         class="text-sm font-bold leading-tight mb-6 hidden md:block"
@@ -26,13 +29,11 @@
 <script setup lang="ts">
 import { ref, useId } from 'vue'
 import { RiArrowDownSLine } from '@remixicon/vue'
-import { useMediaQuery } from '@vueuse/core'
 
 defineProps<{
   buttonText: string
 }>()
 
 const titleId = useId()
-const isMobile = useMediaQuery('(max-width: 767px)')
 const open = ref(false)
 </script>

package/src/components/SmallChart.vue

@@ -11,10 +11,16 @@
       class="flex flex-wrap justify-between"
     >
       <p class="text-[0.625rem] m-0 text-gray-medium">
-        {{ startDate }}
+        <FormattedDate
+          :date="startDate"
+          :options="{ dateStyle: undefined, year: '2-digit', month: '2-digit' }"
+        />
       </p>
       <p class="text-[0.625rem] m-0 text-gray-medium">
-        {{ endDate }}
+        <FormattedDate
+          :date="endDate"
+          :options="{ dateStyle: undefined, year: '2-digit', month: '2-digit' }"
+        />
       </p>
     </div>
   </div>
@@ -24,6 +30,7 @@
 import type { ChartOptions, ScriptableLineSegmentContext } from 'chart.js'
 import Chart from 'chart.js/auto'
 import { computed, onMounted, ref, useTemplateRef, watchEffect } from 'vue'
+import FormattedDate from './FormattedDate.vue'
 
 const LIGHT_COLOR = '#B6CFFB'
 const COLOR = '#3558A2'
@@ -107,14 +114,8 @@ const additionalDatasetConfig = computed<{
   return {}
 })
 
-const getMonthYear = (dateAsString: string): string => {
-  const date = new Date(dateAsString)
-
-  return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear().toString().slice(-2)}`
-}
-
-const startDate = computed(() => months.value.length ? getMonthYear(months.value[0]!) : null)
-const endDate = computed(() => months.value.length ? getMonthYear(months.value[months.value.length - 1]!) : null)
+const startDate = computed(() => months.value[0] ?? null)
+const endDate = computed(() => months.value[months.value.length - 1] ?? null)
 
 const OPTIONS = {
   // @ts-expect-error animation can be `true` but the typing is not expecting it

package/src/components/StatBox.vue

@@ -65,14 +65,20 @@
         class="mt-1 mb-0 text-xs"
       >
         {{ t("depuis ") }}
-        {{ formatDate(since, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
+        <FormattedDate
+          :date="since"
+          :options="{ dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }"
+        />
       </p>
       <p class="mt-1 mb-0 text-xs text-success-darkest">
         <strong>
           + {{ summarize(lastValue, 2) }}
         </strong>
         {{ t(" en ") }}
-        {{ formatDate(lastMonth, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
+        <FormattedDate
+          :date="lastMonth"
+          :options="{ dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }"
+        />
       </p>
     </template>
   </div>
@@ -146,7 +152,10 @@
         + {{ summarize(lastValue, 2) }}
       </strong>
       {{ t(" en ") }}
-      {{ formatDate(lastMonth, { dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }) }}
+      <FormattedDate
+        :date="lastMonth"
+        :options="{ dateStyle: undefined, year: 'numeric', month: 'short', day: undefined }"
+      />
     </p>
   </div>
 </template>
@@ -154,7 +163,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { ContentLoader } from 'vue-content-loader'
-import { useFormatDate } from '../functions/dates'
+import FormattedDate from './FormattedDate.vue'
 import { summarize } from '../functions/helpers'
 import { useTranslation } from '../composables/useTranslation'
 import SmallChart from './SmallChart.vue'
@@ -169,7 +178,6 @@ const props = defineProps<{
 }>()
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 
 const months = computed(() => props.data ? Object.keys(props.data) : [])
 const values = computed(() => props.data ? Object.values(props.data) : [])

package/src/components/TabularExplorer/TabularActiveFilters.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="activeFilters.length > 0 || sort"
+    class="flex flex-wrap items-center gap-1.5"
+  >
+    <!-- Sort chip -->
+    <span
+      v-if="sort"
+      class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
+    >
+      <component
+        :is="sort.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span class="font-medium">{{ sort.column }}</span>
+      <span>{{ sort.direction === 'asc' ? t('croissant') : t('décroissant') }}</span>
+      <button
+        :aria-label="t('Supprimer le tri')"
+        class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+        @click="sort = null"
+      >
+        <RiCloseLine
+          class="size-3.5"
+          aria-hidden="true"
+        />
+      </button>
+    </span>
+
+    <!-- Filter chips -->
+    <span
+      v-for="af in activeFilters"
+      :key="af.column"
+      :data-testid="`active-filter-${af.column}`"
+      class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
+    >
+      <component
+        :is="getColumnDisplay(af.column).icon"
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span class="font-medium">{{ af.column }}</span>
+      <span>{{ af.label }}</span>
+      <button
+        :aria-label="t('Supprimer ce filtre')"
+        class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+        @click="removeFilter(af.column)"
+      >
+        <RiCloseLine
+          class="size-3.5"
+          aria-hidden="true"
+        />
+      </button>
+    </span>
+
+    <!-- Clear all -->
+    <BrandedButton
+      v-if="withClear"
+      color="tertiary"
+      size="2xs"
+      :icon="RiCloseLine"
+      @click="clearAllFilters(); sort = null"
+    >
+      {{ t('Tout effacer') }}
+    </BrandedButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiArrowDownLine, RiArrowUpLine, RiCloseLine } from '@remixicon/vue'
+import BrandedButton from '../BrandedButton.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useTabularContext } from './useTabularContext'
+
+defineProps<{ withClear?: boolean }>()
+
+const { t } = useTranslation()
+const { activeFilters, sort, removeFilter, clearAllFilters, getColumnDisplay } = useTabularContext()
+</script>

package/src/components/TabularExplorer/TabularCell.vue

@@ -17,16 +17,15 @@
   </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"
+    class="inline-block max-w-full truncate rounded bg-gray-lower px-2 py-0.5 text-xs text-gray-plain"
   >{{ value }}</span>
   <span
-    v-else-if="columnType === 'number'"
-    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
-  >{{ formatNumber(value) }}</span>
+    v-else-if="columnType === 'number' || columnType === 'year'"
+    :class="compact ? 'font-mono tabular-nums text-xs' : ''"
+  >{{ columnType === 'year' || noNumberFormat ? value : formatNumber(value) }}</span>
   <span
     v-else-if="columnType === 'date'"
-    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+    :class="compact ? 'font-mono tabular-nums text-xs' : ''"
   >{{ formatCellDate(value) }}</span>
   <span
     v-else
@@ -37,13 +36,13 @@
 <script setup lang="ts">
 import { useTranslation } from '../../composables/useTranslation'
 import { useFormatTabular, isTruthy } from '../../functions/tabular'
-import type { ColumnType, BadgeStyle } from './types'
+import type { ColumnType } from './types'
 
 defineProps<{
   value: unknown
   columnType: ColumnType
-  categoryBadgeStyle?: BadgeStyle
   compact?: boolean
+  noNumberFormat?: boolean
 }>()
 
 const { t } = useTranslation()