@paris-ias/list 1.0.3 → 1.0.5

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

@@ -0,0 +1,29 @@
+<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>
+
+<style></style>

package/src/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/src/runtime/components/news/DenseItem.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-row
+    v-ripple
+    class="cursor-pointer highlight-on-hover"
+    @click="$router.push(localePath('/news/' + item.slug[locale]))"
+  >
+    <v-col align-self="center" cols="7" class="text-h6 dense">
+      <v-skeleton-loader
+        v-if="rootStore.loading || $stores[type].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 || $stores[type].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"
+const { $stores } = useNuxtApp()
+const { name } = 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/src/runtime/components/news/ExpandedItem.vue

@@ -0,0 +1,153 @@
+<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>
+      <MDC
+        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')
+          ]
+        "
+        :value="item.summary"
+      />
+
+      <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"
+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 lang="scss" scoped>
+.expanded-item {
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+
+  &.expanded {
+    .v-col:first-child {
+      flex: 0 0 33.333%;
+      max-width: 33.333%;
+    }
+
+    .v-col:last-child {
+      flex: 0 0 66.666%;
+      max-width: 66.666%;
+    }
+  }
+
+  &.collapsed {
+    .v-col:first-child {
+      flex: 0 0 16.666%;
+      max-width: 16.666%;
+    }
+
+    .v-col:last-child {
+      flex: 0 0 83.333%;
+      max-width: 83.333%;
+    }
+  }
+
+  .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/src/runtime/components/news/Header.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-row> <v-col cols="12" /> </v-row>
+</template>
+<script setup lang="ts">
+// import { useDisplay } from "vuetify"
+// const { smAndUp } = useDisplay()
+// const localePath = useLocalePath()
+</script>
+<style lang="scss"></style>

package/src/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"
+const localePath = useLocalePath()
+const rootStore = useRootStore()
+const { lgAndUp } = useDisplay()
+
+const props = defineProps({ item: { type: Object, required: true } })
+</script>

package/src/runtime/components/news/RowsItem.vue

@@ -0,0 +1,160 @@
+<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">
+          <MDC
+            v-if="item.summary"
+            :value="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')
+              ]
+            "
+          />
+          <v-btn
+            class="mt-4"
+            variant="outlined"
+            tile
+            size="small"
+            :to="
+              localePath({
+                name: '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>
+        <MDC
+          v-if="item.summary"
+          :value="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')
+            ]
+          "
+        />
+        <p v-else />
+        <v-btn
+          class="mt-4"
+          variant="outlined"
+          tile
+          :to="
+            localePath({
+              name: '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 { useRootStore } from "../../stores/root"
+import { useDisplay } from "vuetify"
+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,
+  },
+})
+</script>
+
+<style></style>

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

@@ -0,0 +1,190 @@
+<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="renderedDescription && mdAndUp"
+          class="d-flex text-wrap text-h6 text-black mt-3"
+        >
+          <MDC
+            v-if="item.description"
+            :value="item.description"
+            class="mt-md-n2 mx-4 mx-sm-8 mx-md-0"
+          />
+        </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')
+          ]
+        "
+      />
+      <MDC
+        v-if="item.description"
+        :value="item.description"
+        class="mt-md-n2 mx-4 mx-sm-8 mx-md-0"
+      />
+    </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"
+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 = new Date()
+/*const academicYear = ref(
+   today.getMonth() > 6
+    ? today.getFullYear() + "-" + (today.getFullYear() + 1)
+    : today.getFullYear() - 1 + "-" + today.getFullYear()
+)
+const { data: action } = await useAsyncData("actions", () =>
+  queryContent("/actions/" + locale.value)
+    .limit(1)
+    .find()
+) */
+$stores.news.loading = false
+</script>