feat(additional-components): add position prop to MiniMap & Controls

packages/additional-components/src/controls/Controls.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { useVueFlow } from '@vue-flow/core'
+import type { PanelPosition } from '../panel'
+import { Panel } from '../panel'
 import type { ControlProps } from './types'
 import ControlButton from './ControlButton.vue'
 import PlusIcon from './icons/plus.svg'
@@ -8,7 +10,13 @@ import FitView from './icons/fitview.svg'
 import Lock from './icons/lock.svg'
 import Unlock from './icons/unlock.svg'
 
-const { showZoom = true, showFitView = true, showInteractive = true, fitViewParams } = defineProps<ControlProps>()
+const {
+  showZoom = true,
+  showFitView = true,
+  showInteractive = true,
+  fitViewParams,
+  position = 'bottom-left' as PanelPosition,
+} = defineProps<ControlProps>()
 
 const emit = defineEmits<{
   (event: 'zoomIn'): void
@@ -49,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <div class="vue-flow__controls">
+  <Panel class="vue-flow__controls" :position="position">
     <slot name="top"></slot>
     <template v-if="showZoom">
       <slot name="control-zoom-in">
@@ -89,5 +97,5 @@ export default {
       </slot>
     </template>
     <slot></slot>
-  </div>
+  </Panel>
 </template>

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

@@ -1,4 +1,5 @@
 import type { FitViewParams } from '@vue-flow/core'
+import type { PanelPosition } from '../panel'
 
 export interface ControlProps {
   /** Show the zoom icon */
@@ -9,4 +10,6 @@ export interface ControlProps {
   showInteractive?: boolean
   /** Params to use on fitView */
   fitViewParams?: FitViewParams
+  /** Position of the controls {@link PanelPosition} */
+  position: PanelPosition
 }