erudit 2.0.0-dev.7 → 2.0.0-dev.9

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,20 +1,20 @@
-<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">{{ 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">{{ phrase.internal_link_warn }}</div>
+    </PreviewDisplay>
+</template>
+
+<style lang="scss" module>
+.wrapper {
+    padding: var(--gapBig);
+}
+</style>

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

@@ -1,49 +1,49 @@
-<script lang="ts" setup>
-import type { PreviewDataUnique } from '@app/scripts/preview/data/unique';
-import type { PreviewDisplayProps } from '@app/scripts/preview/display';
-
-import { headingName } from '@shared/bitran/products/heading/shared';
-
-const { data } = defineProps<PreviewDisplayProps<PreviewDataUnique>>();
-</script>
-
-<template>
-    <PreviewDisplay :footer="data.footer">
-        <div
-            :class="[
-                $style.bitranPreviewContent,
-                data.productName === headingName && $style.heading,
-            ]"
-        >
-            <BitranContent
-                :content="data.bitran.content"
-                :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>>();
+</script>
+
+<template>
+    <PreviewDisplay :footer="data.footer">
+        <div
+            :class="[
+                $style.bitranPreviewContent,
+                data.productName === headingName && $style.heading,
+            ]"
+        >
+            <BitranContent
+                :content="data.bitran.content"
+                :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>

package/app/components/transition/Fade.vue

@@ -1,22 +1,22 @@
-<template>
-    <Transition name="EruditTransitionFade">
-        <slot></slot>
-    </Transition>
-</template>
-
-<style lang="scss">
-.EruditTransitionFade
-{
-    &-enter-active,
-    &-leave-active
-    {
-        transition: opacity var(--transitionSpeed) var(--transitionFunction);
-    }
-
-    &-enter-from,
-    &-leave-to
-    {
-        opacity: 0;
-    }
-}
+<template>
+    <Transition name="EruditTransitionFade">
+        <slot></slot>
+    </Transition>
+</template>
+
+<style lang="scss">
+.EruditTransitionFade
+{
+    &-enter-active,
+    &-leave-active
+    {
+        transition: opacity var(--transitionSpeed) var(--transitionFunction);
+    }
+
+    &-enter-from,
+    &-leave-to
+    {
+        opacity: 0;
+    }
+}
 </style>

package/app/components/tree/TreeContainer.vue

@@ -1,12 +1,12 @@
-<template>
-    <div :class="$style.treeContainer">
-        <slot></slot>
-    </div>
-</template>
-
-<style lang="scss" module>
-.treeContainer
-{
-    padding: calc(var(--gap) / 2) 0;
-}
+<template>
+    <div :class="$style.treeContainer">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss" module>
+.treeContainer
+{
+    padding: calc(var(--gap) / 2) 0;
+}
 </style>

package/app/components/tree/TreeItem.vue

@@ -1,89 +1,89 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-
-defineProps<{
-    label: string;
-    icon?: MyIconName;
-    svg?: string;
-    level?: number;
-    link?: string;
-    active?: boolean;
-    accent?: boolean;
-}>();
-</script>
-
-<template>
-    <NuxtLink
-        :prefetch="false"
-        :to="link"
-        :class="[
-            $style.treeItem,
-            active && $style.active,
-            accent && $style.accent,
-        ]"
-        :style="{ ['--_level']: level ?? 0 }"
-    >
-        <MyIcon v-if="icon" :class="$style.icon" :name="icon" />
-        <MyRuntimeIcon v-else :class="$style.icon" name="tree-item-icon" :svg />
-        <div :class="$style.main">{{ label }}</div>
-        <div v-if="$slots.default" :class="$style.after">
-            <slot></slot>
-        </div>
-    </NuxtLink>
-</template>
-
-<style lang="scss" module>
-.treeItem {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: calc(var(--gap) / 1.6);
-    padding: calc(var(--gap) / 2) var(--gap);
-    padding-left: calc((var(--_level) + 1) * var(--gap));
-    font-size: 0.95em;
-    color: var(--textMuted);
-    text-decoration: none;
-    cursor: pointer;
-
-    @include transition(background);
-
-    &:hover {
-        background: var(--bgAccent);
-        .icon,
-        .main {
-            color: var(--text);
-        }
-    }
-
-    &.active {
-        .icon,
-        .main {
-            color: var(--brand);
-        }
-    }
-    &.accent {
-        .icon,
-        .main {
-            color: var(--text);
-        }
-    }
-
-    .icon,
-    .main {
-        @include transition(color);
-    }
-
-    .main {
-        flex: 1;
-    }
-
-    .icon,
-    .after {
-        flex-shrink: 0;
-    }
-
-    .icon {
-        font-size: 16px;
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+defineProps<{
+    label: string;
+    icon?: MyIconName;
+    svg?: string;
+    level?: number;
+    link?: string;
+    active?: boolean;
+    accent?: boolean;
+}>();
+</script>
+
+<template>
+    <NuxtLink
+        :prefetch="false"
+        :to="link"
+        :class="[
+            $style.treeItem,
+            active && $style.active,
+            accent && $style.accent,
+        ]"
+        :style="{ ['--_level']: level ?? 0 }"
+    >
+        <MyIcon v-if="icon" :class="$style.icon" :name="icon" />
+        <MyRuntimeIcon v-else :class="$style.icon" name="tree-item-icon" :svg />
+        <div :class="$style.main">{{ label }}</div>
+        <div v-if="$slots.default" :class="$style.after">
+            <slot></slot>
+        </div>
+    </NuxtLink>
+</template>
+
+<style lang="scss" module>
+.treeItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--gap) / 1.6);
+    padding: calc(var(--gap) / 2) var(--gap);
+    padding-left: calc((var(--_level) + 1) * var(--gap));
+    font-size: 0.95em;
+    color: var(--textMuted);
+    text-decoration: none;
+    cursor: pointer;
+
+    @include transition(background);
+
+    &:hover {
+        background: var(--bgAccent);
+        .icon,
+        .main {
+            color: var(--text);
+        }
+    }
+
+    &.active {
+        .icon,
+        .main {
+            color: var(--brand);
+        }
+    }
+    &.accent {
+        .icon,
+        .main {
+            color: var(--text);
+        }
+    }
+
+    .icon,
+    .main {
+        @include transition(color);
+    }
+
+    .main {
+        flex: 1;
+    }
+
+    .icon,
+    .after {
+        flex-shrink: 0;
+    }
+
+    .icon {
+        font-size: 16px;
+    }
+}
+</style>