erudit 3.0.0-dev.17 → 3.0.0-dev.18

package/app/components/preview/PreviewScreen.vue

@@ -1,141 +1,141 @@
-<script lang="ts" setup>
-import type { PreviewRequest } from '@app/scripts/preview/request';
-import { type PreviewData } from '@app/scripts/preview/data';
-import { buildPreviewData } from '@app/scripts/preview/build';
-import { getPreviewDisplayComponent } from '@app/scripts/preview/display';
-import { createPreviewError } from '@app/scripts/preview/data/alert';
-
-import { LazyPreviewDisplayAlert } from '#components';
-
-const { request } = defineProps<{ request: PreviewRequest }>();
-const height = defineModel<number>('height');
-
-const loading = ref(true);
-const suspensePending = ref(true);
-const effectiveLoading = computed(() => loading.value || suspensePending.value);
-
-const loadingElem = useTemplateRef('loadingElem');
-const screenElem = useTemplateRef('screenElem');
-const screenSizeObserver = new ResizeObserver(updateContentHeight);
-
-const DisplayComponent = shallowRef<Component>();
-const previewData = shallowRef<PreviewData>();
-
-const setupDisplay = setTimeout(async () => {
-    //await new Promise(resolve => setTimeout(resolve, 5000));
-
-    try {
-        previewData.value = await buildPreviewData(request);
-        DisplayComponent.value = getPreviewDisplayComponent(previewData.value);
-    } catch (error) {
-        console.error(error);
-
-        previewData.value = createPreviewError({
-            // @ts-ignore
-            message: error?.message || error,
-        });
-
-        DisplayComponent.value = LazyPreviewDisplayAlert;
-    }
-
-    await nextTick();
-    loading.value = false;
-});
-
-function updateContentHeight() {
-    // Use the proper element for height calculation based on which one is visible
-    const targetElem = effectiveLoading.value
-        ? loadingElem.value
-        : screenElem.value;
-    if (!targetElem) return;
-
-    height.value = targetElem.offsetHeight;
-}
-
-function onSuspenseResolve() {
-    suspensePending.value = false;
-}
-
-onMounted(() => {
-    // Initialize height with either element that's available
-    const initialElement = loadingElem.value || screenElem.value;
-    height.value = initialElement?.offsetHeight ?? 0;
-
-    // Observe both elements for size changes
-    watch(
-        [loadingElem, screenElem, effectiveLoading],
-        () => {
-            screenSizeObserver.disconnect();
-
-            // Observe loading element when it's visible
-            if (effectiveLoading.value && loadingElem.value) {
-                screenSizeObserver.observe(loadingElem.value);
-            }
-            // Otherwise observe content element
-            else if (screenElem.value) {
-                screenSizeObserver.observe(screenElem.value);
-            }
-
-            // Update height after elements change
-            updateContentHeight();
-        },
-        { immediate: true },
-    );
-});
-
-onUnmounted(() => {
-    clearTimeout(setupDisplay);
-    screenSizeObserver.disconnect();
-});
-</script>
-
-<template>
-    <div :class="$style.screenContainer">
-        <TransitionFade>
-            <div
-                v-if="effectiveLoading"
-                ref="loadingElem"
-                :class="$style.loadingOverlay"
-            >
-                <PreviewLoading />
-            </div>
-        </TransitionFade>
-
-        <div ref="screenElem" :class="$style.screen">
-            <Suspense @resolve="onSuspenseResolve" v-if="DisplayComponent">
-                <component :is="DisplayComponent" :data="previewData" />
-                <template #fallback>
-                    <div></div>
-                </template>
-            </Suspense>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-.screenContainer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.loadingOverlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: auto;
-    z-index: 2;
-    background-color: var(--_previewThemeBg, var(--bgAside));
-}
-
-.screen {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 1;
-}
-</style>
+<script lang="ts" setup>
+import type { PreviewRequest } from '@app/scripts/preview/request';
+import { type PreviewData } from '@app/scripts/preview/data';
+import { buildPreviewData } from '@app/scripts/preview/build';
+import { getPreviewDisplayComponent } from '@app/scripts/preview/display';
+import { createPreviewError } from '@app/scripts/preview/data/alert';
+
+import { LazyPreviewDisplayAlert } from '#components';
+
+const { request } = defineProps<{ request: PreviewRequest }>();
+const height = defineModel<number>('height');
+
+const loading = ref(true);
+const suspensePending = ref(true);
+const effectiveLoading = computed(() => loading.value || suspensePending.value);
+
+const loadingElem = useTemplateRef('loadingElem');
+const screenElem = useTemplateRef('screenElem');
+const screenSizeObserver = new ResizeObserver(updateContentHeight);
+
+const DisplayComponent = shallowRef<Component>();
+const previewData = shallowRef<PreviewData>();
+
+const setupDisplay = setTimeout(async () => {
+    //await new Promise(resolve => setTimeout(resolve, 5000));
+
+    try {
+        previewData.value = await buildPreviewData(request);
+        DisplayComponent.value = getPreviewDisplayComponent(previewData.value);
+    } catch (error) {
+        console.error(error);
+
+        previewData.value = createPreviewError({
+            // @ts-ignore
+            message: error?.message || error,
+        });
+
+        DisplayComponent.value = LazyPreviewDisplayAlert;
+    }
+
+    await nextTick();
+    loading.value = false;
+});
+
+function updateContentHeight() {
+    // Use the proper element for height calculation based on which one is visible
+    const targetElem = effectiveLoading.value
+        ? loadingElem.value
+        : screenElem.value;
+    if (!targetElem) return;
+
+    height.value = targetElem.offsetHeight;
+}
+
+function onSuspenseResolve() {
+    suspensePending.value = false;
+}
+
+onMounted(() => {
+    // Initialize height with either element that's available
+    const initialElement = loadingElem.value || screenElem.value;
+    height.value = initialElement?.offsetHeight ?? 0;
+
+    // Observe both elements for size changes
+    watch(
+        [loadingElem, screenElem, effectiveLoading],
+        () => {
+            screenSizeObserver.disconnect();
+
+            // Observe loading element when it's visible
+            if (effectiveLoading.value && loadingElem.value) {
+                screenSizeObserver.observe(loadingElem.value);
+            }
+            // Otherwise observe content element
+            else if (screenElem.value) {
+                screenSizeObserver.observe(screenElem.value);
+            }
+
+            // Update height after elements change
+            updateContentHeight();
+        },
+        { immediate: true },
+    );
+});
+
+onUnmounted(() => {
+    clearTimeout(setupDisplay);
+    screenSizeObserver.disconnect();
+});
+</script>
+
+<template>
+    <div :class="$style.screenContainer">
+        <TransitionFade>
+            <div
+                v-if="effectiveLoading"
+                ref="loadingElem"
+                :class="$style.loadingOverlay"
+            >
+                <PreviewLoading />
+            </div>
+        </TransitionFade>
+
+        <div ref="screenElem" :class="$style.screen">
+            <Suspense @resolve="onSuspenseResolve" v-if="DisplayComponent">
+                <component :is="DisplayComponent" :data="previewData" />
+                <template #fallback>
+                    <div></div>
+                </template>
+            </Suspense>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+.screenContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.loadingOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    z-index: 2;
+    background-color: var(--_previewThemeBg, var(--bgAside));
+}
+
+.screen {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+}
+</style>

