104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<template>
|
|
<button
|
|
type="button"
|
|
class="fiche-mini-card"
|
|
:aria-label="fiche.nom"
|
|
@click="emit('open')"
|
|
>
|
|
<span class="fiche-mini-card__nom">{{ fiche.nom }}</span>
|
|
<span v-if="fiche.resume" class="fiche-mini-card__resume">{{ fiche.resume }}</span>
|
|
|
|
<ChipGroup
|
|
v-if="fiche.chips.length || fiche.echelle"
|
|
:aria-label="`Étiquettes de ${fiche.nom}`"
|
|
class="fiche-mini-card__chips"
|
|
>
|
|
<Chip v-if="fiche.echelle" as="span" variant="echelle" :label="fiche.echelle" />
|
|
<Chip v-for="chip in fiche.chips" :key="chip" as="span" variant="fonction" :label="chip" />
|
|
</ChipGroup>
|
|
|
|
<span v-if="!fiche.geoloc" class="fiche-mini-card__no-geo">Sans localisation</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { MiniFiche } from '~/composables/useFicheAdapter'
|
|
|
|
defineProps<{
|
|
fiche: MiniFiche
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
open: []
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fiche-mini-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
padding: var(--space-sm);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
transition: background-color var(--dur-fast) var(--ease-out),
|
|
box-shadow var(--dur-fast) var(--ease-out);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.fiche-mini-card {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.fiche-mini-card:hover {
|
|
background: var(--surface-2);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.fiche-mini-card:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.fiche-mini-card__nom {
|
|
width: 100%;
|
|
font-size: var(--fs-sm);
|
|
font-weight: var(--fw-semibold);
|
|
line-height: var(--lh-tight);
|
|
color: var(--text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.fiche-mini-card__resume {
|
|
width: 100%;
|
|
margin-top: var(--space-2xs);
|
|
font-size: var(--fs-xs);
|
|
line-height: var(--lh-base);
|
|
color: var(--text-muted);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fiche-mini-card__chips {
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
.fiche-mini-card__no-geo {
|
|
margin-top: var(--space-2xs);
|
|
font-size: var(--fs-xs);
|
|
color: var(--text-subtle);
|
|
}
|
|
</style>
|