feat: add start & end events to Knob

Author: TobbenTM

src/components/Knob.vue

@@ -18,6 +18,8 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: number): void
+  (e: 'start'): void
+  (e: 'end'): void
 }>()
 
 function clamp(value: number) {
@@ -42,6 +44,8 @@ const percentage = computed(() => 100 / (props.max - props.min) * (clamp(props.m
       :fine-key="fineKey"
       :capture-mouse="captureMouse"
       @change="handleChange"
+      @start="$emit('start')"
+      @end="$emit('end')"
     >
       <slot
         :value="clamp(props.modelValue)"

src/components/MouseControl.vue

@@ -15,6 +15,8 @@ const props = withDefaults(defineProps<{
 
 const emits = defineEmits<{
   (e: 'change', delta: number): void
+  (e: 'start'): void
+  (e: 'end'): void
 }>()
 
 const el = ref<null | HTMLElement>(null)
@@ -57,6 +59,8 @@ function handleMouseUp() {
     document.exitPointerLock()
   else
     document.removeEventListener('mousemove', handleMove, false)
+
+  emits('end')
 }
 
 onMounted(() => {
@@ -70,6 +74,8 @@ onMounted(() => {
   el.value?.addEventListener('mousedown', (event) => {
     event.stopPropagation()
     event.preventDefault()
+    emits('start')
+
     if (props.captureMouse)
       el.value?.requestPointerLock()
     else