feat(home): toolbar filtre/affichage et modale options d'affichage
- Correction du dropdown toolbar : prop align (left/right) pour éviter le débordement hors écran côté droit - Filtre de collection par statut (all/completed/ongoing) persisté dans userPreferencesStore - toolbarConfig rendu réactif (computed) avec isSelected sur Filter, Sort et View - Modale Options d'affichage par vue (Grille, Overview, Table) avec toggles persistés - Composant ToggleRow réutilisable - Normalisation author → authors dans l'entité Manga (l'API renvoie author string)
This commit is contained in:
parent
214f470e77
commit
e525c9b7bd
@@ -8,6 +8,7 @@
|
||||
|
||||
<!-- Cover -->
|
||||
<img
|
||||
v-if="options.showCover"
|
||||
:src="manga.thumbnailUrl || manga.imageUrl || '/placeholder-cover.png'"
|
||||
alt=""
|
||||
class="h-36 w-24 object-cover flex-shrink-0 self-start"
|
||||
@@ -23,13 +24,21 @@
|
||||
{{ manga.title }}
|
||||
</RouterLink>
|
||||
<span
|
||||
v-if="manga.status"
|
||||
v-if="options.showStatus && manga.status"
|
||||
class="text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0"
|
||||
:class="statusClass(manga.status)">
|
||||
{{ manga.status }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">
|
||||
<div class="flex items-center gap-3 mt-1 flex-wrap">
|
||||
<span v-if="options.showAuthor && manga.authors?.length" class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ manga.authors.join(', ') }}
|
||||
</span>
|
||||
<span v-if="options.showYear && manga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ manga.publicationYear }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="options.showDescription && manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">
|
||||
{{ manga.description }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -100,6 +109,10 @@ const props = defineProps({
|
||||
mangas: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({ showCover: true, showStatus: true, showDescription: true, showAuthor: false, showYear: false })
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user