43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<template>
|
|
<router-link :to="project.uri">
|
|
<article class="project-item | flex | rounded-2xl | px-32 py-32">
|
|
<hgroup>
|
|
<h3>{{ project.title }}</h3>
|
|
<p>
|
|
Dernière mise à jour le
|
|
<time :datetime="project.modified">{{
|
|
frenchFormattedModified
|
|
}}</time>
|
|
</p>
|
|
</hgroup>
|
|
<img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
|
|
<ol class="project-steps" :data-steps="project.steps.length" :style="'--steps:'+project.steps.length">
|
|
<li
|
|
v-for="step in project.steps"
|
|
class="project-step"
|
|
:data-status="setStatus(project.steps, project.currentStep, step)"
|
|
>
|
|
<span class="pill" :data-icon="step.id">
|
|
<span>{{ step.label }}</span>
|
|
</span>
|
|
</li>
|
|
</ol>
|
|
</article>
|
|
</router-link>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from "dayjs";
|
|
import "dayjs/locale/fr";
|
|
import { useProjectStore } from "../../stores/project";
|
|
|
|
dayjs.locale("fr");
|
|
|
|
const { project } = defineProps({ project: Array });
|
|
|
|
const frenchFormattedModified = dayjs(project.modified).format(
|
|
"dddd D MMMM YYYY"
|
|
);
|
|
|
|
const { stepsLabels, setStatus } = useProjectStore();
|
|
</script>
|