@data-fair/lib-vuetify 2.0.4 → 2.1.0

package/index.js

@@ -15,7 +15,7 @@ const baseDarkColors = {
 };
 export function vuetifySessionOptions(session, cspNonce) {
     if (!session.site.value)
-        throw new Error('vuetifySessionOptions requires fething site info in session util');
+        throw new Error('vuetifySessionOptions requires fetching site info in session util');
     const colors = { ...baseColors, ...session.site.value?.colors };
     return {
         ssr: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/lib-vuetify",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "Components based on the Vuetify 3 UI lib for the data-fair stack.",
   "main": "index.js",
   "files": [

package/scroll-to-top.vue

@@ -0,0 +1,56 @@
+<!-- inspired by https://github.com/vuetifyjs/vuetify/blob/8bb752b210d25fbebcea12cd073d2ce4986f5e12/packages/docs/src/layouts/default/FabToTop.vue -->
+
+<template>
+  <v-fab-transition>
+    <v-btn
+      v-show="show"
+      title="Remonter au début de la page"
+      aria-label="Remonter au début de la page"
+      color="primary"
+      fixed
+      style="z-index: 6; position: absolute; right: 24px; bottom: 24px;"
+      :icon="mdiChevronUp"
+      @click="toTop"
+    />
+  </v-fab-transition>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { mdiChevronUp } from '@mdi/js'
+import { useGoTo } from 'vuetify'
+
+const { selector } = defineProps({ selector: { type: String, required: false, default: '.v-main__scroller' } })
+
+const route = useRoute()
+const router = useRouter()
+const goTo = useGoTo()
+
+let _scrollElement: Element | Window | null
+const show = ref(false)
+
+const onScroll: EventListener = (e: any) => {
+  const top = selector ? e.target.scrollTop : (window.pageYOffset || document.documentElement.offsetTop || 0)
+  show.value = top > 300
+}
+
+onMounted(async () => {
+  _scrollElement = selector ? document.querySelector(selector) : window
+  if (!_scrollElement) console.error(`[scroll-to-top] selector ${selector} not found`)
+  else _scrollElement.addEventListener('scroll', onScroll)
+})
+
+onUnmounted(() => {
+  if (_scrollElement) _scrollElement.removeEventListener('scroll', onScroll)
+})
+
+const toTop = () => {
+  if (selector) {
+    _scrollElement?.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+  } else {
+    if (route.hash) router.push({ hash: '' })
+    goTo(0)
+  }
+}
+</script>

package/scroll-to-top.vue.d.ts

@@ -0,0 +1,16 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    selector: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/scroll-to-top.vue.js

@@ -0,0 +1,96 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { mdiChevronUp } from '@mdi/js';
+import { useGoTo } from 'vuetify';
+const { selector } = defineProps({ selector: { type: String, required: false, default: '.v-main__scroller' } });
+const route = useRoute();
+const router = useRouter();
+const goTo = useGoTo();
+let _scrollElement;
+const show = ref(false);
+const onScroll = (e) => {
+    const top = selector ? e.target.scrollTop : (window.pageYOffset || document.documentElement.offsetTop || 0);
+    show.value = top > 300;
+};
+onMounted(async () => {
+    _scrollElement = selector ? document.querySelector(selector) : window;
+    if (!_scrollElement)
+        console.error(`[scroll-to-top] selector ${selector} not found`);
+    else
+        _scrollElement.addEventListener('scroll', onScroll);
+});
+onUnmounted(() => {
+    if (_scrollElement)
+        _scrollElement.removeEventListener('scroll', onScroll);
+});
+const toTop = () => {
+    if (selector) {
+        _scrollElement?.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+    }
+    else {
+        if (route.hash)
+            router.push({ hash: '' });
+        goTo(0);
+    }
+};
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+const __VLS_0 = {}.VFabTransition;
+/** @type {[typeof __VLS_components.VFabTransition, typeof __VLS_components.vFabTransition, typeof __VLS_components.VFabTransition, typeof __VLS_components.vFabTransition, ]} */ ;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({}));
+const __VLS_2 = __VLS_1({}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+var __VLS_4 = {};
+__VLS_3.slots.default;
+const __VLS_5 = {}.VBtn;
+/** @type {[typeof __VLS_components.VBtn, typeof __VLS_components.vBtn, ]} */ ;
+// @ts-ignore
+const __VLS_6 = __VLS_asFunctionalComponent(__VLS_5, new __VLS_5({
+    ...{ 'onClick': {} },
+    title: "Remonter au début de la page",
+    'aria-label': "Remonter au début de la page",
+    color: "primary",
+    fixed: true,
+    ...{ style: {} },
+    icon: (__VLS_ctx.mdiChevronUp),
+}));
+const __VLS_7 = __VLS_6({
+    ...{ 'onClick': {} },
+    title: "Remonter au début de la page",
+    'aria-label': "Remonter au début de la page",
+    color: "primary",
+    fixed: true,
+    ...{ style: {} },
+    icon: (__VLS_ctx.mdiChevronUp),
+}, ...__VLS_functionalComponentArgsRest(__VLS_6));
+let __VLS_9;
+let __VLS_10;
+let __VLS_11;
+const __VLS_12 = {
+    onClick: (__VLS_ctx.toTop)
+};
+__VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.show) }, null, null);
+var __VLS_8;
+var __VLS_3;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            mdiChevronUp: mdiChevronUp,
+            show: show,
+            toTop: toTop,
+        };
+    },
+    props: { selector: { type: String, required: false, default: '.v-main__scroller' } },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: { selector: { type: String, required: false, default: '.v-main__scroller' } },
+});
+; /* PartiallyEnd: #4569/main.vue */
+//# sourceMappingURL=scroll-to-top.vue.js.map

