@datagouv/components-next 0.0.30 → 0.0.32

package/src/components/Tabs/TabGroup.vue

@@ -4,6 +4,8 @@
     :class="{
       'tabs-sm': size === 'sm',
     }"
+    :default-index="props.defaultIndex"
+    @change="onChange"
   >
     <slot />
   </TabGroup>
@@ -12,9 +14,19 @@
 <script setup lang="ts">
 import { TabGroup } from '@headlessui/vue'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   size?: 'sm' | 'md'
+  defaultIndex?: number
 }>(), {
   size: 'md',
+  defaultIndex: 0,
 })
+
+const emit = defineEmits<{
+  change: [value: number]
+}>()
+
+const onChange = (index: number) => {
+  emit('change', index)
+}
 </script>

package/src/components/Toggletip.vue

@@ -1,62 +1,90 @@
 <template>
   <Popover
-    v-slot="{ open }"
-    class="relative text-gray-title"
-    :focus="true"
+    v-slot="{ open, close }"
+    ref="popover"
+    class="relative"
   >
+    <!--
+      Little trick to watch for v-slot changes because HeadlessUI doesn't raise an event on open… :-(
+      Need to recompute on show because sometimes, the positions where incorrect because after first render, some div load and change the relative position of the button…
+    -->
+    <ValueWatcher
+      :value="open"
+      @changed="calculatePanelPosition"
+    />
     <PopoverButton
-      v-bind="$attrs"
-      ref="button"
-      :as="ToggletipButton"
+      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 />
+      <slot>
+        <RiInformationLine class="size-5" />
+      </slot>
     </PopoverButton>
-    <component
-      :is="teleportId ? Teleport : 'div'"
-      v-if="open"
-      :to="`#${teleportId}`"
-      :defer="teleportId ? true : undefined"
-    >
-      <PopoverPanel
-        ref="toggletip"
-        v-slot="{ close }"
-        class="toggletip"
-        :class="{
-          'p-0': noMargin,
-          'left-0': position === 'right',
-          'ml-6 top-24': teleportId,
-        }"
-      >
-        <slot
-          name="toggletip"
-          :close
-        />
-      </PopoverPanel>
-    </component>
+
+    <ClientOnly>
+      <Teleport to="#tooltips">
+        <PopoverPanel
+          v-show="open"
+          class="toggletip absolute z-10"
+          :class="{
+            'p-0': noMargin,
+          }"
+          :style="panelStyle"
+          static
+        >
+          <slot
+            name="toggletip"
+            :close
+          />
+        </PopoverPanel>
+      </Teleport>
+    </ClientOnly>
   </Popover>
 </template>
 
 <script setup lang="ts">
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import { Teleport } from 'vue'
-import ToggletipButton from './ToggletipButton.vue'
+import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref, useTemplateRef } from 'vue'
+import { RiInformationLine } from '@remixicon/vue'
+import ClientOnly from './ClientOnly.vue'
+import ValueWatcher from './ValueWatcher.vue'
 
-withDefaults(defineProps<{
+defineProps<{
+  buttonProps?: object
   noMargin?: boolean
-  position?: 'left' | 'right'
-  teleportId?: string
-}>(), {
-  noMargin: false,
-  position: 'left',
+}>()
+
+const popoverRef = useTemplateRef('popover')
+const panelStyle = ref({})
+
+// Since the parent of the component can have an overflow-hidden
+// we teleport the popover to a #tooltips div in the layout.
+// We need to compute the correct position of the tooltip.
+const calculatePanelPosition = () => {
+  nextTick(() => {
+    const popover = popoverRef.value?.$el
+
+    if (!popover) {
+      console.error('Cannot find the popover of the Toggletip.)')
+      return
+    }
+    console.log(popover)
+    const popoverRect = popover.getBoundingClientRect()
+    panelStyle.value = {
+      left: `${popoverRect.left + window.scrollX}px`,
+      top: `${popoverRect.bottom + window.scrollY}px`,
+    }
+  })
+}
+
+onMounted(() => {
+  calculatePanelPosition()
+  window.addEventListener('resize', calculatePanelPosition)
 })
-defineOptions({ inheritAttrs: false })
-</script>
 
-  <style scoped>
-  .z-10 {
-    z-index: 10;
-  }
-  .left-0 {
-    left: 0;
-  }
-  </style>
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', calculatePanelPosition)
+})
+
+onUpdated(() => calculatePanelPosition())
+</script>

