@datagouv/components-next 1.0.2-dev.44 → 1.0.2-dev.45

package/src/components/OpenApiViewer/OpenApiViewer.vue

@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <div
+      v-if="loading"
+      class="flex items-center justify-center py-8"
+    >
+      <AnimatedLoader />
+    </div>
+    <div
+      v-else-if="error"
+      class="text-new-error text-sm py-4"
+    >
+      {{ t("Impossible de charger la documentation OpenAPI.") }}
+    </div>
+    <div
+      v-else-if="spec"
+      class="space-y-4"
+    >
+      <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-sm text-gray-medium">
+        <div class="flex flex-wrap gap-x-4 gap-y-1">
+          <span v-if="spec.info?.version">
+            {{ t("Version") }} <span class="font-mono">{{ spec.info.version }}</span>
+          </span>
+          <div
+            v-if="baseUrl"
+            class="flex flex-col md:flex-row md:items-center gap-0.5 md:gap-0"
+          >
+            <span>{{ t("Base URL") }}</span>
+            <span class="inline-flex items-center">
+              <span class="font-mono break-all md:ml-1">{{ baseUrl }}</span>
+              <CopyButton
+                :label="t('Copier le lien')"
+                :copied-label="t('Lien copié !')"
+                :text="baseUrl"
+                class="shrink-0 hidden md:inline-flex"
+              />
+            </span>
+          </div>
+        </div>
+        <a
+          :href="swaggerUiUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-xs text-gray-medium hover:text-gray-title"
+        >
+          {{ t("Ouvrir dans Swagger UI") }}
+        </a>
+      </div>
+      <div
+        v-for="group in groupedEndpoints"
+        :key="group.tag"
+      >
+        <Disclosure
+          v-slot="{ open }"
+          as="div"
+          default-open
+        >
+          <DisclosureButton class="flex w-full items-center justify-between py-2 border-b border-gray-default text-left">
+            <span class="font-bold text-gray-title">
+              {{ group.tag }}
+              <span class="ml-1 text-xs font-normal text-gray-medium">{{ group.endpoints.length }}</span>
+            </span>
+            <RiArrowDownSLine
+              class="size-5 text-gray-medium transition-transform"
+              :class="{ 'rotate-180': open }"
+            />
+          </DisclosureButton>
+          <DisclosurePanel class="divide-y divide-gray-100">
+            <Disclosure
+              v-for="endpoint in group.endpoints"
+              :key="endpoint.method + endpoint.path"
+              v-slot="{ open: endpointOpen }"
+              as="div"
+            >
+              <DisclosureButton class="flex items-baseline gap-2 md:gap-3 py-3 px-1 w-full text-left">
+                <span
+                  class="shrink-0 w-12 md:w-16 inline-flex items-center justify-center rounded px-1.5 py-0.5 text-xs font-bold uppercase font-mono leading-none"
+                  :class="methodColor(endpoint.method)"
+                >
+                  {{ endpoint.method }}
+                </span>
+                <div class="min-w-0 flex-1">
+                  <span class="inline-flex items-center gap-2">
+                    <span class="font-mono text-sm text-gray-title break-all">{{ endpoint.path }}</span>
+                    <CopyButton
+                      :label="t('Copier le lien')"
+                      :copied-label="t('Lien copié !')"
+                      :text="endpointFullUrl(endpoint)"
+                      class="shrink-0 hidden md:inline-flex"
+                      @click.stop
+                    />
+                  </span>
+                  <p
+                    v-if="endpoint.summary"
+                    class="hidden md:block text-sm text-gray-medium mt-0.5 mb-0"
+                  >
+                    {{ endpoint.summary }}
+                  </p>
+                </div>
+                <RiArrowDownSLine
+                  class="size-4 shrink-0 text-gray-medium transition-transform"
+                  :class="{ 'rotate-180': endpointOpen }"
+                />
+              </DisclosureButton>
+              <DisclosurePanel class="pb-4 px-1">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <EndpointRequest
+                    :endpoint="endpoint"
+                  />
+                  <EndpointResponses
+                    :responses="endpoint.responses"
+                    :spec="endpoint.spec"
+                  />
+                </div>
+              </DisclosurePanel>
+            </Disclosure>
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+      <div v-if="schemas.length">
+        <Disclosure
+          v-slot="{ open }"
+          default-open
+          as="div"
+        >
+          <DisclosureButton class="flex w-full items-center justify-between py-2 border-b border-gray-default text-left">
+            <span class="font-bold text-gray-title">
+              {{ t("Modèles") }}
+              <span class="ml-1 text-xs font-normal text-gray-medium">{{ schemas.length }}</span>
+            </span>
+            <RiArrowDownSLine
+              class="size-5 text-gray-medium transition-transform"
+              :class="{ 'rotate-180': open }"
+            />
+          </DisclosureButton>
+          <DisclosurePanel class="divide-y divide-gray-100">
+            <Disclosure
+              v-for="model in schemas"
+              :key="model.name"
+              v-slot="{ open: modelOpen }"
+              as="div"
+            >
+              <DisclosureButton class="flex items-center gap-2 py-3 px-1 w-full text-left">
+                <RiArrowDownSLine
+                  class="size-4 shrink-0 text-gray-medium transition-transform"
+                  :class="{ 'rotate-180': modelOpen }"
+                />
+                <span class="font-mono text-sm text-gray-title">{{ model.name }}</span>
+                <span
+                  v-if="model.schema.description"
+                  class="text-xs text-gray-medium truncate"
+                >{{ model.schema.description }}</span>
+              </DisclosureButton>
+              <DisclosurePanel class="pb-4 px-1">
+                <SchemaPanel
+                  :spec="spec!"
+                  :schema="model.schema"
+                />
+              </DisclosurePanel>
+            </Disclosure>
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watchEffect } from 'vue'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+import { RiArrowDownSLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import AnimatedLoader from '../AnimatedLoader.vue'
+import CopyButton from '../CopyButton.vue'
+import EndpointRequest from './EndpointRequest.vue'
+import EndpointResponses from './EndpointResponses.vue'
+import SchemaPanel from './SchemaPanel.vue'
+import { parse as parseYaml } from 'yaml'
+import type { OpenAPIV3 } from 'openapi-types'
+import { resolveRef, type Endpoint } from './openapi'
+
+const props = defineProps<{
+  url: string
+}>()
+
+const { t } = useTranslation()
+
+const spec = ref<OpenAPIV3.Document | null>(null)
+const loading = ref(true)
+const error = ref(false)
+
+const HTTP_METHODS = ['get', 'post', 'put', 'patch', 'delete', 'options', 'head'] as const
+
+async function parseOpenApiResponse(response: Response): Promise<OpenAPIV3.Document> {
+  const text = await response.text()
+  try {
+    return JSON.parse(text)
+  }
+  catch {
+    return parseYaml(text) as OpenAPIV3.Document
+  }
+}
+
+watchEffect(async () => {
+  if (!props.url) return
+  loading.value = true
+  error.value = false
+  try {
+    const response = await fetch(props.url)
+    if (!response.ok) throw new Error(response.statusText)
+    spec.value = await parseOpenApiResponse(response)
+  }
+  catch {
+    error.value = true
+    spec.value = null
+  }
+  finally {
+    loading.value = false
+  }
+})
+
+const baseUrl = computed(() => {
+  if (!spec.value?.servers?.length) return null
+  return spec.value.servers[0]!.url
+})
+
+const swaggerUiUrl = computed(() => {
+  return `https://petstore.swagger.io/?url=${encodeURIComponent(props.url)}`
+})
+
+const endpoints = computed<Endpoint[]>(() => {
+  if (!spec.value?.paths) return []
+  const result: Endpoint[] = []
+  for (const [path, pathItem] of Object.entries(spec.value.paths)) {
+    if (!pathItem) continue
+    for (const method of HTTP_METHODS) {
+      const operation = (pathItem as Record<string, OpenAPIV3.OperationObject>)[method]
+      if (!operation) continue
+
+      const parameters = (operation.parameters || []).map((p) => {
+        return resolveRef<OpenAPIV3.ParameterObject>(spec.value!, p)
+      }).filter((p): p is OpenAPIV3.ParameterObject => p !== null)
+
+      const requestBody = operation.requestBody
+        ? resolveRef<OpenAPIV3.RequestBodyObject>(spec.value!, operation.requestBody)
+        : null
+
+      const responses: Record<string, OpenAPIV3.ResponseObject> = {}
+      if (operation.responses) {
+        for (const [code, resp] of Object.entries(operation.responses)) {
+          const resolved = resolveRef<OpenAPIV3.ResponseObject>(spec.value!, resp)
+          if (resolved) responses[code] = resolved
+        }
+      }
+
+      result.push({
+        method,
+        path,
+        summary: operation.summary || operation.description || '',
+        tags: operation.tags || [],
+        parameters,
+        requestBody: requestBody || null,
+        responses,
+        spec: spec.value!,
+      })
+    }
+  }
+  return result
+})
+
+const groupedEndpoints = computed(() => {
+  const groups = new Map<string, Endpoint[]>()
+  for (const endpoint of endpoints.value) {
+    const tags = endpoint.tags.length ? endpoint.tags : [t('Endpoints')]
+    for (const tag of tags) {
+      if (!groups.has(tag)) {
+        groups.set(tag, [])
+      }
+      groups.get(tag)!.push(endpoint)
+    }
+  }
+  return Array.from(groups.entries()).map(([tag, endpoints]) => ({ tag, endpoints }))
+})
+
+const schemas = computed(() => {
+  const components = spec.value?.components?.schemas
+  if (!components) return []
+  return Object.entries(components).map(([name, schema]) => ({
+    name,
+    schema: schema as OpenAPIV3.SchemaObject,
+  }))
+})
+
+function endpointFullUrl(endpoint: Endpoint): string {
+  return (baseUrl.value || '') + endpoint.path
+}
+
+function methodColor(method: string): string {
+  switch (method) {
+    case 'get': return 'bg-blue-100 text-blue-800'
+    case 'post': return 'bg-green-100 text-green-800'
+    case 'put': return 'bg-orange-100 text-orange-800'
+    case 'patch': return 'bg-yellow-100 text-yellow-800'
+    case 'delete': return 'bg-red-100 text-red-800'
+    default: return 'bg-gray-100 text-gray-800'
+  }
+}
+</script>

package/src/components/OpenApiViewer/SchemaPanel.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="flex items-center gap-2 mb-2">
+      <button
+        type="button"
+        class="text-xs font-medium px-2 py-0.5 rounded"
+        :class="view === 'schema' ? 'bg-gray-200 text-gray-title' : 'text-gray-medium hover:text-gray-title'"
+        @click="view = 'schema'"
+      >
+        {{ t("Schéma") }}
+      </button>
+      <button
+        type="button"
+        class="text-xs font-medium px-2 py-0.5 rounded"
+        :class="view === 'example' ? 'bg-gray-200 text-gray-title' : 'text-gray-medium hover:text-gray-title'"
+        @click="view = 'example'"
+      >
+        {{ t("Exemple") }}
+      </button>
+    </div>
+    <SchemaTree
+      v-if="view === 'schema'"
+      :spec="spec"
+      :schema="schema"
+    />
+    <pre
+      v-else
+      class="text-xs font-mono bg-gray-50 rounded p-3 overflow-x-auto m-0 text-gray-title"
+    >{{ exampleJson }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import SchemaTree from './SchemaTree.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { generateExample } from './openapi'
+import type { OpenAPIV3 } from 'openapi-types'
+
+const props = defineProps<{
+  spec: OpenAPIV3.Document
+  schema: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject
+}>()
+
+const { t } = useTranslation()
+
+const view = ref<'schema' | 'example'>('schema')
+
+const exampleJson = computed(() => {
+  const example = generateExample(props.spec, props.schema)
+  return JSON.stringify(example, null, 2)
+})
+</script>

package/src/components/OpenApiViewer/SchemaTree.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="text-xs overflow-hidden">
+    <div
+      v-for="prop in properties"
+      :key="prop.name"
+      class="border-b border-gray-100 last:border-0"
+    >
+      <div class="flex items-baseline gap-2 py-1.5 min-w-0">
+        <button
+          v-if="hasNestedProperties(spec, prop.schema)"
+          type="button"
+          class="shrink-0 flex items-center gap-1 font-mono text-gray-title hover:text-gray-800"
+          @click="toggle(prop.name)"
+        >
+          <RiArrowRightSLine
+            class="size-3 text-gray-medium transition-transform"
+            :class="{ 'rotate-90': expanded.has(prop.name) }"
+          />
+          {{ prop.name }}
+          <span
+            v-if="prop.required"
+            class="text-red-600"
+          >*</span>
+        </button>
+        <span
+          v-else
+          class="font-mono text-gray-title pl-4"
+        >
+          {{ prop.name }}
+          <span
+            v-if="prop.required"
+            class="text-red-600"
+          >*</span>
+        </span>
+        <span class="font-mono text-gray-medium whitespace-nowrap">{{ prop.type }}</span>
+        <span
+          v-if="prop.description"
+          class="text-gray-medium truncate"
+        >{{ prop.description }}</span>
+      </div>
+      <div
+        v-if="expanded.has(prop.name) && hasNestedProperties(spec, prop.schema)"
+        class="pl-4 ml-1.5 border-l border-gray-200"
+      >
+        <SchemaTree
+          :spec="spec"
+          :schema="getNestedSchema(spec, prop.schema)!"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { RiArrowRightSLine } from '@remixicon/vue'
+import { getSchemaProperties, hasNestedProperties, getNestedSchema } from './openapi'
+import type { OpenAPIV3 } from 'openapi-types'
+
+const props = defineProps<{
+  spec: OpenAPIV3.Document
+  schema: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject
+}>()
+
+const properties = computed(() => getSchemaProperties(props.spec, props.schema))
+
+const expanded = reactive(new Set<string>())
+
+function toggle(name: string) {
+  if (expanded.has(name)) {
+    expanded.delete(name)
+  }
+  else {
+    expanded.add(name)
+  }
+}
+</script>

package/src/components/OpenApiViewer/openapi.ts

@@ -0,0 +1,150 @@
+import type { OpenAPIV3 } from 'openapi-types'
+
+export interface Endpoint {
+  method: string
+  path: string
+  summary: string
+  tags: string[]
+  parameters: OpenAPIV3.ParameterObject[]
+  requestBody: OpenAPIV3.RequestBodyObject | null
+  responses: Record<string, OpenAPIV3.ResponseObject>
+  spec: OpenAPIV3.Document
+}
+
+export function resolveRef<T>(spec: OpenAPIV3.Document, obj: T | OpenAPIV3.ReferenceObject): T | null {
+  if (!obj || typeof obj !== 'object') return obj as T | null
+  if (!('$ref' in obj)) return obj as T
+  const path = (obj as OpenAPIV3.ReferenceObject).$ref.replace('#/', '').split('/')
+  let resolved: unknown = spec
+  for (const segment of path) {
+    if (resolved && typeof resolved === 'object') {
+      resolved = (resolved as Record<string, unknown>)[segment]
+    }
+    else {
+      return null
+    }
+  }
+  return resolved as T
+}
+
+export function getSchemaType(spec: OpenAPIV3.Document, schema?: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject): string {
+  if (!schema) return ''
+  const resolved = resolveRef<OpenAPIV3.SchemaObject>(spec, schema)
+  if (!resolved) return ''
+  if (resolved.type === 'array' && resolved.items) {
+    const itemType = getSchemaType(spec, resolved.items)
+    return `${itemType}[]`
+  }
+  if (resolved.format) return `${resolved.type} (${resolved.format})`
+  return resolved.type || ''
+}
+
+const CONTENT_TYPE_LABELS: Record<string, string> = {
+  'application/json': 'JSON',
+  'application/xml': 'XML',
+  'application/x-www-form-urlencoded': 'Form',
+  'multipart/form-data': 'Multipart',
+  'text/plain': 'Text',
+  'text/html': 'HTML',
+  'text/csv': 'CSV',
+  'application/octet-stream': 'Binary',
+  'application/pdf': 'PDF',
+}
+
+export function contentTypeLabel(raw: string): string {
+  const base = raw.split(';')[0]!.trim()
+  return CONTENT_TYPE_LABELS[base] || base
+}
+
+export interface SchemaProperty {
+  name: string
+  type: string
+  description: string
+  required: boolean
+  schema: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject | undefined
+}
+
+export function getSchemaProperties(spec: OpenAPIV3.Document, schema?: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject): SchemaProperty[] {
+  if (!schema) return []
+  const resolved = resolveRef<OpenAPIV3.SchemaObject>(spec, schema)
+  if (!resolved?.properties) return []
+  const requiredFields = resolved.required || []
+  return Object.entries(resolved.properties).map(([name, propSchema]) => {
+    const prop = resolveRef<OpenAPIV3.SchemaObject>(spec, propSchema)
+    return {
+      name,
+      type: getSchemaType(spec, propSchema),
+      description: prop?.description || '',
+      required: requiredFields.includes(name),
+      schema: propSchema,
+    }
+  })
+}
+
+export function hasNestedProperties(spec: OpenAPIV3.Document, schema?: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject): boolean {
+  if (!schema) return false
+  const resolved = resolveRef<OpenAPIV3.SchemaObject>(spec, schema)
+  if (!resolved) return false
+  if (resolved.properties) return true
+  if (resolved.type === 'array' && resolved.items) {
+    return hasNestedProperties(spec, resolved.items)
+  }
+  return false
+}
+
+export function getNestedSchema(spec: OpenAPIV3.Document, schema?: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject): OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject | undefined {
+  if (!schema) return undefined
+  const resolved = resolveRef<OpenAPIV3.SchemaObject>(spec, schema)
+  if (!resolved) return undefined
+  if (resolved.properties) return schema
+  if (resolved.type === 'array' && resolved.items) return resolved.items
+  return undefined
+}
+
+const MAX_EXAMPLE_DEPTH = 4
+
+function defaultForType(type?: string, format?: string): unknown {
+  switch (type) {
+    case 'string':
+      if (format === 'date') return '2024-01-01'
+      if (format === 'date-time') return '2024-01-01T00:00:00Z'
+      if (format === 'email') return 'user@example.com'
+      if (format === 'uri' || format === 'url') return 'https://example.com'
+      return 'string'
+    case 'integer': return 0
+    case 'number': return 0.0
+    case 'boolean': return true
+    case 'null': return null
+    default: return {}
+  }
+}
+
+export function generateExample(spec: OpenAPIV3.Document, schema?: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject, depth = 0): unknown {
+  if (!schema || depth > MAX_EXAMPLE_DEPTH) return undefined
+  const resolved = resolveRef<OpenAPIV3.SchemaObject>(spec, schema)
+  if (!resolved) return undefined
+
+  if (resolved.example !== undefined) return resolved.example
+
+  if (resolved.type === 'array' && resolved.items) {
+    const item = generateExample(spec, resolved.items, depth + 1)
+    return item !== undefined ? [item] : []
+  }
+
+  if (resolved.properties) {
+    const obj: Record<string, unknown> = {}
+    for (const [name, propSchema] of Object.entries(resolved.properties)) {
+      const prop = resolveRef<OpenAPIV3.SchemaObject>(spec, propSchema)
+      if (prop?.example !== undefined) {
+        obj[name] = prop.example
+      }
+      else {
+        const val = generateExample(spec, propSchema, depth + 1)
+        if (val !== undefined) obj[name] = val
+      }
+    }
+    return obj
+  }
+
+  return defaultForType(resolved.type as string, resolved.format)
+}

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -231,7 +231,7 @@
                 :dataset="dataset"
               />
               <!-- Show Datafair embedded preview (koumoul) -->
-              <SwaggerClient
+              <OpenApiViewer
                 v-else-if="hasOpenAPIPreview"
                 :url="resource.extras['apidocUrl'] as string"
               />
@@ -357,7 +357,7 @@
                 <p>{{ t("- Si le fichier est supprimé, l'API sera également supprimée.") }}</p>
                 <p>{{ t("Pour des usages pérennes, prévoyez que cette API dépend directement du fichier source.") }}</p>
               </div>
-              <Swagger
+              <OpenApiViewer
                 v-if="hasTabularData"
                 :url="`${config.tabularApiUrl}/api/resources/${props.resource.id}/swagger/`"
               />
@@ -398,7 +398,7 @@ import EditButton from './EditButton.vue'
 import DataStructure from './DataStructure.vue'
 import Preview from './Preview.vue'
 import { isOrganizationCertified } from '../../functions/organizations'
-import SwaggerClient from './Swagger.client.vue'
+import OpenApiViewer from '../OpenApiViewer/OpenApiViewer.vue'
 
 const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', ' www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
@@ -417,7 +417,6 @@ const props = withDefaults(defineProps<{
 
 const config = useComponentsConfig()
 
-const Swagger = defineAsyncComponent(() => import('./Swagger.client.vue'))
 const MapContainer = defineAsyncComponent(() => import('./MapContainer.client.vue'))
 const Pmtiles = defineAsyncComponent(() => import('./Pmtiles.client.vue'))
 const JsonPreview = defineAsyncComponent(() => import('./JsonPreview.client.vue'))

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -134,7 +134,7 @@
                 :resource="resource"
                 :dataset="dataset"
               />
-              <SwaggerClient
+              <OpenApiViewer
                 v-else-if="hasOpenAPIPreview"
                 :url="resource.extras['apidocUrl'] as string"
               />
@@ -303,7 +303,7 @@
                 <p>{{ t("- Si le fichier est supprimé, l'API sera également supprimée.") }}</p>
                 <p>{{ t("Pour des usages pérennes, prévoyez que cette API dépend directement du fichier source.") }}</p>
               </div>
-              <Swagger
+              <OpenApiViewer
                 v-if="hasTabularData"
                 :url="`${config.tabularApiUrl}/api/resources/${resource.id}/swagger/`"
               />
@@ -324,7 +324,7 @@ import BrandedButton from '../BrandedButton.vue'
 import CopyButton from '../CopyButton.vue'
 import MarkdownViewer from '../MarkdownViewer.vue'
 import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
-import Swagger from '../ResourceAccordion/Swagger.client.vue'
+import OpenApiViewer from '../OpenApiViewer/OpenApiViewer.vue'
 import TabGroup from '../Tabs/TabGroup.vue'
 import TabList from '../Tabs/TabList.vue'
 import Tab from '../Tabs/Tab.vue'
@@ -363,9 +363,6 @@ const MapContainer = defineAsyncComponent(() =>
 const Pmtiles = defineAsyncComponent(() =>
   import('../ResourceAccordion/Pmtiles.client.vue'),
 )
-const SwaggerClient = defineAsyncComponent(() =>
-  import('../ResourceAccordion/Swagger.client.vue'),
-)
 
 const props = defineProps<{
   dataset: Dataset | DatasetV2

package/src/main.ts

@@ -73,7 +73,7 @@ import ResourceIcon from './components/ResourceAccordion/ResourceIcon.vue'
 import ResourceExplorer from './components/ResourceExplorer/ResourceExplorer.vue'
 import ResourceExplorerSidebar from './components/ResourceExplorer/ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './components/ResourceExplorer/ResourceExplorerViewer.vue'
-import Swagger from './components/ResourceAccordion/Swagger.client.vue'
+import OpenApiViewer from './components/OpenApiViewer/OpenApiViewer.vue'
 import ReuseCard from './components/ReuseCard.vue'
 import ReuseHorizontalCard from './components/ReuseHorizontalCard.vue'
 import ReuseDetails from './components/ReuseDetails.vue'
@@ -302,7 +302,7 @@ export {
   SimpleBanner,
   SmallChart,
   StatBox,
-  Swagger,
+  OpenApiViewer,
   Tab,
   TabGroup,
   TabList,