erudit 3.0.0-dev.15 → 3.0.0-dev.16

package/app/components/aside/major/panes/nav/NavGlobal.vue

@@ -1,16 +1,16 @@
-<script lang="ts" setup>
-import { getAsideMajorNavPayload } from '@app/scripts/aside/major/nav';
-
-import FNav from './fnav/FNav.vue';
-import PaneContentScroll from '../../PaneContentScroll.vue';
-
-const contentRoute = useContentRoute();
-const asideMajorNav = getAsideMajorNavPayload();
-const globalNav = asideMajorNav.globalNav;
-</script>
-
-<template>
-    <PaneContentScroll>
-        <FNav :nav="globalNav" :contentId="contentRoute?.contentId" />
-    </PaneContentScroll>
-</template>
+<script lang="ts" setup>
+import { getAsideMajorNavPayload } from '@app/scripts/aside/major/nav';
+
+import FNav from './fnav/FNav.vue';
+import PaneContentScroll from '../../PaneContentScroll.vue';
+
+const contentRoute = useContentRoute();
+const asideMajorNav = getAsideMajorNavPayload();
+const globalNav = asideMajorNav.globalNav;
+</script>
+
+<template>
+    <PaneContentScroll>
+        <FNav :nav="globalNav" :contentId="contentRoute?.contentId" />
+    </PaneContentScroll>
+</template>

package/app/components/aside/major/panes/nav/fnav/FNav.vue

