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

package/app/components/main/connections/MainConnections.vue

@@ -1,94 +1,90 @@
-<script lang="ts" setup>
-import Deps from './Deps.vue';
-import Externals from './Externals.vue';
-
-const { connections } = defineProps<{ connections?: ContentConnections }>();
-
-const phrase = await usePhrases('connections');
-
-const currentType = ref<keyof ContentConnections | undefined>(
-    'hardDependencies',
-);
-
-const ownExternalsCount = computed(() => {
-    return connections?.externals?.find((ext) => ext.type === 'own')?.items
-        .length;
-});
-
-const parentExternalsCount = computed(() => {
-    return connections?.externals
-        ?.filter((ext) => ext.type === 'parent')
-        .reduce((sum, ext) => sum + ext.items.length, 0);
-});
-</script>
-
-<template>
-    <section v-if="connections" class="px-main py-main-half">
-        <MainSubTitle :title="phrase.connections + ':'" />
-        <div
-            class="gap-small micro:gap-normal micro:justify-start flex flex-wrap
-                justify-center"
-        >
-            <template
-                v-for="(items, type) of {
-                    hardDependencies: connections.hardDependencies,
-                    autoDependencies: connections.autoDependencies,
-                    dependents: connections.dependents,
-                }"
-            >
-                <MainConnectionsButton
-                    v-if="items && items.length > 0"
-                    :type="type"
-                    :count="items.length"
-                    :active="currentType === type"
-                    @click="
-                        currentType === type
-                            ? (currentType = undefined)
-                            : (currentType = type)
-                    "
-                />
-            </template>
-            <MainConnectionsButton
-                v-if="connections.externals"
-                type="externals"
-                :active="currentType === 'externals'"
-                @click="
-                    currentType === 'externals'
-                        ? (currentType = undefined)
-                        : (currentType = 'externals')
-                "
-            >
-                <template #after>
-                    <div
-                        v-if="connections.externals"
-                        class="gap-small *:border-border *:pl-small flex
-                            items-center font-bold *:border-l"
-                    >
-                        <div
-                            v-if="ownExternalsCount"
-                            class="flex items-center gap-1 text-amber-600
-                                dark:text-amber-400"
-                        >
-                            <MyIcon name="arrow/left" class="-scale-x-100" />
-                            <span>{{ ownExternalsCount }}</span>
-                        </div>
-                        <div
-                            v-if="parentExternalsCount"
-                            class="flex items-center gap-1"
-                        >
-                            <MyIcon name="arrow/up-to-right" />
-                            <span>{{ parentExternalsCount }}</span>
-                        </div>
-                    </div>
-                </template>
-            </MainConnectionsButton>
-        </div>
-        <template v-if="currentType && connections[currentType]">
-            <Deps
-                v-if="currentType !== 'externals'"
-                :deps="connections[currentType]!"
-            />
-            <Externals v-else :externals="connections[currentType]!" />
-        </template>
-    </section>
-</template>
+<script lang="ts" setup>
+import Deps from './Deps.vue';
+import Externals from './Externals.vue';
+
+const { connections } = defineProps<{ connections?: ContentConnections }>();
+
+const phrase = await usePhrases('connections');
+
+const currentType = ref<keyof ContentConnections | undefined>(
+  'hardDependencies',
+);
+
+const ownExternalsCount = computed(() => {
+  return connections?.externals?.find((ext) => ext.type === 'own')?.items
+    .length;
+});
+
+const parentExternalsCount = computed(() => {
+  return connections?.externals
+    ?.filter((ext) => ext.type === 'parent')
+    .reduce((sum, ext) => sum + ext.items.length, 0);
+});
+</script>
+
+<template>
+  <section v-if="connections" class="px-main py-main-half">
+    <MainSubTitle :title="phrase.connections + ':'" />
+    <div
+      class="gap-small micro:gap-normal micro:justify-start flex flex-wrap
+        justify-center"
+    >
+      <template
+        v-for="(items, type) of {
+          hardDependencies: connections.hardDependencies,
+          autoDependencies: connections.autoDependencies,
+          dependents: connections.dependents,
+        }"
+      >
+        <MainConnectionsButton
+          v-if="items && items.length > 0"
+          :type="type"
+          :count="items.length"
+          :active="currentType === type"
+          @click="
+            currentType === type
+              ? (currentType = undefined)
+              : (currentType = type)
+          "
+        />
+      </template>
+      <MainConnectionsButton
+        v-if="connections.externals"
+        type="externals"
+        :active="currentType === 'externals'"
+        @click="
+          currentType === 'externals'
+            ? (currentType = undefined)
+            : (currentType = 'externals')
+        "
+      >
+        <template #after>
+          <div
+            v-if="connections.externals"
+            class="gap-small *:border-border *:pl-small flex items-center
+              font-bold *:border-l"
+          >
+            <div
+              v-if="ownExternalsCount"
+              class="flex items-center gap-1 text-amber-600 dark:text-amber-400"
+            >
+              <MyIcon name="arrow/left" class="-scale-x-100" />
+              <span>{{ ownExternalsCount }}</span>
+            </div>
+            <div v-if="parentExternalsCount" class="flex items-center gap-1">
+              <MyIcon name="arrow/up-to-right" />
+              <span>{{ parentExternalsCount }}</span>
+            </div>
+          </div>
+        </template>
+      </MainConnectionsButton>
+    </div>
+    <template v-if="currentType && connections[currentType]">
+      <Deps
+        v-if="currentType !== 'externals'"
+        :deps="connections[currentType]!"
+      />
+      <Externals v-else :externals="connections[currentType]!" />
+    </template>
+  </section>
+</template>

