erudit 4.0.0-dev.3 → 4.0.0-dev.5

package/app/components/aside/major/contentNav/PaneBookNav.vue

@@ -1,116 +1,107 @@
-<script lang="ts" setup>
-import ContentNavItem from './items/ContentNavItem.vue';
-
-type BookPayloadValue = {
-    shortBookId: string;
-    frontNav: FrontContentNavBook;
-};
-
-const nuxtApp = useNuxtApp();
-const asideMajorPane = useAsideMajorPane();
-const { shortContentId, shortBookId } = useContentId();
-const frontNavBook = shallowRef<FrontContentNavBook>();
-const loading = ref(true);
-
-await bookChange();
-watch(shortBookId, bookChange);
-
-async function bookChange() {
-    if (shortBookId.value === undefined) {
-        // Changed to nothing, keep already loaded book nav or loading screen
-        return;
-    }
-
-    loading.value = true;
-
-    const payloadKey = 'book-content-nav';
-
-    const fetchPayload = async (): Promise<BookPayloadValue> => {
-        return {
-            shortBookId: shortBookId.value!,
-            frontNav: await $fetch(
-                `/api/aside/major/frontNav/book/${shortBookId.value}`,
-                {
-                    responseType: 'json',
-                },
-            ),
-        };
-    };
-
-    let payloadValue: BookPayloadValue =
-        nuxtApp.static.data[payloadKey] ??
-        nuxtApp.payload.data[payloadKey] ??
-        (await fetchPayload());
-
-    // Cache it if it came from fetch
-    nuxtApp.static.data[payloadKey] ??= payloadValue;
-    nuxtApp.payload.data[payloadKey] ??= payloadValue;
-
-    // Refetch if cached payload is for a different book
-    if (payloadValue.shortBookId !== shortBookId.value) {
-        payloadValue = await fetchPayload();
-        nuxtApp.static.data[payloadKey] = payloadValue;
-        nuxtApp.payload.data[payloadKey] = payloadValue;
-    }
-
-    frontNavBook.value = payloadValue.frontNav;
-
-    loading.value = false;
-}
-
-const pharse = await usePhrases('to_index', 'about_textbook');
-</script>
-
-<template>
-    <AsideMajorPaneTemplate>
-        <TransitionFade>
-            <div
-                v-if="!loading && frontNavBook"
-                class="absolute top-0 left-0 flex h-full w-full flex-col"
-            >
-                <div
-                    class="border-border p-normal shrink-0 border-b text-sm
-                        font-bold"
-                >
-                    {{ frontNavBook.title }}
-                </div>
-                <ScrollHolder direction="rtl" class="flex-1">
-                    <div class="border-border border-b">
-                        <TreeContainer>
-                            <TreeItem
-                                icon="arrow/left"
-                                :main="pharse.to_index"
-                                @click="
-                                    asideMajorPane = AsideMajorPane.GlobalNav
-                                "
-                            />
-                            <TreeItem
-                                icon="book-question"
-                                :main="pharse.about_textbook"
-                                :to="frontNavBook.link"
-                                :state="
-                                    shortContentId === shortBookId
-                                        ? 'active'
-                                        : undefined
-                                "
-                            />
-                        </TreeContainer>
-                    </div>
-                    <TreeContainer>
-                        <ContentNavItem
-                            v-for="navItem in frontNavBook.children!"
-                            :navItem
-                        />
-                    </TreeContainer>
-                </ScrollHolder>
-            </div>
-            <div
-                v-else
-                class="text-text-dimmed absolute top-0 left-0 flex h-full w-full
-                    items-center justify-center text-[50px] transition-opacity"
-            >
-                <MyRuntimeIcon :svg="loadingSvg" />
-            </div>
-        </TransitionFade>
-    </AsideMajorPaneTemplate>
-</template>
+<script lang="ts" setup>
+import ContentNavItem from './items/ContentNavItem.vue';
+
+type BookPayloadValue = {
+  shortBookId: string;
+  frontNav: FrontContentNavBook;
+};
+
+const nuxtApp = useNuxtApp();
+const asideMajorPane = useAsideMajorPane();
+const { shortContentId, shortBookId } = useContentId();
+const frontNavBook = shallowRef<FrontContentNavBook>();
+const loading = ref(true);
+
+await bookChange();
+watch(shortBookId, bookChange);
+
+async function bookChange() {
+  if (shortBookId.value === undefined) {
+    // Changed to nothing, keep already loaded book nav or loading screen
+    return;
+  }
+
+  loading.value = true;
+
+  const payloadKey = 'book-content-nav';
+
+  const fetchPayload = async (): Promise<BookPayloadValue> => {
+    return {
+      shortBookId: shortBookId.value!,
+      frontNav: await $fetch(
+        `/api/aside/major/frontNav/book/${shortBookId.value}`,
+        {
+          responseType: 'json',
+        },
+      ),
+    };
+  };
+
+  let payloadValue: BookPayloadValue =
+    nuxtApp.static.data[payloadKey] ??
+    nuxtApp.payload.data[payloadKey] ??
+    (await fetchPayload());
+
+  // Cache it if it came from fetch
+  nuxtApp.static.data[payloadKey] ??= payloadValue;
+  nuxtApp.payload.data[payloadKey] ??= payloadValue;
+
+  // Refetch if cached payload is for a different book
+  if (payloadValue.shortBookId !== shortBookId.value) {
+    payloadValue = await fetchPayload();
+    nuxtApp.static.data[payloadKey] = payloadValue;
+    nuxtApp.payload.data[payloadKey] = payloadValue;
+  }
+
+  frontNavBook.value = payloadValue.frontNav;
+
+  loading.value = false;
+}
+
+const pharse = await usePhrases('to_index', 'about_textbook');
+</script>
+
+<template>
+  <AsideMajorPaneTemplate>
+    <TransitionFade>
+      <div
+        v-if="!loading && frontNavBook"
+        class="absolute top-0 left-0 flex h-full w-full flex-col"
+      >
+        <div class="border-border p-normal shrink-0 border-b text-sm font-bold">
+          {{ frontNavBook.title }}
+        </div>
+        <ScrollHolder direction="rtl" class="flex-1">
+          <div class="border-border border-b">
+            <TreeContainer>
+              <TreeItem
+                icon="arrow/left"
+                :main="pharse.to_index"
+                @click="asideMajorPane = AsideMajorPane.GlobalNav"
+              />
+              <TreeItem
+                icon="book-question"
+                :main="pharse.about_textbook"
+                :to="frontNavBook.link"
+                :state="shortContentId === shortBookId ? 'active' : undefined"
+              />
+            </TreeContainer>
+          </div>
+          <TreeContainer>
+            <ContentNavItem
+              v-for="navItem in frontNavBook.children!"
+              :navItem
+            />
+          </TreeContainer>
+        </ScrollHolder>
+      </div>
+      <div
+        v-else
+        class="absolute top-0 left-0 flex h-full w-full items-center
+          justify-center transition-opacity"
+      >
+        <Loading class="text-text-dimmed text-[65px]" />
+      </div>
+    </TransitionFade>
+  </AsideMajorPaneTemplate>
+</template>

