feat: add toolbar component

Author: cwandev

packages/elements/package.json

@@ -11,6 +11,7 @@
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.3",
     "@vue-flow/core": "^1.47.0",
+    "@vue-flow/node-toolbar": "^1.1.1",
     "@vueuse/core": "^13.9.0",
     "ai": "^5.0.60",
     "lucide-vue-next": "^0.544.0",

packages/elements/src/toolbar/Toolbar.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { Position } from '@vue-flow/core'
+import { NodeToolbar } from '@vue-flow/node-toolbar'
+import { reactiveOmit } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes['class']
+    position?: Position
+  }>(),
+  {
+    position: Position.Bottom,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <NodeToolbar
+    data-slot="toolbar"
+    v-bind="delegatedProps"
+    :class="cn(
+      'flex items-center gap-1 rounded-sm border bg-background p-1.5',
+      props.class,
+    )"
+  >
+    <slot />
+  </NodeToolbar>
+</template>

packages/elements/src/toolbar/index.ts

@@ -0,0 +1 @@
+export { default as Toolbar } from './Toolbar.vue'

packages/examples/src/custom-node.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { NodeProps } from '@vue-flow/core'
 import { Node, NodeContent, NodeDescription, NodeFooter, NodeHeader, NodeTitle } from '@repo/elements/node'
+import { Toolbar } from '@repo/elements/toolbar'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
 
 const props = defineProps<NodeProps>()
 </script>
@@ -23,5 +25,14 @@ const props = defineProps<NodeProps>()
         {{ props.data?.footer }}
       </p>
     </NodeFooter>
+
+    <Toolbar>
+      <Button size="sm" variant="ghost">
+        Edit
+      </Button>
+      <Button size="sm" variant="ghost">
+        Delete
+      </Button>
+    </Toolbar>
   </Node>
 </template>