@paris-ias/list 1.0.3 → 1.0.5

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

@@ -0,0 +1,13 @@
+<template>
+  <v-row>
+    <slot>
+      <!-- fallback content -->
+      Rows view
+    </slot>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+/* const { signIn } = useSession() */
+onMounted(() => {})
+</script>

package/src/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 lang="ts">
+const props = defineProps({
+  items: [Object],
+  type: String,
+})
+</script>

package/src/runtime/components/misc/atoms/CountUp.vue

@@ -0,0 +1,198 @@
+<template>
+  <span> {{ displayedAmount }}</span>
+</template>
+
+<script setup lang="ts">
+/* 
+/!\ This component is a port by Antoine Cordelois 
+of the vue3-autocounter package made by ps-christopher 
+into a nuxt composition API component. 
+
+Source code is here: https://github.com/ps-cristopher/vue3-autocounter/blob/master/src/vue3-autocounter.vue
+*/
+interface Data {
+  timestamp: number
+  startTimestamp: number | null
+  currentStartAmount: number
+  currentAmount: number
+  currentDuration: number
+  paused: boolean
+  remaining: number
+  animationFrame: number
+}
+
+// Props
+const props = defineProps({
+  startAmount: {
+    type: Number,
+    default: 0,
+  },
+  endAmount: {
+    type: Number,
+    default: 0,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: 3,
+    validator(duration: number): boolean {
+      return duration > 0
+    },
+  },
+  autoinit: {
+    type: Boolean,
+    default: true,
+  },
+  prefix: {
+    type: String,
+    default: "",
+  },
+  suffix: {
+    type: String,
+    default: "",
+  },
+  separator: {
+    type: String,
+    default: ",",
+  },
+  decimalSeparator: {
+    type: String,
+    default: ".",
+  },
+  decimals: {
+    type: Number,
+    default: 0,
+    validator(decimals: number): boolean {
+      return decimals >= 0
+    },
+  },
+})
+
+// Reactive state
+const state = reactive<Data>({
+  timestamp: 0,
+  startTimestamp: null,
+  currentAmount: props.startAmount,
+  currentStartAmount: props.startAmount,
+  currentDuration: props.duration * 1000,
+  paused: false,
+  remaining: props.duration * 1000,
+  animationFrame: 0,
+})
+
+// Computed properties
+const isCountingUp = computed(() => props.endAmount > props.startAmount)
+
+const formatedAmount = computed((): string => {
+  const regex = /(\d+)(\d{3})/
+  const numberString: string = state.currentAmount.toFixed(props.decimals)
+  const numberArray: string[] = numberString.split(".")
+  let numbers: string = numberArray[0]
+  const decimals: string =
+    numberArray.length > 1 ? props.decimalSeparator + numberArray[1] : ""
+  const isNumber = !isNaN(parseFloat(props.separator))
+
+  if (props.separator && !isNumber) {
+    while (regex.test(numbers)) {
+      numbers = numbers.replace(regex, "$1" + props.separator + "$2")
+    }
+  }
+
+  return numbers + decimals
+})
+
+const displayedAmount = computed(
+  () => `${props.prefix}${formatedAmount.value}${props.suffix}`
+)
+
+// Methods
+
+const start = (): void => {
+  cancelAnimation()
+  state.currentStartAmount = props.startAmount
+  state.startTimestamp = null
+  state.currentDuration = props.duration * 1000
+  state.paused = false
+  state.animationFrame = window.requestAnimationFrame(counting)
+}
+
+const pause = (): void => {
+  if (state.paused) return
+  cancelAnimation()
+  state.paused = true
+}
+
+const resume = (): void => {
+  if (!state.paused) return
+  state.startTimestamp = null
+  state.currentDuration = +state.remaining
+  state.currentStartAmount = +state.currentAmount
+  state.animationFrame = window.requestAnimationFrame(counting)
+  state.paused = false
+}
+
+const reset = (): void => {
+  state.paused = false
+  state.startTimestamp = null
+  cancelAnimation()
+  state.currentAmount = props.startAmount
+  if (props.autoinit) start()
+  else state.paused = true
+}
+
+const counting = (timestamp: number): void => {
+  state.timestamp = timestamp
+  if (!state.startTimestamp) state.startTimestamp = timestamp
+  const progress: number = timestamp - state.startTimestamp
+  state.remaining = state.currentDuration - progress
+
+  if (!isCountingUp.value) {
+    state.currentAmount =
+      state.currentStartAmount -
+      (state.currentStartAmount - props.endAmount) *
+        (progress / state.currentDuration)
+    state.currentAmount =
+      state.currentAmount < props.endAmount
+        ? props.endAmount
+        : state.currentAmount
+  } else {
+    state.currentAmount =
+      state.currentStartAmount +
+      (props.endAmount - state.currentStartAmount) *
+        (progress / state.currentDuration)
+    state.currentAmount =
+      state.currentAmount > props.endAmount
+        ? props.endAmount
+        : state.currentAmount
+  }
+
+  if (progress < state.currentDuration) {
+    state.animationFrame = window.requestAnimationFrame(counting)
+  } else {
+    console.log("finished")
+  }
+}
+
+const cancelAnimation = (): void => {
+  if (state.animationFrame) window.cancelAnimationFrame(state.animationFrame)
+}
+
+// Watchers
+watch(() => props.startAmount, reset)
+watch(() => props.endAmount, reset)
+watch(() => props.duration, reset)
+
+// Lifecycle hooks
+onMounted(() => {
+  state.currentAmount = props.startAmount
+  state.currentStartAmount = props.startAmount
+  state.currentDuration = props.duration * 1000
+  state.remaining = props.duration * 1000
+  if (props.autoinit) start()
+  else state.paused = true
+})
+
+onUnmounted(() => {
+  cancelAnimation()
+})
+</script>

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