package/section-tabs.vue

@@ -0,0 +1,94 @@
+<template>
+  <div
+    :id="id"
+    class="mt-3 mb-10"
+  >
+    <v-card
+      :style="cardStyle"
+      color="primary"
+      border="0"
+    >
+      <div
+        class="d-flex flex-no-wrap"
+        style="height: 112px; width: 100%;"
+      >
+        <div
+          v-if="svg && display.mdAndUp.value"
+          :class="`pa-${svgNoMargin ? 0 : 2} flex-grow-0`"
+        >
+          <df-themed-svg
+            :source="svg"
+            :color="color"
+          />
+        </div>
+        <div class="pl-4 flex-grow-1" style="min-width: 0;">
+          <v-toolbar
+            extended
+            flat
+            style="background-color:transparent"
+          >
+            <v-toolbar-title class="text-title-large">
+              {{ title }}
+            </v-toolbar-title>
+            <template #extension>
+              <slot name="extension">
+                <v-tabs
+                  v-model="tab"
+                  :optional="false"
+                  style="margin-bottom: 1px;"
+                  show-arrows
+                  :color="color"
+                >
+                  <template
+                    v-for="(tabInfo, i) in tabs"
+                    :key="i"
+                  >
+                    <v-tab
+                      v-if="tabInfo"
+                      :value="tabInfo.key"
+                      :append-icon="tabInfo.appendIcon"
+                      :base-color="tabInfo.color"
+                      :color="tabInfo.color"
+                    >
+                      <v-icon
+                        v-if="tabInfo.icon"
+                        :icon="tabInfo.icon"
+                      />&nbsp;&nbsp;{{ tabInfo.title }}
+                    </v-tab>
+                  </template>
+                </v-tabs>
+              </slot>
+            </template>
+          </v-toolbar>
+        </div>
+      </div>
+    </v-card>
+    <slot
+      name="content"
+      :tab="tab"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useDisplay, useTheme } from 'vuetify'
+import DfThemedSvg from './themed-svg.vue'
+
+type TabInfo = { key: string, title: string, icon?: string, appendIcon?: string, color?: string } | null
+
+const { title, tabs, svg, color = 'primary' } = defineProps<{
+  id: string,
+  title: string,
+  tabs?: TabInfo[],
+  svg?: string,
+  svgNoMargin?: boolean,
+  color?: string,
+}>()
+const tab = defineModel({ type: String })
+
+const display = useDisplay()
+const theme = useTheme()
+
+const cardStyle = computed(() => `background: linear-gradient(90deg, ${theme.current.value.colors.surface} 0%, ${theme.current.value.colors.background} 20%`)
+</script>

package/section-tabs.vue.d.ts