package/app/components/aside/major/contentNav/PaneGlobalNav.vue

@@ -1,19 +1,19 @@
-<script lang="ts" setup>
-import ContentNavItem from './items/ContentNavItem.vue';
-
-const phrase = await usePhrases('no_content');
-</script>
-
-<template>
-    <AsideMajorPaneTemplate>
-        <ScrollHolder direction="rtl" class="absolute top-0 left-0">
-            <TreeContainer v-if="globalContentNav.frontNavItems.length > 0">
-                <ContentNavItem
-                    v-for="navItem in globalContentNav.frontNavItems"
-                    :navItem
-                />
-            </TreeContainer>
-            <AsidePlainMessage v-else :text="phrase.no_content" />
-        </ScrollHolder>
-    </AsideMajorPaneTemplate>
-</template>
+<script lang="ts" setup>
+import ContentNavItem from './items/ContentNavItem.vue';
+
+const phrase = await usePhrases('no_content');
+</script>
+
+<template>
+  <AsideMajorPaneTemplate>
+    <ScrollHolder direction="rtl" class="absolute top-0 left-0">
+      <TreeContainer v-if="globalContentNav.frontNavItems.length > 0">
+        <ContentNavItem
+          v-for="navItem in globalContentNav.frontNavItems"
+          :navItem
+        />
+      </TreeContainer>
+      <AsidePlainMessage v-else :text="phrase.no_content" />
+    </ScrollHolder>
+  </AsideMajorPaneTemplate>
+</template>

package/app/components/aside/major/contentNav/items/ContentNavBook.vue

@@ -6,16 +6,16 @@ const { shortBookId } = useContentId();
 const asideMajorPane = useAsideMajorPane();
 
 const active = computed(() => {
-    return navItem.shortId === shortBookId.value;
+  return navItem.shortId === shortBookId.value;
 });
 </script>
 
 <template>
-    <ItemTemplate
-        icon="book-outline"
-        :navItem
-        :state="active ? 'active' : undefined"
-        :to="active ? '' : navItem.link"
-        @click="asideMajorPane = AsideMajorPane.BookNav"
-    />
+  <ItemTemplate
+    icon="book-outline"
+    :navItem
+    :state="active ? 'active' : undefined"
+    :to="active ? '' : navItem.link"
+    @click="asideMajorPane = AsideMajorPane.BookNav"
+  />
 </template>

package/app/components/aside/major/contentNav/items/ContentNavFolder.vue