package/app/components/main/connections/MainConnectionsButton.vue

@@ -1,81 +1,81 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-
-const { type, active } = defineProps<{
-    type: 'hardDependencies' | 'autoDependencies' | 'dependents' | 'externals';
-    active?: boolean;
-    count?: number;
-}>();
-
-const isHard = type === 'hardDependencies';
-
-const phrase = await usePhrases(
-    'need_to_know',
-    'depends_on',
-    'used_by',
-    'externals',
-);
-
-const title = (() => {
-    switch (type) {
-        case 'hardDependencies':
-            return phrase.need_to_know;
-        case 'autoDependencies':
-            return phrase.depends_on;
-        case 'dependents':
-            return phrase.used_by;
-        case 'externals':
-            return phrase.externals;
-    }
-})();
-
-const icon: MyIconName = (() => {
-    switch (type) {
-        case 'hardDependencies':
-            return 'warning';
-        case 'autoDependencies':
-            return 'arrow/to-circle';
-        case 'dependents':
-            return 'arrow/from-circle';
-        case 'externals':
-            return 'arrow/outward-box';
-    }
-})();
-
-const dynamicClasses = computed(() => {
-    if (isHard) {
-        if (active) {
-            return 'border-(--activeColor) text-(--activeColor) bg-(--activeColor)/10 hocus:ring-(--activeColor)/25';
-        } else {
-            return 'border-border bg-bg-aside text-text-muted hocus:ring-(--activeColor)/25 hocus:text-(--activeColor) hocus:border-(--activeColor)';
-        }
-    }
-
-    if (active) {
-        return 'border-(--activeColor) text-(--activeColor) bg-(--activeColor)/10 hocus:ring-(--activeColor)/25';
-    } else {
-        return 'border-border bg-bg-aside text-text-muted hocus:ring-(--activeColor)/25 hocus:text-(--activeColor) hocus:border-(--activeColor)';
-    }
-});
-</script>
-
-<template>
-    <button
-        :style="{
-            '--activeColor': isHard
-                ? 'light-dark(var(--color-red-700),var(--color-red-400))'
-                : 'var(--color-brand)',
-        }"
-        :class="[
-            `gap-small text-main-sm px-small flex cursor-pointer items-center
-            rounded border py-1 ring-2 ring-transparent
-            transition-[border,color,box-shadow,background]`,
-            dynamicClasses,
-        ]"
-    >
-        <MyIcon :name="icon" class="text-[1.2em]" />
-        <span>{{ formatText(title) }}</span>
-        <span v-if="count" class="font-bold">{{ count }}</span>
-        <slot name="after"></slot>
-    </button>
-</template>
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+const { type, active } = defineProps<{
+  type: 'hardDependencies' | 'autoDependencies' | 'dependents' | 'externals';
+  active?: boolean;
+  count?: number;
+}>();
+
+const isHard = type === 'hardDependencies';
+
+const phrase = await usePhrases(
+  'need_to_know',
+  'depends_on',
+  'used_by',
+  'externals',
+);
+
+const title = (() => {
+  switch (type) {
+    case 'hardDependencies':
+      return phrase.need_to_know;
+    case 'autoDependencies':
+      return phrase.depends_on;
+    case 'dependents':
+      return phrase.used_by;
+    case 'externals':
+      return phrase.externals;
+  }
+})();
+
+const icon: MyIconName = (() => {
+  switch (type) {
+    case 'hardDependencies':
+      return 'warning';
+    case 'autoDependencies':
+      return 'arrow/to-circle';
+    case 'dependents':
+      return 'arrow/from-circle';
+    case 'externals':
+      return 'arrow/outward-box';
+  }
+})();
+
+const dynamicClasses = computed(() => {
+  if (isHard) {
+    if (active) {
+      return 'border-(--activeColor) text-(--activeColor) bg-(--activeColor)/10 hocus:ring-(--activeColor)/25';
+    } else {
+      return 'border-border bg-bg-aside text-text-muted hocus:ring-(--activeColor)/25 hocus:text-(--activeColor) hocus:border-(--activeColor)';
+    }
+  }
+
+  if (active) {
+    return 'border-(--activeColor) text-(--activeColor) bg-(--activeColor)/10 hocus:ring-(--activeColor)/25';
+  } else {
+    return 'border-border bg-bg-aside text-text-muted hocus:ring-(--activeColor)/25 hocus:text-(--activeColor) hocus:border-(--activeColor)';
+  }
+});
+</script>
+
+<template>
+  <button
+    :style="{
+      '--activeColor': isHard
+        ? 'light-dark(var(--color-red-700),var(--color-red-400))'
+        : 'var(--color-brand)',
+    }"
+    :class="[
+      `gap-small text-main-sm px-small flex cursor-pointer items-center rounded
+      border py-1 ring-2 ring-transparent
+      transition-[border,color,box-shadow,background]`,
+      dynamicClasses,
+    ]"
+  >
+    <MyIcon :name="icon" class="text-[1.2em]" />
+    <span>{{ formatText(title) }}</span>
+    <span v-if="count" class="font-bold">{{ count }}</span>
+    <slot name="after"></slot>
+  </button>
+</template>