@@ -0,0 +1,39 @@
+type TabInfo = {
+    key: string;
+    title: string;
+    icon?: string;
+    appendIcon?: string;
+    color?: string;
+} | null;
+type __VLS_Props = {
+    id: string;
+    title: string;
+    tabs?: TabInfo[];
+    svg?: string;
+    svgNoMargin?: boolean;
+    color?: string;
+};
+declare const tab: import("vue").ModelRef<string | undefined, string, string | undefined, string | undefined>;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: typeof tab['value'];
+};
+declare var __VLS_16: {}, __VLS_30: {
+    tab: string | undefined;
+};
+type __VLS_Slots = {} & {
+    extension?: (props: typeof __VLS_16) => any;
+} & {
+    content?: (props: typeof __VLS_30) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/section-tabs.vue.js

@@ -0,0 +1,176 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+import { computed } from 'vue';
+import { useDisplay, useTheme } from 'vuetify';
+import DfThemedSvg from './themed-svg.vue';
+const { title, tabs, svg, color = 'primary' } = defineProps();
+const tab = defineModel({ type: String });
+const display = useDisplay();
+const theme = useTheme();
+const cardStyle = computed(() => `background: linear-gradient(90deg, ${theme.current.value.colors.surface} 0%, ${theme.current.value.colors.background} 20%`);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_defaults = {};
+const __VLS_modelEmit = defineEmits();
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    id: (__VLS_ctx.id),
+    ...{ class: "mt-3 mb-10" },
+});
+const __VLS_0 = {}.VCard;
+/** @type {[typeof __VLS_components.VCard, typeof __VLS_components.vCard, typeof __VLS_components.VCard, typeof __VLS_components.vCard, ]} */ ;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
+    ...{ style: (__VLS_ctx.cardStyle) },
+    color: "primary",
+    border: "0",
+}));
+const __VLS_2 = __VLS_1({
+    ...{ style: (__VLS_ctx.cardStyle) },
+    color: "primary",
+    border: "0",
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+__VLS_3.slots.default;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "d-flex flex-no-wrap" },
+    ...{ style: {} },
+});
+if (svg && __VLS_ctx.display.mdAndUp.value) {
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+        ...{ class: (`pa-${__VLS_ctx.svgNoMargin ? 0 : 2} flex-grow-0`) },
+    });
+    /** @type {[typeof DfThemedSvg, ]} */ ;
+    // @ts-ignore
+    const __VLS_4 = __VLS_asFunctionalComponent(DfThemedSvg, new DfThemedSvg({
+        source: (svg),
+        color: (color),
+    }));
+    const __VLS_5 = __VLS_4({
+        source: (svg),
+        color: (color),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_4));
+}
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "pl-4 flex-grow-1" },
+    ...{ style: {} },
+});
+const __VLS_7 = {}.VToolbar;
+/** @type {[typeof __VLS_components.VToolbar, typeof __VLS_components.vToolbar, typeof __VLS_components.VToolbar, typeof __VLS_components.vToolbar, ]} */ ;
+// @ts-ignore
+const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({
+    extended: true,
+    flat: true,
+    ...{ style: {} },
+}));
+const __VLS_9 = __VLS_8({
+    extended: true,
+    flat: true,
+    ...{ style: {} },
+}, ...__VLS_functionalComponentArgsRest(__VLS_8));
+__VLS_10.slots.default;
+const __VLS_11 = {}.VToolbarTitle;
+/** @type {[typeof __VLS_components.VToolbarTitle, typeof __VLS_components.vToolbarTitle, typeof __VLS_components.VToolbarTitle, typeof __VLS_components.vToolbarTitle, ]} */ ;
+// @ts-ignore
+const __VLS_12 = __VLS_asFunctionalComponent(__VLS_11, new __VLS_11({
+    ...{ class: "text-title-large" },
+}));
+const __VLS_13 = __VLS_12({
+    ...{ class: "text-title-large" },
+}, ...__VLS_functionalComponentArgsRest(__VLS_12));
+__VLS_14.slots.default;
+(title);
+var __VLS_14;
+{
+    const { extension: __VLS_thisSlot } = __VLS_10.slots;
+    var __VLS_15 = {};
+    const __VLS_17 = {}.VTabs;
+    /** @type {[typeof __VLS_components.VTabs, typeof __VLS_components.vTabs, typeof __VLS_components.VTabs, typeof __VLS_components.vTabs, ]} */ ;
+    // @ts-ignore
+    const __VLS_18 = __VLS_asFunctionalComponent(__VLS_17, new __VLS_17({
+        modelValue: (__VLS_ctx.tab),
+        optional: (false),
+        ...{ style: {} },
+        showArrows: true,
+        color: (color),
+    }));
+    const __VLS_19 = __VLS_18({
+        modelValue: (__VLS_ctx.tab),
+        optional: (false),
+        ...{ style: {} },
+        showArrows: true,
+        color: (color),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_18));
+    __VLS_20.slots.default;
+    for (const [tabInfo, i] of __VLS_getVForSourceType((tabs))) {
+        (i);
+        if (tabInfo) {
+            const __VLS_21 = {}.VTab;
+            /** @type {[typeof __VLS_components.VTab, typeof __VLS_components.vTab, typeof __VLS_components.VTab, typeof __VLS_components.vTab, ]} */ ;
+            // @ts-ignore
+            const __VLS_22 = __VLS_asFunctionalComponent(__VLS_21, new __VLS_21({
+                value: (tabInfo.key),
+                appendIcon: (tabInfo.appendIcon),
+                baseColor: (tabInfo.color),
+                color: (tabInfo.color),
+            }));
+            const __VLS_23 = __VLS_22({
+                value: (tabInfo.key),
+                appendIcon: (tabInfo.appendIcon),
+                baseColor: (tabInfo.color),
+                color: (tabInfo.color),
+            }, ...__VLS_functionalComponentArgsRest(__VLS_22));
+            __VLS_24.slots.default;
+            if (tabInfo.icon) {
+                const __VLS_25 = {}.VIcon;
+                /** @type {[typeof __VLS_components.VIcon, typeof __VLS_components.vIcon, ]} */ ;
+                // @ts-ignore
+                const __VLS_26 = __VLS_asFunctionalComponent(__VLS_25, new __VLS_25({
+                    icon: (tabInfo.icon),
+                }));
+                const __VLS_27 = __VLS_26({
+                    icon: (tabInfo.icon),
+                }, ...__VLS_functionalComponentArgsRest(__VLS_26));
+            }
+            (tabInfo.title);
+            var __VLS_24;
+        }
+    }
+    var __VLS_20;
+}
+var __VLS_10;
+var __VLS_3;
+var __VLS_29 = {
+    tab: (__VLS_ctx.tab),
+};
+/** @type {__VLS_StyleScopedClasses['mt-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-10']} */ ;
+/** @type {__VLS_StyleScopedClasses['d-flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-no-wrap']} */ ;
+/** @type {__VLS_StyleScopedClasses['pl-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-grow-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-title-large']} */ ;
+// @ts-ignore
+var __VLS_16 = __VLS_15, __VLS_30 = __VLS_29;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            DfThemedSvg: DfThemedSvg,
+            tab: tab,
+            display: display,
+            cardStyle: cardStyle,
+        };
+    },
+    __typeEmits: {},
+    __typeProps: {},
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */
+//# sourceMappingURL=section-tabs.vue.js.map