@@ -1,105 +1,105 @@
-<script lang="ts" setup>
-import type {
-    FrontNav,
-    FrontNavContainer,
-    FrontNavItem,
-} from '@shared/frontNav';
-import { navStateKey, type NavState } from '@app/scripts/aside/major/nav';
-
-import FNavItem from './FNavItem.vue';
-
-const props = defineProps<{ nav: FrontNav; contentId?: string }>();
-const hashNav = shallowRef<Record<string, FrontNavItem>>();
-const navState = shallowRef<NavState>();
-
-function setupHashNav() {
-    hashNav.value = {};
-
-    if (!props.nav) return;
-
-    function addNavItem(navItem: FrontNavItem) {
-        hashNav.value![navItem.fullId] = navItem;
-        for (const child of (navItem as FrontNavContainer).children || [])
-            addNavItem(child);
-    }
-
-    for (const topNavItem of props.nav) addNavItem(topNavItem);
-}
-
-function setupNavState() {
-    // We create a ref for every nav item to check wheter it is active or not.
-    // Yes, it uses a lot of memory, but it is still better than messing with recursive tree recreations.
-
-    navState.value = {};
-
-    for (const navItem of Object.values(hashNav.value!))
-        navState.value[navItem.id] = shallowRef(null);
-}
-
-function updateNavState() {
-    // We watch current content route and update navigation state for each item.
-    // United watcher here instead of watcher on each navigation item instance.
-
-    if (!hashNav.value || !navState.value) return;
-
-    let currentFullId: string | undefined;
-
-    for (const navItem of Object.values(hashNav.value)) {
-        navState.value[navItem.id]!.value = null;
-        if (props.contentId?.startsWith(navItem.id))
-            currentFullId = navItem.fullId;
-    }
-
-    if (!currentFullId) return;
-
-    const idParts = currentFullId.split('/');
-    while (idParts.length) {
-        const _fullId = idParts.join('/');
-        const navItem = hashNav.value[_fullId];
-
-        if (navItem)
-            navState.value[navItem.id]!.value =
-                _fullId === currentFullId ? 'active' : 'activePart';
-
-        idParts.pop();
-    }
-}
-
-setupHashNav();
-setupNavState();
-updateNavState();
-
-watch(
-    () => props.nav,
-    () => {
-        setupHashNav();
-        setupNavState();
-        updateNavState();
-    },
-);
-
-watch(() => props.contentId, updateNavState);
-
-// @ts-ignore
-provide(navStateKey, navState);
-
-const phrase = await usePhrases('empty_nav');
-</script>
-
-<template>
-    <TreeContainer v-if="nav && nav.length > 0">
-        <slot name="before"></slot>
-        <FNavItem v-for="navItem of nav" :navItem />
-    </TreeContainer>
-    <div v-else :class="$style.emptyNav">
-        {{ phrase.empty_nav }}
-    </div>
-</template>
-
-<style lang="scss" module>
-.emptyNav {
-    padding: var(--gap);
-    color: var(--textMuted);
-    text-align: center;
-}
-</style>
+<script lang="ts" setup>
+import type {
+    FrontNav,
+    FrontNavContainer,
+    FrontNavItem,
+} from '@shared/frontNav';
+import { navStateKey, type NavState } from '@app/scripts/aside/major/nav';
+
+import FNavItem from './FNavItem.vue';
+
+const props = defineProps<{ nav: FrontNav; contentId?: string }>();
+const hashNav = shallowRef<Record<string, FrontNavItem>>();
+const navState = shallowRef<NavState>();
+
+function setupHashNav() {
+    hashNav.value = {};
+
+    if (!props.nav) return;
+
+    function addNavItem(navItem: FrontNavItem) {
+        hashNav.value![navItem.fullId] = navItem;
+        for (const child of (navItem as FrontNavContainer).children || [])
+            addNavItem(child);
+    }
+
+    for (const topNavItem of props.nav) addNavItem(topNavItem);
+}
+
+function setupNavState() {
+    // We create a ref for every nav item to check wheter it is active or not.
+    // Yes, it uses a lot of memory, but it is still better than messing with recursive tree recreations.
+
+    navState.value = {};
+
+    for (const navItem of Object.values(hashNav.value!))
+        navState.value[navItem.id] = shallowRef(null);
+}
+
+function updateNavState() {
+    // We watch current content route and update navigation state for each item.
+    // United watcher here instead of watcher on each navigation item instance.
+
+    if (!hashNav.value || !navState.value) return;
+
+    let currentFullId: string | undefined;
+
+    for (const navItem of Object.values(hashNav.value)) {
+        navState.value[navItem.id]!.value = null;
+        if (props.contentId?.startsWith(navItem.id))
+            currentFullId = navItem.fullId;
+    }
+
+    if (!currentFullId) return;
+
+    const idParts = currentFullId.split('/');
+    while (idParts.length) {
+        const _fullId = idParts.join('/');
+        const navItem = hashNav.value[_fullId];
+
+        if (navItem)
+            navState.value[navItem.id]!.value =
+                _fullId === currentFullId ? 'active' : 'activePart';
+
+        idParts.pop();
+    }
+}
+
+setupHashNav();
+setupNavState();
+updateNavState();
+
+watch(
+    () => props.nav,
+    () => {
+        setupHashNav();
+        setupNavState();
+        updateNavState();
+    },
+);
+
+watch(() => props.contentId, updateNavState);
+
+// @ts-ignore
+provide(navStateKey, navState);
+
+const phrase = await usePhrases('empty_nav');
+</script>
+
+<template>
+    <TreeContainer v-if="nav && nav.length > 0">
+        <slot name="before"></slot>
+        <FNavItem v-for="navItem of nav" :navItem />
+    </TreeContainer>
+    <div v-else :class="$style.emptyNav">
+        {{ phrase.empty_nav }}
+    </div>
+</template>
+
+<style lang="scss" module>
+.emptyNav {
+    padding: var(--gap);
+    color: var(--textMuted);
+    text-align: center;
+}
+</style>

package/app/components/aside/major/panes/nav/fnav/FNavBook.vue

