@paris-ias/list 1.0.111 → 1.0.113

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

@@ -0,0 +1,27 @@
+<template>
+  <div class="pa-6 border-thin w-100">
+    <div class="text-overline">{{ $t("related." + type) }}</div>
+    <component
+      :is="capitalize(type) + 'RelatedItem'"
+      v-for="item in items"
+      :key="item.id || item.slug || item.name"
+      :item="item"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useRootStore } from "../../../stores/root";
+import { capitalize } from "../../../composables/useUtils";
+const rootStore = useRootStore();
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  items: {
+    type: Array,
+    required: true
+  }
+});
+</script>

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

@@ -0,0 +1,26 @@
+<template>
+  <v-card class="mx-auto" variant="flat">
+    <v-row>
+      <v-col cols="12" md="2">
+        <MiscAtomsImageContainer
+          cover
+          :loading="rootStore.loading"
+          :src="item.image"
+          :ratio="1 / 1"
+        />
+      </v-col>
+      <v-col cols="12" md="10">
+        <div class="text-body-1">{{ item.name }}</div>
+        <div>
+          <span class="text-primary text-body-2"> {{ item.name }}</span> &mdash;
+          <span class="text-body-2"> {{ item.subtitle }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script setup>
+import { useRootStore } from "../../../stores/root";
+const rootStore = useRootStore();
+</script>

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

@@ -0,0 +1,73 @@
+<template>
+  <v-row
+    v-ripple
+    no-gutters
+    class="cursor-pointer highlight-on-hover"
+    @click="$router.push(localePath('/activities/news/' + item.slug[locale]))"
+  >
+    <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-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">
+      <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>
+        <v-chip class="ma-2" style="background-color: white; color: black">
+          {{ $t(eventCategory) }}
+        </v-chip>
+        <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/news/ExpandedItem.vue

@@ -0,0 +1,145 @@
+<template>
+  <v-row
+    v-ripple
+    class="expanded-item my-6 cursor-pointer"
+    :class="expanded ? 'expanded' : 'collapsed'"
+    @click="expanded = !expanded"
+  >
+    <v-col
+      cols="12"
+      :md="expanded ? '4' : '2'"
+      class="animated-col"
+      @click.prevent="
+        expanded
+          ? router.push(
+              localePath({
+                name: 'news-slug',
+                params: { slug: item.slug[locale] },
+              })
+            )
+          : null
+      "
+    >
+      <MiscAtomsImageContainer
+        cover
+        :loading="rootStore.loading"
+        :src="item.image"
+        :ratio="1 / 1"
+      />
+    </v-col>
+    <v-col class="text-h5" cols="12" :md="expanded ? '8' : '9'">
+      <div
+        :class="expanded ? 'text-h4' : 'text-h5'"
+        @click.prevent="
+          expanded
+            ? router.push(
+                localePath({
+                  name: 'news-slug',
+                  params: { slug: item.slug[locale] },
+                })
+              )
+            : null
+        "
+      >
+        <MDC v-if="item.name" :value="item.name" />
+      </div>
+      <v-expand-transition v-if="lgAndUp">
+        <div v-show="expanded">
+          <MiscMoleculesChipContainer :items="item.tags" />
+        </div>
+      </v-expand-transition>
+      <div
+        v-if="item.summary"
+        class="text-body-1 text-wrap clamped-text"
+        :style="
+          '-webkit-line-clamp:' +
+          (expanded ? [5, 5, 3, 6, 9, 11] : [5, 5, 2, 4, 6, 8])[
+            ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+          ]
+        "
+      >
+        <MDC :value="item.summary" />
+      </div>
+      <v-expand-transition>
+        <v-btn
+          v-show="expanded"
+          class="mt-4"
+          variant="outlined"
+          tile
+          @click.prevent="
+            router.push(
+              localePath({
+                name: 'news-slug',
+                params: { slug: item.slug[locale] },
+              })
+            )
+          "
+        >
+          {{ $t("read-more") }}
+        </v-btn>
+      </v-expand-transition>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../stores/root";
+import { useRouter, useI18n, useLocalePath } from "#imports";
+const localePath = useLocalePath();
+const router = useRouter();
+const rootStore = useRootStore();
+const expanded = ref(false);
+const { name, lgAndUp } = useDisplay();
+const { locale } = useI18n();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+.expanded-item {
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+}
+.expanded-item.expanded .v-col:first-child {
+  flex: 0 0 33.333%;
+  max-width: 33.333%;
+}
+.expanded-item.expanded .v-col:last-child {
+  flex: 0 0 66.666%;
+  max-width: 66.666%;
+}
+.expanded-item.collapsed .v-col:first-child {
+  flex: 0 0 16.666%;
+  max-width: 16.666%;
+}
+.expanded-item.collapsed .v-col:last-child {
+  flex: 0 0 83.333%;
+  max-width: 83.333%;
+}
+.expanded-item .animated-col {
+  transition: flex 0.3s ease-in-out, max-width 0.3s ease-in-out;
+}
+
+.fade-in {
+  animation: fadeIn 1s ease-in-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

package/dist/runtime/runtime/components/news/Header.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-row> <v-col cols="12" /> header</v-row>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss"></style>

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

@@ -0,0 +1,44 @@
+<template>
+  <v-sheet
+    :to="
+      localePath({
+        name: 'news-slug',
+        params: { slug: item.name },
+      })
+    "
+  >
+    <v-row>
+      <v-col v-if="lgAndUp" cols="3">
+        <MiscAtomsImageContainer
+          cover
+          :src="item.image"
+          :loading="rootStore.loading"
+          :ratio="1 / 1"
+          :link="item.name"
+          name="news-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.description }}
+          </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/news/RowsItem.vue

@@ -0,0 +1,182 @@
+<template>
+  <v-divider v-if="index > 0" />
+  <v-row class="my-4 mx-2 mx-md-0 highlight-on-hover">
+    <v-col v-if="mdAndUp" cols="12" md="4" lg="3" class="pr-md-0">
+      <MiscAtomsImageContainer
+        cover
+        :src="item.image.url ? item.image : '/default.png'"
+        :ratio="1 / 1"
+        :loading="$stores.news.loading"
+        link="news-slug"
+        :slug="item._path && item._path.split('/').pop()"
+      >
+        <v-chip class="ma-2" style="background-color: white; color: black">
+          {{ $t(eventCategory) }}
+        </v-chip>
+      </MiscAtomsImageContainer>
+    </v-col>
+    <v-col cols="12" md="8" lg="4" class="pl-md-6">
+      <v-skeleton-loader
+        v-if="rootStore.loading || $stores.news.loading"
+        :type="
+          [
+            'heading, subtitle, text@5, ossein, button',
+            'heading, subtitle, text@5, ossein, button',
+            'heading, subtitle, text@3, ossein, button',
+            'heading@2, subtitle',
+            'heading@2, subtitle',
+            'heading@2, subtitle',
+          ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+        "
+      />
+
+      <template v-else>
+        <template v-if="smAndDown && item.category">
+          <v-chip class="mb-4">
+            {{ $t("list.filters.news.category." + item.category) }}
+          </v-chip>
+          <br />
+        </template>
+
+        <NuxtLink
+          :to="
+            localePath({
+              name: 'news-slug',
+              params: { slug: item.slug[locale] },
+            })
+          "
+          class="text-wrap text-h5 text-md-h4 text-black"
+        >
+          {{ item.name }}
+        </NuxtLink>
+        <div class="tex-overline mt-3">
+          {{ formatDateValue(item.date, locale) }}
+        </div>
+        <MiscMoleculesChipContainer
+          v-if="item.tags && item.tags.length"
+          :items="item.tags"
+          class="mt-4"
+        />
+        <template v-if="mdAndDown">
+          <div
+            v-if="item.summary"
+            class="text-body-1 text-wrap clamped-text"
+            :style="
+              '-webkit-line-clamp:' +
+              [5, 5, 3, 6, 10, 10][
+                ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+              ]
+            "
+          >
+            <MDC :value="processedSummary" />
+          </div>
+          <v-btn
+            class="mt-4"
+            variant="outlined"
+            tile
+            size="small"
+            :to="
+              localePath({
+                name: 'activities-news-slug',
+                params: { slug: item.slug[locale] },
+              })
+            "
+          >
+            {{ $t("read-more") }}
+          </v-btn>
+        </template>
+      </template>
+    </v-col>
+
+    <v-col v-if="lgAndUp" cols="12" lg="5">
+      <v-skeleton-loader
+        v-if="rootStore.loading || $stores.news.loading"
+        type="text@8, ossein, button"
+      />
+
+      <template v-else>
+        <div
+          v-if="item.summary"
+          class="text-body-1 text-wrap clamped-text"
+          :style="
+            '-webkit-line-clamp:' +
+            [5, 5, 4, 7, 8, 10][
+              ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+            ]
+          "
+        >
+          <MDC :value="processedSummary" />
+        </div>
+        <br />
+        <v-btn
+          class="mt-4"
+          variant="outlined"
+          tile
+          :to="
+            localePath({
+              name: 'activities-news-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>
+      </template>
+    </v-col>
+  </v-row>
+  <!-- <MiscMoleculesSearchItem></MiscMoleculesSearchItem> -->
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import { useRootStore } from "../../stores/root";
+import {
+  useNuxtApp,
+  useI18n,
+  useLocalePath,
+  computed,
+  useRouter
+} from "#imports";
+const { $stores } = useNuxtApp();
+const { locale } = useI18n();
+const localePath = useLocalePath();
+const rootStore = useRootStore();
+const { name, smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();
+const eventCategory = computed(() => {
+  if (props.item.category) {
+    return "list.filters.news.category." + props.item.category;
+  } else {
+    return "list.filters.news.category.others";
+  }
+});
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    required: true
+  }
+});
+const processedSummary = computed(() => {
+  const raw = props.item.summary || "";
+  const slugPath = localePath({
+    name: "news-slug",
+    params: { slug: props.item.slug[locale.value] }
+  });
+  return replaceMarkdownLinksWithSlug(raw, slugPath);
+});
+function replaceMarkdownLinksWithSlug(markdownText, slugPath) {
+  const regex = /\[([^\]]+)\]\(([^)]+)\)/g;
+  return markdownText.replace(regex, (_match, text, url) => {
+    const encodedUrl = encodeURIComponent(url);
+    return `[${text}](${slugPath}?redirect=${encodedUrl})`;
+  });
+}
+</script>

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

@@ -0,0 +1,174 @@
+<template>
+  <v-row>
+    <v-col
+      v-if="smAndDown"
+      cols="12"
+      class="text-wrap text-h4 text-black mx-sm-6"
+    >
+      <v-skeleton-loader
+        v-if="loading"
+        :type="['heading', 'heading'][['xs', 'sm'].indexOf(name || 'sm')]"
+      />
+      <template v-else>
+        <v-chip v-if="item && item.category && item.name" class="mb-4">
+          {{ $t("list.filters.news.category." + item.category) }}
+        </v-chip>
+        <br />
+        {{ item.name }}
+      </template>
+    </v-col>
+    <v-col cols="12" md="4" class="pb-0">
+      <v-skeleton-loader v-if="loading" height="100%" type="image" />
+
+      <div v-else class="mx-sm-6">
+        <MiscAtomsImageContainer
+          v-if="item && item.image"
+          cover
+          :loading="loading"
+          :src="item.image.url ? item.image : '/default.png'"
+          :ratio="1 / 1"
+        />
+      </div>
+    </v-col>
+
+    <v-col cols="12" md="8" class="pl-0 pb-0 d-flex flex-column justify-md-end">
+      <v-skeleton-loader
+        v-if="loading"
+        :type="
+          [
+            'text, chip@4',
+            'text, chip@4',
+            'heading, text',
+            'heading, text',
+            'heading, text',
+            'heading',
+          ][['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')]
+        "
+      />
+
+      <div v-else class="mx-4 mx-md-0 justify-md-end">
+        <v-chip v-if="item && item.category && mdAndUp" class="mb-4">
+          {{ $t("list.filters.news.category." + item.category) }}
+        </v-chip>
+        <div
+          v-if="item && item.name && mdAndUp"
+          class="d-flex text-wrap text-h4 text-black"
+        >
+          {{ item.name }}
+        </div>
+
+        <div
+          v-if="item.description && mdAndUp"
+          class="mt-md-n2 mx-4 mx-sm-8 mx-md-0 d-flex text-wrap text-h6 text-black mt-3"
+        >
+          <MDC v-if="item.description" :value="item.description" class="" />
+        </div>
+        <div
+          class="d-flex flex-column flex-md-row align-md-center mt-6 mx-sm-4 mx-md-6"
+        >
+          <div class="ml-md-n6">
+            <div
+              v-if="item && item.authors && item.authors[0]"
+              class="text-body-2 text-lg-body-1 text-black"
+            >
+              <!--    TODO use a proper & conditional formatting of names (depending on number of authors) -->
+              {{
+                $t("by-author", [
+                  item.authors[0].firstname + " " + item.authors[0].firstname,
+                ])
+              }}
+            </div>
+            <div v-if="smAndDown" class="">
+              <MiscMoleculesChipContainer
+                v-if="item && item.tags"
+                :items="item.tags"
+                class="mt-4"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </v-col>
+  </v-row>
+
+  <v-row class="mt-12">
+    <v-col cols="12" md="4" :order="mdAndUp ? 'first' : 'last'" class="pt-0">
+      <v-skeleton-loader
+        v-if="loading"
+        :type="
+          ['chip@2', 'chip@3', 'chip@4', 'chip@5'][
+            ['md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+          ]
+        "
+      />
+      <template v-else>
+        <div v-if="mdAndUp" class="mt-2 mx-sm-6">
+          <MiscMoleculesChipContainer
+            v-if="item && item.tags"
+            :items="item.tags"
+            class="mt-4"
+          />
+        </div>
+      </template>
+    </v-col>
+    <v-col cols="12" md="8" class="pl-0 pt-0">
+      <v-skeleton-loader
+        v-if="loading"
+        :type="
+          ['text@50', 'text@50', 'text@50', 'text@50', 'text@50', 'text@50'][
+            ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+          ]
+        "
+      />
+      <div v-if="item.description" class="mt-md-n2 mx-4 mx-sm-8 mx-md-0">
+        <MDC :value="item.description" />
+      </div>
+    </v-col>
+  </v-row>
+
+  <!-- DIVIDERS -->
+  <v-responsive class="mx-auto my-9" width="120">
+    <v-divider class="mb-1" />
+    <v-divider />
+  </v-responsive>
+  <MiscAtomsSlidingCarousel
+    v-if="item && item.gallery && item.gallery.length"
+    ref="MiscAtomsImage"
+    key="MiscAtomsImage"
+    :items="item.gallery"
+    type="MiscAtomsImage"
+    :loading="false"
+    :more="false"
+  >
+    <div :class="mdAndUp ? 'text-h5' : 'text-h6'">
+      {{ $t("gallery") }}
+    </div>
+  </MiscAtomsSlidingCarousel>
+  <!-- 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 } from "#imports";
+const { $stores } = useNuxtApp();
+const { name, mdAndUp, smAndDown } = useDisplay();
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+});
+const today = /* @__PURE__ */ new Date();
+$stores.news.loading = false;
+</script>