erudit 3.0.0-dev.14 → 3.0.0-dev.16

package/app/components/preview/PreviewDisplay.vue

@@ -1,139 +1,139 @@
-<script lang="ts" setup>
-import type { PreviewFooter } from '@app/scripts/preview/footer';
-import {
-    closePreview,
-    hasPreviewHistory,
-    showPreviousPreview,
-} from '@app/scripts/preview/state';
-
-const { footer } = defineProps<{ footer?: PreviewFooter }>();
-
-const phrase = await usePhrases('close', 'back', 'goto');
-</script>
-
-<template>
-    <section :class="$style.display">
-        <div v-if="$slots.default" :class="$style.content">
-            <slot></slot>
-        </div>
-
-        <div v-if="footer" :class="$style.footer">
-            <div :class="$style.icon" v-if="footer.iconName || footer.iconSvg">
-                <MyIcon v-if="footer.iconName" :name="footer.iconName" />
-                <MyRuntimeIcon
-                    v-else
-                    name="preview-footer-icon"
-                    :svg="footer.iconSvg!"
-                />
-            </div>
-
-            <div :class="$style.info">
-                <div v-if="footer.secondary" :class="$style.secondary">
-                    {{ footer.secondary }}
-                </div>
-                <div :class="$style.primary">{{ footer.primary }}</div>
-            </div>
-
-            <div :class="$style.actions">
-                <TransitionFade>
-                    <PreviewFooterAction
-                        v-if="hasPreviewHistory"
-                        icon="arrow-left"
-                        @click="showPreviousPreview"
-                        :title="phrase.back"
-                    />
-                </TransitionFade>
-                <PreviewFooterAction
-                    icon="cross"
-                    @click="closePreview"
-                    :title="phrase.close"
-                />
-                <PreviewFooterAction
-                    v-if="footer.href"
-                    :link="footer.href"
-                    icon="arrow-in-text"
-                    :brand="true"
-                    :title="phrase.goto"
-                />
-            </div>
-        </div>
-    </section>
-</template>
-
-<style lang="scss" module>
-@use '$/partials/preview';
-
-.display {
-    --_previewFooterHeight: 0px;
-
-    &:has(> .footer) {
-        --_previewFooterHeight: 70px;
-    }
-}
-
-.content {
-    max-height: calc(var(--_previewMaxHeight) - var(--_previewFooterHeight));
-    overflow: auto;
-    @include scroll;
-}
-
-.content + .footer {
-    border-top: 1px solid var(--_previewThemeBorder, var(--border));
-    @include transition(border);
-}
-
-.footer {
-    display: flex;
-    gap: var(--gap);
-    align-items: center;
-    height: var(--_previewFooterHeight);
-    padding: 0 var(--gap);
-
-    .icon {
-        flex-shrink: 0;
-        font-size: 30px;
-        color: var(--textMuted);
-
-        @include preview.hasTheme() {
-            color: color-mix(
-                in srgb,
-                var(--_previewThemeText),
-                var(--textMuted) 30%
-            );
-        }
-
-        @include transition(color);
-    }
-
-    .info {
-        flex: 1;
-        overflow: hidden;
-
-        .secondary,
-        .primary {
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            @include transition(color);
-        }
-
-        .secondary {
-            color: var(--textMuted);
-            font-size: 0.775em;
-            margin-bottom: -2px;
-        }
-
-        .primary {
-            font-size: 0.9em;
-            font-weight: bold;
-            color: var(--_previewThemeText, var(--text));
-        }
-    }
-
-    .actions {
-        flex-shrink: 0;
-        display: flex;
-        gap: var(--gapSmall);
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { PreviewFooter } from '@app/scripts/preview/footer';
+import {
+    closePreview,
+    hasPreviewHistory,
+    showPreviousPreview,
+} from '@app/scripts/preview/state';
+
+const { footer } = defineProps<{ footer?: PreviewFooter }>();
+
+const phrase = await usePhrases('close', 'back', 'goto');
+</script>
+
+<template>
+    <section :class="$style.display">
+        <div v-if="$slots.default" :class="$style.content">
+            <slot></slot>
+        </div>
+
+        <div v-if="footer" :class="$style.footer">
+            <div :class="$style.icon" v-if="footer.iconName || footer.iconSvg">
+                <MyIcon v-if="footer.iconName" :name="footer.iconName" />
+                <MyRuntimeIcon
+                    v-else
+                    name="preview-footer-icon"
+                    :svg="footer.iconSvg!"
+                />
+            </div>
+
+            <div :class="$style.info">
+                <div v-if="footer.secondary" :class="$style.secondary">
+                    {{ footer.secondary }}
+                </div>
+                <div :class="$style.primary">{{ footer.primary }}</div>
+            </div>
+
+            <div :class="$style.actions">
+                <TransitionFade>
+                    <PreviewFooterAction
+                        v-if="hasPreviewHistory"
+                        icon="arrow-left"
+                        @click="showPreviousPreview"
+                        :title="phrase.back"
+                    />
+                </TransitionFade>
+                <PreviewFooterAction
+                    icon="cross"
+                    @click="closePreview"
+                    :title="phrase.close"
+                />
+                <PreviewFooterAction
+                    v-if="footer.href"
+                    :link="footer.href"
+                    icon="arrow-in-text"
+                    :brand="true"
+                    :title="phrase.goto"
+                />
+            </div>
+        </div>
+    </section>
+</template>
+
+<style lang="scss" module>
+@use '$/partials/preview';
+
+.display {
+    --_previewFooterHeight: 0px;
+
+    &:has(> .footer) {
+        --_previewFooterHeight: 70px;
+    }
+}
+
+.content {
+    max-height: calc(var(--_previewMaxHeight) - var(--_previewFooterHeight));
+    overflow: auto;
+    @include scroll;
+}
+
+.content + .footer {
+    border-top: 1px solid var(--_previewThemeBorder, var(--border));
+    @include transition(border);
+}
+
+.footer {
+    display: flex;
+    gap: var(--gap);
+    align-items: center;
+    height: var(--_previewFooterHeight);
+    padding: 0 var(--gap);
+
+    .icon {
+        flex-shrink: 0;
+        font-size: 30px;
+        color: var(--textMuted);
+
+        @include preview.hasTheme() {
+            color: color-mix(
+                in srgb,
+                var(--_previewThemeText),
+                var(--textMuted) 30%
+            );
+        }
+
+        @include transition(color);
+    }
+
+    .info {
+        flex: 1;
+        overflow: hidden;
+
+        .secondary,
+        .primary {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            @include transition(color);
+        }
+
+        .secondary {
+            color: var(--textMuted);
+            font-size: 0.775em;
+            margin-bottom: -2px;
+        }
+
+        .primary {
+            font-size: 0.9em;
+            font-weight: bold;
+            color: var(--_previewThemeText, var(--text));
+        }
+    }
+
+    .actions {
+        flex-shrink: 0;
+        display: flex;
+        gap: var(--gapSmall);
+    }
+}
+</style>

package/app/components/preview/PreviewFooterAction.vue

@@ -1,73 +1,73 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-
-defineProps<{
-    icon: MyIconName;
-    link?: string;
-    brand?: boolean;
-}>();
-
-const nuxtLink = defineNuxtLink({ prefetch: false });
-</script>
-
-<template>
-    <component
-        :is="link ? nuxtLink : 'button'"
-        :to="link || null"
-        :class="[$style.uiAction, brand && $style.brand]"
-        target="_blank"
-    >
-        <MyIcon :name="icon" />
-    </component>
-</template>
-
-<style lang="scss" module>
-@use '$/partials/preview';
-
-.uiAction {
-    --size: 40px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: var(--size);
-    height: var(--size);
-
-    border: none;
-    border-radius: 3px;
-    background: transparent;
-
-    color: var(--textMuted);
-    font-size: 22px;
-    text-decoration: none;
-
-    @include transition(color, background, opacity);
-
-    &:hover,
-    &:active {
-        cursor: pointer;
-        color: var(--textColor);
-        background: var(--bgAccent);
-
-        @include preview.hasTheme() {
-            background: color-mix(
-                in srgb,
-                var(--_previewThemeText),
-                var(--bgAccent) 85%
-            );
-        }
-
-        &.brand {
-            //color: color-mix(in srgb, var(--brand), black 20%);
-            background: color-mix(in srgb, var(--brand), transparent 80%);
-        }
-    }
-
-    //
-
-    &.brand {
-        color: var(--brand);
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+defineProps<{
+    icon: MyIconName;
+    link?: string;
+    brand?: boolean;
+}>();
+
+const nuxtLink = defineNuxtLink({ prefetch: false });
+</script>
+
+<template>
+    <component
+        :is="link ? nuxtLink : 'button'"
+        :to="link || null"
+        :class="[$style.uiAction, brand && $style.brand]"
+        target="_blank"
+    >
+        <MyIcon :name="icon" />
+    </component>
+</template>
+
+<style lang="scss" module>
+@use '$/partials/preview';
+
+.uiAction {
+    --size: 40px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: var(--size);
+    height: var(--size);
+
+    border: none;
+    border-radius: 3px;
+    background: transparent;
+
+    color: var(--textMuted);
+    font-size: 22px;
+    text-decoration: none;
+
+    @include transition(color, background, opacity);
+
+    &:hover,
+    &:active {
+        cursor: pointer;
+        color: var(--textColor);
+        background: var(--bgAccent);
+
+        @include preview.hasTheme() {
+            background: color-mix(
+                in srgb,
+                var(--_previewThemeText),
+                var(--bgAccent) 85%
+            );
+        }
+
+        &.brand {
+            //color: color-mix(in srgb, var(--brand), black 20%);
+            background: color-mix(in srgb, var(--brand), transparent 80%);
+        }
+    }
+
+    //
+
+    &.brand {
+        color: var(--brand);
+    }
+}
+</style>

package/app/components/preview/PreviewLoading.vue

@@ -1,14 +1,14 @@
-<template>
-    <div :class="$style.loadingContainer">
-        <Loading />
-    </div>
-</template>
-
-<style lang="scss" module>
-.loadingContainer {
-    height: 225px;
-    display: grid;
-    place-items: center;
-    font-size: 50px;
-}
-</style>
+<template>
+    <div :class="$style.loadingContainer">
+        <Loading />
+    </div>
+</template>
+
+<style lang="scss" module>
+.loadingContainer {
+    height: 225px;
+    display: grid;
+    place-items: center;
+    font-size: 50px;
+}
+</style>