@datagouv/components-next 1.0.2-dev.20 → 1.0.2-dev.200

package/src/components/DataserviceQualityInline.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="m-0 text-sm text-gray-medium">
+    <Toggletip
+      :styled-button="false"
+      button-class="border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-lower transition-colors"
+      :button-props="{ class: 'relative z-2 gap-1 rounded-sm px-1 -mx-1 group/quality', title: t('Qualité des métadonnées') }"
+    >
+      <RiInformationLine class="size-3.5 shrink-0" />
+      <span class="text-gray-medium text-sm group-hover/quality:underline">{{ t('Métadonnées :') }}</span>
+      <QualityScore :score="quality.score" />
+      <template #toggletip>
+        <DataserviceQualityTooltipContent :quality />
+      </template>
+    </Toggletip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
+import type { DataserviceQuality } from '../types/dataservices'
+import QualityScore from './QualityScore.vue'
+import DataserviceQualityTooltipContent from './DataserviceQualityTooltipContent.vue'
+import Toggletip from './Toggletip.vue'
+import { useTranslation } from '../composables/useTranslation'
+
+defineProps<{
+  quality: DataserviceQuality
+}>()
+
+const { t } = useTranslation()
+</script>

package/src/components/DataserviceQualityTooltipContent.vue

@@ -0,0 +1,79 @@
+<template>
+  <p class="text-sm text-gray-plain font-bold mb-0">
+    {{ t("Qualité des métadonnées :") }}
+  </p>
+  <ul class="list-none pl-0 space-y-2">
+    <QualityItem
+      :passed="quality.has_description"
+      :message-passed="t('Description renseignée')"
+      :message-failed="t('Description non renseignée')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_machine_documentation"
+      :message-passed="t('Documentation machine (OpenAPI) disponible')"
+      :message-failed="t('Documentation machine (OpenAPI) manquante')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_technical_documentation"
+      :message-passed="t('Documentation technique renseignée')"
+      :message-failed="t('Documentation technique manquante')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_business_documentation"
+      :message-passed="t('Documentation métier renseignée')"
+      :message-failed="t('Documentation métier manquante')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.license"
+      :message-passed="t('Licence renseignée')"
+      :message-failed="t('Licence non renseignée')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_contact_point"
+      :message-passed="t('Point de contact renseigné')"
+      :message-failed="t('Point de contact non renseigné')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.has_base_api_url"
+      :message-passed="t(`URL de base de l'API renseignée`)"
+      :message-failed="t(`URL de base de l'API non renseignée`)"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.availability_documented"
+      :message-passed="t('Disponibilité documentée')"
+      :message-failed="t('Disponibilité non documentée')"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.rate_limiting_documented"
+      :message-passed="t(`Limite d'appels documentée`)"
+      :message-failed="t(`Limite d'appels non documentée`)"
+      class="pb-0"
+    />
+    <QualityItem
+      :passed="quality.access_conditions_clear"
+      :message-passed="t(`Conditions d'accès claires`)"
+      :message-failed="t(`Conditions d'accès non précisées`)"
+      class="pb-0"
+    />
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { DataserviceQuality } from '../types/dataservices'
+import { useTranslation } from '../composables/useTranslation'
+import QualityItem from './QualityItem.vue'
+
+defineProps<{
+  quality: DataserviceQuality
+}>()
+
+const { t } = useTranslation()
+</script>

package/src/components/DatasetCard.vue

@@ -36,6 +36,7 @@
       :icon="RiDatabase2Line"
       :url="datasetUrl || dataset.page"
       :target="datasetUrlInNewTab ? '_blank' : undefined"
+      :title-tag="titleTag"
     >
       {{ dataset.title }}
       <template
@@ -55,9 +56,19 @@
         :organization-url="organizationUrl"
       />
       <RiSubtractLine class="hidden md:block size-4 flex-none fill-gray-medium" />
