@paris-ias/list 1.2.2 → 1.3.2

package/dist/module.json

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

package/dist/runtime/components/events/DenseItem.vue

@@ -23,17 +23,20 @@
 
     <v-col align-self="start" class="pl-md-4">
       <v-skeleton-loader v-if="loading" type="chip" class="mr-3" width="120" />
-      <v-chip
-        v-else
-        class="mr-3"
-        color="black"
-        size="small"
-        style="background-color: white; color: black"
-        tile
-        variant="outlined"
-      >
-        {{ $t("list.filters.events.category." + item.category) }}
-      </v-chip>
+      <span v-else>
+        <v-chip
+          class="mr-3"
+          color="black"
+          size="small"
+          style="background-color: white; color: black"
+          tile
+          variant="outlined"
+        >
+          {{ $t("list.filters.events.category." + item.category) }}
+        </v-chip>
+        <!-- DISCIPLINES -->
+        <MiscMoleculesDisciplinesTags :disciplines="item.disciplines" inline />
+      </span>
       <v-skeleton-loader
         v-if="loading && smAndDown"
         type="text"

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

@@ -2,7 +2,7 @@
   <v-row>
     <template v-for="(filterItem, index) in Object.keys($stores[type].filters)">
       <v-col
-        v-if="computeVisibility(filterItem)"
+        v-if="appAllowed(filterItem) && computeVisibility(filterItem)"
         :key="type + index + filterItem"
         cols="12"
         sm="6"
@@ -44,7 +44,7 @@
 <script setup>
 import { useDisplay } from "vuetify"
 import { capitalize } from "../../../composables/useUtils"
-import { useNuxtApp, resolveComponent, useI18n } from "#imports"
+import { useNuxtApp, resolveComponent, useI18n, useAppConfig } from "#imports"
 
 const { smAndDown } = useDisplay()
 const i18n = useI18n()
@@ -52,6 +52,18 @@ const { locale, messages } = useI18n()
 const { $stores, $filters } = useNuxtApp()
 const props = defineProps(["type", "expanded"])
 
