@paris-ias/list 1.2.1 → 1.3.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@paris-ias/list",
   "configKey": "list",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/fellowships/View.vue

@@ -49,12 +49,15 @@
                   'list.filters.fellowships.fellowshipType.' +
                     item.fellowshipType,
                 ),
-                ...(props.item && props.item.disciplines
-                  ? props.item.disciplines.map((discipline) => discipline.name)
-                  : []),
               ]"
               class="mt-2"
             />
+            <!-- DISCIPLINES -->
+            <MiscMoleculesDisciplinesTags
+              :disciplines="item.disciplines"
+              justify="center"
+              class="mt-4"
+            />
             <div class="mt-5">
               <FellowshipsBadges :item="item" :view="view" :loading="loading" />
             </div>
@@ -152,58 +155,43 @@
 
 <script setup>
 import { useDisplay } from "vuetify"
-import { ref } from "#imports"
+import { computed, ref } from "#imports"
 const { name } = useDisplay()
 const accordeon = ref(-1)
 const props = defineProps({
+  // null while the resource item is loading (see useI18nResourceItem)
   item: {
     type: Object,
-    required: true,
+    default: null,
   },
   loading: {
     type: Boolean,
     default: false,
-    required: true,
   },
 })
 
 const view = ref(true)
 
-const renderedDetails = {
-  ...(props.item?.fellowshipDetails?.type && {
-    type: props.item?.fellowshipDetails?.type,
-  }),
-  ...(props.item?.fellowshipDetails?.fundingPeriod && {
-    fundingPeriod: props.item?.fellowshipDetails?.fundingPeriod,
-  }),
-  ...(props.item?.fellowshipDetails?.profile && {
-    profile: props.item?.fellowshipDetails?.profile,
-  }),
-  ...(props.item?.fellowshipDetails?.tasks && {
-    tasks: props.item?.fellowshipDetails?.tasks,
-  }),
-  ...(props.item?.fellowshipDetails?.location && {
-    location: props.item?.fellowshipDetails?.location,
-  }),
-  ...(props.item?.fellowshipDetails?.funding && {
-    funding: props.item?.fellowshipDetails?.funding,
-  }),
-  ...(props.item?.fellowshipDetails?.housing && {
-    housing: props.item?.fellowshipDetails?.housing,
-  }),
-  ...(props.item?.fellowshipDetails?.meals && {
-    meals: props.item?.fellowshipDetails?.meals,
-  }),
-  ...(props.item?.fellowshipDetails?.applicationMaterials && {
-    applicationMaterials: props.item?.fellowshipDetails?.applicationMaterials,
-  }),
-  ...(props.item?.fellowshipDetails?.selectionProcess && {
-    selectionProcess: props.item?.fellowshipDetails?.selectionProcess,
-  }),
-  ...(props.item?.fellowshipDetails?.researchProcess && {
-    researchProcess: props.item?.fellowshipDetails?.researchProcess,
-  }),
-}
+// computed (not a one-shot setup value) so it picks up `item` once it loads in
+const renderedDetails = computed(() => {
+  const d = props.item?.fellowshipDetails
+  if (!d) return {}
+  return {
+    ...(d.type && { type: d.type }),
+    ...(d.fundingPeriod && { fundingPeriod: d.fundingPeriod }),
+    ...(d.profile && { profile: d.profile }),
+    ...(d.tasks && { tasks: d.tasks }),
+    ...(d.location && { location: d.location }),
+    ...(d.funding && { funding: d.funding }),
+    ...(d.housing && { housing: d.housing }),
+    ...(d.meals && { meals: d.meals }),
+    ...(d.applicationMaterials && {
+      applicationMaterials: d.applicationMaterials,
+    }),
+    ...(d.selectionProcess && { selectionProcess: d.selectionProcess }),
+    ...(d.researchProcess && { researchProcess: d.researchProcess }),
+  }
+})
 </script>
 
 <style lang="scss" scoped></style>