package/style/global.scss

@@ -1,3 +1,4 @@
+// This @use is ignored by vuetify-nuxt-module (used by @data-fair/portals)
 @use 'vuetify' with (
   $color-pack: false,
   $body-font-family: var(--d-body-font-family),
@@ -12,7 +13,7 @@
     margin: 0;
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1, h2, h3, h4, h5, h6, p {
     margin: 0;
   }
 }

package/style/settings.scss

@@ -1,5 +1,9 @@
 @use 'vuetify/settings' with (
   // make disabled button style less dependant on theme colors
   $button-colored-disabled: false,
-  $button-disabled-opacity: 0.8
+  $button-disabled-opacity: 0.8,
+
+  // Because @use 'vuetify' is ignored by vuetify-nuxt-module (used by @data-fair/portals)
+  $body-font-family: var(--d-body-font-family),
+  $heading-font-family: var(--d-heading-font-family)
 );

package/themed-svg.vue

@@ -0,0 +1,34 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div
+    class="df-themed-svg"
+    v-html="themedSource"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
+
+const { source, color = 'primary' } = defineProps<{ source: string, color?: string }>()
+const theme = useTheme()
+
+const themedSource = computed(() => {
+  return source
+    .replace(/#6C63FF/gi, theme.current.value.colors[color] as string) // default undraw color
+    .replace(/#68E1FD/gi, theme.current.value.colors[color] as string) // default manypixels color
+    .replace(/#FFD200/gi, theme.current.value.colors.secondary as string)
+    .replace(/style="isolation: isolate;"/gi, 'class="isolated-svg"')
+})
+</script>
+
+<style lang="css">
+div.df-themed-svg {
+  height: 100%;
+}
+div.df-themed-svg svg {
+  height: inherit;
+  width: inherit;
+}
+.isolated-svg { isolation: isolate; }
+</style>

package/themed-svg.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    source: string;
+    color?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/themed-svg.vue.js

@@ -0,0 +1,40 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+const { source, color = 'primary' } = defineProps();
+const theme = useTheme();
+const themedSource = computed(() => {
+    return source
+        .replace(/#6C63FF/gi, theme.current.value.colors[color]) // default undraw color
+        .replace(/#68E1FD/gi, theme.current.value.colors[color]) // default manypixels color
+        .replace(/#FFD200/gi, theme.current.value.colors.secondary)
+        .replace(/style="isolation: isolate;"/gi, 'class="isolated-svg"');
+});
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+// CSS variable injection 
+// CSS variable injection end 
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div)({
+    ...{ class: "df-themed-svg" },
+});
+__VLS_asFunctionalDirective(__VLS_directives.vHtml)(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.themedSource) }, null, null);
+/** @type {__VLS_StyleScopedClasses['df-themed-svg']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            themedSource: themedSource,
+        };
+    },
+    __typeProps: {},
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeProps: {},
+});
+; /* PartiallyEnd: #4569/main.vue */
+//# sourceMappingURL=themed-svg.vue.js.map

package/toc.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-list
+    v-if="sections && sections.length"
+    density="compact"
+    color="primary"
+    class="py-0"
+    bg-color="background"
+  >
+    <v-list-subheader>{{ t('content') }}</v-list-subheader>
+
+    <v-list-item
+      v-for="(section, i) in sections"
+      :key="i"
+      :active="activeIndex === i"
+      @click="goTo('#' + section.id, { offset: -20, container: '.v-main__scroller' })"
+    >
+      <v-list-item-title>
+        <slot
+          name="title"
+          :section="section"
+        >
+          {{ section.title }}
+        </slot>
+      </v-list-item-title>
+      <slot
+        name="bottom"
+        :section="section"
+      />
+    </v-list-item>
+  </v-list>
+</template>
+
+<i18n lang="yaml">
+fr:
+  content: CONTENU
+en:
+  content: CONTENT
+</i18n>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useGoTo } from 'vuetify'
+
+const { sections } = defineProps<{ sections: { id: string, title: string }[] }>()
+
+const goTo = useGoTo()
+const { t } = useI18n({ useScope: 'local' })
+
+let timeout: NodeJS.Timeout | undefined
+let scrollEl: Element | null = null
+
+const onScroll = () => {
+  clearTimeout(timeout)
+  timeout = setTimeout(findActiveIndex, 17)
+}
+
+onMounted(() => {
+  scrollEl = document.querySelector('.v-main__scroller')
+  if (scrollEl) {
+    scrollEl.addEventListener('scroll', onScroll, { passive: true })
+    onScroll()
+  }
+})
+
+onUnmounted(() => {
+  if (scrollEl) {
+    scrollEl.removeEventListener('scroll', onScroll)
+  }
+})
+
+const activeIndex = ref<number | null>(null)
+const findActiveIndex = () => {
+  if (!scrollEl) return
+  const currentOffset = scrollEl.scrollTop
+  let index = 0
+  let ready = false
+  for (let i = sections.length - 1; i >= 0; i--) {
+    const e = document.getElementById(sections[i].id)
+    if (!e?.offsetTop) continue
+    ready = true
+    if (e.offsetTop - 40 < currentOffset) {
+      index = i
+      break
+    }
+  }
+
+  if (ready && currentOffset + scrollEl.clientHeight >= scrollEl.scrollHeight - 1) {
+    index = sections.length - 1
+  }
+  activeIndex.value = index
+}
+</script>

package/toc.vue.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    sections: {
+        id: string;
+        title: string;
+    }[];
+};
+declare var __VLS_22: {
+    section: {
+        id: string;
+        title: string;
+    };
+}, __VLS_24: {
+    section: {
+        id: string;
+        title: string;
+    };
+};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_22) => any;
+} & {
+    bottom?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/toc.vue.js

@@ -0,0 +1,143 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useGoTo } from 'vuetify';
+const { sections } = defineProps();
+const goTo = useGoTo();
+const { t } = useI18n({ useScope: 'local' });
+let timeout;
+let scrollEl = null;
+const onScroll = () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(findActiveIndex, 17);
+};
+onMounted(() => {
+    scrollEl = document.querySelector('.v-main__scroller');
+    if (scrollEl) {
+        scrollEl.addEventListener('scroll', onScroll, { passive: true });
+        onScroll();
+    }
+});
+onUnmounted(() => {
+    if (scrollEl) {
+        scrollEl.removeEventListener('scroll', onScroll);
+    }
+});
+const activeIndex = ref(null);
+const findActiveIndex = () => {
+    if (!scrollEl)
+        return;
+    const currentOffset = scrollEl.scrollTop;
+    let index = 0;
+    let ready = false;
+    for (let i = sections.length - 1; i >= 0; i--) {
+        const e = document.getElementById(sections[i].id);
+        if (!e?.offsetTop)
+            continue;
+        ready = true;
+        if (e.offsetTop - 40 < currentOffset) {
+            index = i;
+            break;
+        }
+    }
+    if (ready && currentOffset + scrollEl.clientHeight >= scrollEl.scrollHeight - 1) {
+        index = sections.length - 1;
+    }
+    activeIndex.value = index;
+};
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+if (sections && sections.length) {
+    const __VLS_0 = {}.VList;
+    /** @type {[typeof __VLS_components.VList, typeof __VLS_components.vList, typeof __VLS_components.VList, typeof __VLS_components.vList, ]} */ ;
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
+        density: "compact",
+        color: "primary",
+        ...{ class: "py-0" },
+        bgColor: "background",
+    }));
+    const __VLS_2 = __VLS_1({
+        density: "compact",
+        color: "primary",
+        ...{ class: "py-0" },
+        bgColor: "background",
+    }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    var __VLS_4 = {};
+    __VLS_3.slots.default;
+    const __VLS_5 = {}.VListSubheader;
+    /** @type {[typeof __VLS_components.VListSubheader, typeof __VLS_components.vListSubheader, typeof __VLS_components.VListSubheader, typeof __VLS_components.vListSubheader, ]} */ ;
+    // @ts-ignore
+    const __VLS_6 = __VLS_asFunctionalComponent(__VLS_5, new __VLS_5({}));
+    const __VLS_7 = __VLS_6({}, ...__VLS_functionalComponentArgsRest(__VLS_6));
+    __VLS_8.slots.default;
+    (__VLS_ctx.t('content'));
+    var __VLS_8;
+    for (const [section, i] of __VLS_getVForSourceType((sections))) {
+        const __VLS_9 = {}.VListItem;
+        /** @type {[typeof __VLS_components.VListItem, typeof __VLS_components.vListItem, typeof __VLS_components.VListItem, typeof __VLS_components.vListItem, ]} */ ;
+        // @ts-ignore
+        const __VLS_10 = __VLS_asFunctionalComponent(__VLS_9, new __VLS_9({
+            ...{ 'onClick': {} },
+            key: (i),
+            active: (__VLS_ctx.activeIndex === i),
+        }));
+        const __VLS_11 = __VLS_10({
+            ...{ 'onClick': {} },
+            key: (i),
+            active: (__VLS_ctx.activeIndex === i),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_10));
+        let __VLS_13;
+        let __VLS_14;
+        let __VLS_15;
+        const __VLS_16 = {
+            onClick: (...[$event]) => {
+                if (!(sections && sections.length))
+                    return;
+                __VLS_ctx.goTo('#' + section.id, { offset: -20, container: '.v-main__scroller' });
+            }
+        };
+        __VLS_12.slots.default;
+        const __VLS_17 = {}.VListItemTitle;
+        /** @type {[typeof __VLS_components.VListItemTitle, typeof __VLS_components.vListItemTitle, typeof __VLS_components.VListItemTitle, typeof __VLS_components.vListItemTitle, ]} */ ;
+        // @ts-ignore
+        const __VLS_18 = __VLS_asFunctionalComponent(__VLS_17, new __VLS_17({}));
+        const __VLS_19 = __VLS_18({}, ...__VLS_functionalComponentArgsRest(__VLS_18));
+        __VLS_20.slots.default;
+        var __VLS_21 = {
+            section: (section),
+        };
+        (section.title);
+        var __VLS_20;
+        var __VLS_23 = {
+            section: (section),
+        };
+        var __VLS_12;
+    }
+    var __VLS_3;
+}
+/** @type {__VLS_StyleScopedClasses['py-0']} */ ;
+// @ts-ignore
+var __VLS_22 = __VLS_21, __VLS_24 = __VLS_23;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            goTo: goTo,
+            t: t,
+            activeIndex: activeIndex,
+        };
+    },
+    __typeProps: {},
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeProps: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */
+//# sourceMappingURL=toc.vue.js.map

