Allow click-and-drag to scroll knockout bracket in modal

src/components/modals/BracketModal.vue

@@ -3,11 +3,18 @@ import { useI18n } from "vue-i18n"
 
 import KnockoutBracket from "../play/KnockoutBracket.vue"
 
+import { useCursorGrab } from "@/composables/useCursorGrab"
+
 const { t } = useI18n()
 
 const visible = defineModel<boolean>("visible", {
     default: false,
 })
+
+const {
+    cursorStyle,
+    setGrabbing,
+} = useCursorGrab()
 </script>
 
 <template>
@@ -16,7 +23,11 @@ const visible = defineModel<boolean>("visible", {
         class="bracket-modal mx-4"
         v-model:visible="visible"
         :header="t('bracket.knockoutBracket')">
-        <div class="overflow-x-auto">
+        <div v-dragscroll
+            class="overflow-x-auto"
+            :style="cursorStyle"
+            @mousedown="setGrabbing(true)"
+            @mouseup="setGrabbing(false)">
             <KnockoutBracket />
         </div>
     </Dialog>

src/composables/useCursorGrab.ts

@@ -0,0 +1,18 @@
+import { computed, ref, type CSSProperties } from "vue"
+
+export const useCursorGrab = () => {
+    const isGrabbing = ref(false)
+
+    const cursorStyle = computed<CSSProperties>(() => ({
+        cursor: isGrabbing.value ? "grabbing" : "grab"
+    }))
+
+    const setGrabbing = (v: boolean) => {
+        isGrabbing.value = v
+    }
+
+    return {
+        cursorStyle,
+        setGrabbing,
+    }
+}

src/main.ts

@@ -34,6 +34,7 @@ import TabMenu from 'primevue/tabmenu'
 import Textarea from 'primevue/textarea'
 import Toast from 'primevue/toast'
 import ToastService from 'primevue/toastservice'
+import VueDragscroll from "vue-dragscroll"
 
 import App from './App.vue'
 import router from './router'
@@ -75,6 +76,7 @@ app.use(createPinia())
 app.use(router)
 app.use(PrimeVue)
 app.use(ToastService)
+app.use(VueDragscroll)
 
 app.component("Badge", Badge)
 app.component("Button", Button)