@@ -3,90 +3,89 @@ import ItemTemplate from './ItemTemplate.vue';
 import ContentNavItem from './ContentNavItem.vue';
 
 const { navItem } = defineProps<{
-    navItem: FrontContentNavGroup;
-    level?: number;
+  navItem: FrontContentNavGroup;
+  level?: number;
 }>();
 
 const { shortContentId } = useContentId();
 
 const hasActiveDescendant = computed(() => {
-    return checkActiveDescendant(navItem.children, shortContentId.value);
+  return checkActiveDescendant(navItem.children, shortContentId.value);
 });
 
 const hasActiveDirectChild = computed(() => {
-    return checkActiveDirectChild(navItem.children, shortContentId.value);
+  return checkActiveDirectChild(navItem.children, shortContentId.value);
 });
 
 const state = computed(() => {
-    if (shortContentId.value === navItem.shortId) {
-        return 'active';
-    }
+  if (shortContentId.value === navItem.shortId) {
+    return 'active';
+  }
 
-    if (hasActiveDescendant.value) {
-        return 'accent';
-    }
+  if (hasActiveDescendant.value) {
+    return 'accent';
+  }
 
-    return undefined;
+  return undefined;
 });
 
 function checkActiveDescendant(
-    children: FrontContentNavItem[],
-    targetShortId: string | undefined,
+  children: FrontContentNavItem[],
+  targetShortId: string | undefined,
 ): boolean {
-    if (!children) {
-        return false;
-    }
+  if (!children) {
+    return false;
+  }
 
-    for (const child of children) {
-        if (child.shortId === targetShortId) {
-            return true;
-        }
+  for (const child of children) {
+    if (child.shortId === targetShortId) {
+      return true;
+    }
 
-        if (child.type === 'group') {
-            if (checkActiveDescendant(child.children, targetShortId)) {
-                return true;
-            }
-        }
+    if (child.type === 'group') {
+      if (checkActiveDescendant(child.children, targetShortId)) {
+        return true;
+      }
     }
+  }
 
-    return false;
+  return false;
 }
 
 function checkActiveDirectChild(
-    children: FrontContentNavItem[],
-    targetShortId: string | undefined,
+  children: FrontContentNavItem[],
+  targetShortId: string | undefined,
 ): boolean {
-    if (!children) return false;
-    return children.some((child) => child.shortId === targetShortId);
+  if (!children) return false;
+  return children.some((child) => child.shortId === targetShortId);
 }
 </script>
 
 <template>
-    <ItemTemplate
-        :navItem
-        :icon="state ? 'folder-open' : 'folder'"
-        :state
-        :level
-    />
+  <ItemTemplate
+    :navItem
+    :icon="state ? 'folder-open' : 'folder'"
+    :state
+    :level
+  />
+  <div
+    :class="[
+      'relative overflow-hidden transition-[height]',
+      state ? 'h-auto' : 'h-0',
+    ]"
+  >
     <div
-        :class="[
-            'relative overflow-hidden transition-[height]',
-            state ? 'h-auto' : 'h-0',
-        ]"
-    >
-        <div
-            :style="{ '--level': level ? +level : 0 }"
-            :class="[
-                `absolute top-0
-                left-[calc(var(--spacing-normal)*(var(--level)+1)+7px)] h-full
-                border-l opacity-40 transition-[border]`,
-                [hasActiveDirectChild ? 'border-brand' : 'border-text-dimmed'],
-            ]"
-        ></div>
-        <ContentNavItem
-            v-for="child of navItem.children"
-            :navItem="child"
-            :level="level ? level + 1 : 1"
-        />
-    </div>
+      :style="{ '--level': level ? +level : 0 }"
+      :class="[
+        `absolute top-0 left-[calc(var(--spacing-normal)*(var(--level)+1)+5px)]
+        h-full border-l opacity-40 transition-[border]`,
+        [hasActiveDirectChild ? 'border-brand' : 'border-text-dimmed'],
+      ]"
+    ></div>
+    <ContentNavItem
+      v-for="child of navItem.children"
+      :navItem="child"
+      :level="level ? level + 1 : 1"
+    />
+  </div>
 </template>

package/app/components/aside/major/contentNav/items/ContentNavItem.vue

@@ -7,27 +7,27 @@ import ContentNavFolder from './ContentNavFolder.vue';
 import ContentNavFlags from './Flags.vue';
 
 const { navItem } = defineProps<{
-    navItem: FrontContentNavItem;
+  navItem: FrontContentNavItem;
 }>();
 
 const NavItemComponent = (() => {
-    switch (navItem.type) {
-        case 'topic':
-            return ContentNavTopic;
-        case 'page':
-            return ContentNavPage;
-        case 'book':
-            return ContentNavBook;
-        case 'group':
-            return navItem.separator ? ContentNavSeparator : ContentNavFolder;
-    }
+  switch (navItem.type) {
+    case 'topic':
+      return ContentNavTopic;
+    case 'page':
+      return ContentNavPage;
+    case 'book':
+      return ContentNavBook;
+    case 'group':
+      return navItem.separator ? ContentNavSeparator : ContentNavFolder;
+  }
 })();
 </script>
 
 <template>
