@paris-ias/list 1.0.112 → 1.0.113

package/dist/runtime/runtime/components/list/views/Expanded.vue

@@ -0,0 +1,10 @@
+<template>
+  <section>
+    <slot>
+      <!-- fallback content -->
+      Expanded view
+    </slot>
+  </section>
+</template>
+
+<script setup lang="ts"></script>

package/dist/runtime/runtime/components/list/views/Grid.vue

@@ -0,0 +1,13 @@
+<template>
+  GRID DISPLAY
+  <template v-for="(item, index) in items" :key="index">
+    <slot name="data" :item="item" />
+  </template>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: [Object],
+  type: String
+});
+</script>

package/dist/runtime/runtime/components/list/views/Rows.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-row>
+    <slot>
+      <!-- fallback content -->
+      Rows view
+    </slot>
+  </v-row>
+</template>
+
+<script setup>
+
+</script>

package/dist/runtime/runtime/components/list/views/Slider.vue

@@ -0,0 +1,147 @@
+<template>
+  <v-row class="mb-9">
+    <v-col class="justify-center">
+      <slot />
+    </v-col>
+    <v-col cols="3">
+      <!--     <div class="text-h6 font-weight-black d-flex align-center mx-6">
+                {{ model + 1 }}/{{ items.length || 0 }}
+              </div> -->
+      <v-btn-toggle>
+        <v-btn
+          tile
+          variant="outlined"
+          flat
+          :disabled="model === 0"
+          icon="mdi-chevron-left"
+          class="pseudo-carousel-prev"
+        />
+        <v-btn
+          tile
+          variant="outlined"
+          :disabled="model === items.length - 1"
+          flat
+          icon="mdi-chevron-right"
+          class="pseudo-carousel-next"
+          @click="model++"
+        />
+      </v-btn-toggle>
+    </v-col>
+  </v-row>
+
+  <Swiper
+    ref="swiper"
+    style="overflow-x: visible"
+    effect="slide"
+    :modules="[
+      SwiperAutoplay,
+      SwiperA11y,
+      SwiperPagination,
+      SwiperNavigation,
+      SwiperKeyboard,
+    ]"
+    :breakpoints="swiperBreakpoints"
+    :navigation="{
+      nextEl: '.pseudo-carousel-next',
+      prevEl: '.pseudo-carousel-prev',
+    }"
+    @swiperprogress="onProgress"
+    @swiperslidechange="onSlideChange"
+  >
+    <template v-for="(item, index) in items" v-if="loading"> LOADING </template>
+    <SwiperSlide
+      v-for="(item, index) in items"
+      v-else
+      :key="index + type"
+      :style="'width: ' + computedWidth + 'px'"
+      :width="computedWidth"
+    >
+      <component
+        :is="capitalize(type) + 'SlidingItem'"
+        :key="index + type"
+        :index="index"
+        :item="item"
+        :width="computedWidth"
+        :loading="loading"
+        :dark="dark"
+      />
+    </SwiperSlide>
+  </Swiper>
+  <div v-if="more" class="d-flex justify-end mt-12">
+    <v-btn class="ml-auto" variant="flat">{{ $t(type + ".see-more") }}</v-btn>
+  </div>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+const { locale } = useI18n();
+const { name, mdAndUp } = useDisplay();
+const model = ref(0);
+const swiperBreakpoints = ref({
+  320: {
+    slidesPerView: "auto",
+    spaceBetween: 15
+  },
+  480: {
+    slidesPerView: "auto",
+    spaceBetween: 22
+  },
+  640: {
+    slidesPerView: "auto",
+    spaceBetween: 25
+  },
+  960: {
+    slidesPerView: "auto",
+    spaceBetween: 28
+  },
+  1280: {
+    slidesPerView: "auto",
+    spaceBetween: 31
+  },
+  1920: {
+    slidesPerView: "auto",
+    spaceBetween: 35
+  }
+});
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  },
+  items: { type: Array, required: true },
+  loading: { type: Boolean, default: false },
+  dark: { type: Boolean, default: false },
+  more: { type: Boolean, default: true }
+});
+const spaceBetween = 10;
+const onProgress = (e) => {
+  console.log("e: progress ", e);
+  const [swiper, progress] = e.detail;
+  console.log(progress);
+};
+const onSlideChange = (e) => {
+  console.log("slide changed", e);
+};
+const computedWidth = computed(() => {
+  let modifier = 1;
+  switch (props.type) {
+    case "events":
+      modifier = 1.1;
+      break;
+    case "people":
+      break;
+    case "image":
+      break;
+    default:
+      break;
+  }
+  return [250, 300, 350, 380, 430, 460][["xs", "sm", "md", "lg", "xl", "xxl"].indexOf(name.value || "md")] * modifier;
+});
+onMounted(() => {
+  console.log("Resolved Item", capitalize(props.type) + "SlidingItem");
+});
+</script>
+
+<style scoped>
+.swiper-slide{width:auto}
+</style>

