@paris-ias/list 1.0.137 → 1.0.139

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

@@ -3,7 +3,8 @@
     <div v-ripple class="border-thin pa-6">
       <FellowshipsBadges :item :pathPrefix />
       <div class="d-flex">
-        <div class="text-h4 text-black text-wrap mt-4 pb-4">
+        <v-skeleton-loader v-if="isLoading" type="heading" />
+        <div v-else class="text-h4 text-black text-wrap mt-4 pb-4">
           {{ item.name }}
         </div>
       </div>
@@ -16,9 +17,12 @@
           ]
         "
       >
-        <MDC v-if="item.description" :value="item.description" />
+        <v-skeleton-loader v-if="isLoading" type="text@4" />
+        <MDC v-else-if="item.description" :value="item.description" />
       </div>
+      <v-skeleton-loader v-if="isLoading" type="chip@3" class="mt-2" />
       <MiscMoleculesChipContainer
+        v-else
         :items="[
           $t('list.filters.fellowships.fellowshipType.' + item.fellowshipType),
           ...(props.item && props.item.disciplines
@@ -33,6 +37,8 @@
 
 <script setup>
 import { useDisplay } from "vuetify"
+import { computed } from "#imports"
+import { useRootStore } from "../../stores/root"
 
 const { name } = useDisplay()
 
@@ -49,7 +55,15 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
+
+const rootStore = useRootStore()
+const isLoading = computed(() => rootStore.loading || props.loading)
 </script>
 
 <style lang="scss"></style>

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

@@ -10,7 +10,7 @@
           <!--   FELLOWSHIP IMAGE -->
           <MiscAtomsImageContainer
             contain
-            :loading
+            :loading="loading"
             :src="item.image"
             :ratio="1 / 1"
           />
@@ -131,7 +131,7 @@
               :items="item.fellows || []"
               type="people"
               lazy
-              :loading
+              :loading="loading"
             >
               <div :class="mdAndUp ? 'text-h5' : 'text-h6'">
                 {{ $t("this-fellowship-alumni") }}

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

@@ -1,19 +1,34 @@
 <template>
-  {{ item }}
+  <v-row
+    class="my-2 highlight-on-hover"
+    no-gutters
+    @click="$router.push(pathPrefix)"
+  >
+    <v-col cols="12" class="px-4">
+      <v-skeleton-loader v-if="isLoading" type="avatar, text@6" />
+      <template v-else>
+        <div class="text-h6">{{ item.name || item.filename }}</div>
+        <div v-if="item.description" class="text-body-2 mt-1">
+          <MDC :value="item.description" />
+        </div>
+      </template>
+    </v-col>
+  </v-row>
+  <v-divider />
 </template>
 
 <script setup>
-defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
+import { computed } from "#imports"
+import { useRootStore } from "../../stores/root"
 
-  pathPrefix: {
-    type: String,
-    required: true,
-  },
+const rootStore = useRootStore()
+const props = defineProps({
+  item: { type: Object, required: true },
+  pathPrefix: { type: String, required: true },
+  loading: { type: Boolean, default: false },
 })
+
+const isLoading = computed(() => rootStore.loading || props.loading)
 </script>
 
 <style></style>

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

@@ -1,18 +1,34 @@
 <template>
-  {{ item }}
+  <v-row
+    class="highlight-on-hover pa-3"
+    no-gutters
+    @click="$router.push(pathPrefix)"
+  >
+    <v-col cols="12" class="px-6">
+      <v-skeleton-loader v-if="isLoading" type="avatar, text@8, button" />
+      <template v-else>
+        <div class="text-h6">{{ item.name || item.filename }}</div>
+        <div v-if="item.description" class="mt-2">
+          <MDC :value="item.description" />
+        </div>
+      </template>
+    </v-col>
+  </v-row>
+  <v-divider />
 </template>
 
 <script setup>
-defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-  pathPrefix: {
-    type: String,
-    required: true,
-  },
+import { computed } from "#imports"
+import { useRootStore } from "../../stores/root"
+
+const rootStore = useRootStore()
+const props = defineProps({
+  item: { type: Object, required: true },
+  pathPrefix: { type: String, required: true },
+  loading: { type: Boolean, default: false },
 })
+
+const isLoading = computed(() => rootStore.loading || props.loading)
 </script>
 
 <style></style>

package/dist/runtime/components/list/atoms/FiltersMenu.vue

@@ -12,6 +12,8 @@
         v-bind="tooltip"
         prepend-icon="mdi-tune-variant"
         :append-icon="open ? 'mdi-chevron-down' : 'mdi-chevron-up'"
+        :loading="$stores[type] && $stores[type].loading"
+        :disabled="$stores[type] && $stores[type].loading"
         @click="$emit('open', !open)"
       >
         <!--     <v-icon>mdi-tune-variant</v-icon> -->
@@ -26,6 +28,8 @@
 
 <script setup>
 import { useDisplay } from "vuetify"
+import { useNuxtApp } from "#imports"
+const { $stores } = useNuxtApp()
 const {
   name: nameDisplay,
   xs: isXsDisplay,
@@ -40,6 +44,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  type: {
+    type: String,
+    required: false,
+    default: "",
+  },
 })
 </script>
 

