init

src/components/Toolbar.vue

@@ -0,0 +1,28 @@
+<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  !text-xl sticky top-10 justify-items-end  justify-end">
+    <component
+        v-for="btnKey in toolbar.current.keys()"
+        :is="toolbar.current[btnKey].to ? RouterLink : 'button'"
+        :key="btnKey"
+        class="flex flex-row gap-2 items-center "
+        :title="toolbar.current[btnKey].title || toolbar.current[btnKey].text"
+        v-bind="toolbar.current[btnKey].to ? { to: toolbar.current[btnKey].to } : { type: 'button', disabled: toolbar.current[btnKey].disabled }"
+        @click="!toolbar.current[btnKey].to && toolbar.invoke(toolbar.current[btnKey].onClickId)"
+    >
+      <i v-if="toolbar.current[btnKey].icon" :class="toolbar.current[btnKey].icon" style="font-size: 1.1rem" class="!p-2"/>
+      <span v-if="toolbar.current[btnKey].text">{{ toolbar.current[btnKey].text }}</span>
+      <Divider v-if="btnKey+1 != toolbar.current.length" class="!m-0" layout="vertical"/>
+    </component>
+  </nav>
+
+
+</template>