package/dist/runtime/runtime/components/list/views/Table.vue

@@ -0,0 +1,13 @@
+<template>
+  GRID DISPLAY
+  <template v-for="(item, index) in items" :key="index">
+    <slot name="data" :item="item" />
+  </template>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: [Object],
+  type: String
+});
+</script>

package/dist/runtime/runtime/components/mailing/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/mailing/RowsItem.vue

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

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

@@ -0,0 +1,20 @@
+<template>
+  {{ item }}
+</template>
+
+<script setup>
+import { useNuxtApp } from "#imports";
+const { $stores } = useNuxtApp();
+defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+});
+$stores.mailing.loading = false;
+</script>

package/dist/runtime/runtime/components/misc/atoms/DateStamp.vue

@@ -0,0 +1,101 @@
+<template>
+  <v-skeleton-loader
+    v-if="loading"
+    max-width="120px"
+    class="d-flex flex-row flex-md-column align-center align-md-end"
+    :type="
+      ['avatar', 'avatar', 'avatar', 'avatar', 'avatar', 'avatar'][
+        ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+      ]
+    "
+  />
+  <div
+    v-else
+    class="date-stamp d-flex flex-md-column text-md-right align-center align-md-end"
+  >
+    <span class="day"> {{ detailedDateStart.day }}</span>
+    <span class="month-year">
+      {{ detailedDateStart.month }}<br />
+      {{ detailedDateStart.year }}
+    </span>
+    <template v-if="showDateStop && detailedDateStop.day">
+      <span>&ndash;</span>
+      <template v-if="mdAndUp">
+        <span class="month-year"> {{ detailedDateStop.day }}</span>
+        <span class="month-year">
+          {{ detailedDateStop.month }}<br />
+          {{ detailedDateStop.year }}
+        </span>
+      </template>
+
+      <template v-if="smAndDown">
+        <span class="day"> {{ detailedDateStop.day }}</span>
+        <span class="month-year">
+          {{ detailedDateStop.month }}<br />
+          {{ detailedDateStop.year }}
+        </span>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { useDisplay } from "vuetify";
+import {
+  getDetailedFormatedDate,
+  formatDateValue
+} from "../../../composables/useUtils";
+import { computed, useI18n } from "#imports";
+const { smAndDown, mdAndUp, name } = useDisplay();
+const { locale } = useI18n();
+const props = defineProps({
+  dateStart: {
+    type: String
+  },
+  dateStop: {
+    type: String
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+    required: true
+  }
+});
+const detailedDateStart = computed(
+  () => getDetailedFormatedDate(props.dateStart, locale.value)
+);
+const detailedDateStop = computed(
+  () => getDetailedFormatedDate(props.dateStop, locale.value)
+);
+const showDateStop = computed(() => {
+  const dateStartFormatted = formatDateValue(props.dateStart, locale.value);
+  const dateStopFormatted = formatDateValue(props.dateStop, locale.value);
+  return dateStopFormatted > dateStartFormatted;
+});
+</script>
+
+<style scoped>
+.date-stamp {
+  font-family: "Open sans";
+}
+.date-stamp .day {
+  font-size: 2.6rem;
+  line-height: 2.6rem;
+  font-family: "Bodoni Moda", sans-serif;
+}
+.date-stamp .month-year {
+  padding-left: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.2rem;
+}
+.date-stamp .day-stop {
+  font-size: 2rem;
+  line-height: 2rem;
+  font-family: "Bodoni Moda", sans-serif;
+}
+.date-stamp .month-year-stop {
+  padding-left: 0.5rem;
+  font-size: 0.8rem;
+  line-height: 1.2rem;
+}
+</style>

