e525c9b7bd
- 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)
54 lines
1.7 KiB
Vue
54 lines
1.7 KiB
Vue
<template>
|
|
<div class="flex items-center space-x-2 h-full">
|
|
<template v-for="(item, index) in items" :key="index">
|
|
<ToolbarButton
|
|
v-if="item.type === 'button'"
|
|
:icon="item.icon"
|
|
:label="item.label"
|
|
:active="item.active"
|
|
:disabled="item.disabled"
|
|
@click="item.onClick" />
|
|
<ToolbarDropdown
|
|
v-else-if="item.type === 'dropdown'"
|
|
:icon="item.icon"
|
|
:label="item.label"
|
|
:active="item.active"
|
|
:items="item.items"
|
|
:align="align" />
|
|
<Divider v-else-if="item.type === 'divider'" />
|
|
<span
|
|
v-else-if="item.type === 'label'"
|
|
:class="['text-white px-1 select-none', item.class || 'text-xs']">{{ item.text }}</span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ToolbarButton from './ToolbarButton.vue';
|
|
import ToolbarDropdown from './ToolbarDropdown.vue';
|
|
import Divider from './Divider.vue';
|
|
|
|
defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => [],
|
|
validator: items => {
|
|
return items.every(
|
|
item =>
|
|
item &&
|
|
item.type &&
|
|
(item.type === 'button' ||
|
|
item.type === 'divider' ||
|
|
item.type === 'label' ||
|
|
(item.type === 'dropdown' && Array.isArray(item.items)))
|
|
);
|
|
}
|
|
},
|
|
align: {
|
|
type: String,
|
|
default: 'left'
|
|
}
|
|
});
|
|
</script>
|