@datagouv/components-next 1.0.2-dev.91 → 1.0.2-dev.93

package/dist/{vue3-xml-viewer.common-B8dNNkOU.js → vue3-xml-viewer.common-ByPlyYhy.js}

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

package/package.json

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

package/src/components/DataserviceCard.vue

@@ -53,6 +53,7 @@
     <ObjectCardHeader
       :icon="isTabularApi ? RiSparklingLine : RiTerminalLine"
       :url="dataserviceUrl || dataservice.self_web_url"
+      :title-tag="titleTag"
     >
       {{ dataservice.title }}
     </ObjectCardHeader>
@@ -115,6 +116,7 @@ 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'
 import { useTranslation } from '../composables/useTranslation'
 import OrganizationLogo from './OrganizationLogo.vue'
 import Avatar from './Avatar.vue'
@@ -130,6 +132,7 @@ type Props = {
   dataserviceUrl?: RouteLocationRaw
   organizationUrl?: RouteLocationRaw
   showDescription?: boolean
+  titleTag?: TitleTag
 }
 
 const props = withDefaults(defineProps<Props>(), {

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
@@ -117,6 +118,7 @@
 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'
@@ -137,6 +139,7 @@ type Props = {
   datasetUrlInNewTab?: boolean
   organizationUrl?: RouteLocationRaw
   showDescriptionShort?: boolean
+  titleTag?: TitleTag
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/ObjectCardHeader.vue

@@ -1,5 +1,8 @@
 <template>
-  <h3 class="w-full text-base flex">
+  <component
+    :is="titleTag"
+    class="w-full text-base flex"
+  >
     <AppLink
       :to="url"
       class="text-gray-title text-base bg-none flex items-center w-full truncate gap-1"
@@ -19,17 +22,21 @@
       <slot name="extra" />
       <span class="absolute inset-0" />
     </AppLink>
-  </h3>
+  </component>
 </template>
 
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
+import type { TitleTag } from '../types/ui'
 import AppLink from './AppLink.vue'
 
-defineProps<{
+withDefaults(defineProps<{
   icon: Component
   url: RouteLocationRaw
   target?: string
-}>()
+  titleTag?: TitleTag
+}>(), {
+  titleTag: 'h3',
+})
 </script>

package/src/components/ReuseCard.vue

@@ -2,14 +2,17 @@
   <article class="fr-enlarge-link group/reuse-card bg-white border border-gray-default hover:bg-gray-some flex flex-col relative">
     <div class="flex flex-col h-full flex-1 order-2 px-8">
       <div class="order-1 flex flex-col px-4 py-1 h-full -mx-8">
-        <h3 class="font-bold text-base mt-1 mb-0 truncate">
+        <component
+          :is="titleTag"
+          class="font-bold text-base mt-1 mb-0 truncate"
+        >
           <AppLink
             class="text-gray-title overflow-hidden"
             :to="reuseUrl"
           >
             {{ reuse.title }}
           </AppLink>
-        </h3>
+        </component>
         <div class="order-3 text-sm m-0 text-gray-medium">
           <div class="text-sm mb-0 flex items-center">
             <ObjectCardOwner
@@ -66,13 +69,14 @@ import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { useFormatDate } from '../functions/dates'
 import type { Reuse } 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'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   reuse: Reuse
 
   /**
@@ -86,7 +90,11 @@ const props = defineProps<{
   * It is used as a separate prop to allow other sites using the package to define their own organization pages.
   */
   organizationUrl?: RouteLocationRaw
-}>()
+
+  titleTag?: TitleTag
+}>(), {
+  titleTag: 'h3',
+})
 
 const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()

package/src/types/ui.ts

@@ -1,3 +1,5 @@
 export type WellType = 'primary' | 'secondary'
 
 export type Weight = 'light' | 'regular' | 'semi-bold' | 'bold' | 'heavy'
+
+export type TitleTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'