package/dist/runtime/runtime/components/misc/atoms/ImageContainer.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <!--  TODO
+  - add skeleton UI
+  - test lazy-src
+  - validate requested quality
+  - Add conditional overlays slots (top left/right, bottom left/right/center for date, caption, copyright) -->
+
+    <v-skeleton-loader v-if="loading" height="100%" type="image" />
+
+    <template v-else>
+      <nuxt-link
+        v-if="link"
+        v-slot="{ navigate, isActive }"
+        :to="
+          localePath({
+            name: link,
+            params: { slug },
+          })
+        "
+        custom
+      >
+        <div class="overflow-hidden mw-100">
+          <!--  TODO debug why the picture is not displaying/sizing properly -->
+          <v-img
+            v-if="src"
+            :aspect-ratio="ratio"
+            :active="isActive"
+            :class="{ 'img-animation': animate }"
+            :lazy-src="
+              img(computedSrc, {
+                width,
+                quality: 70,
+              })
+            "
+            :src="
+              img(computedSrc, {
+                width,
+                quality: 70,
+              })
+            "
+            :srcset="_srcset.srcset"
+            :sizes="_srcset.sizes"
+            :title="caption"
+            v-bind="$attrs"
+            @click="navigate"
+          >
+            <slot />
+          </v-img></div
+      ></nuxt-link>
+      <div v-else class="overflow-hidden mw-100">
+        <!--  TODO debug why the picture is not displaying/sizing properly -->
+        <v-img
+          v-if="src"
+          :aspect-ratio="ratio"
+          :class="{ 'img-animation': animate }"
+          :lazy-src="
+            img(computedSrc, {
+              width,
+              quality: 70,
+            })
+          "
+          :src="
+            img(computedSrc, {
+              width,
+              quality: 70,
+            })
+          "
+          :srcset="_srcset.srcset"
+          :sizes="_srcset.sizes"
+          :title="caption"
+          v-bind="$attrs"
+        >
+          <slot />
+        </v-img>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, useImage, useLocalePath } from "#imports";
+const localePath = useLocalePath();
+const img = useImage();
+const computedSrc = computed(() => {
+  return typeof props.src === "string" ? props.src : props.src.url;
+});
+const props = defineProps({
+  src: {
+    type: [Object, String],
+    required: false,
+    default: {
+      alt: "default",
+      copyright: "IEA PARIS",
+      url: "/logo_grey.png"
+    }
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+    required: true
+  },
+  width: { type: Number, default: 0 },
+  ratio: { type: Number, required: true, default: 1 },
+  caption: { type: String, default: "" },
+  slug: { type: String, default: "" },
+  link: { type: String, default: "" },
+  animate: { type: Boolean, default: true }
+});
+const _srcset = computed(() => {
+  return img.getSizes(
+    typeof props.src === "string" ? props.src : props.src.url,
+    {
+      sizes: "xs:100vw sm:100vw md:100vw lg:100vw xl:100vw",
+      modifiers: {
+        format: "webp",
+        quality: 70,
+        ...props.width && { width: props.width }
+      }
+    }
+  );
+});
+</script>
+
+<style scoped>
+.img-animation{transition:all .5s ease-in-out;width:100%}.img-animation:hover{transform:scale(1.1)}
+</style>

package/dist/runtime/runtime/components/misc/atoms/ShareMenu.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-menu>
+    <template #activator="{ props: menu }">
+      <v-tooltip location="top">
+        <template #activator="{ props: tooltip }">
+          <v-btn variant="outlined" v-bind="mergeProps(menu, tooltip)">
+            <v-icon>mdi-share-variant</v-icon>
+          </v-btn>
+        </template>
+        <div v-html="$t('share')" />
+      </v-tooltip>
+    </template>
+    <v-list>
+      <v-list-item
+        v-for="(network, index) in networks"
+        :key="network"
+        :value="network"
+      >
+        <!--         <SocialShare
+          :key="network"
+          class="text-black"
+          :network="network"
+          :title="$t('share-this-on', { item: item.name })"
+          :aria-label="$t('share-on', { network: network })"
+          :image="item.image"
+          :hashtags="item.tags.map((tag) => tag.name)"
+          :url="config.url + route.fullPath"
+        >
+          <template #label>
+            {{ network }}
+          </template>
+        </SocialShare> -->
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup>
+import { mergeProps } from "vue";
+import { useRoute } from "#imports";
+const route = useRoute();
+const props = defineProps({
+  networks: {
+    type: Array,
+    default: [
+      "facebook",
+      "twitter",
+      "linkedin",
+      "email",
+      "pinterest",
+      "reddit",
+      "whatsapp",
+      "pocket"
+    ]
+  },
+  item: {
+    type: Object,
+    required: true
+  }
+});
+</script>

