@datagouv/components-next 1.2.0 → 1.4.0

package/src/components/ChartCard.vue

@@ -0,0 +1,112 @@
+<template>
+  <ObjectCard media-size="xl">
+    <template #badge>
+      <ObjectCardBadge
+        v-if="chart.deleted_at"
+        :icon="RiDeleteBinLine"
+      >
+        {{ t('Supprimé') }}
+      </ObjectCardBadge>
+      <ObjectCardBadge
+        v-else-if="chart.private"
+        :icon="RiLockLine"
+      >
+        {{ t('Brouillon') }}
+      </ObjectCardBadge>
+    </template>
+
+    <template #media>
+      <img
+        v-if="chart.image"
+        :src="chart.image"
+        class="w-full h-full object-cover"
+        :alt="chart.title"
+      >
+      <Placeholder
+        v-else
+        type="Chart"
+        class="w-full h-full"
+      />
+    </template>
+
+    <ObjectCardHeader
+      :icon="chartIcon"
+      :url="chartUrl || chart.page"
+    >
+      {{ chart.title }}
+    </ObjectCardHeader>
+
+    <div
+      v-if="chart.organization || chart.owner"
+      class="text-sm flex flex-wrap gap-y-1 items-center truncate"
+    >
+      <ObjectCardOwner
+        :organization="chart.organization"
+        :owner="chart.owner"
+        :organization-url="organizationUrl"
+      />
+      <RiSubtractLine
+        aria-hidden="true"
+        class="size-4 flex-none fill-gray-medium"
+      />
+      <TranslationT
+        tag="p"
+        class="text-sm whitespace-nowrap mb-0 text-gray-medium"
+        keypath="Mis à jour {date}"
+      >
+        <template #date>
+          <FormattedDate
+            :date="chart.last_modified"
+            format="relative"
+            :options="{ dateStyle: 'medium' }"
+          />
+        </template>
+      </TranslationT>
+    </div>
+
+    <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium mt-1">
+      <p
+        class="text-sm mb-0 flex items-center gap-0.5"
+        :aria-label="t('{n} vues | {n} vue | {n} vues', chart.metrics.views)"
+      >
+        <RiEyeLine
+          aria-hidden="true"
+          class="size-3.5"
+        />{{ summarize(chart.metrics.views) }}
+      </p>
+    </div>
+
+    <ObjectCardShortDescription :text="chart.description" />
+
+    <slot />
+  </ObjectCard>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiBarChartBoxLine, RiDeleteBinLine, RiEyeLine, RiLineChartLine, RiLockLine, RiSubtractLine } from '@remixicon/vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { Chart } from '../types/visualizations'
+import { summarize } from '../functions/helpers'
+import { useTranslation } from '../composables/useTranslation'
+import Placeholder from './Placeholder.vue'
+import FormattedDate from './FormattedDate.vue'
+import ObjectCard from './ObjectCard.vue'
+import ObjectCardBadge from './ObjectCardBadge.vue'
+import ObjectCardHeader from './ObjectCardHeader.vue'
+import ObjectCardOwner from './ObjectCardOwner.vue'
+import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import TranslationT from './TranslationT.vue'
+
+const props = defineProps<{
+  chart: Chart
+  chartUrl?: RouteLocationRaw
+  organizationUrl?: RouteLocationRaw
+}>()
+
+const { t } = useTranslation()
+
+const chartIcon = computed(() => {
+  return props.chart.series[0]?.type === 'line' ? RiLineChartLine : RiBarChartBoxLine
+})
+</script>

package/src/components/CopyButton.vue

@@ -17,7 +17,7 @@
       />
       <span
         class="copy-label"
-        :class="{ 'sr-only': hideLabel }"
+        :class="{ 'sr-only': hideLabel || iconOnly }"
       >{{ copiedLabel }}</span>
     </span>
     <span
@@ -32,7 +32,7 @@
       />
       <span
         class="copy-link copy-label"
-        :class="{ 'sr-only': hideLabel }"
+        :class="{ 'sr-only': hideLabel || iconOnly }"
       >{{ label }}</span>
     </span>
   </button>
@@ -49,9 +49,13 @@ const props = withDefaults(defineProps<{
   label: string
   copiedLabel: string
   hideLabel?: boolean
+  // Like hideLabel but keeps the default icon and has no bordered box — just the
+  // plain copy icon with an sr-only label.
+  iconOnly?: boolean
   reverse?: boolean
 }>(), {
   hideLabel: false,
+  iconOnly: false,
   reverse: false,
 })
 

package/src/components/DataserviceCard.vue

@@ -71,9 +71,19 @@
         class="size-4 flex-none fill-gray-medium"
       />
       <!-- https://github.com/datagouv/cdata/issues/653 -->
