@paris-ias/list 1.0.111 → 1.0.113

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

@@ -0,0 +1,60 @@
+<template>
+  <v-row
+    v-ripple
+    no-gutters
+    class="cursor-pointer highlight-on-hover"
+    @click="
+      $router.push(
+        localePath({
+          name: 'people-slug',
+          params: { slug: item.slug },
+        }),
+      )
+    "
+  >
+    <v-col v-if="mdAndUp" align-self="center" cols="1">
+      <MiscAtomsImageContainer
+        cover
+        :loading="$stores.people.loading"
+        :src="item.image.url ? item.image : '/default.png'"
+        :ratio="1 / 1"
+        :name="item.lastname + ' ' + item.firstname"
+        :slug="item.slug"
+        link="people-slug"
+        width="80px"
+      />
+    </v-col>
+    <v-col align-self="center" class="text-h6 dense pl-2">
+      <v-skeleton-loader v-if="rootStore.loading" type="heading" />
+      <div v-else class="text-h5">
+        {{ item.firstname + " " + item.lastname }}
+      </div>
+      <div class="mt-2 text-body-2 font-weight-light">
+        {{ item.groups.vintage ? item.groups.vintage[0].theme : "" }}
+      </div>
+    </v-col>
+    <v-col align-self="center" cols="auto">
+      <PeopleGroupBadges :item="item" />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { useRootStore } from "../../stores/root";
+import { useNuxtApp, useLocalePath } from "#imports";
+import { useDisplay } from "vuetify";
+const { mdAndUp } = useDisplay();
+const { $stores } = useNuxtApp();
+const localePath = useLocalePath();
+const rootStore = useRootStore();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    {{ item.name }}
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+});
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <v-sheet
+    :to="
+      localePath({
+        name: 'people-slug',
+        params: { slug: item.slug },
+      })
+    "
+  >
+    <v-row>
+      <v-col v-if="lgAndUp" cols="3">
+        <MiscAtomsImageContainer
+          cover
+          :loading="rootStore.loading"
+          :src="item.image"
+          :ratio="1 / 1"
+          :link="item.firstname + item.lastname"
+          :name="people - slug"
+        />
+      </v-col>
+      <v-col cols="12" lg="9">
+        <v-skeleton-loader v-if="rootStore.loading" type="heading" />
+        <template v-else>
+          <div class="text-h6">
+            {{ item.firstname + " " + item.lastname }}
+          </div>
+        </template>
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../stores/root";
+import { useLocalePath } from "#imports";
+const localePath = useLocalePath();
+const rootStore = useRootStore();
+const { lgAndUp } = useDisplay();
+const props = defineProps({ item: { type: Object, required: true } });
+</script>

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

@@ -0,0 +1,93 @@
+<template>
+  <v-divider v-if="index > 0" />
+  <v-row
+    class="my-6 ml-md-1 px-3 px-md-0 highlight-on-hover"
+    @click="
+      $router.push(
+        localePath({
+          name: 'people-slug',
+          params: { slug: item.slug },
+        })
+      )
+    "
+  >
+    <v-col v-if="mdAndUp" cols="12" md="3">
+      <MiscAtomsImageContainer
+        cover
+        :loading="$stores.people.loading"
+        :src="item.image.url ? item.image : '/default.png'"
+        :ratio="1 / 1"
+        :name="item.lastname + ' ' + item.firstname"
+        :slug="item.slug"
+        link="people-slug"
+      />
+    </v-col>
+
+    <v-col cols="12" md="8">
+      <v-skeleton-loader
+        v-if="$stores.people.loading"
+        :type="
+          [
+            'heading, subtitle, text@5',
+            'heading, subtitle, text@5',
+            'heading, subtitle, text@3',
+            'heading, subtitle, text@6',
+            'heading, subtitle, text@9',
+            'heading, subtitle, text@9',
+          ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+        "
+      />
+
+      <div v-else class="ml-md-8">
+        <NuxtLink
+          :to="
+            localePath({
+              name: 'people-slug',
+              params: { slug: item.slug },
+            })
+          "
+          class="text-wrap text-h5 text-md-h4 text-black"
+        >
+          {{ item.firstname + " " + item.lastname }}
+        </NuxtLink>
+        <MiscAtomsSocials v-if="item.socials" :socials="item.socials" />
+        <PeopleGroupBadges :item="item" />
+        <div
+          v-if="item.biography && item.biography.length > 0"
+          class="text-wrap clamped-text text-black"
+          :style="'-webkit-line-clamp:' + lineClamp"
+        >
+          <MDC :value="item.biography" />
+        </div>
+
+        <div v-else class="text-body-2">
+          {{ $t("no-biography") }}
+        </div>
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useLocalePath, computed } from "#imports";
+const { name, mdAndUp } = useDisplay();
+const localePath = useLocalePath();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+const lineClamp = computed(() => {
+  let base = [5, 6, 3, 6, 8, 10][["xs", "sm", "md", "lg", "xl", "xxl"].indexOf(name.value || "md")];
+  if (props.item?.socials && Object.keys(props.item.socials).length > 0) {
+    base = base - [0, 0, 1, 1, 1, 2][["xs", "sm", "md", "lg", "xl", "xxl"].indexOf(name.value || "md")];
+  }
+  return base;
+});
+</script>

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

