@datagouv/components-next 0.2.0 → 1.0.1

package/src/components/DatasetQuality.vue

@@ -1,20 +1,26 @@
 <template>
-  <div class="flex items-center">
-    <Toggletip
-      :button-props="{ class: '-ml-2 mt-px', title: t('Qualité des métadonnées') }"
-    >
-      <template #toggletip>
-        <DatasetQualityTooltipContent :quality />
-      </template>
-    </Toggletip>
-    <div class="text-sm text-gray-plain font-bold">
-      {{ t('Qualité des métadonnées:') }}
-    </div>
-  </div>
-  <DatasetQualityScore
-    :score="quality.score"
-    class="w-full"
-  />
+  <Toggletip
+    :styled-button="false"
+    button-class="flex flex-col 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') }"
+  >
+    <span class="flex items-center gap-1">
+      <RiInformationLine
+        class="size-5 shrink-0"
+        aria-hidden="true"
+      />
+      <span class="text-sm text-gray-plain font-bold">
+        {{ t('Qualité des métadonnées:') }}
+      </span>
+    </span>
+    <DatasetQualityScore
+      :score="quality.score"
+      class="w-full"
+    />
+    <template #toggletip>
+      <DatasetQualityTooltipContent :quality />
+    </template>
+  </Toggletip>
   <template v-if="!hideWarnings">
     <ul class="list-none pl-0">
       <DatasetQualityItemWarning
@@ -54,6 +60,7 @@
 </template>
 
 <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'

package/src/components/DatasetQualityInline.vue

@@ -1,21 +1,17 @@
 <template>
-  <div class="m-0 flex flex-wrap items-center text-sm text-gray-medium">
-    <div class="fr-grid-row fr-grid-row--middle">
-      <Toggletip
-        :button-props="{ class: 'relative z-2 ml-0.5', title: t('Qualité des métadonnées') }"
-      >
-        <RiInformationLine class="size-4" />
-        <template #toggletip>
-          <DatasetQualityTooltipContent :quality />
-        </template>
-      </Toggletip>
-      <p class="my-0 mr-1 text-gray-medium text-sm">
-        {{ t('Métadonnées :') }}
-      </p>
-      <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
-        <DatasetQualityScore :score="quality.score" />
-      </div>
-    </div>
+  <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>
+      <DatasetQualityScore :score="quality.score" />
+      <template #toggletip>
+        <DatasetQualityTooltipContent :quality />
+      </template>
+    </Toggletip>
   </div>
 </template>
 

package/src/components/DatasetQualityScore.vue

@@ -1,26 +1,23 @@
 <template>
-  <meter
-    class="quality-score"
-    :class="props.class"
-    min="0"
-    low="0"
-    :high="high"
-    :max="quality_max_score"
-    :optimum="quality_max_score"
+  <ProgressBar
     :value="score"
+    :max="quality_max_score"
+    :aria-label="score >= high ? t('Bon') : t('À améliorer')"
+    :bar-class="score >= high ? 'bg-success-dark' : 'bg-gray-low'"
+    :class="props.class"
   >