+// Consuming app id. Filters may declare an `appId` array of the consumers
+// allowed to render them; this is the id we match against. "all" is a wildcard.
+const appId = useAppConfig().list?.appId ?? "iea"
+
+// A filter is shown only on the consumers it opts into. No appId -> shown
+// everywhere (backward compatible). "all" in the list matches any consumer.
+const appAllowed = (filterKey) => {
+  const allowed = $stores[props.type].filters[filterKey].appId
+  if (!Array.isArray(allowed) || allowed.length === 0) return true
+  return allowed.includes("all") || allowed.includes(appId)
+}
+
 const ComponentName = (name) => {
   return resolveComponent(
     "ListInputs" + capitalize($stores[props.type].filters[name].type),
@@ -62,28 +74,44 @@ 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))
+  }
+
+  // Prefer the enum declared on the model filter (filters[name].items) over the
+  // values baked into filters.json. The model is the source of truth for enum
+  // options (e.g. publicationType), so filters.json never has to stay in sync.
+  const modelItems = $stores[props.type].filters[name].items
+  if (modelItems && typeof modelItems === "object") {
+    return Object.values(modelItems)
+      .filter((item) => item !== "label")
+      .map((item) => ({
+        title: i18n.t(`list.filters.${props.type}.${name}.${item}`),
+        value: item,
+      }))
+  }
+
   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]) {
@@ -137,6 +165,16 @@ const computeVisibility = (filterKey) => {
 
   const checkRule = (rule) =>
     Object.entries(rule).every(([depKey, expected]) => {
+      // Reserved key: match against the active view modifier rather than a
+      // sibling filter's value. On routes like /resources/media the `type` is
+      // narrowed server-side via the modifier, so the modifier is what changes.
+      if (depKey === "modifier") {
+        const cur = $stores[props.type].modifier
+        return Array.isArray(expected)
+          ? expected.includes(cur)
+          : cur === expected
+      }
+
       const dep = filters?.[depKey]
       if (!dep) return false
       const cur = dep.value

package/dist/runtime/components/list/organisms/List.vue

@@ -117,6 +117,10 @@ const props = defineProps({
 /* console.log("start llocal loading from setup") */
 rootStore.setLoading(true, props.type)
 
+// Mirror the route's fixed modifier into the store so the filter UI can branch
+// its conditional visibility on it (the query still reads props.modifier directly).
+rootStore.setModifier(props.type, props.modifier)
+
 // Initial route -> store (single source-of-truth on first load)
 rootStore.loadRouteQuery(props.type)
 

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

@@ -0,0 +1,89 @@
+<template>
+  <v-skeleton-loader
+    v-if="loading"
+    type="chip@3"
+    class="discipline-skeleton mt-2"
+  />
+  <div
+    v-else-if="disciplines.length"
+    class="flex-wrap"
+    :class="[
+      inline ? 'd-inline-flex align-center' : 'd-flex',
+      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",
+  },
+  // render as inline-flex so the chips flow on the same line as preceding
+  // content (e.g. the category chip in the events dense item) instead of
+  // forcing a block-level line break
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 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/news/DenseItem.vue

@@ -41,6 +41,12 @@
             {{ $t(eventCategory) }}
           </v-chip>
           <MiscMoleculesChipContainer :items="item.tags || []" size="small" />
+          <MiscMoleculesDisciplinesTags
+            v-if="item.disciplines && item.disciplines.length"
+            :disciplines="item.disciplines"
+            inline
+            class="mt-2"
+          />
         </template>
         <div
           v-html="

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/DenseItem.vue

@@ -46,11 +46,17 @@
             :items="item.tags || []"
             size="small"
           />
+          <MiscMoleculesDisciplinesTags
+            v-if="item.disciplines && item.disciplines.length"
+            :disciplines="item.disciplines"
+            inline
+            class="mt-2"
+          />
         </template>
         <v-skeleton-loader v-if="loading" type="heading" />
-        <span
+        <div
           v-else
-          class="text-h5 dense paragraph"
+          class="text-h5 dense paragraph mt-2"
           v-html="
             searchQuery.length
               ? highlightAndTruncate(300, item.name, searchQuery.split(' '))

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/stores/root.d.ts

@@ -37,6 +37,7 @@ export declare const useRootStore: import("pinia").StoreDefinition<"rootStore",
     loadRouteQuery(type: string): void;
     setFiltersCount(type: string): void;
     updateRouteQuery(type: string): void;
+    setModifier(type: string, modifier?: string): void;
     resetState(type: string, lang?: string): void;
     updateSort({ type, sortKey }: {
         type: string;

package/dist/runtime/stores/root.js

@@ -113,12 +113,19 @@ export const useRootStore = defineStore("rootStore", {
       };
       router.replace({ query: routeQuery });
     },
+    setModifier(type, modifier) {
+      const { $stores } = useNuxtApp();
+      if ($stores[type]) {
+        $stores[type].modifier = modifier;
+      }
+    },
     resetState(type, lang = "en") {
       const { $stores, $models } = useNuxtApp();
       const model = structuredClone($models[type]);
       $stores[type].filters = model?.filters;
       $stores[type].search = "";
       $stores[type].page = 1;
+      $stores[type].modifier = void 0;
       $stores[type].sortKey = null;
     },
     updateSort({ type, sortKey }) {

package/dist/runtime/translations/en.json

@@ -234,7 +234,7 @@
         "type": {
           "label": "Type",
           "INITIATIVE": "Initiative",
-          "PROJECTS": "Project",
+          "PROJECT": "Project",
           "TOOL": "Tool"
         }
       },

package/dist/runtime/translations/fr.json

@@ -224,7 +224,7 @@
         "type": {
           "label": "Type",
           "INITIATIVE": "Initiative",
-          "PROJECTS": "Projet",
+          "PROJECT": "Projet",
           "TOOL": "Outil"
         }
       },

package/package.json

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