25 lines
1.0 KiB
Vue
25 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import {useToolbarStore} from '@/stores/toolbar-store'
|
|
import {RouterLink} from 'vue-router'
|
|
import {Divider} from "primevue";
|
|
|
|
const toolbar = useToolbarStore()
|
|
const keyOf = (b: { id?: string; text?: string }) => b.id ?? b.text ?? crypto.randomUUID()
|
|
</script>
|
|
<template>
|
|
<nav class="h-12 w-fit flex flex-row items-center gap-2 p-2 bg-white rounded-full sticky top-10 justify-end">
|
|
<component
|
|
v-for="(btn, idx) in toolbar.current"
|
|
:key="btn.id || btn.text || idx"
|
|
:is="btn.to ? RouterLink : 'button'"
|
|
class="flex flex-row gap-2 items-center"
|
|
:title="btn.title || btn.text"
|
|
v-bind="btn.to ? { to: btn.to } : { type: 'button', disabled: btn.disabled }"
|
|
@click="!btn.to && toolbar.invoke(btn.onClickId)"
|
|
>
|
|
<i v-if="btn.icon" :class="btn.icon" class="!p-2" />
|
|
<span v-if="btn.text">{{ btn.text }}</span>
|
|
<Divider v-if="idx + 1 !== toolbar.current.length" class="!m-0" layout="vertical" />
|
|
</component>
|
|
</nav>
|
|
</template> |