Files
Mangarr/assets/vue/app/shared/components/ui/ToolbarSection.vue

45 lines
1.4 KiB
Vue

<template>
<div class="flex items-center space-x-2">
<template v-for="(item, index) in items" :key="index">
<ToolbarButton
v-if="item.type === 'button'"
:icon="item.icon"
:label="item.label"
:active="item.active"
@click="item.onClick" />
<ToolbarDropdown
v-else-if="item.type === 'dropdown'"
:icon="item.icon"
:label="item.label"
:active="item.active"
:items="item.items" />
<Divider v-else-if="item.type === 'divider'" />
<!-- Ajoutez d'autres types d'éléments ici si nécessaire -->
</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 === 'dropdown' && Array.isArray(item.items)))
);
}
}
});
</script>