@@ -1,32 +1,32 @@
-<script lang="ts" setup>
-import type { FrontNavBook } from '@shared/frontNav';
-import {
-    insideNavBook,
-    navBookId,
-    navStateKey,
-} from '@app/scripts/aside/major/nav';
-
-import FNavFlags from './FNavFlags.vue';
-
-const props = defineProps<{ navItem: FrontNavBook }>();
-const navState = inject(navStateKey);
-const active = computed(() => !!navState!.value[props.navItem.id]!.value);
-
-function bookClick() {
-    navBookId.value = props.navItem.id;
-    insideNavBook.value = true;
-}
-</script>
-
-<template>
-    <TreeItem
-        icon="outline/book"
-        :label="navItem.label"
-        :level="navItem.level"
-        :link="active ? undefined : `/book/${navItem.id}`"
-        @click="bookClick"
-        :active
-    >
-        <FNavFlags v-if="navItem.flags" :flags="navItem.flags" />
-    </TreeItem>
-</template>
+<script lang="ts" setup>
+import type { FrontNavBook } from '@shared/frontNav';
+import {
+    insideNavBook,
+    navBookId,
+    navStateKey,
+} from '@app/scripts/aside/major/nav';
+
+import FNavFlags from './FNavFlags.vue';
+
+const props = defineProps<{ navItem: FrontNavBook }>();
+const navState = inject(navStateKey);
+const active = computed(() => !!navState!.value[props.navItem.id]!.value);
+
+function bookClick() {
+    navBookId.value = props.navItem.id;
+    insideNavBook.value = true;
+}
+</script>
+
+<template>
+    <TreeItem
+        icon="outline/book"
+        :label="navItem.label"
+        :level="navItem.level"
+        :link="active ? undefined : `/book/${navItem.id}`"
+        @click="bookClick"
+        :active
+    >
+        <FNavFlags v-if="navItem.flags" :flags="navItem.flags" />
+    </TreeItem>
+</template>

package/app/components/aside/major/panes/nav/fnav/FNavFlags.vue