@@ -0,0 +1,172 @@
+<template>
+  <v-row justify="center">
+    <v-col cols="12" sm="11" md="8" lg="8" xl="6">
+      <v-row no-gutters class="justify-center">
+        <v-col cols="12" sm="10" md="6" class="text-center">
+          <!--   PEOPLE IMAGE -->
+          <MiscAtomsImageContainer
+            v-if="mdAndUp && item && item.image"
+            cover
+            :loading="loading"
+            :src="item.image"
+            :ratio="1 / 1"
+            :width="
+              [200, 250, 250, 300][
+                ['md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+              ]
+            "
+          />
+        </v-col>
+        <v-col cols="12" class="text-center">
+          <!-- FIRSTNAME LASTNAME -->
+          <v-skeleton-loader
+            v-if="loading"
+            class="mx-auto"
+            :max-width="
+              ['300', '400', '340', '400', '600', '600'][
+                ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+              ]
+            "
+            :type="
+              [
+                'heading@2, ossein, avatar@4, ossein, chip@3',
+                'heading, ossein, avatar@6, ossein, chip@4',
+                'heading, ossein, avatar@5, ossein, chip@3',
+                'heading, ossein, avatar@6, ossein, chip@4',
+                'heading, ossein, avatar@9, ossein, chip@6',
+                'heading, ossein, avatar@9, ossein, chip@6',
+              ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+            "
+          />
+
+          <template v-else>
+            <div
+              v-if="item && item.firstname && item.lastname"
+              class="my-8 text-h3 align-self-center text-wrap"
+            >
+              {{ item.firstname + " " + item.lastname
+              }}<!--  TODO : call a composable to format people names (multiple, initials, capped & al. ) -->
+            </div>
+            <!-- SOCIALS -->
+            <div class="text-center">
+              <MiscAtomsSocials
+                v-if="item && item.socials"
+                :socials="item.socials"
+              />
+            </div>
+            <!-- GROUPS -->
+            <div class="mt-6 align-self-center">
+              <PeopleGroupBadges v-if="item && item.groups" :item="item" />
+            </div>
+          </template>
+        </v-col>
+      </v-row>
+
+      <!-- DIVIDERS -->
+      <v-responsive class="mx-auto my-6" width="120">
+        <v-divider class="mb-1" />
+        <v-divider />
+      </v-responsive>
+
+      <div class="text-overline mt-6">
+        <v-skeleton-loader v-if="loading" width="200" type="heading" />
+        <div v-else>
+          {{ $t("biography") }}
+        </div>
+      </div>
+
+      <v-skeleton-loader
+        v-if="loading"
+        :type="
+          ['text@16', 'text@16', 'text@16', 'text@12', 'text@12', 'text@12'][
+            ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+          ]
+        "
+      />
+      <template v-else class="my-6 flex-wrap">
+        <MDC
+          v-if="item.biography && item.biography.length > 0"
+          :value="item.biography"
+        />
+        <div v-else class="text-body-2">
+          {{ $t("no-biography") }}
+        </div>
+      </template>
+
+      <!-- DIVIDERS -->
+      <v-responsive class="mx-auto my-9" width="120">
+        <v-divider class="mb-1" />
+        <v-divider />
+      </v-responsive>
+
+      <!-- POSITIONS AND AFFILIATIONS -->
+      <div class="text-overline mt-6">
+        <v-skeleton-loader v-if="loading" width="200" type="heading" />
+        <div v-else>
+          {{ $t("positions-and-affiliations") }}
+        </div>
+      </div>
+
+      <!-- BIOGRAPHY -->
+      <v-skeleton-loader v-if="loading" type="subtitle, text@2" width="300" />
+
+      <v-card
+        v-for="record in item.affiliations"
+        v-else-if="item && item.affiliations"
+        :key="record.affiliation"
+        flat
+      >
+        <v-card-item class="px-0">
+          <v-card-title class="text-wrap">
+            {{ record.affiliation.name }}
+          </v-card-title>
+          <div
+            v-for="(position, index) in record.positions"
+            :key="position.role + index"
+            class="text-body-2"
+          >
+            <template v-if="position.role === 'Fellow'">
+              <span class="text-caption text-uppercase">
+                {{ $t("fellow") }}
+              </span>
+            </template>
+            <template v-else>
+              {{ position.role + " " + (position.department || "") }}
+            </template>
+            <span v-if="position.start" class="">
+              <!--  TODO FIx dates display -->
+              -
+              {{
+                $t("from {0} to {1}", [
+                  formatDate(position.start, locale),
+                  (position.stop && formatDate(position.stop, locale)) ||
+                    $t("present"),
+                ])
+              }}
+            </span>
+          </div>
+        </v-card-item>
+      </v-card>
+    </v-col>
+  </v-row>
+
+  <!-- DIVIDERS -->
+  <v-responsive class="mx-auto my-9" width="120">
+    <v-divider class="mb-1" />
+    <v-divider />
+  </v-responsive>
+  <MiscMoleculesRelated v-if="item && item.related" :related="item.related" />
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useNuxtApp, useI18n } from "#imports";
+const { locale } = useI18n();
+const { $stores } = useNuxtApp();
+const { name, mdAndUp } = useDisplay();
+const props = defineProps({
+  item: { type: Object, required: true },
+  loading: { type: Boolean, default: false }
+});
+$stores.people.loading = false;
+</script>

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

@@ -0,0 +1,77 @@
+<template>
+  <v-row
+    v-ripple
+    no-gutters
+    class="cursor-pointer highlight-on-hover"
+    @click="
+      $router.push(
+        localePath({
+          name: 'activities-projects-slug',
+          params: { slug: item.slug[locale] },
+        }),
+      )
+    "
+  >
+    <v-col v-if="mdAndUp" align-self="center" cols="1">
+      <MiscAtomsImageContainer
+        cover
+        :loading="$stores.projects.loading"
+        :src="item.image.url ? item.image : '/default.png'"
+        :ratio="1 / 1"
+        :name="item.name"
+        :slug="item.slug[locale]"
+        link="activities-projects-slug"
+        width="50"
+      />
+    </v-col>
+    <v-col align-self="center" class="text-h5 dense pl-2">
+      <v-skeleton-loader v-if="rootStore.loading" type="heading" />
+      <template v-else>
+        {{ item.name }}
+      </template>
+    </v-col>
+
+    <v-col align-self="center" cols="5" class="dense">
+      <v-skeleton-loader
+        v-if="rootStore.loading"
+        :type="
+          ['chip', 'chip@2', 'chip@3', 'chip@4', 'chip@4', 'chip@4'][
+            ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+          ]
+        "
+      />
+
+      <template v-else>
+        <MiscMoleculesChipContainer :items="item.tags" size="small" />
+      </template>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../stores/root";
+import { computed, useNuxtApp, useI18n, useLocalePath } from "#imports";
+const { $stores } = useNuxtApp();
+const { name, mdAndUp } = useDisplay();
+const localePath = useLocalePath();
+const { locale } = useI18n();
+const rootStore = useRootStore();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+const eventCategory = computed(() => {
+  if (props.item.category) {
+    return "list.filters.news.category." + props.item.category;
+  } else {
+    return "list.filters.news.category.others";
+  }
+});
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+  <div>{{ item.name }}</div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+});
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <v-sheet
+    :to="
+      localePath({
+        name: 'activities-projects-slug',
+        params: { slug: item.name },
+      })
+    "
+  >
+    <v-row>
+      <v-col v-if="lgAndUp" cols="3">
+        <MiscAtomsImageContainer
+          contain
+          :src="item.image"
+          :loading="rootStore.loading"
+          :ratio="1 / 1"
+          :link="item.name"
+          name="activities-projects-slug"
+        />
+      </v-col>
+      <v-col cols="12" lg="9">
+        <v-skeleton-loader v-if="rootStore.loading" type="heading, text@3" />
+        <template v-else>
+          <div class="text-h6">
+            {{ item.name }}
+          </div>
+          <div class="text-body-1">
+            {{ item.shortDescription }}
+          </div>
+        </template>
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../stores/root";
+import { useLocalePath } from "#imports";
+const localePath = useLocalePath();
+const rootStore = useRootStore();
+const { lgAndUp } = useDisplay();
+const props = defineProps({ item: { type: Object, required: true } });
+</script>

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

