erudit 3.0.0-dev.17 → 3.0.0-dev.19

package/app/components/main/{utils/ContentTitle.vue → MainTitle.vue}

@@ -1,63 +1,72 @@
-<script lang="ts" setup>
-import { isMyIcon } from '#my-icons';
-
-defineProps<{ icon: string; title: string; hint?: string }>();
-</script>
-
-<template>
-    <section :class="$style.contentTitle">
-        <MyIcon v-if="isMyIcon(icon)" :name="icon as any" :title="hint" />
-        <MyRuntimeIcon
-            v-else
-            name="content-title-icon"
-            :svg="icon"
-            :title="hint"
-        />
-        <h1>{{ title }}</h1>
-    </section>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.contentTitle {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: 0 var(--_pMainX);
-
-    [my-icon] {
-        flex-shrink: 0;
-        font-size: 1.65em;
-        color: var(--textMuted);
-        position: relative;
-        top: 1px;
-        cursor: help;
-    }
-
-    h1 {
-        font-size: 1.925em;
-    }
-
-    @include bp.below('mobile') {
-        padding-top: var(--gap);
-        flex-direction: column;
-
-        [my-icon] {
-            padding: 16px;
-            background: color-mix(
-                in srgb,
-                var(--textDisabled),
-                transparent 50%
-            );
-            color: var(--text);
-            border-radius: 50%;
-        }
-
-        h1 {
-            text-align: center;
-            font-size: 1.8em;
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+import { isMyIcon } from '#my-icons';
+
+defineProps<{ icon: string; title: string; hint?: string }>();
+</script>
+
+<template>
+    <section :class="$style.contentTitle">
+        <MyIcon
+            v-if="isMyIcon(icon)"
+            :name="icon as any"
+            :title="hint"
+            :class="{ [$style.hasHint]: !!hint }"
+        />
+        <MyRuntimeIcon
+            v-else
+            name="content-title-icon"
+            :svg="icon"
+            :title="hint"
+            :class="{ [$style.hasHint]: !!hint }"
+        />
+        <h1>{{ title }}</h1>
+    </section>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.contentTitle {
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    padding: var(--_pMainY) var(--_pMainX);
+
+    [my-icon] {
+        flex-shrink: 0;
+        font-size: 1.65em;
+        color: var(--textMuted);
+        position: relative;
+        top: 1px;
+    }
+
+    .hasHint {
+        cursor: help;
+    }
+
+    h1 {
+        font-size: 1.925em;
+    }
+
+    @include bp.below('mobile') {
+        padding-top: var(--gap);
+        flex-direction: column;
+
+        [my-icon] {
+            padding: 16px;
+            background: color-mix(
+                in srgb,
+                var(--textDisabled),
+                transparent 50%
+            );
+            color: var(--text);
+            border-radius: 50%;
+        }
+
+        h1 {
+            text-align: center;
+            font-size: 1.8em;
+        }
+    }
+}
+</style>

package/app/components/main/content/ContentBreadcrumb.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+import type { BreadcrumbItem } from '@shared/breadcrumb';
+import type { Context } from '@shared/content/context';
+
+defineProps<{ context: Context }>();
+</script>
+
+<template>
+    <MainBreadcrumb
+        v-if="context?.length > 1"
+        :items="
+            context.reduce((acc, item, i, arr) => {
+                if (item.hidden || i === arr.length - 1) {
+                    return acc;
+                }
+
+                acc.push({
+                    title: item.title,
+                    icon: item.icon as MyIconName,
+                    link: item.href,
+                });
+
+                return acc;
+            }, [] as BreadcrumbItem[])
+        "
+    />
+</template>

package/app/components/main/{utils → content}/ContentDecoration.vue

@@ -1,29 +1,29 @@
-<script lang="ts" setup>
-defineProps<{ decoration: string }>();
-const baseUrlPath = useBaseUrlPath();
-</script>
-
-<template>
-    <div :class="$style.contentDecoration">
-        <img :src="baseUrlPath(contentAsset(decoration))" />
-    </div>
-</template>
-
-<style lang="scss" module>
-.contentDecoration {
-    float: right;
-    padding: var(--gap) var(--_pMainX) var(--gapBig) var(--gap);
-
-    @media (max-width: 800px) {
-        display: none;
-    }
-
-    img {
-        display: block;
-        aspect-ratio: 1;
-        width: 100%;
-        max-width: 125px;
-        max-height: 125px;
-    }
-}
-</style>
+<script lang="ts" setup>
+defineProps<{ decoration: string }>();
+const baseUrlPath = useBaseUrlPath();
+</script>
+
+<template>
+    <div :class="$style.contentDecoration">
+        <img :src="baseUrlPath(contentAsset(decoration))" />
+    </div>
+</template>
+
+<style lang="scss" module>
+.contentDecoration {
+    float: right;
+    padding: var(--gap) var(--_pMainX) var(--gapBig) var(--gap);
+
+    @media (max-width: 800px) {
+        display: none;
+    }
+
+    img {
+        display: block;
+        aspect-ratio: 1;
+        width: 100%;
+        max-width: 125px;
+        max-height: 125px;
+    }
+}
+</style>

package/app/components/main/{utils → content}/ContentPopover.vue

@@ -1,188 +1,188 @@
-<script lang="ts" setup>
-import { useFloating, autoUpdate, arrow, shift } from '@floating-ui/vue';
-
-import type { PopoverData } from '@shared/popover';
-import { isMyIcon } from '#my-icons';
-
-defineProps<{ data: PopoverData }>();
-
-const referenceElement = useTemplateRef('reference');
-const popoverElement = useTemplateRef('popover');
-const arrowElement = useTemplateRef('popover-arrow');
-
-const { floatingStyles, middlewareData } = useFloating(
-    referenceElement,
-    popoverElement,
-    {
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            shift({
-                boundary: document?.querySelector('[erudit-main]') || undefined,
-            }),
-            arrow({ element: arrowElement }),
-        ],
-    },
-);
-
-const popoverVisible = ref(false);
-
-const showDelay = 400;
-const hideDelay = 100;
-let showTimeout: any;
-let hideTimeout: any;
-
-function showPopover(immediate?: boolean) {
-    clearTimeout(hideTimeout);
-    clearTimeout(showTimeout);
-
-    if (immediate) {
-        popoverVisible.value = true;
-    } else {
-        showTimeout = setTimeout(() => {
-            popoverVisible.value = true;
-        }, showDelay);
-    }
-}
-
-function hidePopover() {
-    clearTimeout(showTimeout);
-    hideTimeout = setTimeout(() => {
-        popoverVisible.value = false;
-    }, hideDelay);
-}
-</script>
-
-<template>
-    <div
-        ref="reference"
-        :class="$style.reference"
-        :style="`--popoverColor: ${data.color}`"
-        @mouseenter="() => showPopover()"
-        @mouseleave="hidePopover"
-        @click="() => showPopover(true)"
-    >
-        <MyIcon v-if="isMyIcon(data.icon)" :name="data.icon as any" />
-        <MyRuntimeIcon v-else name="popover-icon" :svg="data.icon" />
-
-        {{ data.title }}
-
-        <TransitionFade>
-            <div
-                v-if="popoverVisible"
-                ref="popover"
-                :class="$style.popover"
-                :style="floatingStyles"
-            >
-                <div
-                    ref="popover-arrow"
-                    :class="$style.arrow"
-                    :style="{
-                        position: 'absolute',
-                        top:
-                            middlewareData.arrow?.y != null
-                                ? `${middlewareData.arrow.y}px`
-                                : '',
-                        left:
-                            middlewareData.arrow?.x != null
-                                ? `${middlewareData.arrow.x}px`
-                                : '',
-                    }"
-                ></div>
-
-                <div :class="$style.inner">
-                    <MyIcon
-                        :class="$style.floatIcon"
-                        v-if="isMyIcon(data.icon)"
-                        :name="data.icon as any"
-                    />
-                    <MyRuntimeIcon
-                        :class="$style.floatIcon"
-                        v-else
-                        name="popover-icon"
-                        :svg="data.icon"
-                    />
-
-                    <div :class="$style.title">{{ data.title }}</div>
-                    <div v-if="data.description">{{ data.description }}</div>
-
-                    <slot></slot>
-                </div>
-            </div>
-        </TransitionFade>
-    </div>
-</template>
-
-<style lang="scss" module>
-.reference {
-    --_baseColor: color-mix(in srgb, var(--popoverColor), var(--invert) 35%);
-    --_bgColor: color-mix(in srgb, var(--popoverColor), var(--bgAside) 85%);
-}
-
-.reference {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    gap: var(--gapSmall);
-    padding: var(--gapSmall);
-
-    background: var(--_bgColor);
-    color: var(--_baseColor);
-    font-size: 0.9em;
-    line-height: 0;
-
-    border: 1px solid var(--_baseColor);
-    border-radius: 3px;
-    cursor: help;
-}
-
-.popover {
-    cursor: auto;
-
-    position: absolute;
-    z-index: 999;
-    max-width: 320px;
-    padding-top: var(--gap);
-    padding-left: var(--gap);
-    padding-right: var(--gap);
-    line-height: normal;
-
-    .arrow {
-        position: absolute;
-        top: 14px;
-        left: 0;
-        background: var(--_baseColor);
-        width: 32px;
-        height: 32px;
-        transform: rotate(45deg);
-    }
-
-    .inner {
-        position: relative;
-        z-index: 1;
-        box-shadow: 0 0 18px
-            color-mix(
-                in srgb,
-                color-mix(in srgb, var(--popoverColor), var(--invert) 50%),
-                transparent 70%
-            );
-        padding: var(--gapSmall);
-        border: 2px solid var(--_baseColor);
-        border-radius: 3px;
-        background: linear-gradient(45deg, var(--bgAside), var(--_bgColor) 70%);
-
-        font-size: 0.9em;
-
-        .floatIcon {
-            float: right;
-            margin: 5px 5px 10px 10px;
-            font-size: 30px;
-            opacity: 0.3;
-        }
-
-        .title {
-            font-weight: 600;
-            margin-bottom: var(--gapSmall);
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+import { useFloating, autoUpdate, arrow, shift } from '@floating-ui/vue';
+
+import type { PopoverData } from '@shared/popover';
+import { isMyIcon } from '#my-icons';
+
+defineProps<{ data: PopoverData }>();
+
+const referenceElement = useTemplateRef('reference');
+const popoverElement = useTemplateRef('popover');
+const arrowElement = useTemplateRef('popover-arrow');
+
+const { floatingStyles, middlewareData } = useFloating(
+    referenceElement,
+    popoverElement,
+    {
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            shift({
+                boundary: document?.querySelector('[erudit-main]') || undefined,
+            }),
+            arrow({ element: arrowElement }),
+        ],
+    },
+);
+
+const popoverVisible = ref(false);
+
+const showDelay = 400;
+const hideDelay = 100;
+let showTimeout: any;
+let hideTimeout: any;
+
+function showPopover(immediate?: boolean) {
+    clearTimeout(hideTimeout);
+    clearTimeout(showTimeout);
+
+    if (immediate) {
+        popoverVisible.value = true;
+    } else {
+        showTimeout = setTimeout(() => {
+            popoverVisible.value = true;
+        }, showDelay);
+    }
+}
+
+function hidePopover() {
+    clearTimeout(showTimeout);
+    hideTimeout = setTimeout(() => {
+        popoverVisible.value = false;
+    }, hideDelay);
+}
+</script>
+
+<template>
+    <div
+        ref="reference"
+        :class="$style.reference"
+        :style="`--popoverColor: ${data.color}`"
+        @mouseenter="() => showPopover()"
+        @mouseleave="hidePopover"
+        @click="() => showPopover(true)"
+    >
+        <MyIcon v-if="isMyIcon(data.icon)" :name="data.icon as any" />
+        <MyRuntimeIcon v-else name="popover-icon" :svg="data.icon" />
+
+        {{ data.title }}
+
+        <TransitionFade>
+            <div
+                v-if="popoverVisible"
+                ref="popover"
+                :class="$style.popover"
+                :style="floatingStyles"
+            >
+                <div
+                    ref="popover-arrow"
+                    :class="$style.arrow"
+                    :style="{
+                        position: 'absolute',
+                        top:
+                            middlewareData.arrow?.y != null
+                                ? `${middlewareData.arrow.y}px`
+                                : '',
+                        left:
+                            middlewareData.arrow?.x != null
+                                ? `${middlewareData.arrow.x}px`
+                                : '',
+                    }"
+                ></div>
+
+                <div :class="$style.inner">
+                    <MyIcon
+                        :class="$style.floatIcon"
+                        v-if="isMyIcon(data.icon)"
+                        :name="data.icon as any"
+                    />
+                    <MyRuntimeIcon
+                        :class="$style.floatIcon"
+                        v-else
+                        name="popover-icon"
+                        :svg="data.icon"
+                    />
+
+                    <div :class="$style.title">{{ data.title }}</div>
+                    <div v-if="data.description">{{ data.description }}</div>
+
+                    <slot></slot>
+                </div>
+            </div>
+        </TransitionFade>
+    </div>
+</template>
+
+<style lang="scss" module>
+.reference {
+    --_baseColor: color-mix(in srgb, var(--popoverColor), var(--invert) 35%);
+    --_bgColor: color-mix(in srgb, var(--popoverColor), var(--bgAside) 85%);
+}
+
+.reference {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: var(--gapSmall);
+    padding: var(--gapSmall);
+
+    background: var(--_bgColor);
+    color: var(--_baseColor);
+    font-size: 0.9em;
+    line-height: 0;
+
+    border: 1px solid var(--_baseColor);
+    border-radius: 3px;
+    cursor: help;
+}
+
+.popover {
+    cursor: auto;
+
+    position: absolute;
+    z-index: 999;
+    max-width: 320px;
+    padding-top: var(--gap);
+    padding-left: var(--gap);
+    padding-right: var(--gap);
+    line-height: normal;
+
+    .arrow {
+        position: absolute;
+        top: 14px;
+        left: 0;
+        background: var(--_baseColor);
+        width: 32px;
+        height: 32px;
+        transform: rotate(45deg);
+    }
+
+    .inner {
+        position: relative;
+        z-index: 1;
+        box-shadow: 0 0 18px
+            color-mix(
+                in srgb,
+                color-mix(in srgb, var(--popoverColor), var(--invert) 50%),
+                transparent 70%
+            );
+        padding: var(--gapSmall);
+        border: 2px solid var(--_baseColor);
+        border-radius: 3px;
+        background: linear-gradient(45deg, var(--bgAside), var(--_bgColor) 70%);
+
+        font-size: 0.9em;
+
+        .floatIcon {
+            float: right;
+            margin: 5px 5px 10px 10px;
+            font-size: 30px;
+            opacity: 0.3;
+        }
+
+        .title {
+            font-weight: 600;
+            margin-bottom: var(--gapSmall);
+        }
+    }
+}
+</style>