feat: add panel component

Author: cwandev

packages/elements/src/canvas/Canvas.vue

@@ -3,7 +3,6 @@ import type { FlowEmits, FlowProps, FlowSlots } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { VueFlow } from '@vue-flow/core'
 import { useForwardPropsEmits } from 'reka-ui'
-import { Controls } from '../controls'
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
 
@@ -24,10 +23,15 @@ const forwarded = useForwardPropsEmits(props, emits)
 <template>
   <VueFlow data-slot="canvas" v-bind="forwarded">
     <Background />
-    <Controls />
 
     <template v-if="slots['connection-line']" #connection-line="connectionLineProps">
       <slot name="connection-line" v-bind="connectionLineProps" />
     </template>
+
+    <template v-if="slots['zoom-pane']" #zoom-pane>
+      <slot name="zoom-pane" />
+    </template>
+
+    <slot />
   </VueFlow>
 </template>

packages/elements/src/controls/Controls.vue

@@ -16,6 +16,10 @@ const delegatedProps = reactiveOmit(props, 'class')
   <ControlsPrimitive
     data-slot="controls"
     v-bind="delegatedProps"
-    :class="cn('gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none! [&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!', props.class)"
+    :class="cn(
+      'gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!',
+      '[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!',
+      props.class,
+    )"
   />
 </template>

packages/elements/src/panel/Panel.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PanelPositionType } from '@vue-flow/core'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { Panel as PanelPrimitive } from '@vue-flow/core'
+import { reactiveOmit } from '@vueuse/core'
+
+interface PanelProps {
+  class?: HTMLAttributes['class']
+  position?: PanelPositionType
+}
+
+const props = withDefaults(defineProps<PanelProps>(), {
+  position: 'top-right',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <PanelPrimitive
+    data-slot="panel"
+    v-bind="delegatedProps"
+    :class="cn('m-4 overflow-hidden rounded-md border bg-card p-1', props.class)"
+  >
+    <slot />
+  </PanelPrimitive>
+</template>

packages/elements/src/panel/index.ts

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

packages/examples/src/workflow.vue

@@ -2,6 +2,9 @@
 import type { Edge, Node } from '@vue-flow/core'
 import { Canvas } from '@repo/elements/canvas'
 import { Connection } from '@repo/elements/connection'
+import { Controls } from '@repo/elements/controls'
+import { Panel } from '@repo/elements/panel'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { nanoid } from 'nanoid'
 import { ref } from 'vue'
 
@@ -38,6 +41,13 @@ const edges = ref<Edge[]>([
       <template #connection-line="connectionLineProps">
         <Connection v-bind="connectionLineProps" />
       </template>
+
+      <Controls />
+      <Panel position="top-right">
+        <Button size="sm" variant="secondary">
+          Export
+        </Button>
+      </Panel>
     </Canvas>
   </div>
 </template>