@@ -0,0 +1,103 @@
+<template>
+  <v-row class="highlight-on-hover pa-3">
+    <v-col v-ripple cols="12" sm="6" md="4" lg="3" xl="2">
+      <MiscAtomsImageContainer
+        contain
+        :src="item.image"
+        :loading="$stores.projects.loading"
+        :ratio="1 / 1"
+        :title="item.name"
+        link="activities-projects-slug"
+        :slug="item.slug[locale]"
+      />
+    </v-col>
+    <v-col
+      v-ripple
+      cols="12"
+      sm="6"
+      md="8"
+      lg="9"
+      xl="10"
+      class="px-6 cursor-pointer"
+      @click="
+        router.push(localePath('/activities/projects/' + item.slug[locale]))
+      "
+    >
+      <v-skeleton-loader
+        v-if="rootStore.loading"
+        type="heading,ossein,text@8,ossein,button,button"
+      />
+
+      <template v-else>
+        <div class="text-h5 text-sm-h3 text-md-h4 text-md-h4 my-6">
+          {{ item.name }}
+        </div>
+        <div
+          v-if="item.summary"
+          class="mt-n3 text-wrap clamped-text"
+          :style="
+            '-webkit-line-clamp:' +
+            [5, 5, 4, 8, 10][
+              ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+            ]
+          "
+        >
+          <MDC :value="item.summary" />
+        </div>
+
+        <v-btn
+          class="mt-4"
+          variant="outlined"
+          tile
+          :to="
+            localePath({
+              name: 'project-slug',
+              params: { slug: item.slug[locale] },
+            })
+          "
+          :size="
+            ['small', 'small', 'small', 'default', 'default', 'large'][
+              ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+            ]
+          "
+        >
+          {{ $t("read-more") }}
+        </v-btn>
+        <v-btn
+          variant="outlined"
+          tile
+          class="mt-4 ml-4"
+          prepend-icon="mdi-web"
+          :size="
+            ['small', 'small', 'small', 'default', 'default', 'large'][
+              ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+            ]
+          "
+        >
+          {{ $t("visit-the-project-website") }}
+        </v-btn>
+      </template>
+    </v-col>
+  </v-row>
+  <v-divider />
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../stores/root";
+import { useRouter, useLocalePath, useI18n } from "#imports";
+const { locale } = useI18n();
+const { name } = useDisplay();
+const rootStore = useRootStore();
+const router = useRouter();
+const localePath = useLocalePath();
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+    required: true
+  }
+});
+</script>