@datagouv/components-next 1.0.2-dev.3 → 1.0.2-dev.31

package/src/components/ResourceAccordion/Pmtiles.client.vue

@@ -1,13 +1,8 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="hasError"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-if="hasError">
+      {{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}
+    </PreviewUnavailable>
     <div
       v-else
       class="-mx-4"
@@ -53,7 +48,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, useTemplateRef } from 'vue'
-import { RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
+import { RiExternalLinkFill } from '@remixicon/vue'
 import { Protocol, PMTiles } from 'pmtiles'
 import maplibregl from 'maplibre-gl'
 import DOMPurify from 'dompurify'
@@ -64,7 +59,7 @@ import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 import BrandedButton from '../BrandedButton.vue'
 import styleVector from '../../../assets/json/vector.json'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 import { getOwnerName, getOwnerPage } from '../../functions/owned'

package/src/components/ResourceAccordion/Preview.vue

@@ -1,13 +1,8 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="hasError"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-if="hasError">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
     <PreviewLoader v-else-if="loading" />
     <div
       v-else
@@ -105,7 +100,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { RiArrowDownLine, RiArrowUpLine, RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
+import { RiArrowDownLine, RiArrowUpLine, RiExternalLinkFill } from '@remixicon/vue'
 import Pagination from '../Pagination.vue'
 import { getData, type SortConfig } from '../../functions/tabularApi'
 import { useFormatDate } from '../../functions/dates'
@@ -113,7 +108,7 @@ import { trackEvent } from '../../functions/matomo'
 import type { Resource } from '../../types/resources'
 import { useComponentsConfig } from '../../config'
 import BrandedButton from '../BrandedButton.vue'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 import PreviewLoader from './PreviewLoader.vue'

package/src/components/ResourceAccordion/PreviewLoader.vue

@@ -1,7 +1,6 @@
 <template>
   <ContentLoader
-    :width="1124"
-    :height="300"
+    viewBox="0 0 1124 300"
     :speed="2"
     primary-color="#f3f3f3"
     secondary-color="#ecebeb"

package/src/components/ResourceAccordion/PreviewUnavailable.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col items-center py-12">
+    <img
+      :src="microscopeSrc"
+      class="h-20 mb-3"
+      alt=""
+    >
+    <p class="fr-text--bold mb-1">
+      {{ t("Aucun aperçu disponible") }}
+    </p>
+    <p class="text-sm text-gray-medium mb-0 text-center max-w-lg">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import microscopeSrc from '../../../assets/illustrations/microscope.svg?url'
+
+const { t } = useTranslation()
+</script>

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -387,9 +387,8 @@ import { trackEvent } from '../../functions/matomo'
 import CopyButton from '../CopyButton.vue'
 import { useComponentsConfig } from '../../config'
 import { getOwnerName } from '../../functions/owned'
-import { getResourceFormatIcon, getResourceTitleId, detectOgcService } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
-import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'
 import { useTranslation } from '../../composables/useTranslation'
 import { useHasTabularData } from '../../composables/useHasTabularData'
 import Metadata from './Metadata.vue'

package/src/components/ResourceAccordion/XmlPreview.client.vue

@@ -9,46 +9,32 @@
     >
       {{ t("Chargement de l'aperçu XML...") }}
     </div>
-    <SimpleBanner
-      v-else-if="fileTooLarge"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ fileSizeBytes
-        ? t("Fichier XML trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-      }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error === 'network'"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Ce fichier XML ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Erreur lors du chargement de l'aperçu XML.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-else-if="fileTooLarge">
+      {{ fileSizeBytes
+        ? t("Le fichier XML est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.")
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
+      }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error === 'cors'">
+      {{ t("Ce fichier XML ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error === 'network'">
+      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-
 import { useComponentsConfig } from '../../config'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
+import { getResourceFilesize, getResourceCorsStatus } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
 import '../../types/vue3-xml-viewer.d'
-import { getResourceFilesize } from '../../main'
 
 const XmlViewer = defineAsyncComponent(() =>
   import('vue3-xml-viewer').then((module) => {
@@ -70,36 +56,37 @@ const fileTooLarge = ref(false)
 
 const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
 
-const shouldLoadXml = computed(() => {
-  const size = fileSizeBytes.value
-  if (!size) {
-    // If we don't know the size, don't risk loading a potentially huge file
-    return false
-  }
-
-  // Check if maxXmlPreviewCharSize is configured
-  if (!config.maxXmlPreviewCharSize) {
-    // If no limit is set, don't load unknown files
-    return false
-  }
+const corsStatus = computed(() => getResourceCorsStatus(props.resource))
 
+const isSizeAllowed = computed(() => {
+  const size = fileSizeBytes.value
   // Convert maxXmlPreviewCharSize from characters to bytes (rough estimate)
   // Assuming average 1 byte per character for XML
   const maxByteSize = config.maxXmlPreviewCharSize
 
+  // If we don't know the size or the max size, don't risk loading a potentially huge file
+  if (!size || !maxByteSize) return false
+
   return size <= maxByteSize
 })
 
 const fetchXmlData = async () => {
-  // Check if file is too large or size is unknown before making the request
-  if (!shouldLoadXml.value) {
+  error.value = null
+  fileTooLarge.value = false
+
+  // Check if file is too large or size is unknown
+  if (!isSizeAllowed.value) {
     fileTooLarge.value = true
     return
   }
 
-  loading.value = true
-  error.value = null
+  // Check if CORS is allowed
+  if (corsStatus.value === 'blocked') {
+    error.value = 'cors'
+    return
+  }
 
+  loading.value = true
   try {
     const response = await fetch(props.resource.url)
     // const response = await fetch('/test-data.xml') // For testing locally without CORS issues

package/src/components/ResourceExplorer/ResourceExplorer.vue

@@ -159,6 +159,22 @@ watch(searchDebounced, () => {
   }
 })
 
+// Separate useFetch for loadMore, initialized at setup time with immediate: false
+// so that it doesn't fetch until execute() is called from the event handler.
+const loadMoreType = ref<ResourceType>('main')
+const loadMorePage = ref(1)
+const loadMoreParams = computed(() => ({
+  type: loadMoreType.value,
+  page_size: PAGE_SIZE,
+  page: loadMorePage.value,
+  q: searchDebounced.value || undefined,
+}))
+const { data: loadMoreData, execute: executeLoadMore } = await useFetch<PaginatedArray<Resource>>(url, {
+  params: loadMoreParams,
+  immediate: false,
+  watch: false,
+})
+
 const loadMore = async (type: ResourceType) => {
   const index = RESOURCE_TYPE.indexOf(type)
   if (index === -1) return
@@ -166,17 +182,12 @@ const loadMore = async (type: ResourceType) => {
   const extraRef = extraResourcesByType[index]!
   pageRef.value++
 
-  const { data } = await useFetch<PaginatedArray<Resource>>(url, {
-    params: {
-      type,
-      page_size: PAGE_SIZE,
-      page: pageRef.value,
-      q: searchDebounced.value || undefined,
-    },
-  })
+  loadMoreType.value = type
+  loadMorePage.value = pageRef.value
+  await executeLoadMore()
 
-  if (data.value) {
-    extraRef.value = [...extraRef.value, ...data.value.data]
+  if (loadMoreData.value) {
+    extraRef.value = [...extraRef.value, ...loadMoreData.value.data]
   }
 }
 

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -17,6 +17,12 @@
           />
         </div>
         <div class="text-gray-medium text-xs flex items-center gap-1">
+          <SchemaBadge :resource />
+          <RiSubtractLine
+            v-if="resource.schema"
+            aria-hidden="true"
+            class="size-3 fill-gray-medium"
+          />
           <span>{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
           <RiSubtractLine
             aria-hidden="true"
@@ -133,9 +139,12 @@
                 :url="resource.extras['apidocUrl'] as string"
               />
               <Preview
-                v-else
+                v-else-if="hasTabularData"
                 :resource="resource"
               />
+              <PreviewUnavailable v-else>
+                {{ t("Ce fichier ne peut pas être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+              </PreviewUnavailable>
             </div>
             <div v-if="tab.key === 'description'">
               <MarkdownViewer
@@ -298,6 +307,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from 'vue'
 import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiInformationLine, RiSubtractLine } from '@remixicon/vue'
+import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
 import { toast } from 'vue-sonner'
 import BrandedButton from '../BrandedButton.vue'
 import CopyButton from '../CopyButton.vue'
@@ -313,9 +323,9 @@ import Tooltip from '../Tooltip.vue'
 import Preview from '../ResourceAccordion/Preview.vue'
 import DataStructure from '../ResourceAccordion/DataStructure.vue'
 import Metadata from '../ResourceAccordion/Metadata.vue'
+import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
 import { filesize, summarize } from '../../functions/helpers'
-import { getResourceFormatIcon } from '../../functions/resources'
-import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'
+import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
 import { useComponentsConfig } from '../../config'
 import { useFormatDate } from '../../functions/dates'

package/src/composables/useResourceCapabilities.ts

@@ -88,7 +88,7 @@ export function useResourceCapabilities(
     if (hasTabularData.value) {
       options.push({ key: 'data', label: t('Données') })
     }
-    else if (hasPreview.value || hasDatafairPreview.value || hasOpenAPIPreview.value) {
+    else {
       options.push({ key: 'data', label: t('Aperçu') })
     }
 

package/src/config.ts

@@ -5,6 +5,8 @@ import type { FetchOptions } from 'ofetch'
 export type PluginConfig = {
   name: string // Name of the application (ex: data.gouv.fr)
   baseUrl: string
+  /** Hostnames allowed in Access-Control-Allow-Origin for resource preview CORS checks (e.g. data.gouv.fr). */
+  trustedDomains?: string[]
   apiBase: string
   devApiKey?: string | null
   datasetQualityGuideUrl?: string

package/src/functions/datasets.ts

@@ -1,6 +1,4 @@
 import { useComponentsConfig } from '../config'
-import type { Dataset, DatasetV2 } from '../types/datasets'
-import type { CommunityResource, Resource } from '../types/resources'
 
 function constructUrl(baseUrl: string, path: string): string {
   const url = new URL(baseUrl)
@@ -14,18 +12,3 @@ export function getDatasetOEmbedHtml(type: string, id: string): string {
   const staticUrl = constructUrl(config.baseUrl, 'oembed.js')
   return `<div data-udata-${type}="${id}"></div><script data-udata="${config.baseUrl}" src="${staticUrl}" async defer></script>`
 }
-
-export function isCommunityResource(resource: Resource | CommunityResource): boolean {
-  return 'organization' in resource || 'owner' in resource
-}
-
-export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
-  return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
-}
-
-export function getResourceFilesize(resource: Resource): null | number {
-  if (resource.filesize) return resource.filesize
-  if ('analysis:content-length' in resource.extras) return resource.extras['analysis:content-length'] as number
-
-  return null
-}

package/src/functions/resources.ts

@@ -1,13 +1,15 @@
 import { readonly, type Component } from 'vue'
 
 import { RiEarthLine, RiMap2Line } from '@remixicon/vue'
+import { useComponentsConfig } from '../config'
 import Archive from '../components/Icons/Archive.vue'
 import Code from '../components/Icons/Code.vue'
+import type { Dataset, DatasetV2 } from '../types/datasets'
 import Documentation from '../components/Icons/Documentation.vue'
 import Image from '../components/Icons/Image.vue'
 import Link from '../components/Icons/Link.vue'
 import Table from '../components/Icons/Table.vue'
-import type { Resource } from '../types/resources'
+import type { CommunityResource, Resource } from '../types/resources'
 import { useTranslation } from '../composables/useTranslation'
 
 export function getResourceFormatIcon(format: string): Component | null {
@@ -129,3 +131,56 @@ export const detectOgcService = (resource: Resource) => {
   }
   return false
 }
+
+export function isCommunityResource(resource: Resource | CommunityResource): boolean {
+  return 'organization' in resource || 'owner' in resource
+}
+
+export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
+  return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
+}
+
+export function getResourceFilesize(resource: Resource): null | number {
+  if (resource.filesize) return resource.filesize
+  if ('analysis:content-length' in resource.extras) return resource.extras['analysis:content-length'] as number
+
+  return null
+}
+
+type CorsStatus = 'allowed' | 'blocked' | 'unknown'
+
+export const getResourceCorsStatus = (resource: Resource): CorsStatus => {
+  const extras = resource.extras
+  if (!extras || !('check:cors:allow-origin' in extras)) {
+    return 'unknown'
+  }
+
+  const allowOrigin = extras['check:cors:allow-origin'] as string | undefined
+  const rawMethods = extras['check:cors:allow-methods'] as string | undefined
+
+  // Check if allow-origin is '*' or contains one of our trusted domains
+  const config = useComponentsConfig()
+  const trustedDomains = config.trustedDomains ?? []
+  const hasPublicCors = allowOrigin === '*'
+  const hasSpecificCors = allowOrigin
+    ? trustedDomains.some((domain) => {
+        try {
+          const hostname = new URL(allowOrigin).hostname
+          return hostname === domain || hostname.endsWith(`.${domain}`)
+        }
+        catch {
+          return false
+        }
+      })
+    : false
+
+  const isOriginAllowed = hasPublicCors || hasSpecificCors
+
+  // Ensure GET method is allowed
+  const allowedMethods = rawMethods
+    ? rawMethods.split(',').map(m => m.trim().toUpperCase())
+    : []
+  const supportsGet = allowedMethods.length === 0 || allowedMethods.includes('GET')
+
+  return isOriginAllowed && supportsGet ? 'allowed' : 'blocked'
+}

package/src/types/dataservices.ts

@@ -24,6 +24,7 @@ export type BaseDataservice = Owned & WithAccessType & {
   license: string | null
   private: boolean
   rate_limiting: string
+  rate_limiting_url: string | null
   title: DataserviceReference['title']
   contact_points: Array<ContactPoint>
 }
@@ -65,6 +66,7 @@ export type Dataservice = Owned & WithAccessType & {
   permissions: { edit: boolean, delete: boolean }
   private: boolean
   rate_limiting: string
+  rate_limiting_url: string | null
   self_api_url: DataserviceReference['self_api_url']
   self_web_url: DataserviceReference['self_web_url']
   slug: string

package/src/types/organizations.ts

@@ -1,7 +1,7 @@
 import type { User } from './users'
 import type { Badges } from './badges'
 
-export type MemberRole = 'admin' | 'editor'
+export type MemberRole = 'admin' | 'editor' | 'partial_editor'
 
 export type Member = {
   role: MemberRole

package/src/types/users.ts

@@ -21,7 +21,6 @@ export type User = {
   page: UserReference['page']
   avatar: UserReference['avatar']
   avatar_thumbnail: UserReference['avatar_thumbnail']
-  apikey?: string
   email?: string
   about: string
   website?: string

package/dist/Datafair.client-E5D6ePRC.js

@@ -1,35 +0,0 @@
-import { defineComponent as f, computed as a, createElementBlock as o, openBlock as t, createBlock as p, createElementVNode as i, withCtx as m, createVNode as _, unref as c, toDisplayString as x } from "vue";
-import { a as h, _ as v, F as g } from "./main-B2kXxWRG.js";
-const k = { class: "fr-text--xs" }, b = { key: 0 }, y = ["src"], B = /* @__PURE__ */ f({
-  __name: "Datafair.client",
-  props: {
-    resource: {},
-    dataset: {}
-  },
-  setup(d) {
-    const e = d, { t: l } = h(), r = a(() => e.resource.extras.datafairOrigin || e.dataset.extras.datafairOrigin), s = a(() => e.resource.extras.datafairDatasetId || e.dataset.extras.datafairDatasetId), u = a(() => e.resource.extras.datafairEmbed), n = a(() => !r.value || !s.value ? null : `${r.value}/embed/dataset/${s.value}/${u.value}`);
-    return (D, E) => (t(), o("div", k, [
-      n.value ? (t(), o("div", b, [
-        i("iframe", {
-          src: n.value,
-          width: "100%",
-          height: "500px",
-          style: { "background-color": "transparent", border: "none" }
-        }, null, 8, y)
-      ])) : (t(), p(v, {
-        key: 1,
-        type: "warning",
-        class: "flex items-center space-x-2"
-      }, {
-        default: m(() => [
-          _(c(g), { class: "shrink-0 size-6" }),
-          i("span", null, x(c(l)("Erreur lors de l'affichage de l'aperçu.")), 1)
-        ]),
-        _: 1
-      }))
-    ]));
-  }
-});
-export {
-  B as default
-};

package/dist/JsonPreview.client-C-6eBbPw.js

@@ -1,87 +0,0 @@
-import { defineComponent as S, defineAsyncComponent as b, ref as o, computed as w, onMounted as N, createElementBlock as p, openBlock as r, createBlock as f, createCommentVNode as T, createVNode as u, unref as t, toDisplayString as i, withCtx as d, createElementVNode as h } from "vue";
-import { u as P, a as E, g as q, _ as m, F as v } from "./main-B2kXxWRG.js";
-const B = { class: "fr-text--xs" }, O = { key: 0 }, V = {
-  key: 1,
-  class: "text-gray-medium"
-}, L = /* @__PURE__ */ S({
-  __name: "JsonPreview.client",
-  props: {
-    resource: {}
-  },
-  setup(k) {
-    const z = b(
-      () => import("./vue3-json-viewer-BXwup7nO.js").then((e) => (Promise.resolve({                     }), e.JsonViewer))
-    ), g = k, x = P(), { t: s } = E(), l = o(null), c = o(!1), n = o(null), _ = o(!1), y = w(() => q(g.resource)), J = w(() => {
-      const e = y.value;
-      if (!e || !x.maxJsonPreviewCharSize)
-        return !1;
-      const a = x.maxJsonPreviewCharSize;
-      return e <= a;
-    }), C = async () => {
-      if (!J.value) {
-        _.value = !0;
-        return;
-      }
-      c.value = !0, n.value = null;
-      try {
-        const e = await fetch(g.resource.url);
-        if (!e.ok)
-          throw new Error(`HTTP error! status: ${e.status}`);
-        const a = await e.json();
-        l.value = a;
-      } catch (e) {
-        console.error("Error loading JSON:", e), e instanceof TypeError ? n.value = "network" : n.value = "generic", l.value = null;
-      } finally {
-        c.value = !1;
-      }
-    };
-    return N(() => {
-      C();
-    }), (e, a) => (r(), p("div", B, [
-      l.value ? (r(), p("div", O, [
-        u(t(z), {
-          value: l.value,
-          boxed: "",
-          sort: "",
-          theme: "light",
-          "max-depth": 3,
-          "expand-depth": 2,
-          "indent-width": 2
-        }, null, 8, ["value"])
-      ])) : c.value ? (r(), p("div", V, i(t(s)("Chargement de l'aperçu JSON...")), 1)) : _.value ? (r(), f(m, {
-        key: 2,
-        type: "warning",
-        class: "flex items-center space-x-2"
-      }, {
-        default: d(() => [
-          u(t(v), { class: "shrink-0 size-6" }),
-          h("span", null, i(y.value ? t(s)("Fichier JSON trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") : t(s)("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      })) : n.value === "network" ? (r(), f(m, {
-        key: 3,
-        type: "warning",
-        class: "flex items-center space-x-2"
-      }, {
-        default: d(() => [
-          u(t(v), { class: "shrink-0 size-6" }),
-          h("span", null, i(t(s)("Ce fichier JSON ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      })) : n.value ? (r(), f(m, {
-        key: 4,
-        type: "warning",
-        class: "flex items-center space-x-2"
-      }, {
-        default: d(() => [
-          u(t(v), { class: "shrink-0 size-6" }),
-          h("span", null, i(t(s)("Erreur lors du chargement de l'aperçu JSON.")), 1)
-        ]),
-        _: 1
-      })) : T("", !0)
-    ]));
-  }
-});
-export {
-  L as default
-};