package/app/components/main/connections/ScrollPane.vue

@@ -1,10 +1,10 @@
-<script lang="ts" setup></script>
-
-<template>
-    <div
-        class="nice-scrollbars border-border mt-normal relative overflow-auto
-            border-t border-b"
-    >
-        <slot></slot>
-    </div>
-</template>
+<script lang="ts" setup></script>
+
+<template>
+  <div
+    class="nice-scrollbars border-border mt-normal relative overflow-auto
+      border-t border-b"
+  >
+    <slot></slot>
+  </div>
+</template>

package/app/components/main/contentStats/Item.vue

@@ -1,34 +1,28 @@
-<script lang="ts" setup>
-const { mode = 'detailed' } = defineProps<{
-    mode?: 'compact' | 'detailed';
-    icon: string;
-    label: string;
-    count: number;
-}>();
-</script>
-
-<template>
-    <div
-        v-if="mode === 'compact'"
-        :title="label"
-        class="gap-small flex cursor-help items-center"
-    >
-        <MaybeMyIcon
-            :name="icon"
-            class="text-text-dimmed -mr-0.5 text-[1.2em]"
-        />
-        <span class="text-text-muted font-bold">{{ count }}</span>
-    </div>
-    <div
-        v-else
-        class="gap-small px-small text-main-sm border-border bg-bg-aside flex
-            items-center rounded-xl border py-1"
-    >
-        <MaybeMyIcon
-            :name="icon"
-            class="text-text-dimmed -mr-0.5 text-[1.2em]"
-        />
-        <span class="text-text-muted">{{ label }}</span>
-        <span class="text-text-muted font-bold">{{ count }}</span>
-    </div>
-</template>
+<script lang="ts" setup>
+const { mode = 'detailed' } = defineProps<{
+  mode?: 'compact' | 'detailed';
+  icon: string;
+  label: string;
+  count: number;
+}>();
+</script>
+
+<template>
+  <div
+    v-if="mode === 'compact'"
+    :title="label"
+    class="gap-small flex cursor-help items-center"
+  >
+    <MaybeMyIcon :name="icon" class="text-text-dimmed -mr-0.5 text-[1.2em]" />
+    <span class="text-text-muted font-bold">{{ count }}</span>
+  </div>
+  <div
+    v-else
+    class="gap-small px-small text-main-sm border-border bg-bg-aside flex
+      items-center rounded-xl border py-1"
+  >
+    <MaybeMyIcon :name="icon" class="text-text-dimmed -mr-0.5 text-[1.2em]" />
+    <span class="text-text-muted">{{ label }}</span>
+    <span class="text-text-muted font-bold">{{ count }}</span>
+  </div>
+</template>