@@ -1,40 +1,40 @@
-<script lang="ts" setup>
-import type { ContentFlag } from '@erudit-js/cog/schema';
-import { flagsData } from '@app/scripts/flag';
-
-defineProps<{ flags: Partial<Record<ContentFlag, boolean>> }>();
-
-const phrases = Object.values(flagsData).map((data) => data.title);
-const phrase = await usePhrases(...phrases);
-</script>
-
-<template>
-    <div :class="$style.flags">
-        <MyIcon
-            v-for="(value, flag) in flags"
-            :name="flagsData[flag].icon"
-            :title="phrase[flagsData[flag].title]"
-            :class="$style.flag"
-        />
-    </div>
-</template>
-
-<style lang="scss" module>
-.flags {
-    display: flex;
-    align-items: center;
-    gap: var(--gapSmall);
-}
-
-.flag {
-    cursor: help;
-    font-size: 16px;
-    color: var(--textDimmed);
-    opacity: 0.65;
-    @include transition(opacity);
-
-    &:hover {
-        opacity: 1;
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { ContentFlag } from '@erudit-js/cog/schema';
+import { flagsData } from '@app/scripts/flag';
+
+defineProps<{ flags: Partial<Record<ContentFlag, boolean>> }>();
+
+const phrases = Object.values(flagsData).map((data) => data.title);
+const phrase = await usePhrases(...phrases);
+</script>
+
+<template>
+    <div :class="$style.flags">
+        <MyIcon
+            v-for="(value, flag) in flags"
+            :name="flagsData[flag].icon"
+            :title="phrase[flagsData[flag].title]"
+            :class="$style.flag"
+        />
+    </div>
+</template>
+
+<style lang="scss" module>
+.flags {
+    display: flex;
+    align-items: center;
+    gap: var(--gapSmall);
+}
+
+.flag {
+    cursor: help;
+    font-size: 16px;
+    color: var(--textDimmed);
+    opacity: 0.65;
+    @include transition(opacity);
+
+    &:hover {
+        opacity: 1;
+    }
+}
+</style>

package/app/components/aside/major/panes/nav/fnav/FNavFolder.vue

@@ -1,60 +1,60 @@
-<script lang="ts" setup>
-import type { FrontNavFolder } from '@shared/frontNav';
-import { navStateKey } from '@app/scripts/aside/major/nav';
-
-import FNavItem from './FNavItem.vue';
-import FNavFlags from './FNavFlags.vue';
-
-const props = defineProps<{ navItem: FrontNavFolder }>();
-const navState = inject(navStateKey);
-
-const active = ref(false);
-const accent = ref(false);
-
-function onStateUpdate() {
-    const newState = navState!.value[props.navItem.id]!.value;
-    active.value = newState === 'active';
-    accent.value = newState === 'activePart';
-}
-
-onStateUpdate();
-watch(navState!.value[props.navItem.id]!, onStateUpdate);
-
-const visible = computed(() => active.value || accent.value);
-</script>
-
-<template>
-    <div>
-        <TreeItem
-            :icon="`folder${visible ? '-open' : ''}`"
-            :link="`/group/${navItem.id}`"
-            :label="navItem.label"
-            :active
-            :accent
-            :level="navItem.level"
-        >
-            <FNavFlags v-if="navItem.flags" :flags="navItem.flags" />
-        </TreeItem>
-
-        <div :class="[$style.groupBody, visible && $style.visible]">
-            <FNavItem
-                v-for="childItem of navItem.children"
-                :navItem="childItem"
-            />
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-@use '$/partials/fnav';
-
-.groupBody {
-    overflow: hidden;
-    height: 0;
-    @include transition(height);
-
-    &.visible {
-        height: auto;
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { FrontNavFolder } from '@shared/frontNav';
+import { navStateKey } from '@app/scripts/aside/major/nav';
+
+import FNavItem from './FNavItem.vue';
+import FNavFlags from './FNavFlags.vue';
+
+const props = defineProps<{ navItem: FrontNavFolder }>();
+const navState = inject(navStateKey);
+
+const active = ref(false);
+const accent = ref(false);
+
+function onStateUpdate() {
+    const newState = navState!.value[props.navItem.id]!.value;
+    active.value = newState === 'active';
+    accent.value = newState === 'activePart';
+}
+
+onStateUpdate();
+watch(navState!.value[props.navItem.id]!, onStateUpdate);
+
+const visible = computed(() => active.value || accent.value);
+</script>
+
+<template>
+    <div>
+        <TreeItem
+            :icon="`folder${visible ? '-open' : ''}`"
+            :link="`/group/${navItem.id}`"
+            :label="navItem.label"
+            :active
+            :accent
+            :level="navItem.level"
+        >
+            <FNavFlags v-if="navItem.flags" :flags="navItem.flags" />
+        </TreeItem>
+
+        <div :class="[$style.groupBody, visible && $style.visible]">
+            <FNavItem
+                v-for="childItem of navItem.children"
+                :navItem="childItem"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+@use '$/partials/fnav';
+
+.groupBody {
+    overflow: hidden;
+    height: 0;
+    @include transition(height);
+
+    &.visible {
+        height: auto;
+    }
+}
+</style>

package/app/components/aside/major/panes/nav/fnav/FNavItem.vue

@@ -1,34 +1,34 @@
-<script lang="ts" setup>
-import type { FrontNavItem, FrontNavType } from '@shared/frontNav';
-
-import FNavBook from './FNavBook.vue';
-import FNavSeparator from './FNavSeparator.vue';
-import FNavFolder from './FNavFolder.vue';
-import FNavTopic from './FNavTopic.vue';
-
-defineProps<{ navItem: FrontNavItem }>();
-
-const navComponent: Record<FrontNavType, Component> = {
-    book: FNavBook,
-    separator: FNavSeparator,
-    folder: FNavFolder,
-    topic: FNavTopic,
-};
-</script>
-
-<template>
-    <component
-        :is="navComponent[navItem.type]"
-        :navItem
-        :class="[
-            $style.frontNavItem,
-            $style[
-                `frontNav${navItem.type[0]!.toUpperCase() + navItem.type.substring(1)}`
-            ],
-        ]"
-    />
-</template>
-
-<style lang="scss" module>
-@use '$/partials/fnav';
-</style>
+<script lang="ts" setup>
+import type { FrontNavItem, FrontNavType } from '@shared/frontNav';
+
+import FNavBook from './FNavBook.vue';
+import FNavSeparator from './FNavSeparator.vue';
+import FNavFolder from './FNavFolder.vue';
+import FNavTopic from './FNavTopic.vue';
+
+defineProps<{ navItem: FrontNavItem }>();
+
+const navComponent: Record<FrontNavType, Component> = {
+    book: FNavBook,
+    separator: FNavSeparator,
+    folder: FNavFolder,
+    topic: FNavTopic,
+};
+</script>
+
+<template>
+    <component
+        :is="navComponent[navItem.type]"
+        :navItem
+        :class="[
+            $style.frontNavItem,
+            $style[
+                `frontNav${navItem.type[0]!.toUpperCase() + navItem.type.substring(1)}`
+            ],
+        ]"
+    />
+</template>
+
+<style lang="scss" module>
+@use '$/partials/fnav';
+</style>