@@ -0,0 +1,104 @@
+<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"
+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 lang="scss" scoped>
+.date-stamp {
+  font-family: "Open sans";
+  .day {
+    font-size: 2.6rem;
+    line-height: 2.6rem;
+    font-family: "Bodoni Moda", sans-serif;
+  }
+  .month-year {
+    padding-left: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.2rem;
+  }
+
+  .day-stop {
+    font-size: 2rem;
+    line-height: 2rem;
+    font-family: "Bodoni Moda", sans-serif;
+  }
+  .month-year-stop {
+    padding-left: 0.5rem;
+    font-size: 0.8rem;
+    line-height: 1.2rem;
+  }
+}
+</style>

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

@@ -0,0 +1,105 @@
+<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
+        :to="
+          link
+            ? localePath({
+                name: link,
+                params: { slug: slugify(slug) },
+              })
+            : null
+        "
+      >
+        <div 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
+      ></nuxt-link>
+    </template>
+  </div>
+</template>
+
+<script setup>
+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 0.5s ease-in-out;
+  width: 100%;
+}
+
+.img-animation:hover {
+  transform: scale(1.1);
+}
+</style>

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

@@ -0,0 +1,60 @@
+<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 config from "~/static.config"
+import { mergeProps } from "vue"
+const route = useRoute()
+
+const props = defineProps({
+  networks: {
+    type: Array,
+    default: [
+      "facebook",
+      "twitter",
+      "linkedin",
+      "email",
+      "pinterest",
+      "reddit",
+      "whatsapp",
+      "pocket",
+    ],
+  },
+  item: {
+    type: Object,
+    required: true,
+  },
+})
+
+/* console.log("PRPOS", props.item) */
+</script>

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

@@ -0,0 +1,127 @@
+<template>
+  <v-row no-gutters>
+    <v-col>
+      <template v-for="(value, key, index) in socials" :key="key + value">
+        <v-tooltip :location="location" v-if="value">
+          <template v-slot:activator="{ props }">
+            <v-btn
+              tile
+              v-bind="mergeProps(props, attrs)"
+              target="_blank"
+              :href="getSocialId(key, value)"
+              :color="dark ? 'black' : '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 } from "vue"
+import { mergeProps } from "vue"
+
+const attrs = useAttrs()
+import { useDisplay } from "vuetify"
+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 = (name, id) => {
+  switch (name) {
+    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 = (name) => {
+  switch (name) {
+    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>
+
+<style lang="scss"></style>

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

@@ -0,0 +1,35 @@
+<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>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,41 @@
+<template>
+  <v-row>
+    <v-col
+      v-for="(items, type) in filteredRelatedItems"
+      :key="type"
+      cols="12"
+      md="6"
+      lg="4"
+      xl="3"
+      class="d-flex flex-column align-center"
+    >
+      <MiscMoleculesRelatedItems :type="type" :items="items" />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+const props = defineProps({
+  related: {
+    type: Object,
+    required: true,
+  },
+})
+
+const typeMapping = {
+  events: "events",
+  people: "people",
+  news: "news",
+  projects: "projects",
+}
+
+const filteredRelatedItems = computed(() => {
+  const result = {}
+  for (const key in typeMapping) {
+    if (props.related[key] && props.related[key].length > 0) {
+      result[typeMapping[key]] = props.related[key]
+    }
+  }
+  return result
+})
+</script>