package/app/components/main/contentStats/ItemElement.vue

@@ -1,19 +1,19 @@
-<script lang="ts" setup>
-import Item from './Item.vue';
-
-const { schemaName } = defineProps<{
-    schemaName: string;
-    count: number;
-}>();
-
-const elementIcon = await getElementIcon(schemaName);
-const elementPhrase = await getElementPhrase(schemaName);
-</script>
-
-<template>
-    <Item
-        :icon="elementIcon"
-        :label="elementPhrase.element_name"
-        :count="count"
-    />
-</template>
+<script lang="ts" setup>
+import Item from './Item.vue';
+
+const { schemaName } = defineProps<{
+  schemaName: string;
+  count: number;
+}>();
+
+const elementIcon = await getElementIcon(schemaName);
+const elementPhrase = await getElementPhrase(schemaName);
+</script>
+
+<template>
+  <Item
+    :icon="elementIcon"
+    :label="elementPhrase.element_name"
+    :count="count"
+  />
+</template>

package/app/components/main/contentStats/ItemMaterials.vue

@@ -1,11 +1,11 @@
-<script lang="ts" setup>
-import Item from './Item.vue';
-
-defineProps<{ count: number }>();
-
-const phrase = await usePhrases('materials');
-</script>
-
-<template>
-    <Item icon="files" :label="phrase.materials" :count="count" />
-</template>
+<script lang="ts" setup>
+import Item from './Item.vue';
+
+defineProps<{ count: number }>();
+
+const phrase = await usePhrases('materials');
+</script>
+
+<template>
+  <Item icon="files" :label="phrase.materials" :count="count" />
+</template>

package/app/components/main/contentStats/MainContentStats.vue

@@ -1,53 +1,50 @@
-<script lang="ts" setup>
-import ItemElement from './ItemElement.vue';
-import ItemMaterials from './ItemMaterials.vue';
-
-defineProps<{
-    mode: 'single' | 'children';
-    stats?: ContentStats;
-}>();
-
-const phrase = await usePhrases('stats');
-</script>
-
-<template>
-    <template v-if="stats">
-        <section v-if="mode === 'single'" class="px-main py-main-half">
-            <MainSubTitle :title="phrase.stats + ':'" />
-            <div
-                class="micro:justify-start gap-small micro:gap-normal flex
-                    flex-wrap justify-center"
-            >
-                <ItemMaterials
-                    v-if="stats.materials"
-                    :count="stats.materials"
-                    mode="detailed"
-                />
-                <ItemElement
-                    v-if="stats.elements"
-                    v-for="(count, schemaName) of stats.elements"
-                    :schemaName
-                    :count
-                    mode="detailed"
-                />
-            </div>
-        </section>
-        <div
-            v-else
-            class="gap-small micro:gap-normal text-main-sm flex flex-wrap"
-        >
-            <ItemMaterials
-                v-if="stats.materials"
-                :count="stats.materials"
-                mode="compact"
-            />
-            <ItemElement
-                v-if="stats.elements"
-                v-for="(count, schemaName) of stats.elements"
-                :schemaName
-                :count
-                mode="compact"
-            />
-        </div>
-    </template>
-</template>
+<script lang="ts" setup>
+import ItemElement from './ItemElement.vue';
+import ItemMaterials from './ItemMaterials.vue';
+
+defineProps<{
+  mode: 'single' | 'children';
+  stats?: ContentStats;
+}>();
+
+const phrase = await usePhrases('stats');
+</script>
+
+<template>
+  <template v-if="stats">
+    <section v-if="mode === 'single'" class="px-main py-main-half">
+      <MainSubTitle :title="phrase.stats + ':'" />
+      <div
+        class="micro:justify-start gap-small micro:gap-normal flex flex-wrap
+          justify-center"
+      >
+        <ItemMaterials
+          v-if="stats.materials"
+          :count="stats.materials"
+          mode="detailed"
+        />
+        <ItemElement
+          v-if="stats.elements"
+          v-for="(count, schemaName) of stats.elements"
+          :schemaName
+          :count
+          mode="detailed"
+        />
+      </div>
+    </section>
+    <div v-else class="gap-small micro:gap-normal text-main-sm flex flex-wrap">
+      <ItemMaterials
+        v-if="stats.materials"
+        :count="stats.materials"
+        mode="compact"
+      />
+      <ItemElement
+        v-if="stats.elements"
+        v-for="(count, schemaName) of stats.elements"
+        :schemaName
+        :count
+        mode="compact"
+      />
+    </div>
+  </template>
+</template>