@paris-ias/list 1.0.188 → 1.0.190
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/runtime/components/events/DenseItem.vue +19 -19
- package/dist/runtime/components/list/atoms/ResultsList.vue +1 -1
- package/dist/runtime/components/list/molecules/GlobalSearchInput.vue +5 -9
- package/dist/runtime/components/list/organisms/List.vue +1 -1
- package/dist/runtime/components/news/DenseItem.vue +20 -4
- package/dist/runtime/components/people/DenseItem.vue +5 -3
- package/dist/runtime/components/people/View.vue +6 -1
- package/dist/runtime/components/projects/DenseItem.vue +8 -9
- package/dist/runtime/components/projects/RowsItem.vue +2 -0
- package/dist/runtime/components/projects/View.vue +0 -1
- package/dist/runtime/components/publications/DenseItem.vue +14 -11
- package/dist/runtime/composables/useFetchItem.js +4 -4
- package/dist/runtime/composables/useUtils.js +7 -4
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -6,27 +6,22 @@
|
|
|
6
6
|
:loading
|
|
7
7
|
:date-start="item.start"
|
|
8
8
|
:date-stop="item.stop"
|
|
9
|
-
class="
|
|
9
|
+
class="mr-4"
|
|
10
10
|
/>
|
|
11
11
|
</v-col>
|
|
12
12
|
<v-col v-if="mdAndUp" cols="auto">
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
:ratio="1 / 1"
|
|
23
|
-
:width="80"
|
|
24
|
-
style="width: 80px; height: 80px"
|
|
25
|
-
/>
|
|
26
|
-
</div>
|
|
13
|
+
<MiscAtomsImageContainer
|
|
14
|
+
cover
|
|
15
|
+
:loading
|
|
16
|
+
:src="
|
|
17
|
+
item && item.image && item.image.url ? item.image.url : '/default.png'
|
|
18
|
+
"
|
|
19
|
+
:ratio="1 / 1"
|
|
20
|
+
:width="100"
|
|
21
|
+
/>
|
|
27
22
|
</v-col>
|
|
28
23
|
|
|
29
|
-
<v-col align-self="start" class="
|
|
24
|
+
<v-col align-self="start" class="pl-4">
|
|
30
25
|
<v-skeleton-loader v-if="loading" type="chip" class="mr-3" width="120" />
|
|
31
26
|
<v-chip
|
|
32
27
|
v-else
|
|
@@ -73,10 +68,15 @@
|
|
|
73
68
|
/>
|
|
74
69
|
<v-skeleton-loader v-if="loading" type="text@3" class="mt-2" />
|
|
75
70
|
<MDC
|
|
76
|
-
v-else-if="
|
|
77
|
-
|
|
71
|
+
v-else-if="
|
|
72
|
+
item.name.length < 80 &&
|
|
73
|
+
item.summary &&
|
|
74
|
+
item.summary.length &&
|
|
75
|
+
mdAndUp
|
|
76
|
+
"
|
|
77
|
+
class="text-body-1 font-weight-light paragraph mt-n2 mb-n6"
|
|
78
78
|
:value="`${highlightAndTruncate(
|
|
79
|
-
|
|
79
|
+
150,
|
|
80
80
|
item.summary,
|
|
81
81
|
searchQuery.split(' '),
|
|
82
82
|
)}`"
|
|
@@ -192,15 +192,11 @@ const search = computed({
|
|
|
192
192
|
const value = v || ""
|
|
193
193
|
if (!value && !rootStore.search) return
|
|
194
194
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
search: value,
|
|
201
|
-
lang: locale.value,
|
|
202
|
-
})
|
|
203
|
-
}
|
|
195
|
+
rootStore.updateSearch({
|
|
196
|
+
type: props.type,
|
|
197
|
+
search: value,
|
|
198
|
+
lang: locale.value,
|
|
199
|
+
})
|
|
204
200
|
}, 300),
|
|
205
201
|
})
|
|
206
202
|
</script>
|
|
@@ -5,10 +5,10 @@
|
|
|
5
5
|
v-if="item.date"
|
|
6
6
|
:loading
|
|
7
7
|
:date-start="item.date"
|
|
8
|
-
class="
|
|
8
|
+
class="mr-4"
|
|
9
9
|
/>
|
|
10
10
|
</v-col>
|
|
11
|
-
<v-col v-if="mdAndUp" align-self="
|
|
11
|
+
<v-col v-if="mdAndUp" align-self="start" cols="1">
|
|
12
12
|
<MiscAtomsImageContainer
|
|
13
13
|
cover
|
|
14
14
|
:loading="loading"
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
item && item.image && item.image.url ? item.image.url : '/default.png'
|
|
17
17
|
"
|
|
18
18
|
:ratio="1 / 1"
|
|
19
|
-
:width="
|
|
19
|
+
:width="100"
|
|
20
20
|
/>
|
|
21
21
|
</v-col>
|
|
22
|
-
<v-col align-self="start" class="text-h5 dense
|
|
22
|
+
<v-col align-self="start" class="text-h5 dense pl-4 paragraph">
|
|
23
23
|
<v-skeleton-loader v-if="loading" type="heading" />
|
|
24
24
|
<template v-else>
|
|
25
25
|
<v-skeleton-loader
|
|
@@ -49,6 +49,22 @@
|
|
|
49
49
|
: item.name
|
|
50
50
|
"
|
|
51
51
|
/>
|
|
52
|
+
|
|
53
|
+
<v-skeleton-loader v-if="loading" type="text@3" class="mt-2" />
|
|
54
|
+
<MDC
|
|
55
|
+
v-else-if="
|
|
56
|
+
item.name.length < 80 &&
|
|
57
|
+
item.summary &&
|
|
58
|
+
item.summary.length &&
|
|
59
|
+
mdAndUp
|
|
60
|
+
"
|
|
61
|
+
class="text-body-1 font-weight-light paragraph line-clamp-1"
|
|
62
|
+
:value="`${highlightAndTruncate(
|
|
63
|
+
150,
|
|
64
|
+
item.summary,
|
|
65
|
+
searchQuery.split(' '),
|
|
66
|
+
)}`"
|
|
67
|
+
/>
|
|
52
68
|
</template>
|
|
53
69
|
</v-col>
|
|
54
70
|
</v-row>
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
item && item.image && item.image.url ? item.image.url : '/default.png'
|
|
9
9
|
"
|
|
10
10
|
:ratio="1 / 1"
|
|
11
|
-
:width="
|
|
11
|
+
:width="100"
|
|
12
12
|
class="ma-1"
|
|
13
13
|
/>
|
|
14
14
|
</v-col>
|
|
15
|
-
<v-col align-self="start" class="text-sm-h6 dense">
|
|
15
|
+
<v-col align-self="start" class="text-sm-h6 dense ml-4">
|
|
16
16
|
<v-skeleton-loader v-if="loading" type="heading" />
|
|
17
17
|
<div
|
|
18
18
|
v-else
|
|
@@ -45,8 +45,10 @@
|
|
|
45
45
|
: item.groups.vintage[0].theme
|
|
46
46
|
"
|
|
47
47
|
/>
|
|
48
|
+
<v-skeleton-loader v-if="loading" type="paragraph" />
|
|
49
|
+
|
|
48
50
|
<div
|
|
49
|
-
v-if="item.summary && mdAndUp"
|
|
51
|
+
v-else-if="item.summary && item.summary.length && mdAndUp"
|
|
50
52
|
class="text-body-1 font-weight-light paragraph"
|
|
51
53
|
:style="
|
|
52
54
|
'-webkit-line-clamp:' +
|
|
@@ -2,7 +2,12 @@
|
|
|
2
2
|
<v-row justify="center">
|
|
3
3
|
<v-col cols="12" sm="11" md="8" lg="8" xl="6">
|
|
4
4
|
<v-row no-gutters class="justify-center">
|
|
5
|
-
<v-col
|
|
5
|
+
<v-col
|
|
6
|
+
cols="12"
|
|
7
|
+
sm="10"
|
|
8
|
+
md="6"
|
|
9
|
+
class="d-flex align-center justify-center"
|
|
10
|
+
>
|
|
6
11
|
<!-- PEOPLE IMAGE -->
|
|
7
12
|
<MiscAtomsImageContainer
|
|
8
13
|
v-if="mdAndUp && item && item.image"
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
<v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover">
|
|
3
3
|
<v-col
|
|
4
4
|
v-if="mdAndUp"
|
|
5
|
-
align-self="
|
|
6
|
-
cols="
|
|
5
|
+
align-self="start"
|
|
6
|
+
cols="auto"
|
|
7
7
|
:offset="name.startsWith('search') ? 1 : 0"
|
|
8
8
|
>
|
|
9
9
|
<MiscAtomsImageContainer
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
item && item.image && item.image.url ? item.image.url : '/default.png'
|
|
14
14
|
"
|
|
15
15
|
:ratio="1 / 1"
|
|
16
|
-
:width="
|
|
16
|
+
:width="100"
|
|
17
17
|
/>
|
|
18
18
|
</v-col>
|
|
19
|
-
<v-col align-self="center" class="text-h5 dense pt-2">
|
|
19
|
+
<v-col align-self="center" class="text-h5 dense pt-2 pl-4">
|
|
20
20
|
<v-skeleton-loader v-if="loading" type="heading" width="50%" />
|
|
21
21
|
<span
|
|
22
22
|
v-else
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
? highlightAndTruncate(300, item.name, searchQuery.split(' '))
|
|
26
26
|
: item.name
|
|
27
27
|
"
|
|
28
|
+
class=""
|
|
28
29
|
/>
|
|
29
30
|
|
|
30
31
|
<MiscMoleculesChipContainer
|
|
@@ -32,14 +33,12 @@
|
|
|
32
33
|
:items="item.tags || []"
|
|
33
34
|
size="small"
|
|
34
35
|
/>
|
|
35
|
-
|
|
36
36
|
<v-skeleton-loader v-if="loading" type="text@2" class="mt-3" />
|
|
37
|
-
|
|
38
37
|
<MDC
|
|
39
|
-
v-else-if="item.summary"
|
|
40
|
-
class="text-caption font-weight-light
|
|
38
|
+
v-else-if="item.summary && item.summary.length && mdAndUp"
|
|
39
|
+
class="text-caption font-weight-light my-n2"
|
|
41
40
|
:value="`${highlightAndTruncate(
|
|
42
|
-
|
|
41
|
+
130,
|
|
43
42
|
item.summary,
|
|
44
43
|
searchQuery.split(' '),
|
|
45
44
|
)}`"
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover my-2">
|
|
3
|
-
<v-col
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
<v-col v-if="mdAndUp" cols="1">
|
|
4
|
+
<MiscAtomsDateStamp
|
|
5
|
+
v-if="item.date"
|
|
6
|
+
:loading
|
|
7
|
+
:date-start="item.date"
|
|
8
|
+
class="mr-4"
|
|
9
|
+
/>
|
|
10
|
+
</v-col>
|
|
11
|
+
<v-col v-if="mdAndUp" cols="1" class="align-center">
|
|
9
12
|
<MiscAtomsImageContainer
|
|
10
13
|
cover
|
|
11
14
|
:loading="loading"
|
|
@@ -13,17 +16,17 @@
|
|
|
13
16
|
item && item.image && item.image.url ? item.image.url : '/default.png'
|
|
14
17
|
"
|
|
15
18
|
:ratio="1 / 1"
|
|
16
|
-
:width="
|
|
19
|
+
:width="100"
|
|
17
20
|
/>
|
|
18
21
|
</v-col>
|
|
19
|
-
<v-col class="pl-
|
|
22
|
+
<v-col class="pl-4">
|
|
20
23
|
<div class="inline-flex flex-row flex-wrap">
|
|
21
24
|
<v-skeleton-loader v-if="loading" :type="heading" />
|
|
22
25
|
|
|
23
26
|
<template v-else>
|
|
24
27
|
<v-chip
|
|
25
28
|
v-if="eventCategory"
|
|
26
|
-
class="
|
|
29
|
+
class="mr-2"
|
|
27
30
|
variant="outlined"
|
|
28
31
|
size="small"
|
|
29
32
|
style="background-color: white; color: black"
|
|
@@ -33,7 +36,7 @@
|
|
|
33
36
|
v-if="eventType"
|
|
34
37
|
variant="outlined"
|
|
35
38
|
size="small"
|
|
36
|
-
class="
|
|
39
|
+
class="mr-2"
|
|
37
40
|
style="background-color: white; color: black"
|
|
38
41
|
>
|
|
39
42
|
{{ $t(eventType) }}
|
|
@@ -57,7 +60,7 @@
|
|
|
57
60
|
|
|
58
61
|
<v-skeleton-loader v-if="loading" type="text@3" class="mt-2" />
|
|
59
62
|
<MDC
|
|
60
|
-
v-else
|
|
63
|
+
v-else-if="item.summary && item.summary.length"
|
|
61
64
|
class="text-body-1 font-weight-light paragraph"
|
|
62
65
|
:value="`${highlightAndTruncate(
|
|
63
66
|
150,
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { useRoute, useSetI18nParams
|
|
1
|
+
import { useNuxtApp, useRoute, useSetI18nParams } from "#imports";
|
|
2
2
|
export const useFetchItem = () => {
|
|
3
|
+
const { $apollo } = useNuxtApp();
|
|
4
|
+
const route = useRoute();
|
|
5
|
+
const setI18nParams = useSetI18nParams();
|
|
3
6
|
const fetchItem = async ({
|
|
4
7
|
query,
|
|
5
8
|
key,
|
|
6
9
|
variables
|
|
7
10
|
}) => {
|
|
8
11
|
try {
|
|
9
|
-
const { $apollo } = useNuxtApp();
|
|
10
|
-
const route = useRoute();
|
|
11
12
|
const apolloClient = $apollo?.clients?.default;
|
|
12
13
|
if (!apolloClient) throw new Error("Apollo client is not available");
|
|
13
14
|
const { data } = await apolloClient.query({
|
|
@@ -17,7 +18,6 @@ export const useFetchItem = () => {
|
|
|
17
18
|
});
|
|
18
19
|
const item = data?.[key];
|
|
19
20
|
if (!item) throw new Error("Item not found in response");
|
|
20
|
-
const setI18nParams = useSetI18nParams();
|
|
21
21
|
if (!String(route.name ?? "").includes("people")) {
|
|
22
22
|
setI18nParams({
|
|
23
23
|
en: { slug: item.slug.en },
|
|
@@ -71,19 +71,22 @@ export const highlightAndTruncate = (stop, text, query) => {
|
|
|
71
71
|
query.forEach((element) => {
|
|
72
72
|
const regex = new RegExp(element, "gi");
|
|
73
73
|
text = text.replace(regex, (matchedText) => {
|
|
74
|
-
return `<
|
|
74
|
+
return `<strong style="
|
|
75
75
|
text-decoration: underline;
|
|
76
|
-
text-decoration-color: black;
|
|
77
76
|
text-decoration-thickness: 2px;
|
|
78
77
|
text-underline-offset: 2px;
|
|
79
|
-
">${matchedText}</
|
|
78
|
+
">${matchedText}</strong>`;
|
|
80
79
|
});
|
|
81
80
|
});
|
|
82
81
|
} else {
|
|
83
82
|
query.forEach((element) => {
|
|
84
83
|
const check = new RegExp(element, "gi");
|
|
85
84
|
text = text.replace(check, function(matchedText) {
|
|
86
|
-
return
|
|
85
|
+
return `<strong style="
|
|
86
|
+
text-decoration: underline;
|
|
87
|
+
text-decoration-thickness: 2px;
|
|
88
|
+
text-underline-offset: 2px;
|
|
89
|
+
">` + matchedText + "</strong>";
|
|
87
90
|
});
|
|
88
91
|
});
|
|
89
92
|
}
|