@datagouv/components-next 0.0.31 → 0.0.32

package/dist/{vue3-xml-viewer.common-NQY1dx9T.js → vue3-xml-viewer.common-1QyofKqS.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-Qu3kUOIH.js";
+import { g as Ke } from "./main-yWiuApVL.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": "0.0.31",
+  "version": "0.0.32",
   "private": false,
   "type": "module",
   "main": "./src/main.ts",

package/src/components/DatasetInformationPanel.vue

@@ -154,7 +154,7 @@ import type { Granularity } from '../types/granularity'
 import type { Frequency } from '../types/frequency'
 import type { License } from '../types/licenses'
 import { useFetch } from '../functions/api'
-import getDatasetOEmbedHtml from '../functions/datasets'
+import { getDatasetOEmbedHtml } from '../functions/datasets'
 import ExtraAccordion from './ExtraAccordion.vue'
 import CopyButton from './CopyButton.vue'
 

package/src/components/DatasetQuality.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="flex items-center">
     <Toggletip
-      :button-props="{ size: '2xs', class: '-ml-2 mt-px' }"
+      :button-props="{ class: '-ml-2 mt-px', title: $t('Qualité des métadonnées') }"
     >
-      {{ $t('Qualité des métadonnées:') }}
       <template #toggletip>
         <DatasetQualityTooltipContent :quality />
       </template>

package/src/components/DatasetQualityInline.vue

@@ -2,8 +2,9 @@
   <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' }"
+        :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>
@@ -19,6 +20,7 @@
 </template>
 
 <script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
 import DatasetQualityScore from './DatasetQualityScore.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'

package/src/components/ExtraAccordion.vue

@@ -33,10 +33,7 @@
         </DisclosureButton>
       </div>
     </header>
-    <DisclosurePanel
-      :id="accordionId"
-      class="accordion-content"
-    >
+    <DisclosurePanel :id="accordionId">
       <div class="pb-6 mb-6 border-bottom border-gray-default">
         <div
           class="fr-grid-row fr-grid-row--gutters fr-text--sm fr-m-0"

package/src/components/Placeholder.vue

@@ -19,9 +19,15 @@ const props = defineProps<{
   alt?: string
   size: number
 }>()
-const placeholderUrl = async () => {
-  const module = await import(`../../assets/placeholders/${props.type}.png`)
-  return props.src ? props.src : module.default
+async function placeholderUrl() {
+  const placeholders = import.meta.glob(`../../assets/placeholders/*.png`, {
+    query: '?url',
+    import: 'default',
+  })
+  const name = Object.keys(placeholders).find(p => p.includes(props.type)) as string
+  const module = placeholders[name]
+  const placeholder = await module()
+  return props.src ? props.src : placeholder as string
 }
 
 const alternativeTextForDefinedImageOnly = computed(() => props.src ? props.alt : '')

package/src/components/ResourceAccordion/SchemaBadge.vue

@@ -4,9 +4,10 @@
     class="inline-flex mb-0 items-baseline text-xs"
   >
     <Toggletip
-      :button-props="{ class: 'relative z-2 -ml-3 top-1 -my-3' }"
+      :button-props="{ class: 'relative z-2 -ml-3 top-1 -my-3', title: $t('Schéma de données') }"
       no-margin
     >
+      <RiInformationLine class="size-4" />
       <template #toggletip="{ close }">
         <div class="flex justify-between border-bottom">
           <h5 class="fr-text--sm fr-my-0 fr-p-2v">{{ $t("Schéma de données") }}</h5>
@@ -94,6 +95,7 @@
 </template>
 
 <script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { Resource } from '../../types/resources'

package/src/components/Toggletip.vue

@@ -1,6 +1,7 @@
 <template>
   <Popover
     v-slot="{ open, close }"
+    ref="popover"
     class="relative"
   >
     <!--
@@ -11,17 +12,13 @@
       :value="open"
       @changed="calculatePanelPosition"
     />
-    <PopoverButton ref="button">
-      <BrandedButton
-        color="secondary-softer"
-        icon-only
-        :icon="RiInformationLine"
-        size="xs"
-        keep-margins-even-without-borders
-        v-bind="buttonProps"
-      >
-        <slot />
-      </BrandedButton>
+    <PopoverButton
+      v-bind="buttonProps"
+      class="w-8 h-8 rounded-full -outline-offset-2 inline-flex items-center justify-center bg-transparent border-transparent hover:!bg-gray-some"
+    >
+      <slot>
+        <RiInformationLine class="size-5" />
+      </slot>
     </PopoverButton>
 
     <ClientOnly>
@@ -49,7 +46,6 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref, useTemplateRef } from 'vue'
 import { RiInformationLine } from '@remixicon/vue'
-import BrandedButton from './BrandedButton.vue'
 import ClientOnly from './ClientOnly.vue'
 import ValueWatcher from './ValueWatcher.vue'
 
@@ -58,7 +54,7 @@ defineProps<{
   noMargin?: boolean
 }>()
 
-const buttonRef = useTemplateRef('button')
+const popoverRef = useTemplateRef('popover')
 const panelStyle = ref({})
 
 // Since the parent of the component can have an overflow-hidden
@@ -66,17 +62,17 @@ const panelStyle = ref({})
 // We need to compute the correct position of the tooltip.
 const calculatePanelPosition = () => {
   nextTick(() => {
-    const button = buttonRef.value?.$el || buttonRef.value
+    const popover = popoverRef.value?.$el
 
-    if (!button) {
-      console.error('Cannot find the button of the Toggletip.)')
+    if (!popover) {
+      console.error('Cannot find the popover of the Toggletip.)')
       return
     }
-
-    const buttonRect = button.getBoundingClientRect()
+    console.log(popover)
+    const popoverRect = popover.getBoundingClientRect()
     panelStyle.value = {
-      left: `${buttonRect.left + window.scrollX}px`,
-      top: `${buttonRect.bottom + window.scrollY}px`,
+      left: `${popoverRect.left + window.scrollX}px`,
+      top: `${popoverRect.bottom + window.scrollY}px`,
     }
   })
 }

package/src/composables/useActiveDescendant.ts

@@ -5,7 +5,7 @@ export type Option = {
   id: string
 }
 
-export default function useActiveDescendant<T extends Option>(options: MaybeRefOrGetter<Array<T>>, direction: 'horizontal' | 'vertical') {
+export function useActiveDescendant<T extends Option>(options: MaybeRefOrGetter<Array<T>>, direction: 'horizontal' | 'vertical') {
   const active = ref<string | undefined>()
 
   const activeOption = computed<T | undefined>(() => toValue(options).find(option => option.id === active.value))

package/src/functions/datasets.ts

@@ -8,7 +8,7 @@ function constructUrl(baseUrl: string, path: string): string {
   return url.toString()
 }
 
-export default function getDatasetOEmbedHtml(type: string, id: string): string {
+export function getDatasetOEmbedHtml(type: string, id: string): string {
   const config = useComponentsConfig()
 
   const staticUrl = constructUrl(config.baseUrl, 'oembed.js')

package/src/functions/organizations.ts

@@ -91,7 +91,7 @@ export function isOrganizationCertified(organization: Organization | null): bool
   return hasBadge(organization, CERTIFIED) && (isType(organization, PUBLIC_SERVICE) || isType(organization, LOCAL_AUTHORITY))
 }
 
-export default function getOrganizationOEmbedHtml(type: string, id: string): string {
+export function getOrganizationOEmbedHtml(type: string, id: string): string {
   const config = useComponentsConfig()
 
   const staticUrl = constructUrl(config.baseUrl, 'oembed.js')

package/src/main.ts

@@ -33,6 +33,7 @@ import DatasetQualityInline from './components/DatasetQualityInline.vue'
 import DatasetQualityItem from './components/DatasetQualityItem.vue'
 import DatasetQualityScore from './components/DatasetQualityScore.vue'
 import DatasetQualityTooltipContent from './components/DatasetQualityTooltipContent.vue'
+import ExtraAccordion from './components/ExtraAccordion.vue'
 import OrganizationCard from './components/OrganizationCard.vue'
 import OrganizationNameWithCertificate from './components/OrganizationNameWithCertificate.vue'
 import OwnerType from './components/OwnerType.vue'
@@ -44,26 +45,34 @@ import ResourceAccordion from './components/ResourceAccordion/ResourceAccordion.
 import ResourceIcon from './components/ResourceAccordion/ResourceIcon.vue'
 import Swagger from './components/ResourceAccordion/Swagger.client.vue'
 import ReuseCard from './components/ReuseCard.vue'
+import ReuseDetails from './components/ReuseDetails.vue'
 import SimpleBanner from './components/SimpleBanner.vue'
 import StatBox from './components/StatBox.vue'
+import Tab from './components/Tabs/Tab.vue'
+import TabGroup from './components/Tabs/TabGroup.vue'
+import TabList from './components/Tabs/TabList.vue'
+import TabPanel from './components/Tabs/TabPanel.vue'
+import TabPanels from './components/Tabs/TabPanels.vue'
 import Tooltip from './components/Tooltip.vue'
 import Toggletip from './components/Toggletip.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
+export * from './composables/useActiveDescendant'
 export * from './composables/useReuseType'
 
-export * from './functions/dates'
-export * from './functions/organizations'
-export * from './functions/resources'
-export * from './functions/users'
 export * from './functions/datasets'
-export * from './functions/owned'
+export * from './functions/dates'
 export * from './functions/helpers'
+export * from './functions/markdown'
 export * from './functions/matomo'
 export * from './functions/never'
+export * from './functions/organizations'
+export * from './functions/owned'
+export * from './functions/resources'
+export * from './functions/reuses'
 export * from './functions/schemas'
-export * from './functions/markdown'
+export * from './functions/users'
 
 export type {
   UseFetchFunction,
@@ -159,6 +168,7 @@ export {
   DatasetQualityScore,
   DatasetQualityTooltipContent,
   DateRangeDetails,
+  ExtraAccordion,
   OrganizationCard,
   OrganizationNameWithCertificate,
   OwnerType,
@@ -169,9 +179,15 @@ export {
   ResourceAccordion,
   ResourceIcon,
   ReuseCard,
+  ReuseDetails,
   SimpleBanner,
   StatBox,
   Swagger,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
   Tooltip,
   Toggletip,
 }

package/src/types/datasets.ts

@@ -69,6 +69,7 @@ export type Dataset = BaseDataset & {
   slug: string
   quality: Quality
   metrics: {
+    dataservices: number
     discussions: number
     discussions_open: number
     followers: number

package/dist/Swagger.client-BisHyZkP.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./main-Qu3kUOIH.js";
-export {
-  f as default
-};