package/dist/runtime/runtime/components/misc/atoms/Socials.vue

@@ -0,0 +1,120 @@
+<template>
+  <v-row no-gutters>
+    <v-col>
+      <template v-for="(value, key, index) in socials" :key="key + value">
+        <v-tooltip v-if="value" :location="location">
+          <template #activator="{ props }">
+            <v-btn
+              tile
+              v-bind="mergeProps(props, attrs)"
+              target="_blank"
+              :href="getSocialId(key, value)"
+              :color="dark ? 'transparent' : 'white'"
+              flat
+            >
+              <v-icon :color="dark ? 'white' : 'black'">
+                {{ getProfileIcon(key) }}</v-icon
+              >
+              <div v-if="labelled" class="text-uppercase text-muted ml-3">
+                {{ key }}
+              </div>
+            </v-btn>
+          </template>
+          <span>{{ $t("socials." + key) }}</span>
+        </v-tooltip>
+        <br v-if="labelled" />
+      </template>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { useAttrs, mergeProps } from "vue";
+import { useDisplay } from "vuetify";
+const attrs = useAttrs();
+const { name } = useDisplay();
+const props = defineProps({
+  socials: {
+    type: Object,
+    required: true
+  },
+  location: {
+    type: String,
+    default: "bottom"
+  },
+  dark: {
+    type: Boolean,
+    default: false
+  },
+  labelled: {
+    type: Boolean,
+    default: false
+  }
+});
+const getSocialId = (name2, id) => {
+  switch (name2) {
+    case "idRef":
+      return `https://www.idref.fr/${id}`;
+    case "mendeley":
+      return `https://www.mendeley.com/${id}`;
+    case "linkedin":
+      return `https://www.linkedin.com/company/${id}`;
+    case "twitter":
+      return `https://x.com/${id}`;
+    case "orcid":
+      return `https://orcid.org/${id}`;
+    case "scholar":
+      return `https://scholar.google.com/${id}`;
+    case "wikipedia":
+      return `https://fr.wikipedia.org/${id}`;
+    case "researchgate":
+      return `https://www.researchgate.net/${id}`;
+    case "youtube":
+      return `https://www.youtube.com/${id}`;
+    case "facebook":
+      return `https://www.facebook.com/pages/${id}`;
+    case "instagram":
+      return `https://www.instagram.com/${id}`;
+    case "github":
+      return `https://gitbub.com/${id}`;
+    case "rss":
+      return "";
+    case "website":
+      return "";
+  }
+};
+const getProfileIcon = (name2) => {
+  switch (name2) {
+    case "idRef":
+      return "mdi-account-plus-outline";
+    case "mendeley":
+      return "mdi-book";
+    case "bluesky":
+      return "mdi-cloud";
+    case "linkedin":
+      return "mdi-linkedin";
+    case "twitter":
+      return "mdi-twitter";
+    case "orcid":
+      return "mdi-account";
+    case "scholar":
+      return "mdi-google";
+    case "wikipedia":
+      return "mdi-wikipedia";
+    case "researchgate":
+      return "mdi-account";
+    case "youtube":
+      return "mdi-youtube";
+    case "facebook":
+      return "mdi-facebook";
+    case "instagram":
+      return "mdi-instagram";
+    case "github":
+      return "mdi-github";
+    case "rss":
+      return "mdi-rss";
+    case "website":
+      return "mdi-web";
+  }
+};
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="d-flex flex-row flex-wrap" v-bind="attrs">
+    <div v-for="(tag, index) in items" :key="tag + index" class="">
+      <v-chip
+        :size="
+          ['small', 'small', 'small', 'default', 'large'][
+            ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(name || 'md')
+          ]
+        "
+        class="mr-2 mt-2"
+        variant="outlined"
+        label
+        >{{ tag }}</v-chip
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useAttrs } from "vue";
+import { useDisplay } from "vuetify";
+const attrs = useAttrs();
+const { name, md, xl, lg, smAndDown, mdAndUp } = useDisplay();
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+    default: []
+  }
+});
+</script>