package/dist/runtime/components/list/molecules/Filters.vue

@@ -62,28 +62,31 @@ const getItems = (name) => {
     return []
   }
 
+  // Disciplines and thematics are shared enums used across most list types.
+  // They live in their own top-level i18n namespace (list.filters.disciplines
+  // / list.filters.thematics) and are resolved from there for every type,
+  // independently of filters.json, to avoid duplicating them per type.
+  if (["disciplines", "thematics"].includes(name)) {
+    return Object.keys(messages.value[locale.value].list.filters?.[name])
+      .filter((key) => key !== "label")
+      .map((item) => ({
+        title: i18n.t(`list.filters.${name}.${item}`),
+        value: item,
+      }))
+      .sort((a, b) => a.title.localeCompare(b.title))
+  }
+
   if ($filters?.[props.type]?.[name]) {
-    // Disciplines and thematics have their own namespace for translations
-    if (["disciplines", "thematics"].includes(name)) {
-      return Object.keys(messages.value[locale.value].list.filters?.[name])
-        .filter((key) => key !== "label")
-        .map((item) => ({
-          title: i18n.t(`list.filters.${name}.${item}`),
-          value: item,
-        }))
-        .sort((a, b) => a.title.localeCompare(b.title))
-    } else {
-      return $filters[props.type][name]
-        .filter((key) => key !== "label")
-        .map((item) => ({
-          title: i18n.t(
-            props.type === "people" && name === "vintage"
-              ? item
-              : `list.filters.${props.type}.${name}.${item}`,
-          ),
-          value: item,
-        }))
-    }
+    return $filters[props.type][name]
+      .filter((key) => key !== "label")
+      .map((item) => ({
+        title: i18n.t(
+          props.type === "people" && name === "vintage"
+            ? item
+            : `list.filters.${props.type}.${name}.${item}`,
+        ),
+        value: item,
+      }))
   }
 
   if (!messages.value[locale.value].list.filters[props.type]?.[name]) {

package/dist/runtime/components/misc/molecules/DisciplinesTags.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-skeleton-loader
+    v-if="loading"
+    type="chip@3"
+    class="discipline-skeleton mt-2"
+  />
+  <div
+    v-else-if="disciplines.length"
+    class="d-flex flex-wrap"
+    :class="justify === 'center' ? 'justify-center' : ''"
+    style="gap: 6px"
+  >
+    <v-chip
+      v-for="(d, i) in shownDisciplines"
+      :key="d + i"
+      size="small"
+      tile
+      variant="flat"
+      color="grey-lighten-3"
+      class="discipline-chip"
+    >
+      {{ disciplineLabel(d) }}
+    </v-chip>
+    <v-chip
+      v-if="extraDisciplines"
+      size="small"
+      variant="flat"
+      tile
+      color="grey-lighten-3"
+      class="discipline-chip"
+    >
+      +{{ extraDisciplines }}
+    </v-chip>
+  </div>
+</template>
+
+<script setup>
+import { computed, useI18n } from "#imports"
+
+const { t } = useI18n()
+
+const props = defineProps({
+  // scalar enum array (e.g. item.disciplines)
+  disciplines: {
+    type: Array,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // cap the number of chips; 0 = show all (used by detail views)
+  max: {
+    type: Number,
+    default: 0,
+  },
+  // 'start' (dense list) | 'center' (detail views)
+  justify: {
+    type: String,
+    default: "start",
+  },
+})
+
+// normalise to an array regardless of what the caller passes
+const disciplines = computed(() =>
+  Array.isArray(props.disciplines) ? props.disciplines : [],
+)
+const shownDisciplines = computed(() =>
+  props.max > 0 ? disciplines.value.slice(0, props.max) : disciplines.value,
+)
+const extraDisciplines = computed(() =>
+  props.max > 0 ? Math.max(0, disciplines.value.length - props.max) : 0,
+)
+const disciplineLabel = (d) => t("list.filters.disciplines." + d)
+</script>
+
+<style scoped>
+.discipline-chip{border-radius:6px;color:rgba(0,0,0,.78);font-weight:500}.discipline-skeleton :deep(.v-skeleton-loader__chip){margin:0 6px 0 0}
+</style>

package/dist/runtime/components/people/View.vue

@@ -73,37 +73,35 @@
             <div class="mt-6 align-self-center">
               <PeopleBadges v-if="item && item.groups" :item="item" />
             </div>
-
+            <!-- DIVIDERS -->
+            <v-responsive class="mx-auto my-6" width="120">
+              <v-divider class="mb-1" />
+              <v-divider />
+            </v-responsive>
             <!-- FELLOWSHIP -->
-            <div v-if="fellowName || fellowTheme || fellowDates" class="mt-6">
-              <div v-if="fellowName" class="text-h6 font-weight-regular">
-                {{ fellowName }}
-              </div>
-
-              <!-- DISCIPLINES -->
+            <div
+              v-if="fellowshipProjectName || fellowTheme || fellowDates"
+              class=""
+            >
               <div
-                v-if="disciplines.length"
-                class="mt-4 d-flex flex-wrap justify-center"
-                style="gap: 6px"
+                v-if="fellowshipProjectName"
+                class="text-h6 font-weight-regular"
               >
-                <v-chip
-                  v-for="(d, i) in disciplines"
-                  :key="d + i"
-                  size="small"
-                  variant="flat"
-                  tile
-                  color="grey-lighten-3"
-                  class="discipline-chip"
-                >
-                  {{ disciplineLabel(d) }}
-                </v-chip>
+                {{ fellowshipProjectName }}
               </div>
-              <div v-if="fellowTheme" class="text-body-1 mt-1 font-italic">
+
+              <!-- DISCIPLINES -->
+              <MiscMoleculesDisciplinesTags
+                :disciplines="item.disciplines"
+                justify="center"
+                class="mt-4"
+              />
+              <div v-if="fellowTheme" class="text-body-1 my-3 font-italic">
                 {{ fellowTheme }}
               </div>
               <div
                 v-if="fellowDates"
-                class="text-body-2 mt-1 text-medium-emphasis"
+                class="text-body-2 my-3 text-medium-emphasis"
               >
                 {{ fellowDates }}
               </div>
@@ -217,22 +215,17 @@ const { t, locale } = useI18n()
 const { $stores } = useNuxtApp()
 const { name, mdAndUp } = useDisplay()
 const props = defineProps({
-  item: { type: Object, required: true },
+  // null while the resource item is loading (see useI18nResourceItem)
+  item: { type: Object, default: null },
   loading: { type: Boolean, default: false },
 })
 $stores.people.loading = false
 
-// disciplines: scalar enum array → translated labels
-const disciplines = computed(() =>
-  Array.isArray(props.item?.disciplines) ? props.item.disciplines : [],
-)
-const disciplineLabel = (d) => t("list.filters.disciplines." + d)
-
 // latest is a union Vintage | Position; the fellowship program lives on the
 // Vintage branch (name = program name, theme = fellowship theme) and carries the
 // arrival/departure dates (start/stop). Guard by field presence.
 const latest = computed(() => props.item?.latest ?? null)
-const fellowName = computed(() => latest.value?.name ?? null)
+const fellowshipProjectName = computed(() => latest.value?.name ?? null)
 const fellowTheme = computed(() => latest.value?.theme ?? null)
 
 // "present" = currently in residence/post: started on or before today and not
@@ -259,5 +252,5 @@ const fellowDates = computed(() => {
 </script>
 
 <style scoped>
-.discipline-chip{border-radius:6px;color:rgba(0,0,0,.78);font-weight:500}.present-pill{align-items:center;background-color:rgba(0,0,0,.06);border-radius:999px;color:rgba(0,0,0,.7);display:inline-flex;font-size:.6875rem;font-weight:500;gap:5px;letter-spacing:.04em;line-height:1;padding:4px 10px;text-transform:uppercase}.present-dot{background-color:#4caf50;border-radius:50%;height:6px;width:6px}
+.present-pill{align-items:center;background-color:rgba(0,0,0,.06);border-radius:999px;color:rgba(0,0,0,.7);display:inline-flex;font-size:.6875rem;font-weight:500;gap:5px;letter-spacing:.04em;line-height:1;padding:4px 10px;text-transform:uppercase}.present-dot{background-color:#4caf50;border-radius:50%;height:6px;width:6px}
 </style>

package/dist/runtime/components/projects/View.vue

@@ -45,6 +45,13 @@
         >
           <MDC v-if="item && item.subtitle" :value="item.subtitle" />
         </div>
+        <!-- DISCIPLINES -->
+        <MiscMoleculesDisciplinesTags
+          v-if="item"
+          :disciplines="item.disciplines"
+          justify="center"
+          class="mt-4"
+        />
         <MiscMoleculesChipContainer
           v-if="item && item.tags"
           :items="item.tags"
@@ -120,13 +127,14 @@ import { useNuxtApp } from "#imports"
 const { $stores } = useNuxtApp()
 const { name } = useDisplay()
 const props = defineProps({
+  // null while the resource item is loading (see useI18nResourceItem)
   item: {
     type: Object,
-    required: true,
+    default: null,
   },
   loading: {
     type: Boolean,
-    required: false,
+    default: false,
   },
 })
 </script>

package/dist/runtime/components/publications/View.vue

@@ -40,6 +40,12 @@
         <div class="overline my-2">
           {{ formatDateValue(item.date, locale) }}
         </div>
+        <!-- DISCIPLINES -->
+        <MiscMoleculesDisciplinesTags
+          :disciplines="item.disciplines"
+          justify="center"
+          class="mt-4"
+        />
         <MiscMoleculesChipContainer
           v-if="item.tags && item.tags.length"
           :items="item.tags"
@@ -119,13 +125,13 @@ const { $stores } = useNuxtApp()
 const { name } = useDisplay()
 const { locale } = useI18n()
 const props = defineProps({
+  // null while the resource item is loading (see useI18nResourceItem)
   item: {
     type: Object,
-    required: true,
+    default: null,
   },
   loading: {
     type: Boolean,
-    required: false,
     default: false,
   },
 })

package/dist/runtime/translations/en.json

@@ -230,6 +230,12 @@
           "Socioscope": "Socioscope",
           "WPRN": "WPRN",
           "WPRN-2021": "WPRN 2021"
+        },
+        "type": {
+          "label": "Type",
+          "INITIATIVE": "Initiative",
+          "PROJECT": "Project",
+          "TOOL": "Tool"
         }
       },
       "publications": {

package/dist/runtime/translations/fr.json

@@ -220,6 +220,12 @@
           "Socioscope": "Socioscope",
           "WPRN": "WPRN",
           "WPRN-2021": "WPRN 2021"
+        },
+        "type": {
+          "label": "Type",
+          "INITIATIVE": "Initiative",
+          "PROJECT": "Projet",
+          "TOOL": "Outil"
         }
       },
       "publications": {

package/package.json

@@ -1,14 +1,14 @@
 {
   "license": "AGPL-3.0-only",
   "main": "./dist/module.mjs",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "name": "@paris-ias/list",
   "repository": {
     "url": "git+https://github.com/IEA-Paris/list.git",
     "type": "git"
   },
   "dependencies": {
-    "@paris-ias/trees": "^2.2.16"
+    "@paris-ias/trees": "^2.2.17"
   },
   "description": "Paris IAS List Module",
   "peerDependencies": {