feat(additional-components): add Panel component

packages/additional-components/src/index.ts

@@ -6,3 +6,4 @@
 export * from './background'
 export * from './controls'
 export * from './minimap'
+export * from './panel'

packages/additional-components/src/panel/Panel.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useVueFlow } from '@vue-flow/core'
+import type { PanelProps } from './types'
+
+const props = defineProps<PanelProps>()
+
+const pointerEvents = useVueFlow()
+const positionClasses = computed(() => `${props.position}`.split('-'))
+</script>
+
+<template>
+  <div class="vue-flow__panel" :class="positionClasses" :style="{ pointerEvents }">
+    <slot />
+  </div>
+</template>

packages/additional-components/src/panel/index.ts

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

packages/additional-components/src/panel/types.ts

@@ -0,0 +1,12 @@
+export enum PanelPosition {
+  TopLeft = 'top-left',
+  TopCenter = 'top-center',
+  TopRight = 'top-right',
+  BottomLeft = 'bottom-left',
+  BottomCenter = 'bottom-center',
+  BottomRight = 'bottom-right',
+}
+
+export interface PanelProps {
+  position: PanelPosition
+}