package/app/components/preview/display/Alert.vue

@@ -1,50 +1,50 @@
-<script lang="ts" setup>
-import type { PreviewDataAlert } from '@app/scripts/preview/data/alert';
-import type { PreviewDisplayProps } from '@app/scripts/preview/display';
-import type { PreviewFooter } from '@app/scripts/preview/footer';
-import { setPreviewTheme } from '@app/scripts/preview/state';
-
-const { data } = defineProps<PreviewDisplayProps<PreviewDataAlert>>();
-
-const phrase = await usePhrases('error');
-
-setPreviewTheme(data.theme!);
-
-const footer: PreviewFooter = {
-    iconName: 'alert',
-    primary: data.title || phrase.error,
-};
-</script>
-
-<template>
-    <PreviewDisplay :footer>
-        <div :class="$style.alertContent">
-            <div v-html="data.message"></div>
-            <pre v-if="data.pre" v-html="data.pre"></pre>
-        </div>
-    </PreviewDisplay>
-</template>
-
-<style lang="scss" module>
-.alertContent {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap);
-    padding: var(--gapBig);
-
-    color: var(--_previewThemeText);
-    font-size: 0.9em;
-
-    @include transition(color);
-
-    div {
-        font-weight: 500;
-    }
-
-    pre {
-        max-height: 100px;
-        overflow: auto;
-        @include scroll;
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { PreviewDataAlert } from '@app/scripts/preview/data/alert';
+import type { PreviewDisplayProps } from '@app/scripts/preview/display';
+import type { PreviewFooter } from '@app/scripts/preview/footer';
+import { setPreviewTheme } from '@app/scripts/preview/state';
+
+const { data } = defineProps<PreviewDisplayProps<PreviewDataAlert>>();
+
+const phrase = await usePhrases('error');
+
+setPreviewTheme(data.theme!);
+
+const footer: PreviewFooter = {
+    iconName: 'alert',
+    primary: data.title || phrase.error,
+};
+</script>
+
+<template>
+    <PreviewDisplay :footer>
+        <div :class="$style.alertContent">
+            <div v-html="data.message"></div>
+            <pre v-if="data.pre" v-html="data.pre"></pre>
+        </div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.alertContent {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    padding: var(--gapBig);
+
+    color: var(--_previewThemeText);
+    font-size: 0.9em;
+
+    @include transition(color);
+
+    div {
+        font-weight: 500;
+    }
+
+    pre {
+        max-height: 100px;
+        overflow: auto;
+        @include scroll;
+    }
+}
+</style>

package/app/components/preview/display/Custom.vue

@@ -1,18 +1,18 @@
-<script lang="ts" setup>
-import type { PreviewDataCustom } from '@app/scripts/preview/data/custom';
-import type { PreviewDisplayProps } from '@app/scripts/preview/display';
-
-const { data } = defineProps<PreviewDisplayProps<PreviewDataCustom>>();
-</script>
-
-<template>
-    <PreviewDisplay :footer="data.footer">
-        <div :class="$style.message">{{ data.message }}</div>
-    </PreviewDisplay>
-</template>
-
-<style lang="scss" module>
-.message {
-    padding: var(--gapBig);
-}
-</style>
+<script lang="ts" setup>
+import type { PreviewDataCustom } from '@app/scripts/preview/data/custom';
+import type { PreviewDisplayProps } from '@app/scripts/preview/display';
+
+const { data } = defineProps<PreviewDisplayProps<PreviewDataCustom>>();
+</script>
+
+<template>
+    <PreviewDisplay :footer="data.footer">
+        <div :class="$style.message">{{ data.message }}</div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.message {
+    padding: var(--gapBig);
+}
+</style>

package/app/components/preview/display/GenericLink.vue

@@ -1,48 +1,48 @@
-<script lang="ts" setup>
-import type { PreviewDataGenericLink } from '@app/scripts/preview/data/genericLink';
-import type { PreviewDisplayProps } from '@app/scripts/preview/display';
-import type { PreviewFooter } from '@app/scripts/preview/footer';
-
-const { data } = defineProps<PreviewDisplayProps<PreviewDataGenericLink>>();
-
-const phrase = await usePhrases(
-    'external_link',
-    'external_link_warn',
-    'internal_link',
-    'internal_link_warn',
-);
-
-const footer: PreviewFooter = {
-    iconName: data.external ? 'link-external' : 'link',
-    href: data.href,
-    primary: data.external ? phrase.external_link : phrase.internal_link,
-};
-
-const warnMessage = data.external
-    ? phrase.external_link_warn
-    : phrase.internal_link_warn;
-</script>
-
-<template>
-    <PreviewDisplay :footer>
-        <div :class="$style.wrapper">
-            <div :class="$style.warn">{{ warnMessage }}</div>
-            <pre>{{ data.href }}</pre>
-        </div>
-    </PreviewDisplay>
-</template>
-
-<style lang="scss" module>
-.wrapper {
-    padding: var(--gapBig);
-
-    pre {
-        font-family: monospace;
-    }
-}
-
-.warn {
-    color: var(--textMuted);
-    margin-bottom: var(--gap);
-}
-</style>
+<script lang="ts" setup>
+import type { PreviewDataGenericLink } from '@app/scripts/preview/data/genericLink';
+import type { PreviewDisplayProps } from '@app/scripts/preview/display';
+import type { PreviewFooter } from '@app/scripts/preview/footer';
+
+const { data } = defineProps<PreviewDisplayProps<PreviewDataGenericLink>>();
+
+const phrase = await usePhrases(
+    'external_link',
+    'external_link_warn',
+    'internal_link',
+    'internal_link_warn',
+);
+
+const footer: PreviewFooter = {
+    iconName: data.external ? 'link-external' : 'link',
+    href: data.href,
+    primary: data.external ? phrase.external_link : phrase.internal_link,
+};
+
+const warnMessage = data.external
+    ? phrase.external_link_warn
+    : phrase.internal_link_warn;
+</script>
+
+<template>
+    <PreviewDisplay :footer>
+        <div :class="$style.wrapper">
+            <div :class="$style.warn">{{ warnMessage }}</div>
+            <pre>{{ data.href }}</pre>
+        </div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.wrapper {
+    padding: var(--gapBig);
+
+    pre {
+        font-family: monospace;
+    }
+}
+
+.warn {
+    color: var(--textMuted);
+    margin-bottom: var(--gap);
+}
+</style>

package/app/components/preview/display/PageLink.vue

@@ -1,22 +1,22 @@
-<script lang="ts" setup>
-import type { PreviewDataPageLink } from '@app/scripts/preview/data/pageLink';
-import type { PreviewDisplayProps } from '@app/scripts/preview/display';
-
-const { data } = defineProps<PreviewDisplayProps<PreviewDataPageLink>>();
-
-const phrase = await usePhrases('internal_link_warn');
-</script>
-
-<template>
-    <PreviewDisplay :footer="data.footer">
-        <div :class="$style.wrapper">
-            {{ data.description || phrase.internal_link_warn }}
-        </div>
-    </PreviewDisplay>
-</template>
-
-<style lang="scss" module>
-.wrapper {
-    padding: var(--gapBig);
-}
-</style>
+<script lang="ts" setup>
+import type { PreviewDataPageLink } from '@app/scripts/preview/data/pageLink';
+import type { PreviewDisplayProps } from '@app/scripts/preview/display';
+
+const { data } = defineProps<PreviewDisplayProps<PreviewDataPageLink>>();
+
+const phrase = await usePhrases('internal_link_warn');
+</script>
+
+<template>
+    <PreviewDisplay :footer="data.footer">
+        <div :class="$style.wrapper">
+            {{ data.description || phrase.internal_link_warn }}
+        </div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.wrapper {
+    padding: var(--gapBig);
+}
+</style>

package/app/components/preview/display/Unique.vue

@@ -1,55 +1,55 @@
-<script lang="ts" setup>
-import { headingName } from '@erudit-js/bitran-elements/heading/shared';
-
-import type { PreviewDataUnique } from '@app/scripts/preview/data/unique';
-import type { PreviewDisplayProps } from '@app/scripts/preview/display';
-
-const { data } = defineProps<PreviewDisplayProps<PreviewDataUnique>>();
-
-const bitranTranspiler = await useBitranTranspiler();
-const root = await bitranTranspiler.parser.parse(data.bitran.content.biCode);
-</script>
-
-<template>
-    <PreviewDisplay :footer="data.footer">
-        <div
-            :class="[
-                $style.bitranPreviewContent,
-                data.productName === headingName && $style.heading,
-            ]"
-        >
-            <BitranContent
-                :content="{
-                    root,
-                    renderDataStorage: data.bitran.content.renderDataStorage,
-                }"
-                :context="data.bitran.context"
-            />
-        </div>
-    </PreviewDisplay>
-</template>
-
-<style lang="scss" module>
-.bitranPreviewContent {
-    position: relative;
-    padding: var(--gap) 0;
-}
-
-.heading {
-    max-height: 340px;
-    overflow: hidden;
-
-    &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 10;
-        background: linear-gradient(to bottom, transparent, var(--bgAside) 95%);
-        pointer-events: none;
-        touch-action: none;
-    }
-}
-</style>
+<script lang="ts" setup>
+import { headingName } from '@erudit-js/bitran-elements/heading/shared';
+
+import type { PreviewDataUnique } from '@app/scripts/preview/data/unique';
+import type { PreviewDisplayProps } from '@app/scripts/preview/display';
+
+const { data } = defineProps<PreviewDisplayProps<PreviewDataUnique>>();
+
+const bitranTranspiler = await useBitranTranspiler();
+const root = await bitranTranspiler.parser.parse(data.bitran.content.biCode);
+</script>
+
+<template>
+    <PreviewDisplay :footer="data.footer">
+        <div
+            :class="[
+                $style.bitranPreviewContent,
+                data.productName === headingName && $style.heading,
+            ]"
+        >
+            <BitranContent
+                :content="{
+                    root,
+                    renderDataStorage: data.bitran.content.renderDataStorage,
+                }"
+                :context="data.bitran.context"
+            />
+        </div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.bitranPreviewContent {
+    position: relative;
+    padding: var(--gap) 0;
+}
+
+.heading {
+    max-height: 340px;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 10;
+        background: linear-gradient(to bottom, transparent, var(--bgAside) 95%);
+        pointer-events: none;
+        touch-action: none;
+    }
+}
+</style>