-    <template v-if="score >= high">
-      {{ t('Bon') }}
-    </template>
-    <template v-else>
-      {{ t('À améliorer') }}
-    </template>({{ calculatedScore }})
-  </meter>
+    <span class="sr-only">
+      <template v-if="score >= high">{{ t('Bon') }}</template>
+      <template v-else>{{ t('À améliorer') }}</template>
+      ({{ calculatedScore }})
+    </span>
+  </ProgressBar>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useTranslation } from '../composables/useTranslation'
+import ProgressBar from './ProgressBar.vue'
 
 const props = withDefaults(defineProps<{
   score: number

package/src/components/DatasetQualityTooltipContent.vue

@@ -1,7 +1,7 @@
 <template>
-  <h5 class="text-sm text-gray-plain font-bold">
+  <p class="text-sm text-gray-plain font-bold mb-0">
     {{ t("Qualité des métadonnées :") }}
-  </h5>
+  </p>
   <ul class="list-none pl-0 space-y-2">
     <DatasetQualityItem
       :passed="quality.dataset_description_quality"
@@ -52,7 +52,7 @@
       class="pb-0"
     />
   </ul>
-  <div class="fr-grid-row fr-grid-row--right not-enlarged">
+  <div class="fr-grid-row fr-grid-row--right">
     <a
       :href="config.datasetQualityGuideUrl"
       target="_blank"

package/src/components/DescriptionList.vue

@@ -1,8 +1,5 @@
 <template>
-  <dl class="fr-my-0">
+  <dl class="grid grid-cols-1 md:grid-cols-3 gap-6 p-0">
     <slot />
   </dl>
 </template>
-
-<script setup lang="ts">
-</script>

package/src/components/DescriptionListDetails.vue

@@ -0,0 +1,5 @@
+<template>
+  <dd class="p-0 text-sm text-gray-medium">
+    <slot />
+  </dd>
+</template>

package/src/components/DescriptionListTerm.vue

@@ -0,0 +1,5 @@
+<template>
+  <dt class="mb-1 p-0 text-sm font-bold">
+    <slot />
+  </dt>
+</template>

package/src/components/DiscussionMessageCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <ObjectCard>
+    <ObjectCardHeader
+      :icon="RiChat3Line"
+      :url="discussionUrl || discussion.self_web_url || '#'"
+    >
+      {{ discussion.title }}
+    </ObjectCardHeader>
+
+    <div
+      v-if="discussion.organization || discussion.user"
+      class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
+    >
+      <ObjectCardOwner
+        :organization="discussion.organization"
+        :owner="discussion.user"
+        :organization-url="organizationUrl"
+      />
+      <RiSubtractLine
+        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>
+    </div>
+
+    <ObjectCardShortDescription :text="firstMessageContent" />
+
+    <slot />
+  </ObjectCard>
+</template>
+
+<script setup lang="ts">
+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'
+
+const props = defineProps<{
+  discussion: Thread
+  discussionUrl?: RouteLocationRaw
+  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/ExtraAccordion.vue

@@ -4,12 +4,12 @@
     as="div"
   >
     <header
-      class="flex flex-wrap items-center pb-6 mb-6 border-bottom border-gray-default"
+      class="flex flex-wrap items-center pb-6 mb-6 border-b border-gray-default"
     >
       <div class="fr-col">
         <component
           :is="titleLevel"
-          class="subtitle subtitle--uppercase fr-m-0"
+          class="subtitle uppercase m-0"
         >
           {{ titleText }}
         </component>
@@ -34,7 +34,7 @@
       </div>
     </header>
     <DisclosurePanel :id="accordionId">
-      <div class="pb-6 mb-6 border-bottom border-gray-default">
+      <div class="pb-6 mb-6 border-b border-gray-default">
         <div
           class="fr-grid-row fr-grid-row--gutters fr-text--sm fr-m-0"
           data-testid="extra-list"
@@ -44,7 +44,7 @@
             :key="key"
             class="fr-col-12 fr-col-sm-6 fr-col-md-4"
           >
-            <h3 class="subtitle fr-mb-1v">
+            <h3 class="subtitle mb-1">
               {{ key }}
             </h3>
             <p class="text-sm m-0 text-gray-medium break-all">

package/src/components/Form/BadgeSelect.vue

@@ -0,0 +1,35 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="badges"
+    :loading="status === 'pending'"
+    :label="t('Label de données')"
+    :placeholder="t('Tous les labels')"
+    :get-option-id="(b: TranslatedBadge) => b.kind"
+    :display-value="(b: TranslatedBadge) => b.label"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useSelectModelSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import type { TranslatedBadge } from '../../types/badges'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<TranslatedBadge | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: badgesRecord, status } = await useFetch<Record<string, string>>('/api/1/datasets/badges/', { lazy: true })
+
+const badges = computed<TranslatedBadge[]>(() => {
+  if (!badgesRecord.value) return []
+  return Object.entries(badgesRecord.value).map(([kind, label]) => ({ kind, label }))
+})
+
+useSelectModelSync({ model, id, items: badges, getId: b => b.kind })
+</script>

package/src/components/Form/FormatSelect.vue

@@ -0,0 +1,28 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="formats ?? []"
+    :loading="status === 'pending'"
+    :label="t('Formats')"
+    :placeholder="t('Tous les formats')"
+    :get-option-id="(f: string) => f"
+    :display-value="(f: string) => f"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useStringSelectSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<string | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: formats, status } = await useFetch<string[]>('/api/1/datasets/extensions/', { lazy: true })
+
+useStringSelectSync({ model, id })
+</script>

package/src/components/Form/GeozoneSelect.vue

@@ -0,0 +1,52 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="[]"
+    :suggest="suggestGeozones"
+    :label="t('Couverture spatiale')"
+    :placeholder="t('Toutes les couvertures')"
+    :get-option-id="(g: SpatialZone) => g.id"
+    :display-value="(g: SpatialZone) => g.name"
+    :multiple="false"
+    :loading="fetching"
+  >
+    <template #option="{ option }">
+      <div class="flex-1">
+        {{ option.name }}
+      </div>
+      <code class="bg-gray-100 text-gray-600 p-1 text-xs rounded">{{ option.code }}</code>
+    </template>
+  </SearchableSelect>
+</template>
+
+<script setup lang="ts">
+import { ofetch } from 'ofetch'
+import { useComponentsConfig } from '../../config'
+import { useTranslation } from '../../composables/useTranslation'
+import { useAsyncSelectModelSync } from '../../composables/useSelectModelSync'
+import type { SpatialZone } from '../../types/granularity'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<SpatialZone | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const config = useComponentsConfig()
+const { t } = useTranslation()
+
+const { fetching } = useAsyncSelectModelSync({
+  model,
+  id,
+  getId: z => z.id,
+  fetchById: async (zoneId) => {
+    const zones = await suggestGeozones(zoneId)
+    return zones.find(z => z.id === zoneId) ?? null
+  },
+})
+
+async function suggestGeozones(q: string) {
+  return await ofetch<SpatialZone[]>('/api/1/spatial/zones/suggest/', {
+    baseURL: config.apiBase,
+    query: { q, size: 20 },
+  })
+}
+</script>

package/src/components/Form/GranularitySelect.vue

@@ -0,0 +1,29 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="granularities ?? []"
+    :loading="status === 'pending'"
+    :label="t('Granularité spatiale')"
+    :placeholder="t('Toutes les granularités')"
+    :get-option-id="(g: Granularity) => g.id"
+    :display-value="(g: Granularity) => g.name"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useSelectModelSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import type { Granularity } from '../../types/granularity'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<Granularity | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: granularities, status } = await useFetch<Granularity[]>('/api/1/spatial/granularities/', { lazy: true })
+
+useSelectModelSync({ model, id, items: granularities, getId: g => g.id })
+</script>