package/vite.d.ts

@@ -1,28 +1,29 @@
-export declare const autoImports: (string | {
-    '@data-fair/lib-vue/session.js': string[];
-    '@data-fair/lib-vue/reactive-search-params.js': string[];
-    '@data-fair/lib-vue/locale-dayjs.js': string[];
-    '@data-fair/lib-vue/concept-filters.js': string[];
-    '@data-fair/lib-vue/ui-notif.js': string[];
-    '@data-fair/lib-vue/fetch.js': string[];
-    '@data-fair/lib-vue/edit-fetch.js': string[];
-    '@data-fair/lib-vue/ws.js': string[];
-    '@data-fair/lib-vue/async-action.js': string[];
-    '@data-fair/lib-vue/leave-guard.js': string[];
-    '@data-fair/lib-vue/deep-diff.js': string[];
-    '@data-fair/lib-vue/format/bytes.js': string[];
-} | {
-    '@data-fair/lib-vuetify/date-match-filter.vue': string[][];
-    '@data-fair/lib-vuetify/date-range-picker.vue': string[][];
-    '@data-fair/lib-vuetify/lang-switcher.vue': string[][];
-    '@data-fair/lib-vuetify/navigation-right.vue': string[][];
-    '@data-fair/lib-vuetify/owner-avatar.vue': string[][];
-    '@data-fair/lib-vuetify/owner-pick.vue': string[][];
-    '@data-fair/lib-vuetify/personal-menu.vue': string[][];
-    '@data-fair/lib-vuetify/theme-switcher.vue': string[][];
-    '@data-fair/lib-vuetify/tutorial-alert.vue': string[][];
-    '@data-fair/lib-vuetify/ui-notif-alert.vue': string[][];
-    '@data-fair/lib-vuetify/ui-notif.vue': string[][];
-    '@data-fair/lib-vuetify/ui-user-avatar.vue': string[][];
-})[];
+/**
+ * Re-export of {@link autoImports} from `@data-fair/lib-vue/vite.js`.
+ *
+ * Composables-only preset for {@link https://github.com/unplugin/unplugin-auto-import unplugin-auto-import}.
+ * Does not include components — use {@link componentsResolver} with
+ * {@link https://github.com/unplugin/unplugin-vue-components unplugin-vue-components} for that.
+ */
+export { autoImports } from '@data-fair/lib-vue/vite.js';
+/**
+ * Resolver for {@link https://github.com/unplugin/unplugin-vue-components unplugin-vue-components}.
+ *
+ * Resolves `Df`-prefixed component names (e.g. `<DfPersonalMenu>` or `<df-personal-menu>`)
+ * to their corresponding `@data-fair/lib-vuetify/*.vue` module.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { componentsResolver } from '@data-fair/lib-vuetify/vite.js'
+ * import Components from 'unplugin-vue-components/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     Components({ resolvers: [componentsResolver] })
+ *   ]
+ * })
+ * ```
+ */
+export declare const componentsResolver: (name: string) => string | undefined;
 export declare const settingsPath: string;