-      <p class="text-sm whitespace-nowrap mb-0 text-gray-medium">
-        {{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataservice.metadata_modified_at, { dateStyle: 'medium' }) }) }}
-      </p>
+      <TranslationT
+        tag="p"
+        class="text-sm whitespace-nowrap mb-0 text-gray-medium"
+        keypath="Mis à jour {date}"
+      >
+        <template #date>
+          <FormattedDate
+            :date="dataservice.metadata_modified_at"
+            format="relative"
+            :options="{ dateStyle: 'medium' }"
+          />
+        </template>
+      </TranslationT>
       <RiSubtractLine
         aria-hidden="true"
         class="size-4 flex-none fill-gray-medium"
@@ -99,6 +109,11 @@
         </p>
       </div>
     </div>
+    <DataserviceQualityInline
+      v-if="dataservice.quality"
+      :quality="dataservice.quality"
+    />
+
     <ObjectCardShortDescription
       v-if="showDescription"
       :text="dataservice.description"
@@ -113,7 +128,6 @@ import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { RiArchiveLine, RiEyeLine, RiLockLine, RiPassValidLine, RiSparklingLine, RiStarLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../config'
-import { useFormatDate } from '../functions/dates'
 import { summarize } from '../functions/helpers'
 import type { Dataservice } from '../types/dataservices'
 import type { TitleTag } from '../types/ui'
@@ -126,11 +140,15 @@ import ObjectCardBadge from './ObjectCardBadge.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import DataserviceQualityInline from './DataserviceQualityInline.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 type Props = {
   dataservice: Dataservice
   dataserviceUrl?: 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
   showDescription?: boolean
   titleTag?: TitleTag
 }
@@ -140,7 +158,6 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
 
 const config = useComponentsConfig()
 const isTabularApi = computed(() => {

package/src/components/DataserviceQuality.vue

@@ -0,0 +1,82 @@
+<template>
+  <Toggletip
+    :styled-button="false"
+    button-class="flex items-center gap-1 rounded-sm p-1.5 -m-1.5 border-transparent -outline-offset-2 hover:bg-gray-some transition-colors w-full text-left"
+    :button-props="{ title: t('Qualité des métadonnées') }"
+  >
+    <QualityScore
+      :score="quality.score"
+      class="w-full"
+    />
+    <RiInformationLine
+      class="size-5 shrink-0"
+      aria-hidden="true"
+    />
+    <template #toggletip>
+      <DataserviceQualityTooltipContent :quality />
+    </template>
+  </Toggletip>
+  <template v-if="!hideWarnings">
+    <ul class="list-none pl-0">
+      <QualityItemWarning
+        :quality-item="quality.has_description"
+        :message="t('Description non renseignée')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_machine_documentation"
+        :message="t('Documentation machine (OpenAPI) manquante')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_technical_documentation"
+        :message="t('Documentation technique manquante')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_business_documentation"
+        :message="t('Documentation métier manquante')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.license"
+        :message="t('Licence non renseignée')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_contact_point"
+        :message="t('Point de contact non renseigné')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.has_base_api_url"
+        :message="t(`URL de base de l'API non renseignée`)"
+      />
+      <QualityItemWarning
+        :quality-item="quality.availability_documented"
+        :message="t('Disponibilité non documentée')"
+      />
+      <QualityItemWarning
+        :quality-item="quality.rate_limiting_documented"
+        :message="t(`Limite d'appels non documentée`)"
+      />
+      <QualityItemWarning
+        :quality-item="quality.access_conditions_clear"
+        :message="t(`Conditions d'accès non précisées`)"
+      />
+    </ul>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
+import type { DataserviceQuality } from '../types/dataservices'
+import QualityScore from './QualityScore.vue'
+import QualityItemWarning from './QualityItemWarning.vue'
+import DataserviceQualityTooltipContent from './DataserviceQualityTooltipContent.vue'
+import Toggletip from './Toggletip.vue'
+import { useTranslation } from '../composables/useTranslation'
+
+withDefaults(defineProps<{
+  quality: DataserviceQuality
+  hideWarnings?: boolean
+}>(), {
+  hideWarnings: false,
+})
+
+const { t } = useTranslation()
+</script>

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

@@ -56,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">
@@ -122,7 +132,6 @@ import { RiArchiveLine, RiDatabase2Line, RiDownloadLine, RiEyeLine, RiLineChartL
 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'
@@ -134,12 +143,15 @@ 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
   datasetUrl?: RouteLocationRaw
   datasetUrlInNewTab?: boolean
-  organizationUrl?: RouteLocationRaw
+  // undefined falls back to the organization's data.gouv.fr page; pass null to render plain, non-linked text
+  organizationUrl?: RouteLocationRaw | null
   showDescriptionShort?: boolean
   titleTag?: TitleTag
 }
@@ -149,5 +161,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/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'