37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<article class="card">
|
||
|
|
<hgroup class="order-last">
|
||
|
|
<h3 class="card__title | font-serif | text-lg">
|
||
|
|
<router-link :to="'/' + step.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 in images.slice(0, 3)" :key="image.uuid">
|
||
|
|
<img :src="image.url" :alt="image.alt" />
|
||
|
|
</template>
|
||
|
|
</figure>
|
||
|
|
<!-- <footer
|
||
|
|
v-if="images[0]?.comments?.length > 0"
|
||
|
|
class="order-last | text-sm text-primary font-medium"
|
||
|
|
>
|
||
|
|
{{ images[0].comments.length }} commentaire{{
|
||
|
|
images[0].comments.length > 1 ? "s" : ""
|
||
|
|
}}
|
||
|
|
</footer> -->
|
||
|
|
</article>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import DateTime from "./DateTime.vue";
|
||
|
|
import { usePageStore } from "../../../stores/page";
|
||
|
|
|
||
|
|
const { images, step } = defineProps({ images: Array, step: Object });
|
||
|
|
const { page } = usePageStore();
|
||
|
|
</script>
|