@datagouv/components-next 1.1.1 → 1.1.2

package/dist/{tilecoord-Db24Px13.js → tilecoord-A0fLnBZr.js}

@@ -1,6 +1,6 @@
-import { T as _, W as nt, n as xt, c as H, b as et } from "./Image-34hvypZI.js";
-import { z as Tt, g as pt } from "./common-PJfpC179.js";
-import { aC as It, E as ft, al as Xt, U as dt, g as at, X as Wt, w as Mt, F as b, n as _t, L, an as gt, aS as vt, x as Yt, r as Lt, aT as Ft, ak as wt, aI as yt, az as Dt, aJ as Ot, aU as st, ae as ot, i as Ct, W as z, a1 as $, d as V, l as Pt, u as rt, a7 as ht, I as At, a as Rt } from "./proj-DsetBcW7.js";
+import { T as _, W as nt, n as xt, c as H, b as et } from "./Image-BijNEG0p.js";
+import { z as Tt, g as pt } from "./common-BjQlan3k.js";
+import { aD as It, E as ft, al as Xt, U as dt, g as at, X as Wt, w as Mt, F as b, n as _t, L, an as gt, aU as vt, x as Yt, r as Lt, aV as Ft, ak as wt, aJ as yt, aA as Dt, aK as Ot, aW as st, ae as ot, i as Ct, W as z, a1 as $, d as V, l as Pt, u as rt, a7 as ht, I as At, a as Rt } from "./proj-CsNo9yH1.js";
 class mt extends It {
   /**
    * @param {import("./tilecoord.js").TileCoord} tileCoord Tile coordinate.
@@ -339,7 +339,7 @@ function ut(a, t, e, s) {
   }
   return i;
 }
-function Nt(a, t, e, s) {
+function Kt(a, t, e, s) {
   const n = Yt(e);
   let i = ut(
     a,
@@ -356,7 +356,7 @@ function Nt(a, t, e, s) {
     ), isFinite(i) && i > 0;
   }), i;
 }
-function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
+function Nt(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
   const r = H(
     Math.round(e * a),
     Math.round(e * t),
@@ -409,7 +409,7 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
   return m.getTriangles().forEach(function(o, y, C) {
     const p = o.source, I = o.target;
     let v = p[0][0], Y = p[0][1], W = p[1][0], M = p[1][1], D = p[2][0], A = p[2][1];
-    const G = h((I[0][0] - u[0]) / i), N = h(
+    const G = h((I[0][0] - u[0]) / i), K = h(
       -(I[0][1] - u[1]) / i
     ), R = h((I[1][0] - u[0]) / i), k = h(
       -(I[1][1] - u[1]) / i
@@ -420,32 +420,32 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
     const Et = [
       [W, M, 0, 0, R - G],
       [D, A, 0, 0, U - G],
-      [0, 0, W, M, k - N],
-      [0, 0, D, A, Q - N]
-    ], S = vt(Et);
-    if (!S)
+      [0, 0, W, M, k - K],
+      [0, 0, D, A, Q - K]
+    ], N = vt(Et);
+    if (!N)
       return;
     if (r.save(), r.beginPath(), Gt() || !x) {
       r.moveTo(R, k);
-      const O = 4, K = G - R, it = N - k;
+      const O = 4, S = G - R, it = K - k;
       for (let P = 0; P < O; P++)
         r.lineTo(
-          R + h((P + 1) * K / O),
+          R + h((P + 1) * S / O),
           k + h(P * it / (O - 1))
         ), P != O - 1 && r.lineTo(
-          R + h((P + 1) * K / O),
+          R + h((P + 1) * S / O),
           k + h((P + 1) * it / (O - 1))
         );
       r.lineTo(U, Q);
     } else
-      r.moveTo(R, k), r.lineTo(G, N), r.lineTo(U, Q);
+      r.moveTo(R, k), r.lineTo(G, K), r.lineTo(U, Q);
     r.clip(), r.transform(
-      S[0],
-      S[2],
-      S[1],
-      S[3],
+      N[0],
+      N[2],
+      N[1],
+      N[3],
       G,
-      N
+      K
     ), r.translate(
       E[0] - j,
       E[3] - q
@@ -454,10 +454,10 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
     if (l)
       Z = l.canvas, r.scale(d, -d);
     else {
-      const O = g[0], K = O.extent;
+      const O = g[0], S = O.extent;
       Z = O.image, r.scale(
-        L(K) / Z.width,
-        -b(K) / Z.height
+        L(S) / Z.width,
+        -b(S) / Z.height
       );
     }
     r.drawImage(Z, 0, 0), r.restore();
@@ -467,7 +467,7 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
   }), r.restore()), r.canvas;
 }
 const Zt = 10, lt = 0.25;
-class Kt {
+class St {
   /**
    * @param {import("../proj/Projection.js").default} sourceProj Source projection.
    * @param {import("../proj/Projection.js").default} targetProj Target projection.
@@ -715,7 +715,7 @@ class Vt extends mt {
     l && (h ? h = V(h, l) : h = l);
     const f = n.getResolution(
       this.wrappedTileCoord_[0]
-    ), d = Nt(
+    ), d = Kt(
       t,
       s,
       E,
@@ -726,7 +726,7 @@ class Vt extends mt {
       return;
     }
     const u = X !== void 0 ? X : bt;
-    if (this.triangulation_ = new Kt(
+    if (this.triangulation_ = new St(
       t,
       s,
       E,
@@ -806,7 +806,7 @@ class Vt extends mt {
       ), g = this.targetTileGrid_.getTileCoordExtent(
         this.wrappedTileCoord_
       );
-      this.canvas_ = St(
+      this.canvas_ = Nt(
         n,
         i,
         this.pixelRatio_,
@@ -890,13 +890,13 @@ export {
   zt as I,
   Vt as R,
   mt as T,
-  Kt as a,
+  St as a,
   Bt as b,
   ut as c,
   Jt as d,
   $t as e,
   ts as g,
   ss as h,
-  St as r,
+  Nt as r,
   es as w
 };

package/dist/{vue3-xml-viewer.common-sHPSE-jD.js → vue3-xml-viewer.common-BGsoNyZe.js}

@@ -1,4 +1,4 @@
-import { c as Ke } from "./main-K-42Oe8-.js";
+import { c as Ke } from "./main-D4WQMky0.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.1.1",
+  "version": "1.1.2",
   "private": false,
   "type": "module",
   "engines": {
@@ -27,7 +27,7 @@
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
     "echarts": "^6.0.0",
-    "geopf-extensions-openlayers": "^1.0.0-beta.5",
+    "geopf-extensions-openlayers": "^1.0.0-beta.10",
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
     "ofetch": "^1.4.1",

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/ResourceAccordion/MapContainer.client.vue

@@ -89,10 +89,8 @@ async function displayMap() {
 
   const attributions = new GeoportalAttribution({
     position: 'bottom-right',
-    // collapsed option is ignored by the library, thus the override below
-    // see https://github.com/IGNF/geopf-extensions-openlayers/issues/497
+    collapsed: false,
   })
-  attributions.setCollapsed(false)
   map.addControl(attributions)
 
   const layerImport = new LayerImport({

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/components/Search/GlobalSearch.vue

@@ -13,6 +13,7 @@
       <SearchInput
         v-model="q"
         :placeholder="resolvedPlaceholder"
+        :auto-focus
       />
     </div>
     <div class="grid grid-cols-12 mt-2 md:mt-5">
@@ -401,11 +402,17 @@ const props = withDefaults(defineProps<{
   config?: GlobalSearchConfig
   placeholder?: string | null
   hideSearchInput?: boolean
+  autoFocus?: boolean
 }>(), {
   config: getDefaultGlobalSearchConfig,
   hideSearchInput: false,
+  autoFocus: true,
 })
 
+const emit = defineEmits<{
+  resultsCount: [total: number]
+}>()
+
 // defineModel's default is static and can't depend on props, so we cast and initialize manually
 const currentType = defineModel<string>('type') as Ref<string>
 if (!currentType.value) currentType.value = configKey(props.config[0] ?? { class: 'datasets' })
@@ -475,6 +482,11 @@ const showSidebar = computed(() => props.config.length > 1 || activeFilters.valu
 // URL query params
 const q = useRouteQuery<string>('q', '')
 const { debounced: qDebounced, flush: flushQ } = useDebouncedRef(q, componentsConfig.searchDebounce ?? 300)
+// When the search input is hidden, the parent owns the input and is expected
+// to debounce user typing itself (otherwise typing would land in the URL
+// instantly via v-model and stack two debounces). Bypass the internal debounce
+// so URL-driven q changes hit the fetch params immediately.
+const qForParams = computed(() => props.hideSearchInput ? q.value : qDebounced.value)
 const page = useRouteQuery('page', 1, { transform: Number })
 const sort = useRouteQuery<string | undefined>('sort')
 
@@ -550,7 +562,7 @@ watch(currentType, () => {
 const stableParamsOptions = {
   allFilters,
   customFilterRegistry,
-  q: qDebounced,
+  q: qForParams,
   sort,
   page,
   pageSize,
@@ -643,7 +655,7 @@ for (const c of props.config) {
 // intentionally excluded here to avoid resetting the page when a filter
 // registers with its URL-derived value.
 const filtersForReset = computed(() => ({
-  q: qDebounced.value,
+  q: qForParams.value,
   organization: organizationId.value,
   organization_badge: organizationType.value,
   tag: tag.value,
@@ -712,6 +724,10 @@ function resetFilters() {
 const searchResults = computed(() => resultsMap[currentType.value]?.data.value)
 const searchResultsStatus = computed(() => resultsMap[currentType.value]?.status.value)
 
+watch(searchResults, (results) => {
+  if (results) emit('resultsCount', results.total)
+}, { immediate: true })
+
 // RSS feed URL for datasets
 const rssUrl = computed(() => {
   if (currentTypeConfig.value?.class !== 'datasets') return null
@@ -726,7 +742,7 @@ const rssUrl = computed(() => {
   }
 
   // Add active filters
-  if (qDebounced.value) params.set('q', qDebounced.value)
+  if (qForParams.value) params.set('q', qForParams.value)
   if (organizationId.value) params.set('organization', organizationId.value)
   if (organizationType.value) params.set('organization_badge', organizationType.value)
   if (tag.value) params.set('tag', tag.value)

package/src/components/Search/SearchInput.vue

@@ -37,7 +37,7 @@ import BrandedButton from '../BrandedButton.vue'
 
 const q = defineModel<string>({ required: true })
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   placeholder?: string | null
   autoFocus?: boolean
 }>(), {
@@ -57,6 +57,7 @@ const focus = () => {
 }
 
 onMounted(async () => {
+  if (!props.autoFocus) return
   await nextTick()
   focus()
 })

package/src/composables/useMetrics.ts

@@ -13,6 +13,6 @@ export function useMetrics() {
     getDatasetMetrics: (datasetId: string) => getDatasetMetrics(datasetId, config.metricsApiUrl!),
     getDataserviceMetrics: (dataserviceId: string) => getDataserviceMetrics(dataserviceId, config.metricsApiUrl!),
     getReuseMetrics: (reuseId: string) => getReuseMetrics(reuseId, config.metricsApiUrl!),
-    createDatasetsForOrganizationMetricsUrl: (organizationId: string) => createDatasetsForOrganizationMetricsUrl(organizationId, config.metricsApiUrl!, config.apiBase),
+    createDatasetsForOrganizationMetricsUrl: (organizationId: string) => createDatasetsForOrganizationMetricsUrl(organizationId, config.metricsApiUrl!, config.apiBase, config.$fetch),
   }
 }

package/src/config.ts

@@ -1,6 +1,6 @@
 import { inject, type Component, type InjectionKey } from 'vue'
 import type { UseFetchFunction } from './functions/api.types'
-import type { FetchOptions } from 'ofetch'
+import type { $Fetch, FetchOptions } from 'ofetch'
 
 export type PluginConfig = {
   name: string // Name of the application (ex: data.gouv.fr)
@@ -25,6 +25,16 @@ export type PluginConfig = {
   tabularAllowRemote?: boolean
   tabularApiDataserviceId?: string
   customUseFetch?: UseFetchFunction | null
+  /**
+   * Imperative configured fetch (auth, headers, error handling): the single source of truth for
+   * requests. The default `useFetch` uses it as its transport, and imperative helpers (metrics CSV
+   * export, …) call it directly — so they never need a `?? ofetch` fallback.
+   * Optional for consumers: when omitted, the plugin defaults it to an `ofetch` instance built from
+   * the `onRequest`/`onResponse` hooks below (see the `datagouv` plugin install). A consumer can
+   * instead provide its own (e.g. a Bearer-authenticated `$fetch`) and skip the hooks entirely.
+   */
+  $fetch?: $Fetch | null
+  /** Auth/headers/error hooks. Folded into the default `$fetch` when no `$fetch` is provided. */
   onRequest?: FetchOptions['onRequest']
   onRequestError?: FetchOptions['onRequestError']
   onResponse?: FetchOptions['onResponse']
@@ -38,8 +48,12 @@ export type PluginConfig = {
 
 export const configKey = Symbol() as InjectionKey<PluginConfig>
 
-export function useComponentsConfig(): PluginConfig {
+// After the `datagouv` plugin install, `$fetch` is always set (defaulted to an ofetch instance), so
+// consumers of the config can rely on it without a fallback.
+export type ResolvedPluginConfig = PluginConfig & { $fetch: $Fetch }
+
+export function useComponentsConfig(): ResolvedPluginConfig {
   const config = inject(configKey)
   if (!config) throw new Error('Calling `useComponentsConfig` outside @datagouv/components')
-  return config
+  return config as ResolvedPluginConfig
 }

package/src/functions/api.ts

@@ -1,7 +1,6 @@
 import { ref, toValue, watchEffect, onMounted, type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue'
 import { ofetch } from 'ofetch'
 import { useComponentsConfig } from '../config'
-import { useTranslation } from '../composables/useTranslation'
 import type { AsyncData, AsyncDataRequestStatus, UseFetchOptions } from './api.types'
 
 function deepToValue(obj: MaybeRefOrGetter<Record<string, unknown> | undefined>): Record<string, unknown> | undefined {
@@ -18,8 +17,6 @@ export async function useFetch<DataT, ErrorT = never>(
 ): Promise<AsyncData<DataT, ErrorT>> {
   const config = useComponentsConfig()
 
-  const { locale } = useTranslation()
-
   if (config.customUseFetch) {
     return await config.customUseFetch(url, options)
   }
@@ -37,38 +34,12 @@ export async function useFetch<DataT, ErrorT = never>(
     status.value = 'pending'
     try {
       data.value = isRaw
+        // Raw targets another data.gouv service (the Tabular API in TabularExplorer) via its own
+        // absolute URL, so it must stay bare ofetch: no datagouv apiBase, no datagouv auth attached.
         ? await ofetch<DataT | null>(urlValue, { params: params ?? query })
-        : await ofetch<DataT | null>(urlValue, {
-            baseURL: config.apiBase,
-            params: params ?? query,
-            onRequest(param) {
-              if (config.onRequest) {
-                if (Array.isArray(config.onRequest)) {
-                  config.onRequest.forEach(r => r(param))
-                }
-                else {
-                  config.onRequest(param)
-                }
-              }
-              const { options } = param
-              options.headers.set('Content-Type', 'application/json')
-              options.headers.set('Accept', 'application/json')
-              options.credentials = 'include'
-              if (config.devApiKey) {
-                options.headers.set('X-API-KEY', config.devApiKey)
-              }
-
-              if (locale) {
-                if (!options.params) {
-                  options.params = {}
-                }
-                options.params['lang'] = locale
-              }
-            },
-            onRequestError: config.onRequestError,
-            onResponse: config.onResponse,
-            onResponseError: config.onResponseError,
-          })
+        // The configured `$fetch` carries baseURL + auth + headers (see the `datagouv` plugin install
+        // for the default one). We only forward the URL and params here.
+        : await config.$fetch<DataT | null>(urlValue, { baseURL: config.apiBase, params: params ?? query })
       status.value = 'success'
     }
     catch (e) {

package/src/functions/metrics.ts

@@ -1,5 +1,5 @@
 import { escapeCsvValue } from './helpers'
-import { ofetch } from 'ofetch'
+import { ofetch, type $Fetch } from 'ofetch'
 import type { DatasetV2 } from '../types/datasets'
 import type { PaginatedArray } from '../types/api'
 
@@ -119,14 +119,16 @@ export async function getDatasetMetrics(datasetId: string, metricsApi: string):
   }
 }
 
-export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string) {
+export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string, apiFetch: $Fetch) {
   let data = 'dataset_title,dataset_id,month,monthly_visit,monthly_download_resource\n'
 
-  // fetch datasets info from organization datasets
+  // fetch datasets info from organization datasets through the configured fetch, so it carries the
+  // consumer's auth (cookie for cdata via `$api`, Bearer for verticals) instead of a hardcoded
+  // `credentials: 'include'`, which breaks CORS cross-origin on the verticals.
   const datasets: Record<string, Record<string, string>> = {}
   let datasetsUrl: string | null = `/api/2/datasets/?organization=${organizationId}&page_size=200`
   while (datasetsUrl) {
-    const body: PaginatedArray<DatasetV2> = await ofetch(datasetsUrl, { baseURL: apiBase, credentials: 'include' })
+    const body: PaginatedArray<DatasetV2> = await apiFetch(datasetsUrl, { baseURL: apiBase })
     datasetsUrl = body.next_page
     for (const row of body.data) {
       datasets[row.id] = { title: row.title }

package/src/main.ts

@@ -104,6 +104,8 @@ import InfiniteLoader from './components/InfiniteLoader.vue'
 import TabularExplorer from './components/TabularExplorer/TabularExplorer.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
+import { ofetch } from 'ofetch'
+import { useTranslation } from './composables/useTranslation'
 
 export { Toaster, toast } from 'vue-sonner'
 
@@ -278,6 +280,31 @@ export {
 // Vue Plugin
 const datagouv: Plugin<PluginConfig> = {
   async install(app: App, options) {
+    // Default `$fetch` to an ofetch instance carrying the datagouv API specifics + the consumer's
+    // auth hooks, so everything downstream (the default `useFetch`, imperative helpers) can rely on
+    // a single configured fetch. A consumer that provides its own `$fetch` keeps full control.
+    if (!options.$fetch) {
+      options.$fetch = ofetch.create({
+        baseURL: options.apiBase,
+        onRequest(context) {
+          if (options.onRequest) {
+            if (Array.isArray(options.onRequest)) options.onRequest.forEach(hook => hook(context))
+            else options.onRequest(context)
+          }
+          context.options.headers.set('Content-Type', 'application/json')
+          context.options.headers.set('Accept', 'application/json')
+          if (options.devApiKey) context.options.headers.set('X-API-KEY', options.devApiKey)
+          const { locale } = useTranslation()
+          if (locale) {
+            context.options.params ??= {}
+            context.options.params['lang'] = locale
+          }
+        },
+        onRequestError: options.onRequestError,
+        onResponse: options.onResponse,
+        onResponseError: options.onResponseError,
+      })
+    }
     app.provide(configKey, options)
     if (!options.textClamp) {
       const textClamp = await import('vue3-text-clamp')

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'