package/src/components/Form/LicenseSelect.vue

@@ -0,0 +1,30 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="licenses ?? []"
+    :loading="status === 'pending'"
+    :label="t('Licences')"
+    :explanation="t('Les licences définissent les règles de réutilisation des jeux de données publiés.')"
+    :placeholder="t('Toutes les licences')"
+    :get-option-id="(l: License) => l.id"
+    :display-value="(l: License) => l.title"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useSelectModelSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import type { License } from '../../types/licenses'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<License | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: licenses, status } = await useFetch<License[]>('/api/1/datasets/licenses/', { lazy: true })
+
+useSelectModelSync({ model, id, items: licenses, getId: l => l.id })
+</script>

package/src/components/Form/OrganizationSelect.vue

@@ -0,0 +1,62 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="[]"
+    :suggest="suggestOrganizations"
+    :label="t('Organisations')"
+    :placeholder="t('Toutes les organisations')"
+    :get-option-id="(option) => option.id"
+    :display-value="(option) => option.name"
+    :filter="(option, query) => (option.name).toLocaleLowerCase().includes(query.toLocaleLowerCase())"
+    :multiple="false"
+    :loading="loading || fetching"
+  >
+    <template #option="{ option }">
+      <div class="flex items-center space-x-2">
+        <OrganizationLogo
+          :organization="option"
+          size-class="size-8"
+          class="flex-none"
+        />
+        <span>{{ option.name }}</span>
+      </div>
+    </template>
+  </SearchableSelect>
+</template>
+
+<script setup lang="ts">
+import { ofetch } from 'ofetch'
+import { useComponentsConfig } from '../../config'
+import { useTranslation } from '../../composables/useTranslation'
+import { useAsyncSelectModelSync } from '../../composables/useSelectModelSync'
+import type { Organization, OrganizationSuggest } from '../../types/organizations'
+import OrganizationLogo from '../OrganizationLogo.vue'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<Organization | OrganizationSuggest | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+defineProps<{
+  loading?: boolean
+}>()
+
+const config = useComponentsConfig()
+const { t } = useTranslation()
+
+const { fetching } = useAsyncSelectModelSync({
+  model,
+  id,
+  getId: org => org.id,
+  fetchById: orgId => ofetch<Organization>(`/api/1/organizations/${orgId}/`, { baseURL: config.apiBase }),
+})
+
+async function suggestOrganizations(q: string): Promise<Array<Organization | OrganizationSuggest>> {
+  return await ofetch<Array<OrganizationSuggest>>('/api/1/organizations/suggest/', {
+    baseURL: config.apiBase,
+    query: {
+      q,
+      size: 20,
+    },
+  })
+}
+</script>