package/src/components/ValueWatcher.vue

@@ -0,0 +1,18 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts" generic="T">
+import { watch } from 'vue'
+
+const props = defineProps<{
+  value: T
+}>()
+const emits = defineEmits<{
+  changed: [T]
+}>()
+
+watch(() => props.value, () => {
+  emits('changed', props.value)
+})
+</script>

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/composables/useReuseType.ts

@@ -1,8 +1,9 @@
 import { computedAsync } from '@vueuse/core'
 import { toValue, type MaybeRefOrGetter } from 'vue'
-import { fetchReuseTypes, getType } from '../functions/reuses'
+import { useFetchReuseTypes, getType } from '../functions/reuses'
 
 export function useReuseType(id: MaybeRefOrGetter<string>) {
+  const fetchReuseTypes = useFetchReuseTypes()
   const label = computedAsync(async () => {
     const idValue = toValue(id)
     const types = await fetchReuseTypes()

package/src/config.ts

@@ -7,19 +7,20 @@ export type PluginConfig = {
   apiBase: string
   devApiKey?: string | null
   datasetQualityGuideUrl?: string
+  maxJsonPreviewCharSize?: number // Maximum size of JSON to preview in characters. JSON preview module is partly collapsed by default so we can have a preview for large files.
+  maxPdfPreviewByteSize?: number // Maximum size of PDF to preview in bytes
+  maxXmlPreviewCharSize?: number // Maximum size of XML to preview in characters. XML preview module can NOT be collapsed by default so we should not have a preview for large files.
+  pmtilesViewerBaseUrl?: string | null // Base URL of a pmtiles viewer (ex: https://pmtiles.io/#url=)
   schemaValidataUrl?: string
   schemaDocumentationUrl?: string
   tabularApiUrl?: string
   tabularApiPageSize?: number
   tabularAllowRemote?: boolean
   tabularApiDataserviceId?: string
-  pmtilesViewerBaseUrl?: string | null // Base URL of a pmtiles viewer (ex: https://pmtiles.io/#url=)
   customUseFetch?: UseFetchFunction | null
   textClamp?: string | Component | null
   appLink?: Component | null
-  maxJsonPreviewSize?: number // Maximum size of JSON to preview in characters
-  maxPdfPreviewSize?: number // Maximum size of PDF to preview in bytes
-  maxXmlPreviewSize?: number // Maximum size of XML to preview in characters
+  clientOnly?: Component | null
 }
 
 export const configKey = Symbol() as InjectionKey<PluginConfig>

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

@@ -1,6 +1,7 @@
 import { useI18n } from 'vue-i18n'
 import type { Component } from 'vue'
 import { RiBankLine, RiBuilding2Line, RiCommunityLine, RiGovernmentLine, RiUserLine } from '@remixicon/vue'
+import { useComponentsConfig } from '../config'
 import type { Organization } from '../types/organizations'
 
 export const CERTIFIED = 'certified'
@@ -15,6 +16,12 @@ export type OrganizationTypes = typeof PUBLIC_SERVICE | typeof ASSOCIATION | typ
 
 export type UserType = typeof USER
 
+function constructUrl(baseUrl: string, path: string): string {
+  const url = new URL(baseUrl)
+  url.pathname = `${url.pathname}${path}`
+  return url.toString()
+}
+
 export function isType(organization: Organization, type: OrganizationTypes) {
   return hasBadge(organization, type)
 }
@@ -83,3 +90,10 @@ export function isOrganizationCertified(organization: Organization | null): bool
   if (!organization) return false
   return hasBadge(organization, CERTIFIED) && (isType(organization, PUBLIC_SERVICE) || isType(organization, LOCAL_AUTHORITY))
 }
+
+export function getOrganizationOEmbedHtml(type: string, id: string): string {
+  const config = useComponentsConfig()
+
+  const staticUrl = constructUrl(config.baseUrl, 'oembed.js')
+  return `<div data-udata-${type}="${id}" data-height="1500" data-width="1200"></div><script data-udata="${config.baseUrl}" src="${staticUrl}" async defer></script>`
+}

package/src/functions/reuses.ts

@@ -4,17 +4,20 @@ import { useComponentsConfig } from '../config'
 import type { ReuseTopic, ReuseType } from '../types/reuses'
 
 let reuseTypesRequest: Promise<Array<ReuseType>> | null = null
+export function useFetchReuseTypes() {
+  const config = useComponentsConfig()
+  const { locale } = useI18n()
 
-export async function fetchReuseTypes() {
-  if (!reuseTypesRequest) {
-    const config = useComponentsConfig()
-    const { locale } = useI18n()
-    reuseTypesRequest = ofetch<Array<ReuseType>>('api/1/reuses/types/', {
+  return async (): Promise<Array<ReuseType>> => {
+    if (reuseTypesRequest) {
+      return reuseTypesRequest
+    }
+
+    return await (reuseTypesRequest = ofetch<Array<ReuseType>>('api/1/reuses/types/', {
       baseURL: config.apiBase,
       query: { lang: locale.value },
-    })
+    }))
   }
-  return await reuseTypesRequest
 }
 
 export function getType(types: Array<ReuseType>, id: string): string {

package/src/functions/schemas.ts

@@ -45,20 +45,19 @@ export type SchemaResponseData = Array<RegisteredSchema>
 
 type SchemaPath = { schema_name: string } | { schema_url: string }
 
-const catalogRequest: Promise<Array<RegisteredSchema>> | null = null
-
-/**
- * Get Schema Catalog
- */
-export async function getCatalog(): Promise<SchemaResponseData> {
+let catalogRequest: Promise<Array<RegisteredSchema>> | null = null
+export function useGetCatalog() {
   const config = useComponentsConfig()
-  if (catalogRequest) {
-    return catalogRequest
-  }
 
-  return await ofetch('api/1/datasets/schemas/', {
-    baseURL: config.apiBase,
-  })
+  return async (): Promise<SchemaResponseData> => {
+    if (catalogRequest) {
+      return catalogRequest
+    }
+
+    return await (catalogRequest = ofetch('api/1/datasets/schemas/', {
+      baseURL: config.apiBase,
+    }))
+  }
 }
 
 export function findSchemaInCatalog(catalog: Array<RegisteredSchema>, schema: Schema | null): RegisteredSchema | null {
@@ -66,30 +65,32 @@ export function findSchemaInCatalog(catalog: Array<RegisteredSchema>, schema: Sc
   return catalog.find(registeredSchema => schema.name === registeredSchema.name) || null
 }
 
-export function getSchemaDocumentation(name: string): string {
+export function useGetSchemaDocumentation() {
   const config = useComponentsConfig()
-  return `${config.schemaDocumentationUrl}${name}/`
+  return (name: string) => `${config.schemaDocumentationUrl}${name}/`
 }
 
-export function getSchemaValidationUrl(resource: Resource, registeredSchema: RegisteredSchema): string | null {
+export function useGetSchemaValidationUrl() {
   const config = useComponentsConfig()
-  if (!resource.schema || !resource.schema.name) {
-    return null
-  }
+  return (resource: Resource, registeredSchema: RegisteredSchema) => {
+    if (!resource.schema || !resource.schema.name) {
+      return null
+    }
 
-  let schemaPath: SchemaPath = { schema_name: `schema-datagouvfr.${resource.schema.name}` }
-  if (resource.schema && resource.schema.version) {
-    const schemaVersion = resource.schema.version
-    const versionUrl = registeredSchema.versions.find(version => version.version_name === schemaVersion)?.schema_url
-    if (versionUrl) {
-      schemaPath = { schema_url: versionUrl }
+    let schemaPath: SchemaPath = { schema_name: `schema-datagouvfr.${resource.schema.name}` }
+    if (resource.schema && resource.schema.version) {
+      const schemaVersion = resource.schema.version
+      const versionUrl = registeredSchema.versions.find(version => version.version_name === schemaVersion)?.schema_url
+      if (versionUrl) {
+        schemaPath = { schema_url: versionUrl }
+      }
     }
+    const query = new URLSearchParams({
+      'input': 'url',
+      'url': resource.url,
+      'header-case': 'on',
+      ...schemaPath,
+    }).toString()
+    return `${config.schemaValidataUrl}/table-schema?${query}`
   }
-  const query = new URLSearchParams({
-    'input': 'url',
-    'url': resource.url,
-    'header-case': 'on',
-    ...schemaPath,
-  }).toString()
-  return `${config.schemaValidataUrl}/table-schema?${query}`
 }

package/src/functions/tabularApi.ts

@@ -20,8 +20,7 @@ export async function getData(config: PluginConfig, id: string, page: number, so
 /**
  * Call Tabular-api to get table profile
  */
-export async function getProfile(id: string) {
+export function useGetProfile() {
   const config = useComponentsConfig()
-
-  return await ofetch(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
+  return (id: string) => ofetch(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
 }

package/src/functions/users.ts

@@ -1,7 +1,7 @@
 import type { User } from '../types/users'
 import { useComponentsConfig } from '../config'
 
-export function getUserAvatar(user: User, size: number) {
+export function useGetUserAvatar() {
   const config = useComponentsConfig()
-  return user.avatar_thumbnail || `${config.apiBase}/api/1/avatars/${user.id}/${size}`
+  return (user: User, size: number) => user.avatar_thumbnail || `${config.apiBase}/api/1/avatars/${user.id}/${size}`
 }

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,25 +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,
@@ -158,6 +168,7 @@ export {
   DatasetQualityScore,
   DatasetQualityTooltipContent,
   DateRangeDetails,
+  ExtraAccordion,
   OrganizationCard,
   OrganizationNameWithCertificate,
   OwnerType,
@@ -168,8 +179,15 @@ export {
   ResourceAccordion,
   ResourceIcon,
   ReuseCard,
+  ReuseDetails,
   SimpleBanner,
   StatBox,
   Swagger,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
   Tooltip,
+  Toggletip,
 }

package/src/types/dataservices.ts

@@ -53,6 +53,7 @@ export type Dataservice = Owned & {
   }>
   deleted_at: string | null
   description: string
+  featured: boolean
   machine_documentation_url: string | null
   technical_documentation_url: string | null
   business_documentation_url: string | null

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/src/types/site.ts

@@ -1,6 +1,9 @@
 export type Site = {
   id: string
   title: string
+  datasets_page: string | null
+  reuses_page: string | null
+  dataservices_page: string | null
   metrics: {
     'dataservices': number
     'datasets': number

package/dist/Swagger.client-2tUSrvmQ.js

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

package/src/components/ToggletipButton.vue

@@ -1,14 +0,0 @@
-<template>
-  <BrandedButton
-    color="secondary-softer"
-    icon-only
-    :icon="RiInformationLine"
-    size="xs"
-    keep-margins-even-without-borders
-  />
-</template>
-
-<script setup lang="ts">
-import { RiInformationLine } from '@remixicon/vue'
-import BrandedButton from './BrandedButton.vue'
-</script>