@datagouv/components-next 0.0.21 → 0.0.22

package/dist/{vue3-xml-viewer.common-qOUjnppK.js → vue3-xml-viewer.common-BZLPbkUq.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-CgjLq1oz.js";
+import { g as Ke } from "./main-qCXX5fcf.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.21",
+  "version": "0.0.22",
   "private": false,
   "type": "module",
   "main": "./src/main.ts",
@@ -22,6 +22,7 @@
     "publish-stable": "npm publish --access public"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.1.8",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.5.0",
     "@vueuse/core": "^13.1.0",

package/src/components/OrganizationNameWithCertificate.vue

@@ -42,6 +42,7 @@ import { getOrganizationType, isOrganizationCertified } from '../functions/organ
 import type { Organization } from '../types/organizations'
 import { useComponentsConfig } from '../config'
 import OwnerTypeIcon from './OwnerTypeIcon.vue'
+import Tooltip from './Tooltip.vue'
 
 const config = useComponentsConfig()
 

package/src/components/Tooltip.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="relative"
+    @focusin="show = true"
+    @mouseenter="show = true"
+    @focusout="show = false"
+    @mouseleave="show = false"
+  >
+    <p
+      ref="reference"
+      v-bind="$attrs"
+      :aria-describedby="id"
+      class="!mb-0"
+    >
+      <slot />
+    </p>
+
+    <div
+      v-if="show"
+      :id
+      ref="floating"
+      role="tooltip"
+      aria-hidden="true"
+      class="z-10 pt-2"
+      :class="tooltipClass"
+      :style="loaded ? floatingStyles : ''"
+    >
+      <div class="drop-shadow bg-white p-2 whitespace-nowrap">
+        <slot name="tooltip" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
+import { onMounted, ref, useId, useTemplateRef } from 'vue'
+
+defineProps<{
+  tooltipClass?: string
+}>()
+
+const id = useId()
+const show = ref(false)
+const loaded = ref(false)
+
+const referenceRef = useTemplateRef('reference')
+const floatingRef = useTemplateRef('floating')
+const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+  middleware: [autoPlacement({
+    allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
+  })],
+  whileElementsMounted: autoUpdate,
+})
+
+onMounted(() => loaded.value = true)
+</script>

package/src/main.ts

@@ -43,6 +43,7 @@ import Swagger from './components/ResourceAccordion/Swagger.client.vue'
 import ReuseCard from './components/ReuseCard.vue'
 import SimpleBanner from './components/SimpleBanner.vue'
 import StatBox from './components/StatBox.vue'
+import Tooltip from './components/Tooltip.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
@@ -147,4 +148,5 @@ export {
   SimpleBanner,
   StatBox,
   Swagger,
+  Tooltip,
 }

package/dist/Swagger.client-fEwFVkkQ.js

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