package/src/components/Form/OrganizationTypeSelect.vue

@@ -0,0 +1,34 @@
+<template>
+  <SearchableSelect
+    v-model="selected"
+    :options="organizationTypes"
+    :label="t(`Type d'organisation`)"
+    :placeholder="t('Tous les types')"
+    :get-option-id="(opt) => opt.type"
+    :display-value="(value) => value.label"
+    :multiple="false"
+  >
+    <template #option="{ option }">
+      {{ option.label }}
+    </template>
+  </SearchableSelect>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getOrganizationTypes, OTHER, USER } from '../../functions/organizations'
+import { useTranslation } from '../../composables/useTranslation'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<string | undefined>()
+
+const { t } = useTranslation()
+
+const organizationTypes = getOrganizationTypes()
+  .filter(t => t.type !== OTHER && t.type !== USER)
+
+const selected = computed({
+  get: () => organizationTypes.find(t => t.type === model.value) ?? null,
+  set: (value) => { model.value = value?.type },
+})
+</script>

package/src/components/Form/ReuseTopicSelect.vue

@@ -0,0 +1,29 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="topics ?? []"
+    :loading="status === 'pending'"
+    :label="t('Thématique')"
+    :placeholder="t('Toutes les thématiques')"
+    :get-option-id="(topic: ReuseTopic) => topic.id"
+    :display-value="(topic: ReuseTopic) => topic.label"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useSelectModelSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import type { ReuseTopic } from '../../types/reuses'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<ReuseTopic | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: topics, status } = await useFetch<ReuseTopic[]>('/api/1/reuses/topics/', { lazy: true })
+
+useSelectModelSync({ model, id, items: topics, getId: topic => topic.id })
+</script>

package/src/components/Form/SchemaSelect.vue

@@ -0,0 +1,30 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="schemas ?? []"
+    :loading="status === 'pending'"
+    :label="t('Schéma')"
+    :explanation="t('Les schémas de données permettent de décrire des modèles de données.')"
+    :placeholder="t('Tous les schémas')"
+    :get-option-id="(s: RegisteredSchema) => s.name"
+    :display-value="(s: RegisteredSchema) => s.name"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useSelectModelSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import type { RegisteredSchema } from '../../types/schemas'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<RegisteredSchema | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: schemas, status } = await useFetch<RegisteredSchema[]>('/api/1/datasets/schemas/', { lazy: true })
+
+useSelectModelSync({ model, id, items: schemas, getId: s => s.name })
+</script>