package/dist/runtime/components/list/atoms/PerPage.vue

@@ -1,12 +1,13 @@
 <template>
   <v-select
+    :id="'per-page-select' + type"
     v-model="itemsPerPage"
     class="perPageSelect"
-    density="compact"
     variant="outlined"
     :items="itemsPerPageArray"
     hide-details
-    :loading="$rootStore.loading"
+    density="compact"
+    :loading="$stores[type] && $stores[type].loading"
     @update:model-value="
       $rootStore.updateItemsPerPage({
         value: $event,

package/dist/runtime/components/list/atoms/ResetButton.vue

@@ -9,7 +9,7 @@
         icon
         class="ml-auto"
         v-bind="tooltip"
-        @click="rootStore.resetState(props.type, locale)"
+        @click="resetState(props.type)"
       >
         <v-icon>mdi-restore</v-icon>
       </v-btn>
@@ -30,5 +30,9 @@ const props = defineProps({
     required: true,
   },
 })
+const resetState = (type) => {
+  rootStore.resetState(type, locale.value)
+  rootStore.updateRouteQuery(type)
+}
 </script>
 <style lang="scss"></style>

package/dist/runtime/components/list/atoms/SearchInput.vue

@@ -2,6 +2,7 @@
   <div class="d-flex flex-grow-1 flex-column">
     <v-text-field
       v-model.trim="search"
+      :id="inputId"
       :placeholder="$t('list.search-type', [$t('items.' + type, 2)])"
       :append-icon="type === 'all' ? 'mdi-magnify' : ''"
       prepend-inner-icon="mdi-magnify"
@@ -12,7 +13,7 @@
       clearable
       tile
       type="search"
-      :loading="rootStore.loading"
+      :loading="isLoading"
     >
       <!--    :loading="$nuxt.loading || $store.state.loading" :class="{ 'mt-3':
       $store.state.scrolled }" -->
@@ -46,14 +47,20 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  id: {
+    type: String,
+    required: false,
+    default: "",
+  },
 })
