83 lines
2 KiB
Vue
83 lines
2 KiB
Vue
<template>
|
|
<article class="card">
|
|
<hgroup class="order-last">
|
|
<h3 class="card__title | font-serif | text-lg">
|
|
<router-link :to="uri" class="link-full">{{ step.label }}</router-link>
|
|
</h3>
|
|
</hgroup>
|
|
<DateTime :date="step.modified" />
|
|
<figure
|
|
class="card__images"
|
|
:data-count="images.length"
|
|
:data-plus="images.length > 3 ? images.length - 3 : undefined"
|
|
>
|
|
<template
|
|
v-for="(image, index) in images.slice(0, 3)"
|
|
:key="'image-' + index"
|
|
>
|
|
<img
|
|
v-if="image.url"
|
|
:src="image.url"
|
|
:alt="image.alt"
|
|
loading="lazy"
|
|
/>
|
|
<div v-else class="card__images" data-icon="document"></div>
|
|
</template>
|
|
</figure>
|
|
<footer
|
|
v-if="commentsCount > 0"
|
|
class="order-last | text-sm text-primary font-medium"
|
|
>
|
|
{{ commentsCount }} commentaire{{ commentsCount > 1 ? 's' : '' }}
|
|
</footer>
|
|
<div
|
|
class="btn btn--xs btn--dtl | mt-16"
|
|
v-if="isDesignToLightStep(step)"
|
|
data-icon="leaf"
|
|
lang="en"
|
|
>
|
|
Design to Light
|
|
</div>
|
|
</article>
|
|
</template>
|
|
<script setup>
|
|
import DateTime from './DateTime.vue';
|
|
import { useDesignToLightStore } from '../../../stores/designToLight';
|
|
import { computed } from 'vue';
|
|
|
|
const { images, step, uri } = defineProps({
|
|
images: Array,
|
|
step: Object,
|
|
uri: String,
|
|
});
|
|
|
|
console.log(images);
|
|
|
|
const { isDesignToLightStep } = useDesignToLightStore();
|
|
|
|
const commentsCount = computed(() => {
|
|
let count = 0;
|
|
|
|
if (Array.isArray(step.files)) {
|
|
for (const file of step.files) {
|
|
count += file?.comments?.length || 0;
|
|
}
|
|
} else {
|
|
if (step.files?.dynamic) {
|
|
for (const track of step.files.dynamic) {
|
|
for (const file of track.files) {
|
|
count += file?.comments?.length || 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (step.files?.static) {
|
|
for (const element of Object.values(step.files.static)) {
|
|
count += element?.comments?.length || 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
return count;
|
|
});
|
|
</script>
|