Toolbar

1<script setup lang="ts">
2import type { ToolbarAction } from "./types";
3import ToolbarItem from "./ToolbarItem.vue";
4 
5defineProps<{
6  primaryActions?: ToolbarAction[];
7  secondaryActions?: ToolbarAction[];
8}>();
9</script>
10 
11<template>
12  <div class="flex flex-wrap items-center gap-2 sm:gap-3">
13    <div v-if="primaryActions?.length" class="flex min-w-0 flex-wrap items-center gap-2">
14      <ToolbarItem
15        v-for="action in primaryActions"
16        :key="action.key"
17        :action="action"
18      />
19    </div>
20 
21    <div
22      v-if="$slots.default"
23      class="flex min-w-0 max-w-full items-center sm:ml-auto"
24    >
25      <slot />
26    </div>
27 
28    <div
29      v-if="secondaryActions?.length"
30      class="flex min-w-0 flex-wrap items-center gap-2"
31      :class="!$slots.default ? 'sm:ml-auto' : ''"
32    >
33      <ToolbarItem
34        v-for="action in secondaryActions"
35        :key="action.key"
36        :action="action"
37      />
38    </div>
39  </div>
40</template>