feat(docs): disable pan on mobile

docs/components/home/Nested.vue

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
 import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from '@braks/vue-flow'
+import { breakpointsTailwind } from '@vueuse/core'
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const emit = defineEmits(['pane'])
 
 const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
 const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
 
-const { onPaneReady } = useVueFlow({
+const { onPaneReady, panOnDrag } = useVueFlow({
   fitViewOnInit: true,
   connectionMode: ConnectionMode.Loose,
   zoomOnScroll: false,
   preventScrolling: false,
-  panOnDrag: false,
   translateExtent: [
     [-500, -100],
     [600, 500],
@@ -43,6 +45,14 @@ const { onPaneReady } = useVueFlow({
   ],
 })
 
+watch(
+  [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
+  () => {
+    panOnDrag.value = !breakpoints.isSmaller('md')
+  },
+  { immediate: true },
+)
+
 onPaneReady((i) => emit('pane', i))
 </script>
 <template>

docs/components/home/RGB.vue

@@ -15,7 +15,7 @@ type Colors = {
 
 const emit = defineEmits(['pane'])
 
-const { onPaneReady, getNode } = useVueFlow({
+const { onPaneReady, getNode, panOnDrag } = useVueFlow({
   id: 'rgb-flow',
   nodes: [
     { id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 0 } },
@@ -48,9 +48,11 @@ const color = ref<Colors>({
 watch(
   [breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']],
   () => {
-    if (breakpoints.isSmaller('md')) {
+    const mobile = breakpoints.isSmaller('md')
+    if (mobile) {
       getNode.value('4')!.position = { x: 300, y: -25 }
     }
+    panOnDrag.value = !mobile
   },
   { immediate: true },
 )