-    <NavItemComponent :navItem="navItem as any">
-        <template v-slot:secondary>
-            <ContentNavFlags v-if="navItem.flags" :flags="navItem.flags" />
-        </template>
-    </NavItemComponent>
+  <NavItemComponent :navItem="navItem as any">
+    <template v-slot:secondary>
+      <ContentNavFlags v-if="navItem.flags" :flags="navItem.flags" />
+    </template>
+  </NavItemComponent>
 </template>

package/app/components/aside/major/contentNav/items/ContentNavPage.vue

@@ -5,14 +5,10 @@ const { navItem } = defineProps<{ navItem: FrontContentNavTopic }>();
 const { shortContentId } = useContentId();
 
 const active = computed(() => {
-    return navItem.shortId === shortContentId.value;
+  return navItem.shortId === shortContentId.value;
 });
 </script>
 
 <template>
-    <ItemTemplate
-        icon="lines"
-        :navItem
-        :state="active ? 'active' : undefined"
-    />
+  <ItemTemplate icon="lines" :navItem :state="active ? 'active' : undefined" />
 </template>

package/app/components/aside/major/contentNav/items/ContentNavSeparator.vue

@@ -7,56 +7,55 @@ const { navItem } = defineProps<{ navItem: FrontContentNavGroup }>();
 const { shortContentId } = useContentId();
 
 const hasActiveDescendant = computed(() => {
-    return checkActiveDescendant(navItem.children, shortContentId.value);
+  return checkActiveDescendant(navItem.children, shortContentId.value);
 });
 
 const state = computed(() => {
-    if (shortContentId.value === navItem.shortId) {
-        return 'active';
-    }
+  if (shortContentId.value === navItem.shortId) {
+    return 'active';
+  }
 
-    if (hasActiveDescendant.value) {
-        return 'accent';
-    }
+  if (hasActiveDescendant.value) {
+    return 'accent';
+  }
 
-    return undefined;
+  return undefined;
 });
 
 function checkActiveDescendant(
-    children: FrontContentNavItem[],
-    targetShortId: string | undefined,
+  children: FrontContentNavItem[],
+  targetShortId: string | undefined,
 ): boolean {
-    if (!children) {
-        return false;
-    }
+  if (!children) {
+    return false;
+  }
 
-    for (const child of children) {
-        if (child.shortId === targetShortId) {
-            return true;
-        }
+  for (const child of children) {
+    if (child.shortId === targetShortId) {
+      return true;
+    }
 
-        if (child.type === 'group') {
-            if (checkActiveDescendant(child.children, targetShortId)) {
-                return true;
-            }
-        }
+    if (child.type === 'group') {
+      if (checkActiveDescendant(child.children, targetShortId)) {
+        return true;
+      }
     }
+  }
 
-    return false;
+  return false;
 }
 </script>
 
 <template>
-    <div
-        class="my-small py-small border-border mx-0 border-y px-0 first:mt-0
-            first:border-t-0 first:pt-0 [&+div]:mt-0 [&+div]:border-t-0
-            [&+div]:pt-0"
-    >
-        <ItemTemplate :navItem :state :class="['font-semibold']" />
-        <ContentNavItem
-            v-for="(child, i) in navItem.children"
-            :key="child.shortId"
-            :navItem="child"
-        />
-    </div>
+  <div
+    class="my-small py-small border-border mx-0 border-y px-0 first:mt-0
+      first:border-t-0 first:pt-0 [&+div]:mt-0 [&+div]:border-t-0 [&+div]:pt-0"
+  >
+    <ItemTemplate :navItem :state :class="['font-semibold']" />
+    <ContentNavItem
+      v-for="(child, i) in navItem.children"
+      :key="child.shortId"
+      :navItem="child"
+    />
+  </div>
 </template>

package/app/components/aside/major/contentNav/items/ContentNavTopic.vue

@@ -5,14 +5,14 @@ const { navItem } = defineProps<{ navItem: FrontContentNavTopic }>();
 const { shortContentId } = useContentId();
 
 const active = computed(() => {
-    return navItem.shortId === shortContentId.value;
+  return navItem.shortId === shortContentId.value;
 });
 </script>
 
 <template>
-    <ItemTemplate
-        icon="array-lines"
-        :navItem
-        :state="active ? 'active' : undefined"
-    />
+  <ItemTemplate
+    icon="array-lines"
+    :navItem
+    :state="active ? 'active' : undefined"
+  />
 </template>