package/vite.js

@@ -1,23 +1,57 @@
-// made for https://github.com/unplugin/unplugin-auto-import
-import { autoImports as vueAutoImports } from '@data-fair/lib-vue/vite.js';
-export const autoImports = [
-    ...vueAutoImports,
-    {
-        '@data-fair/lib-vuetify/date-match-filter.vue': [['default', 'dfDateMatchFilter']],
-        '@data-fair/lib-vuetify/date-range-picker.vue': [['default', 'dfDateRangePicker']],
-        '@data-fair/lib-vuetify/lang-switcher.vue': [['default', 'dfLangSwitcher']],
-        '@data-fair/lib-vuetify/navigation-right.vue': [['default', 'dfNavigationRight']],
-        '@data-fair/lib-vuetify/owner-avatar.vue': [['default', 'dfOwnerAvatar']],
-        '@data-fair/lib-vuetify/owner-pick.vue': [['default', 'dfOwnerPick']],
-        '@data-fair/lib-vuetify/personal-menu.vue': [['default', 'dfPersonalMenu']],
-        // I don't understand why but search-address.vue breaks some typescript checks
-        // '@data-fair/lib-vuetify/search-address.vue': [['default', 'dfSearchAddress']],
-        '@data-fair/lib-vuetify/theme-switcher.vue': [['default', 'dfThemeSwitcher']],
-        '@data-fair/lib-vuetify/tutorial-alert.vue': [['default', 'dfTutorialAlert']],
-        '@data-fair/lib-vuetify/ui-notif-alert.vue': [['default', 'dfUiNotifAlert']],
-        '@data-fair/lib-vuetify/ui-notif.vue': [['default', 'dfUiNotif']],
-        '@data-fair/lib-vuetify/ui-user-avatar.vue': [['default', 'dfUserAvatar']]
-    }
-];
+/**
+ * Re-export of {@link autoImports} from `@data-fair/lib-vue/vite.js`.
+ *
+ * Composables-only preset for {@link https://github.com/unplugin/unplugin-auto-import unplugin-auto-import}.
+ * Does not include components — use {@link componentsResolver} with
+ * {@link https://github.com/unplugin/unplugin-vue-components unplugin-vue-components} for that.
+ */
+export { autoImports } from '@data-fair/lib-vue/vite.js';
+/**
+ * Map of PascalCase component names to their module paths.
+ * Used internally by {@link componentsResolver}.
+ */
+const components = {
+    DfDateMatchFilter: '@data-fair/lib-vuetify/date-match-filter.vue',
+    DfDateRangePicker: '@data-fair/lib-vuetify/date-range-picker.vue',
+    DfLangSwitcher: '@data-fair/lib-vuetify/lang-switcher.vue',
+    DfNavigationRight: '@data-fair/lib-vuetify/navigation-right.vue',
+    DfOwnerAvatar: '@data-fair/lib-vuetify/owner-avatar.vue',
+    DfOwnerPick: '@data-fair/lib-vuetify/owner-pick.vue',
+    DfPersonalMenu: '@data-fair/lib-vuetify/personal-menu.vue',
+    DfScrollToTop: '@data-fair/lib-vuetify/scroll-to-top.vue',
+    DfSearchAddress: '@data-fair/lib-vuetify/search-address.vue',
+    DfSearchField: '@data-fair/lib-vuetify/search-field.vue',
+    DfSectionTabs: '@data-fair/lib-vuetify/section-tabs.vue',
+    DfThemedSvg: '@data-fair/lib-vuetify/themed-svg.vue',
+    DfThemeSwitcher: '@data-fair/lib-vuetify/theme-switcher.vue',
+    DfToc: '@data-fair/lib-vuetify/toc.vue',
+    DfTutorialAlert: '@data-fair/lib-vuetify/tutorial-alert.vue',
+    DfUiNotifAlert: '@data-fair/lib-vuetify/ui-notif-alert.vue',
+    DfUiNotif: '@data-fair/lib-vuetify/ui-notif.vue',
+    DfUserAvatar: '@data-fair/lib-vuetify/user-avatar.vue'
+};
+/**
+ * Resolver for {@link https://github.com/unplugin/unplugin-vue-components unplugin-vue-components}.
+ *
+ * Resolves `Df`-prefixed component names (e.g. `<DfPersonalMenu>` or `<df-personal-menu>`)
+ * to their corresponding `@data-fair/lib-vuetify/*.vue` module.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { componentsResolver } from '@data-fair/lib-vuetify/vite.js'
+ * import Components from 'unplugin-vue-components/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     Components({ resolvers: [componentsResolver] })
+ *   ]
+ * })
+ * ```
+ */
+export const componentsResolver = (name) => {
+    if (components[name])
+        return components[name];
+};
 export const settingsPath = new URL(import.meta.resolve('@data-fair/lib-vuetify/style/settings.scss')).pathname;
 //# sourceMappingURL=vite.js.map