feat: default to not capture the mouse

docs/components/knob.md

@@ -23,8 +23,6 @@ const volume = ref(75)
 </template>
 ```
 
-It will automatically lock the pointer to the knob, making sure all mouse movements are registered for the knob value changes.
-
 ## Example
 
 <script setup>
@@ -76,14 +74,14 @@ The component comes with a couple of features that are all adjustable:
 
 ### Mouse capture
 
-By default, the knob will capture the mouse pointer to prevent it leaving the position while adjusting the knob.
-This can be turned off using the `capture-mouse` prop:
+Optionally, you can make the knob capture the mouse pointer to prevent it leaving the position while adjusting the knob.
+This can be turned on using the `capture-mouse` prop:
 
 ```vue
 <template>
   <Knob
     v-model="volume"
-    :capture-mouse="false"
+    :capture-mouse="true"
   />
 </template>
 ```
@@ -92,7 +90,7 @@ Example:
 
 <Knob
   v-model="volume"
-  :capture-mouse="false"
+  :capture-mouse="true"
 />
 
 Volume: {{ volume }}
@@ -107,7 +105,7 @@ Both the key and the intensity can be configured:
   <Knob
     v-model="volume"
     :normal-strength="10"
-    :fine-strength="0.1"
+    :fine-strength="1"
     fine-key="Control"
   />
 </template>
@@ -118,7 +116,7 @@ Example:
 <Knob
   v-model="volume"
   :normal-strength="10"
-  :fine-strength="0.1"
+  :fine-strength="1"
   fine-key="Control"
 />
 
@@ -147,6 +145,8 @@ Example:
 <Knob
   v-model="volume"
   mouse-behaviour="Velocity"
+  :normal-strength="2"
+  :fine-strength="0.5"
 />
 
 Volume: {{ volume }}

docs/components/mouse-control.md

@@ -31,8 +31,6 @@ const delta = ref(0)
 </template>
 ```
 
-It will automatically lock the pointer to the element, making sure all mouse movements are registered for the value changes emitted by the control.
-
 ## Example
 
 <script setup>
@@ -93,12 +91,12 @@ The component comes with a couple of features that are all adjustable:
 
 ### Mouse capture
 
-By default, the control will capture the mouse pointer to prevent it leaving the position while adjusting.
-This can be turned off using the `capture-mouse` prop:
+Optionally, you can make the mouse control capture the mouse pointer to prevent it leaving the position while adjusting.
+This can be turned on using the `capture-mouse` prop:
 
 ```vue
 <template>
-  <MouseControl :capture-mouse="false">
+  <MouseControl :capture-mouse="true">
     <div />
   </MouseControl>
 </template>
@@ -107,7 +105,7 @@ This can be turned off using the `capture-mouse` prop:
 Example:
 
 <MouseControl
-  :capture-mouse="false"
+  :capture-mouse="true"
   @change="delta = Math.round($event*10)/10"
   @end="delta = ''"
 >

src/components/Knob.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref } from 'vue'
 import MouseControl from './MouseControl/MouseControl.vue'
 import type { MouseBehaviour } from './MouseControl/types'
 
@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<{
   min: 0,
   max: 100,
   tabIndex: 0,
-  captureMouse: true,
+  captureMouse: false,
 })
 
 const emit = defineEmits<{

src/components/MouseControl/MouseControl.vue

@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<{
   normalStrength: 1,
   fineStrength: 0.1,
   fineKey: 'Alt',
-  captureMouse: true,
+  captureMouse: false,
   behaviour: MouseBehaviour.Flat,
   friction: 0.5,
 })