@datagouv/components-next 0.0.29 → 0.0.31

package/dist/{vue3-xml-viewer.common-CpVTMgj2.js → vue3-xml-viewer.common-NQY1dx9T.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-DIQDGjO4.js";
+import { g as Ke } from "./main-Qu3kUOIH.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.29",
+  "version": "0.0.31",
   "private": false,
   "type": "module",
   "main": "./src/main.ts",

package/src/components/Avatar.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { getUserAvatar } from '../functions/users'
+import { useGetUserAvatar } from '../functions/users'
 import type { User } from '../types/users'
 
 type Props = {
@@ -23,5 +23,6 @@ const props = withDefaults(defineProps<Props>(), {
   rounded: false,
   size: 40,
 })
+const getUserAvatar = useGetUserAvatar()
 const avatarUrl = computed(() => getUserAvatar(props.user, props.size))
 </script>

package/src/components/BrandedButton.vue

@@ -53,7 +53,7 @@ import AppLink from './AppLink.vue'
 import { bannerActionTypeKey } from './BannerAction.vue'
 import AnimatedLoader from './AnimatedLoader.vue'
 
-type ColorType = 'primary' | 'primary-soft' | 'primary-softer' | 'secondary' | 'secondary-softer' | 'warning' | 'danger' | 'tertiary'
+export type ColorType = 'primary' | 'primary-soft' | 'primary-softer' | 'secondary' | 'secondary-softer' | 'warning' | 'danger' | 'tertiary' | 'purple-flat' | 'green-flat' | 'white-flat'
 
 const props = withDefaults(defineProps<{
   size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl'
@@ -119,6 +119,9 @@ const colors = computed(() => {
     'warning': `text-warning-dark bg-white !border-warning-dark ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
     'danger': `!text-danger-dark bg-white !border-danger-dark ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
     'tertiary': `!border-none bg-transparent text-datagouv-dark ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
+    'purple-flat': `!border-none bg-purple-dataservice text-white ${!isDisabled.value ? '[&&]:hover:!bg-purple-dataservice/90' : ''}`,
+    'green-flat': `!border-none bg-green-reuse text-white ${!isDisabled.value ? '[&&]:hover:!bg-green-reuse/90' : ''}`,
+    'white-flat': `!border-none bg-white ${!isDisabled.value ? '[&&]:hover:!bg-white/90' : ''}`,
   }[color.value]
 })
 

package/src/components/ClientOnly.vue

@@ -0,0 +1,17 @@
+<template>
+  <component
+    :is="config?.clientOnly"
+    v-if="config.clientOnly"
+  >
+    <slot />
+  </component>
+  <template v-else>
+    <slot />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { useComponentsConfig } from '../config'
+
+const config = useComponentsConfig()
+</script>

package/src/components/DataserviceCard.vue

@@ -1,8 +1,9 @@
 <template>
   <article
-    class="my-4 p-4 bg-white border border-gray-default fr-enlarge-link"
+    class="my-4 p-4 bg-white border fr-enlarge-link"
     :class="{
       'border-tabular-api': isTabularApi,
+      'border-gray-default': !isTabularApi,
       'mt-6': showBadge,
     }"
   >
@@ -14,10 +15,7 @@
         v-if="dataservice.access_type === 'restricted'"
         class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
       >
-        <span
-          class="fr-icon-lock-line fr-icon--sm"
-          aria-hidden="true"
-        />
+        <RiLockLine class="size-4 mr-1" />
         {{ t('Accès restreint') }}
       </p>
       <p
@@ -31,64 +29,46 @@
         v-if="dataservice.private"
         class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
       >
-        <span
-          class="fr-icon-lock-line fr-icon--sm"
-          aria-hidden="true"
-        />
+        <RiLockLine class="size-4 mr-1" />
         {{ t('Brouillon') }}
       </p>
       <p
         v-if="dataservice.archived_at"
         class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
       >
-        <span
-          class="fr-icon-lock-line fr-icon--sm"
-          aria-hidden="true"
-        />
+        <RiLockLine class="size-4 mr-1" />
         {{ t('Archivé') }}
       </p>
     </div>
-    <h4 class="fr-text--md fr-mb-0">
+    <h4 class="text-base mb-0 flex items-center gap-1">
       <slot
         name="dataserviceUrl"
         :dataservice="dataservice"
         :dataservice-url="dataserviceUrl"
       >
-        <svg
+        <RiSparklingLine
           v-if="isTabularApi"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          aria-hidden="true"
-          class="fr-mr-1v"
-          style="width:1rem"
-        ><path d="M17.0007 1.20825 18.3195 3.68108 20.7923 4.99992 18.3195 6.31876 17.0007 8.79159 15.6818 6.31876 13.209 4.99992 15.6818 3.68108 17.0007 1.20825ZM10.6673 9.33325 15.6673 11.9999 10.6673 14.6666 8.00065 19.6666 5.33398 14.6666.333984 11.9999 5.33398 9.33325 8.00065 4.33325 10.6673 9.33325ZM11.4173 11.9999 9.18905 10.8115 8.00065 8.58325 6.81224 10.8115 4.58398 11.9999 6.81224 13.1883 8.00065 15.4166 9.18905 13.1883 11.4173 11.9999ZM19.6673 16.3333 18.0007 13.2083 16.334 16.3333 13.209 17.9999 16.334 19.6666 18.0007 22.7916 19.6673 19.6666 22.7923 17.9999 19.6673 16.3333Z" /></svg>
-        <span
+          class="size-4 flex-none"
+        />
+        <RiTerminalLine
           v-else
-          class="fr-icon-terminal-line fr-icon--sm fr-mr-1v"
-          aria-hidden="true"
+          class="size-4 flex-none"
         />
         <AppLink
-          class="inline-flex"
+          class="truncate"
           :to="dataserviceUrl"
         >
-          <component
-            :is="config.textClamp"
-            v-if="config.textClamp"
-            :auto-resize="true"
-            :text="dataservice.title"
-            :max-lines="1"
-          />
+          {{ dataservice.title }}
         </AppLink>
       </slot>
     </h4>
-    <p
+    <div
       v-if="dataservice.organization || dataservice.owner"
-      class="text-sm text-gray-medium overflow-hidden flex items-center gap-1 mt-1 mb-0"
+      class="text-gray-medium overflow-hidden flex items-center gap-1 mt-1 mb-0"
     >
-      <span
+      <p
         v-if="dataservice.organization"
-        class="block not-enlarged overflow-hidden"
+        class="text-sm block not-enlarged overflow-hidden mb-0"
       >
         <AppLink
           v-if="organizationUrl"
@@ -101,54 +81,44 @@
           v-else
           :organization="dataservice.organization"
         />
-      </span>
-      <component
-        :is="config.textClamp"
-        v-else-if="config.textClamp"
-        class="not-enlarged mr-1"
-        :auto-resize="true"
-        :text="ownerName"
-        :max-lines="1"
-      />
-      <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
-      <span class="block whitespace-nowrap">{{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataservice.metadata_modified_at, { dateStyle: 'medium' }) }) }}</span>
-    </p>
-    <div class="flex flex-wrap items-center gap-1 mt-1 text-gray-medium">
-      <p class="text-sm mb-0">
-        {{ t('Disponibilité :') }}
-        <span class="text-gray-plain">
-          <template v-if="dataservice.availability">
-            {{ t('{n}%', dataservice.availability) }}
-          </template>
-          <template v-else>
-            {{ t('inconnue') }}
-          </template>
-        </span>
       </p>
-      <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
       <p
-        class="text-sm mb-0 flex items-center gap-0.5"
-        :aria-label="t('{n} vues | {n} vue | {n} vues', dataservice.metrics.views)"
+        v-else
+        class="text-sm mb-0 truncate"
       >
-        <RiEyeLine
-          aria-hidden="true"
-          class="size-3.5"
-        />{{ summarize(dataservice.metrics.views) }}
+        {{ ownerName }}
       </p>
-      <p
-        class="text-sm mb-0 flex items-center gap-0.5"
-        :aria-label="t('{n} abonnés | {n} abonné | {n} abonnés', dataservice.metrics.followers)"
-      >
-        <RiStarLine
-          aria-hidden="true"
-          class="size-3.5"
-        />{{ summarize(dataservice.metrics.followers) }}
+      <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
+      <!-- This comment is only here to fix this issue https://github.com/datagouv/cdata/issues/653, it could be empty… -->
+      <p class="text-sm whitespace-nowrap mb-0">
+        {{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataservice.metadata_modified_at, { dateStyle: 'medium' }) }) }}
       </p>
+      <RiSubtractLine class="size-4 flex-none fill-gray-medium" />
+      <div class="flex items-center gap-1">
+        <p
+          class="text-sm mb-0 flex items-center gap-0.5"
+          :aria-label="t('{n} vues | {n} vue | {n} vues', dataservice.metrics.views)"
+        >
+          <RiEyeLine
+            aria-hidden="true"
+            class="size-3.5"
+          />{{ summarize(dataservice.metrics.views) }}
+        </p>
+        <p
+          class="text-sm mb-0 flex items-center gap-0.5"
+          :aria-label="t('{n} abonnés | {n} abonné | {n} abonnés', dataservice.metrics.followers)"
+        >
+          <RiStarLine
+            aria-hidden="true"
+            class="size-3.5"
+          />{{ summarize(dataservice.metrics.followers) }}
+        </p>
+      </div>
     </div>
     <component
       :is="config.textClamp"
       v-if="config.textClamp && description && showDescription"
-      class="fr-text--sm fr-mt-1w fr-mb-0 overflow-wrap-anywhere"
+      class="text-sm mt-2 mb-0"
       :auto-resize="true"
       :text="description"
       :max-lines="2"
@@ -160,7 +130,7 @@
 import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
-import { RiEyeLine, RiPassValidLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
+import { RiEyeLine, RiLockLine, RiPassValidLine, RiSparklingLine, RiStarLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../config'
 import { useFormatDate } from '../functions/dates'
 import { summarize } from '../functions/helpers'
@@ -177,7 +147,7 @@ import AppLink from './AppLink.vue'
      * The dataserviceUrl is a route location object to allow Vue Router to navigate to the details of a dataservice.
      * It is used as a separate prop to allow other sites using the package to define their own dataservice pages.
      */
-    dataserviceUrl: RouteLocationRaw
+    dataserviceUrl?: RouteLocationRaw
 
     /**
      * The organizationUrl is an optional route location object to allow Vue Router to navigate to the details of the organization linked to tha dataservice.
@@ -192,6 +162,8 @@ const props = withDefaults(defineProps<Props>(), {
   showDescription: true,
 })
 
+const dataserviceUrl = computed(() => props.dataserviceUrl || props.dataservice.self_web_url)
+
 const { t } = useI18n()
 const { formatRelativeIfRecentDate } = useFormatDate()
 const ownerName = computed(() => getOwnerName(props.dataservice))

package/src/components/DatasetCard.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="p-4 border bg-white border-gray-default relative hover:bg-gray-some">
-    <div :id />
     <div
       v-if="dataset.private || dataset.archived"
       class="absolute top-0 fr-grid-row fr-grid-row--middle fr-mt-n3v fr-ml-n1v"
@@ -28,23 +27,23 @@
     </div>
     <div class="flex flex-wrap md:flex-nowrap gap-4 items-start">
       <div class="flex-none">
-        <div class="flex justify-center items-center p-3 border border-gray-lower bg-[#fff]">
+        <div class="flex justify-center items-center p-2 border border-gray-lower bg-[#fff]">
           <Placeholder
             v-if="dataset.organization"
             type="dataset"
             :src="dataset.organization.logo_thumbnail"
             alt=""
-            :size="40"
+            :size="48"
           />
           <Avatar
             v-else-if="dataset.owner"
             :user="dataset.owner"
-            :size="40"
+            :size="48"
           />
           <Placeholder
             v-else
             type="dataset"
-            :size="40"
+            :size="48"
           />
         </div>
       </div>
@@ -57,12 +56,16 @@
           >
             <AppLink
               :to="datasetUrl"
-              class="text-gray-title text-base bg-none flex truncate"
+              class="text-gray-title text-base bg-none flex w-full truncate"
+              :target="datasetUrlInNewTab ? '_blank' : undefined"
             >
-              <span class="block flex-initial truncate">{{ dataset.title }}</span>
+              <span
+                class="block truncate"
+                :class="dataset.acronym ? 'flex-initial' : 'flex-1'"
+              >{{ dataset.title }}</span>
               <small
                 v-if="dataset.acronym"
-                class="flex-none ml-2"
+                class="flex-1 ml-2"
               >{{ dataset.acronym }}</small>
               <span class="absolute inset-0" />
             </AppLink>
@@ -100,10 +103,7 @@
         </div>
         <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium">
           <div class="fr-hidden flex-sm dash-after-sm text-gray-medium -ml-2.5">
-            <DatasetQualityInline
-              :quality="dataset.quality"
-              :teleport-id="id"
-            />
+            <DatasetQualityInline :quality="dataset.quality" />
           </div>
           <div class="flex flex-wrap items-center gap-1">
             <p
@@ -160,7 +160,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
-import { computed, ref, useId, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { RiDownloadLine, RiEyeLine, RiLineChartLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import type { Dataset, DatasetV2 } from '../types/datasets'
 import { summarize } from '../functions/helpers'
@@ -182,6 +182,7 @@ import AppLink from './AppLink.vue'
      * It is used as a separate prop to allow other sites using the package to define their own dataset pages.
      */
     datasetUrl: RouteLocationRaw
+    datasetUrlInNewTab?: boolean
 
     /**
      * The organizationUrl is an optional route location object to allow Vue Router to navigate to the details of the organization linked to tha dataset.
@@ -198,7 +199,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const { t } = useI18n()
 const { formatRelativeIfRecentDate } = useFormatDate()
-const id = useId()
 const ownerName = computed(() => getOwnerName(props.dataset))
 const config = useComponentsConfig()
 

package/src/components/DatasetQuality.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="flex items-center">
     <Toggletip
-      class="-ml-2 mt-px"
-      size="2xs"
+      :button-props="{ size: '2xs', class: '-ml-2 mt-px' }"
     >
       {{ $t('Qualité des métadonnées:') }}
       <template #toggletip>

package/src/components/DatasetQualityInline.vue

@@ -2,8 +2,7 @@
   <div class="m-0 flex flex-wrap items-center text-sm text-gray-medium">
     <div class="fr-grid-row fr-grid-row--middle">
       <Toggletip
-        class="relative z-2"
-        :teleport-id
+        :button-props="{ class: 'relative z-2' }"
       >
         <template #toggletip>
           <DatasetQualityTooltipContent :quality />
@@ -27,6 +26,5 @@ import Toggletip from './Toggletip.vue'
 
 defineProps<{
   quality: Quality
-  teleportId?: string
 }>()
 </script>

package/src/components/OrganizationCard.vue

@@ -22,12 +22,14 @@
           />
         </AppLink>
       </p>
-      <div class="mb-2 flex flex-wrap items-center">
-        <OwnerType
-          v-if="type !== 'other'"
-          class="mb-0 text-sm after:content-['—'] after:ml-1"
-          :type
-        />
+      <div class="mb-2 flex flex-wrap gap-1 items-center">
+        <template v-if="type !== 'other'">
+          <OwnerType
+            class="mb-0 text-sm"
+            :type
+          />
+          <RiSubtractLine class="size-4 fill-gray-medium" />
+        </template>
         <div>
           <div
             v-if="organization.metrics"
@@ -51,7 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import { RiLineChartLine, RiDatabase2Line, RiTerminalLine } from '@remixicon/vue'
+import { RiLineChartLine, RiDatabase2Line, RiTerminalLine, RiSubtractLine } from '@remixicon/vue'
 import { computed, ref, watchEffect } from 'vue'
 import { removeMarkdown } from '../functions/markdown'
 import { getOrganizationType } from '../functions/organizations'

package/src/components/OwnerType.vue

@@ -2,7 +2,7 @@
   <div :class="`${colorClass} flex items-center gap-1`">
     <OwnerTypeIcon
       :type="type"
-      class="size-4 -mt-1"
+      class="size-4"
     />
     <div :class="sizeClass">
       {{ name }}

package/src/components/ResourceAccordion/DataStructure.vue

@@ -48,10 +48,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import type { Resource } from '../../types/resources'
-import { getProfile } from '../../functions/tabularApi'
+import { useGetProfile } from '../../functions/tabularApi'
 import PreviewLoader from './PreviewLoader.vue'
 
 const props = defineProps<{ resource: Resource }>()
+const getProfile = useGetProfile()
 
 type ColumnInfo = {
   score: number
@@ -67,10 +68,10 @@ const hasColumnInfo = ref(false)
 
 onMounted(async () => {
   try {
-    const { data } = await getProfile(props.resource.id) // Assurez-vous que cette fonction retourne bien les données attendues
-    if ('profile' in data && data.profile) {
-      columns.value = Object.keys(data.profile.columns)
-      columnsInfo.value = data.profile.columns
+    const response = await getProfile(props.resource.id) // Assurez-vous que cette fonction retourne bien les données attendues
+    if ('profile' in response && response.profile) {
+      columns.value = Object.keys(response.profile.columns)
+      columnsInfo.value = response.profile.columns
       hasColumnInfo.value = true
       loading.value = false
     }

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

@@ -96,17 +96,17 @@ const shouldLoadJson = computed(() => {
     return false
   }
 
-  // Check if maxJsonPreviewSize is configured
-  if (!config.maxJsonPreviewSize) {
+  // Check if maxJsonPreviewCharSize is configured
+  if (!config.maxJsonPreviewCharSize) {
     // If no limit is set, don't load unknown files
     return false
   }
 
-  // Convert maxJsonPreviewSize from characters to bytes (rough estimate)
+  // Convert maxJsonPreviewCharSize from characters to bytes (rough estimate)
   // Assuming average 1 byte per character for JSON
-  const maxSizeBytes = config.maxJsonPreviewSize
+  const maxByteSize = config.maxJsonPreviewCharSize
 
-  return size <= maxSizeBytes
+  return size <= maxByteSize
 })
 
 const fetchJsonData = async () => {

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

@@ -109,9 +109,9 @@ const shouldLoadPdf = computed(() => {
     return false
   }
 
-  // Use maxPdfPreviewSize from config, fallback to 10 MB if not set
-  const maxSizeBytes = config.maxPdfPreviewSize ?? 10_000_000
-  return size <= maxSizeBytes
+  // Use maxPdfPreviewByteSize from config, fallback to 10 MB if not set
+  const maxByteSize = config.maxPdfPreviewByteSize ?? 10_000_000
+  return size <= maxByteSize
 })
 
 const loadPdf = async () => {

package/src/components/ResourceAccordion/Preview.vue

@@ -144,12 +144,12 @@ function isSortedBy(col: string) {
 async function getTableInfos(page: number, sortConfig?: SortConfig) {
   try {
     // Check that this function return wanted data
-    const { data } = await getData(config, props.resource.id, page, sortConfig)
-    if ('data' in data && data.data && data.data.length > 0) {
+    const response = await getData(config, props.resource.id, page, sortConfig)
+    if ('data' in response && response.data && response.data.length > 0) {
       // Update existing rows
-      rows.value = data.data
-      columns.value = Object.keys(data.data[0]).filter(item => item !== '__id')
-      rowCount.value = data.meta.total
+      rows.value = response.data
+      columns.value = Object.keys(response.data[0]).filter(item => item !== '__id')
+      rowCount.value = response.meta.total
       currentPage.value = page
       loading.value = false
     }

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -5,7 +5,7 @@
   >
     <header
       :id="resourceHeaderId"
-      class="fr-p-4v flex flex-wrap gap-4 items-center justify-between relative"
+      class="fr-p-4v flex flex-wrap md:flex-nowrap gap-4 items-center justify-between relative"
     >
       <div>
         <div class="flex items-center fr-mb-1v">
@@ -15,7 +15,7 @@
           >
             <button
               type="button"
-              class="fr-p-0 flex items-baseline text-base leading-none font-normal"
+              class="fr-p-0 flex items-baseline text-base text-left leading-tight font-normal"
               data-testid="expand-button"
               :aria-expanded="open"
               @click="toggle"

package/src/components/ResourceAccordion/SchemaBadge.vue

@@ -4,9 +4,8 @@
     class="inline-flex mb-0 items-baseline text-xs"
   >
     <Toggletip
-      position="right"
+      :button-props="{ class: 'relative z-2 -ml-3 top-1 -my-3' }"
       no-margin
-      class="relative z-2 -ml-3 top-1 -my-3"
     >
       <template #toggletip="{ close }">
         <div class="flex justify-between border-bottom">
@@ -100,13 +99,16 @@ import { useI18n } from 'vue-i18n'
 import type { Resource } from '../../types/resources'
 import Toggletip from '../Toggletip.vue'
 import type { RegisteredSchema, ValidataError } from '../../functions/schemas'
-import { findSchemaInCatalog, getCatalog, getSchemaDocumentation, getSchemaValidationUrl } from '../../functions/schemas'
+import { findSchemaInCatalog, useGetCatalog, useGetSchemaDocumentation, useGetSchemaValidationUrl } from '../../functions/schemas'
 
 const props = defineProps<{
   resource: Resource
 }>()
 
 const { t } = useI18n()
+const getSchemaValidationUrl = useGetSchemaValidationUrl()
+const getSchemaDocumentation = useGetSchemaDocumentation()
+const getCatalog = useGetCatalog()
 
 const catalog = ref<Array<RegisteredSchema> | null>(null)
 onMounted(async () => {

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

@@ -87,17 +87,17 @@ const shouldLoadXml = computed(() => {
     return false
   }
 
-  // Check if maxXmlPreviewSize is configured
-  if (!config.maxXmlPreviewSize) {
+  // Check if maxXmlPreviewCharSize is configured
+  if (!config.maxXmlPreviewCharSize) {
     // If no limit is set, don't load unknown files
     return false
   }
 
-  // Convert maxXmlPreviewSize from characters to bytes (rough estimate)
+  // Convert maxXmlPreviewCharSize from characters to bytes (rough estimate)
   // Assuming average 1 byte per character for XML
-  const maxSizeBytes = config.maxXmlPreviewSize
+  const maxByteSize = config.maxXmlPreviewCharSize
 
-  return size <= maxSizeBytes
+  return size <= maxByteSize
 })
 
 const fetchXmlData = async () => {

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>