+const inputId = computed(() => props.id || `search-input-${props.type}`)
 const search = computed({
   get() {
     return props.type === "all"
       ? rootStore.search
       : $stores[props.type]?.search || ""
   },
-  set: await useDebounceFn(async function (v) {
+  set: useDebounceFn(async (v) => {
     await rootStore.updateSearch({
       type: props.type,
       search: v || "",
@@ -61,6 +68,12 @@ const search = computed({
     })
   }, 300),
 })
+
+const isLoading = computed(() =>
+  props.type === "all"
+    ? rootStore.loading
+    : Boolean($stores[props.type]?.loading),
+)
 </script>
 
 <style lang="scss" scoped></style>

package/dist/runtime/components/list/atoms/SearchString.vue

@@ -1,154 +1,161 @@
 <template>
   <div class="mt-4 font-weight-light">
-    <template
-      v-if="
-        (!$stores[type].search || $stores[type].search.length === 0) &&
-        $stores[type].filtersCount === 0
-      "
-    >
-      {{
-        feminine
-          ? $t(
-              "list.0-items-found-f",
-              [
-                $stores[type].total,
-                $t("items." + props.type, $stores[type].total),
-              ],
-              $stores[type].total,
-            )
-          : $t(
-              "list.0-items-found",
-              [
-                $stores[type].total,
-                $t("items." + props.type, $stores[type].total),
-              ],
-              $stores[type].total,
-            )
-      }}
-    </template>
-    <!--  searching for "XXX" -->
-    <template
-      v-else-if="
-        !(!$stores[type].search || $stores[type].search.length === 0) &&
-        $stores[type].filtersCount === 0
-      "
-    >
-      {{
-        feminine
-          ? $t(
-              "list.0-items-found-searching-for-f",
-              [
-                $stores[type].total,
-                $t(
-                  "items." + props.type,
+    <ClientOnly v-if="showSkeleton">
+      <v-skeleton-loader :type="isSmAndDown ? 'text@2' : 'text'" />
+    </ClientOnly>
+    <template v-else>
+      <template
+        v-if="
+          (!$stores[type].search || $stores[type].search.length === 0) &&
+          $stores[type].filtersCount === 0
+        "
+      >
+        {{
+          feminine
+            ? $t(
+                "list.0-items-found-f",
+                [
                   $stores[type].total,
+                  $t("items." + props.type, $stores[type].total),
+                ],
+                $stores[type].total,
+              )
+            : $t(
+                "list.0-items-found",
+                [
                   $stores[type].total,
-                ),
-                $stores[type].search,
-              ],
-              $stores[type].total,
-            )
-          : $t(
-              "list.0-items-found-searching-for",
-              [
+                  $t("items." + props.type, $stores[type].total),
+                ],
                 $stores[type].total,
-                $t(
-                  "items." + props.type,
+              )
+        }}
+      </template>
+      <!--  searching for "XXX" -->
+      <template
+        v-else-if="
+          !(!$stores[type].search || $stores[type].search.length === 0) &&
+          $stores[type].filtersCount === 0
+        "
+      >
+        {{
+          feminine
+            ? $t(
+                "list.0-items-found-searching-for-f",
+                [
                   $stores[type].total,
+                  $t(
+                    "items." + props.type,
+                    $stores[type].total,
+                    $stores[type].total,
+                  ),
+                  $stores[type].search,
+                ],
+                $stores[type].total,
+              )
+            : $t(
+                "list.0-items-found-searching-for",
+                [
                   $stores[type].total,
-                ),
-                $stores[type].search,
-              ],
-              $stores[type].total,
-            )
-      }}
-    </template>
-    <!--  with X filters -->
-    <template
-      v-else-if="
-        (!$stores[type].search || $stores[type].search.length === 0) &&
-        $stores[type].filtersCount > 0
-      "
-    >
-      {{
-        feminine
-          ? $t(
-              "list.0-items-found-with-1-filter-f",
-              [
+                  $t(
+                    "items." + props.type,
+                    $stores[type].total,
+                    $stores[type].total,
+                  ),
+                  $stores[type].search,
+                ],
                 $stores[type].total,
-                $t(
-                  "items." + props.type,
+              )
+        }}
+      </template>
+      <!--  with X filters -->
+      <template
+        v-else-if="
+          (!$stores[type].search || $stores[type].search.length === 0) &&
+          $stores[type].filtersCount > 0
+        "
+      >
+        {{
+          feminine
+            ? $t(
+                "list.0-items-found-with-1-filter-f",
+                [
                   $stores[type].total,
+                  $t(
+                    "items." + props.type,
+                    $stores[type].total,
+                    $stores[type].total,
+                  ),
+                  $stores[type].filtersCount,
+                  $t("filters", $stores[type].filtersCount),
+                ],
+                $stores[type].total,
+              )
+            : $t(
+                "list.0-items-found-with-1-filter",
+                [
                   $stores[type].total,
-                ),
-                $stores[type].filtersCount,
-                $t("filters", $stores[type].filtersCount),
-              ],
-              $stores[type].total,
-            )
-          : $t(
-              "list.0-items-found-with-1-filter",
-              [
+                  $t("items." + type, $stores[type].total, $stores[type].total),
+                  $stores[type].filtersCount,
+                  $t("filters", $stores[type].filtersCount),
+                ],
                 $stores[type].total,
-                $t("items." + type, $stores[type].total, $stores[type].total),
-                $stores[type].filtersCount,
-                $t("filters", $stores[type].filtersCount),
-              ],
-              $stores[type].total,
-            )
-      }}
-    </template>
-    <!--  searching for "XXX" with Y filters  -->
-    <template
-      v-else-if="
-        $stores[type].search &&
-        $stores[type].search.length &&
-        $stores[type].filtersCount > 0
-      "
-    >
-      {{
-        feminine
-          ? $t(
-              "list.0-items-found-searching-for-with-1-filter-f",
-              [
+              )
+        }}
+      </template>
+      <!--  searching for "XXX" with Y filters  -->
+      <template
+        v-else-if="
+          $stores[type].search &&
+          $stores[type].search.length &&
+          $stores[type].filtersCount > 0
+        "
+      >
+        {{
+          feminine
+            ? $t(
+                "list.0-items-found-searching-for-with-1-filter-f",
+                [
+                  $stores[type].total,
+                  $t("items." + type, $stores[type].total),
+                  $stores[type].search,
+                  $stores[type].filtersCount,
+                  $t("filters", $stores[type].filtersCount),
+                ],
                 $stores[type].total,
-                $t("items." + type, $stores[type].total),
-                $stores[type].search,
-                $stores[type].filtersCount,
-                $t("filters", $stores[type].filtersCount),
-              ],
-              $stores[type].total,
-            )
-          : $t(
-              "list.0-items-found-searching-for-with-1-filter",
-              [
+              )
+            : $t(
+                "list.0-items-found-searching-for-with-1-filter",
+                [
+                  $stores[type].total,
+                  $t("items." + type, $stores[type].total),
+                  $stores[type].search,
+                  $stores[type].filtersCount,
+                  $t("filters", $stores[type].filtersCount),
+                ],
                 $stores[type].total,
-                $t("items." + type, $stores[type].total),
-                $stores[type].search,
-                $stores[type].filtersCount,
-                $t("filters", $stores[type].filtersCount),
-              ],
-              $stores[type].total,
-            )
-      }}
+              )
+        }}
+      </template>
+      <template v-if="$stores[type].numberOfPages > 1">
+        <!--   // Page X of Y -->
+        {{
+          $t("list.page-0-of-1", [
+            $stores[type].page || 1,
+            $stores[type].numberOfPages || 1,
+          ])
+        }}
+      </template>
+      <!--  X items per page -->
+      <!-- displayed by X -->
+      <!--  and sorted by X -->
     </template>
-    <template v-if="$stores[type].numberOfPages > 1">
-      <!--   // Page X of Y -->
-      {{
-        $t("list.page-0-of-1", [
-          $stores[type].page || 1,
-          $stores[type].numberOfPages || 1,
-        ])
-      }}
-    </template>
-    <!--  X items per page -->
-    <!-- displayed by X -->
-    <!--  and sorted by X -->
   </div>
 </template>
 
 <script setup>
-import { useNuxtApp, ref } from "#imports"
+import { useNuxtApp, ref, computed } from "#imports"
+import { useDisplay } from "vuetify"
+import { useRootStore } from "../../../stores/root"
 
 const { $stores } = useNuxtApp()
 const props = defineProps({
@@ -158,6 +165,35 @@ const props = defineProps({
   },
 })
 const feminine = ref(["news", "publications", "people"].includes(props.type))
+const { smAndDown: isSmAndDown } = useDisplay()
+const rootStore = useRootStore()
+
+const isLoading = computed(() =>
+  Boolean($stores[props.type] && $stores[props.type].loading),
+)
+const isTypeSearchActive = computed(() => {
+  const s = $stores[props.type]?.search
+  return Boolean(s && s.length)
+})
+const isGlobalSearchActive = computed(
+  () => typeof rootStore.search === "string" && rootStore.search.length > 0,
+)
+const isAnySearchActive = computed(
+  () => isTypeSearchActive.value || isGlobalSearchActive.value,
+)
+const isZeroTotal = computed(
+  () => Number($stores[props.type]?.total || 0) === 0,
+)
+const itemsCount = computed(() =>
+  Array.isArray($stores[props.type]?.items)
+    ? $stores[props.type]?.items?.length || 0
+    : 0,
+)
+const showSkeleton = computed(
+  () =>
+    isLoading.value ||
+    (isZeroTotal.value && (isAnySearchActive.value || itemsCount.value > 0)),
+)
 </script>
 
 <style lang="scss" scoped></style>

package/dist/runtime/components/list/atoms/SortMenu.vue

@@ -1,35 +1,39 @@
 <template>
-  <v-menu>
+  <v-menu :disabled="$stores[type].loading">
     <template #activator="{ props: menu }">
       <v-tooltip location="top">
         <template #activator="{ props: tooltip }">
-          <v-btn
-            x-large
-            outlined
-            tile
-            flat
-            icon
-            :class="{
-              'mt-3': isXsDisplay,
-            }"
-            v-bind="mergeProps(menu, tooltip)"
-          >
-            <v-icon>mdi-{{ current?.icon || defaultSort?.icon }}</v-icon>
-          </v-btn>
+          <template v-if="$stores[type].loading">
+            <v-skeleton-loader type="button" :class="{ 'mt-3': isXsDisplay }" />
+          </template>
+          <template v-else>
+            <v-btn
+              x-large
+              outlined
+              tile
+              flat
+              icon
+              :class="{ 'mt-3': isXsDisplay }"
+              v-bind="mergeProps(menu, tooltip)"
+            >
+              <v-icon>mdi-{{ current?.icon || defaultSort?.icon }}</v-icon>
+            </v-btn>
+          </template>
         </template>
         <div
           v-html="
             $t('list.sort-mode') +
-            $t('list.' + current.text || defaultSort.text)
+            $t('list.' + (current?.text || defaultSort?.text))
           "
         />
       </v-tooltip>
     </template>
     <v-list density="compact">
-      <template v-for="(item, index) in items">
+      <template v-for="(item, index) in $stores[props.type].sort">
         <v-list-item
           v-if="item.text !== current.text"
           :key="index"
+          :disabled="$stores[type].loading"
           @click="updateSort(item.value)"
         >
           <template #prepend>
@@ -59,7 +63,7 @@ const props = defineProps({
     required: true,
   },
 })
-const items = ref($stores[props.type].sort)
+const items = ref()
 const defaultSort = ref(
   $stores[props.type].sort[
     Object.keys($stores[props.type].sort).find(
@@ -87,7 +91,7 @@ const current = computed(() => {
 })
 
 const updateSort = async (value) => {
-  await rootStore.updateSort({ value, type: props.type, lang: locale.value })
+  rootStore.updateSort({ value, type: props.type, lang: locale.value })
 }
 </script>