-      <div class="w-full md:w-auto text-gray-medium whitespace-nowrap">
-        {{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataset.last_update, { dateStyle: 'medium' }) }) }}
-      </div>
+      <TranslationT
+        tag="div"
+        class="w-full md:w-auto text-gray-medium whitespace-nowrap"
+        keypath="Mis à jour {date}"
+      >
+        <template #date>
+          <FormattedDate
+            :date="dataset.last_update"
+            format="relative"
+            :options="{ dateStyle: 'medium' }"
+          />
+        </template>
+      </TranslationT>
     </div>
     <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium">
       <div class="hidden sm:flex text-gray-medium">
@@ -106,10 +117,12 @@
         </p>
       </div>
     </div>
-    <ObjectCardShortDescription
-      v-if="showDescriptionShort"
-      :text="getDescriptionShort(props.dataset)"
-    />
+    <slot>
+      <ObjectCardShortDescription
+        v-if="showDescriptionShort"
+        :text="getDescriptionShort(props.dataset)"
+      />
+    </slot>
   </ObjectCard>
 </template>
 
@@ -117,8 +130,8 @@
 import type { RouteLocationRaw } from 'vue-router'
 import { RiArchiveLine, RiDatabase2Line, RiDownloadLine, RiEyeLine, RiLineChartLine, RiLockLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import type { Dataset, DatasetV2 } from '../types/datasets'
+import type { TitleTag } from '../types/ui'
 import { summarize } from '../functions/helpers'
-import { useFormatDate } from '../functions/dates'
 import { getDescriptionShort } from '../functions/description'
 import { useTranslation } from '../composables/useTranslation'
 import DatasetQualityInline from './DatasetQualityInline.vue'
@@ -130,6 +143,8 @@ import ObjectCard from './ObjectCard.vue'
 import ObjectCardBadge from './ObjectCardBadge.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 type Props = {
   dataset: Dataset | DatasetV2
@@ -137,6 +152,7 @@ type Props = {
   datasetUrlInNewTab?: boolean
   organizationUrl?: RouteLocationRaw
   showDescriptionShort?: boolean
+  titleTag?: TitleTag
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -144,5 +160,4 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 </script>

package/src/components/DatasetInformation/DatasetTemporalitySection.vue

@@ -6,7 +6,9 @@
     <DescriptionList>
       <div>
         <DescriptionListTerm>{{ t('Création') }}</DescriptionListTerm>
-        <DescriptionListDetails>{{ formatDate(dataset.created_at) }}</DescriptionListDetails>
+        <DescriptionListDetails>
+          <FormattedDate :date="dataset.created_at" />
+        </DescriptionListDetails>
       </div>
       <div v-if="dataset.frequency">
         <DescriptionListTerm>{{ t('Fréquence') }}</DescriptionListTerm>
@@ -20,7 +22,9 @@
       </div>
       <div>
         <DescriptionListTerm>{{ t('Dernière mise à jour') }}</DescriptionListTerm>
-        <DescriptionListDetails>{{ formatDate(dataset.last_update) }}</DescriptionListDetails>
+        <DescriptionListDetails>
+          <FormattedDate :date="dataset.last_update" />
+        </DescriptionListDetails>
       </div>
       <slot />
     </DescriptionList>
@@ -29,17 +33,16 @@
 
 <script setup lang="ts">
 import { useTranslation } from '../../composables/useTranslation'
-import { useFormatDate } from '../../functions/dates'
 import type { DatasetV2WithFullObject } from '../../types/datasets'
 import DescriptionList from '../DescriptionList.vue'
 import DescriptionListTerm from '../DescriptionListTerm.vue'
 import DescriptionListDetails from '../DescriptionListDetails.vue'
 import DateRangeDetails from '../DateRangeDetails.vue'
+import FormattedDate from '../FormattedDate.vue'
 
 defineProps<{
   dataset: DatasetV2WithFullObject
 }>()
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 </script>

package/src/components/DatasetQuality.vue

@@ -13,7 +13,7 @@
         {{ t('Qualité des métadonnées:') }}
       </span>
     </span>
-    <DatasetQualityScore
+    <QualityScore
       :score="quality.score"
       class="w-full"
     />
@@ -23,35 +23,35 @@
   </Toggletip>
   <template v-if="!hideWarnings">
     <ul class="list-none pl-0">
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.dataset_description_quality"
         :message="t('Description des données non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.resources_documentation"
         :message="t('Documentation des fichiers manquante')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.license"
         :message="t('Licence non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.update_frequency && quality.update_fulfilled_in_time"
         :message="quality.update_frequency ? t('Fréquence de mise à jour non respectée') : t('Fréquence de mise à jour non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.has_open_format"
         :message="t('Formats de fichiers non standards')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.temporal_coverage"
         :message="t('Couverture temporelle non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.spatial"
         :message="t('Couverture spatiale non renseignée')"
       />
-      <DatasetQualityItemWarning
+      <QualityItemWarning
         :quality-item="quality.all_resources_available"
         :message="t('Certains fichiers ne sont pas disponibles')"
       />
@@ -62,8 +62,8 @@
 <script setup lang="ts">
 import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
-import DatasetQualityItemWarning from './DatasetQualityItemWarning.vue'
-import DatasetQualityScore from './DatasetQualityScore.vue'
+import QualityItemWarning from './QualityItemWarning.vue'
+import QualityScore from './QualityScore.vue'
 import Toggletip from './Toggletip.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
 import { useTranslation } from '../composables/useTranslation'

package/src/components/DatasetQualityInline.vue

@@ -7,7 +7,7 @@
     >
       <RiInformationLine class="size-3.5 shrink-0" />
       <span class="text-gray-medium text-sm group-hover/quality:underline">{{ t('Métadonnées :') }}</span>
-      <DatasetQualityScore :score="quality.score" />
+      <QualityScore :score="quality.score" />
       <template #toggletip>
         <DatasetQualityTooltipContent :quality />
       </template>
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
-import DatasetQualityScore from './DatasetQualityScore.vue'
+import QualityScore from './QualityScore.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
 import Toggletip from './Toggletip.vue'
 import { useTranslation } from '../composables/useTranslation'

package/src/components/DatasetQualityTooltipContent.vue

@@ -68,7 +68,7 @@
 import type { Quality } from '../types/datasets'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'
-import DatasetQualityItem from './DatasetQualityItem.vue'
+import DatasetQualityItem from './QualityItem.vue'
 
 defineProps<{
   quality: Quality

package/src/components/DiscussionMessageCard.vue

@@ -20,9 +20,18 @@
         aria-hidden="true"
         class="size-4 flex-none fill-gray-medium"
       />
-      <span class="text-gray-medium whitespace-nowrap">
-        {{ t('Posté {date}', { date: formatDate(discussion.created) }) }}
-      </span>
+      <TranslationT
+        class="text-gray-medium whitespace-nowrap"
+        keypath="Posté {date}"
+      >
+        <template #date>
+          <FormattedDate
+            :date="discussion.created"
+            format="relative"
+            :options="{ dateStyle: 'long', timeStyle: 'short' }"
+          />
+        </template>
+      </TranslationT>
     </div>
 
     <ObjectCardShortDescription :text="firstMessageContent" />
@@ -35,13 +44,13 @@
 import { RiChat3Line, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { useFormatDate } from '../functions/dates'
-import { useTranslation } from '../composables/useTranslation'
 import type { Thread } from '../types/discussions'
 import ObjectCard from './ObjectCard.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 const props = defineProps<{
   discussion: Thread
@@ -49,15 +58,5 @@ const props = defineProps<{
   organizationUrl?: RouteLocationRaw
 }>()
 
-const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
-
 const firstMessageContent = computed(() => props.discussion.discussion?.[0]?.content)
-
-const formatDate = (dateString: string) => {
-  return formatRelativeIfRecentDate(dateString, {
-    dateStyle: 'long',
-    timeStyle: 'short',
-  })
-}
 </script>

package/src/components/Form/Listbox.vue

@@ -0,0 +1,101 @@
+<template>
+  <Listbox v-model="model">
+    <div class="relative min-w-0">
+      <div
+        ref="floatingReference"
+        class="relative w-full cursor-default overflow-hidden bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+      >
+        <ListboxButton class="input shadow-input text-sm flex items-center gap-2">
+          <slot name="button">
+            <div class="w-full flex items-center justify-between gap-2">
+              <div
+                class="truncate"
+                :class="{ 'text-new-disabled-text': isDisabled(model) }"
+              >
+                {{ displayValue(model) }}
+              </div>
+              <RiArrowDownSLine class="flex-none size-4 justify-self-end" />
+            </div>
+          </slot>
+        </ListboxButton>
+      </div>
+
+      <ListboxOptions
+        ref="popover"
+        :style="floatingStyles"
+        class="z-10 mt-1 absolute max-h-60 min-w-80 w-full overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm pl-0"
+      >
+        <ListboxOption
+          v-for="option in options"
+          :key="getOptionId(toValue(option))"
+          v-slot="{ active, selected }"
+          as="template"
+          :value="option"
+        >
+          <li
+            class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900"
+            :class="{
+              'bg-gray-lower': active && !isDisabled(toValue(option)),
+              'text-new-disabled-text': isDisabled(toValue(option)),
+              'pl-2': selected,
+              'pl-6': !selected,
+            }"
+          >
+            <div class="flex items-center justify-center aspect-square">
+              <RiCheckLine
+                v-if="selected"
+                class="size-4"
+                :class="isDisabled(toValue(option)) ?' text-new-disabled-text' : 'text-new-primary'"
+              />
+            </div>
+            <slot
+              name="option"
+              v-bind="{ option, active }"
+            >
+              {{ displayValue(option) }}
+            </slot>
+          </li>
+        </ListboxOption>
+      </ListboxOptions>
+    </div>
+  </Listbox>
+</template>
+
+<script setup lang="ts" generic="T extends string | number | object">
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
+import { toValue, useTemplateRef } from 'vue'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/vue'
+
+withDefaults(defineProps<{
+  options?: Array<T>
+  getOptionId?: (option: T) => string | number
+  displayValue: (option: T | null) => string
+  isDisabled?: (option: T | null) => boolean
+}>(), {
+  getOptionId: (option: T): string | number => {
+    if (typeof option === 'string') return option
+    if (typeof option === 'number') return option
+    if (typeof option === 'object' && 'id' in option) return option.id as string
+
+    throw new Error('Please set getOptionId()')
+  },
+  isDisabled: (option: T | null): boolean => {
+    if (option && typeof option === 'object' && 'disabled' in option) return option.disabled as boolean
+
+    return false
+  },
+})
+
+const model = defineModel<T | null>({ required: true })
+
+const referenceRef = useTemplateRef('floatingReference')
+const floatingRef = useTemplateRef<InstanceType<typeof ListboxOptions>>('popover')
+const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+  middleware: [autoPlacement({
+    allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
+    crossAxis: true,
+  })],
+  whileElementsMounted: autoUpdate,
+})
+</script>

package/src/components/Form/SchemaSelect.vue

@@ -8,6 +8,7 @@
     :placeholder="t('Tous les schémas')"
     :get-option-id="(s: RegisteredSchema) => s.name"
     :display-value="(s: RegisteredSchema) => s.name"
+    :filter="schemaMatchesQuery"
     :multiple="false"
   />
 </template>
@@ -16,6 +17,7 @@
 import { useTranslation } from '../../composables/useTranslation'
 import { useSelectModelSync } from '../../composables/useSelectModelSync'
 import { useFetch } from '../../functions/api'
+import { schemaMatchesQuery } from '../../functions/schemas'
 import type { RegisteredSchema } from '../../types/schemas'
 import SearchableSelect from './SearchableSelect.vue'
 

package/src/components/FormattedDate.vue

@@ -0,0 +1,81 @@
+<template>
+  <!-- An instant is formatted in the server's timezone at render time and in the
+       reader's at read time, so its text and `title` legitimately differ and Vue is
+       told to accept it. A plain date carries no time, so nothing about it varies —
+       exempting it would hide a real bug instead of a legitimate difference. Vue only
+       honours `data-allow-mismatch` on an element whose children are plain text,
+       never on a text node coming from a slot: hence two static elements instead of a
+       `<component :is>`, which would pass the text through a slot. -->
+  <time
+    v-if="datetime"
+    :datetime
+    :title
+    :data-allow-mismatch="allowMismatch"
+  >{{ formatted }}</time>
+  <!-- No date to format: nothing here depends on the timezone or on "now". -->
+  <span v-else>{{ formatted }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFormatDate } from '../functions/dates'
+
+const props = withDefaults(defineProps<{
+  date: Date | string | null | undefined
+  /**
+   * `date`: the full date. `relative`: "3 days ago" while the date is less than a
+   * month old, the full date beyond. `from-now`: always relative, however old.
+   */
+  format?: 'date' | 'relative' | 'from-now'
+  options?: Intl.DateTimeFormatOptions
+}>(), {
+  format: 'date',
+  options: () => ({}),
+})
+
+const { formatDate, formatFromNow, formatRelativeIfRecentDate } = useFormatDate()
+
+// `2026`, `2026-04` and `2026-04-24` carry no time of day. `new Date()` reads them as
+// midnight UTC, an instant they never claimed, and then converts it: a reader west of
+// UTC gets the day before — and with it the month, and sometimes the year.
+const PLAIN_DATE = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/
+
+const plainDate = computed(() => typeof props.date === 'string' ? props.date.match(PLAIN_DATE) : null)
+
+const parsed = computed(() => {
+  if (!props.date) return null
+  const plain = plainDate.value
+  const date = plain
+    ? new Date(Number(plain[1]), Number(plain[2] ?? 1) - 1, Number(plain[3] ?? 1))
+    : new Date(props.date)
+  return isNaN(date.getTime()) ? null : date
+})
+
+// Announce the precision the value carries, never more: a month stays a month.
+const datetime = computed(() => {
+  if (!parsed.value) return undefined
+  return plainDate.value ? plainDate.value[0] : parsed.value.toISOString()
+})
+
+// Only what genuinely differs between server and browser is exempted: an instant, and
+// the relative forms, which are measured against "now".
+const allowMismatch = computed(() => !plainDate.value || props.format !== 'date'
+  ? 'text,attribute'
+  : undefined)
+
+const formatted = computed(() => {
+  if (props.format === 'relative') return formatRelativeIfRecentDate(parsed.value, props.options)
+  if (props.format === 'from-now') return formatFromNow(parsed.value)
+  return formatDate(parsed.value, props.options)
+})
+
+// Hovering an instant gives the exact moment, which the displayed form usually omits:
+// the relative forms drop it entirely, and most styles drop the time. A plain date has
+// no moment to reveal — a `title` there would be one we made up, and a form that already
+// spells the moment out needs no tooltip repeating it word for word.
+const title = computed(() => {
+  if (!parsed.value || plainDate.value) return undefined
+  const exact = formatDate(parsed.value, { dateStyle: 'long', timeStyle: 'short' })
+  return exact === formatted.value ? undefined : exact
+})
+</script>

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/LoadingBlock.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="relative">
     <div :class="{ 'opacity-50 min-h-64': loading }">
+      <!-- Keep the previous content while reloading, dimmed under the loader:
+           dropping it collapses the page height, which makes the browser clamp
+           the scroll and throws the reader back to the top. -->
       <slot
-        v-if="!loading && !hasError && data"
+        v-if="!hasError && data"
         :data="data"
       />
       <slot